@spectrum-web-components/swatch 1.1.0-beta.9 → 1.1.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 (76) hide show
  1. package/package.json +10 -10
  2. package/sp-swatch-group.d.ts +0 -6
  3. package/sp-swatch-group.dev.js +0 -5
  4. package/sp-swatch-group.dev.js.map +0 -7
  5. package/sp-swatch-group.js +0 -2
  6. package/sp-swatch-group.js.map +0 -7
  7. package/sp-swatch.d.ts +0 -6
  8. package/sp-swatch.dev.js +0 -5
  9. package/sp-swatch.dev.js.map +0 -7
  10. package/sp-swatch.js +0 -2
  11. package/sp-swatch.js.map +0 -7
  12. package/src/Swatch.d.ts +0 -43
  13. package/src/Swatch.dev.js +0 -243
  14. package/src/Swatch.dev.js.map +0 -7
  15. package/src/Swatch.js +0 -48
  16. package/src/Swatch.js.map +0 -7
  17. package/src/SwatchGroup.d.ts +0 -39
  18. package/src/SwatchGroup.dev.js +0 -268
  19. package/src/SwatchGroup.dev.js.map +0 -7
  20. package/src/SwatchGroup.js +0 -7
  21. package/src/SwatchGroup.js.map +0 -7
  22. package/src/index.d.ts +0 -2
  23. package/src/index.dev.js +0 -4
  24. package/src/index.dev.js.map +0 -7
  25. package/src/index.js +0 -2
  26. package/src/index.js.map +0 -7
  27. package/src/spectrum-swatch-group.css.d.ts +0 -2
  28. package/src/spectrum-swatch-group.css.dev.js +0 -7
  29. package/src/spectrum-swatch-group.css.dev.js.map +0 -7
  30. package/src/spectrum-swatch-group.css.js +0 -4
  31. package/src/spectrum-swatch-group.css.js.map +0 -7
  32. package/src/spectrum-swatch.css.d.ts +0 -2
  33. package/src/spectrum-swatch.css.dev.js +0 -7
  34. package/src/spectrum-swatch.css.dev.js.map +0 -7
  35. package/src/spectrum-swatch.css.js +0 -4
  36. package/src/spectrum-swatch.css.js.map +0 -7
  37. package/src/swatch-group-overrides.css.d.ts +0 -2
  38. package/src/swatch-group-overrides.css.dev.js +0 -7
  39. package/src/swatch-group-overrides.css.dev.js.map +0 -7
  40. package/src/swatch-group-overrides.css.js +0 -4
  41. package/src/swatch-group-overrides.css.js.map +0 -7
  42. package/src/swatch-group.css.d.ts +0 -2
  43. package/src/swatch-group.css.dev.js +0 -7
  44. package/src/swatch-group.css.dev.js.map +0 -7
  45. package/src/swatch-group.css.js +0 -4
  46. package/src/swatch-group.css.js.map +0 -7
  47. package/src/swatch-overrides.css.d.ts +0 -2
  48. package/src/swatch-overrides.css.dev.js +0 -7
  49. package/src/swatch-overrides.css.dev.js.map +0 -7
  50. package/src/swatch-overrides.css.js +0 -4
  51. package/src/swatch-overrides.css.js.map +0 -7
  52. package/src/swatch.css.d.ts +0 -2
  53. package/src/swatch.css.dev.js +0 -7
  54. package/src/swatch.css.dev.js.map +0 -7
  55. package/src/swatch.css.js +0 -4
  56. package/src/swatch.css.js.map +0 -7
  57. package/stories/swatch-group.stories.js +0 -183
  58. package/stories/swatch-group.stories.js.map +0 -7
  59. package/stories/swatch-sizes.stories.js +0 -40
  60. package/stories/swatch-sizes.stories.js.map +0 -7
  61. package/stories/swatch.stories.js +0 -109
  62. package/stories/swatch.stories.js.map +0 -7
  63. package/test/benchmark/basic-test.js +0 -8
  64. package/test/benchmark/basic-test.js.map +0 -7
  65. package/test/swatch-group.test-vrt.js +0 -5
  66. package/test/swatch-group.test-vrt.js.map +0 -7
  67. package/test/swatch-group.test.js +0 -377
  68. package/test/swatch-group.test.js.map +0 -7
  69. package/test/swatch-memory.test.js +0 -8
  70. package/test/swatch-memory.test.js.map +0 -7
  71. package/test/swatch-sizes.test-vrt.js +0 -5
  72. package/test/swatch-sizes.test-vrt.js.map +0 -7
  73. package/test/swatch.test-vrt.js +0 -5
  74. package/test/swatch.test-vrt.js.map +0 -7
  75. package/test/swatch.test.js +0 -155
  76. package/test/swatch.test.js.map +0 -7
@@ -1,4 +0,0 @@
1
- "use strict";import{css as s}from"@spectrum-web-components/base";const a=s`
2
- :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}
3
- `;export default a;
4
- //# sourceMappingURL=swatch-group.css.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch-group.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 :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
- "names": ["css", "styles"]
7
- }
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
@@ -1,7 +0,0 @@
1
- "use strict";
2
- import { css } from "@spectrum-web-components/base";
3
- const styles = css`
4
- :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}
5
- `;
6
- export default styles;
7
- //# sourceMappingURL=swatch-overrides.css.dev.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch-overrides.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 :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
- "names": []
7
- }
@@ -1,4 +0,0 @@
1
- "use strict";import{css as s}from"@spectrum-web-components/base";const c=s`
2
- :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}
3
- `;export default c;
4
- //# sourceMappingURL=swatch-overrides.css.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch-overrides.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 :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
- "names": ["css", "styles"]
7
- }
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
@@ -1,7 +0,0 @@
1
- "use strict";
2
- import { css } from "@spectrum-web-components/base";
3
- const styles = css`
4
- @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
5
- `;
6
- export default styles;
7
- //# sourceMappingURL=swatch.css.dev.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch.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 @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
- "names": []
7
- }
package/src/swatch.css.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
2
- @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
3
- `;export default e;
4
- //# sourceMappingURL=swatch.css.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch.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 @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
- "names": ["css", "styles"]
7
- }
@@ -1,183 +0,0 @@
1
- "use strict";
2
- import { html } from "@spectrum-web-components/base";
3
- import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
4
- import "@spectrum-web-components/swatch/sp-swatch-group.js";
5
- import "@spectrum-web-components/swatch/sp-swatch.js";
6
- export default {
7
- title: "Swatch group",
8
- component: "sp-swatch-group",
9
- args: {},
10
- argTypes: {
11
- border: {
12
- name: "border",
13
- type: { name: "string", required: false },
14
- description: "The border to apply to the Swatch children.",
15
- table: {
16
- defaultValue: { summary: "" }
17
- },
18
- control: {
19
- type: "inline-radio",
20
- options: ["normal", "light", "none"]
21
- }
22
- },
23
- density: {
24
- name: "density",
25
- type: { name: "string", required: false },
26
- description: "The density at which to display the Swatch children.",
27
- table: {
28
- defaultValue: { summary: "" }
29
- },
30
- control: {
31
- type: "inline-radio",
32
- options: ["normal", "compact", "spacious"]
33
- }
34
- },
35
- rounding: {
36
- name: "rounding",
37
- type: { name: "string", required: false },
38
- description: "The rounding to apply to the Swatch children.",
39
- table: {
40
- defaultValue: { summary: "" }
41
- },
42
- control: {
43
- type: "inline-radio",
44
- options: ["normal", "none", "full"]
45
- }
46
- },
47
- selects: {
48
- name: "selects",
49
- type: { name: "string", required: false },
50
- description: "Whether the Swatch Group manages a selection, and whether it is a sinlge or multiple selection.",
51
- table: {
52
- defaultValue: { summary: "" }
53
- },
54
- control: {
55
- type: "inline-radio",
56
- options: ["none", "single", "multiple"]
57
- }
58
- },
59
- shape: {
60
- name: "shape",
61
- type: { name: "string", required: false },
62
- description: "The shape to apply to the Swatch children.",
63
- table: {
64
- defaultValue: { summary: "" }
65
- },
66
- control: {
67
- type: "inline-radio",
68
- options: ["normal", "rectangle"]
69
- }
70
- }
71
- },
72
- decorators: [
73
- (story, {
74
- args: { selected = [] }
75
- }) => html`
76
- <div
77
- @change=${async (event) => {
78
- await 0;
79
- if (event.defaultPrevented) return;
80
- const next = event.target.nextElementSibling;
81
- next.textContent = `Selected: ${JSON.stringify(
82
- event.target.selected
83
- )}`;
84
- }}
85
- >
86
- ${story()}
87
- <div>Selected: ${JSON.stringify(selected)}</div>
88
- </div>
89
- `
90
- ]
91
- };
92
- const colors = [
93
- "--spectrum-gray-700",
94
- "--spectrum-red-700",
95
- "--spectrum-orange-700",
96
- "--spectrum-yellow-700",
97
- "--spectrum-chartreuse-700",
98
- "--spectrum-celery-700",
99
- "--spectrum-green-700",
100
- "--spectrum-seafoam-700",
101
- "--spectrum-blue-700",
102
- "--spectrum-indigo-700",
103
- "--spectrum-purple-700",
104
- "--spectrum-fuchsia-700",
105
- "--spectrum-magenta-700"
106
- ];
107
- const template = ({
108
- border,
109
- density,
110
- rounding,
111
- selects,
112
- selected = [],
113
- shape
114
- }) => {
115
- const groupLabel = !!selects ? selects === "single" ? "Select a color" : "Selects color(s)" : void 0;
116
- return html`
117
- <sp-swatch-group
118
- border=${ifDefined(border === "normal" ? void 0 : border)}
119
- density=${ifDefined(density === "normal" ? void 0 : density)}
120
- rounding=${ifDefined(rounding === "normal" ? void 0 : rounding)}
121
- selects=${ifDefined(selects === "none" ? void 0 : selects)}
122
- .selected=${selected}
123
- shape=${ifDefined(shape === "normal" ? void 0 : shape)}
124
- aria-label=${ifDefined(groupLabel)}
125
- >
126
- ${colors.map(
127
- (color) => html`
128
- <sp-swatch
129
- color="var(${color})"
130
- label=${color}
131
- value=${color}
132
- ></sp-swatch>
133
- `
134
- )}
135
- </sp-swatch-group>
136
- `;
137
- };
138
- export const Default = (args) => template(args);
139
- Default.args = {};
140
- export const densityCompact = (args) => template(args);
141
- densityCompact.args = {
142
- density: "compact"
143
- };
144
- export const densitySpacious = (args) => template(args);
145
- densitySpacious.args = {
146
- density: "spacious"
147
- };
148
- export const selectsSingle = (args) => template(args);
149
- selectsSingle.args = {
150
- selects: "single",
151
- selected: ["--spectrum-yellow-500"]
152
- };
153
- export const selectsMultiple = (args) => template(args);
154
- selectsMultiple.args = {
155
- selects: "multiple",
156
- selected: [
157
- "--spectrum-celery-500",
158
- "--spectrum-red-500",
159
- "--spectrum-purple-500",
160
- "--spectrum-blue-500"
161
- ]
162
- };
163
- export const borderLight = (args) => template(args);
164
- borderLight.args = {
165
- border: "light"
166
- };
167
- export const borderNone = (args) => template(args);
168
- borderNone.args = {
169
- border: "none"
170
- };
171
- export const roundingNone = (args) => template(args);
172
- roundingNone.args = {
173
- rounding: "none"
174
- };
175
- export const roundingFull = (args) => template(args);
176
- roundingFull.args = {
177
- rounding: "full"
178
- };
179
- export const shapeRectangle = (args) => template(args);
180
- shapeRectangle.args = {
181
- shape: "rectangle"
182
- };
183
- //# sourceMappingURL=swatch-group.stories.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch-group.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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/swatch/sp-swatch-group.js';\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport type {\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from '../src/Swatch.js';\nimport { SwatchGroup } from '../src/SwatchGroup.js';\n\ntype Properties = {\n border: SwatchBorder | 'normal';\n density?: 'normal' | 'spacious' | 'compact';\n rounding?: SwatchRounding | 'normal';\n selected?: string[];\n selects?: 'none' | 'single' | 'multiple';\n shape?: SwatchShape | 'normal';\n};\n\nexport default {\n title: 'Swatch group',\n component: 'sp-swatch-group',\n args: {},\n argTypes: {\n border: {\n name: 'border',\n type: { name: 'string', required: false },\n description: 'The border to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'light', 'none'],\n },\n },\n density: {\n name: 'density',\n type: { name: 'string', required: false },\n description: 'The density at which to display the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'compact', 'spacious'],\n },\n },\n rounding: {\n name: 'rounding',\n type: { name: 'string', required: false },\n description: 'The rounding to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'none', 'full'],\n },\n },\n selects: {\n name: 'selects',\n type: { name: 'string', required: false },\n description:\n 'Whether the Swatch Group manages a selection, and whether it is a sinlge or multiple selection.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n shape: {\n name: 'shape',\n type: { name: 'string', required: false },\n description: 'The shape to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'rectangle'],\n },\n },\n },\n decorators: [\n (\n story: () => TemplateResult,\n {\n args: { selected = [] },\n }: {\n args: {\n selected: string[];\n };\n }\n ): TemplateResult => html`\n <div\n @change=${async (event: Event & { target: SwatchGroup }) => {\n await 0;\n if (event.defaultPrevented) return;\n const next = event.target\n .nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n event.target.selected\n )}`;\n }}\n >\n ${story()}\n <div>Selected: ${JSON.stringify(selected)}</div>\n </div>\n `,\n ],\n};\n\nconst colors = [\n '--spectrum-gray-700',\n '--spectrum-red-700',\n '--spectrum-orange-700',\n '--spectrum-yellow-700',\n '--spectrum-chartreuse-700',\n '--spectrum-celery-700',\n '--spectrum-green-700',\n '--spectrum-seafoam-700',\n '--spectrum-blue-700',\n '--spectrum-indigo-700',\n '--spectrum-purple-700',\n '--spectrum-fuchsia-700',\n '--spectrum-magenta-700',\n];\n\nconst template = ({\n border,\n density,\n rounding,\n selects,\n selected = [],\n shape,\n}: Properties): TemplateResult => {\n const groupLabel = !!selects\n ? selects === 'single'\n ? 'Select a color'\n : 'Selects color(s)'\n : undefined;\n return html`\n <sp-swatch-group\n border=${ifDefined(border === 'normal' ? undefined : border)}\n density=${ifDefined(density === 'normal' ? undefined : density)}\n rounding=${ifDefined(rounding === 'normal' ? undefined : rounding)}\n selects=${ifDefined(selects === 'none' ? undefined : selects)}\n .selected=${selected}\n shape=${ifDefined(shape === 'normal' ? undefined : shape)}\n aria-label=${ifDefined(groupLabel)}\n >\n ${colors.map(\n (color) => html`\n <sp-swatch\n color=\"var(${color})\"\n label=${color}\n value=${color}\n ></sp-swatch>\n `\n )}\n </sp-swatch-group>\n `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\nDefault.args = {} as Properties;\nexport const densityCompact = (args: Properties): TemplateResult =>\n template(args);\ndensityCompact.args = {\n density: 'compact',\n} as Properties;\nexport const densitySpacious = (args: Properties): TemplateResult =>\n template(args);\ndensitySpacious.args = {\n density: 'spacious',\n} as Properties;\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n selects: 'single',\n selected: ['--spectrum-yellow-500'],\n} as Properties;\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n selects: 'multiple',\n selected: [\n '--spectrum-celery-500',\n '--spectrum-red-500',\n '--spectrum-purple-500',\n '--spectrum-blue-500',\n ],\n} as Properties;\nexport const borderLight = (args: Properties): TemplateResult => template(args);\nborderLight.args = {\n border: 'light',\n} as Properties;\nexport const borderNone = (args: Properties): TemplateResult => template(args);\nborderNone.args = {\n border: 'none',\n} as Properties;\nexport const roundingNone = (args: Properties): TemplateResult =>\n template(args);\nroundingNone.args = {\n rounding: 'none',\n} as Properties;\nexport const roundingFull = (args: Properties): TemplateResult =>\n template(args);\nroundingFull.args = {\n rounding: 'full',\n} as Properties;\nexport const shapeRectangle = (args: Properties): TemplateResult =>\n template(args);\nshapeRectangle.args = {\n shape: 'rectangle',\n} as Properties;\n"],
5
- "mappings": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAE1B,OAAO;AACP,OAAO;AAiBP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM,CAAC;AAAA,EACP,UAAU;AAAA,IACN,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,SAAS,MAAM;AAAA,MACvC;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,WAAW,UAAU;AAAA,MAC7C;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,QAAQ,MAAM;AAAA,MACtC;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aACI;AAAA,MACJ,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,QAAQ,UAAU,UAAU;AAAA,MAC1C;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,WAAW;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,YAAY;AAAA,IACR,CACI,OACA;AAAA,MACI,MAAM,EAAE,WAAW,CAAC,EAAE;AAAA,IAC1B,MAKiB;AAAA;AAAA,0BAEH,OAAO,UAA2C;AACxD,YAAM;AACN,UAAI,MAAM,iBAAkB;AAC5B,YAAM,OAAO,MAAM,OACd;AACL,WAAK,cAAc,aAAa,KAAK;AAAA,QACjC,MAAM,OAAO;AAAA,MACjB,CAAC;AAAA,IACL,CAAC;AAAA;AAAA,kBAEC,MAAM,CAAC;AAAA,iCACQ,KAAK,UAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,EAGrD;AACJ;AAEA,MAAM,SAAS;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACJ,MAAkC;AAC9B,QAAM,aAAa,CAAC,CAAC,UACf,YAAY,WACR,mBACA,qBACJ;AACN,SAAO;AAAA;AAAA,qBAEU,UAAU,WAAW,WAAW,SAAY,MAAM,CAAC;AAAA,sBAClD,UAAU,YAAY,WAAW,SAAY,OAAO,CAAC;AAAA,uBACpD,UAAU,aAAa,WAAW,SAAY,QAAQ,CAAC;AAAA,sBACxD,UAAU,YAAY,SAAS,SAAY,OAAO,CAAC;AAAA,wBACjD,QAAQ;AAAA,oBACZ,UAAU,UAAU,WAAW,SAAY,KAAK,CAAC;AAAA,yBAC5C,UAAU,UAAU,CAAC;AAAA;AAAA,cAEhC,OAAO;AAAA,IACL,CAAC,UAAU;AAAA;AAAA,qCAEU,KAAK;AAAA,gCACV,KAAK;AAAA,gCACL,KAAK;AAAA;AAAA;AAAA,EAGzB,CAAC;AAAA;AAAA;AAGb;AAEO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAC1E,QAAQ,OAAO,CAAC;AACT,aAAM,iBAAiB,CAAC,SAC3B,SAAS,IAAI;AACjB,eAAe,OAAO;AAAA,EAClB,SAAS;AACb;AACO,aAAM,kBAAkB,CAAC,SAC5B,SAAS,IAAI;AACjB,gBAAgB,OAAO;AAAA,EACnB,SAAS;AACb;AACO,aAAM,gBAAgB,CAAC,SAC1B,SAAS,IAAI;AACjB,cAAc,OAAO;AAAA,EACjB,SAAS;AAAA,EACT,UAAU,CAAC,uBAAuB;AACtC;AACO,aAAM,kBAAkB,CAAC,SAC5B,SAAS,IAAI;AACjB,gBAAgB,OAAO;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AACO,aAAM,cAAc,CAAC,SAAqC,SAAS,IAAI;AAC9E,YAAY,OAAO;AAAA,EACf,QAAQ;AACZ;AACO,aAAM,aAAa,CAAC,SAAqC,SAAS,IAAI;AAC7E,WAAW,OAAO;AAAA,EACd,QAAQ;AACZ;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,iBAAiB,CAAC,SAC3B,SAAS,IAAI;AACjB,eAAe,OAAO;AAAA,EAClB,OAAO;AACX;",
6
- "names": []
7
- }
@@ -1,40 +0,0 @@
1
- "use strict";
2
- import {
3
- html
4
- } from "@spectrum-web-components/base";
5
- import "@spectrum-web-components/swatch/sp-swatch.js";
6
- export default {
7
- title: "Swatch/Sizes",
8
- component: "sp-swatch"
9
- };
10
- const template = ({
11
- size,
12
- color = "rgb(255 0 0 / 0.7)"
13
- }) => html`
14
- <div style="display: flex; gap: 5px;">
15
- <sp-swatch color=${color} size=${size}></sp-swatch>
16
- <sp-swatch color=${color} rounding="none" size=${size}></sp-swatch>
17
- <sp-swatch color=${color} rounding="full" size=${size}></sp-swatch>
18
- <sp-swatch color=${color} border="light" size=${size}></sp-swatch>
19
- <sp-swatch color=${color} border="none" size=${size}></sp-swatch>
20
- <sp-swatch nothing size=${size}></sp-swatch>
21
- <sp-swatch color=${color} shape="rectangle" size=${size}></sp-swatch>
22
- <sp-swatch
23
- color=${color}
24
- shape="rectangle"
25
- size=${size}
26
- disabled
27
- ></sp-swatch>
28
- <sp-swatch
29
- rounding="full"
30
- shape="rectangle"
31
- size=${size}
32
- mixed-value
33
- ></sp-swatch>
34
- </div>
35
- `;
36
- export const XS = () => template({ size: "xs" });
37
- export const s = () => template({ size: "s" });
38
- export const m = () => template({ size: "m" });
39
- export const l = () => template({ size: "l" });
40
- //# sourceMappingURL=swatch-sizes.stories.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch-sizes.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 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 {\n ElementSize,\n html,\n TemplateResult,\n} from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/swatch/sp-swatch.js';\n\nexport default {\n title: 'Swatch/Sizes',\n component: 'sp-swatch',\n};\n\nconst template = ({\n size,\n color = 'rgb(255 0 0 / 0.7)',\n}: {\n size: ElementSize;\n color?: string;\n}): TemplateResult => html`\n <div style=\"display: flex; gap: 5px;\">\n <sp-swatch color=${color} size=${size}></sp-swatch>\n <sp-swatch color=${color} rounding=\"none\" size=${size}></sp-swatch>\n <sp-swatch color=${color} rounding=\"full\" size=${size}></sp-swatch>\n <sp-swatch color=${color} border=\"light\" size=${size}></sp-swatch>\n <sp-swatch color=${color} border=\"none\" size=${size}></sp-swatch>\n <sp-swatch nothing size=${size}></sp-swatch>\n <sp-swatch color=${color} shape=\"rectangle\" size=${size}></sp-swatch>\n <sp-swatch\n color=${color}\n shape=\"rectangle\"\n size=${size}\n disabled\n ></sp-swatch>\n <sp-swatch\n rounding=\"full\"\n shape=\"rectangle\"\n size=${size}\n mixed-value\n ></sp-swatch>\n </div>\n`;\n\nexport const XS = (): TemplateResult => template({ size: 'xs' });\n\nexport const s = (): TemplateResult => template({ size: 's' });\n\nexport const m = (): TemplateResult => template({ size: 'm' });\n\nexport const l = (): TemplateResult => template({ size: 'l' });\n"],
5
- "mappings": ";AAWA;AAAA,EAEI;AAAA,OAEG;AAEP,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA,QAAQ;AACZ,MAGsB;AAAA;AAAA,2BAEK,KAAK,SAAS,IAAI;AAAA,2BAClB,KAAK,yBAAyB,IAAI;AAAA,2BAClC,KAAK,yBAAyB,IAAI;AAAA,2BAClC,KAAK,wBAAwB,IAAI;AAAA,2BACjC,KAAK,uBAAuB,IAAI;AAAA,kCACzB,IAAI;AAAA,2BACX,KAAK,2BAA2B,IAAI;AAAA;AAAA,oBAE3C,KAAK;AAAA;AAAA,mBAEN,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAMhB,aAAM,KAAK,MAAsB,SAAS,EAAE,MAAM,KAAK,CAAC;AAExD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AAEtD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AAEtD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;",
6
- "names": []
7
- }
@@ -1,109 +0,0 @@
1
- "use strict";
2
- import { html } from "@spectrum-web-components/base";
3
- import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
4
- import "@spectrum-web-components/swatch/sp-swatch.js";
5
- export default {
6
- title: "Swatch",
7
- component: "sp-swatch",
8
- args: {
9
- color: "#ff0000"
10
- },
11
- argTypes: {
12
- color: { control: "color" },
13
- border: {
14
- name: "border",
15
- type: { name: "string", required: false },
16
- description: "The border to apply to the Swatch children.",
17
- table: {
18
- defaultValue: { summary: "" }
19
- },
20
- control: {
21
- type: "inline-radio",
22
- options: ["normal", "light", "none"]
23
- }
24
- },
25
- rounding: {
26
- name: "rounding",
27
- type: { name: "string", required: false },
28
- description: "The rounding to apply to the Swatch children.",
29
- table: {
30
- defaultValue: { summary: "" }
31
- },
32
- control: {
33
- type: "inline-radio",
34
- options: ["normal", "none", "full"]
35
- }
36
- },
37
- shape: {
38
- name: "shape",
39
- type: { name: "string", required: false },
40
- description: "The shape to apply to the Swatch children.",
41
- table: {
42
- defaultValue: { summary: "" }
43
- },
44
- control: {
45
- type: "inline-radio",
46
- options: ["normal", "rectangle"]
47
- }
48
- }
49
- }
50
- };
51
- const template = ({
52
- color,
53
- border,
54
- rounding,
55
- shape,
56
- mixedValue: mixedValue2,
57
- nothing: nothing2
58
- }) => {
59
- return html`
60
- <sp-swatch
61
- border=${ifDefined(border === "normal" ? void 0 : border)}
62
- rounding=${ifDefined(rounding === "normal" ? void 0 : rounding)}
63
- shape=${ifDefined(shape === "normal" ? void 0 : shape)}
64
- color=${color}
65
- ?mixed-value=${mixedValue2}
66
- ?nothing=${nothing2}
67
- ></sp-swatch>
68
- `;
69
- };
70
- export const Default = (args) => template(args);
71
- export const gradient = (args) => template(args);
72
- gradient.args = {
73
- color: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"
74
- };
75
- export const opacity = (args) => template(args);
76
- opacity.args = {
77
- color: "rgba(255, 0, 0, 0.3)"
78
- };
79
- export const mixedValue = (args) => template(args);
80
- mixedValue.args = {
81
- mixedValue: true,
82
- color: ""
83
- };
84
- export const nothing = (args) => template(args);
85
- nothing.args = {
86
- nothing: true,
87
- color: ""
88
- };
89
- export const borderLight = (args) => template(args);
90
- borderLight.args = {
91
- border: "light"
92
- };
93
- export const borderNone = (args) => template(args);
94
- borderNone.args = {
95
- border: "none"
96
- };
97
- export const roundingNone = (args) => template(args);
98
- roundingNone.args = {
99
- rounding: "none"
100
- };
101
- export const roundingFull = (args) => template(args);
102
- roundingFull.args = {
103
- rounding: "full"
104
- };
105
- export const shapeRectangle = (args) => template(args);
106
- shapeRectangle.args = {
107
- shape: "rectangle"
108
- };
109
- //# sourceMappingURL=swatch.stories.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["swatch.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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport type {\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from '../src/Swatch.js';\n\ntype Properties = {\n color: string;\n border: SwatchBorder | 'normal';\n rounding: SwatchRounding | 'normal';\n shape: SwatchShape | 'normal';\n mixedValue?: boolean;\n nothing?: boolean;\n};\n\nexport default {\n title: 'Swatch',\n component: 'sp-swatch',\n args: {\n color: '#ff0000',\n },\n argTypes: {\n color: { control: 'color' },\n border: {\n name: 'border',\n type: { name: 'string', required: false },\n description: 'The border to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'light', 'none'],\n },\n },\n rounding: {\n name: 'rounding',\n type: { name: 'string', required: false },\n description: 'The rounding to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'none', 'full'],\n },\n },\n shape: {\n name: 'shape',\n type: { name: 'string', required: false },\n description: 'The shape to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'rectangle'],\n },\n },\n },\n};\n\nconst template = ({\n color,\n border,\n rounding,\n shape,\n mixedValue,\n nothing,\n}: Properties): TemplateResult => {\n return html`\n <sp-swatch\n border=${ifDefined(border === 'normal' ? undefined : border)}\n rounding=${ifDefined(rounding === 'normal' ? undefined : rounding)}\n shape=${ifDefined(shape === 'normal' ? undefined : shape)}\n color=${color}\n ?mixed-value=${mixedValue}\n ?nothing=${nothing}\n ></sp-swatch>\n `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\nexport const gradient = (args: Properties): TemplateResult => template(args);\ngradient.args = {\n color: 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',\n};\nexport const opacity = (args: Properties): TemplateResult => template(args);\nopacity.args = {\n color: 'rgba(255, 0, 0, 0.3)',\n};\nexport const mixedValue = (args: Properties): TemplateResult => template(args);\nmixedValue.args = {\n mixedValue: true,\n color: '',\n};\nexport const nothing = (args: Properties): TemplateResult => template(args);\nnothing.args = {\n nothing: true,\n color: '',\n};\nexport const borderLight = (args: Properties): TemplateResult => template(args);\nborderLight.args = {\n border: 'light',\n};\nexport const borderNone = (args: Properties): TemplateResult => template(args);\nborderNone.args = {\n border: 'none',\n};\nexport const roundingNone = (args: Properties): TemplateResult =>\n template(args);\nroundingNone.args = {\n rounding: 'none',\n};\nexport const roundingFull = (args: Properties): TemplateResult =>\n template(args);\nroundingFull.args = {\n rounding: 'full',\n};\nexport const shapeRectangle = (args: Properties): TemplateResult =>\n template(args);\nshapeRectangle.args = {\n shape: 'rectangle',\n};\n"],
5
- "mappings": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAE1B,OAAO;AAgBP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,IACF,OAAO;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACN,OAAO,EAAE,SAAS,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,SAAS,MAAM;AAAA,MACvC;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,QAAQ,MAAM;AAAA,MACtC;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,WAAW;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAAA;AAAA,EACA,SAAAC;AACJ,MAAkC;AAC9B,SAAO;AAAA;AAAA,qBAEU,UAAU,WAAW,WAAW,SAAY,MAAM,CAAC;AAAA,uBACjD,UAAU,aAAa,WAAW,SAAY,QAAQ,CAAC;AAAA,oBAC1D,UAAU,UAAU,WAAW,SAAY,KAAK,CAAC;AAAA,oBACjD,KAAK;AAAA,2BACED,WAAU;AAAA,uBACdC,QAAO;AAAA;AAAA;AAG9B;AAEO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AACnE,aAAM,WAAW,CAAC,SAAqC,SAAS,IAAI;AAC3E,SAAS,OAAO;AAAA,EACZ,OAAO;AACX;AACO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAC1E,QAAQ,OAAO;AAAA,EACX,OAAO;AACX;AACO,aAAM,aAAa,CAAC,SAAqC,SAAS,IAAI;AAC7E,WAAW,OAAO;AAAA,EACd,YAAY;AAAA,EACZ,OAAO;AACX;AACO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAC1E,QAAQ,OAAO;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AACX;AACO,aAAM,cAAc,CAAC,SAAqC,SAAS,IAAI;AAC9E,YAAY,OAAO;AAAA,EACf,QAAQ;AACZ;AACO,aAAM,aAAa,CAAC,SAAqC,SAAS,IAAI;AAC7E,WAAW,OAAO;AAAA,EACd,QAAQ;AACZ;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,iBAAiB,CAAC,SAC3B,SAAS,IAAI;AACjB,eAAe,OAAO;AAAA,EAClB,OAAO;AACX;",
6
- "names": ["mixedValue", "nothing"]
7
- }
@@ -1,8 +0,0 @@
1
- "use strict";
2
- import "@spectrum-web-components/swatch/sp-swatch.js";
3
- import { html } from "@spectrum-web-components/base";
4
- import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
5
- measureFixtureCreation(html`
6
- <sp-swatch></sp-swatch>
7
- `);
8
- //# sourceMappingURL=basic-test.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["basic-test.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 '@spectrum-web-components/swatch/sp-swatch.js';\nimport { html } from '@spectrum-web-components/base';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-swatch></sp-swatch>\n`);\n"],
5
- "mappings": ";AAWA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA,CAEtB;",
6
- "names": []
7
- }
@@ -1,5 +0,0 @@
1
- "use strict";
2
- import * as stories from "../stories/swatch-group.stories.js";
3
- import { regressVisuals } from "../../../test/visual/test.js";
4
- regressVisuals("SwatchGroupStories", stories);
5
- //# sourceMappingURL=swatch-group.test-vrt.js.map