@spectrum-web-components/thumbnail 0.33.2 → 0.33.3-overlay.65

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 (9) hide show
  1. package/package.json +4 -4
  2. package/src/spectrum-thumbnail.css.dev.js +11 -13
  3. package/src/spectrum-thumbnail.css.dev.js.map +2 -2
  4. package/src/spectrum-thumbnail.css.js +11 -13
  5. package/src/spectrum-thumbnail.css.js.map +2 -2
  6. package/src/thumbnail.css.dev.js +11 -13
  7. package/src/thumbnail.css.dev.js.map +2 -2
  8. package/src/thumbnail.css.js +11 -13
  9. package/src/thumbnail.css.js.map +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/thumbnail",
3
- "version": "0.33.2",
3
+ "version": "0.33.3-overlay.65+e3bf25c5c",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,10 +57,10 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.33.2"
60
+ "@spectrum-web-components/base": "^0.33.3-overlay.65+e3bf25c5c"
61
61
  },
62
62
  "devDependencies": {
63
- "@spectrum-css/thumbnail": "^3.0.5"
63
+ "@spectrum-css/thumbnail": "^3.0.12"
64
64
  },
65
65
  "types": "./src/index.d.ts",
66
66
  "customElements": "custom-elements.json",
@@ -68,5 +68,5 @@
68
68
  "./sp-*.js",
69
69
  "./**/*.dev.js"
70
70
  ],
71
- "gitHead": "6d5d6b3c31d92a058202a242a283125d25131f81"
71
+ "gitHead": "e3bf25c5c6676cb5ade2ca9ea633540cb08aee23"
72
72
  }
package/src/spectrum-thumbnail.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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(
5
- --spectrum-thumbnail-border-opacity
6
- );--spectrum-thumbnail-layer-border-width-inner:var(
4
+ :host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(
7
5
  --spectrum-border-width-400
8
6
  );--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(
9
7
  --spectrum-border-width-100
@@ -41,11 +39,11 @@ var(--spectrum-thumbnail-checkerboard-size)
41
39
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
42
40
  );box-shadow:inset 0 0 0 var(
43
41
  --mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
44
- ) rgba(var(
45
- --mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
46
- ),var(
47
- --mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
48
- ));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
42
+ ) var(
43
+ --highcontrast-thumbnail-border-color,var(
44
+ --mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)
45
+ )
46
+ );content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
49
47
  --mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
50
48
  )}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
51
49
  --highcontrast-thumbnail-focus-indicator-color,var(
@@ -153,7 +151,7 @@ var(--spectrum-thumbnail-focus-indicator-thickness)
153
151
  --mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
154
152
  ) solid var(
155
153
  --mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
156
- );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
154
+ );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(
157
155
  --highcontrast-thumbnail-border-color-selected,var(
158
156
  --mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)
159
157
  )
@@ -163,7 +161,7 @@ var(--spectrum-thumbnail-border-width-selected)
163
161
  ) - var(
164
162
  --mod-thumbnail-layer-border-width-inner,
165
163
  var(--spectrum-thumbnail-layer-border-width-inner)
166
- ));outline-width:var(
164
+ ));outline-style:solid;outline-width:var(
167
165
  --mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
168
166
  )}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
169
167
  --mod-thumbnail-layer-border-width-inner,
@@ -171,9 +169,9 @@ var(--spectrum-thumbnail-layer-border-width-inner)
171
169
  )*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
172
170
  --mod-thumbnail-layer-border-width-inner,
173
171
  var(--spectrum-thumbnail-layer-border-width-inner)
174
- )*2);outline:solid;outline-color:var(
172
+ )*2);outline-color:var(
175
173
  --mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)
176
- );outline-width:calc(var(
174
+ );outline-style:solid;outline-width:calc(var(
177
175
  --mod-thumbnail-layer-border-width-inner,
178
176
  var(--spectrum-thumbnail-layer-border-width-inner)
179
177
  ) - var(
@@ -181,7 +179,7 @@ var(--spectrum-thumbnail-layer-border-width-inner)
181
179
  var(--spectrum-thumbnail-layer-border-width-outer)
182
180
  ))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
183
181
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
184
- );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}
182
+ );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}
185
183
  `;
186
184
  export default styles;
187
185
  //# sourceMappingURL=spectrum-thumbnail.css.dev.js.map
package/src/spectrum-thumbnail.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-thumbnail.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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(\n--spectrum-thumbnail-border-opacity\n);--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) rgba(var(\n--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)\n),var(\n--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)\n));content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline:solid;outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuLf,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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) var(\n--highcontrast-thumbnail-border-color,var(\n--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)\n)\n);content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-style:solid;outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-style:solid;outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqLf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-thumbnail.css.js CHANGED
@@ -1,7 +1,5 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const i=r`
2
- :host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(
3
- --spectrum-thumbnail-border-opacity
4
- );--spectrum-thumbnail-layer-border-width-inner:var(
2
+ :host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(
5
3
  --spectrum-border-width-400
6
4
  );--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(
7
5
  --spectrum-border-width-100
@@ -39,11 +37,11 @@ var(--spectrum-thumbnail-checkerboard-size)
39
37
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
40
38
  );box-shadow:inset 0 0 0 var(
41
39
  --mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
42
- ) rgba(var(
43
- --mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
44
- ),var(
45
- --mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
46
- ));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
40
+ ) var(
41
+ --highcontrast-thumbnail-border-color,var(
42
+ --mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)
43
+ )
44
+ );content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
47
45
  --mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
48
46
  )}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
49
47
  --highcontrast-thumbnail-focus-indicator-color,var(
@@ -151,7 +149,7 @@ var(--spectrum-thumbnail-focus-indicator-thickness)
151
149
  --mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
152
150
  ) solid var(
153
151
  --mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
154
- );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
152
+ );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(
155
153
  --highcontrast-thumbnail-border-color-selected,var(
156
154
  --mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)
157
155
  )
@@ -161,7 +159,7 @@ var(--spectrum-thumbnail-border-width-selected)
161
159
  ) - var(
162
160
  --mod-thumbnail-layer-border-width-inner,
163
161
  var(--spectrum-thumbnail-layer-border-width-inner)
164
- ));outline-width:var(
162
+ ));outline-style:solid;outline-width:var(
165
163
  --mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
166
164
  )}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
167
165
  --mod-thumbnail-layer-border-width-inner,
@@ -169,9 +167,9 @@ var(--spectrum-thumbnail-layer-border-width-inner)
169
167
  )*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
170
168
  --mod-thumbnail-layer-border-width-inner,
171
169
  var(--spectrum-thumbnail-layer-border-width-inner)
172
- )*2);outline:solid;outline-color:var(
170
+ )*2);outline-color:var(
173
171
  --mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)
174
- );outline-width:calc(var(
172
+ );outline-style:solid;outline-width:calc(var(
175
173
  --mod-thumbnail-layer-border-width-inner,
176
174
  var(--spectrum-thumbnail-layer-border-width-inner)
177
175
  ) - var(
@@ -179,6 +177,6 @@ var(--spectrum-thumbnail-layer-border-width-inner)
179
177
  var(--spectrum-thumbnail-layer-border-width-outer)
180
178
  ))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
181
179
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
182
- );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}
180
+ );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}
183
181
  `;export default i;
184
182
  //# sourceMappingURL=spectrum-thumbnail.css.js.map
package/src/spectrum-thumbnail.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-thumbnail.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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(\n--spectrum-thumbnail-border-opacity\n);--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) rgba(var(\n--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)\n),var(\n--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)\n));content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline:solid;outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuLf,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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) var(\n--highcontrast-thumbnail-border-color,var(\n--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)\n)\n);content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-style:solid;outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-style:solid;outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqLf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/thumbnail.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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(
5
- --spectrum-thumbnail-border-opacity
6
- );--spectrum-thumbnail-layer-border-width-inner:var(
4
+ :host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(
7
5
  --spectrum-border-width-400
8
6
  );--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(
9
7
  --spectrum-border-width-100
@@ -41,11 +39,11 @@ var(--spectrum-thumbnail-checkerboard-size)
41
39
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
42
40
  );box-shadow:inset 0 0 0 var(
43
41
  --mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
44
- ) rgba(var(
45
- --mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
46
- ),var(
47
- --mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
48
- ));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
42
+ ) var(
43
+ --highcontrast-thumbnail-border-color,var(
44
+ --mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)
45
+ )
46
+ );content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
49
47
  --mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
50
48
  )}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
51
49
  --highcontrast-thumbnail-focus-indicator-color,var(
@@ -153,7 +151,7 @@ var(--spectrum-thumbnail-focus-indicator-thickness)
153
151
  --mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
154
152
  ) solid var(
155
153
  --mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
156
- );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
154
+ );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(
157
155
  --highcontrast-thumbnail-border-color-selected,var(
158
156
  --mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)
159
157
  )
@@ -163,7 +161,7 @@ var(--spectrum-thumbnail-border-width-selected)
163
161
  ) - var(
164
162
  --mod-thumbnail-layer-border-width-inner,
165
163
  var(--spectrum-thumbnail-layer-border-width-inner)
166
- ));outline-width:var(
164
+ ));outline-style:solid;outline-width:var(
167
165
  --mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
168
166
  )}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
169
167
  --mod-thumbnail-layer-border-width-inner,
@@ -171,9 +169,9 @@ var(--spectrum-thumbnail-layer-border-width-inner)
171
169
  )*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
172
170
  --mod-thumbnail-layer-border-width-inner,
173
171
  var(--spectrum-thumbnail-layer-border-width-inner)
174
- )*2);outline:solid;outline-color:var(
172
+ )*2);outline-color:var(
175
173
  --mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)
176
- );outline-width:calc(var(
174
+ );outline-style:solid;outline-width:calc(var(
177
175
  --mod-thumbnail-layer-border-width-inner,
178
176
  var(--spectrum-thumbnail-layer-border-width-inner)
179
177
  ) - var(
@@ -181,7 +179,7 @@ var(--spectrum-thumbnail-layer-border-width-inner)
181
179
  var(--spectrum-thumbnail-layer-border-width-outer)
182
180
  ))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
183
181
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
184
- );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}::slotted(:not(img)){display:none}
182
+ );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}::slotted(:not(img)){display:none}
185
183
  `;
186
184
  export default styles;
187
185
  //# sourceMappingURL=thumbnail.css.dev.js.map
package/src/thumbnail.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["thumbnail.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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(\n--spectrum-thumbnail-border-opacity\n);--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) rgba(var(\n--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)\n),var(\n--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)\n));content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline:solid;outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}::slotted(:not(img)){display:none}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuLf,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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) var(\n--highcontrast-thumbnail-border-color,var(\n--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)\n)\n);content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-style:solid;outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-style:solid;outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}::slotted(:not(img)){display:none}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqLf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/thumbnail.css.js CHANGED
@@ -1,7 +1,5 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const i=r`
2
- :host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(
3
- --spectrum-thumbnail-border-opacity
4
- );--spectrum-thumbnail-layer-border-width-inner:var(
2
+ :host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(
5
3
  --spectrum-border-width-400
6
4
  );--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(
7
5
  --spectrum-border-width-100
@@ -39,11 +37,11 @@ var(--spectrum-thumbnail-checkerboard-size)
39
37
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
40
38
  );box-shadow:inset 0 0 0 var(
41
39
  --mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
42
- ) rgba(var(
43
- --mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
44
- ),var(
45
- --mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
46
- ));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
40
+ ) var(
41
+ --highcontrast-thumbnail-border-color,var(
42
+ --mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)
43
+ )
44
+ );content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
47
45
  --mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
48
46
  )}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
49
47
  --highcontrast-thumbnail-focus-indicator-color,var(
@@ -151,7 +149,7 @@ var(--spectrum-thumbnail-focus-indicator-thickness)
151
149
  --mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
152
150
  ) solid var(
153
151
  --mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
154
- );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
152
+ );box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(
155
153
  --highcontrast-thumbnail-border-color-selected,var(
156
154
  --mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)
157
155
  )
@@ -161,7 +159,7 @@ var(--spectrum-thumbnail-border-width-selected)
161
159
  ) - var(
162
160
  --mod-thumbnail-layer-border-width-inner,
163
161
  var(--spectrum-thumbnail-layer-border-width-inner)
164
- ));outline-width:var(
162
+ ));outline-style:solid;outline-width:var(
165
163
  --mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
166
164
  )}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
167
165
  --mod-thumbnail-layer-border-width-inner,
@@ -169,9 +167,9 @@ var(--spectrum-thumbnail-layer-border-width-inner)
169
167
  )*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
170
168
  --mod-thumbnail-layer-border-width-inner,
171
169
  var(--spectrum-thumbnail-layer-border-width-inner)
172
- )*2);outline:solid;outline-color:var(
170
+ )*2);outline-color:var(
173
171
  --mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)
174
- );outline-width:calc(var(
172
+ );outline-style:solid;outline-width:calc(var(
175
173
  --mod-thumbnail-layer-border-width-inner,
176
174
  var(--spectrum-thumbnail-layer-border-width-inner)
177
175
  ) - var(
@@ -179,6 +177,6 @@ var(--spectrum-thumbnail-layer-border-width-inner)
179
177
  var(--spectrum-thumbnail-layer-border-width-outer)
180
178
  ))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
181
179
  --mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
182
- );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}::slotted(:not(img)){display:none}
180
+ );inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}::slotted(:not(img)){display:none}
183
181
  `;export default i;
184
182
  //# sourceMappingURL=thumbnail.css.js.map
package/src/thumbnail.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["thumbnail.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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(\n--spectrum-thumbnail-border-opacity\n);--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) rgba(var(\n--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)\n),var(\n--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)\n));content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline:solid;outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuLf,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-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgba:rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity));--spectrum-thumbnail-layer-border-width-inner:var(\n--spectrum-border-width-400\n);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(\n--spectrum-border-width-100\n);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(\n--spectrum-border-width-200\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-accent-color-800\n);--spectrum-thumbnail-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-thumbnail-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-thumbnail-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-thumbnail-color-opacity-disabled:var(\n--spectrum-thumbnail-opacity-disabled\n);--spectrum-thumbnail-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-thumbnail-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-thumbnail-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(\n--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)\n) 0 25%,var(\n--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)\n) 0 50%) 0 0 /calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2) calc(var(\n--mod-thumbnail-checkerboard-size,\nvar(--spectrum-thumbnail-checkerboard-size)\n)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)\n) var(\n--highcontrast-thumbnail-border-color,var(\n--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)\n)\n);content:\"\";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(\n--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)\n)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(\n--highcontrast-thumbnail-focus-indicator-color,var(\n--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)\n)\n);border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);border-style:solid;border-width:var(\n--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)\n);content:\"\";inset-block-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-block-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-end:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);inset-inline-start:calc((var(\n--mod-thumbnail-focus-indicator-gap,\nvar(--spectrum-thumbnail-focus-indicator-gap)\n) + var(\n--mod-thumbnail-focus-indicator-thickness,\nvar(--spectrum-thumbnail-focus-indicator-thickness)\n))*-1);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);overflow:hidden}:host([layer]){align-items:center;border:var(\n--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)\n) solid var(\n--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)\n);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline-color:var(\n--highcontrast-thumbnail-border-color-selected,var(\n--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)\n)\n);outline-offset:calc(var(\n--mod-thumbnail-border-width-selected,\nvar(--spectrum-thumbnail-border-width-selected)\n) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n));outline-style:solid;outline-width:var(\n--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)\n)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n)*2);outline-color:var(\n--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)\n);outline-style:solid;outline-width:calc(var(\n--mod-thumbnail-layer-border-width-inner,\nvar(--spectrum-thumbnail-layer-border-width-inner)\n) - var(\n--mod-thumbnail-layer-border-width-outer,\nvar(--spectrum-thumbnail-layer-border-width-outer)\n))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(\n--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)\n);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:SelectedItem;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;background-color:Canvas;color:CanvasText;forced-color-adjust:none}}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqLf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }