@spectrum-web-components/card 1.0.0 → 1.0.1

package/src/Card.js

@@ -1,220 +1,74 @@
-/*
-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 { __decorate } from "tslib";
-import { html, SpectrumElement, property, ifDefined, } from '@spectrum-web-components/base';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-import '@spectrum-web-components/asset/sp-asset.js';
-// import { MoreIcon } from '@spectrum-web-components/icons-workflow';
-import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
-import cardStyles from './card.css.js';
-/**
- * @element sp-card
- *
- * @fires change - Announces a change in the `selected` property of a card
- * @slot preview - This is the preview image for Gallery Cards
- * @slot cover-photo - This is the cover photo for Default and Quiet Cards
- * @slot heading - HTML content to be listed as the heading
- * @slot subheading - HTML content to be listed as the subheading
- * @slot description - A description of the card
- * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object
- * @slot footer - Footer text
- */
-export class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {
-    constructor() {
-        super();
-        this.variant = 'standard';
-        this.selected = false;
-        this.heading = '';
-        this.horizontal = false;
-        this.small = false;
-        this.focused = false;
-        this.toggles = false;
-        this.subheading = '';
-        this.handleFocusin = (event) => {
-            this.focused = true;
-            const target = event.composedPath()[0];
-            if (target !== this) {
-                this.removeEventListener('keydown', this.handleKeydown);
-                return;
-            }
-            this.addEventListener('keydown', this.handleKeydown);
-        };
-        this.addEventListener('focusin', this.handleFocusin);
-        this.shadowRoot.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
-    }
-    static get styles() {
-        return [cardStyles];
-    }
-    handleFocusout(event) {
-        this.focused = false;
-        const target = event.composedPath()[0];
-        if (target === this) {
-            this.removeEventListener('keydown', this.handleKeydown);
-        }
-    }
-    handleKeydown(event) {
-        const { code } = event;
-        /* istanbul ignore else */
-        if (code === 'Space') {
-            this.toggleSelected();
-        }
-    }
-    handleSelectedChange(event) {
-        const { target } = event;
-        this.selected = target.checked;
-    }
-    toggleSelected() {
-        if (!this.toggles) {
-            this.dispatchEvent(new Event('click', {
-                bubbles: true,
-                composed: true,
-            }));
-            return;
-        }
-        this.selected = !this.selected;
-        const applyDefault = this.dispatchEvent(new Event('change', {
-            cancelable: true,
-        }));
-        if (!applyDefault) {
-            this.selected = !this.selected;
-        }
-    }
-    get renderHeading() {
-        return html `
-            <div class="title">
-                <slot name="heading">
-                    ${this.heading}
-                </slot>
+"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(h,l,e,s)=>{for(var n=s>1?void 0:s?v(l,e):l,d=h.length-1,a;d>=0;d--)(a=h[d])&&(n=(s?a(l,e,n):a(n))||n);return s&&n&&u(l,e,n),n};import{html as t,nothing as r,SizedMixin as m,SpectrumElement as g}from"@spectrum-web-components/base";import{ifDefined as p}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as f}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as b}from"@spectrum-web-components/shared/src/focus-visible.js";import{ObserveSlotPresence as y}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{LikeAnchor as w}from"@spectrum-web-components/shared/src/like-anchor.js";import"@spectrum-web-components/asset/sp-asset.js";import"@spectrum-web-components/checkbox/sp-checkbox.js";import"@spectrum-web-components/popover/sp-popover.js";import"@spectrum-web-components/divider/sp-divider.js";import E from"./card.css.js";import P from"@spectrum-web-components/styles/heading.js";import S from"@spectrum-web-components/styles/detail.js";export class Card extends w(m(y(b(g),['[slot="cover-photo"]','[slot="preview"]']),{validSizes:["s","m"],noDefaultSize:!0})){constructor(){super(...arguments);this.variant="standard";this._selected=!1;this.heading="";this.horizontal=!1;this.focused=!1;this.toggles=!1;this.value="";this.subheading="";this.handleFocusin=e=>{if(this.focused=!0,e.composedPath()[0]!==this){this.removeEventListener("keydown",this.handleKeydown);return}this.addEventListener("keydown",this.handleKeydown)}}static get styles(){return[P,S,E]}get selected(){return this._selected}set selected(e){e!==this.selected&&(this._selected=e,this.requestUpdate("selected",!this._selected))}get hasCoverPhoto(){return this.getSlotContentPresence('[slot="cover-photo"]')}get hasPreview(){return this.getSlotContentPresence('[slot="preview"]')}click(){var e;(e=this.likeAnchor)==null||e.click()}handleFocusout(e){this.focused=!1,e.composedPath()[0]===this&&this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(e){const{code:s}=e;switch(s){case"Space":if(this.toggleSelected(),this.toggles){e.preventDefault();break}case"Enter":case"NumpadEnter":this.click()}}handleSelectedChange(e){e.stopPropagation(),this.selected=e.target.checked,this.announceChange()}toggleSelected(){if(!this.toggles){this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}));return}this.selected=!this.selected,this.announceChange()}announceChange(){this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected)}stopPropagationOnHref(e){this.href&&e.stopPropagation()}handlePointerdown(e){if(e.composedPath().some(c=>c.localName==="a"))return;const d=+new Date,a=()=>{+new Date-d<200&&this.click(),this.removeEventListener("pointerup",a),this.removeEventListener("pointercancel",a)};this.addEventListener("pointerup",a),this.addEventListener("pointercancel",a)}get renderHeading(){return t`
+            <div
+                class="title spectrum-Heading spectrum-Heading--sizeXS"
+                id="heading"
+            >
+                <slot name="heading">${this.heading}</slot>
             </div>
-        `;
-    }
-    get renderPreviewImage() {
-        return html `
-            <sp-asset id="preview" variant=${ifDefined(this.asset)}>
+        `}get renderPreviewImage(){return t`
+            <sp-asset id="preview" variant=${p(this.asset)}>
                 <slot name="preview"></slot>
             </sp-asset>
-        `;
-    }
-    renderImage() {
-        if (this.horizontal) {
-            return this.renderPreviewImage;
-        }
-        if (this.variant === 'standard') {
-            return html `
-                <sp-asset id="cover-photo" variant=${ifDefined(this.asset)}>
-                    <slot name="cover-photo"></slot>
-                </sp-asset>
-            `;
-        }
-        return this.renderPreviewImage;
-    }
-    render() {
-        return html `
-            ${this.toggles
-            ? html `
-                      <sp-quick-actions
-                          class="spectrum-QuickActions quickActions"
-                      >
-                          <sp-checkbox
-                              tabindex="-1"
-                              class="checkbox"
-                              @change=${this.handleSelectedChange}
-                              ?checked=${this.selected}
-                          ></sp-checkbox>
-                      </sp-quick-actions>
-                  `
-            : html ``}
-            ${this.variant === 'quiet' && this.small
-            ? html `
-                      <sp-quick-actions class="spectrum-QuickActions actions">
-                          <slot name="actions"></slot>
-                      </sp-quick-actions>
-                  `
-            : html ``}
+            ${this.variant!=="quiet"&&!this.horizontal?t`
+                      <sp-divider size="s"></sp-divider>
+                  `:r}
+        `}get renderCoverImage(){return t`
+            <sp-asset id="cover-photo" variant=${p(this.asset)}>
+                <slot name="cover-photo"></slot>
+            </sp-asset>
+            ${this.variant!=="quiet"&&!this.horizontal?t`
+                      <sp-divider size="s"></sp-divider>
+                  `:r}
+        `}get images(){const e=[];return this.hasPreview&&e.push(this.renderPreviewImage),this.hasCoverPhoto&&e.push(this.renderCoverImage),e}renderImage(){return this.horizontal?this.images:this.variant!=="standard"?[this.renderPreviewImage]:this.images}get renderSubtitleAndDescription(){return t`
+            <div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
+                <slot name="subheading">${this.subheading}</slot>
+            </div>
+            <slot name="description"></slot>
+        `}render(){return t`
             ${this.renderImage()}
             <div class="body">
                 <div class="header">
                     ${this.renderHeading}
-                    ${this.variant === 'gallery'
-            ? html `
-                              <div class="subtitle">
-                                  <slot name="subheading">
-                                      ${this.subheading}
-                                  </slot>
-                              </div>
-                              <slot name="description"></slot>
-                          `
-            : html ``}
-                    ${this.variant !== 'quiet' || !this.small
-            ? html `
-                              <div class="actionButton">
+                    ${this.variant==="gallery"?this.renderSubtitleAndDescription:r}
+                    ${this.variant!=="quiet"||this.size!=="s"?t`
+                              <div
+                                  class="action-button"
+                                  @pointerdown=${this.stopPropagationOnHref}
+                              >
                                   <slot name="actions"></slot>
                               </div>
-                          `
-            : html ``}
+                          `:r}
                 </div>
-                ${this.variant !== 'gallery'
-            ? html `
+                ${this.variant!=="gallery"?t`
                           <div class="content">
-                              <div class="subtitle">
-                                  <slot name="subheading">
-                                      ${this.subheading}
-                                  </slot>
-                              </div>
-                              <slot name="description"></slot>
+                              ${this.renderSubtitleAndDescription}
                           </div>
-                      `
-            : html ``}
+                      `:r}
             </div>
-            ${this.variant === 'standard'
-            ? html `
+            ${this.href?this.renderAnchor({id:"like-anchor",labelledby:"heading"}):r}
+            ${this.variant==="standard"?t`
                       <slot name="footer"></slot>
-                  `
-            : html ``}
-        `;
-    }
-    firstUpdated(changes) {
-        super.firstUpdated(changes);
-        this.setAttribute('role', 'figure');
-        this.tabIndex = 0;
-    }
-}
-__decorate([
-    property()
-], Card.prototype, "asset", void 0);
-__decorate([
-    property({ reflect: true })
-], Card.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Card.prototype, "selected", void 0);
-__decorate([
-    property()
-], Card.prototype, "heading", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Card.prototype, "horizontal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Card.prototype, "small", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Card.prototype, "focused", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Card.prototype, "toggles", void 0);
-__decorate([
-    property()
-], Card.prototype, "subheading", void 0);
-//# sourceMappingURL=Card.js.map
+                  `:r}
+            ${this.toggles?t`
+                      <sp-popover
+                          class="checkbox-toggle"
+                          @pointerdown=${this.stopPropagationOnHref}
+                      >
+                          <sp-checkbox
+                              class="checkbox"
+                              @change=${this.handleSelectedChange}
+                              ?checked=${this.selected}
+                              tabindex="-1"
+                          ></sp-checkbox>
+                      </sp-popover>
+                  `:r}
+            ${this.variant==="quiet"&&this.size==="s"?t`
+                      <div
+                          class="spectrum-QuickActions actions"
+                          @pointerdown=${this.stopPropagationOnHref}
+                      >
+                          <slot name="actions"></slot>
+                      </div>
+                  `:r}
+        `}firstUpdated(e){super.firstUpdated(e),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("focusin",this.handleFocusin),this.shadowRoot.addEventListener("focusin",this.handleFocusin),this.addEventListener("focusout",this.handleFocusout)}}i([o()],Card.prototype,"asset",2),i([o({reflect:!0})],Card.prototype,"variant",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"selected",1),i([o()],Card.prototype,"heading",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"horizontal",2),i([f("#like-anchor")],Card.prototype,"likeAnchor",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"focused",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"toggles",2),i([o()],Card.prototype,"value",2),i([o()],Card.prototype,"subheading",2);
+//# sourceMappingURL=Card.js.map

package/src/Card.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["Card.ts"],"names":[],"mappings":"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","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    property,\n    CSSResultArray,\n    TemplateResult,\n    PropertyValues,\n    ifDefined,\n} from '@spectrum-web-components/base';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport '@spectrum-web-components/asset/sp-asset.js';\n\n// import { MoreIcon } from '@spectrum-web-components/icons-workflow';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/quick-actions/sp-quick-actions.js';\nimport cardStyles from './card.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\n\n/**\n * @element sp-card\n *\n * @fires change - Announces a change in the `selected` property of a card\n * @slot preview - This is the preview image for Gallery Cards\n * @slot cover-photo - This is the cover photo for Default and Quiet Cards\n * @slot heading - HTML content to be listed as the heading\n * @slot subheading - HTML content to be listed as the subheading\n * @slot description - A description of the card\n * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object\n * @slot footer - Footer text\n */\nexport class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {\n    public static get styles(): CSSResultArray {\n        return [cardStyles];\n    }\n\n    @property()\n    public asset?: 'file' | 'folder';\n\n    @property({ reflect: true })\n    public variant: 'standard' | 'gallery' | 'quiet' = 'standard';\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property()\n    public heading = '';\n\n    @property({ type: Boolean, reflect: true })\n    public horizontal = false;\n\n    @property({ type: Boolean, reflect: true })\n    public small = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: Boolean, reflect: true })\n    public toggles = false;\n\n    @property()\n    public subheading = '';\n\n    public constructor() {\n        super();\n        this.addEventListener('focusin', this.handleFocusin);\n        this.shadowRoot.addEventListener('focusin', this.handleFocusin);\n        this.addEventListener('focusout', this.handleFocusout);\n    }\n\n    private handleFocusin = (event: Event): void => {\n        this.focused = true;\n        const target = event.composedPath()[0];\n        if (target !== this) {\n            this.removeEventListener('keydown', this.handleKeydown);\n            return;\n        }\n        this.addEventListener('keydown', this.handleKeydown);\n    };\n\n    private handleFocusout(event: Event): void {\n        this.focused = false;\n        const target = event.composedPath()[0];\n        if (target === this) {\n            this.removeEventListener('keydown', this.handleKeydown);\n        }\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        /* istanbul ignore else */\n        if (code === 'Space') {\n            this.toggleSelected();\n        }\n    }\n\n    private handleSelectedChange(event: Event & { target: Checkbox }): void {\n        const { target } = event;\n        this.selected = target.checked;\n    }\n\n    public toggleSelected(): void {\n        if (!this.toggles) {\n            this.dispatchEvent(\n                new Event('click', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            return;\n        }\n        this.selected = !this.selected;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n            })\n        );\n        if (!applyDefault) {\n            this.selected = !this.selected;\n        }\n    }\n\n    protected get renderHeading(): TemplateResult {\n        return html`\n            <div class=\"title\">\n                <slot name=\"heading\">\n                    ${this.heading}\n                </slot>\n            </div>\n        `;\n    }\n\n    protected get renderPreviewImage(): TemplateResult {\n        return html`\n            <sp-asset id=\"preview\" variant=${ifDefined(this.asset)}>\n                <slot name=\"preview\"></slot>\n            </sp-asset>\n        `;\n    }\n\n    private renderImage(): TemplateResult {\n        if (this.horizontal) {\n            return this.renderPreviewImage;\n        }\n        if (this.variant === 'standard') {\n            return html`\n                <sp-asset id=\"cover-photo\" variant=${ifDefined(this.asset)}>\n                    <slot name=\"cover-photo\"></slot>\n                </sp-asset>\n            `;\n        }\n        return this.renderPreviewImage;\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            ${this.toggles\n                ? html`\n                      <sp-quick-actions\n                          class=\"spectrum-QuickActions quickActions\"\n                      >\n                          <sp-checkbox\n                              tabindex=\"-1\"\n                              class=\"checkbox\"\n                              @change=${this.handleSelectedChange}\n                              ?checked=${this.selected}\n                          ></sp-checkbox>\n                      </sp-quick-actions>\n                  `\n                : html``}\n            ${this.variant === 'quiet' && this.small\n                ? html`\n                      <sp-quick-actions class=\"spectrum-QuickActions actions\">\n                          <slot name=\"actions\"></slot>\n                      </sp-quick-actions>\n                  `\n                : html``}\n            ${this.renderImage()}\n            <div class=\"body\">\n                <div class=\"header\">\n                    ${this.renderHeading}\n                    ${this.variant === 'gallery'\n                        ? html`\n                              <div class=\"subtitle\">\n                                  <slot name=\"subheading\">\n                                      ${this.subheading}\n                                  </slot>\n                              </div>\n                              <slot name=\"description\"></slot>\n                          `\n                        : html``}\n                    ${this.variant !== 'quiet' || !this.small\n                        ? html`\n                              <div class=\"actionButton\">\n                                  <slot name=\"actions\"></slot>\n                              </div>\n                          `\n                        : html``}\n                </div>\n                ${this.variant !== 'gallery'\n                    ? html`\n                          <div class=\"content\">\n                              <div class=\"subtitle\">\n                                  <slot name=\"subheading\">\n                                      ${this.subheading}\n                                  </slot>\n                              </div>\n                              <slot name=\"description\"></slot>\n                          </div>\n                      `\n                    : html``}\n            </div>\n            ${this.variant === 'standard'\n                ? html`\n                      <slot name=\"footer\"></slot>\n                  `\n                : html``}\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.setAttribute('role', 'figure');\n        this.tabIndex = 0;\n    }\n}\n"]}
+{
+  "version": 3,
+  "sources": ["Card.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport '@spectrum-web-components/asset/sp-asset.js';\n\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport cardStyles from './card.css.js';\nimport headingStyles from '@spectrum-web-components/styles/heading.js';\nimport detailStyles from '@spectrum-web-components/styles/detail.js';\n\n/**\n * @element sp-card\n *\n * @fires change - Announces a change in the `selected` property of a card\n * @slot preview - This is the preview image for Gallery Cards\n * @slot cover-photo - This is the cover photo for Default and Quiet Cards\n * @slot heading - HTML content to be listed as the heading\n * @slot subheading - HTML content to be listed as the subheading\n * @slot description - A description of the card\n * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object\n * @slot footer - Footer text\n */\nexport class Card extends LikeAnchor(\n    SizedMixin(\n        ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [\n            '[slot=\"cover-photo\"]',\n            '[slot=\"preview\"]',\n        ]),\n        {\n            validSizes: ['s', 'm'],\n            noDefaultSize: true,\n        }\n    )\n) {\n    public static override get styles(): CSSResultArray {\n        return [headingStyles, detailStyles, cardStyles];\n    }\n\n    @property()\n    public asset?: 'file' | 'folder';\n\n    @property({ reflect: true })\n    public variant: 'standard' | 'gallery' | 'quiet' = 'standard';\n\n    @property({ type: Boolean, reflect: true })\n    get selected(): boolean {\n        return this._selected;\n    }\n    set selected(selected: boolean) {\n        if (selected === this.selected) return;\n        this._selected = selected;\n        this.requestUpdate('selected', !this._selected);\n    }\n\n    private _selected = false;\n\n    @property()\n    public heading = '';\n\n    @property({ type: Boolean, reflect: true })\n    public horizontal = false;\n\n    @query('#like-anchor')\n    private likeAnchor?: HTMLAnchorElement;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: Boolean, reflect: true })\n    public toggles = false;\n\n    @property()\n    public value = '';\n\n    @property()\n    public subheading = '';\n\n    protected get hasCoverPhoto(): boolean {\n        return this.getSlotContentPresence('[slot=\"cover-photo\"]');\n    }\n\n    protected get hasPreview(): boolean {\n        return this.getSlotContentPresence('[slot=\"preview\"]');\n    }\n\n    public override click(): void {\n        this.likeAnchor?.click();\n    }\n\n    private handleFocusin = (event: Event): void => {\n        this.focused = true;\n        const target = event.composedPath()[0];\n        if (target !== this) {\n            this.removeEventListener('keydown', this.handleKeydown);\n            return;\n        }\n        this.addEventListener('keydown', this.handleKeydown);\n    };\n\n    private handleFocusout(event: Event): void {\n        this.focused = false;\n        const target = event.composedPath()[0];\n        if (target === this) {\n            this.removeEventListener('keydown', this.handleKeydown);\n        }\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                this.toggleSelected();\n                if (this.toggles) {\n                    event.preventDefault();\n                    break;\n                }\n            case 'Enter':\n            case 'NumpadEnter':\n                this.click();\n        }\n    }\n\n    private handleSelectedChange(event: Event & { target: Checkbox }): void {\n        event.stopPropagation();\n        this.selected = event.target.checked;\n        this.announceChange();\n    }\n\n    public toggleSelected(): void {\n        if (!this.toggles) {\n            this.dispatchEvent(\n                new Event('click', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            return;\n        }\n        this.selected = !this.selected;\n        this.announceChange();\n    }\n\n    private announceChange(): void {\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            this.selected = !this.selected;\n        }\n    }\n\n    private stopPropagationOnHref(event: Event): void {\n        if (this.href) {\n            event.stopPropagation();\n        }\n    }\n\n    private handlePointerdown(event: Event): void {\n        const path = event.composedPath();\n        const hasAnchor = path.some(\n            (el) => (el as HTMLElement).localName === 'a'\n        );\n        if (hasAnchor) return;\n        const start = +new Date();\n        const handleEnd = (): void => {\n            const end = +new Date();\n            if (end - start < 200) {\n                this.click();\n            }\n            this.removeEventListener('pointerup', handleEnd);\n            this.removeEventListener('pointercancel', handleEnd);\n        };\n        this.addEventListener('pointerup', handleEnd);\n        this.addEventListener('pointercancel', handleEnd);\n    }\n\n    protected get renderHeading(): TemplateResult {\n        return html`\n            <div\n                class=\"title spectrum-Heading spectrum-Heading--sizeXS\"\n                id=\"heading\"\n            >\n                <slot name=\"heading\">${this.heading}</slot>\n            </div>\n        `;\n    }\n\n    protected get renderPreviewImage(): TemplateResult {\n        return html`\n            <sp-asset id=\"preview\" variant=${ifDefined(this.asset)}>\n                <slot name=\"preview\"></slot>\n            </sp-asset>\n            ${this.variant !== 'quiet' && !this.horizontal\n                ? html`\n                      <sp-divider size=\"s\"></sp-divider>\n                  `\n                : nothing}\n        `;\n    }\n\n    protected get renderCoverImage(): TemplateResult {\n        return html`\n            <sp-asset id=\"cover-photo\" variant=${ifDefined(this.asset)}>\n                <slot name=\"cover-photo\"></slot>\n            </sp-asset>\n            ${this.variant !== 'quiet' && !this.horizontal\n                ? html`\n                      <sp-divider size=\"s\"></sp-divider>\n                  `\n                : nothing}\n        `;\n    }\n\n    protected get images(): TemplateResult[] {\n        const images: TemplateResult[] = [];\n        if (this.hasPreview) images.push(this.renderPreviewImage);\n        if (this.hasCoverPhoto) images.push(this.renderCoverImage);\n        return images;\n    }\n\n    private renderImage(): TemplateResult[] {\n        if (this.horizontal) {\n            return this.images;\n        }\n        if (this.variant !== 'standard') {\n            return [this.renderPreviewImage];\n        }\n        return this.images;\n    }\n\n    private get renderSubtitleAndDescription(): TemplateResult {\n        return html`\n            <div class=\"subtitle spectrum-Detail spectrum-Detail--sizeS\">\n                <slot name=\"subheading\">${this.subheading}</slot>\n            </div>\n            <slot name=\"description\"></slot>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.renderImage()}\n            <div class=\"body\">\n                <div class=\"header\">\n                    ${this.renderHeading}\n                    ${this.variant === 'gallery'\n                        ? this.renderSubtitleAndDescription\n                        : nothing}\n                    ${this.variant !== 'quiet' || this.size !== 's'\n                        ? html`\n                              <div\n                                  class=\"action-button\"\n                                  @pointerdown=${this.stopPropagationOnHref}\n                              >\n                                  <slot name=\"actions\"></slot>\n                              </div>\n                          `\n                        : nothing}\n                </div>\n                ${this.variant !== 'gallery'\n                    ? html`\n                          <div class=\"content\">\n                              ${this.renderSubtitleAndDescription}\n                          </div>\n                      `\n                    : nothing}\n            </div>\n            ${this.href\n                ? this.renderAnchor({\n                      id: 'like-anchor',\n                      labelledby: 'heading',\n                  })\n                : nothing}\n            ${this.variant === 'standard'\n                ? html`\n                      <slot name=\"footer\"></slot>\n                  `\n                : nothing}\n            ${this.toggles\n                ? html`\n                      <sp-popover\n                          class=\"checkbox-toggle\"\n                          @pointerdown=${this.stopPropagationOnHref}\n                      >\n                          <sp-checkbox\n                              class=\"checkbox\"\n                              @change=${this.handleSelectedChange}\n                              ?checked=${this.selected}\n                              tabindex=\"-1\"\n                          ></sp-checkbox>\n                      </sp-popover>\n                  `\n                : nothing}\n            ${this.variant === 'quiet' && this.size === 's'\n                ? html`\n                      <div\n                          class=\"spectrum-QuickActions actions\"\n                          @pointerdown=${this.stopPropagationOnHref}\n                      >\n                          <slot name=\"actions\"></slot>\n                      </div>\n                  `\n                : nothing}\n        `;\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.addEventListener('pointerdown', this.handlePointerdown);\n        this.addEventListener('focusin', this.handleFocusin);\n        this.shadowRoot.addEventListener('focusin', this.handleFocusin);\n        this.addEventListener('focusout', this.handleFocusout);\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "nothing", "SizedMixin", "SpectrumElement", "ifDefined", "property", "query", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "LikeAnchor", "cardStyles", "headingStyles", "detailStyles", "event", "selected", "_a", "code", "el", "start", "handleEnd", "images", "changes", "__decorateClass"]
+}

package/src/card-overrides.css.d.ts

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

package/src/card-overrides.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    :host{--spectrum-card-background-color:var(--system-card-background-color);--spectrum-card-body-spacing:var(--system-card-body-spacing);--spectrum-card-title-padding-top:var(--system-card-title-padding-top);--spectrum-card-title-padding-right:var(--system-card-title-padding-right);--spectrum-card-content-margin-top:var(--system-card-content-margin-top);--spectrum-card-content-margin-bottom:var(--system-card-content-margin-bottom);--spectrum-card-footer-padding-top:var(--system-card-footer-padding-top);--spectrum-card-subtitle-padding-right:var(--system-card-subtitle-padding-right);--spectrum-card-border-width:var(--system-card-border-width);--spectrum-card-corner-radius:var(--system-card-corner-radius);--spectrum-card-border-color:var(--system-card-border-color);--spectrum-card-border-color-hover:var(--system-card-border-color-hover);--spectrum-card-border-color-selected:var(--system-card-border-color-selected);--spectrum-card-divider-color:var(--system-card-divider-color);--spectrum-card-title-font-family:var(--system-card-title-font-family);--spectrum-card-title-font-size:var(--system-card-title-font-size);--spectrum-card-title-font-weight:var(--system-card-title-font-weight);--spectrum-card-title-font-style:var(--system-card-title-font-style);--spectrum-card-title-line-height:var(--system-card-title-line-height);--spectrum-card-title-font-color:var(--system-card-title-font-color);--spectrum-card-body-font-family:var(--system-card-body-font-family);--spectrum-card-body-font-size:var(--system-card-body-font-size);--spectrum-card-body-font-weight:var(--system-card-body-font-weight);--spectrum-card-body-font-style:var(--system-card-body-font-style);--spectrum-card-body-line-height:var(--system-card-body-line-height);--spectrum-card-body-font-color:var(--system-card-body-font-color);--spectrum-card-actions-spacing:var(--system-card-actions-spacing);--spectrum-card-actions-size:var(--system-card-actions-size);--spectrum-card-actions-border-radius:var(--system-card-actions-border-radius);--spectrum-card-actions-background-color-rgb:var(--system-card-actions-background-color-rgb);--spectrum-card-actions-background-color-opacity:var(--system-card-actions-background-color-opacity);--spectrum-card-actions-drop-shadow-color:var(--system-card-actions-drop-shadow-color);--spectrum-card-actions-drop-shadow-x:var(--system-card-actions-drop-shadow-x);--spectrum-card-actions-drop-shadow-y:var(--system-card-actions-drop-shadow-y);--spectrum-card-actions-drop-shadow-blur:var(--system-card-actions-drop-shadow-blur);--spectrum-card-focus-indicator-color:var(--system-card-focus-indicator-color);--spectrum-card-focus-indicator-width:var(--system-card-focus-indicator-width);--spectrum-card-selected-background-opacity:var(--system-card-selected-background-opacity);--spectrum-card-preview-border-width-selected:var(--system-card-preview-border-width-selected);--spectrum-card-preview-background-color:var(--system-card-preview-background-color);--spectrum-card-preview-background-color-hover:var(--system-card-preview-background-color-hover);--spectrum-card-horizontal-body-padding:var(--system-card-horizontal-body-padding);--spectrum-card-horizontal-preview-padding:var(--system-card-horizontal-preview-padding);--spectrum-card-content-margin-top-quiet:var(--system-card-content-margin-top-quiet);--spectrum-card-minimum-width-quiet:var(--system-card-minimum-width-quiet);--spectrum-card-background-color-quiet:var(--system-card-background-color-quiet)}
+`;
+export default styles;
+//# sourceMappingURL=card-overrides.css.dev.js.map

package/src/card-overrides.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["card-overrides.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-card-background-color:var(--system-card-background-color);--spectrum-card-body-spacing:var(--system-card-body-spacing);--spectrum-card-title-padding-top:var(--system-card-title-padding-top);--spectrum-card-title-padding-right:var(--system-card-title-padding-right);--spectrum-card-content-margin-top:var(--system-card-content-margin-top);--spectrum-card-content-margin-bottom:var(--system-card-content-margin-bottom);--spectrum-card-footer-padding-top:var(--system-card-footer-padding-top);--spectrum-card-subtitle-padding-right:var(--system-card-subtitle-padding-right);--spectrum-card-border-width:var(--system-card-border-width);--spectrum-card-corner-radius:var(--system-card-corner-radius);--spectrum-card-border-color:var(--system-card-border-color);--spectrum-card-border-color-hover:var(--system-card-border-color-hover);--spectrum-card-border-color-selected:var(--system-card-border-color-selected);--spectrum-card-divider-color:var(--system-card-divider-color);--spectrum-card-title-font-family:var(--system-card-title-font-family);--spectrum-card-title-font-size:var(--system-card-title-font-size);--spectrum-card-title-font-weight:var(--system-card-title-font-weight);--spectrum-card-title-font-style:var(--system-card-title-font-style);--spectrum-card-title-line-height:var(--system-card-title-line-height);--spectrum-card-title-font-color:var(--system-card-title-font-color);--spectrum-card-body-font-family:var(--system-card-body-font-family);--spectrum-card-body-font-size:var(--system-card-body-font-size);--spectrum-card-body-font-weight:var(--system-card-body-font-weight);--spectrum-card-body-font-style:var(--system-card-body-font-style);--spectrum-card-body-line-height:var(--system-card-body-line-height);--spectrum-card-body-font-color:var(--system-card-body-font-color);--spectrum-card-actions-spacing:var(--system-card-actions-spacing);--spectrum-card-actions-size:var(--system-card-actions-size);--spectrum-card-actions-border-radius:var(--system-card-actions-border-radius);--spectrum-card-actions-background-color-rgb:var(--system-card-actions-background-color-rgb);--spectrum-card-actions-background-color-opacity:var(--system-card-actions-background-color-opacity);--spectrum-card-actions-drop-shadow-color:var(--system-card-actions-drop-shadow-color);--spectrum-card-actions-drop-shadow-x:var(--system-card-actions-drop-shadow-x);--spectrum-card-actions-drop-shadow-y:var(--system-card-actions-drop-shadow-y);--spectrum-card-actions-drop-shadow-blur:var(--system-card-actions-drop-shadow-blur);--spectrum-card-focus-indicator-color:var(--system-card-focus-indicator-color);--spectrum-card-focus-indicator-width:var(--system-card-focus-indicator-width);--spectrum-card-selected-background-opacity:var(--system-card-selected-background-opacity);--spectrum-card-preview-border-width-selected:var(--system-card-preview-border-width-selected);--spectrum-card-preview-background-color:var(--system-card-preview-background-color);--spectrum-card-preview-background-color-hover:var(--system-card-preview-background-color-hover);--spectrum-card-horizontal-body-padding:var(--system-card-horizontal-body-padding);--spectrum-card-horizontal-preview-padding:var(--system-card-horizontal-preview-padding);--spectrum-card-content-margin-top-quiet:var(--system-card-content-margin-top-quiet);--spectrum-card-minimum-width-quiet:var(--system-card-minimum-width-quiet);--spectrum-card-background-color-quiet:var(--system-card-background-color-quiet)}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/card-overrides.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as r}from"@spectrum-web-components/base";const t=r`
+    :host{--spectrum-card-background-color:var(--system-card-background-color);--spectrum-card-body-spacing:var(--system-card-body-spacing);--spectrum-card-title-padding-top:var(--system-card-title-padding-top);--spectrum-card-title-padding-right:var(--system-card-title-padding-right);--spectrum-card-content-margin-top:var(--system-card-content-margin-top);--spectrum-card-content-margin-bottom:var(--system-card-content-margin-bottom);--spectrum-card-footer-padding-top:var(--system-card-footer-padding-top);--spectrum-card-subtitle-padding-right:var(--system-card-subtitle-padding-right);--spectrum-card-border-width:var(--system-card-border-width);--spectrum-card-corner-radius:var(--system-card-corner-radius);--spectrum-card-border-color:var(--system-card-border-color);--spectrum-card-border-color-hover:var(--system-card-border-color-hover);--spectrum-card-border-color-selected:var(--system-card-border-color-selected);--spectrum-card-divider-color:var(--system-card-divider-color);--spectrum-card-title-font-family:var(--system-card-title-font-family);--spectrum-card-title-font-size:var(--system-card-title-font-size);--spectrum-card-title-font-weight:var(--system-card-title-font-weight);--spectrum-card-title-font-style:var(--system-card-title-font-style);--spectrum-card-title-line-height:var(--system-card-title-line-height);--spectrum-card-title-font-color:var(--system-card-title-font-color);--spectrum-card-body-font-family:var(--system-card-body-font-family);--spectrum-card-body-font-size:var(--system-card-body-font-size);--spectrum-card-body-font-weight:var(--system-card-body-font-weight);--spectrum-card-body-font-style:var(--system-card-body-font-style);--spectrum-card-body-line-height:var(--system-card-body-line-height);--spectrum-card-body-font-color:var(--system-card-body-font-color);--spectrum-card-actions-spacing:var(--system-card-actions-spacing);--spectrum-card-actions-size:var(--system-card-actions-size);--spectrum-card-actions-border-radius:var(--system-card-actions-border-radius);--spectrum-card-actions-background-color-rgb:var(--system-card-actions-background-color-rgb);--spectrum-card-actions-background-color-opacity:var(--system-card-actions-background-color-opacity);--spectrum-card-actions-drop-shadow-color:var(--system-card-actions-drop-shadow-color);--spectrum-card-actions-drop-shadow-x:var(--system-card-actions-drop-shadow-x);--spectrum-card-actions-drop-shadow-y:var(--system-card-actions-drop-shadow-y);--spectrum-card-actions-drop-shadow-blur:var(--system-card-actions-drop-shadow-blur);--spectrum-card-focus-indicator-color:var(--system-card-focus-indicator-color);--spectrum-card-focus-indicator-width:var(--system-card-focus-indicator-width);--spectrum-card-selected-background-opacity:var(--system-card-selected-background-opacity);--spectrum-card-preview-border-width-selected:var(--system-card-preview-border-width-selected);--spectrum-card-preview-background-color:var(--system-card-preview-background-color);--spectrum-card-preview-background-color-hover:var(--system-card-preview-background-color-hover);--spectrum-card-horizontal-body-padding:var(--system-card-horizontal-body-padding);--spectrum-card-horizontal-preview-padding:var(--system-card-horizontal-preview-padding);--spectrum-card-content-margin-top-quiet:var(--system-card-content-margin-top-quiet);--spectrum-card-minimum-width-quiet:var(--system-card-minimum-width-quiet);--spectrum-card-background-color-quiet:var(--system-card-background-color-quiet)}
+`;export default t;
+//# sourceMappingURL=card-overrides.css.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["card-overrides.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-card-background-color:var(--system-card-background-color);--spectrum-card-body-spacing:var(--system-card-body-spacing);--spectrum-card-title-padding-top:var(--system-card-title-padding-top);--spectrum-card-title-padding-right:var(--system-card-title-padding-right);--spectrum-card-content-margin-top:var(--system-card-content-margin-top);--spectrum-card-content-margin-bottom:var(--system-card-content-margin-bottom);--spectrum-card-footer-padding-top:var(--system-card-footer-padding-top);--spectrum-card-subtitle-padding-right:var(--system-card-subtitle-padding-right);--spectrum-card-border-width:var(--system-card-border-width);--spectrum-card-corner-radius:var(--system-card-corner-radius);--spectrum-card-border-color:var(--system-card-border-color);--spectrum-card-border-color-hover:var(--system-card-border-color-hover);--spectrum-card-border-color-selected:var(--system-card-border-color-selected);--spectrum-card-divider-color:var(--system-card-divider-color);--spectrum-card-title-font-family:var(--system-card-title-font-family);--spectrum-card-title-font-size:var(--system-card-title-font-size);--spectrum-card-title-font-weight:var(--system-card-title-font-weight);--spectrum-card-title-font-style:var(--system-card-title-font-style);--spectrum-card-title-line-height:var(--system-card-title-line-height);--spectrum-card-title-font-color:var(--system-card-title-font-color);--spectrum-card-body-font-family:var(--system-card-body-font-family);--spectrum-card-body-font-size:var(--system-card-body-font-size);--spectrum-card-body-font-weight:var(--system-card-body-font-weight);--spectrum-card-body-font-style:var(--system-card-body-font-style);--spectrum-card-body-line-height:var(--system-card-body-line-height);--spectrum-card-body-font-color:var(--system-card-body-font-color);--spectrum-card-actions-spacing:var(--system-card-actions-spacing);--spectrum-card-actions-size:var(--system-card-actions-size);--spectrum-card-actions-border-radius:var(--system-card-actions-border-radius);--spectrum-card-actions-background-color-rgb:var(--system-card-actions-background-color-rgb);--spectrum-card-actions-background-color-opacity:var(--system-card-actions-background-color-opacity);--spectrum-card-actions-drop-shadow-color:var(--system-card-actions-drop-shadow-color);--spectrum-card-actions-drop-shadow-x:var(--system-card-actions-drop-shadow-x);--spectrum-card-actions-drop-shadow-y:var(--system-card-actions-drop-shadow-y);--spectrum-card-actions-drop-shadow-blur:var(--system-card-actions-drop-shadow-blur);--spectrum-card-focus-indicator-color:var(--system-card-focus-indicator-color);--spectrum-card-focus-indicator-width:var(--system-card-focus-indicator-width);--spectrum-card-selected-background-opacity:var(--system-card-selected-background-opacity);--spectrum-card-preview-border-width-selected:var(--system-card-preview-border-width-selected);--spectrum-card-preview-background-color:var(--system-card-preview-background-color);--spectrum-card-preview-background-color-hover:var(--system-card-preview-background-color-hover);--spectrum-card-horizontal-body-padding:var(--system-card-horizontal-body-padding);--spectrum-card-horizontal-preview-padding:var(--system-card-horizontal-preview-padding);--spectrum-card-content-margin-top-quiet:var(--system-card-content-margin-top-quiet);--spectrum-card-minimum-width-quiet:var(--system-card-minimum-width-quiet);--spectrum-card-background-color-quiet:var(--system-card-background-color-quiet)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/card.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    :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}:host{--spectrum-card-background-color:var(--system-card-background-color);--spectrum-card-body-spacing:var(--system-card-body-spacing);--spectrum-card-title-padding-top:var(--system-card-title-padding-top);--spectrum-card-title-padding-right:var(--system-card-title-padding-right);--spectrum-card-content-margin-top:var(--system-card-content-margin-top);--spectrum-card-content-margin-bottom:var(--system-card-content-margin-bottom);--spectrum-card-footer-padding-top:var(--system-card-footer-padding-top);--spectrum-card-subtitle-padding-right:var(--system-card-subtitle-padding-right);--spectrum-card-border-width:var(--system-card-border-width);--spectrum-card-corner-radius:var(--system-card-corner-radius);--spectrum-card-border-color:var(--system-card-border-color);--spectrum-card-border-color-hover:var(--system-card-border-color-hover);--spectrum-card-border-color-selected:var(--system-card-border-color-selected);--spectrum-card-divider-color:var(--system-card-divider-color);--spectrum-card-title-font-family:var(--system-card-title-font-family);--spectrum-card-title-font-size:var(--system-card-title-font-size);--spectrum-card-title-font-weight:var(--system-card-title-font-weight);--spectrum-card-title-font-style:var(--system-card-title-font-style);--spectrum-card-title-line-height:var(--system-card-title-line-height);--spectrum-card-title-font-color:var(--system-card-title-font-color);--spectrum-card-body-font-family:var(--system-card-body-font-family);--spectrum-card-body-font-size:var(--system-card-body-font-size);--spectrum-card-body-font-weight:var(--system-card-body-font-weight);--spectrum-card-body-font-style:var(--system-card-body-font-style);--spectrum-card-body-line-height:var(--system-card-body-line-height);--spectrum-card-body-font-color:var(--system-card-body-font-color);--spectrum-card-actions-spacing:var(--system-card-actions-spacing);--spectrum-card-actions-size:var(--system-card-actions-size);--spectrum-card-actions-border-radius:var(--system-card-actions-border-radius);--spectrum-card-actions-background-color-rgb:var(--system-card-actions-background-color-rgb);--spectrum-card-actions-background-color-opacity:var(--system-card-actions-background-color-opacity);--spectrum-card-actions-drop-shadow-color:var(--system-card-actions-drop-shadow-color);--spectrum-card-actions-drop-shadow-x:var(--system-card-actions-drop-shadow-x);--spectrum-card-actions-drop-shadow-y:var(--system-card-actions-drop-shadow-y);--spectrum-card-actions-drop-shadow-blur:var(--system-card-actions-drop-shadow-blur);--spectrum-card-focus-indicator-color:var(--system-card-focus-indicator-color);--spectrum-card-focus-indicator-width:var(--system-card-focus-indicator-width);--spectrum-card-selected-background-opacity:var(--system-card-selected-background-opacity);--spectrum-card-preview-border-width-selected:var(--system-card-preview-border-width-selected);--spectrum-card-preview-background-color:var(--system-card-preview-background-color);--spectrum-card-preview-background-color-hover:var(--system-card-preview-background-color-hover);--spectrum-card-horizontal-body-padding:var(--system-card-horizontal-body-padding);--spectrum-card-horizontal-preview-padding:var(--system-card-horizontal-preview-padding);--spectrum-card-content-margin-top-quiet:var(--system-card-content-margin-top-quiet);--spectrum-card-minimum-width-quiet:var(--system-card-minimum-width-quiet);--spectrum-card-background-color-quiet:var(--system-card-background-color-quiet)}:host([href]:not([href=""])){cursor:pointer}#like-anchor{pointer-events:none;position:absolute;inset:0}.action-button{flex-grow:0}:host([dir=ltr]) .action-button{margin-left:auto}:host([dir=rtl]) .action-button{margin-right:auto}slot[name=description]{font-size:var(--spectrum-card-subtitle-text-size,var(--spectrum-global-dimension-font-size-50))}#preview+#cover-photo{display:none}#cover-photo ::slotted(*),:host(:not([variant=quiet])) #preview ::slotted(*){width:100%;object-fit:cover;display:block}:host(:not([variant=gallery])) #preview ::slotted(*){height:100%}:host([horizontal]) #preview{width:auto}:host([horizontal]) sp-asset{height:inherit}sp-popover{align-items:center}.actions{visibility:hidden;margin:auto}.title{width:var(--spectrum-card-title-width)}.subtitle{text-transform:none}:host:before,:host:after{pointer-events:none}
+`;
+export default styles;
+//# sourceMappingURL=card.css.dev.js.map

package/src/card.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["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}:host{--spectrum-card-background-color:var(--system-card-background-color);--spectrum-card-body-spacing:var(--system-card-body-spacing);--spectrum-card-title-padding-top:var(--system-card-title-padding-top);--spectrum-card-title-padding-right:var(--system-card-title-padding-right);--spectrum-card-content-margin-top:var(--system-card-content-margin-top);--spectrum-card-content-margin-bottom:var(--system-card-content-margin-bottom);--spectrum-card-footer-padding-top:var(--system-card-footer-padding-top);--spectrum-card-subtitle-padding-right:var(--system-card-subtitle-padding-right);--spectrum-card-border-width:var(--system-card-border-width);--spectrum-card-corner-radius:var(--system-card-corner-radius);--spectrum-card-border-color:var(--system-card-border-color);--spectrum-card-border-color-hover:var(--system-card-border-color-hover);--spectrum-card-border-color-selected:var(--system-card-border-color-selected);--spectrum-card-divider-color:var(--system-card-divider-color);--spectrum-card-title-font-family:var(--system-card-title-font-family);--spectrum-card-title-font-size:var(--system-card-title-font-size);--spectrum-card-title-font-weight:var(--system-card-title-font-weight);--spectrum-card-title-font-style:var(--system-card-title-font-style);--spectrum-card-title-line-height:var(--system-card-title-line-height);--spectrum-card-title-font-color:var(--system-card-title-font-color);--spectrum-card-body-font-family:var(--system-card-body-font-family);--spectrum-card-body-font-size:var(--system-card-body-font-size);--spectrum-card-body-font-weight:var(--system-card-body-font-weight);--spectrum-card-body-font-style:var(--system-card-body-font-style);--spectrum-card-body-line-height:var(--system-card-body-line-height);--spectrum-card-body-font-color:var(--system-card-body-font-color);--spectrum-card-actions-spacing:var(--system-card-actions-spacing);--spectrum-card-actions-size:var(--system-card-actions-size);--spectrum-card-actions-border-radius:var(--system-card-actions-border-radius);--spectrum-card-actions-background-color-rgb:var(--system-card-actions-background-color-rgb);--spectrum-card-actions-background-color-opacity:var(--system-card-actions-background-color-opacity);--spectrum-card-actions-drop-shadow-color:var(--system-card-actions-drop-shadow-color);--spectrum-card-actions-drop-shadow-x:var(--system-card-actions-drop-shadow-x);--spectrum-card-actions-drop-shadow-y:var(--system-card-actions-drop-shadow-y);--spectrum-card-actions-drop-shadow-blur:var(--system-card-actions-drop-shadow-blur);--spectrum-card-focus-indicator-color:var(--system-card-focus-indicator-color);--spectrum-card-focus-indicator-width:var(--system-card-focus-indicator-width);--spectrum-card-selected-background-opacity:var(--system-card-selected-background-opacity);--spectrum-card-preview-border-width-selected:var(--system-card-preview-border-width-selected);--spectrum-card-preview-background-color:var(--system-card-preview-background-color);--spectrum-card-preview-background-color-hover:var(--system-card-preview-background-color-hover);--spectrum-card-horizontal-body-padding:var(--system-card-horizontal-body-padding);--spectrum-card-horizontal-preview-padding:var(--system-card-horizontal-preview-padding);--spectrum-card-content-margin-top-quiet:var(--system-card-content-margin-top-quiet);--spectrum-card-minimum-width-quiet:var(--system-card-minimum-width-quiet);--spectrum-card-background-color-quiet:var(--system-card-background-color-quiet)}:host([href]:not([href=\"\"])){cursor:pointer}#like-anchor{pointer-events:none;position:absolute;inset:0}.action-button{flex-grow:0}:host([dir=ltr]) .action-button{margin-left:auto}:host([dir=rtl]) .action-button{margin-right:auto}slot[name=description]{font-size:var(--spectrum-card-subtitle-text-size,var(--spectrum-global-dimension-font-size-50))}#preview+#cover-photo{display:none}#cover-photo ::slotted(*),:host(:not([variant=quiet])) #preview ::slotted(*){width:100%;object-fit:cover;display:block}:host(:not([variant=gallery])) #preview ::slotted(*){height:100%}:host([horizontal]) #preview{width:auto}:host([horizontal]) sp-asset{height:inherit}sp-popover{align-items:center}.actions{visibility:hidden;margin:auto}.title{width:var(--spectrum-card-title-width)}.subtitle{text-transform:none}:host:before,:host:after{pointer-events:none}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}