Socket
Socket
Sign inDemoInstall

@spectrum-web-components/thumbnail

Package Overview
Dependencies
Maintainers
8
Versions
170
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/thumbnail - npm Package Compare versions

Comparing version 0.31.1-react.21 to 0.32.0

54

custom-elements.json

@@ -7,3 +7,3 @@ {

"kind": "javascript-module",
"path": "sp-thumbnail.ts",
"path": "sp-thumbnail.js",
"declarations": [],

@@ -23,3 +23,3 @@ "exports": [

"kind": "javascript-module",
"path": "src/Thumbnail.ts",
"path": "src/Thumbnail.js",
"declarations": [

@@ -33,3 +33,3 @@ {

"description": "image element to present in the Thumbnail",
"name": ""
"name": "image"
}

@@ -58,2 +58,29 @@ ],

"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]"
}

@@ -76,8 +103,17 @@ ],

"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"
}

@@ -99,3 +135,3 @@ ],

"name": "Thumbnail",
"module": "src/Thumbnail.ts"
"module": "src/Thumbnail.js"
}

@@ -102,0 +138,0 @@ }

8

package.json
{
"name": "@spectrum-web-components/thumbnail",
"version": "0.31.1-react.21+44f0b1df9",
"version": "0.32.0",
"publishConfig": {

@@ -60,6 +60,6 @@ "access": "public"

"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"
},

@@ -72,3 +72,3 @@ "types": "./src/index.d.ts",

],
"gitHead": "44f0b1df9e1ea77d9e931629a63918ceee2744c2"
"gitHead": "c5f67662ac54d0e37debaf7cbd7c2df60e8b294e"
}

165

README.md

@@ -29,8 +29,8 @@ ## Description

<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" />

@@ -41,7 +41,7 @@ </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" />

@@ -52,7 +52,7 @@ </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" />

@@ -63,7 +63,7 @@ </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" />

@@ -74,7 +74,7 @@ </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" />

@@ -85,19 +85,95 @@ </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>
```
</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

@@ -110,10 +186,7 @@

<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>

@@ -128,10 +201,7 @@ </div>

<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>

@@ -146,12 +216,25 @@ </div>

<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>
```

21

src/spectrum-config.js

@@ -31,10 +31,19 @@ // @ts-check

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'],
],

@@ -44,2 +53,4 @@ 'size'

converter.classToClass('spectrum-Thumbnail-background'),
converter.classToClass('spectrum-Thumbnail-image-wrapper'),
converter.classToClass('spectrum-Thumbnail-layer-inner'),
converter.classToSlotted('spectrum-Thumbnail-image'),

@@ -46,0 +57,0 @@ ],

292

src/spectrum-thumbnail.css.dev.js
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
:host{align-items:center;background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-radius:var(--spectrum-thumbnail-border-radius);display:flex;height:var(--spectrum-thumbnail-height);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-width);z-index:0}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:"";height:100%;position:absolute;width:100%;z-index:2}:host([size=xxs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)
)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)
)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)
)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)
)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)
)}::slotted(*){max-height:100%;max-width:100%;z-index:1}:host([cover]) ::slotted(*){height:100%;object-fit:cover;object-position:center;width:100%}.background{background-position:50%;background-size:cover;height:100%;inset:0;position:absolute;width:100%;z-index:0}:host{background-color:var(
--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(-45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%)}:host:before{box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-size) var(--spectrum-thumbnail-border-color)}:host([selected]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(:focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}
:host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity:var(
--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
);--spectrum-thumbnail-checkerboard-size:var(
--spectrum-opacity-checkerboard-square-size
);--spectrum-thumbnail-checkerboard-dark-color:var(
--spectrum-opacity-checkerboard-square-dark
);--spectrum-thumbnail-checkerboard-light-color:var(
--spectrum-opacity-checkerboard-square-light
)}:host([size="50"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size="500"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size="600"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(
--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)
) 0 25%,var(
--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)
) 0 50%) 0 0 /calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2) calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);box-shadow:inset 0 0 0 var(
--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
) rgba(var(
--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
),var(
--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
--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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(:focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host([layer]){align-items:center;border:var(
--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
) solid var(
--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
--highcontrast-thumbnail-border-color-selected,var(
--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-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)
));outline-width:var(
--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);outline:solid;outline-color: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)
))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}
`;
export default styles;
//# sourceMappingURL=spectrum-thumbnail.css.dev.js.map

296

src/spectrum-thumbnail.css.js

@@ -1,114 +0,184 @@

"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
:host{align-items:center;background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-radius:var(--spectrum-thumbnail-border-radius);display:flex;height:var(--spectrum-thumbnail-height);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-width);z-index:0}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:"";height:100%;position:absolute;width:100%;z-index:2}:host([size=xxs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)
)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)
)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)
)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)
)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)
)}::slotted(*){max-height:100%;max-width:100%;z-index:1}:host([cover]) ::slotted(*){height:100%;object-fit:cover;object-position:center;width:100%}.background{background-position:50%;background-size:cover;height:100%;inset:0;position:absolute;width:100%;z-index:0}:host{background-color:var(
--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(-45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%)}:host:before{box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-size) var(--spectrum-thumbnail-border-color)}:host([selected]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(:focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}
`;export default e;
"use strict";import{css as r}from"@spectrum-web-components/base";const i=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-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity: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
);--spectrum-thumbnail-checkerboard-size:var(
--spectrum-opacity-checkerboard-square-size
);--spectrum-thumbnail-checkerboard-dark-color:var(
--spectrum-opacity-checkerboard-square-dark
);--spectrum-thumbnail-checkerboard-light-color:var(
--spectrum-opacity-checkerboard-square-light
)}:host([size="50"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size="500"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size="600"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(
--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)
) 0 25%,var(
--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)
) 0 50%) 0 0 /calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2) calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);box-shadow:inset 0 0 0 var(
--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
) rgba(var(
--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
),var(
--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
--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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(:focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host([layer]){align-items:center;border:var(
--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
) solid var(
--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
--highcontrast-thumbnail-border-color-selected,var(
--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-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)
));outline-width:var(
--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);outline:solid;outline-color: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)
))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}
`;export default i;
//# sourceMappingURL=spectrum-thumbnail.css.js.map

292

src/thumbnail.css.dev.js
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
:host{align-items:center;background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-radius:var(--spectrum-thumbnail-border-radius);display:flex;height:var(--spectrum-thumbnail-height);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-width);z-index:0}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:"";height:100%;position:absolute;width:100%;z-index:2}:host([size=xxs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)
)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)
)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)
)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)
)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)
)}::slotted(*){max-height:100%;max-width:100%;z-index:1}:host([cover]) ::slotted(*){height:100%;object-fit:cover;object-position:center;width:100%}.background{background-position:50%;background-size:cover;height:100%;inset:0;position:absolute;width:100%;z-index:0}:host{background-color:var(
--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(-45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%)}:host:before{box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-size) var(--spectrum-thumbnail-border-color)}:host([selected]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(:focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}::slotted(:not(img)){display:none}
:host{--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500);--spectrum-thumbnail-border-radius:var(--spectrum-corner-radius-75);--spectrum-thumbnail-border-width:var(--spectrum-border-width-100);--spectrum-thumbnail-border-color-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity: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
);--spectrum-thumbnail-checkerboard-size:var(
--spectrum-opacity-checkerboard-square-size
);--spectrum-thumbnail-checkerboard-dark-color:var(
--spectrum-opacity-checkerboard-square-dark
);--spectrum-thumbnail-checkerboard-light-color:var(
--spectrum-opacity-checkerboard-square-light
)}:host([size="50"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size="500"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size="600"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(
--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)
) 0 25%,var(
--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)
) 0 50%) 0 0 /calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2) calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);box-shadow:inset 0 0 0 var(
--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
) rgba(var(
--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
),var(
--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
--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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(:focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host([layer]){align-items:center;border:var(
--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
) solid var(
--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
--highcontrast-thumbnail-border-color-selected,var(
--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-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)
));outline-width:var(
--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);outline:solid;outline-color: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)
))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}::slotted(:not(img)){display:none}
`;
export default styles;
//# sourceMappingURL=thumbnail.css.dev.js.map

296

src/thumbnail.css.js

@@ -1,114 +0,184 @@

"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
:host{align-items:center;background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-radius:var(--spectrum-thumbnail-border-radius);display:flex;height:var(--spectrum-thumbnail-height);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-width);z-index:0}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:"";height:100%;position:absolute;width:100%;z-index:2}:host([size=xxs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)
)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)
)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)
)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)
)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(
--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)
);--spectrum-thumbnail-border-size-selected-key-focus:var(
--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
);--spectrum-thumbnail-border-size:var(
--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)
);--spectrum-thumbnail-border-color:var(
--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)
);--spectrum-thumbnail-border-color-key-focus:var(
--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
);--spectrum-thumbnail-darksquare-background-color:var(
--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
);--spectrum-thumbnail-border-radius:var(
--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
);--spectrum-thumbnail-width:var(
--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)
);--spectrum-thumbnail-height:var(
--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)
)}::slotted(*){max-height:100%;max-width:100%;z-index:1}:host([cover]) ::slotted(*){height:100%;object-fit:cover;object-position:center;width:100%}.background{background-position:50%;background-size:cover;height:100%;inset:0;position:absolute;width:100%;z-index:0}:host{background-color:var(
--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-thumbnail-darksquare-background-color) 75.5%),linear-gradient(-45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-thumbnail-darksquare-background-color) 25.5%,transparent 25.5%)}:host:before{box-shadow:inset 0 0 0 var(--spectrum-thumbnail-border-size) var(--spectrum-thumbnail-border-color)}:host([selected]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected);outline:none;overflow:visible}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(:focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected-key-focus)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
));box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;inset:0;margin:calc(var(
--spectrum-alias-focus-ring-gap,
var(--spectrum-global-dimension-static-size-25)
)*-1);position:absolute}::slotted(:not(img)){display:none}
`;export default e;
"use strict";import{css as r}from"@spectrum-web-components/base";const i=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-rgb:var(--spectrum-gray-800-rgb);--spectrum-thumbnail-border-color-opacity: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
);--spectrum-thumbnail-checkerboard-size:var(
--spectrum-opacity-checkerboard-square-size
);--spectrum-thumbnail-checkerboard-dark-color:var(
--spectrum-opacity-checkerboard-square-dark
);--spectrum-thumbnail-checkerboard-light-color:var(
--spectrum-opacity-checkerboard-square-light
)}:host([size="50"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-50)}:host([size="75"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-75)}:host([size="100"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-100)}:host([size="200"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size="300"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-300)}:host([size="400"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-400)}:host([size="500"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size="600"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-600)}:host([size="700"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([size="800"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-800)}:host([size="900"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-900)}:host([size="1000"]){--spectrum-thumbnail-size:var(--spectrum-thumbnail-size-1000)}:host{background:repeating-conic-gradient(var(
--mod-thumbnail-checkerboard-light-color,var(--spectrum-thumbnail-checkerboard-light-color)
) 0 25%,var(
--mod-thumbnail-checkerboard-dark-color,var(--spectrum-thumbnail-checkerboard-dark-color)
) 0 50%) 0 0 /calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2) calc(var(
--mod-thumbnail-checkerboard-size,
var(--spectrum-thumbnail-checkerboard-size)
)*2);block-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);display:block;inline-size:var(--mod-thumbnail-size,var(--spectrum-thumbnail-size));margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;z-index:0}:host:before{block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);box-shadow:inset 0 0 0 var(
--mod-thumbnail-border-width,var(--spectrum-thumbnail-border-width)
) rgba(var(
--mod-thumbnail-border-color-rgb,var(--spectrum-thumbnail-border-color-rgb)
),var(
--mod-thumbnail-border-color-opacity,var(--spectrum-thumbnail-border-color-opacity)
));content:"";inline-size:100%;position:absolute;z-index:2}:host([disabled]){opacity:var(
--mod-thumbnail-color-opacity-disabled,var(--spectrum-thumbnail-color-opacity-disabled)
)}:host(.focus-visible),:host([focused]){overflow:visible}:host(.focus-visible),:host([focused]){overflow:visible}:host(:focus-visible),:host([focused]){overflow:visible}:host(.focus-visible):after,:host([focused]):after{border-color:var(
--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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(:focus-visible):after,:host([focused]):after{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)
);border-style:solid;border-width:var(
--mod-thumbnail-focus-indicator-thickness,var(--spectrum-thumbnail-focus-indicator-thickness)
);content:"";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-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-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);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);position:absolute}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(.focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host(:focus-visible) .image-wrapper,:host([focused]) .image-wrapper{border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);overflow:hidden}:host([layer]){align-items:center;border:var(
--mod-thumbnail-layer-border-width-outer,var(--spectrum-thumbnail-layer-border-width-outer)
) solid var(
--mod-thumbnail-layer-border-color-outer,var(--spectrum-thumbnail-layer-border-color-outer)
);box-sizing:border-box;display:flex;justify-content:center}:host([layer]):before{content:none}:host([layer][selected]){outline:solid;outline-color:var(
--highcontrast-thumbnail-border-color-selected,var(
--mod-thumbnail-border-color-selected,var(--spectrum-thumbnail-border-color-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)
));outline-width:var(
--mod-thumbnail-border-width-selected,var(--spectrum-thumbnail-border-width-selected)
)}.layer-inner{block-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);inline-size:calc(var(--spectrum-thumbnail-size) - var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)*2);outline:solid;outline-color: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)
))}.image-wrapper,.layer-inner{align-items:center;display:flex;justify-content:center}.image-wrapper{block-size:100%;inline-size:100%}::slotted(*){max-block-size:100%;max-inline-size:100%;position:relative;z-index:1}:host([cover]) ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover;object-position:center}.background{background-position:50%;background-size:cover;block-size:100%;border-radius:var(
--mod-thumbnail-border-radius,var(--spectrum-thumbnail-border-radius)
);inline-size:100%;inset-block:0;inset-inline:0;position:absolute;z-index:0}@media (forced-colors:active){:host([selected]){--highcontrast-thumbnail-border-color-selected:SelectedItem}:host([focused]){--highcontrast-thumbnail-focus-indicator-color:Highlight}}::slotted(:not(img)){display:none}
`;export default i;
//# sourceMappingURL=thumbnail.css.js.map

17

src/Thumbnail.d.ts

@@ -1,17 +0,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 {};

103

src/Thumbnail.dev.js

@@ -15,3 +15,2 @@ "use strict";

html,
SizedMixin,
SpectrumElement

@@ -21,9 +20,23 @@ } from "@spectrum-web-components/base";

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;
}

@@ -33,12 +46,68 @@ static get 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>
`;
}
}

@@ -52,2 +121,8 @@ }

], 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

24

src/Thumbnail.js

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

17

stories/thumbnail-sizes.stories.js

@@ -18,7 +18,14 @@ "use strict";

};
export const XXS = () => thumbnail({ size: "xxs" });
export const XS = () => thumbnail({ size: "xs" });
export const s = () => thumbnail({ size: "s" });
export const m = () => thumbnail({ size: "m" });
export const l = () => thumbnail({ size: "l" });
export const size50 = () => thumbnail({ size: "50" });
export const size75 = () => thumbnail({ size: "75" });
export const size100 = () => thumbnail({ size: "100" });
export const size200 = () => thumbnail({ size: "200" });
export const size300 = () => thumbnail({ size: "300" });
export const size400 = () => thumbnail({ size: "400" });
export const size500 = () => thumbnail({ size: "500" });
export const size600 = () => thumbnail({ size: "600" });
export const size700 = () => thumbnail({ size: "700" });
export const size800 = () => thumbnail({ size: "800" });
export const size900 = () => thumbnail({ size: "900" });
export const size1000 = () => thumbnail({ size: "1000" });
//# sourceMappingURL=thumbnail-sizes.stories.js.map

22

stories/thumbnail.stories.js

@@ -20,5 +20,5 @@ "use strict";

};
export const selected = () => {
export const focused = () => {
return html`
<sp-thumbnail selected>
<sp-thumbnail focused>
<img src=${thumbnail} alt="Woman crouching" />

@@ -28,5 +28,5 @@ </sp-thumbnail>

};
export const focused = () => {
export const disabled = () => {
return html`
<sp-thumbnail focused>
<sp-thumbnail disabled>
<img src=${thumbnail} alt="Woman crouching" />

@@ -53,2 +53,16 @@ </sp-thumbnail>

};
export const layerSelected = () => {
return html`
<sp-thumbnail layer selected>
<img src=${thumbnail} alt="Woman crouching" />
</sp-thumbnail>
`;
};
export const layer = () => {
return html`
<sp-thumbnail layer>
<img src=${thumbnail} alt="Woman crouching" />
</sp-thumbnail>
`;
};
export const portraitCover = () => {

@@ -55,0 +69,0 @@ return html`

6

test/thumbnail.test.js

@@ -27,6 +27,6 @@ "use strict";

});
it("can be size `xxs`", async () => {
it("can be size `50`", async () => {
const el = await fixture(
html`
<sp-thumbnail size="xxs">
<sp-thumbnail size="50">
<img src=${thumbnail} alt="Woman crouching" />

@@ -37,3 +37,3 @@ </sp-thumbnail>

await elementUpdated(el);
expect(el.size).to.equal("xxs");
expect(el.size).to.equal("50");
});

@@ -40,0 +40,0 @@ it("accepts `background`", async () => {

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

Sorry, the diff of this file is not supported yet

src/spectrum-thumbnail.css.js.map

Sorry, the diff of this file is not supported yet

src/thumbnail.css.dev.js.map

Sorry, the diff of this file is not supported yet

src/thumbnail.css.js.map

Sorry, the diff of this file is not supported yet

src/Thumbnail.dev.js.map

Sorry, the diff of this file is not supported yet

src/Thumbnail.js.map

Sorry, the diff of this file is not supported yet

stories/thumbnail-sizes.stories.js.map

Sorry, the diff of this file is not supported yet

stories/thumbnail.stories.js.map

Sorry, the diff of this file is not supported yet

test/thumbnail.test.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc