@spectrum-web-components/thumbnail 0.3.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +20 -10
  2. package/custom-elements.json +2 -2
  3. package/package.json +4 -4
  4. package/src/Thumbnail.d.ts +1 -1
  5. package/src/Thumbnail.js +4 -3
  6. package/src/Thumbnail.js.map +1 -1
  7. package/src/spectrum-config.js +10 -10
  8. package/src/spectrum-thumbnail.css.js +104 -14
  9. package/src/spectrum-thumbnail.css.js.map +1 -1
  10. package/src/thumbnail.css.js +104 -14
  11. package/src/thumbnail.css.js.map +1 -1
  12. package/stories/thumbnail-sizes.stories.js +2 -2
  13. package/stories/thumbnail-sizes.stories.js.map +1 -1
  14. package/stories/thumbnail.stories.js +1 -1
  15. package/stories/thumbnail.stories.js.map +1 -1
package/README.md CHANGED
@@ -27,6 +27,26 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
27
27
  ## Sizes
28
28
 
29
29
  <sp-tabs selected="m" auto label="Size Attribute Options">
30
+ <sp-tab value="xss">Extra Extra Small</sp-tab>
31
+ <sp-tab-panel value="xxs">
32
+
33
+ ```html
34
+ <sp-thumbnail size="xxs">
35
+ <img src="https://place.dog/100/100" alt="Demo Image" />
36
+ </sp-thumbnail>
37
+ ```
38
+
39
+ </sp-tab-panel>
40
+ <sp-tab value="xs">Extra Small</sp-tab>
41
+ <sp-tab-panel value="xs">
42
+
43
+ ```html
44
+ <sp-thumbnail size="xs">
45
+ <img src="https://place.dog/100/100" alt="Demo Image" />
46
+ </sp-thumbnail>
47
+ ```
48
+
49
+ </sp-tab-panel>
30
50
  <sp-tab value="s">Small</sp-tab>
31
51
  <sp-tab-panel value="s">
32
52
 
@@ -56,16 +76,6 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
56
76
  </sp-thumbnail>
57
77
  ```
58
78
 
59
- </sp-tab-panel>
60
- <sp-tab value="xl">Extra Large</sp-tab>
61
- <sp-tab-panel value="xl">
62
-
63
- ```html
64
- <sp-thumbnail size="xl">
65
- <img src="https://place.dog/100/100" alt="Demo Image" />
66
- </sp-thumbnail>
67
- ```
68
-
69
79
  </sp-tab-panel>
70
80
  </sp-tabs>
71
81
 
package/custom-elements.json CHANGED
@@ -99,7 +99,7 @@
99
99
  {
100
100
  "kind": "variable",
101
101
  "name": "styles",
102
- "default": "css`\n:host{--spectrum-thumbnail-border-radius:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-thumbnail-size-S:var(--spectrum-global-dimension-size-300);--spectrum-thumbnail-size-M:var(--spectrum-global-dimension-size-400);--spectrum-thumbnail-size-L:var(--spectrum-global-dimension-size-500);--spectrum-thumbnail-size-XL:var(--spectrum-global-dimension-size-600);--spectrum-thumbnail-size-XXL:var(--spectrum-global-dimension-size-700)}: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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-size-M);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-size-M)}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:\"\";height:100%;position:absolute;width:100%;z-index:2}:host([size=s]){height:var(--spectrum-thumbnail-size-S);width:var(--spectrum-thumbnail-size-S)}:host([size=m]){height:var(--spectrum-thumbnail-size-M);width:var(--spectrum-thumbnail-size-M)}:host([size=l]){height:var(--spectrum-thumbnail-size-L);width:var(--spectrum-thumbnail-size-L)}:host([size=xl]){height:var(--spectrum-thumbnail-size-XL);width:var(--spectrum-thumbnail-size-XL)}:host([size=xxl]){height:var(--spectrum-thumbnail-size-XXL);width:var(--spectrum-thumbnail-size-XXL)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{--spectrum-thumbnail-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-thumbnail-border-size-selected:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-size-focus:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-color:var(--spectrum-alias-dropshadow-color);--spectrum-thumbnail-border-color-focus:var(\n--spectrum-alias-border-color-key-focus,var(--spectrum-global-color-blue-400)\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-global-color-blue-500\n)}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 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)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/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)/2) var(--spectrum-thumbnail-border-color-selected)}\n`"
102
+ "default": "css`\n: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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)}: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(\n--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)\n)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)\n)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);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):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(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}\n`"
103
103
  }
104
104
  ],
105
105
  "exports": [
@@ -120,7 +120,7 @@
120
120
  {
121
121
  "kind": "variable",
122
122
  "name": "styles",
123
- "default": "css`\n:host{--spectrum-thumbnail-border-radius:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-thumbnail-size-S:var(--spectrum-global-dimension-size-300);--spectrum-thumbnail-size-M:var(--spectrum-global-dimension-size-400);--spectrum-thumbnail-size-L:var(--spectrum-global-dimension-size-500);--spectrum-thumbnail-size-XL:var(--spectrum-global-dimension-size-600);--spectrum-thumbnail-size-XXL:var(--spectrum-global-dimension-size-700)}: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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-size-M);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-size-M)}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:\"\";height:100%;position:absolute;width:100%;z-index:2}:host([size=s]){height:var(--spectrum-thumbnail-size-S);width:var(--spectrum-thumbnail-size-S)}:host([size=m]){height:var(--spectrum-thumbnail-size-M);width:var(--spectrum-thumbnail-size-M)}:host([size=l]){height:var(--spectrum-thumbnail-size-L);width:var(--spectrum-thumbnail-size-L)}:host([size=xl]){height:var(--spectrum-thumbnail-size-XL);width:var(--spectrum-thumbnail-size-XL)}:host([size=xxl]){height:var(--spectrum-thumbnail-size-XXL);width:var(--spectrum-thumbnail-size-XXL)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{--spectrum-thumbnail-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-thumbnail-border-size-selected:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-size-focus:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-color:var(--spectrum-alias-dropshadow-color);--spectrum-thumbnail-border-color-focus:var(\n--spectrum-alias-border-color-key-focus,var(--spectrum-global-color-blue-400)\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-global-color-blue-500\n)}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 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)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/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)/2) var(--spectrum-thumbnail-border-color-selected)}::slotted(:not(img)){display:none}:host([cover]) ::slotted(img){height:100%;object-fit:cover;width:100%}\n`"
123
+ "default": "css`\n: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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)}: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(\n--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)\n)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)\n)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);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):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(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}::slotted(:not(img)){display:none}:host([cover]) ::slotted(img){height:100%;object-fit:cover;width:100%}\n`"
124
124
  }
125
125
  ],
126
126
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/thumbnail",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -44,16 +44,16 @@
44
44
  "lit-html"
45
45
  ],
46
46
  "dependencies": {
47
- "@spectrum-web-components/base": "^0.4.5",
47
+ "@spectrum-web-components/base": "^0.5.1",
48
48
  "tslib": "^2.0.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@spectrum-css/thumbnail": "^1.0.4"
51
+ "@spectrum-css/thumbnail": "^2.0.1"
52
52
  },
53
53
  "types": "./src/index.d.ts",
54
54
  "customElements": "custom-elements.json",
55
55
  "sideEffects": [
56
56
  "./sp-*.js"
57
57
  ],
58
- "gitHead": "12d891f3dc85e8de641804d8efc9ca06b7fdee2d"
58
+ "gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
59
59
  }
package/src/Thumbnail.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
1
+ import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
2
  declare const Thumbnail_base: typeof SpectrumElement & {
3
3
  new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
4
4
  prototype: import("@spectrum-web-components/base").SizedElementInterface;
package/src/Thumbnail.js CHANGED
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
10
10
  governing permissions and limitations under the License.
11
11
  */
12
12
  import { __decorate } from "tslib";
13
- import { html, SpectrumElement, property, SizedMixin, } from '@spectrum-web-components/base';
13
+ import { html, SizedMixin, SpectrumElement, } from '@spectrum-web-components/base';
14
+ import { property } from '@spectrum-web-components/base/src/decorators.js';
14
15
  import styles from './thumbnail.css.js';
15
16
  /**
16
17
  * @element sp-thumbnail
@@ -18,8 +19,8 @@ import styles from './thumbnail.css.js';
18
19
  * @slot - image element to present in the Thumbnail
19
20
  */
20
21
  export class Thumbnail extends SizedMixin(SpectrumElement, {
21
- validSizes: ['s', 'm', 'l', 'xl', 'xxl'],
22
- noDefaultSize: true,
22
+ validSizes: ['xxs', 'xs', 's', 'm', 'l'],
23
+ defaultSize: 's',
23
24
  }) {
24
25
  static get styles() {
25
26
  return [styles];
package/src/Thumbnail.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["Thumbnail.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EACH,IAAI,EACJ,eAAe,EAGf,QAAQ,EACR,UAAU,GACb,MAAM,+BAA+B,CAAC;AAEvC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU,CAAC,eAAe,EAAE;IACvD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;IACxC,aAAa,EAAE,IAAI;CACtB,CAAC;IACS,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAKS,MAAM;QACZ,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,UAAU;YACb,CAAC,CAAC,IAAI,CAAA;;;+CAGyB,IAAI,CAAC,UAAU;;mBAE3C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;SAEf,CAAC;IACN,CAAC;CACJ;AAfG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACf","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n SpectrumElement,\n CSSResultArray,\n TemplateResult,\n property,\n SizedMixin,\n} from '@spectrum-web-components/base';\n\nimport styles from './thumbnail.css.js';\n\n/**\n * @element sp-thumbnail\n *\n * @slot - image element to present in the Thumbnail\n */\nexport class Thumbnail extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l', 'xl', 'xxl'],\n noDefaultSize: true,\n}) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String, reflect: true })\n public background?: string;\n\n protected render(): TemplateResult {\n return html`\n ${this.background\n ? html`\n <div\n class=\"background\"\n style=\"background: ${this.background}\"\n ></div>\n `\n : html``}\n <slot></slot>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["Thumbnail.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EACJ,UAAU,EACV,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU,CAAC,eAAe,EAAE;IACvD,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACxC,WAAW,EAAE,GAAG;CACnB,CAAC;IACS,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAKS,MAAM;QACZ,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,UAAU;YACb,CAAC,CAAC,IAAI,CAAA;;;+CAGyB,IAAI,CAAC,UAAU;;mBAE3C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;SAEf,CAAC;IACN,CAAC;CACJ;AAfG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACf","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './thumbnail.css.js';\n\n/**\n * @element sp-thumbnail\n *\n * @slot - image element to present in the Thumbnail\n */\nexport class Thumbnail extends SizedMixin(SpectrumElement, {\n validSizes: ['xxs', 'xs', 's', 'm', 'l'],\n defaultSize: 's',\n}) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String, reflect: true })\n public background?: string;\n\n protected render(): TemplateResult {\n return html`\n ${this.background\n ? html`\n <div\n class=\"background\"\n style=\"background: ${this.background}\"\n ></div>\n `\n : html``}\n <slot></slot>\n `;\n }\n}\n"]}
package/src/spectrum-config.js CHANGED
@@ -34,24 +34,24 @@ const config = {
34
34
  name: 'size',
35
35
  values: [
36
36
  {
37
- name: 's',
38
- selector: '.spectrum-Thumbnail--S',
37
+ name: 'xxs',
38
+ selector: '.spectrum-Thumbnail--sizeXXS',
39
39
  },
40
40
  {
41
- name: 'm',
42
- selector: '.spectrum-Thumbnail--M',
41
+ name: 'xs',
42
+ selector: '.spectrum-Thumbnail--sizeXS',
43
43
  },
44
44
  {
45
- name: 'l',
46
- selector: '.spectrum-Thumbnail--L',
45
+ name: 's',
46
+ selector: '.spectrum-Thumbnail--sizeS',
47
47
  },
48
48
  {
49
- name: 'xl',
50
- selector: '.spectrum-Thumbnail--XL',
49
+ name: 'm',
50
+ selector: '.spectrum-Thumbnail--sizeM',
51
51
  },
52
52
  {
53
- name: 'xxl',
54
- selector: '.spectrum-Thumbnail--XXL',
53
+ name: 'l',
54
+ selector: '.spectrum-Thumbnail--sizeL',
55
55
  },
56
56
  ],
57
57
  },
package/src/spectrum-thumbnail.css.js CHANGED
@@ -11,21 +11,111 @@ governing permissions and limitations under the License.
11
11
  */
12
12
  import { css } from '@spectrum-web-components/base';
13
13
  const styles = css `
14
- :host{--spectrum-thumbnail-border-radius:var(
15
- --spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)
16
- );--spectrum-thumbnail-size-S:var(--spectrum-global-dimension-size-300);--spectrum-thumbnail-size-M:var(--spectrum-global-dimension-size-400);--spectrum-thumbnail-size-L:var(--spectrum-global-dimension-size-500);--spectrum-thumbnail-size-XL:var(--spectrum-global-dimension-size-600);--spectrum-thumbnail-size-XXL:var(--spectrum-global-dimension-size-700)}: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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-size-M);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-size-M)}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:"";height:100%;position:absolute;width:100%;z-index:2}:host([size=s]){height:var(--spectrum-thumbnail-size-S);width:var(--spectrum-thumbnail-size-S)}:host([size=m]){height:var(--spectrum-thumbnail-size-M);width:var(--spectrum-thumbnail-size-M)}:host([size=l]){height:var(--spectrum-thumbnail-size-L);width:var(--spectrum-thumbnail-size-L)}:host([size=xl]){height:var(--spectrum-thumbnail-size-XL);width:var(--spectrum-thumbnail-size-XL)}:host([size=xxl]){height:var(--spectrum-thumbnail-size-XXL);width:var(--spectrum-thumbnail-size-XXL)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{--spectrum-thumbnail-border-size:var(
17
- --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
18
- );--spectrum-thumbnail-border-size-selected:var(
19
- --spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)
20
- );--spectrum-thumbnail-border-size-focus:var(
21
- --spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)
22
- );--spectrum-thumbnail-border-color:var(--spectrum-alias-dropshadow-color);--spectrum-thumbnail-border-color-focus:var(
23
- --spectrum-alias-border-color-key-focus,var(--spectrum-global-color-blue-400)
24
- );--spectrum-thumbnail-border-color-selected:var(
25
- --spectrum-global-color-blue-500
26
- )}:host{background-color:var(
14
+ :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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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)}: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(
15
+ --spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)
16
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
17
+ --spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
18
+ );--spectrum-thumbnail-border-size:var(
19
+ --spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)
20
+ );--spectrum-thumbnail-border-color:var(
21
+ --spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)
22
+ );--spectrum-thumbnail-border-color-key-focus:var(
23
+ --spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
24
+ );--spectrum-thumbnail-darksquare-background-color:var(
25
+ --spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
26
+ );--spectrum-thumbnail-border-radius:var(
27
+ --spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
28
+ );--spectrum-thumbnail-width:var(
29
+ --spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)
30
+ );--spectrum-thumbnail-height:var(
31
+ --spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)
32
+ )}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(
33
+ --spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)
34
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
35
+ --spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
36
+ );--spectrum-thumbnail-border-size:var(
37
+ --spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)
38
+ );--spectrum-thumbnail-border-color:var(
39
+ --spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)
40
+ );--spectrum-thumbnail-border-color-key-focus:var(
41
+ --spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
42
+ );--spectrum-thumbnail-darksquare-background-color:var(
43
+ --spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
44
+ );--spectrum-thumbnail-border-radius:var(
45
+ --spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
46
+ );--spectrum-thumbnail-width:var(
47
+ --spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)
48
+ );--spectrum-thumbnail-height:var(
49
+ --spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)
50
+ )}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(
51
+ --spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)
52
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
53
+ --spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
54
+ );--spectrum-thumbnail-border-size:var(
55
+ --spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)
56
+ );--spectrum-thumbnail-border-color:var(
57
+ --spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)
58
+ );--spectrum-thumbnail-border-color-key-focus:var(
59
+ --spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
60
+ );--spectrum-thumbnail-darksquare-background-color:var(
61
+ --spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
62
+ );--spectrum-thumbnail-border-radius:var(
63
+ --spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
64
+ );--spectrum-thumbnail-width:var(
65
+ --spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)
66
+ );--spectrum-thumbnail-height:var(
67
+ --spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)
68
+ )}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(
69
+ --spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)
70
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
71
+ --spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
72
+ );--spectrum-thumbnail-border-size:var(
73
+ --spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)
74
+ );--spectrum-thumbnail-border-color:var(
75
+ --spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)
76
+ );--spectrum-thumbnail-border-color-key-focus:var(
77
+ --spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
78
+ );--spectrum-thumbnail-darksquare-background-color:var(
79
+ --spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
80
+ );--spectrum-thumbnail-border-radius:var(
81
+ --spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
82
+ );--spectrum-thumbnail-width:var(
83
+ --spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)
84
+ );--spectrum-thumbnail-height:var(
85
+ --spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)
86
+ )}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(
87
+ --spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)
88
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
89
+ --spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
90
+ );--spectrum-thumbnail-border-size:var(
91
+ --spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)
92
+ );--spectrum-thumbnail-border-color:var(
93
+ --spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)
94
+ );--spectrum-thumbnail-border-color-key-focus:var(
95
+ --spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
96
+ );--spectrum-thumbnail-darksquare-background-color:var(
97
+ --spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
98
+ );--spectrum-thumbnail-border-radius:var(
99
+ --spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
100
+ );--spectrum-thumbnail-width:var(
101
+ --spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)
102
+ );--spectrum-thumbnail-height:var(
103
+ --spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)
104
+ )}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{background-color:var(
27
105
  --spectrum-global-color-static-white,#fff
28
- );background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 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)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/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)/2) var(--spectrum-thumbnail-border-color-selected)}
106
+ );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):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(
107
+ --spectrum-alias-focus-ring-gap,
108
+ var(--spectrum-global-dimension-static-size-25)
109
+ ));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;left:0;margin:calc(var(
110
+ --spectrum-alias-focus-ring-gap,
111
+ var(--spectrum-global-dimension-static-size-25)
112
+ )*-1);position:absolute;right:0;top:0}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
113
+ --spectrum-alias-focus-ring-gap,
114
+ var(--spectrum-global-dimension-static-size-25)
115
+ ));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;left:0;margin:calc(var(
116
+ --spectrum-alias-focus-ring-gap,
117
+ var(--spectrum-global-dimension-static-size-25)
118
+ )*-1);position:absolute;right:0;top:0}
29
119
  `;
30
120
  export default styles;
31
121
  //# sourceMappingURL=spectrum-thumbnail.css.js.map
package/src/spectrum-thumbnail.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spectrum-thumbnail.css.js","sourceRoot":"","sources":["spectrum-thumbnail.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-thumbnail-border-radius:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-thumbnail-size-S:var(--spectrum-global-dimension-size-300);--spectrum-thumbnail-size-M:var(--spectrum-global-dimension-size-400);--spectrum-thumbnail-size-L:var(--spectrum-global-dimension-size-500);--spectrum-thumbnail-size-XL:var(--spectrum-global-dimension-size-600);--spectrum-thumbnail-size-XXL:var(--spectrum-global-dimension-size-700)}: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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-size-M);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-size-M)}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:\"\";height:100%;position:absolute;width:100%;z-index:2}:host([size=s]){height:var(--spectrum-thumbnail-size-S);width:var(--spectrum-thumbnail-size-S)}:host([size=m]){height:var(--spectrum-thumbnail-size-M);width:var(--spectrum-thumbnail-size-M)}:host([size=l]){height:var(--spectrum-thumbnail-size-L);width:var(--spectrum-thumbnail-size-L)}:host([size=xl]){height:var(--spectrum-thumbnail-size-XL);width:var(--spectrum-thumbnail-size-XL)}:host([size=xxl]){height:var(--spectrum-thumbnail-size-XXL);width:var(--spectrum-thumbnail-size-XXL)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{--spectrum-thumbnail-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-thumbnail-border-size-selected:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-size-focus:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-color:var(--spectrum-alias-dropshadow-color);--spectrum-thumbnail-border-color-focus:var(\n--spectrum-alias-border-color-key-focus,var(--spectrum-global-color-blue-400)\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-global-color-blue-500\n)}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 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)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/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)/2) var(--spectrum-thumbnail-border-color-selected)}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"spectrum-thumbnail.css.js","sourceRoot":"","sources":["spectrum-thumbnail.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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)}: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(\n--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)\n)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)\n)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);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):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(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}\n`;\nexport default styles;"]}
package/src/thumbnail.css.js CHANGED
@@ -11,21 +11,111 @@ governing permissions and limitations under the License.
11
11
  */
12
12
  import { css } from '@spectrum-web-components/base';
13
13
  const styles = css `
14
- :host{--spectrum-thumbnail-border-radius:var(
15
- --spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)
16
- );--spectrum-thumbnail-size-S:var(--spectrum-global-dimension-size-300);--spectrum-thumbnail-size-M:var(--spectrum-global-dimension-size-400);--spectrum-thumbnail-size-L:var(--spectrum-global-dimension-size-500);--spectrum-thumbnail-size-XL:var(--spectrum-global-dimension-size-600);--spectrum-thumbnail-size-XXL:var(--spectrum-global-dimension-size-700)}: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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-size-M);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-size-M)}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:"";height:100%;position:absolute;width:100%;z-index:2}:host([size=s]){height:var(--spectrum-thumbnail-size-S);width:var(--spectrum-thumbnail-size-S)}:host([size=m]){height:var(--spectrum-thumbnail-size-M);width:var(--spectrum-thumbnail-size-M)}:host([size=l]){height:var(--spectrum-thumbnail-size-L);width:var(--spectrum-thumbnail-size-L)}:host([size=xl]){height:var(--spectrum-thumbnail-size-XL);width:var(--spectrum-thumbnail-size-XL)}:host([size=xxl]){height:var(--spectrum-thumbnail-size-XXL);width:var(--spectrum-thumbnail-size-XXL)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{--spectrum-thumbnail-border-size:var(
17
- --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
18
- );--spectrum-thumbnail-border-size-selected:var(
19
- --spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)
20
- );--spectrum-thumbnail-border-size-focus:var(
21
- --spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)
22
- );--spectrum-thumbnail-border-color:var(--spectrum-alias-dropshadow-color);--spectrum-thumbnail-border-color-focus:var(
23
- --spectrum-alias-border-color-key-focus,var(--spectrum-global-color-blue-400)
24
- );--spectrum-thumbnail-border-color-selected:var(
25
- --spectrum-global-color-blue-500
26
- )}:host{background-color:var(
14
+ :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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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)}: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(
15
+ --spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)
16
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
17
+ --spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
18
+ );--spectrum-thumbnail-border-size:var(
19
+ --spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)
20
+ );--spectrum-thumbnail-border-color:var(
21
+ --spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)
22
+ );--spectrum-thumbnail-border-color-key-focus:var(
23
+ --spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
24
+ );--spectrum-thumbnail-darksquare-background-color:var(
25
+ --spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
26
+ );--spectrum-thumbnail-border-radius:var(
27
+ --spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
28
+ );--spectrum-thumbnail-width:var(
29
+ --spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)
30
+ );--spectrum-thumbnail-height:var(
31
+ --spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)
32
+ )}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(
33
+ --spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)
34
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
35
+ --spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
36
+ );--spectrum-thumbnail-border-size:var(
37
+ --spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)
38
+ );--spectrum-thumbnail-border-color:var(
39
+ --spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)
40
+ );--spectrum-thumbnail-border-color-key-focus:var(
41
+ --spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
42
+ );--spectrum-thumbnail-darksquare-background-color:var(
43
+ --spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
44
+ );--spectrum-thumbnail-border-radius:var(
45
+ --spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
46
+ );--spectrum-thumbnail-width:var(
47
+ --spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)
48
+ );--spectrum-thumbnail-height:var(
49
+ --spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)
50
+ )}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(
51
+ --spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)
52
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
53
+ --spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
54
+ );--spectrum-thumbnail-border-size:var(
55
+ --spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)
56
+ );--spectrum-thumbnail-border-color:var(
57
+ --spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)
58
+ );--spectrum-thumbnail-border-color-key-focus:var(
59
+ --spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
60
+ );--spectrum-thumbnail-darksquare-background-color:var(
61
+ --spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
62
+ );--spectrum-thumbnail-border-radius:var(
63
+ --spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
64
+ );--spectrum-thumbnail-width:var(
65
+ --spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)
66
+ );--spectrum-thumbnail-height:var(
67
+ --spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)
68
+ )}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(
69
+ --spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)
70
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
71
+ --spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
72
+ );--spectrum-thumbnail-border-size:var(
73
+ --spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)
74
+ );--spectrum-thumbnail-border-color:var(
75
+ --spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)
76
+ );--spectrum-thumbnail-border-color-key-focus:var(
77
+ --spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
78
+ );--spectrum-thumbnail-darksquare-background-color:var(
79
+ --spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
80
+ );--spectrum-thumbnail-border-radius:var(
81
+ --spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
82
+ );--spectrum-thumbnail-width:var(
83
+ --spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)
84
+ );--spectrum-thumbnail-height:var(
85
+ --spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)
86
+ )}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(
87
+ --spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)
88
+ );--spectrum-thumbnail-border-size-selected-key-focus:var(
89
+ --spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)
90
+ );--spectrum-thumbnail-border-size:var(
91
+ --spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)
92
+ );--spectrum-thumbnail-border-color:var(
93
+ --spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)
94
+ );--spectrum-thumbnail-border-color-key-focus:var(
95
+ --spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
96
+ );--spectrum-thumbnail-darksquare-background-color:var(
97
+ --spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)
98
+ );--spectrum-thumbnail-border-radius:var(
99
+ --spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)
100
+ );--spectrum-thumbnail-width:var(
101
+ --spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)
102
+ );--spectrum-thumbnail-height:var(
103
+ --spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)
104
+ )}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{background-color:var(
27
105
  --spectrum-global-color-static-white,#fff
28
- );background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 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)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/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)/2) var(--spectrum-thumbnail-border-color-selected)}::slotted(:not(img)){display:none}:host([cover]) ::slotted(img){height:100%;object-fit:cover;width:100%}
106
+ );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):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(
107
+ --spectrum-alias-focus-ring-gap,
108
+ var(--spectrum-global-dimension-static-size-25)
109
+ ));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;left:0;margin:calc(var(
110
+ --spectrum-alias-focus-ring-gap,
111
+ var(--spectrum-global-dimension-static-size-25)
112
+ )*-1);position:absolute;right:0;top:0}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(
113
+ --spectrum-alias-focus-ring-gap,
114
+ var(--spectrum-global-dimension-static-size-25)
115
+ ));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:"";display:block;left:0;margin:calc(var(
116
+ --spectrum-alias-focus-ring-gap,
117
+ var(--spectrum-global-dimension-static-size-25)
118
+ )*-1);position:absolute;right:0;top:0}::slotted(:not(img)){display:none}:host([cover]) ::slotted(img){height:100%;object-fit:cover;width:100%}
29
119
  `;
30
120
  export default styles;
31
121
  //# sourceMappingURL=thumbnail.css.js.map
package/src/thumbnail.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"thumbnail.css.js","sourceRoot":"","sources":["thumbnail.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-thumbnail-border-radius:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-thumbnail-size-S:var(--spectrum-global-dimension-size-300);--spectrum-thumbnail-size-M:var(--spectrum-global-dimension-size-400);--spectrum-thumbnail-size-L:var(--spectrum-global-dimension-size-500);--spectrum-thumbnail-size-XL:var(--spectrum-global-dimension-size-600);--spectrum-thumbnail-size-XXL:var(--spectrum-global-dimension-size-700)}: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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-size-M);justify-content:center;margin:0;overflow:hidden;padding:0;position:relative;vertical-align:top;width:var(--spectrum-thumbnail-size-M)}:host:before{border-radius:var(--spectrum-thumbnail-border-radius);content:\"\";height:100%;position:absolute;width:100%;z-index:2}:host([size=s]){height:var(--spectrum-thumbnail-size-S);width:var(--spectrum-thumbnail-size-S)}:host([size=m]){height:var(--spectrum-thumbnail-size-M);width:var(--spectrum-thumbnail-size-M)}:host([size=l]){height:var(--spectrum-thumbnail-size-L);width:var(--spectrum-thumbnail-size-L)}:host([size=xl]){height:var(--spectrum-thumbnail-size-XL);width:var(--spectrum-thumbnail-size-XL)}:host([size=xxl]){height:var(--spectrum-thumbnail-size-XXL);width:var(--spectrum-thumbnail-size-XXL)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{--spectrum-thumbnail-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-thumbnail-border-size-selected:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-size-focus:var(\n--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-thumbnail-border-color:var(--spectrum-alias-dropshadow-color);--spectrum-thumbnail-border-color-focus:var(\n--spectrum-alias-border-color-key-focus,var(--spectrum-global-color-blue-400)\n);--spectrum-thumbnail-border-color-selected:var(\n--spectrum-global-color-blue-500\n)}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 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)/2) var(--spectrum-thumbnail-border-color-selected)}:host([selected]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/2) var(--spectrum-thumbnail-border-color-selected)}:host(.focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(:focus-visible),:host([focused]){box-shadow:0 0 0 calc(var(--spectrum-thumbnail-border-size-focus)/2) var(--spectrum-thumbnail-border-color-focus)}:host(.focus-visible):before,:host([focused]):before{box-shadow:inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected)/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)/2) var(--spectrum-thumbnail-border-color-selected)}::slotted(:not(img)){display:none}:host([cover]) ::slotted(img){height:100%;object-fit:cover;width:100%}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"thumbnail.css.js","sourceRoot":"","sources":["thumbnail.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 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)}: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(\n--spectrum-thumbnail-xxs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xxs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xxs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xxs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xxs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xxs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xxs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xxs-width,var(--spectrum-global-dimension-size-225)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xxs-height,var(--spectrum-global-dimension-size-225)\n)}:host([size=xs]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-xs-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-xs-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-xs-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-xs-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-xs-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-xs-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-xs-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-xs-width,var(--spectrum-global-dimension-size-300)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-xs-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=s]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-s-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-s-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-s-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-s-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-s-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-s-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-s-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-s-width,var(--spectrum-global-dimension-size-400)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-s-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=m]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-m-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-m-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-m-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-m-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-m-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-m-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-m-width,var(--spectrum-global-dimension-size-500)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-m-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=l]){--spectrum-thumbnail-border-color-selected:var(\n--spectrum-thumbnail-l-border-color-selected,var(--spectrum-alias-border-color-selected)\n);--spectrum-thumbnail-border-size-selected-key-focus:var(\n--spectrum-thumbnail-l-border-size-selected-key-focus,var(--spectrum-alias-border-size-thick)\n);--spectrum-thumbnail-border-size:var(\n--spectrum-thumbnail-l-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-thumbnail-border-color:var(\n--spectrum-thumbnail-l-border-color,var(--spectrum-alias-border-color-translucent)\n);--spectrum-thumbnail-border-color-key-focus:var(\n--spectrum-thumbnail-l-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);--spectrum-thumbnail-darksquare-background-color:var(\n--spectrum-thumbnail-l-darksquare-background-color,var(--spectrum-alias-thumbnail-darksquare-background-color)\n);--spectrum-thumbnail-border-radius:var(\n--spectrum-thumbnail-l-border-radius,var(--spectrum-alias-thumbnail-border-radius-small)\n);--spectrum-thumbnail-width:var(\n--spectrum-thumbnail-l-width,var(--spectrum-global-dimension-size-700)\n);--spectrum-thumbnail-height:var(\n--spectrum-thumbnail-l-height,var(--spectrum-global-dimension-size-700)\n)}::slotted(*){max-height:100%;max-width:100%;z-index:1}.background{background-position:50%;background-size:cover;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:0}:host{background-color:var(\n--spectrum-global-color-static-white,#fff\n);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):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(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}:host(:focus-visible):after,:host([focused]):after{border-radius:calc(var(--spectrum-thumbnail-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;box-shadow:0 0 0 var(--spectrum-thumbnail-border-size-selected-key-focus) var(--spectrum-thumbnail-border-color-key-focus);content:\"\";display:block;left:0;margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1);position:absolute;right:0;top:0}::slotted(:not(img)){display:none}:host([cover]) ::slotted(img){height:100%;object-fit:cover;width:100%}\n`;\nexport default styles;"]}
package/stories/thumbnail-sizes.stories.js CHANGED
@@ -23,9 +23,9 @@ const thumbnail = ({ size, }) => {
23
23
  </sp-thumbnail>
24
24
  `;
25
25
  };
26
+ export const XXS = () => thumbnail({ size: 'xxs' });
27
+ export const XS = () => thumbnail({ size: 'xs' });
26
28
  export const s = () => thumbnail({ size: 's' });
27
29
  export const m = () => thumbnail({ size: 'm' });
28
30
  export const l = () => thumbnail({ size: 'l' });
29
- export const XL = () => thumbnail({ size: 'xl' });
30
- export const XXL = () => thumbnail({ size: 'xxl' });
31
31
  //# sourceMappingURL=thumbnail-sizes.stories.js.map
package/stories/thumbnail-sizes.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"thumbnail-sizes.stories.js","sourceRoot":"","sources":["thumbnail-sizes.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EACf,IAAI,GAGP,EAAkB,EAAE;IACjB,OAAO,IAAI,CAAA;6BACc,IAAI;uBACV,KAAK;;KAEvB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,CAAC,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,CAAC,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,CAAC,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,EAAE,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,GAAG,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-thumbnail.js';\nimport { thumbnail as image } from './images.js';\n\nexport default {\n title: 'Thumbnail/Sizes',\n component: 'sp-thumbnail',\n};\n\nconst thumbnail = ({\n size,\n}: {\n size: 's' | 'm' | 'l' | 'xl' | 'xxl';\n}): TemplateResult => {\n return html`\n <sp-thumbnail size=${size}>\n <img src=${image} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const s = (): TemplateResult => thumbnail({ size: 's' });\n\nexport const m = (): TemplateResult => thumbnail({ size: 'm' });\n\nexport const l = (): TemplateResult => thumbnail({ size: 'l' });\n\nexport const XL = (): TemplateResult => thumbnail({ size: 'xl' });\n\nexport const XXL = (): TemplateResult => thumbnail({ size: 'xxl' });\n"]}
1
+ {"version":3,"file":"thumbnail-sizes.stories.js","sourceRoot":"","sources":["thumbnail-sizes.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EACf,IAAI,GAGP,EAAkB,EAAE;IACjB,OAAO,IAAI,CAAA;6BACc,IAAI;uBACV,KAAK;;KAEvB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,EAAE,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,CAAC,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,CAAC,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,CAAC,GAAG,GAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-thumbnail.js';\nimport { thumbnail as image } from './images.js';\n\nexport default {\n title: 'Thumbnail/Sizes',\n component: 'sp-thumbnail',\n};\n\nconst thumbnail = ({\n size,\n}: {\n size: 'xxs' | 'xs' | 's' | 'm' | 'l';\n}): TemplateResult => {\n return html`\n <sp-thumbnail size=${size}>\n <img src=${image} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const XXS = (): TemplateResult => thumbnail({ size: 'xxs' });\n\nexport const XS = (): TemplateResult => thumbnail({ size: 'xs' });\n\nexport const s = (): TemplateResult => thumbnail({ size: 's' });\n\nexport const m = (): TemplateResult => thumbnail({ size: 'm' });\n\nexport const l = (): TemplateResult => thumbnail({ size: 'l' });\n"]}
package/stories/thumbnail.stories.js CHANGED
@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
11
11
  */
12
12
  import { html } from '@spectrum-web-components/base';
13
13
  import '../sp-thumbnail.js';
14
- import { thumbnail, landscape as landscapeImage, portrait as portraitImage, } from './images.js';
14
+ import { landscape as landscapeImage, portrait as portraitImage, thumbnail, } from './images.js';
15
15
  export default {
16
16
  title: 'Thumbnail',
17
17
  component: 'sp-thumbnail',
package/stories/thumbnail.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"thumbnail.stories.js","sourceRoot":"","sources":["thumbnail.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EACH,SAAS,EACT,SAAS,IAAI,cAAc,EAC3B,QAAQ,IAAI,aAAa,GAC5B,MAAM,aAAa,CAAC;AAErB,eAAe;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAmB,EAAE;IACzC,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAmB,EAAE;IACzC,OAAO,IAAI,CAAA;;uBAEQ,aAAa;;KAE/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;sBAGO,cAAc;;;;KAI/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAmB,EAAE;IAC9C,OAAO,IAAI,CAAA;;uBAEQ,aAAa;;KAE/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAmB,EAAE;IAC/C,OAAO,IAAI,CAAA;;;sBAGO,cAAc;;;;KAI/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-thumbnail.js';\nimport {\n thumbnail,\n landscape as landscapeImage,\n portrait as portraitImage,\n} from './images.js';\n\nexport default {\n title: 'Thumbnail',\n component: 'sp-thumbnail',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-thumbnail>\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const selected = (): TemplateResult => {\n return html`\n <sp-thumbnail selected>\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const focused = (): TemplateResult => {\n return html`\n <sp-thumbnail focused>\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const portrait = (): TemplateResult => {\n return html`\n <sp-thumbnail>\n <img src=${portraitImage} alt=\"Eiffel Tower at night\" />\n </sp-thumbnail>\n `;\n};\n\nexport const landscape = (): TemplateResult => {\n return html`\n <sp-thumbnail>\n <img\n src=${landscapeImage}\n alt=\"Landscape with mountains and lake\"\n />\n </sp-thumbnail>\n `;\n};\n\nexport const portraitCover = (): TemplateResult => {\n return html`\n <sp-thumbnail cover>\n <img src=${portraitImage} alt=\"Eiffel Tower at night\" />\n </sp-thumbnail>\n `;\n};\n\nexport const landscapeCover = (): TemplateResult => {\n return html`\n <sp-thumbnail cover>\n <img\n src=${landscapeImage}\n alt=\"Landscape with mountains and lake\"\n />\n </sp-thumbnail>\n `;\n};\n\nexport const background = (): TemplateResult => {\n return html`\n <sp-thumbnail background=\"orange\">\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n"]}
1
+ {"version":3,"file":"thumbnail.stories.js","sourceRoot":"","sources":["thumbnail.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EACH,SAAS,IAAI,cAAc,EAC3B,QAAQ,IAAI,aAAa,EACzB,SAAS,GACZ,MAAM,aAAa,CAAC;AAErB,eAAe;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAmB,EAAE;IACzC,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAmB,EAAE;IACzC,OAAO,IAAI,CAAA;;uBAEQ,aAAa;;KAE/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;sBAGO,cAAc;;;;KAI/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAmB,EAAE;IAC9C,OAAO,IAAI,CAAA;;uBAEQ,aAAa;;KAE/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAmB,EAAE;IAC/C,OAAO,IAAI,CAAA;;;sBAGO,cAAc;;;;KAI/B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;uBAEQ,SAAS;;KAE3B,CAAC;AACN,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-thumbnail.js';\nimport {\n landscape as landscapeImage,\n portrait as portraitImage,\n thumbnail,\n} from './images.js';\n\nexport default {\n title: 'Thumbnail',\n component: 'sp-thumbnail',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-thumbnail>\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const selected = (): TemplateResult => {\n return html`\n <sp-thumbnail selected>\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const focused = (): TemplateResult => {\n return html`\n <sp-thumbnail focused>\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n\nexport const portrait = (): TemplateResult => {\n return html`\n <sp-thumbnail>\n <img src=${portraitImage} alt=\"Eiffel Tower at night\" />\n </sp-thumbnail>\n `;\n};\n\nexport const landscape = (): TemplateResult => {\n return html`\n <sp-thumbnail>\n <img\n src=${landscapeImage}\n alt=\"Landscape with mountains and lake\"\n />\n </sp-thumbnail>\n `;\n};\n\nexport const portraitCover = (): TemplateResult => {\n return html`\n <sp-thumbnail cover>\n <img src=${portraitImage} alt=\"Eiffel Tower at night\" />\n </sp-thumbnail>\n `;\n};\n\nexport const landscapeCover = (): TemplateResult => {\n return html`\n <sp-thumbnail cover>\n <img\n src=${landscapeImage}\n alt=\"Landscape with mountains and lake\"\n />\n </sp-thumbnail>\n `;\n};\n\nexport const background = (): TemplateResult => {\n return html`\n <sp-thumbnail background=\"orange\">\n <img src=${thumbnail} alt=\"Woman crouching\" />\n </sp-thumbnail>\n `;\n};\n"]}