@spectrum-web-components/thumbnail 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,231 @@
+## Description
+
+An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. `sp-thumbnail` elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such as select lists or tree items).
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/thumbnail?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/thumbnail)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/thumbnail?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/thumbnail)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/OmypHtHAzCQKJ4wUD77Y/src/index.ts)
+
+```
+yarn add @spectrum-web-components/thumbnail
+```
+
+Import the side effectful registration of `<sp-thumbnail>` via:
+
+```
+import '@spectrum-web-components/thumbnail/sp-thumbnail.js';
+```
+
+When looking to leverage the `Thumbnail` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Thumbnail } from '@spectrum-web-components/thumbnail';
+```
+
+## Sizes
+
+<sp-tabs selected="500" auto label="Size Attribute Options">
+<sp-tab value="50">50</sp-tab>
+<sp-tab-panel value="50">
+
+```html
+<sp-thumbnail size="50">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="75">75</sp-tab>
+<sp-tab-panel value="75">
+
+```html
+<sp-thumbnail size="75">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="100">100</sp-tab>
+<sp-tab-panel value="100">
+
+```html
+<sp-thumbnail size="100">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="200">200</sp-tab>
+<sp-tab-panel value="200">
+
+```html
+<sp-thumbnail size="200">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="300">300</sp-tab>
+<sp-tab-panel value="300">
+
+```html
+<sp-thumbnail size="300">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="400">400</sp-tab>
+<sp-tab-panel value="400">
+
+```html
+<sp-thumbnail size="400">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="500">500</sp-tab>
+<sp-tab-panel value="500">
+
+```html
+<sp-thumbnail size="500">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="600">600</sp-tab>
+<sp-tab-panel value="600">
+
+```html
+<sp-thumbnail size="600">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="700">700</sp-tab>
+<sp-tab-panel value="700">
+
+```html
+<sp-thumbnail size="700">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="800">800</sp-tab>
+<sp-tab-panel value="800">
+
+```html
+<sp-thumbnail size="800">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="900">900</sp-tab>
+<sp-tab-panel value="900">
+
+```html
+<sp-thumbnail size="900">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+<sp-tab value="1000">1000</sp-tab>
+<sp-tab-panel value="1000">
+
+```html
+<sp-thumbnail size="1000">
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Focused
+
+When `focused` the `sp-thumbnail` element will be displayed as follows:
+
+```html
+<sp-thumbnail focused>
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+## Disabled
+
+Thumbnail should only be displayed as disabled if the entire componet is also disabled.
+When `disabled` the `sp-thumbnail` element will be displayed as follows:
+
+```html
+<sp-thumbnail disabled>
+    <img src="https://picsum.photos/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+## Representing non-square content
+
+By default, an `sp-thumbnail` will ensure that the entirety of the content that it respresents is visible by letterboxing that content with a checkerboard background when its aspect ratio is not square.
+
+```html
+<div style="display: flex; gap: var(--spectrum-spacing-100);">
+    <sp-thumbnail>
+        <img src="https://picsum.photos/300/400" alt="Demo Image" />
+    </sp-thumbnail>
+
+    <sp-thumbnail>
+        <img src="https://picsum.photos/500/100" alt="Demo Image" />
+    </sp-thumbnail>
+</div>
+```
+
+The `background` attribute takes a string value of the CSS "background" property in order to customize the letterboxing.
+
+```html
+<div style="display: flex; gap: var(--spectrum-spacing-100);">
+    <sp-thumbnail background="red">
+        <img src="https://picsum.photos/300/400" alt="Demo Image" />
+    </sp-thumbnail>
+
+    <sp-thumbnail background="#00ff00">
+        <img src="https://picsum.photos/500/100" alt="Demo Image" />
+    </sp-thumbnail>
+</div>
+```
+
+The `cover` attribute will cause the content to fill the space provided by the `sp-thumbnail` element:
+
+```html
+<div style="display: flex; gap: var(--spectrum-spacing-100);">
+    <sp-thumbnail cover>
+        <img src="https://picsum.photos/300/400" alt="Demo Image" />
+    </sp-thumbnail>
+
+    <sp-thumbnail cover>
+        <img src="https://picsum.photos/500/100" alt="Demo Image" />
+    </sp-thumbnail>
+</div>
+```
+
+## Layer and Layer Selected
+
+For when `sp-thumbail` is used in layer management (such as the Compact or Detail Layers panels). The thumbnail is given a thick blue border to indicate its selection when used in layer management.
+
+```html
+<div style="display: flex; gap: var(--spectrum-spacing-100);">
+    <sp-thumbnail layer>
+        <img src="https://picsum.photos/400/400" alt="Demo Image" />
+    </sp-thumbnail>
+
+    <sp-thumbnail layer selected>
+        <img src="https://picsum.photos/500/100" alt="Demo Image" />
+    </sp-thumbnail>
+</div>
+```

package/package.json

@@ -0,0 +1,73 @@
+{
+    "name": "@spectrum-web-components/thumbnail",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/thumbnail"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/thumbnail",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Thumbnail.js": {
+            "development": "./src/Thumbnail.dev.js",
+            "default": "./src/Thumbnail.js"
+        },
+        "./src/index.js": {
+            "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",
+            "default": "./sp-thumbnail.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/opacity-checkerboard": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/thumbnail": "6.2.0"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-thumbnail.d.ts

@@ -0,0 +1,6 @@
+import { Thumbnail } from './src/Thumbnail.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-thumbnail': Thumbnail;
+    }
+}

package/sp-thumbnail.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Thumbnail } from "./src/Thumbnail.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-thumbnail", Thumbnail);
+//# sourceMappingURL=sp-thumbnail.dev.js.map

package/sp-thumbnail.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-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 { Thumbnail } from './src/Thumbnail.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-thumbnail', Thumbnail);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-thumbnail': Thumbnail;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,cAAc,gBAAgB,SAAS;",
+  "names": []
+}

package/sp-thumbnail.js

@@ -0,0 +1,2 @@
+"use strict";import{Thumbnail as e}from"./src/Thumbnail.js";import{defineElement as m}from"@spectrum-web-components/base/src/define-element.js";m("sp-thumbnail",e);
+//# sourceMappingURL=sp-thumbnail.js.map

package/sp-thumbnail.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-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 { Thumbnail } from './src/Thumbnail.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-thumbnail', Thumbnail);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-thumbnail': Thumbnail;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,aAAAA,MAAiB,qBAC1B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,eAAgBD,CAAS",
+  "names": ["Thumbnail", "defineElement"]
+}

package/src/Thumbnail.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+declare const validSizes: string[];
+export type ThumbnailSize = (typeof validSizes)[number];
+/**
+ * @element sp-thumbnail
+ *
+ * @slot image - image element to present in the Thumbnail
+ */
+export declare class Thumbnail extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    background?: string;
+    cover: boolean;
+    layer: boolean;
+    get size(): ThumbnailSize;
+    set size(value: ThumbnailSize);
+    private _size;
+    protected update(changes: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+export {};

package/src/Thumbnail.dev.js

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import opacityCheckerboardStyles from "@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";
+import styles from "./thumbnail.css.js";
+const validSizes = [
+  "50",
+  "75",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000"
+];
+const defaultSize = validSizes[6];
+export class Thumbnail extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.cover = false;
+    this.layer = false;
+    this._size = defaultSize;
+  }
+  static get styles() {
+    return [opacityCheckerboardStyles, styles];
+  }
+  get size() {
+    return this._size;
+  }
+  set size(value) {
+    const size = validSizes.includes(value) ? value : defaultSize;
+    if (size) {
+      this.setAttribute("size", `${size}`);
+    }
+    if (this._size === size) {
+      return;
+    }
+    const oldSize = this._size;
+    this._size = size;
+    this.requestUpdate("size", oldSize);
+  }
+  update(changes) {
+    if (!this.hasAttribute("size")) {
+      this.setAttribute("size", this.size);
+    }
+    super.update(changes);
+  }
+  render() {
+    if (this.background) {
+      return html`
+                <div
+                    class="opacity-checkerboard background"
+                    style="background: ${this.background}"
+                >
+                    <div class="image-wrapper">
+                        <slot></slot>
+                    </div>
+                </div>
+            `;
+    } else if (this.layer) {
+      return html`
+                <div class="opacity-checkerboard layer-inner">
+                    <slot></slot>
+                </div>
+            `;
+    } else {
+      return html`
+                <div class="opacity-checkerboard image-wrapper">
+                    <slot></slot>
+                </div>
+            `;
+    }
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], Thumbnail.prototype, "background", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Thumbnail.prototype, "cover", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Thumbnail.prototype, "layer", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Thumbnail.prototype, "size", 1);
+//# sourceMappingURL=Thumbnail.dev.js.map

package/src/Thumbnail.dev.js.map

@@ -0,0 +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 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

@@ -0,0 +1,19 @@
+"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}"
+                >
+                    <div class="image-wrapper">
+                        <slot></slot>
+                    </div>
+                </div>
+            `:this.layer?p`
+                <div class="opacity-checkerboard layer-inner">
+                    <slot></slot>
+                </div>
+            `:p`
+                <div class="opacity-checkerboard image-wrapper">
+                    <slot></slot>
+                </div>
+            `}}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

@@ -0,0 +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 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/index.d.ts

@@ -0,0 +1 @@
+export * from './Thumbnail.js';

package/src/index.dev.js

@@ -0,0 +1,3 @@
+"use strict";
+export * from "./Thumbnail.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.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\nexport * from './Thumbnail.dev.js'\n"],
+  "mappings": ";AAYA,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./Thumbnail.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.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\nexport * from './Thumbnail.js';\n"],
+  "mappings": "aAYA,WAAc",
+  "names": []
+}

package/src/spectrum-config.js

@@ -0,0 +1,58 @@
+// @ts-check
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+
+const converter = converterFor('spectrum-Thumbnail');
+
+/**
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
+ */
+export default {
+    conversions: [
+        {
+            inPackage: '@spectrum-css/thumbnail',
+            outPackage: 'thumbnail',
+            fileName: 'thumbnail',
+            components: [
+                converter.classToHost(),
+                converter.classToAttribute('is-selected', 'selected'),
+                converter.classToAttribute('is-focused', 'focused'),
+                converter.classToAttribute('is-disabled', 'disabled'),
+                converter.classToAttribute('spectrum-Thumbnail--cover'),
+                converter.classToAttribute('spectrum-Thumbnail-layer'),
+                ...converter.enumerateAttributes(
+                    [
+                        ['spectrum-Thumbnail--size50', '50'],
+                        ['spectrum-Thumbnail--size75', '75'],
+                        ['spectrum-Thumbnail--size100', '100'],
+                        ['spectrum-Thumbnail--size200', '200'],
+                        ['spectrum-Thumbnail--size300', '300'],
+                        ['spectrum-Thumbnail--size400', '400'],
+                        ['spectrum-Thumbnail--size500', '500'],
+                        ['spectrum-Thumbnail--size600', '600'],
+                        ['spectrum-Thumbnail--size700', '700'],
+                        ['spectrum-Thumbnail--size800', '800'],
+                        ['spectrum-Thumbnail--size900', '900'],
+                        ['spectrum-Thumbnail--size1000', '1000'],
+                    ],
+                    'size'
+                ),
+                converter.classToClass('spectrum-Thumbnail-background'),
+                converter.classToClass('spectrum-Thumbnail-image-wrapper'),
+                converter.classToClass('spectrum-Thumbnail-layer-inner'),
+                converter.classToSlotted('spectrum-Thumbnail-image'),
+            ],
+        },
+    ],
+};

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

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

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

@@ -0,0 +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-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

@@ -0,0 +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-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

@@ -0,0 +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-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

@@ -0,0 +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-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.d.ts

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

package/src/thumbnail.css.dev.js

@@ -0,0 +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-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

@@ -0,0 +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-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

@@ -0,0 +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-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

@@ -0,0 +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-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"]
+}