@spectrum-web-components/thumbnail 0.31.1-react.21 → 0.32.0

package/README.md

@@ -26,52 +26,122 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
 
 ## Sizes
 
-<sp-tabs selected="m" auto label="Size Attribute Options">
-<sp-tab value="xss">Extra Extra Small</sp-tab>
-<sp-tab-panel value="xxs">
+<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="xxs">
+<sp-thumbnail size="50">
     <img src="https://place.dog/100/100" alt="Demo Image" />
 </sp-thumbnail>
 ```
 
 </sp-tab-panel>
-<sp-tab value="xs">Extra Small</sp-tab>
-<sp-tab-panel value="xs">
+<sp-tab value="75">75</sp-tab>
+<sp-tab-panel value="75">
 
 ```html
-<sp-thumbnail size="xs">
+<sp-thumbnail size="75">
     <img src="https://place.dog/100/100" alt="Demo Image" />
 </sp-thumbnail>
 ```
 
 </sp-tab-panel>
-<sp-tab value="s">Small</sp-tab>
-<sp-tab-panel value="s">
+<sp-tab value="100">100</sp-tab>
+<sp-tab-panel value="100">
 
 ```html
-<sp-thumbnail size="s">
+<sp-thumbnail size="100">
     <img src="https://place.dog/100/100" alt="Demo Image" />
 </sp-thumbnail>
 ```
 
 </sp-tab-panel>
-<sp-tab value="m">Medium</sp-tab>
-<sp-tab-panel value="m">
+<sp-tab value="200">200</sp-tab>
+<sp-tab-panel value="200">
 
 ```html
-<sp-thumbnail size="m">
+<sp-thumbnail size="200">
     <img src="https://place.dog/100/100" alt="Demo Image" />
 </sp-thumbnail>
 ```
 
 </sp-tab-panel>
-<sp-tab value="l">Large</sp-tab>
-<sp-tab-panel value="l">
+<sp-tab value="300">300</sp-tab>
+<sp-tab-panel value="300">
 
 ```html
-<sp-thumbnail size="l">
+<sp-thumbnail size="300">
+    <img src="https://place.dog/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://place.dog/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://place.dog/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://place.dog/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://place.dog/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://place.dog/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://place.dog/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://place.dog/100/100" alt="Demo Image" />
 </sp-thumbnail>
 ```
@@ -79,19 +149,25 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
 </sp-tab-panel>
 </sp-tabs>
 
-## Focused or selected
+## Focused
 
-When `focused` or `selected` the `sp-thumbnail` element will be displayed as follows:
+When `focused` the `sp-thumbnail` element will be displayed as follows:
 
 ```html
-<div style="display: flex; gap: var(--spectrum-spacing-100);">
-    <sp-thumbnail focused>
-        <img src="https://place.dog/100/100" alt="Demo Image" />
-    </sp-thumbnail>
-    <sp-thumbnail selected>
-        <img src="https://place.dog/100/100" alt="Demo Image" />
-    </sp-thumbnail>
-</div>
+<sp-thumbnail focused>
+    <img src="https://place.dog/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://place.dog/100/100" alt="Demo Image" />
+</sp-thumbnail>
 ```
 
 ## Representing non-square content
@@ -101,14 +177,11 @@ By default, an `sp-thumbnail` will ensure that the entirety of the content that
 ```html
 <div style="display: flex; gap: var(--spectrum-spacing-100);">
     <sp-thumbnail>
-        <img src="https://place.dog/300/400" alt="Eiffel Tower at night" />
+        <img src="https://place.dog/300/400" alt="Demo Image" />
     </sp-thumbnail>
 
     <sp-thumbnail>
-        <img
-            src="https://place.dog/500/100"
-            alt="Landscape with mountains and lake"
-        />
+        <img src="https://place.dog/500/100" alt="Demo Image" />
     </sp-thumbnail>
 </div>
 ```
@@ -118,14 +191,11 @@ The `background` attribute takes a string value of the CSS "background" property
 ```html
 <div style="display: flex; gap: var(--spectrum-spacing-100);">
     <sp-thumbnail background="red">
-        <img src="https://place.dog/300/400" alt="Eiffel Tower at night" />
+        <img src="https://place.dog/300/400" alt="Demo Image" />
     </sp-thumbnail>
 
     <sp-thumbnail background="#00ff00">
-        <img
-            src="https://place.dog/500/100"
-            alt="Landscape with mountains and lake"
-        />
+        <img src="https://place.dog/500/100" alt="Demo Image" />
     </sp-thumbnail>
 </div>
 ```
@@ -135,14 +205,27 @@ The `cover` attribute will cause the content to fill the space provided by the `
 ```html
 <div style="display: flex; gap: var(--spectrum-spacing-100);">
     <sp-thumbnail cover>
-        <img src="https://place.dog/300/400" alt="Eiffel Tower at night" />
+        <img src="https://place.dog/300/400" alt="Demo Image" />
     </sp-thumbnail>
 
     <sp-thumbnail cover>
-        <img
-            src="https://place.dog/500/100"
-            alt="Landscape with mountains and lake"
-        />
+        <img src="https://place.dog/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://place.dog/400/400" alt="Demo Image" />
+    </sp-thumbnail>
+
+    <sp-thumbnail layer selected>
+        <img src="https://place.dog/500/100" alt="Demo Image" />
     </sp-thumbnail>
 </div>
 ```

package/custom-elements.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "sp-thumbnail.ts",
+      "path": "sp-thumbnail.js",
       "declarations": [],
       "exports": [
         {
@@ -19,7 +19,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/Thumbnail.ts",
+      "path": "src/Thumbnail.js",
       "declarations": [
         {
           "kind": "class",
@@ -28,7 +28,7 @@
           "slots": [
             {
               "description": "image element to present in the Thumbnail",
-              "name": ""
+              "name": "image"
             }
           ],
           "members": [
@@ -52,6 +52,33 @@
               "default": "false",
               "attribute": "cover",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "layer",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "layer",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ThumbnailSize"
+              },
+              "privacy": "public",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_size",
+              "privacy": "private",
+              "default": "validSizes[6]"
             }
           ],
           "attributes": [
@@ -69,12 +96,21 @@
               },
               "default": "false",
               "fieldName": "cover"
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "SizedMixin",
-              "package": "@spectrum-web-components/base"
+              "name": "layer",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "layer"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ThumbnailSize"
+              },
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -91,7 +127,7 @@
           "name": "Thumbnail",
           "declaration": {
             "name": "Thumbnail",
-            "module": "src/Thumbnail.ts"
+            "module": "src/Thumbnail.js"
           }
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/thumbnail",
-    "version": "0.31.1-react.21+44f0b1df9",
+    "version": "0.32.0",
     "publishConfig": {
         "access": "public"
     },
@@ -57,10 +57,10 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.31.1-react.21+44f0b1df9"
+        "@spectrum-web-components/base": "^0.32.0"
     },
     "devDependencies": {
-        "@spectrum-css/thumbnail": "^2.0.34"
+        "@spectrum-css/thumbnail": "^3.0.5"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -68,5 +68,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "44f0b1df9e1ea77d9e931629a63918ceee2744c2"
+    "gitHead": "c5f67662ac54d0e37debaf7cbd7c2df60e8b294e"
 }

package/src/Thumbnail.d.ts

@@ -1,17 +1,20 @@
-import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
-declare const Thumbnail_base: typeof SpectrumElement & {
-    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
-    prototype: import("@spectrum-web-components/base").SizedElementInterface;
-};
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+declare const validSizes: string[];
+export declare type ThumbnailSize = typeof validSizes[number];
 /**
  * @element sp-thumbnail
  *
- * @slot - image element to present in the Thumbnail
+ * @slot image - image element to present in the Thumbnail
  */
-export declare class Thumbnail extends Thumbnail_base {
+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

@@ -12,32 +12,101 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 import {
   html,
-  SizedMixin,
   SpectrumElement
 } from "@spectrum-web-components/base";
 import { property } from "@spectrum-web-components/base/src/decorators.js";
 import styles from "./thumbnail.css.js";
-export class Thumbnail extends SizedMixin(SpectrumElement, {
-  validSizes: ["xxs", "xs", "s", "m", "l"],
-  defaultSize: "s"
-}) {
+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 [styles];
   }
+  get size() {
+    return this._size;
+  }
+  set size(value) {
+    const deprecatedSizes = ["xxs", "xs", "s", "m", "l"];
+    const managedSizes = {
+      xxs: "100",
+      xs: "300",
+      s: "500",
+      m: "700",
+      l: "900"
+    };
+    const usesDeprecatedSize = deprecatedSizes.includes(value);
+    if (usesDeprecatedSize) {
+      if (true) {
+        window.__swc.warn(
+          this,
+          `The "size" attribute/property for <${this.localName}> no longer supports the value "${value}". Use one of the following values, instead:`,
+          "https://opensource.adobe.com/spectrum-web-components/components/thumbnail/#sizes",
+          {
+            level: "deprecation",
+            issues: validSizes
+          }
+        );
+      }
+      value = managedSizes[value];
+    }
+    const size = validSizes.includes(value) ? value : defaultSize;
+    if (size) {
+      this.setAttribute("size", `${size}`);
+    }
+    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() {
-    return html`
-            ${this.background ? html`
-                      <div
-                          class="background"
-                          style="background: ${this.background}"
-                      ></div>
-                  ` : html``}
-            <slot></slot>
-        `;
+    if (this.background) {
+      return html`
+                <div class="background" style="background: ${this.background}">
+                    <div class="image-wrapper">
+                        <slot></slot>
+                    </div>
+                </div>
+            `;
+    } else if (this.layer) {
+      return html`
+                <div class="layer-inner">
+                    <slot></slot>
+                </div>
+            `;
+    } else {
+      return html`
+                <div class="image-wrapper">
+                    <slot></slot>
+                </div>
+            `;
+    }
   }
 }
 __decorateClass([
@@ -46,4 +115,10 @@ __decorateClass([
 __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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Thumbnail.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './thumbnail.css.js';\n\n/**\n * @element sp-thumbnail\n *\n * @slot - image element to present in the Thumbnail\n */\nexport class Thumbnail extends SizedMixin(SpectrumElement, {\n    validSizes: ['xxs', 'xs', 's', 'm', 'l'],\n    defaultSize: 's',\n}) {\n    public static override get styles(): CSSResultArray {\n        return [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    protected override render(): TemplateResult {\n        return html`\n            ${this.background\n                ? html`\n                      <div\n                          class=\"background\"\n                          style=\"background: ${this.background}\"\n                      ></div>\n                  `\n                : html``}\n            <slot></slot>\n        `;\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,YAAY;AAOZ,aAAM,kBAAkB,WAAW,iBAAiB;AAAA,EACvD,YAAY,CAAC,OAAO,MAAM,KAAK,KAAK,GAAG;AAAA,EACvC,aAAa;AACjB,CAAC,EAAE;AAAA,EAHI;AAAA;AAYH,SAAO,QAAQ;AAAA;AAAA,EARf,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAQmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,aACD;AAAA;AAAA;AAAA,+CAG6B,KAAK;AAAA;AAAA,sBAGlC;AAAA;AAAA;AAAA,EAGd;AACJ;AAlBW;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GARhC,UASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAXjC,UAYF;",
+  "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';\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 [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public background?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public cover = false;\n\n    @property({ type: Boolean, reflect: true })\n    public layer = false;\n\n    @property({ type: String, reflect: true })\n    public get size(): ThumbnailSize {\n        return this._size;\n    }\n\n    public set size(value: ThumbnailSize) {\n        const deprecatedSizes = ['xxs', 'xs', 's', 'm', 'l'];\n        type DeprecatedThumbnailSize = typeof deprecatedSizes[number];\n        const managedSizes: Record<DeprecatedThumbnailSize, ThumbnailSize> = {\n            xxs: '100',\n            xs: '300',\n            s: '500',\n            m: '700',\n            l: '900',\n        };\n        const usesDeprecatedSize = deprecatedSizes.includes(value);\n        if (usesDeprecatedSize) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    this,\n                    `The \"size\" attribute/property for <${this.localName}> no longer supports the value \"${value}\". Use one of the following values, instead:`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/thumbnail/#sizes',\n                    {\n                        level: 'deprecation',\n                        issues: validSizes as unknown as string[],\n                    }\n                );\n            }\n            value = managedSizes[value];\n        }\n        const size = (\n            validSizes.includes(value) ? value : defaultSize\n        ) as ThumbnailSize;\n        if (size) {\n            this.setAttribute('size', `${size}`);\n        }\n        if (this._size === size) {\n            return;\n        }\n        const oldSize = this._size;\n        this._size = size;\n        this.requestUpdate('size', oldSize);\n    }\n\n    private _size = defaultSize;\n\n    protected override update(changes: PropertyValues): void {\n        if (!this.hasAttribute('size')) {\n            this.setAttribute('size', this.size);\n        }\n        super.update(changes);\n    }\n\n    protected override render(): TemplateResult {\n        if (this.background) {\n            return html`\n                <div class=\"background\" style=\"background: ${this.background}\">\n                    <div class=\"image-wrapper\">\n                        <slot></slot>\n                    </div>\n                </div>\n            `;\n        } else if (this.layer) {\n            return html`\n                <div class=\"layer-inner\">\n                    <slot></slot>\n                </div>\n            `;\n        } else {\n            return html`\n                <div class=\"image-wrapper\">\n                    <slot></slot>\n                </div>\n            `;\n        }\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,YAAY;AAEnB,MAAM,aAAa;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAGA,MAAM,cAAc,WAAW,CAAC;AAQzB,aAAM,kBAAkB,gBAAgB;AAAA,EAAxC;AAAA;AASH,SAAO,QAAQ;AAGf,SAAO,QAAQ;AA8Cf,SAAQ,QAAQ;AAAA;AAAA,EAzDhB,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAYA,IAAW,OAAsB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,KAAK,OAAsB;AAClC,UAAM,kBAAkB,CAAC,OAAO,MAAM,KAAK,KAAK,GAAG;AAEnD,UAAM,eAA+D;AAAA,MACjE,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,UAAM,qBAAqB,gBAAgB,SAAS,KAAK;AACzD,QAAI,oBAAoB;AACpB,UAAI,MAAoB;AACpB,eAAO,MAAM;AAAA,UACT;AAAA,UACA,sCAAsC,KAAK,4CAA4C;AAAA,UACvF;AAAA,UACA;AAAA,YACI,OAAO;AAAA,YACP,QAAQ;AAAA,UACZ;AAAA,QACJ;AAAA,MACJ;AACA,cAAQ,aAAa,KAAK;AAAA,IAC9B;AACA,UAAM,OACF,WAAW,SAAS,KAAK,IAAI,QAAQ;AAEzC,QAAI,MAAM;AACN,WAAK,aAAa,QAAQ,GAAG,MAAM;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,6DAC0C,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM1D,WAAW,KAAK,OAAO;AACnB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX,OAAO;AACH,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX;AAAA,EACJ;AACJ;AApFW;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GALhC,UAMF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARjC,UASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAXjC,UAYF;AAGI;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAdhC,UAeE;",
   "names": []
 }

package/src/Thumbnail.js

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

package/src/Thumbnail.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Thumbnail.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './thumbnail.css.js';\n\n/**\n * @element sp-thumbnail\n *\n * @slot - image element to present in the Thumbnail\n */\nexport class Thumbnail extends SizedMixin(SpectrumElement, {\n    validSizes: ['xxs', 'xs', 's', 'm', 'l'],\n    defaultSize: 's',\n}) {\n    public static override get styles(): CSSResultArray {\n        return [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    protected override render(): TemplateResult {\n        return html`\n            ${this.background\n                ? html`\n                      <div\n                          class=\"background\"\n                          style=\"background: ${this.background}\"\n                      ></div>\n                  `\n                : html``}\n            <slot></slot>\n        `;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,EACA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAOC,MAAY,qBAOZ,aAAM,kBAAkBH,EAAWC,EAAiB,CACvD,WAAY,CAAC,MAAO,KAAM,IAAK,IAAK,GAAG,EACvC,YAAa,GACjB,CAAC,CAAE,CAHI,kCAYH,KAAO,MAAQ,GARf,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAM,CAClB,CAQmB,QAAyB,CACxC,OAAOJ;AAAA,cACD,KAAK,WACDA;AAAA;AAAA;AAAA,+CAG6B,KAAK;AAAA;AAAA,oBAGlCA;AAAA;AAAA,SAGd,CACJ,CAlBWK,EAAA,CADNF,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARhC,UASF,0BAGAE,EAAA,CADNF,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,UAYF",
-  "names": ["html", "SizedMixin", "SpectrumElement", "property", "styles", "__decorateClass"]
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\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 [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public background?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public cover = false;\n\n    @property({ type: Boolean, reflect: true })\n    public layer = false;\n\n    @property({ type: String, reflect: true })\n    public get size(): ThumbnailSize {\n        return this._size;\n    }\n\n    public set size(value: ThumbnailSize) {\n        const deprecatedSizes = ['xxs', 'xs', 's', 'm', 'l'];\n        type DeprecatedThumbnailSize = typeof deprecatedSizes[number];\n        const managedSizes: Record<DeprecatedThumbnailSize, ThumbnailSize> = {\n            xxs: '100',\n            xs: '300',\n            s: '500',\n            m: '700',\n            l: '900',\n        };\n        const usesDeprecatedSize = deprecatedSizes.includes(value);\n        if (usesDeprecatedSize) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    this,\n                    `The \"size\" attribute/property for <${this.localName}> no longer supports the value \"${value}\". Use one of the following values, instead:`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/thumbnail/#sizes',\n                    {\n                        level: 'deprecation',\n                        issues: validSizes as unknown as string[],\n                    }\n                );\n            }\n            value = managedSizes[value];\n        }\n        const size = (\n            validSizes.includes(value) ? value : defaultSize\n        ) as ThumbnailSize;\n        if (size) {\n            this.setAttribute('size', `${size}`);\n        }\n        if (this._size === size) {\n            return;\n        }\n        const oldSize = this._size;\n        this._size = size;\n        this.requestUpdate('size', oldSize);\n    }\n\n    private _size = defaultSize;\n\n    protected override update(changes: PropertyValues): void {\n        if (!this.hasAttribute('size')) {\n            this.setAttribute('size', this.size);\n        }\n        super.update(changes);\n    }\n\n    protected override render(): TemplateResult {\n        if (this.background) {\n            return html`\n                <div class=\"background\" style=\"background: ${this.background}\">\n                    <div class=\"image-wrapper\">\n                        <slot></slot>\n                    </div>\n                </div>\n            `;\n        } else if (this.layer) {\n            return html`\n                <div class=\"layer-inner\">\n                    <slot></slot>\n                </div>\n            `;\n        } else {\n            return html`\n                <div class=\"image-wrapper\">\n                    <slot></slot>\n                </div>\n            `;\n        }\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAOC,MAAY,qBAEnB,MAAMC,EAAa,CACf,KACA,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACJ,EAGMC,EAAcD,EAAW,CAAC,EAQzB,aAAM,kBAAkBH,CAAgB,CAAxC,kCASH,KAAO,MAAQ,GAGf,KAAO,MAAQ,GA8Cf,KAAQ,MAAQI,EAzDhB,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAM,CAClB,CAYA,IAAW,MAAsB,CAC7B,OAAO,KAAK,KAChB,CAEA,IAAW,KAAKG,EAAsB,CAClC,MAAMC,EAAkB,CAAC,MAAO,KAAM,IAAK,IAAK,GAAG,EAE7CC,EAA+D,CACjE,IAAK,MACL,GAAI,MACJ,EAAG,MACH,EAAG,MACH,EAAG,KACP,EAC2BD,EAAgB,SAASD,CAAK,IAarDA,EAAQE,EAAaF,CAAK,GAE9B,MAAMG,EACFL,EAAW,SAASE,CAAK,EAAIA,EAAQD,EAKzC,GAHII,GACA,KAAK,aAAa,OAAQ,GAAGA,GAAM,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,WACEX;AAAA,6DAC0C,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAM/C,KAAK,MACLA;AAAA;AAAA;AAAA;AAAA,cAMAA;AAAA;AAAA;AAAA;AAAA,aAMf,CACJ,CApFWY,EAAA,CADNV,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GALhC,UAMF,0BAGAU,EAAA,CADNV,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARjC,UASF,qBAGAU,EAAA,CADNV,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,UAYF,qBAGIU,EAAA,CADVV,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdhC,UAeE",
+  "names": ["html", "SpectrumElement", "property", "styles", "validSizes", "defaultSize", "value", "deprecatedSizes", "managedSizes", "size", "oldSize", "changes", "__decorateClass"]
 }

package/src/spectrum-config.js

@@ -28,18 +28,29 @@ export default {
                 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--sizeXXS', 'xxs'],
-                        ['spectrum-Thumbnail--sizeXS', 'xs'],
-                        ['spectrum-Thumbnail--sizeS', 's'],
-                        ['spectrum-Thumbnail--sizeM', 'm'],
-                        ['spectrum-Thumbnail--sizeL', 'l'],
+                        ['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'),
             ],
         },