@spectrum-web-components/picker-button 0.40.4 → 0.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/package.json +13 -8
  2. package/src/picker-button.css.dev.js +8 -8
  3. package/src/picker-button.css.dev.js.map +1 -1
  4. package/src/picker-button.css.js +8 -8
  5. package/src/picker-button.css.js.map +1 -1
  6. package/src/spectrum-config.js +1 -0
  7. package/src/spectrum-picker-button.css.dev.js +8 -8
  8. package/src/spectrum-picker-button.css.dev.js.map +1 -1
  9. package/src/spectrum-picker-button.css.js +8 -8
  10. package/src/spectrum-picker-button.css.js.map +1 -1
  11. package/stories/picker-button-sizes.stories.js +1 -1
  12. package/stories/picker-button-sizes.stories.js.map +1 -1
  13. package/stories/picker-button.stories.js +1 -1
  14. package/stories/picker-button.stories.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/picker-button",
3
- "version": "0.40.4",
3
+ "version": "0.41.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -29,6 +29,11 @@
29
29
  "development": "./src/PickerButton.dev.js",
30
30
  "default": "./src/PickerButton.js"
31
31
  },
32
+ "./src/index.js": {
33
+ "development": "./src/index.dev.js",
34
+ "default": "./src/index.js"
35
+ },
36
+ "./src/picker-button.css.js": "./src/picker-button.css.js",
32
37
  "./sp-picker-button.js": {
33
38
  "development": "./sp-picker-button.dev.js",
34
39
  "default": "./sp-picker-button.js"
@@ -52,14 +57,14 @@
52
57
  "lit-html"
53
58
  ],
54
59
  "dependencies": {
55
- "@spectrum-web-components/base": "^0.40.4",
56
- "@spectrum-web-components/button": "^0.40.4",
57
- "@spectrum-web-components/icon": "^0.40.4",
58
- "@spectrum-web-components/icons-ui": "^0.40.4",
59
- "@spectrum-web-components/shared": "^0.40.4"
60
+ "@spectrum-web-components/base": "^0.41.0",
61
+ "@spectrum-web-components/button": "^0.41.0",
62
+ "@spectrum-web-components/icon": "^0.41.0",
63
+ "@spectrum-web-components/icons-ui": "^0.41.0",
64
+ "@spectrum-web-components/shared": "^0.41.0"
60
65
  },
61
66
  "devDependencies": {
62
- "@spectrum-css/pickerbutton": "^4.0.23"
67
+ "@spectrum-css/pickerbutton": "^4.1.1"
63
68
  },
64
69
  "types": "./src/index.d.ts",
65
70
  "customElements": "custom-elements.json",
@@ -67,5 +72,5 @@
67
72
  "./sp-*.js",
68
73
  "./**/*.dev.js"
69
74
  ],
70
- "gitHead": "e7bca020d0da71c4d92e95044bf58780d2e8e603"
75
+ "gitHead": "0bf38fd427adc39804b228a4c61de623e5ebb82e"
71
76
  }
package/src/picker-button.css.dev.js CHANGED
@@ -69,29 +69,29 @@ const styles = css`
69
69
  --mod-picker-button-width,var(--spectrum-picker-button-width)
70
70
  );border-style:none;box-sizing:border-box;justify-content:center;padding:var(
71
71
  --mod-picker-button-padding,var(--spectrum-picker-button-padding)
72
- )}.root:hover .spectrum-PickerButton-fill{background-color:var(
72
+ )}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(
73
73
  --mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)
74
74
  )}.root:hover .spectrum-PickerButton-label{color:var(
75
75
  --mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)
76
76
  )}.root:hover .spectrum-PickerButton-icon{color:var(
77
77
  --mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)
78
- )}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
78
+ )}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
79
79
  --mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)
80
80
  )}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(
81
81
  --mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)
82
82
  )}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(
83
83
  --mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)
84
- )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(
84
+ )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
85
85
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
86
- )}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(
86
+ )}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
87
87
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
88
- )}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(
88
+ )}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
89
89
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
90
- )}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(
90
+ )}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
91
91
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
92
- )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(
92
+ )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
93
93
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
94
- )}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(
94
+ )}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
95
95
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
96
96
  )}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(
97
97
  --mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)
package/src/picker-button.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["picker-button.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}:host{display:inline-flex}.root{display:flex}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}:host{display:inline-flex}.root{display:flex}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoLf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/picker-button.css.js CHANGED
@@ -67,29 +67,29 @@
67
67
  --mod-picker-button-width,var(--spectrum-picker-button-width)
68
68
  );border-style:none;box-sizing:border-box;justify-content:center;padding:var(
69
69
  --mod-picker-button-padding,var(--spectrum-picker-button-padding)
70
- )}.root:hover .spectrum-PickerButton-fill{background-color:var(
70
+ )}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(
71
71
  --mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)
72
72
  )}.root:hover .spectrum-PickerButton-label{color:var(
73
73
  --mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)
74
74
  )}.root:hover .spectrum-PickerButton-icon{color:var(
75
75
  --mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)
76
- )}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
76
+ )}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
77
77
  --mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)
78
78
  )}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(
79
79
  --mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)
80
80
  )}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(
81
81
  --mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)
82
- )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(
82
+ )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
83
83
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
84
- )}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(
84
+ )}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
85
85
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
86
- )}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(
86
+ )}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
87
87
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
88
- )}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(
88
+ )}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
89
89
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
90
- )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(
90
+ )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
91
91
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
92
- )}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(
92
+ )}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
93
93
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
94
94
  )}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(
95
95
  --mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)
package/src/picker-button.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["picker-button.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}:host{display:inline-flex}.root{display:flex}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}:host{display:inline-flex}.root{display:flex}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoLf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -134,6 +134,7 @@ const config = {
134
134
  fileName: 'picker-button',
135
135
  components: [
136
136
  converter.classToClass('spectrum-PickerButton', 'root'),
137
+ converter.classToAttribute('is-focused', 'focused'),
137
138
  {
138
139
  find: [builder.pseudoClass('focus')],
139
140
  replace: [
package/src/spectrum-picker-button.css.dev.js CHANGED
@@ -69,29 +69,29 @@ const styles = css`
69
69
  --mod-picker-button-width,var(--spectrum-picker-button-width)
70
70
  );border-style:none;box-sizing:border-box;display:flex;justify-content:center;padding:var(
71
71
  --mod-picker-button-padding,var(--spectrum-picker-button-padding)
72
- )}.root:hover .spectrum-PickerButton-fill{background-color:var(
72
+ )}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(
73
73
  --mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)
74
74
  )}.root:hover .spectrum-PickerButton-label{color:var(
75
75
  --mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)
76
76
  )}.root:hover .spectrum-PickerButton-icon{color:var(
77
77
  --mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)
78
- )}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
78
+ )}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
79
79
  --mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)
80
80
  )}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(
81
81
  --mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)
82
82
  )}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(
83
83
  --mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)
84
- )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(
84
+ )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
85
85
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
86
- )}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(
86
+ )}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
87
87
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
88
- )}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(
88
+ )}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
89
89
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
90
- )}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(
90
+ )}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
91
91
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
92
- )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(
92
+ )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
93
93
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
94
- )}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(
94
+ )}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
95
95
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
96
96
  )}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(
97
97
  --mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)
package/src/spectrum-picker-button.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-picker-button.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;display:flex;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;display:flex;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoLf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-picker-button.css.js CHANGED
@@ -67,29 +67,29 @@
67
67
  --mod-picker-button-width,var(--spectrum-picker-button-width)
68
68
  );border-style:none;box-sizing:border-box;display:flex;justify-content:center;padding:var(
69
69
  --mod-picker-button-padding,var(--spectrum-picker-button-padding)
70
- )}.root:hover .spectrum-PickerButton-fill{background-color:var(
70
+ )}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(
71
71
  --mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)
72
72
  )}.root:hover .spectrum-PickerButton-label{color:var(
73
73
  --mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)
74
74
  )}.root:hover .spectrum-PickerButton-icon{color:var(
75
75
  --mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)
76
- )}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
76
+ )}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
77
77
  --mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)
78
78
  )}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(
79
79
  --mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)
80
80
  )}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(
81
81
  --mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)
82
- )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(
82
+ )}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
83
83
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
84
- )}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(
84
+ )}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(
85
85
  --mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)
86
- )}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(
86
+ )}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
87
87
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
88
- )}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(
88
+ )}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(
89
89
  --mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)
90
- )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(
90
+ )}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
91
91
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
92
- )}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(
92
+ )}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(
93
93
  --mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)
94
94
  )}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(
95
95
  --mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)
package/src/spectrum-picker-button.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-picker-button.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;display:flex;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-focused .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.root{--spectrum-picker-button-height:var(--spectrum-component-height-100);--spectrum-picker-button-width:var(--spectrum-component-height-100);--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);--spectrum-picker-button-padding:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-100\n);--spectrum-picker-button-border-radius-rounded:var(\n--spectrum-corner-radius-200\n);--spectrum-picker-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-button-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-button-font-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-button-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-button-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-picker-button-font-style:var(--spectrum-default-font-style);--spectrum-picker-button-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-picker-button-font-size:var(--spectrum-font-size-100);--spectrum-picker-button-background-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([disabled]) .root{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-picker-button-font-color:var(\n--mod-picker-button-font-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-hover:var(\n--mod-picker-button-font-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-font-color-down:var(\n--mod-picker-button-font-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color:var(\n--mod-picker-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-hover:var(\n--mod-picker-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-picker-button-icon-color-down:var(\n--mod-picker-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n)}.root.spectrum-PickerButton--quiet{--mod-picker-button-background-color:var(\n--mod-picker-button-background-color-quiet,transparent\n);--mod-picker-button-background-color-hover:var(\n--mod-picker-button-background-color-hover-quiet,transparent\n);--mod-picker-button-background-color-down:var(\n--mod-picker-button-background-color-down-quiet,transparent\n);--mod-picker-button-background-color-key-focus:var(\n--mod-picker-button-background-color-key-focus-quiet,transparent\n);--mod-picker-button-border-color:var(\n--mod-picker-button-border-color-quiet,transparent\n)}:host([size=s]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-75);--spectrum-picker-button-width:var(--spectrum-component-height-75);--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);--spectrum-picker-button-font-size:var(--spectrum-font-size-75);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-75\n)}:host([size=l]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-200);--spectrum-picker-button-width:var(--spectrum-component-height-200);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);--spectrum-picker-button-font-size:var(--spectrum-font-size-200);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-200\n)}:host([size=xl]) .root{--spectrum-picker-button-height:var(--spectrum-component-height-300);--spectrum-picker-button-width:var(--spectrum-component-height-300);--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);--spectrum-picker-button-font-size:var(--spectrum-font-size-300);--spectrum-picker-button-fill-padding:var(\n--spectrum-field-edge-to-disclosure-icon-300\n)}.root{align-items:center;background-color:#0000;block-size:var(\n--mod-picker-button-width,var(--spectrum-picker-button-width)\n);border-style:none;box-sizing:border-box;display:flex;justify-content:center;padding:var(\n--mod-picker-button-padding,var(--spectrum-picker-button-padding)\n)}@media (hover:hover){.root:hover .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-hover,var(--spectrum-picker-button-background-color-hover)\n)}.root:hover .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-hover,var(--spectrum-picker-button-font-color-hover)\n)}.root:hover .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-hover,var(--spectrum-picker-button-icon-color-hover)\n)}}:host([active]) .root .spectrum-PickerButton-fill,:host([open]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-down,var(--spectrum-picker-button-background-color-down)\n)}:host([active]) .root .spectrum-PickerButton-label,:host([open]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-down,var(--spectrum-picker-button-font-color-down)\n)}:host([active]) .root .spectrum-PickerButton-icon,:host([open]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-down,var(--spectrum-picker-button-icon-color-down)\n)}.root.focus-visible .spectrum-PickerButton-fill,.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-fill,.root:focus .spectrum-PickerButton-fill,.root:focus-visible .spectrum-PickerButton-fill,:host([focused]) .root .spectrum-PickerButton-fill{background-color:var(\n--mod-picker-button-background-color-key-focus,var(--spectrum-picker-button-background-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-label,.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-label,.root:focus .spectrum-PickerButton-label,.root:focus-visible .spectrum-PickerButton-label,:host([focused]) .root .spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color-key-focus,var(--spectrum-picker-button-font-color-key-focus)\n)}.root.focus-visible .spectrum-PickerButton-icon,.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}.root.is-keyboardFocused .spectrum-PickerButton-icon,.root:focus .spectrum-PickerButton-icon,.root:focus-visible .spectrum-PickerButton-icon,:host([focused]) .root .spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color-key-focus,var(--spectrum-picker-button-icon-color-key-focus)\n)}:host([position=right]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=right][rounded]) .spectrum-PickerButton-fill{border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}:host([position=left]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-sided,var(--spectrum-picker-button-border-radius-sided)\n)}:host([position=left][rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded-sided,var(--spectrum-picker-button-border-radius-rounded-sided)\n)}.spectrum-PickerButton-label{color:var(\n--mod-picker-button-font-color,var(--spectrum-picker-button-font-color)\n);flex:auto;font-family:var(\n--mod-picker-button-font-family,var(--spectrum-picker-button-font-family)\n);font-size:var(\n--mod-picker-button-font-size,var(--spectrum-picker-button-font-size)\n);font-style:var(\n--mod-picker-button-font-style,var(--spectrum-picker-button-font-style)\n);font-weight:var(\n--mod-picker-button-font-weight,var(--spectrum-picker-button-font-weight)\n);overflow:hidden;padding-block-end:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);padding-block-start:var(\n--mod-picker-button-label-padding,var(--spectrum-picker-button-label-padding)\n);white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;background-color:var(\n--mod-picker-button-background-color,var(--spectrum-picker-button-background-color)\n);block-size:100%;border-color:var(\n--mod-picker-button-border-color,var(--spectrum-picker-button-border-color)\n);border-end-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius,var(--spectrum-picker-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-button-border-width,var(--spectrum-picker-button-border-width)\n);box-sizing:border-box;display:flex;gap:var(--mod-picker-button-gap,var(--spectrum-picker-button-gap));inline-size:100%;justify-content:center;padding:calc(var(\n--mod-picker-button-fill-padding,\nvar(--spectrum-picker-button-fill-padding)\n) - var(\n--mod-picker-button-padding,\nvar(--spectrum-picker-button-padding)\n) - var(\n--mod-picker-button-border-width,\nvar(--spectrum-picker-button-border-width)\n));transition:border-color var(\n--mod-picker-button-background-animation-duration,var(--spectrum-picker-button-background-animation-duration)\n) ease-in-out}.spectrum-PickerButton-icon{color:var(\n--mod-picker-button-icon-color,var(--spectrum-picker-button-icon-color)\n);flex-shrink:0}:host([rounded]) .spectrum-PickerButton-fill{border-end-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-end-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-end-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n);border-start-start-radius:var(\n--mod-picker-button-border-radius-rounded,var(--spectrum-picker-button-border-radius-rounded)\n)}.uiicononly{inline-size:var(\n--mod-picker-button-height,var(--spectrum-picker-button-height)\n)}.uiicononly .spectrum-PickerButton-label{display:none}.uiicononly .spectrum-PickerButton-fill{padding:0}.textuiicon .spectrum-PickerButton-fill{inline-size:auto}.root{--spectrum-picker-button-background-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color\n);--spectrum-picker-button-background-color-hover:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover\n);--spectrum-picker-button-background-color-down:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down\n);--spectrum-picker-button-background-color-key-focus:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus\n);--spectrum-picker-button-border-color:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-color\n);--spectrum-picker-button-border-radius:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius\n);--spectrum-picker-button-border-radius-rounded-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided\n);--spectrum-picker-button-border-radius-sided:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided\n);--spectrum-picker-button-border-width:var(\n--system-spectrum-pickerbutton-spectrum-picker-button-border-width\n)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoLf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/stories/picker-button-sizes.stories.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  import { argTypes, Template } from "./index.js";
3
- import "../sp-picker-button.js";
3
+ import "@spectrum-web-components/picker-button/sp-picker-button.js";
4
4
  export default {
5
5
  title: "Picker Button/Sizes",
6
6
  component: "sp-picker-button",
package/stories/picker-button-sizes.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["picker-button-sizes.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { TemplateResult } from '@spectrum-web-components/base';\n\nimport { argTypes, StoryArgs, Template } from './index.js';\nimport '../sp-picker-button.js';\n\nexport default {\n title: 'Picker Button/Sizes',\n component: 'sp-picker-button',\n ...argTypes,\n};\n\nexport const s = (args: StoryArgs): TemplateResult => Template(args);\ns.args = { size: 's' };\n\nexport const m = (args: StoryArgs): TemplateResult => Template(args);\nm.args = { size: 'm' };\n\nexport const l = (args: StoryArgs): TemplateResult => Template(args);\nl.args = { size: 'l' };\n\nexport const XL = (args: StoryArgs): TemplateResult => Template(args);\nXL.args = { size: 'xl' };\n\nexport const sLabel = (args: StoryArgs): TemplateResult => Template(args);\nsLabel.args = { size: 's', label: true };\n\nexport const mLabel = (args: StoryArgs): TemplateResult => Template(args);\nmLabel.args = { size: 'm', label: true };\n\nexport const lLabel = (args: StoryArgs): TemplateResult => Template(args);\nlLabel.args = { size: 'l', label: true };\n\nexport const XLLabel = (args: StoryArgs): TemplateResult => Template(args);\nXLLabel.args = { size: 'xl', label: true };\n"],
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { TemplateResult } from '@spectrum-web-components/base';\n\nimport { argTypes, StoryArgs, Template } from './index.js';\nimport '@spectrum-web-components/picker-button/sp-picker-button.js';\n\nexport default {\n title: 'Picker Button/Sizes',\n component: 'sp-picker-button',\n ...argTypes,\n};\n\nexport const s = (args: StoryArgs): TemplateResult => Template(args);\ns.args = { size: 's' };\n\nexport const m = (args: StoryArgs): TemplateResult => Template(args);\nm.args = { size: 'm' };\n\nexport const l = (args: StoryArgs): TemplateResult => Template(args);\nl.args = { size: 'l' };\n\nexport const XL = (args: StoryArgs): TemplateResult => Template(args);\nXL.args = { size: 'xl' };\n\nexport const sLabel = (args: StoryArgs): TemplateResult => Template(args);\nsLabel.args = { size: 's', label: true };\n\nexport const mLabel = (args: StoryArgs): TemplateResult => Template(args);\nmLabel.args = { size: 'm', label: true };\n\nexport const lLabel = (args: StoryArgs): TemplateResult => Template(args);\nlLabel.args = { size: 'l', label: true };\n\nexport const XLLabel = (args: StoryArgs): TemplateResult => Template(args);\nXLLabel.args = { size: 'xl', label: true };\n"],
5
5
  "mappings": ";AAaA,SAAS,UAAqB,gBAAgB;AAC9C,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,GAAG;AACP;AAEO,aAAM,IAAI,CAAC,SAAoC,SAAS,IAAI;AACnE,EAAE,OAAO,EAAE,MAAM,IAAI;AAEd,aAAM,IAAI,CAAC,SAAoC,SAAS,IAAI;AACnE,EAAE,OAAO,EAAE,MAAM,IAAI;AAEd,aAAM,IAAI,CAAC,SAAoC,SAAS,IAAI;AACnE,EAAE,OAAO,EAAE,MAAM,IAAI;AAEd,aAAM,KAAK,CAAC,SAAoC,SAAS,IAAI;AACpE,GAAG,OAAO,EAAE,MAAM,KAAK;AAEhB,aAAM,SAAS,CAAC,SAAoC,SAAS,IAAI;AACxE,OAAO,OAAO,EAAE,MAAM,KAAK,OAAO,KAAK;AAEhC,aAAM,SAAS,CAAC,SAAoC,SAAS,IAAI;AACxE,OAAO,OAAO,EAAE,MAAM,KAAK,OAAO,KAAK;AAEhC,aAAM,SAAS,CAAC,SAAoC,SAAS,IAAI;AACxE,OAAO,OAAO,EAAE,MAAM,KAAK,OAAO,KAAK;AAEhC,aAAM,UAAU,CAAC,SAAoC,SAAS,IAAI;AACzE,QAAQ,OAAO,EAAE,MAAM,MAAM,OAAO,KAAK;",
6
6
  "names": []
7
7
  }
package/stories/picker-button.stories.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { html } from "@spectrum-web-components/base";
3
3
  import { argTypes, Template } from "./index.js";
4
- import "../sp-picker-button.js";
4
+ import "@spectrum-web-components/picker-button/sp-picker-button.js";
5
5
  import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js";
6
6
  export default {
7
7
  title: "Picker Button",
package/stories/picker-button.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["picker-button.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport { argTypes, StoryArgs, Template } from './index.js';\nimport '../sp-picker-button.js';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';\n\nexport default {\n title: 'Picker Button',\n component: 'sp-picker-button',\n ...argTypes,\n};\n\nexport const active = (args: StoryArgs): TemplateResult => Template(args);\nactive.args = { active: true };\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n icon: html`\n <sp-icon-add\n slot=\"icon\"\n class=\"spectrum-PickerButton-icon spectrum-Icon\"\n ></sp-icon-add>\n `,\n};\n\nexport const invalid = (args: StoryArgs): TemplateResult => Template(args);\ninvalid.args = { invalid: true };\n\nexport const label = (args: StoryArgs): TemplateResult => Template(args);\nlabel.args = { label: true };\n\nexport const labelCustom = (args: StoryArgs): TemplateResult => Template(args);\nlabelCustom.args = { label: 'Some' };\n\nexport const open = (args: StoryArgs): TemplateResult => Template(args);\nopen.args = { open: true };\n\nexport const positionLeft = (args: StoryArgs): TemplateResult => Template(args);\npositionLeft.args = { position: 'left' };\n\nexport const positionRight = (args: StoryArgs): TemplateResult =>\n Template(args);\npositionRight.args = { position: 'right' };\n\nexport const rounded = (args: StoryArgs): TemplateResult => Template(args);\nrounded.args = { rounded: true };\n\nexport const roundedLabel = (args: StoryArgs): TemplateResult => Template(args);\nroundedLabel.args = {\n label: true,\n rounded: true,\n};\n"],
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport { argTypes, StoryArgs, Template } from './index.js';\nimport '@spectrum-web-components/picker-button/sp-picker-button.js';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';\n\nexport default {\n title: 'Picker Button',\n component: 'sp-picker-button',\n ...argTypes,\n};\n\nexport const active = (args: StoryArgs): TemplateResult => Template(args);\nactive.args = { active: true };\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n icon: html`\n <sp-icon-add\n slot=\"icon\"\n class=\"spectrum-PickerButton-icon spectrum-Icon\"\n ></sp-icon-add>\n `,\n};\n\nexport const invalid = (args: StoryArgs): TemplateResult => Template(args);\ninvalid.args = { invalid: true };\n\nexport const label = (args: StoryArgs): TemplateResult => Template(args);\nlabel.args = { label: true };\n\nexport const labelCustom = (args: StoryArgs): TemplateResult => Template(args);\nlabelCustom.args = { label: 'Some' };\n\nexport const open = (args: StoryArgs): TemplateResult => Template(args);\nopen.args = { open: true };\n\nexport const positionLeft = (args: StoryArgs): TemplateResult => Template(args);\npositionLeft.args = { position: 'left' };\n\nexport const positionRight = (args: StoryArgs): TemplateResult =>\n Template(args);\npositionRight.args = { position: 'right' };\n\nexport const rounded = (args: StoryArgs): TemplateResult => Template(args);\nrounded.args = { rounded: true };\n\nexport const roundedLabel = (args: StoryArgs): TemplateResult => Template(args);\nroundedLabel.args = {\n label: true,\n rounded: true,\n};\n"],
5
5
  "mappings": ";AAYA,SAAS,YAA4B;AAErC,SAAS,UAAqB,gBAAgB;AAC9C,OAAO;AAEP,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,GAAG;AACP;AAEO,aAAM,SAAS,CAAC,SAAoC,SAAS,IAAI;AACxE,OAAO,OAAO,EAAE,QAAQ,KAAK;AAEtB,aAAM,aAAa,CAAC,SAAoC,SAAS,IAAI;AAC5E,WAAW,OAAO;AAAA,EACd,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMV;AAEO,aAAM,UAAU,CAAC,SAAoC,SAAS,IAAI;AACzE,QAAQ,OAAO,EAAE,SAAS,KAAK;AAExB,aAAM,QAAQ,CAAC,SAAoC,SAAS,IAAI;AACvE,MAAM,OAAO,EAAE,OAAO,KAAK;AAEpB,aAAM,cAAc,CAAC,SAAoC,SAAS,IAAI;AAC7E,YAAY,OAAO,EAAE,OAAO,OAAO;AAE5B,aAAM,OAAO,CAAC,SAAoC,SAAS,IAAI;AACtE,KAAK,OAAO,EAAE,MAAM,KAAK;AAElB,aAAM,eAAe,CAAC,SAAoC,SAAS,IAAI;AAC9E,aAAa,OAAO,EAAE,UAAU,OAAO;AAEhC,aAAM,gBAAgB,CAAC,SAC1B,SAAS,IAAI;AACjB,cAAc,OAAO,EAAE,UAAU,QAAQ;AAElC,aAAM,UAAU,CAAC,SAAoC,SAAS,IAAI;AACzE,QAAQ,OAAO,EAAE,SAAS,KAAK;AAExB,aAAM,eAAe,CAAC,SAAoC,SAAS,IAAI;AAC9E,aAAa,OAAO;AAAA,EAChB,OAAO;AAAA,EACP,SAAS;AACb;",
6
6
  "names": []
7
7
  }