@spectrum-web-components/card 1.0.0 → 1.0.1-color-testing

package/src/spectrum-card.css.js

@@ -1,21 +1,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { css } from '@spectrum-web-components/base';
-const styles = css `
-:host{position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;min-width:var(--spectrum-card-min-width,var(--spectrum-global-dimension-size-3000));border-color:transparent;border-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));text-decoration:none;border:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200));background-color:var(--spectrum-card-background-color,var(--spectrum-global-color-gray-50))}:host(:focus){outline:none}:host(:focus) .actions,:host(:focus) .quickActions,:host(:hover) .actions,:host(:hover) .quickActions,:host([focused]) .actions,:host([focused]) .quickActions,:host([selected]) .actions,:host([selected]) .quickActions{visibility:visible;opacity:1;pointer-events:all}:host([dir=ltr]) .actions{right:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) .actions{left:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125))}.actions{position:absolute;top:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125));height:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));visibility:hidden}:host([dir=ltr]) .quickActions{left:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .quickActions{right:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200))}.quickActions{position:absolute;top:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200));width:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));height:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));visibility:hidden}:host([dir=ltr]) .quickActions .checkbox,:host([dir=rtl]) .quickActions .checkbox{margin:0}#cover-photo{height:var(--spectrum-card-coverphoto-height,var(--spectrum-global-dimension-size-1700));box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-bottom-color:transparent;border-top-left-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0;background-size:cover;background-position:50%;background-color:var(--spectrum-card-coverphoto-background-color,var(--spectrum-global-color-gray-200));border-bottom:var(--spectrum-card-coverphoto-border-bottom-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-card-coverphoto-border-color,var(--spectrum-global-color-gray-200))}:host([dir=ltr]) .body{padding-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));padding-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) .body{padding-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));padding-right:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}.body{padding-top:var(--spectrum-card-body-padding-top,var(--spectrum-global-dimension-size-250));padding-bottom:var(--spectrum-card-body-padding-bottom,var(--spectrum-global-dimension-size-250))}.body:last-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-left-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular))}#preview{overflow:hidden;border-top-left-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0}.header{height:var(--spectrum-card-body-header-height,var(--spectrum-global-dimension-size-225));display:flex;align-items:baseline}.content{display:flex;height:var(--spectrum-card-body-content-height,var(--spectrum-global-dimension-size-175));margin-top:var(--spectrum-card-body-content-margin-top,var(--spectrum-global-dimension-size-75))}:host([dir=ltr]) .title{padding-right:var(--spectrum-card-title-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .title{padding-left:var(--spectrum-card-title-padding-right,var(--spectrum-global-dimension-size-100))}.title{font-size:var(--spectrum-card-title-text-size,var(--spectrum-global-dimension-font-size-100));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) .subtitle{padding-right:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .subtitle{padding-left:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}.subtitle{letter-spacing:var(--spectrum-card-subtitle-letter-spacing,var(--spectrum-global-font-letter-spacing-medium));text-transform:uppercase}.subtitle,::slotted([slot=description]){font-size:var(--spectrum-card-subtitle-text-size,var(--spectrum-global-dimension-font-size-50))}:host([dir=ltr]) .subtitle+::slotted([slot=description]):before{padding-right:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .subtitle+::slotted([slot=description]):before{padding-left:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}.subtitle+::slotted([slot=description]):before{content:"•"}:host([dir=ltr]) ::slotted([slot=footer]){margin-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));margin-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) ::slotted([slot=footer]){margin-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));margin-right:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}::slotted([slot=footer]){padding-top:var(--spectrum-card-footer-padding-top,var(--spectrum-global-dimension-size-175));padding-bottom:var(--spectrum-card-body-padding-bottom,var(--spectrum-global-dimension-size-250));border-top:var(--spectrum-card-footer-border-top-size,var(--spectrum-global-dimension-size-10)) solid;border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}.actionButton{flex:1;align-self:center;display:flex;justify-content:flex-end}:host([variant=quiet]) #preview{min-height:var(--spectrum-card-quiet-min-size,var(--spectrum-global-dimension-size-1700))}:host([variant=gallery]),:host([variant=quiet]){width:100%;height:100%;min-width:var(--spectrum-card-quiet-min-size,var(--spectrum-global-dimension-size-1700));border-width:0;border-radius:0;overflow:visible}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{width:100%;flex:1;padding:var(--spectrum-card-quiet-preview-padding,var(--spectrum-global-dimension-size-250));margin:0 auto;box-sizing:border-box;border-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));position:relative;transition:background-color var(--spectrum-global-animation-duration-100,.13s);overflow:visible}:host([dir=ltr][variant=gallery]) #preview:before,:host([dir=ltr][variant=quiet]) #preview:before{left:0}:host([dir=rtl][variant=gallery]) #preview:before,:host([dir=rtl][variant=quiet]) #preview:before{right:0}:host([variant=gallery]) #preview:before,:host([variant=quiet]) #preview:before{content:"";position:absolute;top:0;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;border:var(--spectrum-card-quiet-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{transition:none}:host([variant=gallery]) .header,:host([variant=quiet]) .header{height:var(--spectrum-card-quiet-body-header-height,var(--spectrum-global-dimension-size-225));margin-top:var(--spectrum-card-quiet-body-header-margin-top,var(--spectrum-global-dimension-size-175))}:host([variant=gallery]) .body,:host([variant=quiet]) .body{padding:0}:host([small]){min-width:var(--spectrum-card-quiet-small-min-size,var(--spectrum-global-dimension-size-900))}:host([dir=ltr][small]) .quickActions{left:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([dir=rtl][small]) .quickActions{right:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([small]) .quickActions{top:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([small]) #preview{padding:var(--spectrum-card-quiet-small-preview-padding,var(--spectrum-global-dimension-size-150));min-height:var(--spectrum-card-quiet-small-min-size,var(--spectrum-global-dimension-size-900))}:host([small]) .header{margin-top:var(--spectrum-card-quiet-small-body-margin-top,var(--spectrum-global-dimension-size-100));height:var(--spectrum-card-quiet-small-body-header-height,var(--spectrum-global-dimension-size-150))}:host([small]) .title{font-size:var(--spectrum-card-quiet-small-title-text-size,var(--spectrum-global-dimension-font-size-100))}:host([horizontal]){flex-direction:row}:host([dir=ltr][horizontal]) #preview{border-top-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-top-right-radius:0;border-bottom-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-right-radius:0;border-right:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([dir=rtl][horizontal]) #preview{border-top-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-top-left-radius:0;border-bottom-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-left-radius:0;border-left:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([horizontal]) #preview{flex-shrink:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:var(--spectrum-global-dimension-size-175);background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}:host([horizontal]) .content,:host([horizontal]) .header{margin-top:0;height:auto}:host([dir=ltr][horizontal]) .title{padding-right:0}:host([dir=rtl][horizontal]) .title{padding-left:0}:host([horizontal]) .body{flex-shrink:0;display:flex;justify-content:center;flex-direction:column;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-global-dimension-size-200);padding-right:var(--spectrum-global-dimension-size-200)}:host([variant=gallery]){min-width:0}:host([variant=gallery]) #preview{padding:0;border-radius:0}:host(:hover){border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}:host(.focus-visible),:host([drop-target]),:host([selected]){border-color:var(--spectrum-card-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-card-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([drop-target]){background-color:var(--spectrum-alias-highlight-selected)}.subtitle,::slotted([slot=description]){color:var(--spectrum-card-description-text-color,var(--spectrum-global-color-gray-700))}:host([variant=gallery]),:host([variant=quiet]){border-color:transparent;background-color:initial}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200))}:host([variant=gallery]:hover),:host([variant=quiet]:hover){border-color:transparent}:host([variant=gallery]:hover) #preview,:host([variant=quiet]:hover) #preview{background-color:var(--spectrum-card-quiet-preview-background-color-hover,var(--spectrum-global-color-gray-300))}:host([variant=gallery].focus-visible),:host([variant=gallery][selected]),:host([variant=quiet].focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery].focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet].focus-visible) #preview,:host([variant=quiet][selected]) #preview{background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200))}:host([variant=gallery].focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet].focus-visible) #preview:before,:host([variant=quiet][selected]) #preview:before{border-color:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500));box-shadow:0 0 0 1px var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery][drop-target]),:host([variant=quiet][drop-target]){border-color:transparent;background-color:initial;box-shadow:none}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{background-color:var(--spectrum-alias-highlight-selected)}:host([variant=gallery][drop-target]) #preview:before,:host([variant=quiet][drop-target]) #preview:before{border-color:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500));box-shadow:0 0 0 1px var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery][drop-target]) .spectrum-Asset-fileBackground,:host([variant=gallery][drop-target]) .spectrum-Asset-folderBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-fileBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-folderBackground{fill:var(--spectrum-alias-highlight-selected)}:host([variant=gallery][drop-target]) .spectrum-Asset-fileOutline,:host([variant=gallery][drop-target]) .spectrum-Asset-folderOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-fileOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-folderOutline{fill:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery]) .title,:host([variant=quiet]) .title{color:var(--spectrum-card-quiet-title-text-color,var(--spectrum-global-color-gray-800))}:host([variant=gallery]) .subtitle,:host([variant=quiet]) .subtitle{color:var(--spectrum-card-quiet-subtitle-text-color,var(--spectrum-global-color-gray-700))}:host([horizontal]:hover) #preview{border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}
-`;
-export default styles;
-//# sourceMappingURL=spectrum-card.css.js.map
+"use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
+    :host{box-sizing:border-box;min-inline-size:var(--mod-card-minimum-width,var(--spectrum-card-minimum-width));border:var(--mod-card-border-width,var(--spectrum-card-border-width))solid transparent;border-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border-color:var(--highcontrast-card-border-color,var(--mod-card-border-color,var(--spectrum-card-border-color)));background-color:var(--highcontrast-card-background-color,var(--mod-card-background-color,var(--spectrum-card-background-color)));flex-direction:column;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative}:host:after,:host:before{content:"";block-size:100%;inline-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}:host:after{border-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border:0 solid #0000;margin-block-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);margin-inline-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);inset-inline-end:0}:host(:focus-visible){outline:none}:host(:focus-visible):after{border-width:var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width));border-color:var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color))}:host(:focus-visible) #cover-photo,:host(:focus-visible) #preview{border-start-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width)));border-start-end-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width)))}:host([selected]){border-color:var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)))}:host([selected]):before{background-color:rgba(var(--mod-card-selected-background-color-rgb,var(--spectrum-card-selected-background-color-rgb)),var(--mod-card-selected-background-opacity,var(--spectrum-card-selected-background-opacity)))}:host([drop-target]){border-color:var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)));box-shadow:0 0 0 1px var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)));background-color:var(--mod-card-background-color,var(--spectrum-card-background-color-quiet))}:host([focused]) .actions,:host([focused]) .checkbox-toggle,:host([selected]) .actions,:host([selected]) .checkbox-toggle,:host(:focus) .actions,:host(:focus) .checkbox-toggle{visibility:visible;opacity:1;pointer-events:all}.checkbox-toggle{visibility:hidden;box-shadow:var(--mod-card-actions-drop-shadow-x,var(--spectrum-card-actions-drop-shadow-x))var(--mod-card-actions-drop-shadow-y,var(--spectrum-card-actions-drop-shadow-y))var(--mod-card-actions-drop-shadow-blur,var(--spectrum-card-actions-drop-shadow-blur))var(--mod-card-actions-drop-shadow-color,var(--spectrum-card-actions-drop-shadow-color));inline-size:var(--mod-card-actions-size,var(--spectrum-card-actions-size));block-size:var(--mod-card-actions-size,var(--spectrum-card-actions-size));border-radius:var(--mod-card-actions-border-radius,var(--spectrum-card-actions-border-radius));background-color:rgba(var(--mod-card-actions-background-color-rgb,var(--spectrum-card-actions-background-color-rgb)),var(--mod-card-actions-background-color-opacity,var(--spectrum-card-actions-background-color-opacity)));pointer-events:auto;box-sizing:border-box;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,opacity var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,visibility 0s linear var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:calc(var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));inset-inline-start:calc(var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width)))}.actions{inset-block-start:var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing));inset-inline-end:var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing))}#cover-photo{block-size:var(--mod-card-preview-minimum-height,var(--spectrum-card-preview-minimum-height));box-sizing:border-box;background-position:50%;background-size:cover;background-color:var(--mod-card-preview-background-color,var(--spectrum-card-preview-background-color));border-block-end-color:var(--mod-card-border-color,var(--spectrum-card-border-color));border-start-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));border-start-end-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));border-end-end-radius:0;border-end-start-radius:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.spectrum-Divider{margin:0}.content{align-items:center;margin-block-start:var(--mod-card-content-margin-top,var(--spectrum-card-content-margin-top));display:flex}.body{padding-block-start:var(--mod-card-body-padding-block-start,var(--mod-card-title-padding-top,var(--spectrum-card-title-padding-top)));padding-block-end:var(--mod-card-body-padding-block-end,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))));padding-inline-start:var(--mod-card-body-padding-inline-start,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))));padding-inline-end:var(--mod-card-body-padding-inline-end,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))))}#preview{color:var(--highcontrast-card-body-font-color,var(--mod-card-body-font-color,var(--spectrum-card-body-font-color)));border-start-start-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border-start-end-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border-end-end-radius:0;border-end-start-radius:0;align-items:center;display:flex;overflow:hidden}.title{font-family:var(--mod-card-title-font-family,var(--spectrum-card-title-font-family));font-size:var(--mod-card-title-font-size,var(--spectrum-card-title-font-size));font-weight:var(--mod-card-title-font-weight,var(--spectrum-card-title-font-weight));font-style:var(--mod-card-title-font-style,var(--spectrum-card-title-font-style));line-height:var(--mod-card-title-line-height,var(--spectrum-card-title-line-height));padding-inline-end:var(--mod-card-title-padding-right,var(--spectrum-card-title-padding-right))}.subtitle,.title{color:var(--highcontrast-card-title-font-color,var(--mod-card-title-font-color,var(--spectrum-card-title-font-color)))}.subtitle{text-transform:none}.subtitle,.subtitle+::slotted([slot=description]):before{padding-inline-end:var(--mod-card-subtitle-padding-right,var(--spectrum-card-subtitle-padding-right))}.subtitle+::slotted([slot=description]):before{content:"•"}::slotted([slot=description]){font-family:var(--mod-card-body-font-family,var(--spectrum-card-body-font-family));font-size:var(--mod-card-body-font-size,var(--spectrum-card-body-font-size));font-weight:var(--mod-card-body-font-weight,var(--spectrum-card-body-font-weight));font-style:var(--mod-card-body-font-style,var(--spectrum-card-body-font-style))}::slotted([slot=description]),::slotted([slot=footer]){line-height:var(--mod-card-body-line-height,var(--spectrum-card-body-line-height));color:var(--highcontrast-card-body-font-color,var(--mod-card-body-font-color,var(--spectrum-card-body-font-color)))}::slotted([slot=footer]){border-block-start:var(--mod-card-border-width,var(--spectrum-card-border-width))solid var(--mod-card-divider-color,var(--spectrum-card-divider-color));margin-block-start:var(--mod-card-footer-margin-block-start,calc(( var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-content-margin-bottom,var(--spectrum-card-content-margin-bottom)))*-1));margin-inline-start:var(--mod-card-footer-margin-inline-start,var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)));margin-inline-end:var(--mod-card-footer-margin-inline-end,var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)));padding-block-start:var(--mod-card-footer-padding-block-start,var(--mod-card-footer-margin-top,var(--spectrum-card-footer-padding-top)));padding-block-end:var(--mod-card-footer-padding-block-end,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))))}.header{justify-content:space-between;align-items:center;display:flex}.action-button{z-index:1;justify-content:flex-end;align-self:center;display:flex}:host([variant=quiet]) #preview{border:var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))solid transparent}:host([variant=quiet][focused]):after,:host([variant=quiet]:focus):after{border-width:0}:host([variant=quiet][focused]) #preview:after,:host([variant=quiet]:focus) #preview:after{border-color:var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color))}:host([variant=quiet][selected]) #preview{border:var(--mod-card-preview-border-width-selected,var(--mod-card-preview-border-width,var(--spectrum-card-preview-border-width-selected)))solid;border-color:var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)))}:host([variant=gallery]),:host([variant=quiet]){--spectrum-card-content-margin-top:var(--mod-card-content-margin-top-quiet,var(--spectrum-card-content-margin-top-quiet));--spectrum-card-minimum-width:var(--mod-card-minimum-width-quiet,var(--spectrum-card-minimum-width-quiet));block-size:100%;min-inline-size:var(--mod-card-minimum-width,var(--spectrum-card-minimum-width));background-color:initial;border-width:0;border-color:#0000;border-radius:0;overflow:visible}:host([variant=gallery]):before,:host([variant=quiet]):before{display:none}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{border-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));background-color:var(--mod-card-preview-background-color,var(--mod-card-background-color,var(--spectrum-card-preview-background-color)));min-block-size:var(--mod-card-preview-minimum-height,var(--spectrum-card-preview-minimum-height));inline-size:100%;box-sizing:border-box;transition:background-color var(--mod-card-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)));flex:1;margin:0 auto;position:relative;overflow:visible}:host([variant=gallery]) #preview:after,:host([variant=gallery]) #preview:before,:host([variant=quiet]) #preview:after,:host([variant=quiet]) #preview:before{content:"";block-size:100%;inline-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}:host([variant=gallery]) #preview:after,:host([variant=quiet]) #preview:after{border-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) + var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width)));border:0 solid #0000;margin-block-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);margin-inline-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);inset-inline-end:0}:host([variant=gallery][drop-target]),:host([variant=quiet][drop-target]){background-color:initial;box-shadow:none;border-color:#0000}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{background-color:var(--mod-card-preview-background-color,var(--mod-card-background-color,var(--spectrum-card-preview-background-color)));transition:none}:host([variant=gallery][drop-target]) #preview:before,:host([variant=quiet][drop-target]) #preview:before{border-color:var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color));box-shadow:0 0 0 1px var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color))}:host([variant=gallery][selected]) #preview:before,:host([variant=quiet][selected]) #preview:before{background-color:rgba(var(--mod-card-selected-background-color-rgb,var(--spectrum-card-selected-background-color-rgb)),var(--mod-card-selected-background-opacity,var(--spectrum-card-selected-background-opacity)))}:host([variant=gallery]) .body,:host([variant=quiet]) .body{margin-block-start:var(--mod-card-content-margin-top,var(--spectrum-card-content-margin-top));padding:0}:host([variant=gallery]) ::slotted([slot=footer]),:host([variant=quiet]) ::slotted([slot=footer]){margin-inline:0}:host([horizontal]){flex-direction:row}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-card-border-color-hover,var(--mod-card-border-color-hover,var(--spectrum-card-border-color-hover)))}:host(:hover) .actions,:host(:hover) .checkbox-toggle{visibility:visible;opacity:1;pointer-events:all}:host([variant=gallery]:hover),:host([variant=quiet]:hover){border-color:#0000}:host([variant=gallery]:hover) #preview,:host([variant=quiet]:hover) #preview{background-color:var(--mod-card-preview-background-color-hover,var(--mod-card-background-color-hover,var(--spectrum-card-preview-background-color-hover)))}:host([horizontal]:hover) #preview{border-color:var(--mod-card-border-color-hover,var(--spectrum-card-border-color-hover))}}:host([horizontal]) #preview{min-block-size:0;padding:var(--mod-card-horizontal-preview-padding,var(--spectrum-card-horizontal-preview-padding));background-color:var(--mod-card-preview-background-color,var(--spectrum-card-preview-background-color));border-color:var(--mod-card-border-color,var(--spectrum-card-border-color));border-start-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([horizontal]) .content,:host([horizontal]) .header{block-size:auto;margin-block-start:0}:host([horizontal]) .content{margin-block-end:0}:host([horizontal]) .title{padding-inline-end:0}:host([horizontal]) .body{padding-block:0;padding-inline:var(--mod-card-horizontal-body-padding,var(--spectrum-card-horizontal-body-padding));flex-direction:column;flex-shrink:0;justify-content:center;display:flex}:host([variant=gallery]){min-inline-size:0}:host([variant=gallery]) #preview{border-radius:0;padding:0}
+`;export default o;
+//# sourceMappingURL=spectrum-card.css.js.map

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

@@ -1 +1,7 @@
-{"version":3,"file":"spectrum-card.css.js","sourceRoot":"","sources":["spectrum-card.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;CAMjB,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{position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;min-width:var(--spectrum-card-min-width,var(--spectrum-global-dimension-size-3000));border-color:transparent;border-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));text-decoration:none;border:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200));background-color:var(--spectrum-card-background-color,var(--spectrum-global-color-gray-50))}:host(:focus){outline:none}:host(:focus) .actions,:host(:focus) .quickActions,:host(:hover) .actions,:host(:hover) .quickActions,:host([focused]) .actions,:host([focused]) .quickActions,:host([selected]) .actions,:host([selected]) .quickActions{visibility:visible;opacity:1;pointer-events:all}:host([dir=ltr]) .actions{right:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) .actions{left:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125))}.actions{position:absolute;top:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125));height:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));visibility:hidden}:host([dir=ltr]) .quickActions{left:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .quickActions{right:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200))}.quickActions{position:absolute;top:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200));width:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));height:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));visibility:hidden}:host([dir=ltr]) .quickActions .checkbox,:host([dir=rtl]) .quickActions .checkbox{margin:0}#cover-photo{height:var(--spectrum-card-coverphoto-height,var(--spectrum-global-dimension-size-1700));box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-bottom-color:transparent;border-top-left-radius:calc(var(--spectrum-card-border-radius,\nvar(--spectrum-alias-border-radius-regular)) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius,\nvar(--spectrum-alias-border-radius-regular)) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0;background-size:cover;background-position:50%;background-color:var(--spectrum-card-coverphoto-background-color,var(--spectrum-global-color-gray-200));border-bottom:var(--spectrum-card-coverphoto-border-bottom-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-card-coverphoto-border-color,var(--spectrum-global-color-gray-200))}:host([dir=ltr]) .body{padding-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));padding-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) .body{padding-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));padding-right:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}.body{padding-top:var(--spectrum-card-body-padding-top,var(--spectrum-global-dimension-size-250));padding-bottom:var(--spectrum-card-body-padding-bottom,var(--spectrum-global-dimension-size-250))}.body:last-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-left-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular))}#preview{overflow:hidden;border-top-left-radius:calc(var(--spectrum-card-border-radius,\nvar(--spectrum-alias-border-radius-regular)) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius,\nvar(--spectrum-alias-border-radius-regular)) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0}.header{height:var(--spectrum-card-body-header-height,var(--spectrum-global-dimension-size-225));display:flex;align-items:baseline}.content{display:flex;height:var(--spectrum-card-body-content-height,var(--spectrum-global-dimension-size-175));margin-top:var(--spectrum-card-body-content-margin-top,var(--spectrum-global-dimension-size-75))}:host([dir=ltr]) .title{padding-right:var(--spectrum-card-title-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .title{padding-left:var(--spectrum-card-title-padding-right,var(--spectrum-global-dimension-size-100))}.title{font-size:var(--spectrum-card-title-text-size,var(--spectrum-global-dimension-font-size-100));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) .subtitle{padding-right:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .subtitle{padding-left:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}.subtitle{letter-spacing:var(--spectrum-card-subtitle-letter-spacing,var(--spectrum-global-font-letter-spacing-medium));text-transform:uppercase}.subtitle,::slotted([slot=description]){font-size:var(--spectrum-card-subtitle-text-size,var(--spectrum-global-dimension-font-size-50))}:host([dir=ltr]) .subtitle+::slotted([slot=description]):before{padding-right:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .subtitle+::slotted([slot=description]):before{padding-left:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}.subtitle+::slotted([slot=description]):before{content:\"•\"}:host([dir=ltr]) ::slotted([slot=footer]){margin-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));margin-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) ::slotted([slot=footer]){margin-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));margin-right:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}::slotted([slot=footer]){padding-top:var(--spectrum-card-footer-padding-top,var(--spectrum-global-dimension-size-175));padding-bottom:var(--spectrum-card-body-padding-bottom,var(--spectrum-global-dimension-size-250));border-top:var(--spectrum-card-footer-border-top-size,var(--spectrum-global-dimension-size-10)) solid;border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}.actionButton{flex:1;align-self:center;display:flex;justify-content:flex-end}:host([variant=quiet]) #preview{min-height:var(--spectrum-card-quiet-min-size,var(--spectrum-global-dimension-size-1700))}:host([variant=gallery]),:host([variant=quiet]){width:100%;height:100%;min-width:var(--spectrum-card-quiet-min-size,var(--spectrum-global-dimension-size-1700));border-width:0;border-radius:0;overflow:visible}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{width:100%;flex:1;padding:var(--spectrum-card-quiet-preview-padding,var(--spectrum-global-dimension-size-250));margin:0 auto;box-sizing:border-box;border-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));position:relative;transition:background-color var(--spectrum-global-animation-duration-100,.13s);overflow:visible}:host([dir=ltr][variant=gallery]) #preview:before,:host([dir=ltr][variant=quiet]) #preview:before{left:0}:host([dir=rtl][variant=gallery]) #preview:before,:host([dir=rtl][variant=quiet]) #preview:before{right:0}:host([variant=gallery]) #preview:before,:host([variant=quiet]) #preview:before{content:\"\";position:absolute;top:0;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;border:var(--spectrum-card-quiet-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{transition:none}:host([variant=gallery]) .header,:host([variant=quiet]) .header{height:var(--spectrum-card-quiet-body-header-height,var(--spectrum-global-dimension-size-225));margin-top:var(--spectrum-card-quiet-body-header-margin-top,var(--spectrum-global-dimension-size-175))}:host([variant=gallery]) .body,:host([variant=quiet]) .body{padding:0}:host([small]){min-width:var(--spectrum-card-quiet-small-min-size,var(--spectrum-global-dimension-size-900))}:host([dir=ltr][small]) .quickActions{left:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([dir=rtl][small]) .quickActions{right:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([small]) .quickActions{top:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([small]) #preview{padding:var(--spectrum-card-quiet-small-preview-padding,var(--spectrum-global-dimension-size-150));min-height:var(--spectrum-card-quiet-small-min-size,var(--spectrum-global-dimension-size-900))}:host([small]) .header{margin-top:var(--spectrum-card-quiet-small-body-margin-top,var(--spectrum-global-dimension-size-100));height:var(--spectrum-card-quiet-small-body-header-height,var(--spectrum-global-dimension-size-150))}:host([small]) .title{font-size:var(--spectrum-card-quiet-small-title-text-size,var(--spectrum-global-dimension-font-size-100))}:host([horizontal]){flex-direction:row}:host([dir=ltr][horizontal]) #preview{border-top-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-top-right-radius:0;border-bottom-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-right-radius:0;border-right:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([dir=rtl][horizontal]) #preview{border-top-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-top-left-radius:0;border-bottom-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-left-radius:0;border-left:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([horizontal]) #preview{flex-shrink:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:var(--spectrum-global-dimension-size-175);background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}:host([horizontal]) .content,:host([horizontal]) .header{margin-top:0;height:auto}:host([dir=ltr][horizontal]) .title{padding-right:0}:host([dir=rtl][horizontal]) .title{padding-left:0}:host([horizontal]) .body{flex-shrink:0;display:flex;justify-content:center;flex-direction:column;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-global-dimension-size-200);padding-right:var(--spectrum-global-dimension-size-200)}:host([variant=gallery]){min-width:0}:host([variant=gallery]) #preview{padding:0;border-radius:0}:host(:hover){border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}:host(.focus-visible),:host([drop-target]),:host([selected]){border-color:var(--spectrum-card-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-card-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([drop-target]){background-color:var(--spectrum-alias-highlight-selected)}.subtitle,::slotted([slot=description]){color:var(--spectrum-card-description-text-color,var(--spectrum-global-color-gray-700))}:host([variant=gallery]),:host([variant=quiet]){border-color:transparent;background-color:initial}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200))}:host([variant=gallery]:hover),:host([variant=quiet]:hover){border-color:transparent}:host([variant=gallery]:hover) #preview,:host([variant=quiet]:hover) #preview{background-color:var(--spectrum-card-quiet-preview-background-color-hover,var(--spectrum-global-color-gray-300))}:host([variant=gallery].focus-visible),:host([variant=gallery][selected]),:host([variant=quiet].focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery].focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet].focus-visible) #preview,:host([variant=quiet][selected]) #preview{background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200))}:host([variant=gallery].focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet].focus-visible) #preview:before,:host([variant=quiet][selected]) #preview:before{border-color:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500));box-shadow:0 0 0 1px var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery][drop-target]),:host([variant=quiet][drop-target]){border-color:transparent;background-color:initial;box-shadow:none}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{background-color:var(--spectrum-alias-highlight-selected)}:host([variant=gallery][drop-target]) #preview:before,:host([variant=quiet][drop-target]) #preview:before{border-color:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500));box-shadow:0 0 0 1px var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery][drop-target]) .spectrum-Asset-fileBackground,:host([variant=gallery][drop-target]) .spectrum-Asset-folderBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-fileBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-folderBackground{fill:var(--spectrum-alias-highlight-selected)}:host([variant=gallery][drop-target]) .spectrum-Asset-fileOutline,:host([variant=gallery][drop-target]) .spectrum-Asset-folderOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-fileOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-folderOutline{fill:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery]) .title,:host([variant=quiet]) .title{color:var(--spectrum-card-quiet-title-text-color,var(--spectrum-global-color-gray-800))}:host([variant=gallery]) .subtitle,:host([variant=quiet]) .subtitle{color:var(--spectrum-card-quiet-subtitle-text-color,var(--spectrum-global-color-gray-700))}:host([horizontal]:hover) #preview{border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}\n`;\nexport default styles;"]}
+{
+  "version": 3,
+  "sources": ["spectrum-card.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{box-sizing:border-box;min-inline-size:var(--mod-card-minimum-width,var(--spectrum-card-minimum-width));border:var(--mod-card-border-width,var(--spectrum-card-border-width))solid transparent;border-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border-color:var(--highcontrast-card-border-color,var(--mod-card-border-color,var(--spectrum-card-border-color)));background-color:var(--highcontrast-card-background-color,var(--mod-card-background-color,var(--spectrum-card-background-color)));flex-direction:column;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative}:host:after,:host:before{content:\"\";block-size:100%;inline-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}:host:after{border-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border:0 solid #0000;margin-block-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);margin-inline-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);inset-inline-end:0}:host(:focus-visible){outline:none}:host(:focus-visible):after{border-width:var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width));border-color:var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color))}:host(:focus-visible) #cover-photo,:host(:focus-visible) #preview{border-start-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width)));border-start-end-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width)))}:host([selected]){border-color:var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)))}:host([selected]):before{background-color:rgba(var(--mod-card-selected-background-color-rgb,var(--spectrum-card-selected-background-color-rgb)),var(--mod-card-selected-background-opacity,var(--spectrum-card-selected-background-opacity)))}:host([drop-target]){border-color:var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)));box-shadow:0 0 0 1px var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)));background-color:var(--mod-card-background-color,var(--spectrum-card-background-color-quiet))}:host([focused]) .actions,:host([focused]) .checkbox-toggle,:host([selected]) .actions,:host([selected]) .checkbox-toggle,:host(:focus) .actions,:host(:focus) .checkbox-toggle{visibility:visible;opacity:1;pointer-events:all}.checkbox-toggle{visibility:hidden;box-shadow:var(--mod-card-actions-drop-shadow-x,var(--spectrum-card-actions-drop-shadow-x))var(--mod-card-actions-drop-shadow-y,var(--spectrum-card-actions-drop-shadow-y))var(--mod-card-actions-drop-shadow-blur,var(--spectrum-card-actions-drop-shadow-blur))var(--mod-card-actions-drop-shadow-color,var(--spectrum-card-actions-drop-shadow-color));inline-size:var(--mod-card-actions-size,var(--spectrum-card-actions-size));block-size:var(--mod-card-actions-size,var(--spectrum-card-actions-size));border-radius:var(--mod-card-actions-border-radius,var(--spectrum-card-actions-border-radius));background-color:rgba(var(--mod-card-actions-background-color-rgb,var(--spectrum-card-actions-background-color-rgb)),var(--mod-card-actions-background-color-opacity,var(--spectrum-card-actions-background-color-opacity)));pointer-events:auto;box-sizing:border-box;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,opacity var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,visibility 0s linear var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:calc(var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));inset-inline-start:calc(var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width)))}.actions{inset-block-start:var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing));inset-inline-end:var(--mod-card-actions-spacing,var(--spectrum-card-actions-spacing))}#cover-photo{block-size:var(--mod-card-preview-minimum-height,var(--spectrum-card-preview-minimum-height));box-sizing:border-box;background-position:50%;background-size:cover;background-color:var(--mod-card-preview-background-color,var(--spectrum-card-preview-background-color));border-block-end-color:var(--mod-card-border-color,var(--spectrum-card-border-color));border-start-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));border-start-end-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));border-end-end-radius:0;border-end-start-radius:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.spectrum-Divider{margin:0}.content{align-items:center;margin-block-start:var(--mod-card-content-margin-top,var(--spectrum-card-content-margin-top));display:flex}.body{padding-block-start:var(--mod-card-body-padding-block-start,var(--mod-card-title-padding-top,var(--spectrum-card-title-padding-top)));padding-block-end:var(--mod-card-body-padding-block-end,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))));padding-inline-start:var(--mod-card-body-padding-inline-start,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))));padding-inline-end:var(--mod-card-body-padding-inline-end,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))))}#preview{color:var(--highcontrast-card-body-font-color,var(--mod-card-body-font-color,var(--spectrum-card-body-font-color)));border-start-start-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border-start-end-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));border-end-end-radius:0;border-end-start-radius:0;align-items:center;display:flex;overflow:hidden}.title{font-family:var(--mod-card-title-font-family,var(--spectrum-card-title-font-family));font-size:var(--mod-card-title-font-size,var(--spectrum-card-title-font-size));font-weight:var(--mod-card-title-font-weight,var(--spectrum-card-title-font-weight));font-style:var(--mod-card-title-font-style,var(--spectrum-card-title-font-style));line-height:var(--mod-card-title-line-height,var(--spectrum-card-title-line-height));padding-inline-end:var(--mod-card-title-padding-right,var(--spectrum-card-title-padding-right))}.subtitle,.title{color:var(--highcontrast-card-title-font-color,var(--mod-card-title-font-color,var(--spectrum-card-title-font-color)))}.subtitle{text-transform:none}.subtitle,.subtitle+::slotted([slot=description]):before{padding-inline-end:var(--mod-card-subtitle-padding-right,var(--spectrum-card-subtitle-padding-right))}.subtitle+::slotted([slot=description]):before{content:\"\u2022\"}::slotted([slot=description]){font-family:var(--mod-card-body-font-family,var(--spectrum-card-body-font-family));font-size:var(--mod-card-body-font-size,var(--spectrum-card-body-font-size));font-weight:var(--mod-card-body-font-weight,var(--spectrum-card-body-font-weight));font-style:var(--mod-card-body-font-style,var(--spectrum-card-body-font-style))}::slotted([slot=description]),::slotted([slot=footer]){line-height:var(--mod-card-body-line-height,var(--spectrum-card-body-line-height));color:var(--highcontrast-card-body-font-color,var(--mod-card-body-font-color,var(--spectrum-card-body-font-color)))}::slotted([slot=footer]){border-block-start:var(--mod-card-border-width,var(--spectrum-card-border-width))solid var(--mod-card-divider-color,var(--spectrum-card-divider-color));margin-block-start:var(--mod-card-footer-margin-block-start,calc(( var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-content-margin-bottom,var(--spectrum-card-content-margin-bottom)))*-1));margin-inline-start:var(--mod-card-footer-margin-inline-start,var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)));margin-inline-end:var(--mod-card-footer-margin-inline-end,var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)));padding-block-start:var(--mod-card-footer-padding-block-start,var(--mod-card-footer-margin-top,var(--spectrum-card-footer-padding-top)));padding-block-end:var(--mod-card-footer-padding-block-end,calc(var(--mod-card-body-spacing,var(--spectrum-card-body-spacing)) - var(--mod-card-border-width,var(--spectrum-card-border-width))))}.header{justify-content:space-between;align-items:center;display:flex}.action-button{z-index:1;justify-content:flex-end;align-self:center;display:flex}:host([variant=quiet]) #preview{border:var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))solid transparent}:host([variant=quiet][focused]):after,:host([variant=quiet]:focus):after{border-width:0}:host([variant=quiet][focused]) #preview:after,:host([variant=quiet]:focus) #preview:after{border-color:var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color))}:host([variant=quiet][selected]) #preview{border:var(--mod-card-preview-border-width-selected,var(--mod-card-preview-border-width,var(--spectrum-card-preview-border-width-selected)))solid;border-color:var(--highcontrast-card-border-color-selected,var(--mod-card-border-color-selected,var(--spectrum-card-border-color-selected)))}:host([variant=gallery]),:host([variant=quiet]){--spectrum-card-content-margin-top:var(--mod-card-content-margin-top-quiet,var(--spectrum-card-content-margin-top-quiet));--spectrum-card-minimum-width:var(--mod-card-minimum-width-quiet,var(--spectrum-card-minimum-width-quiet));block-size:100%;min-inline-size:var(--mod-card-minimum-width,var(--spectrum-card-minimum-width));background-color:initial;border-width:0;border-color:#0000;border-radius:0;overflow:visible}:host([variant=gallery]):before,:host([variant=quiet]):before{display:none}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{border-radius:var(--mod-card-corner-radius,var(--spectrum-card-corner-radius));background-color:var(--mod-card-preview-background-color,var(--mod-card-background-color,var(--spectrum-card-preview-background-color)));min-block-size:var(--mod-card-preview-minimum-height,var(--spectrum-card-preview-minimum-height));inline-size:100%;box-sizing:border-box;transition:background-color var(--mod-card-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)));flex:1;margin:0 auto;position:relative;overflow:visible}:host([variant=gallery]) #preview:after,:host([variant=gallery]) #preview:before,:host([variant=quiet]) #preview:after,:host([variant=quiet]) #preview:before{content:\"\";block-size:100%;inline-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}:host([variant=gallery]) #preview:after,:host([variant=quiet]) #preview:after{border-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) + var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width)));border:0 solid #0000;margin-block-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);margin-inline-start:calc(var(--mod-card-focus-indicator-width,var(--spectrum-card-focus-indicator-width))*-1);inset-inline-end:0}:host([variant=gallery][drop-target]),:host([variant=quiet][drop-target]){background-color:initial;box-shadow:none;border-color:#0000}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{background-color:var(--mod-card-preview-background-color,var(--mod-card-background-color,var(--spectrum-card-preview-background-color)));transition:none}:host([variant=gallery][drop-target]) #preview:before,:host([variant=quiet][drop-target]) #preview:before{border-color:var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color));box-shadow:0 0 0 1px var(--mod-card-focus-indicator-color,var(--spectrum-card-focus-indicator-color))}:host([variant=gallery][selected]) #preview:before,:host([variant=quiet][selected]) #preview:before{background-color:rgba(var(--mod-card-selected-background-color-rgb,var(--spectrum-card-selected-background-color-rgb)),var(--mod-card-selected-background-opacity,var(--spectrum-card-selected-background-opacity)))}:host([variant=gallery]) .body,:host([variant=quiet]) .body{margin-block-start:var(--mod-card-content-margin-top,var(--spectrum-card-content-margin-top));padding:0}:host([variant=gallery]) ::slotted([slot=footer]),:host([variant=quiet]) ::slotted([slot=footer]){margin-inline:0}:host([horizontal]){flex-direction:row}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-card-border-color-hover,var(--mod-card-border-color-hover,var(--spectrum-card-border-color-hover)))}:host(:hover) .actions,:host(:hover) .checkbox-toggle{visibility:visible;opacity:1;pointer-events:all}:host([variant=gallery]:hover),:host([variant=quiet]:hover){border-color:#0000}:host([variant=gallery]:hover) #preview,:host([variant=quiet]:hover) #preview{background-color:var(--mod-card-preview-background-color-hover,var(--mod-card-background-color-hover,var(--spectrum-card-preview-background-color-hover)))}:host([horizontal]:hover) #preview{border-color:var(--mod-card-border-color-hover,var(--spectrum-card-border-color-hover))}}:host([horizontal]) #preview{min-block-size:0;padding:var(--mod-card-horizontal-preview-padding,var(--spectrum-card-horizontal-preview-padding));background-color:var(--mod-card-preview-background-color,var(--spectrum-card-preview-background-color));border-color:var(--mod-card-border-color,var(--spectrum-card-border-color));border-start-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:calc(var(--mod-card-corner-radius,var(--spectrum-card-corner-radius)) - var(--mod-card-border-width,var(--spectrum-card-border-width)));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([horizontal]) .content,:host([horizontal]) .header{block-size:auto;margin-block-start:0}:host([horizontal]) .content{margin-block-end:0}:host([horizontal]) .title{padding-inline-end:0}:host([horizontal]) .body{padding-block:0;padding-inline:var(--mod-card-horizontal-body-padding,var(--spectrum-card-horizontal-body-padding));flex-direction:column;flex-shrink:0;justify-content:center;display:flex}:host([variant=gallery]){min-inline-size:0}:host([variant=gallery]) #preview{border-radius:0;padding:0}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/spectrum-config.js

@@ -1,5 +1,6 @@
+// @ts-check
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the 'License');
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,104 +11,61 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+
+const converter = converterFor('spectrum-Card');
+
+/**
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
+ */
 const config = {
-    spectrum: 'card',
-    components: [
+    conversions: [
         {
-            name: 'card',
-            host: '.spectrum-Card',
-            classes: [
-                {
-                    selector: '.spectrum-Card-body',
-                    name: 'body',
-                },
-                {
-                    selector: '.spectrum-Card-header',
-                    name: 'header',
-                },
-                {
-                    selector: '.spectrum-Card-title',
-                    name: 'title',
-                },
-                {
-                    selector: '.spectrum-Card-subtitle',
-                    name: 'subtitle',
-                },
-                {
-                    selector: '.spectrum-Card-content',
-                    name: 'content',
-                },
-                {
-                    selector: '.spectrum-Card-quickActions',
-                    name: 'quickActions',
-                },
-                {
-                    selector: '.spectrum-Card-actions',
-                    name: 'actions',
-                },
-                {
-                    selector: '.spectrum-Card-actionButton',
-                    name: 'actionButton',
-                },
-                {
-                    selector: '.spectrum-Checkbox',
-                    name: 'checkbox',
-                },
-            ],
-            attributes: [
-                {
-                    type: 'enum',
-                    name: 'variant',
-                    values: [
-                        '.spectrum-Card--quiet',
-                        '.spectrum-Card--gallery',
+            inPackage: '@spectrum-css/card',
+            outPackage: 'card',
+            fileName: 'card',
+            components: [
+                converter.classToHost(),
+                converter.classToClass('spectrum-Card-body'),
+                converter.classToClass('spectrum-Card-header'),
+                converter.classToClass('spectrum-Card-title'),
+                converter.classToClass('spectrum-Card-subtitle'),
+                converter.classToClass('spectrum-Card-content'),
+                converter.classToClass(
+                    'spectrum-Card-quickActions',
+                    'checkbox-toggle'
+                ),
+                converter.classToClass('spectrum-Card-actions'),
+                converter.classToClass(
+                    'spectrum-Card-actionButton',
+                    'action-button'
+                ),
+                converter.classToClass('spectrum-Checkbox', 'checkbox'),
+                ...converter.enumerateAttributes(
+                    [['spectrum-Card--quiet'], ['spectrum-Card--gallery']],
+                    'variant'
+                ),
+                converter.classToAttribute('is-focused', 'focused'),
+                converter.classToAttribute('is-selected', 'selected'),
+                converter.classToAttribute('is-drop-target', 'drop-target'),
+                // Default to `size='m'` without needing the attribute
+                converter.classToHost('spectrum-Card--sizeM'),
+                ...converter.enumerateAttributes(
+                    [
+                        ['spectrum-Card--sizeS', 's'],
+                        ['spectrum-Card--sizeL', 'l'],
+                        ['spectrum-Card--sizeXL', 'xl'],
                     ],
-                },
-                {
-                    type: 'boolean',
-                    name: 'focused',
-                    selector: '.is-focused',
-                },
-                {
-                    type: 'boolean',
-                    name: 'selected',
-                    selector: '.is-selected',
-                },
-                {
-                    type: 'boolean',
-                    name: 'drop-target',
-                    selector: '.is-drop-target',
-                },
-                {
-                    type: 'boolean',
-                    name: 'small',
-                    selector: '.spectrum-Card--small',
-                },
-                {
-                    type: 'boolean',
-                    name: 'horizontal',
-                    selector: '.spectrum-Card--horizontal',
-                },
-            ],
-            ids: [
-                {
-                    name: 'cover-photo',
-                    selector: '.spectrum-Card-coverPhoto',
-                },
-                {
-                    selector: '.spectrum-Card-preview',
-                    name: 'preview',
-                },
-            ],
-            slots: [
-                {
-                    name: 'footer',
-                    selector: '.spectrum-Card-footer',
-                },
-                {
-                    name: 'description',
-                    selector: '.spectrum-Card-description',
-                },
+                    'size'
+                ),
+                converter.classToAttribute('spectrum-Card--horizontal'),
+                converter.classToId('spectrum-Card-coverPhoto', 'cover-photo'),
+                converter.classToId('spectrum-Card-preview'),
+                converter.classToSlotted('spectrum-Card-footer', 'footer'),
+                converter.classToSlotted(
+                    'spectrum-Card-description',
+                    'description'
+                ),
             ],
         },
     ],