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

package/CHANGELOG.md

@@ -1,123 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.0.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.5.4...@spectrum-web-components/card@1.0.0) (2020-11-20)
-
-### Bug Fixes
-
--   switch to heading/subheading instead of title ([d182a0f](https://github.com/adobe/spectrum-web-components/commit/d182a0f829b21296f07b50f37c8aecda2c0ed137))
--   tests weren't fully updated ([22bf3b1](https://github.com/adobe/spectrum-web-components/commit/22bf3b14d304a9106525a05a8c0dc16834648356))
--   these selectors didn't actually change ([a5ac275](https://github.com/adobe/spectrum-web-components/commit/a5ac275dfc9873ba65abf7a4d9631cc67fd65aa1))
-
-### BREAKING CHANGES
-
--   renamed title/subtitle attributes and slot.
-
-## [0.5.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.5.3...@spectrum-web-components/card@0.5.4) (2020-10-12)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.5.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.5.2...@spectrum-web-components/card@0.5.3) (2020-10-12)
-
-### Bug Fixes
-
--   **card:** include dependencies ([18beaf6](https://github.com/adobe/spectrum-web-components/commit/18beaf61c9af0aeb88b1801e821c1f1c5abb3d63))
--   include default export in the "exports" fields ([f32407d](https://github.com/adobe/spectrum-web-components/commit/f32407d7bbfd18e72c35b6f27740549e79957858))
-
-## [0.5.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.5.1...@spectrum-web-components/card@0.5.2) (2020-09-25)
-
-### Bug Fixes
-
--   update side effect listings ([8160d3a](https://github.com/adobe/spectrum-web-components/commit/8160d3ab2c4f5ea11ac40897a5cf1fdaa357f4a8))
-
-## [0.5.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.5.0...@spectrum-web-components/card@0.5.1) (2020-09-14)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-# [0.5.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.4.3...@spectrum-web-components/card@0.5.0) (2020-08-31)
-
-### Features
-
--   **card:** upgrade to Spectrum CSS v3.0.0 ([84cf1a9](https://github.com/adobe/spectrum-web-components/commit/84cf1a9758b1e357f18efac5763d17d6a4db0578))
-
-## [0.4.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.4.2...@spectrum-web-components/card@0.4.3) (2020-08-19)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.4.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.4.1...@spectrum-web-components/card@0.4.2) (2020-07-27)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.4.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.4.0...@spectrum-web-components/card@0.4.1) (2020-07-22)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-# [0.4.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.3.5...@spectrum-web-components/card@0.4.0) (2020-07-17)
-
-### Features
-
--   leverage "exports" field in package.json ([321abd7](https://github.com/adobe/spectrum-web-components/commit/321abd7b7e78ccd9157cff75a1fa3dbd06e81f79))
-
-## [0.3.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.3.4...@spectrum-web-components/card@0.3.5) (2020-06-08)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.3.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.3.3...@spectrum-web-components/card@0.3.4) (2020-05-08)
-
-### Bug Fixes
-
--   **card:** correctly apply :focus-visible styling to variants ([d7c7539](https://github.com/adobe/spectrum-web-components/commit/d7c7539727d70f22243bd50bdaf8fbe0d0bbbb80))
-
-## [0.3.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.3.2...@spectrum-web-components/card@0.3.3) (2020-04-16)
-
-### Performance Improvements
-
--   use "sideEffects" listing in package.json ([7271614](https://github.com/adobe/spectrum-web-components/commit/7271614c0ca3ccf3566583bb59467eb15a6199cd))
-
-## [0.3.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.3.1...@spectrum-web-components/card@0.3.2) (2020-04-07)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.3.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.3.0...@spectrum-web-components/card@0.3.1) (2020-03-11)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.2.3...@spectrum-web-components/card@0.3.0) (2020-02-05)
-
-### Features
-
--   allow slotted title for card ([aaf7157](https://github.com/adobe/spectrum-web-components/commit/aaf7157))
-
-## [0.2.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.2.2...@spectrum-web-components/card@0.2.3) (2020-01-30)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.2.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.2.1...@spectrum-web-components/card@0.2.2) (2020-01-06)
-
-**Note:** Version bump only for package @spectrum-web-components/card
-
-## [0.2.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.2.0...@spectrum-web-components/card@0.2.1) (2019-11-27)
-
-### Bug Fixes
-
--   include "type" in package.json, generate custom-elements.json ([1a8d716](https://github.com/adobe/spectrum-web-components/commit/1a8d716))
-
-# [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.1.4...@spectrum-web-components/card@0.2.0) (2019-11-19)
-
-### Features
-
--   add screenshot regression testing to CI ([8205dfe](https://github.com/adobe/spectrum-web-components/commit/8205dfe))
--   use :focus-visable (via polyfill) instead of :focus ([11c6fc7](https://github.com/adobe/spectrum-web-components/commit/11c6fc7))
--   use @adobe/spectrum-css@2.15.1 ([3918888](https://github.com/adobe/spectrum-web-components/commit/3918888))
-
-## [0.1.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/card@0.1.3...@spectrum-web-components/card@0.1.4) (2019-10-14)
-
-### Performance Improvements
-
--   use imported TypeScript helpers instead of inlining them ([cc2bd0a](https://github.com/adobe/spectrum-web-components/commit/cc2bd0a))
-
-## 0.1.3 (2019-10-03)
-
-**Note:** Version bump only for package @spectrum-web-components/card

package/custom-elements.json

@@ -1,153 +0,0 @@
-{
-  "version": "experimental",
-  "tags": [
-    {
-      "name": "sp-card",
-      "path": "./sp-card.d.ts",
-      "attributes": [
-        {
-          "name": "asset",
-          "type": "\"file\" | \"folder\" | undefined"
-        },
-        {
-          "name": "variant",
-          "type": "\"standard\" | \"gallery\" | \"quiet\"",
-          "default": "\"standard\""
-        },
-        {
-          "name": "selected",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "heading",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "horizontal",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "small",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "focused",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "toggles",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "subheading",
-          "type": "string",
-          "default": "\"\""
-        }
-      ],
-      "properties": [
-        {
-          "name": "asset",
-          "attribute": "asset",
-          "type": "\"file\" | \"folder\" | undefined"
-        },
-        {
-          "name": "variant",
-          "attribute": "variant",
-          "type": "\"standard\" | \"gallery\" | \"quiet\"",
-          "default": "\"standard\""
-        },
-        {
-          "name": "selected",
-          "attribute": "selected",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "heading",
-          "attribute": "heading",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "horizontal",
-          "attribute": "horizontal",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "small",
-          "attribute": "small",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "focused",
-          "attribute": "focused",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "toggles",
-          "attribute": "toggles",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "subheading",
-          "attribute": "subheading",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "shadowRoot",
-          "type": "ShadowRoot"
-        }
-      ],
-      "events": [
-        {
-          "name": "change",
-          "description": "Announces a change in the `selected` property of a card"
-        },
-        {
-          "name": "click"
-        }
-      ],
-      "slots": [
-        {
-          "name": "preview",
-          "description": "This is the preview image for Gallery Cards"
-        },
-        {
-          "name": "cover-photo",
-          "description": "This is the cover photo for Default and Quiet Cards"
-        },
-        {
-          "name": "heading",
-          "description": "HTML content to be listed as the heading"
-        },
-        {
-          "name": "subheading",
-          "description": "HTML content to be listed as the subheading"
-        },
-        {
-          "name": "description",
-          "description": "A description of the card"
-        },
-        {
-          "name": "actions",
-          "description": "an `sp-action-menu` element outlining actions to take on the represened object"
-        },
-        {
-          "name": "footer",
-          "description": "Footer text"
-        }
-      ]
-    }
-  ]
-}

package/src/Card.ts

@@ -1,237 +0,0 @@
-/*
-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 {
-    html,
-    SpectrumElement,
-    property,
-    CSSResultArray,
-    TemplateResult,
-    PropertyValues,
-    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';
-import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
-
-/**
- * @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) {
-    public static get styles(): CSSResultArray {
-        return [cardStyles];
-    }
-
-    @property()
-    public asset?: 'file' | 'folder';
-
-    @property({ reflect: true })
-    public variant: 'standard' | 'gallery' | 'quiet' = 'standard';
-
-    @property({ type: Boolean, reflect: true })
-    public selected = false;
-
-    @property()
-    public heading = '';
-
-    @property({ type: Boolean, reflect: true })
-    public horizontal = false;
-
-    @property({ type: Boolean, reflect: true })
-    public small = false;
-
-    @property({ type: Boolean, reflect: true })
-    public focused = false;
-
-    @property({ type: Boolean, reflect: true })
-    public toggles = false;
-
-    @property()
-    public subheading = '';
-
-    public constructor() {
-        super();
-        this.addEventListener('focusin', this.handleFocusin);
-        this.shadowRoot.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
-    }
-
-    private handleFocusin = (event: Event): void => {
-        this.focused = true;
-        const target = event.composedPath()[0];
-        if (target !== this) {
-            this.removeEventListener('keydown', this.handleKeydown);
-            return;
-        }
-        this.addEventListener('keydown', this.handleKeydown);
-    };
-
-    private handleFocusout(event: Event): void {
-        this.focused = false;
-        const target = event.composedPath()[0];
-        if (target === this) {
-            this.removeEventListener('keydown', this.handleKeydown);
-        }
-    }
-
-    private handleKeydown(event: KeyboardEvent): void {
-        const { code } = event;
-        /* istanbul ignore else */
-        if (code === 'Space') {
-            this.toggleSelected();
-        }
-    }
-
-    private handleSelectedChange(event: Event & { target: Checkbox }): void {
-        const { target } = event;
-        this.selected = target.checked;
-    }
-
-    public toggleSelected(): void {
-        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;
-        }
-    }
-
-    protected get renderHeading(): TemplateResult {
-        return html`
-            <div class="title">
-                <slot name="heading">
-                    ${this.heading}
-                </slot>
-            </div>
-        `;
-    }
-
-    protected get renderPreviewImage(): TemplateResult {
-        return html`
-            <sp-asset id="preview" variant=${ifDefined(this.asset)}>
-                <slot name="preview"></slot>
-            </sp-asset>
-        `;
-    }
-
-    private renderImage(): TemplateResult {
-        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;
-    }
-
-    protected render(): TemplateResult {
-        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.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">
-                                  <slot name="actions"></slot>
-                              </div>
-                          `
-                        : html``}
-                </div>
-                ${this.variant !== 'gallery'
-                    ? html`
-                          <div class="content">
-                              <div class="subtitle">
-                                  <slot name="subheading">
-                                      ${this.subheading}
-                                  </slot>
-                              </div>
-                              <slot name="description"></slot>
-                          </div>
-                      `
-                    : html``}
-            </div>
-            ${this.variant === 'standard'
-                ? html`
-                      <slot name="footer"></slot>
-                  `
-                : html``}
-        `;
-    }
-
-    protected firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.setAttribute('role', 'figure');
-        this.tabIndex = 0;
-    }
-}

package/src/card.css

@@ -1,58 +0,0 @@
-/*
-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 './spectrum-card.css';
-
-/* The description slot has a psuedo-element that also needs to receive the font styling. 
-We need to add the declaration to the slot as well */
-slot[name='description'] {
-    font-size: var(
-        --spectrum-card-subtitle-text-size,
-        var(--spectrum-global-dimension-font-size-50)
-    );
-}
-
-#preview,
-#cover-photo {
-    overflow: hidden;
-}
-
-#preview ::slotted(*),
-#cover-photo ::slotted(*) {
-    width: 100%;
-    display: block;
-
-    /* Since we're using <img> tags instead of background-image for the cover photo,
-    we need an additional object-fit property to preserve the aspect ratio of the image
-    In spectrum-css, background-size is used */
-    object-fit: cover;
-}
-
-:host(:not([variant='gallery'])) #preview ::slotted(*) {
-    height: 100%;
-}
-
-:host([horizontal]) #preview {
-    width: auto;
-}
-
-sp-quick-actions {
-    z-index: 1;
-}
-
-/**
- * Allow that the heading element will take specified use of the available width whether 
- * "actions" are supplied to the element or not.
- **/
-.heading {
-    width: var(--spectrum-card-title-width);
-}

package/src/card.css.ts

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

package/src/index.ts

@@ -1,12 +0,0 @@
-/*
-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.
-*/
-export * from './Card.js';