@spectrum-web-components/thumbnail 1.1.0 → 1.1.1

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 (47) hide show
  1. package/package.json +4 -4
  2. package/sp-thumbnail.d.ts +6 -0
  3. package/sp-thumbnail.dev.js +5 -0
  4. package/sp-thumbnail.dev.js.map +7 -0
  5. package/sp-thumbnail.js +2 -0
  6. package/sp-thumbnail.js.map +7 -0
  7. package/src/Thumbnail.d.ts +20 -0
  8. package/src/Thumbnail.dev.js +104 -0
  9. package/src/Thumbnail.dev.js.map +7 -0
  10. package/src/Thumbnail.js +19 -0
  11. package/src/Thumbnail.js.map +7 -0
  12. package/src/index.d.ts +1 -0
  13. package/src/index.dev.js +3 -0
  14. package/src/index.dev.js.map +7 -0
  15. package/src/index.js +2 -0
  16. package/src/index.js.map +7 -0
  17. package/src/spectrum-thumbnail.css.d.ts +2 -0
  18. package/src/spectrum-thumbnail.css.dev.js +7 -0
  19. package/src/spectrum-thumbnail.css.dev.js.map +7 -0
  20. package/src/spectrum-thumbnail.css.js +4 -0
  21. package/src/spectrum-thumbnail.css.js.map +7 -0
  22. package/src/thumbnail-overrides.css.d.ts +2 -0
  23. package/src/thumbnail-overrides.css.dev.js +7 -0
  24. package/src/thumbnail-overrides.css.dev.js.map +7 -0
  25. package/src/thumbnail-overrides.css.js +4 -0
  26. package/src/thumbnail-overrides.css.js.map +7 -0
  27. package/src/thumbnail.css.d.ts +2 -0
  28. package/src/thumbnail.css.dev.js +7 -0
  29. package/src/thumbnail.css.dev.js.map +7 -0
  30. package/src/thumbnail.css.js +4 -0
  31. package/src/thumbnail.css.js.map +7 -0
  32. package/stories/images.js +5 -0
  33. package/stories/images.js.map +7 -0
  34. package/stories/thumbnail-sizes.stories.js +30 -0
  35. package/stories/thumbnail-sizes.stories.js.map +7 -0
  36. package/stories/thumbnail.stories.js +89 -0
  37. package/stories/thumbnail.stories.js.map +7 -0
  38. package/test/benchmark/basic-test.js +11 -0
  39. package/test/benchmark/basic-test.js.map +7 -0
  40. package/test/thumbnail-memory.test.js +8 -0
  41. package/test/thumbnail-memory.test.js.map +7 -0
  42. package/test/thumbnail-sizes.test-vrt.js +5 -0
  43. package/test/thumbnail-sizes.test-vrt.js.map +7 -0
  44. package/test/thumbnail.test-vrt.js +5 -0
  45. package/test/thumbnail.test-vrt.js.map +7 -0
  46. package/test/thumbnail.test.js +73 -0
  47. package/test/thumbnail.test.js.map +7 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/thumbnail",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -58,8 +58,8 @@
58
58
  "lit-html"
59
59
  ],
60
60
  "dependencies": {
61
- "@spectrum-web-components/base": "^1.1.0",
62
- "@spectrum-web-components/opacity-checkerboard": "^1.1.0"
61
+ "@spectrum-web-components/base": "^1.1.1",
62
+ "@spectrum-web-components/opacity-checkerboard": "^1.1.1"
63
63
  },
64
64
  "devDependencies": {
65
65
  "@spectrum-css/thumbnail": "7.0.0-s2-foundations.18"
@@ -70,5 +70,5 @@
70
70
  "./sp-*.js",
71
71
  "./**/*.dev.js"
72
72
  ],
73
- "gitHead": "e3c6e52501451acc6fa85b10dd718267b80a01ab"
73
+ "gitHead": "44870aa95001c1b995456d994ae31bbe7277fac9"
74
74
  }
@@ -0,0 +1,6 @@
1
+ import { Thumbnail } from './src/Thumbnail.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'sp-thumbnail': Thumbnail;
5
+ }
6
+ }
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ import { Thumbnail } from "./src/Thumbnail.dev.js";
3
+ import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
4
+ defineElement("sp-thumbnail", Thumbnail);
5
+ //# sourceMappingURL=sp-thumbnail.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-thumbnail.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Thumbnail } from './src/Thumbnail.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-thumbnail', Thumbnail);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-thumbnail': Thumbnail;\n }\n}\n"],
5
+ "mappings": ";AAYA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,cAAc,gBAAgB,SAAS;",
6
+ "names": []
7
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";import{Thumbnail as e}from"./src/Thumbnail.js";import{defineElement as m}from"@spectrum-web-components/base/src/define-element.js";m("sp-thumbnail",e);
2
+ //# sourceMappingURL=sp-thumbnail.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-thumbnail.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Thumbnail } from './src/Thumbnail.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-thumbnail', Thumbnail);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-thumbnail': Thumbnail;\n }\n}\n"],
5
+ "mappings": "aAYA,OAAS,aAAAA,MAAiB,qBAC1B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,eAAgBD,CAAS",
6
+ "names": ["Thumbnail", "defineElement"]
7
+ }
@@ -0,0 +1,20 @@
1
+ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
+ declare const validSizes: string[];
3
+ export type ThumbnailSize = (typeof validSizes)[number];
4
+ /**
5
+ * @element sp-thumbnail
6
+ *
7
+ * @slot image - image element to present in the Thumbnail
8
+ */
9
+ export declare class Thumbnail extends SpectrumElement {
10
+ static get styles(): CSSResultArray;
11
+ background?: string;
12
+ cover: boolean;
13
+ layer: boolean;
14
+ get size(): ThumbnailSize;
15
+ set size(value: ThumbnailSize);
16
+ private _size;
17
+ protected update(changes: PropertyValues): void;
18
+ protected render(): TemplateResult;
19
+ }
20
+ export {};
@@ -0,0 +1,104 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __decorateClass = (decorators, target, key, kind) => {
5
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
6
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
7
+ if (decorator = decorators[i])
8
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
9
+ if (kind && result) __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ import {
13
+ html,
14
+ SpectrumElement
15
+ } from "@spectrum-web-components/base";
16
+ import { property } from "@spectrum-web-components/base/src/decorators.js";
17
+ import opacityCheckerboardStyles from "@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";
18
+ import styles from "./thumbnail.css.js";
19
+ const validSizes = [
20
+ "50",
21
+ "75",
22
+ "100",
23
+ "200",
24
+ "300",
25
+ "400",
26
+ "500",
27
+ "600",
28
+ "700",
29
+ "800",
30
+ "900",
31
+ "1000"
32
+ ];
33
+ const defaultSize = validSizes[6];
34
+ export class Thumbnail extends SpectrumElement {
35
+ constructor() {
36
+ super(...arguments);
37
+ this.cover = false;
38
+ this.layer = false;
39
+ this._size = defaultSize;
40
+ }
41
+ static get styles() {
42
+ return [opacityCheckerboardStyles, styles];
43
+ }
44
+ get size() {
45
+ return this._size;
46
+ }
47
+ set size(value) {
48
+ const size = validSizes.includes(value) ? value : defaultSize;
49
+ if (size) {
50
+ this.setAttribute("size", `${size}`);
51
+ }
52
+ if (this._size === size) {
53
+ return;
54
+ }
55
+ const oldSize = this._size;
56
+ this._size = size;
57
+ this.requestUpdate("size", oldSize);
58
+ }
59
+ update(changes) {
60
+ if (!this.hasAttribute("size")) {
61
+ this.setAttribute("size", this.size);
62
+ }
63
+ super.update(changes);
64
+ }
65
+ render() {
66
+ if (this.background) {
67
+ return html`
68
+ <div
69
+ class="opacity-checkerboard background"
70
+ style="background: ${this.background}"
71
+ >
72
+ <div class="image-wrapper">
73
+ <slot></slot>
74
+ </div>
75
+ </div>
76
+ `;
77
+ } else if (this.layer) {
78
+ return html`
79
+ <div class="opacity-checkerboard layer-inner">
80
+ <slot></slot>
81
+ </div>
82
+ `;
83
+ } else {
84
+ return html`
85
+ <div class="opacity-checkerboard image-wrapper">
86
+ <slot></slot>
87
+ </div>
88
+ `;
89
+ }
90
+ }
91
+ }
92
+ __decorateClass([
93
+ property({ type: String, reflect: true })
94
+ ], Thumbnail.prototype, "background", 2);
95
+ __decorateClass([
96
+ property({ type: Boolean, reflect: true })
97
+ ], Thumbnail.prototype, "cover", 2);
98
+ __decorateClass([
99
+ property({ type: Boolean, reflect: true })
100
+ ], Thumbnail.prototype, "layer", 2);
101
+ __decorateClass([
102
+ property({ type: String, reflect: true })
103
+ ], Thumbnail.prototype, "size", 1);
104
+ //# sourceMappingURL=Thumbnail.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["Thumbnail.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\n\nimport styles from './thumbnail.css.js';\n\nconst validSizes = [\n '50',\n '75',\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n '1000',\n];\nexport type ThumbnailSize = (typeof validSizes)[number];\n\nconst defaultSize = validSizes[6];\n\n/**\n * @element sp-thumbnail\n *\n * @slot image - image element to present in the Thumbnail\n */\n\nexport class Thumbnail extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerboardStyles, styles];\n }\n\n @property({ type: String, reflect: true })\n public background?: string;\n\n @property({ type: Boolean, reflect: true })\n public cover = false;\n\n @property({ type: Boolean, reflect: true })\n public layer = false;\n\n @property({ type: String, reflect: true })\n public get size(): ThumbnailSize {\n return this._size;\n }\n\n public set size(value: ThumbnailSize) {\n const size = (\n validSizes.includes(value) ? value : defaultSize\n ) as ThumbnailSize;\n if (size) {\n this.setAttribute('size', `${size}`);\n }\n if (this._size === size) {\n return;\n }\n const oldSize = this._size;\n this._size = size;\n this.requestUpdate('size', oldSize);\n }\n\n private _size = defaultSize;\n\n protected override update(changes: PropertyValues): void {\n if (!this.hasAttribute('size')) {\n this.setAttribute('size', this.size);\n }\n super.update(changes);\n }\n\n protected override render(): TemplateResult {\n if (this.background) {\n return html`\n <div\n class=\"opacity-checkerboard background\"\n style=\"background: ${this.background}\"\n >\n <div class=\"image-wrapper\">\n <slot></slot>\n </div>\n </div>\n `;\n } else if (this.layer) {\n return html`\n <div class=\"opacity-checkerboard layer-inner\">\n <slot></slot>\n </div>\n `;\n } else {\n return html`\n <div class=\"opacity-checkerboard image-wrapper\">\n <slot></slot>\n </div>\n `;\n }\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,OAAO,+BAA+B;AAEtC,OAAO,YAAY;AAEnB,MAAM,aAAa;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAGA,MAAM,cAAc,WAAW,CAAC;AAQzB,aAAM,kBAAkB,gBAAgB;AAAA,EAAxC;AAAA;AASH,SAAO,QAAQ;AAGf,SAAO,QAAQ;AAsBf,SAAQ,QAAQ;AAAA;AAAA,EAjChB,WAA2B,SAAyB;AAChD,WAAO,CAAC,2BAA2B,MAAM;AAAA,EAC7C;AAAA,EAYA,IAAW,OAAsB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,KAAK,OAAsB;AAClC,UAAM,OACF,WAAW,SAAS,KAAK,IAAI,QAAQ;AAEzC,QAAI,MAAM;AACN,WAAK,aAAa,QAAQ,GAAG,IAAI,EAAE;AAAA,IACvC;AACA,QAAI,KAAK,UAAU,MAAM;AACrB;AAAA,IACJ;AACA,UAAM,UAAU,KAAK;AACrB,SAAK,QAAQ;AACb,SAAK,cAAc,QAAQ,OAAO;AAAA,EACtC;AAAA,EAImB,OAAO,SAA+B;AACrD,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,KAAK,IAAI;AAAA,IACvC;AACA,UAAM,OAAO,OAAO;AAAA,EACxB;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,YAAY;AACjB,aAAO;AAAA;AAAA;AAAA,yCAGsB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,WAAW,KAAK,OAAO;AACnB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX,OAAO;AACH,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX;AAAA,EACJ;AACJ;AA/DW;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GALhC,UAMF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARjC,UASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAXjC,UAYF;AAGI;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAdhC,UAeE;",
6
+ "names": []
7
+ }
@@ -0,0 +1,19 @@
1
+ "use strict";var n=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var s=(o,i,r,e)=>{for(var t=e>1?void 0:e?y(i,r):i,a=o.length-1,c;a>=0;a--)(c=o[a])&&(t=(e?c(i,r,t):c(t))||t);return e&&t&&n(i,r,t),t};import{html as p,SpectrumElement as z}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import b from"@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";import h from"./thumbnail.css.js";const u=["50","75","100","200","300","400","500","600","700","800","900","1000"],d=u[6];export class Thumbnail extends z{constructor(){super(...arguments);this.cover=!1;this.layer=!1;this._size=d}static get styles(){return[b,h]}get size(){return this._size}set size(r){const e=u.includes(r)?r:d;if(e&&this.setAttribute("size",`${e}`),this._size===e)return;const t=this._size;this._size=e,this.requestUpdate("size",t)}update(r){this.hasAttribute("size")||this.setAttribute("size",this.size),super.update(r)}render(){return this.background?p`
2
+ <div
3
+ class="opacity-checkerboard background"
4
+ style="background: ${this.background}"
5
+ >
6
+ <div class="image-wrapper">
7
+ <slot></slot>
8
+ </div>
9
+ </div>
10
+ `:this.layer?p`
11
+ <div class="opacity-checkerboard layer-inner">
12
+ <slot></slot>
13
+ </div>
14
+ `:p`
15
+ <div class="opacity-checkerboard image-wrapper">
16
+ <slot></slot>
17
+ </div>
18
+ `}}s([l({type:String,reflect:!0})],Thumbnail.prototype,"background",2),s([l({type:Boolean,reflect:!0})],Thumbnail.prototype,"cover",2),s([l({type:Boolean,reflect:!0})],Thumbnail.prototype,"layer",2),s([l({type:String,reflect:!0})],Thumbnail.prototype,"size",1);
19
+ //# sourceMappingURL=Thumbnail.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["Thumbnail.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\n\nimport styles from './thumbnail.css.js';\n\nconst validSizes = [\n '50',\n '75',\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n '1000',\n];\nexport type ThumbnailSize = (typeof validSizes)[number];\n\nconst defaultSize = validSizes[6];\n\n/**\n * @element sp-thumbnail\n *\n * @slot image - image element to present in the Thumbnail\n */\n\nexport class Thumbnail extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerboardStyles, styles];\n }\n\n @property({ type: String, reflect: true })\n public background?: string;\n\n @property({ type: Boolean, reflect: true })\n public cover = false;\n\n @property({ type: Boolean, reflect: true })\n public layer = false;\n\n @property({ type: String, reflect: true })\n public get size(): ThumbnailSize {\n return this._size;\n }\n\n public set size(value: ThumbnailSize) {\n const size = (\n validSizes.includes(value) ? value : defaultSize\n ) as ThumbnailSize;\n if (size) {\n this.setAttribute('size', `${size}`);\n }\n if (this._size === size) {\n return;\n }\n const oldSize = this._size;\n this._size = size;\n this.requestUpdate('size', oldSize);\n }\n\n private _size = defaultSize;\n\n protected override update(changes: PropertyValues): void {\n if (!this.hasAttribute('size')) {\n this.setAttribute('size', this.size);\n }\n super.update(changes);\n }\n\n protected override render(): TemplateResult {\n if (this.background) {\n return html`\n <div\n class=\"opacity-checkerboard background\"\n style=\"background: ${this.background}\"\n >\n <div class=\"image-wrapper\">\n <slot></slot>\n </div>\n </div>\n `;\n } else if (this.layer) {\n return html`\n <div class=\"opacity-checkerboard layer-inner\">\n <slot></slot>\n </div>\n `;\n } else {\n return html`\n <div class=\"opacity-checkerboard image-wrapper\">\n <slot></slot>\n </div>\n `;\n }\n }\n}\n"],
5
+ "mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAOC,MAA+B,gFAEtC,OAAOC,MAAY,qBAEnB,MAAMC,EAAa,CACf,KACA,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACJ,EAGMC,EAAcD,EAAW,CAAC,EAQzB,aAAM,kBAAkBJ,CAAgB,CAAxC,kCASH,KAAO,MAAQ,GAGf,KAAO,MAAQ,GAsBf,KAAQ,MAAQK,EAjChB,WAA2B,QAAyB,CAChD,MAAO,CAACH,EAA2BC,CAAM,CAC7C,CAYA,IAAW,MAAsB,CAC7B,OAAO,KAAK,KAChB,CAEA,IAAW,KAAKG,EAAsB,CAClC,MAAMC,EACFH,EAAW,SAASE,CAAK,EAAIA,EAAQD,EAKzC,GAHIE,GACA,KAAK,aAAa,OAAQ,GAAGA,CAAI,EAAE,EAEnC,KAAK,QAAUA,EACf,OAEJ,MAAMC,EAAU,KAAK,MACrB,KAAK,MAAQD,EACb,KAAK,cAAc,OAAQC,CAAO,CACtC,CAImB,OAAOC,EAA+B,CAChD,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,KAAK,IAAI,EAEvC,MAAM,OAAOA,CAAO,CACxB,CAEmB,QAAyB,CACxC,OAAI,KAAK,WACEV;AAAA;AAAA;AAAA,yCAGsB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOrC,KAAK,MACLA;AAAA;AAAA;AAAA;AAAA,cAMAA;AAAA;AAAA;AAAA;AAAA,aAMf,CACJ,CA/DWW,EAAA,CADNT,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GALhC,UAMF,0BAGAS,EAAA,CADNT,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARjC,UASF,qBAGAS,EAAA,CADNT,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,UAYF,qBAGIS,EAAA,CADVT,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdhC,UAeE",
6
+ "names": ["html", "SpectrumElement", "property", "opacityCheckerboardStyles", "styles", "validSizes", "defaultSize", "value", "size", "oldSize", "changes", "__decorateClass"]
7
+ }
package/src/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Thumbnail.js';
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ export * from "./Thumbnail.dev.js";
3
+ //# sourceMappingURL=index.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["index.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './Thumbnail.dev.js'\n"],
5
+ "mappings": ";AAYA,cAAc;",
6
+ "names": []
7
+ }
package/src/index.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";export*from"./Thumbnail.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["index.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './Thumbnail.js';\n"],
5
+ "mappings": "aAYA,WAAc",
6
+ "names": []
7
+ }
@@ -0,0 +1,2 @@
1
+ declare const styles: import("@spectrum-web-components/base").CSSResult;
2
+ export default styles;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ :host,:host([size="500"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size="50"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size="600"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:"";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}
5
+ `;
6
+ export default styles;
7
+ //# sourceMappingURL=spectrum-thumbnail.css.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["spectrum-thumbnail.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2025 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,:host([size=\"500\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size=\"50\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size=\"600\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:\"\";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
2
+ :host,:host([size="500"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size="50"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size="600"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:"";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}
3
+ `;export default e;
4
+ //# sourceMappingURL=spectrum-thumbnail.css.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["spectrum-thumbnail.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2025 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,:host([size=\"500\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size=\"50\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size=\"600\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:\"\";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
+ "names": ["css", "styles"]
7
+ }
@@ -0,0 +1,2 @@
1
+ declare const styles: import("@spectrum-web-components/base").CSSResult;
2
+ export default styles;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ :host{--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius)}
5
+ `;
6
+ export default styles;
7
+ //# sourceMappingURL=thumbnail-overrides.css.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["thumbnail-overrides.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2025 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-border-radius:var(--system-thumbnail-border-radius)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ "use strict";import{css as r}from"@spectrum-web-components/base";const s=r`
2
+ :host{--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius)}
3
+ `;export default s;
4
+ //# sourceMappingURL=thumbnail-overrides.css.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["thumbnail-overrides.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2025 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-border-radius:var(--system-thumbnail-border-radius)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
+ "names": ["css", "styles"]
7
+ }
@@ -0,0 +1,2 @@
1
+ declare const styles: import("@spectrum-web-components/base").CSSResult;
2
+ export default styles;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ :host,:host([size="500"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size="50"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size="600"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:"";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}:host{--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius)}::slotted(:not(img)){display:none}
5
+ `;
6
+ export default styles;
7
+ //# sourceMappingURL=thumbnail.css.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["thumbnail.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2025 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,:host([size=\"500\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size=\"50\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size=\"600\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:\"\";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}:host{--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius)}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
2
+ :host,:host([size="500"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size="50"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size="600"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:"";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}:host{--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius)}::slotted(:not(img)){display:none}
3
+ `;export default e;
4
+ //# sourceMappingURL=thumbnail.css.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["thumbnail.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2025 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,:host([size=\"500\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-500)}:host([size=\"50\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-50)}:host([size=\"75\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-75)}:host([size=\"100\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-100)}:host([size=\"200\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-200)}:host([size=\"300\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-300)}:host([size=\"400\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-400)}:host([size=\"600\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-600)}:host([size=\"700\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-700)}:host([size=\"800\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-800)}:host([size=\"900\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-900)}:host([size=\"1000\"]){--spectrum-thumbnail-sized-size:var(--spectrum-thumbnail-size-1000)}:host{--spectrum-thumbnail-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-sized-size));--spectrum-thumbnail-border-color:var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,rgba(var(--spectrum-gray-800-rgb),var(--spectrum-thumbnail-border-opacity))));--spectrum-thumbnail-border-color-selected:var(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-accent-color-800)));--spectrum-thumbnail-border-width:var(--mod-thumbnail-border-width,var(--spectrum-border-width-100));--spectrum-thumbnail-border-width-selected:var(--mod-thumbnail-border-width-selected,var(--spectrum-border-width-200));--spectrum-thumbnail-border-radius-default:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));--spectrum-thumbnail-layer-border-color-inner:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-white)));--spectrum-thumbnail-layer-border-color-outer:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,var(--spectrum-gray-500)));--spectrum-thumbnail-layer-border-width-inner:var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-border-width-400));--spectrum-thumbnail-layer-border-width-outer:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-border-width-100));--spectrum-thumbnail-focus-indicator-thickness:var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-thumbnail-focus-indicator-gap:var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-thumbnail-focus-indicator-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled);inline-size:var(--spectrum-thumbnail-size);block-size:var(--spectrum-thumbnail-size);z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--spectrum-thumbnail-border-radius-default)}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-width)var(--spectrum-thumbnail-border-color);position:absolute}:host([disabled]){opacity:var(--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled))}:host([focused]){overflow:visible}:host([focused]):after{content:\"\";border-style:solid;border-width:var(--spectrum-thumbnail-focus-indicator-thickness);border-color:var(--spectrum-thumbnail-focus-indicator-color);border-radius:var(--spectrum-thumbnail-border-radius-default);position:absolute;inset-block-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-block-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-start:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1);inset-inline-end:calc(( var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness))*-1)}:host([focused]) .image-wrapper{border-radius:var(--spectrum-thumbnail-border-radius-default);overflow:hidden}:host([layer]){border-style:solid;border-width:var(--spectrum-thumbnail-layer-border-width-outer);border-color:var(--spectrum-thumbnail-layer-border-color-outer);box-sizing:border-box;justify-content:center;align-items:center;display:flex}:host([layer]):before{content:none}:host([layer][selected]){outline-style:solid;outline-color:var(--spectrum-thumbnail-border-color-selected);outline-width:var(--spectrum-thumbnail-border-width-selected);outline-offset:calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);block-size:calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner)*2);outline-style:solid;outline-color:var(--spectrum-thumbnail-layer-border-color-inner);outline-width:calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));justify-content:center;align-items:center;display:flex}.image-wrapper{inline-size:100%;block-size:100%;justify-content:center;align-items:center;display:flex}::slotted(*){max-inline-size:100%;max-block-size:100%;z-index:1;position:relative}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{z-index:0;block-size:100%;inline-size:100%;border-radius:var(--spectrum-thumbnail-border-radius-default);background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{--highcontrast-thumbnail-border-color-selected:Highlight;--highcontrast-thumbnail-focus-indicator-color:Highlight;--highcontrast-thumbnail-border-color:CanvasText;--highcontrast-thumbnail-layer-border-color-inner:Canvas;--highcontrast-thumbnail-layer-border-color-outer:CanvasText;forced-color-adjust:none}}:host{--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius)}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
+ "names": ["css", "styles"]
7
+ }