@spectrum-web-components/swatch 0.3.7 → 0.3.9-overlay.22

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 (19) hide show
  1. package/package.json +7 -7
  2. package/src/spectrum-config.js +108 -146
  3. package/src/spectrum-swatch-group.css.dev.js +1 -3
  4. package/src/spectrum-swatch-group.css.dev.js.map +2 -2
  5. package/src/spectrum-swatch-group.css.js +1 -3
  6. package/src/spectrum-swatch-group.css.js.map +2 -2
  7. package/src/spectrum-swatch.css.dev.js +9 -27
  8. package/src/spectrum-swatch.css.dev.js.map +2 -2
  9. package/src/spectrum-swatch.css.js +9 -27
  10. package/src/spectrum-swatch.css.js.map +2 -2
  11. package/src/swatch-group.css.dev.js +1 -3
  12. package/src/swatch-group.css.dev.js.map +2 -2
  13. package/src/swatch-group.css.js +1 -3
  14. package/src/swatch-group.css.js.map +2 -2
  15. package/src/swatch.css.dev.js +9 -27
  16. package/src/swatch.css.dev.js.map +2 -2
  17. package/src/swatch.css.js +9 -27
  18. package/src/swatch.css.js.map +2 -2
  19. package/custom-elements.json +0 -600
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/swatch",
3
- "version": "0.3.7",
3
+ "version": "0.3.9-overlay.22+e296a22f1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -67,11 +67,11 @@
67
67
  ],
68
68
  "dependencies": {
69
69
  "@lit-labs/observers": "^1.0.1",
70
- "@spectrum-web-components/base": "^0.7.4",
71
- "@spectrum-web-components/icon": "^0.12.8",
72
- "@spectrum-web-components/icons-ui": "^0.9.9",
73
- "@spectrum-web-components/reactive-controllers": "^0.3.5",
74
- "@spectrum-web-components/shared": "^0.15.5"
70
+ "@spectrum-web-components/base": "^0.7.5-overlay.250+e296a22f1",
71
+ "@spectrum-web-components/icon": "^0.12.10-overlay.22+e296a22f1",
72
+ "@spectrum-web-components/icons-ui": "^0.9.11-overlay.22+e296a22f1",
73
+ "@spectrum-web-components/reactive-controllers": "^0.3.6-overlay.280+e296a22f1",
74
+ "@spectrum-web-components/shared": "^0.15.6-overlay.250+e296a22f1"
75
75
  },
76
76
  "devDependencies": {
77
77
  "@spectrum-css/swatch": "^3.0.9",
@@ -83,5 +83,5 @@
83
83
  "./sp-*.js",
84
84
  "./**/*.dev.js"
85
85
  ],
86
- "gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
86
+ "gitHead": "e296a22f1eeff7d62753caf21d2bae4ba406cbbd"
87
87
  }
package/src/spectrum-config.js CHANGED
@@ -1,5 +1,6 @@
1
+ // @ts-check
1
2
  /*
2
- Copyright 2022 Adobe. All rights reserved.
3
+ Copyright 2023 Adobe. All rights reserved.
3
4
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
5
  you may not use this file except in compliance with the License. You may obtain a copy
5
6
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -9,152 +10,113 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
9
10
  OF ANY KIND, either express or implied. See the License for the specific language
10
11
  governing permissions and limitations under the License.
11
12
  */
12
- const config = [
13
- {
14
- spectrum: 'swatchgroup',
15
- components: [
16
- {
17
- name: 'swatch-group',
18
- host: {
19
- selector: '.spectrum-SwatchGroup',
20
- },
21
- attributes: [
22
- {
23
- type: 'enum',
24
- name: 'density',
25
- forceOntoHost: true,
26
- values: [
27
- {
28
- name: 'compact',
29
- selector: '.spectrum-SwatchGroup--compact',
30
- },
31
- {
32
- name: 'spacious',
33
- selector: '.spectrum-SwatchGroup--spacious',
34
- },
35
- ],
36
- },
37
- ],
38
- },
39
- ],
40
- },
41
- {
42
- spectrum: 'swatch',
43
- components: [
44
- {
45
- name: 'swatch',
46
- host: {
47
- selector: '.spectrum-Swatch',
13
+
14
+ import {
15
+ builder,
16
+ converterFor,
17
+ } from '../../../tasks/process-spectrum-utils.js';
18
+
19
+ const converter = converterFor('spectrum-Swatch');
20
+
21
+ /**
22
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
23
+ */
24
+ export default {
25
+ conversions: [
26
+ {
27
+ inPackage: '@spectrum-css/swatchgroup',
28
+ outPackage: 'swatch',
29
+ fileName: 'swatch-group',
30
+ hoistCustomPropertiesFrom: 'spectrum-SwatchGroup',
31
+ components: [
32
+ converter.classToHost('spectrum-SwatchGroup'),
33
+ ...converter.enumerateAttributes(
34
+ [
35
+ ['spectrum-SwatchGroup--compact', 'compact'],
36
+ ['spectrum-SwatchGroup--spacious', 'spacious'],
37
+ ],
38
+ 'density'
39
+ ),
40
+ ],
41
+ },
42
+ {
43
+ inPackage: '@spectrum-css/swatch',
44
+ outPackage: 'swatch',
45
+ fileName: 'swatch',
46
+ hoistCustomPropertiesFrom: 'spectrum-Swatch',
47
+ excludeByComponents: [builder.class('🤫')],
48
+ components: [
49
+ converter.classToHost('spectrum-Swatch'),
50
+ ...converter.enumerateAttributes(
51
+ [
52
+ ['spectrum-Swatch--lightBorder', 'light'],
53
+ ['spectrum-Swatch--noBorder', 'none'],
54
+ ],
55
+ 'border'
56
+ ),
57
+ ...converter.enumerateAttributes(
58
+ [
59
+ ['spectrum-Swatch--roundingNone', 'none'],
60
+ ['spectrum-Swatch--roundingFull', 'full'],
61
+ ],
62
+ 'rounding'
63
+ ),
64
+ converter.classToAttribute('is-selected', 'selected'),
65
+ converter.classToAttribute('is-mixedValue', 'mixed-value'),
66
+ converter.classToAttribute('is-nothing', 'nothing'),
67
+ converter.classToAttribute('is-disabled', 'disabled'),
68
+ ...converter.enumerateAttributes(
69
+ [['spectrum-Swatch--rectangle', 'rectangle']],
70
+ 'shape'
71
+ ),
72
+ ...converter.enumerateAttributes(
73
+ [
74
+ ['spectrum-Swatch--sizeXS', 'xs'],
75
+ ['spectrum-Swatch--sizeS', 's'],
76
+ ['spectrum-Swatch--sizeM', 'm'],
77
+ ['spectrum-Swatch--sizeL', 'l'],
78
+ ],
79
+ 'size'
80
+ ),
81
+ converter.classToClass('spectrum-Swatch-fill'),
82
+ converter.classToClass('spectrum-Swatch-disabledIcon'),
83
+ converter.classToClass('spectrum-Swatch-mixedValueIcon'),
84
+ converter.classToSlotted('spectrum-Swatch-image', 'image'),
85
+ {
86
+ find: [
87
+ builder.class('spectrum-Swatch'),
88
+ builder.pseudoClass('focus-visible'),
89
+ builder.pseudoElement('after'),
90
+ ],
91
+ replace: [
92
+ {
93
+ replace: builder.pseudoClass('host'),
94
+ },
95
+ {
96
+ replace: builder.pseudoClass('focus-visible'),
97
+ hoist: true,
98
+ },
99
+ {
100
+ replace: builder.pseudoElement('after'),
101
+ },
102
+ ],
48
103
  },
49
- attributes: [
50
- {
51
- type: 'enum',
52
- name: 'border',
53
- forceOntoHost: true,
54
- values: [
55
- {
56
- name: 'light',
57
- selector: '.spectrum-Swatch--lightBorder',
58
- },
59
- {
60
- name: 'none',
61
- selector: '.spectrum-Swatch--noBorder',
62
- },
104
+ {
105
+ find: {
106
+ kind: 'not',
107
+ type: 'pseudo-class',
108
+ selectors: [
109
+ [builder.class('spectrum-Swatch--rectangle')],
63
110
  ],
64
111
  },
65
- {
66
- type: 'enum',
67
- name: 'rounding',
68
- forceOntoHost: true,
69
- values: [
70
- {
71
- name: 'none',
72
- selector: '.spectrum-Swatch--roundingNone',
73
- },
74
- {
75
- name: 'full',
76
- selector: '.spectrum-Swatch--roundingFull',
77
- },
78
- ],
79
- },
80
- {
81
- type: 'boolean',
82
- name: 'selected',
83
- selector: '.is-selected',
84
- },
85
- {
86
- type: 'boolean',
87
- name: 'mixed-value',
88
- selector: '.is-mixedValue',
89
- },
90
- {
91
- type: 'boolean',
92
- name: 'nothing',
93
- selector: '.is-nothing',
94
- },
95
- {
96
- type: 'boolean',
97
- name: 'disabled',
98
- selector: '.is-disabled',
112
+ replace: {
113
+ kind: 'not',
114
+ type: 'pseudo-class',
115
+ selectors: [[builder.attribute('shape', 'rectangle')]],
99
116
  },
100
- {
101
- type: 'enum',
102
- name: 'shape',
103
- forceOntoHost: true,
104
- values: [
105
- {
106
- name: 'rectangle',
107
- selector: '.spectrum-Swatch--rectangle',
108
- },
109
- ],
110
- },
111
- {
112
- type: 'enum',
113
- name: 'size',
114
- forceOntoHost: true,
115
- values: [
116
- {
117
- name: 'xs',
118
- selector: '.spectrum-Swatch--sizeXS',
119
- },
120
- {
121
- name: 's',
122
- selector: '.spectrum-Swatch--sizeS',
123
- },
124
- {
125
- name: 'm',
126
- selector: '.spectrum-Swatch--sizeM',
127
- },
128
- {
129
- name: 'l',
130
- selector: '.spectrum-Swatch--sizeL',
131
- },
132
- ],
133
- },
134
- ],
135
- classes: [
136
- {
137
- name: 'fill',
138
- selector: '.spectrum-Swatch-fill',
139
- },
140
- {
141
- name: 'disabledIcon',
142
- selector: '.spectrum-Swatch-disabledIcon',
143
- },
144
- {
145
- name: 'mixedValueIcon',
146
- selector: '.spectrum-Swatch-mixedValueIcon',
147
- },
148
- ],
149
- slots: [
150
- {
151
- selector: '.spectrum-Swatch-image',
152
- name: 'image',
153
- },
154
- ],
155
- },
156
- ],
157
- },
158
- ];
159
-
160
- export default config;
117
+ hoist: true,
118
+ },
119
+ ],
120
+ },
121
+ ],
122
+ };
package/src/spectrum-swatch-group.css.dev.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-swatchgroup-spacing-compact:var(
5
- --spectrum-spacing-50
6
- );--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(
4
+ :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-flow:wrap;justify-content:flex-start}:host{gap:var(
7
5
  --mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)
8
6
  )}:host([density=compact]){gap:var(
9
7
  --mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)
package/src/spectrum-swatch-group.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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{--spectrum-swatchgroup-spacing-compact:var(\n--spectrum-spacing-50\n);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(\n--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)\n)}:host([density=compact]){gap:var(\n--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)\n)}:host([density=spacious]){gap:var(\n--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)\n)}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 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{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-flow:wrap;justify-content:flex-start}:host{gap:var(\n--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)\n)}:host([density=compact]){gap:var(\n--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)\n)}:host([density=spacious]){gap:var(\n--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)\n)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-swatch-group.css.js CHANGED
@@ -1,7 +1,5 @@
1
1
  "use strict";import{css as s}from"@spectrum-web-components/base";const a=s`
2
- :host{--spectrum-swatchgroup-spacing-compact:var(
3
- --spectrum-spacing-50
4
- );--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(
2
+ :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-flow:wrap;justify-content:flex-start}:host{gap:var(
5
3
  --mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)
6
4
  )}:host([density=compact]){gap:var(
7
5
  --mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)
package/src/spectrum-swatch-group.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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{--spectrum-swatchgroup-spacing-compact:var(\n--spectrum-spacing-50\n);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(\n--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)\n)}:host([density=compact]){gap:var(\n--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)\n)}:host([density=spacious]){gap:var(\n--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)\n)}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWf,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 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{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-flow:wrap;justify-content:flex-start}:host{gap:var(\n--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)\n)}:host([density=compact]){gap:var(\n--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)\n)}:host([density=spacious]){gap:var(\n--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)\n)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-swatch.css.dev.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:rgba(0,0,0,.51);--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(
4
+ :host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(
5
5
  --spectrum-border-width-200
6
6
  );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
7
7
  --spectrum-swatch-slash-thickness-small
@@ -11,29 +11,19 @@ const styles = css`
11
11
  --spectrum-swatch-disabled-icon-border-color
12
12
  );--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(
13
13
  --spectrum-focus-indicator-color
14
- )}:host([size=xs]){--spectrum-swatch-size:var(
15
- --spectrum-swatch-size-extra-small
16
- );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(
14
+ )}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(
17
15
  --spectrum-swatch-slash-thickness-extra-small
18
- )}:host([size=s]){--spectrum-swatch-size:var(
19
- --spectrum-swatch-size-small
20
- );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
16
+ )}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
21
17
  --spectrum-swatch-slash-thickness-small
22
- )}:host([size=m]){--spectrum-swatch-size:var(
23
- --spectrum-swatch-size-medium
24
- );--spectrum-swatch-disabled-icon-size:var(
18
+ )}:host([size=m]){--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(
25
19
  --spectrum-workflow-icon-size-100
26
20
  );--spectrum-swatch-slash-thickness:var(
27
21
  --spectrum-swatch-slash-thickness-medium
28
- )}:host([size=l]){--spectrum-swatch-size:var(
29
- --spectrum-swatch-size-large
30
- );--spectrum-swatch-disabled-icon-size:var(
22
+ )}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(
31
23
  --spectrum-workflow-icon-size-200
32
24
  );--spectrum-swatch-slash-thickness:var(
33
25
  --spectrum-swatch-slash-thickness-large
34
- )}@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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(
35
- --mod-swatch-size,var(--spectrum-swatch-size)
36
- )}.disabledIcon{height:var(
26
+ )}@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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(
37
27
  --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
38
28
  );width:var(
39
29
  --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
@@ -67,13 +57,7 @@ var(--spectrum-swatch-border-thickness-selected)
67
57
  )*2) calc(100% - var(
68
58
  --mod-swatch-border-thickness-selected,
69
59
  var(--spectrum-swatch-border-thickness-selected)
70
- )*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host(.is-image) .fill:before{background-color:transparent}:host([mixed-value]) .fill{background:var(
71
- --spectrum-picked-color,transparent
72
- )}:host([mixed-value]) .mixedValueIcon{color:var(
73
- --spectrum-swatch-dash-icon-color
74
- );visibility:visible}:host([nothing]) .fill{background-color:var(
75
- --spectrum-picked-color,transparent
76
- );background-image:none}:host([nothing]) .fill:after{background:var(
60
+ )*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(
77
61
  --highcontrast-swatch-fill-foreground-color,var(
78
62
  --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
79
63
  )
@@ -124,9 +108,7 @@ var(--spectrum-swatch-checkerboard-size)
124
108
  --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
125
109
  ) var(
126
110
  --highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))
127
- );content:"";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(
128
- --spectrum-picked-color,transparent
129
- )}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(
111
+ );content:"";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(
130
112
  --highcontrast-swatch-disabled-icon-color,var(
131
113
  --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
132
114
  )
@@ -140,7 +122,7 @@ var(--spectrum-swatch-checkerboard-size)
140
122
  )
141
123
  )}.disabledIcon path:last-child{fill:var(
142
124
  --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
143
- )}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(
125
+ )}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(
144
126
  --mod-swatch-border-thickness-selected,
145
127
  var(--spectrum-swatch-border-thickness-selected)
146
128
  )*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(
package/src/spectrum-swatch.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:rgba(0,0,0,.51);--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-extra-small\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-small\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host([size=m]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-medium\n);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-large\n);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--mod-swatch-size,var(--spectrum-swatch-size)\n)}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host(.is-image) .fill:before{background-color:transparent}:host([mixed-value]) .fill{background:var(\n--spectrum-picked-color,transparent\n)}:host([mixed-value]) .mixedValueIcon{color:var(\n--spectrum-swatch-dash-icon-color\n);visibility:visible}:host([nothing]) .fill{background-color:var(\n--spectrum-picked-color,transparent\n);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:8px;--spectrum-swatch-checkerboard-background-offset:0px;--spectrum-swatch-checkerboard-dark-color:#d9d9d9;--spectrum-swatch-checkerboard-light-color:#fff;align-items:center;background-color:var(--spectrum-swatch-checkerboard-light-color);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(-45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-checkerboard-background-offset) var(--spectrum-swatch-checkerboard-background-offset),var(--spectrum-swatch-checkerboard-background-offset) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n) + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n) + var(--spectrum-swatch-checkerboard-background-offset)) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*-1 + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*-1 + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);background-size:calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*2) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(\n--spectrum-picked-color,transparent\n)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}\n`;\nexport default styles;"],
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;AAqJf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 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{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host([size=m]){--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:8px;--spectrum-swatch-checkerboard-background-offset:0px;--spectrum-swatch-checkerboard-dark-color:#d9d9d9;--spectrum-swatch-checkerboard-light-color:#fff;align-items:center;background-color:var(--spectrum-swatch-checkerboard-light-color);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(-45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-checkerboard-background-offset) var(--spectrum-swatch-checkerboard-background-offset),var(--spectrum-swatch-checkerboard-background-offset) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n) + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n) + var(--spectrum-swatch-checkerboard-background-offset)) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*-1 + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*-1 + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);background-size:calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*2) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}\n`;\nexport default styles;"],
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;AAmIf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-swatch.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
2
- :host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:rgba(0,0,0,.51);--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(
2
+ :host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(
3
3
  --spectrum-border-width-200
4
4
  );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
5
5
  --spectrum-swatch-slash-thickness-small
@@ -9,29 +9,19 @@
9
9
  --spectrum-swatch-disabled-icon-border-color
10
10
  );--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(
11
11
  --spectrum-focus-indicator-color
12
- )}:host([size=xs]){--spectrum-swatch-size:var(
13
- --spectrum-swatch-size-extra-small
14
- );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(
12
+ )}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(
15
13
  --spectrum-swatch-slash-thickness-extra-small
16
- )}:host([size=s]){--spectrum-swatch-size:var(
17
- --spectrum-swatch-size-small
18
- );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
14
+ )}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
19
15
  --spectrum-swatch-slash-thickness-small
20
- )}:host([size=m]){--spectrum-swatch-size:var(
21
- --spectrum-swatch-size-medium
22
- );--spectrum-swatch-disabled-icon-size:var(
16
+ )}:host([size=m]){--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(
23
17
  --spectrum-workflow-icon-size-100
24
18
  );--spectrum-swatch-slash-thickness:var(
25
19
  --spectrum-swatch-slash-thickness-medium
26
- )}:host([size=l]){--spectrum-swatch-size:var(
27
- --spectrum-swatch-size-large
28
- );--spectrum-swatch-disabled-icon-size:var(
20
+ )}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(
29
21
  --spectrum-workflow-icon-size-200
30
22
  );--spectrum-swatch-slash-thickness:var(
31
23
  --spectrum-swatch-slash-thickness-large
32
- )}@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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(
33
- --mod-swatch-size,var(--spectrum-swatch-size)
34
- )}.disabledIcon{height:var(
24
+ )}@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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(
35
25
  --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
36
26
  );width:var(
37
27
  --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
@@ -65,13 +55,7 @@ var(--spectrum-swatch-border-thickness-selected)
65
55
  )*2) calc(100% - var(
66
56
  --mod-swatch-border-thickness-selected,
67
57
  var(--spectrum-swatch-border-thickness-selected)
68
- )*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host(.is-image) .fill:before{background-color:transparent}:host([mixed-value]) .fill{background:var(
69
- --spectrum-picked-color,transparent
70
- )}:host([mixed-value]) .mixedValueIcon{color:var(
71
- --spectrum-swatch-dash-icon-color
72
- );visibility:visible}:host([nothing]) .fill{background-color:var(
73
- --spectrum-picked-color,transparent
74
- );background-image:none}:host([nothing]) .fill:after{background:var(
58
+ )*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(
75
59
  --highcontrast-swatch-fill-foreground-color,var(
76
60
  --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
77
61
  )
@@ -122,9 +106,7 @@ var(--spectrum-swatch-checkerboard-size)
122
106
  --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
123
107
  ) var(
124
108
  --highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))
125
- );content:"";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(
126
- --spectrum-picked-color,transparent
127
- )}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(
109
+ );content:"";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(
128
110
  --highcontrast-swatch-disabled-icon-color,var(
129
111
  --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
130
112
  )
@@ -138,7 +120,7 @@ var(--spectrum-swatch-checkerboard-size)
138
120
  )
139
121
  )}.disabledIcon path:last-child{fill:var(
140
122
  --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
141
- )}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(
123
+ )}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(
142
124
  --mod-swatch-border-thickness-selected,
143
125
  var(--spectrum-swatch-border-thickness-selected)
144
126
  )*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(