@spectrum-web-components/thumbnail 0.50.0-beta.1 → 0.50.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/thumbnail",
-    "version": "0.50.0-beta.1",
+    "version": "0.50.0-beta.11",
     "publishConfig": {
         "access": "public"
     },
@@ -33,6 +33,7 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
+        "./src/thumbnail-overrides.css.js": "./src/thumbnail-overrides.css.js",
         "./src/thumbnail.css.js": "./src/thumbnail.css.js",
         "./sp-thumbnail.js": {
             "development": "./sp-thumbnail.dev.js",
@@ -57,11 +58,11 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.50.0-beta.1",
-        "@spectrum-web-components/opacity-checkerboard": "^0.50.0-beta.1"
+        "@spectrum-web-components/base": "^0.50.0-beta.11",
+        "@spectrum-web-components/opacity-checkerboard": "^0.50.0-beta.11"
     },
     "devDependencies": {
-        "@spectrum-css/thumbnail": "^6.1.0"
+        "@spectrum-css/thumbnail": "6.2.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -69,5 +70,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "b0ffab750c03ed7c7ad4436954c437b82235b403"
+    "gitHead": "2e93b2d6083f01bd524435a89c541f95c1701169"
 }

package/src/Thumbnail.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 declare const validSizes: string[];
-export type ThumbnailSize = typeof validSizes[number];
+export type ThumbnailSize = (typeof validSizes)[number];
 /**
  * @element sp-thumbnail
  *

package/src/Thumbnail.dev.js

@@ -45,29 +45,6 @@ export class Thumbnail extends SpectrumElement {
     return this._size;
   }
   set size(value) {
-    const deprecatedSizes = ["xxs", "xs", "s", "m", "l"];
-    const managedSizes = {
-      xxs: "100",
-      xs: "300",
-      s: "500",
-      m: "700",
-      l: "900"
-    };
-    const usesDeprecatedSize = deprecatedSizes.includes(value);
-    if (usesDeprecatedSize) {
-      if (true) {
-        window.__swc.warn(
-          this,
-          `The "size" attribute/property for <${this.localName}> no longer supports the value "${value}". Use one of the following values, instead:`,
-          "https://opensource.adobe.com/spectrum-web-components/components/thumbnail/#sizes",
-          {
-            level: "deprecation",
-            issues: validSizes
-          }
-        );
-      }
-      value = managedSizes[value];
-    }
     const size = validSizes.includes(value) ? value : defaultSize;
     if (size) {
       this.setAttribute("size", `${size}`);

package/src/Thumbnail.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Thumbnail.ts"],
-  "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 deprecatedSizes = ['xxs', 'xs', 's', 'm', 'l'];\n        type DeprecatedThumbnailSize = typeof deprecatedSizes[number];\n        const managedSizes: Record<DeprecatedThumbnailSize, ThumbnailSize> = {\n            xxs: '100',\n            xs: '300',\n            s: '500',\n            m: '700',\n            l: '900',\n        };\n        const usesDeprecatedSize = deprecatedSizes.includes(value);\n        if (usesDeprecatedSize) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    this,\n                    `The \"size\" attribute/property for <${this.localName}> no longer supports the value \"${value}\". Use one of the following values, instead:`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/thumbnail/#sizes',\n                    {\n                        level: 'deprecation',\n                        issues: validSizes as unknown as string[],\n                    }\n                );\n            }\n            value = managedSizes[value];\n        }\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"],
-  "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;AA8Cf,SAAQ,QAAQ;AAAA;AAAA,EAzDhB,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,kBAAkB,CAAC,OAAO,MAAM,KAAK,KAAK,GAAG;AAEnD,UAAM,eAA+D;AAAA,MACjE,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,UAAM,qBAAqB,gBAAgB,SAAS,KAAK;AACzD,QAAI,oBAAoB;AACpB,UAAI,MAAoB;AACpB,eAAO,MAAM;AAAA,UACT;AAAA,UACA,sCAAsC,KAAK,SAAS,mCAAmC,KAAK;AAAA,UAC5F;AAAA,UACA;AAAA,YACI,OAAO;AAAA,YACP,QAAQ;AAAA,UACZ;AAAA,QACJ;AAAA,MACJ;AACA,cAAQ,aAAa,KAAK;AAAA,IAC9B;AACA,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;AAvFW;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;",
+  "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"],
+  "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;",
   "names": []
 }

package/src/Thumbnail.js

@@ -1,4 +1,4 @@
-"use strict";var z=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var o=(c,r,e,i)=>{for(var t=i>1?void 0:i?m(r,e):r,a=c.length-1,s;a>=0;a--)(s=c[a])&&(t=(i?s(r,e,t):s(t))||t);return i&&t&&z(r,e,t),t};import{html as p,SpectrumElement as h}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 y from"./thumbnail.css.js";const n=["50","75","100","200","300","400","500","600","700","800","900","1000"],u=n[6];export class Thumbnail extends h{constructor(){super(...arguments);this.cover=!1;this.layer=!1;this._size=u}static get styles(){return[b,y]}get size(){return this._size}set size(e){const i=["xxs","xs","s","m","l"],t={xxs:"100",xs:"300",s:"500",m:"700",l:"900"};i.includes(e)&&(e=t[e]);const s=n.includes(e)?e:u;if(s&&this.setAttribute("size",`${s}`),this._size===s)return;const d=this._size;this._size=s,this.requestUpdate("size",d)}update(e){this.hasAttribute("size")||this.setAttribute("size",this.size),super.update(e)}render(){return this.background?p`
+"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`
                 <div
                     class="opacity-checkerboard background"
                     style="background: ${this.background}"
@@ -15,5 +15,5 @@
                 <div class="opacity-checkerboard image-wrapper">
                     <slot></slot>
                 </div>
-            `}}o([l({type:String,reflect:!0})],Thumbnail.prototype,"background",2),o([l({type:Boolean,reflect:!0})],Thumbnail.prototype,"cover",2),o([l({type:Boolean,reflect:!0})],Thumbnail.prototype,"layer",2),o([l({type:String,reflect:!0})],Thumbnail.prototype,"size",1);
+            `}}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);
 //# sourceMappingURL=Thumbnail.js.map

package/src/Thumbnail.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Thumbnail.ts"],
-  "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 deprecatedSizes = ['xxs', 'xs', 's', 'm', 'l'];\n        type DeprecatedThumbnailSize = typeof deprecatedSizes[number];\n        const managedSizes: Record<DeprecatedThumbnailSize, ThumbnailSize> = {\n            xxs: '100',\n            xs: '300',\n            s: '500',\n            m: '700',\n            l: '900',\n        };\n        const usesDeprecatedSize = deprecatedSizes.includes(value);\n        if (usesDeprecatedSize) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    this,\n                    `The \"size\" attribute/property for <${this.localName}> no longer supports the value \"${value}\". Use one of the following values, instead:`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/thumbnail/#sizes',\n                    {\n                        level: 'deprecation',\n                        issues: validSizes as unknown as string[],\n                    }\n                );\n            }\n            value = managedSizes[value];\n        }\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"],
-  "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,GA8Cf,KAAQ,MAAQK,EAzDhB,WAA2B,QAAyB,CAChD,MAAO,CAACH,EAA2BC,CAAM,CAC7C,CAYA,IAAW,MAAsB,CAC7B,OAAO,KAAK,KAChB,CAEA,IAAW,KAAKG,EAAsB,CAClC,MAAMC,EAAkB,CAAC,MAAO,KAAM,IAAK,IAAK,GAAG,EAE7CC,EAA+D,CACjE,IAAK,MACL,GAAI,MACJ,EAAG,MACH,EAAG,MACH,EAAG,KACP,EAC2BD,EAAgB,SAASD,CAAK,IAarDA,EAAQE,EAAaF,CAAK,GAE9B,MAAMG,EACFL,EAAW,SAASE,CAAK,EAAIA,EAAQD,EAKzC,GAHII,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,WACEZ;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,CAvFWa,EAAA,CADNX,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GALhC,UAMF,0BAGAW,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARjC,UASF,qBAGAW,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,UAYF,qBAGIW,EAAA,CADVX,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdhC,UAeE",
-  "names": ["html", "SpectrumElement", "property", "opacityCheckerboardStyles", "styles", "validSizes", "defaultSize", "value", "deprecatedSizes", "managedSizes", "size", "oldSize", "changes", "__decorateClass"]
+  "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"],
+  "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",
+  "names": ["html", "SpectrumElement", "property", "opacityCheckerboardStyles", "styles", "validSizes", "defaultSize", "value", "size", "oldSize", "changes", "__decorateClass"]
 }

package/src/spectrum-thumbnail.css.dev.js

@@ -1,7 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-    :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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}
+    :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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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}}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-thumbnail.css.dev.js.map

package/src/spectrum-thumbnail.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-thumbnail.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/spectrum-thumbnail.css.js

@@ -1,4 +1,4 @@
 "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
-    :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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}
+    :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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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}}
 `;export default e;
 //# sourceMappingURL=spectrum-thumbnail.css.js.map

package/src/spectrum-thumbnail.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-thumbnail.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/thumbnail-overrides.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/thumbnail-overrides.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    :host{--spectrum-thumbnail-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size="50"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size="75"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size="100"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size="200"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size="300"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size="400"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size="500"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size="600"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size="700"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size="800"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size="900"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size="1000"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}
+`;
+export default styles;
+//# sourceMappingURL=thumbnail-overrides.css.dev.js.map

package/src/thumbnail-overrides.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["thumbnail-overrides.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-thumbnail-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/thumbnail-overrides.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
+    :host{--spectrum-thumbnail-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size="50"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size="75"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size="100"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size="200"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size="300"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size="400"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size="500"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size="600"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size="700"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size="800"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size="900"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size="1000"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}
+`;export default e;
+//# sourceMappingURL=thumbnail-overrides.css.js.map

package/src/thumbnail-overrides.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["thumbnail-overrides.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-thumbnail-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/thumbnail.css.dev.js

@@ -1,7 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-    :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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}::slotted(:not(img)){display:none}
+    :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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size="50"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size="75"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size="100"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size="200"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size="300"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size="400"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size="500"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size="600"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size="700"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size="800"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size="900"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size="1000"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}::slotted(:not(img)){display:none}
 `;
 export default styles;
 //# sourceMappingURL=thumbnail.css.dev.js.map

package/src/thumbnail.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["thumbnail.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/thumbnail.css.js

@@ -1,4 +1,4 @@
 "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
-    :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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}::slotted(:not(img)){display:none}
+    :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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:"";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size="50"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size="75"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size="100"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size="200"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size="300"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size="400"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size="500"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size="600"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size="700"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size="800"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size="900"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size="1000"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}::slotted(:not(img)){display:none}
 `;export default e;
 //# sourceMappingURL=thumbnail.css.js.map

package/src/thumbnail.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["thumbnail.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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-color-opacity));--spectrum-thumbnail-layer-border-width-inner:var(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));background-position:50%;background-size:cover;position:absolute;inset-block:0;inset-inline:0}@media (forced-colors:active){:host{forced-color-adjust:none;--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}}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--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(--spectrum-border-width-400);--spectrum-thumbnail-layer-border-color-inner:var(--spectrum-white);--spectrum-thumbnail-layer-border-width-outer:var(--spectrum-border-width-100);--spectrum-thumbnail-layer-border-color-outer:var(--spectrum-gray-500);--spectrum-thumbnail-border-width-selected:var(--spectrum-border-width-200);--spectrum-thumbnail-border-color-selected:var(--spectrum-accent-color-800);--spectrum-thumbnail-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--spectrum-thumbnail-opacity-disabled)}: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{inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));vertical-align:top;z-index:0;margin:0;padding:0;display:block;position:relative;overflow:hidden}:host,:host:before{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius))}:host:before{content:\"\";z-index:2;inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width))var(--highcontrast-thumbnail-border-color,var(--mod-thumbnail-border-color,var(--spectrum-thumbnail-border-color-rgba)));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(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness));border-color:var(--highcontrast-thumbnail-focus-indicator-color,var(--mod-thumbnail-focus-indicator-color,var(--spectrum-thumbnail-focus-indicator-color)));border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));position:absolute;inset-block-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-block-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-start:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1);inset-inline-end:calc(( var(--mod-thumbnail-focus-indicator-gap,var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)))*-1)}:host([focused]) .image-wrapper{border-radius:var(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));overflow:hidden}:host([layer]){border-style:solid;border-width:var(--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer));border-color:var(--highcontrast-thumbnail-layer-border-color-outer,var(--mod-thumbnail-layer-border-color-outer,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(--highcontrast-thumbnail-border-color-selected,var(--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-selected)));outline-width:var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected));outline-offset:calc(var(--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))}.layer-inner{inline-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);block-size:calc(var(--spectrum-thumbnail-size) - ( var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)))*2);outline-style:solid;outline-color:var(--highcontrast-thumbnail-layer-border-color-inner,var(--mod-thumbnail-layer-border-color-inner,var(--spectrum-thumbnail-layer-border-color-inner)));outline-width:calc(var(--mod-thumbnail-layer-border-width-inner,var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer,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-block-size:100%;max-inline-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(--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius));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-size:var(--system-thumbnail-size);--spectrum-thumbnail-border-radius:var(--system-thumbnail-border-radius);--spectrum-thumbnail-border-width:var(--system-thumbnail-border-width);--spectrum-thumbnail-border-color-rgba:var(--system-thumbnail-border-color-rgba);--spectrum-thumbnail-layer-border-width-inner:var(--system-thumbnail-layer-border-width-inner);--spectrum-thumbnail-layer-border-color-inner:var(--system-thumbnail-layer-border-color-inner);--spectrum-thumbnail-layer-border-width-outer:var(--system-thumbnail-layer-border-width-outer);--spectrum-thumbnail-layer-border-color-outer:var(--system-thumbnail-layer-border-color-outer);--spectrum-thumbnail-border-width-selected:var(--system-thumbnail-border-width-selected);--spectrum-thumbnail-border-color-selected:var(--system-thumbnail-border-color-selected);--spectrum-thumbnail-focus-indicator-thickness:var(--system-thumbnail-focus-indicator-thickness);--spectrum-thumbnail-focus-indicator-gap:var(--system-thumbnail-focus-indicator-gap);--spectrum-thumbnail-focus-indicator-color:var(--system-thumbnail-focus-indicator-color);--spectrum-thumbnail-color-opacity-disabled:var(--system-thumbnail-color-opacity-disabled)}:host([size=\"50\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-50-size)}:host([size=\"75\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-75-size)}:host([size=\"100\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-100-size)}:host([size=\"200\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-200-size)}:host([size=\"300\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-300-size)}:host([size=\"400\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-400-size)}:host([size=\"500\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-500-size)}:host([size=\"600\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-600-size)}:host([size=\"700\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-700-size)}:host([size=\"800\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-800-size)}:host([size=\"900\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-900-size)}:host([size=\"1000\"]){--spectrum-thumbnail-size:var(--system-thumbnail-size-1000-size)}::slotted(:not(img)){display:none}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/test/thumbnail.test.js

@@ -68,29 +68,6 @@ describe("Thumbnail", () => {
       window.__swc.verbose = false;
       consoleWarnStub.restore();
     });
-    it("warns in devMode when white/black variant is provided", async () => {
-      const el = await fixture(html`
-                <sp-thumbnail background="blue" size="xxs">
-                    <img src=${thumbnail} alt="Woman crouching" />
-                </sp-thumbnail>
-            `);
-      await elementUpdated(el);
-      expect(consoleWarnStub.called).to.be.true;
-      const spyCall = consoleWarnStub.getCall(0);
-      expect(
-        spyCall.args.at(0).includes(
-          "no longer supports the value"
-        ),
-        "confirm deprecated size warning"
-      ).to.be.true;
-      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
-        data: {
-          localName: "sp-thumbnail",
-          type: "api",
-          level: "deprecation"
-        }
-      });
-    });
   });
 });
 //# sourceMappingURL=thumbnail.test.js.map

package/test/thumbnail.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["thumbnail.test.ts"],
-  "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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '@spectrum-web-components/thumbnail/sp-thumbnail.js';\nimport { Thumbnail } from '..';\nimport { thumbnail } from '../stories/images.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { stub } from 'sinon';\n\ndescribe('Thumbnail', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Thumbnail>(html`\n                <sp-thumbnail>\n                    <img src=${thumbnail} alt=\"Woman crouching\" />\n                </sp-thumbnail>\n            `)\n    );\n    it('loads default thumbnail accessibly', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail>\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('can be size `50`', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail size=\"50\">\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.size).to.equal('50');\n    });\n    it('accepts `background`', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail background=\"blue\">\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        const background = el.shadowRoot.querySelector('.background');\n        expect(background).to.not.be.null;\n    });\n    it('renders the opacity checkerboard and slot', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail>\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        await elementUpdated(el);\n        el.setAttribute('layer', 'true');\n        await elementUpdated(el);\n        const checkerboard = el.shadowRoot.querySelector(\n            '.opacity-checkerboard.layer-inner'\n        );\n        expect(checkerboard).to.not.be.null;\n\n        const slot = checkerboard?.querySelector('slot');\n        expect(slot).to.not.be.null;\n    });\n    describe('dev mode', () => {\n        let consoleWarnStub!: ReturnType<typeof stub>;\n        before(() => {\n            window.__swc.verbose = true;\n            consoleWarnStub = stub(console, 'warn');\n        });\n        afterEach(() => {\n            consoleWarnStub.resetHistory();\n        });\n        after(() => {\n            window.__swc.verbose = false;\n            consoleWarnStub.restore();\n        });\n\n        it('warns in devMode when white/black variant is provided', async () => {\n            const el = await fixture<Thumbnail>(html`\n                <sp-thumbnail background=\"blue\" size=\"xxs\">\n                    <img src=${thumbnail} alt=\"Woman crouching\" />\n                </sp-thumbnail>\n            `);\n\n            await elementUpdated(el);\n            expect(consoleWarnStub.called).to.be.true;\n\n            const spyCall = consoleWarnStub.getCall(0);\n            expect(\n                (spyCall.args.at(0) as string).includes(\n                    'no longer supports the value'\n                ),\n                'confirm deprecated size warning'\n            ).to.be.true;\n            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n                data: {\n                    localName: 'sp-thumbnail',\n                    type: 'api',\n                    level: 'deprecation',\n                },\n            });\n        });\n    });\n});\n"],
-  "mappings": ";AAYA,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD,OAAO;AAEP,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AACtC,SAAS,YAAY;AAErB,SAAS,aAAa,MAAM;AACxB;AAAA,IACI,YACI,MAAM,QAAmB;AAAA;AAAA,+BAEN,SAAS;AAAA;AAAA,aAE3B;AAAA,EACT;AACA,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,oBAAoB,YAAY;AAC/B,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI;AAAA,EACjC,CAAC;AACD,KAAG,wBAAwB,YAAY;AACnC,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,aAAa,GAAG,WAAW,cAAc,aAAa;AAC5D,WAAO,UAAU,EAAE,GAAG,IAAI,GAAG;AAAA,EACjC,CAAC;AACD,KAAG,6CAA6C,YAAY;AACxD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,eAAe,EAAE;AACvB,OAAG,aAAa,SAAS,MAAM;AAC/B,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,GAAG,WAAW;AAAA,MAC/B;AAAA,IACJ;AACA,WAAO,YAAY,EAAE,GAAG,IAAI,GAAG;AAE/B,UAAM,OAAO,6CAAc,cAAc;AACzC,WAAO,IAAI,EAAE,GAAG,IAAI,GAAG;AAAA,EAC3B,CAAC;AACD,WAAS,YAAY,MAAM;AACvB,QAAI;AACJ,WAAO,MAAM;AACT,aAAO,MAAM,UAAU;AACvB,wBAAkB,KAAK,SAAS,MAAM;AAAA,IAC1C,CAAC;AACD,cAAU,MAAM;AACZ,sBAAgB,aAAa;AAAA,IACjC,CAAC;AACD,UAAM,MAAM;AACR,aAAO,MAAM,UAAU;AACvB,sBAAgB,QAAQ;AAAA,IAC5B,CAAC;AAED,OAAG,yDAAyD,YAAY;AACpE,YAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,+BAEjB,SAAS;AAAA;AAAA,aAE3B;AAED,YAAM,eAAe,EAAE;AACvB,aAAO,gBAAgB,MAAM,EAAE,GAAG,GAAG;AAErC,YAAM,UAAU,gBAAgB,QAAQ,CAAC;AACzC;AAAA,QACK,QAAQ,KAAK,GAAG,CAAC,EAAa;AAAA,UAC3B;AAAA,QACJ;AAAA,QACA;AAAA,MACJ,EAAE,GAAG,GAAG;AACR,aAAO,QAAQ,KAAK,GAAG,EAAE,GAAG,sBAAsB,EAAE,GAAG,KAAK,MAAM;AAAA,QAC9D,MAAM;AAAA,UACF,WAAW;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,QACX;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAAA,EACL,CAAC;AACL,CAAC;",
+  "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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '@spectrum-web-components/thumbnail/sp-thumbnail.js';\nimport { Thumbnail } from '..';\nimport { thumbnail } from '../stories/images.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { stub } from 'sinon';\n\ndescribe('Thumbnail', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Thumbnail>(html`\n                <sp-thumbnail>\n                    <img src=${thumbnail} alt=\"Woman crouching\" />\n                </sp-thumbnail>\n            `)\n    );\n    it('loads default thumbnail accessibly', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail>\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('can be size `50`', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail size=\"50\">\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.size).to.equal('50');\n    });\n    it('accepts `background`', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail background=\"blue\">\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        const background = el.shadowRoot.querySelector('.background');\n        expect(background).to.not.be.null;\n    });\n    it('renders the opacity checkerboard and slot', async () => {\n        const el = await fixture<Thumbnail>(html`\n            <sp-thumbnail>\n                <img src=${thumbnail} alt=\"Woman crouching\" />\n            </sp-thumbnail>\n        `);\n\n        await elementUpdated(el);\n        el.setAttribute('layer', 'true');\n        await elementUpdated(el);\n        const checkerboard = el.shadowRoot.querySelector(\n            '.opacity-checkerboard.layer-inner'\n        );\n        expect(checkerboard).to.not.be.null;\n\n        const slot = checkerboard?.querySelector('slot');\n        expect(slot).to.not.be.null;\n    });\n    describe('dev mode', () => {\n        let consoleWarnStub!: ReturnType<typeof stub>;\n        before(() => {\n            window.__swc.verbose = true;\n            consoleWarnStub = stub(console, 'warn');\n        });\n        afterEach(() => {\n            consoleWarnStub.resetHistory();\n        });\n        after(() => {\n            window.__swc.verbose = false;\n            consoleWarnStub.restore();\n        });\n    });\n});\n"],
+  "mappings": ";AAYA,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD,OAAO;AAEP,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AACtC,SAAS,YAAY;AAErB,SAAS,aAAa,MAAM;AACxB;AAAA,IACI,YACI,MAAM,QAAmB;AAAA;AAAA,+BAEN,SAAS;AAAA;AAAA,aAE3B;AAAA,EACT;AACA,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,oBAAoB,YAAY;AAC/B,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI;AAAA,EACjC,CAAC;AACD,KAAG,wBAAwB,YAAY;AACnC,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,aAAa,GAAG,WAAW,cAAc,aAAa;AAC5D,WAAO,UAAU,EAAE,GAAG,IAAI,GAAG;AAAA,EACjC,CAAC;AACD,KAAG,6CAA6C,YAAY;AACxD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,2BAEjB,SAAS;AAAA;AAAA,SAE3B;AAED,UAAM,eAAe,EAAE;AACvB,OAAG,aAAa,SAAS,MAAM;AAC/B,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,GAAG,WAAW;AAAA,MAC/B;AAAA,IACJ;AACA,WAAO,YAAY,EAAE,GAAG,IAAI,GAAG;AAE/B,UAAM,OAAO,6CAAc,cAAc;AACzC,WAAO,IAAI,EAAE,GAAG,IAAI,GAAG;AAAA,EAC3B,CAAC;AACD,WAAS,YAAY,MAAM;AACvB,QAAI;AACJ,WAAO,MAAM;AACT,aAAO,MAAM,UAAU;AACvB,wBAAkB,KAAK,SAAS,MAAM;AAAA,IAC1C,CAAC;AACD,cAAU,MAAM;AACZ,sBAAgB,aAAa;AAAA,IACjC,CAAC;AACD,UAAM,MAAM;AACR,aAAO,MAAM,UAAU;AACvB,sBAAgB,QAAQ;AAAA,IAC5B,CAAC;AAAA,EACL,CAAC;AACL,CAAC;",
   "names": []
 }