@spectrum-web-components/card 1.0.1-alpha.67 → 1.0.1

package/test/card.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["card.test.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 '@spectrum-web-components/card/sp-card.js';\nimport { Card } from '@spectrum-web-components/card';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport {\n    Default,\n    Horizontal,\n    href,\n    StoryArgs,\n} from '../stories/card.stories.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\nimport { spy } from 'sinon';\nimport { spaceEvent } from '../../../test/testing-helpers.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('card', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Card>(\n                html`\n                    <sp-card heading=\"Card Heading\" subheading=\"JPG\">\n                        <img\n                            slot=\"preview\"\n                            src=\"https://picsum.photos/532/192\"\n                            alt=\"Slotted Preview\"\n                        />\n                        <div slot=\"footer\">Footer</div>\n                    </sp-card>\n                `\n            )\n    );\n    it('loads', async () => {\n        const el = await fixture<Card>(\n            html`\n                <sp-card heading=\"Card Heading\" subheading=\"JPG\">\n                    <img\n                        slot=\"preview\"\n                        src=\"https://picsum.photos/532/192\"\n                        alt=\"Slotted Preview\"\n                    />\n                    <div slot=\"footer\">Footer</div>\n                </sp-card>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('loads - [quiet]', async () => {\n        const el = await fixture<Card>(\n            html`\n                <sp-card\n                    variant=\"quiet\"\n                    heading=\"Card Heading\"\n                    subheading=\"JPG\"\n                >\n                    <img\n                        slot=\"preview\"\n                        src=\"https://picsum.photos/532/192\"\n                        alt=\"Slotted Preview\"\n                    />\n                    <div slot=\"description\">10/15/18</div>\n                    <div slot=\"footer\">Footer</div>\n                </sp-card>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n\n    it('loads - [quiet][small]', async () => {\n        const el = await fixture<Card>(\n            html`\n                <sp-card\n                    size=\"s\"\n                    heading=\"Card Heading\"\n                    subheading=\"JPG\"\n                    variant=\"quiet\"\n                    style=\"width: 115px;\"\n                >\n                    <img\n                        src=\"https://picsum.photos/300/400\"\n                        alt=\"Demo Graphic\"\n                        slot=\"preview\"\n                    />\n                    <div slot=\"footer\">Footer</div>\n                    <sp-action-menu\n                        slot=\"actions\"\n                        placement=\"bottom-end\"\n                        label=\"More Actions\"\n                        quiet\n                    >\n                        <sp-menu>\n                            <sp-menu-item>Deselect</sp-menu-item>\n                            <sp-menu-item>Select Inverse</sp-menu-item>\n                            <sp-menu-item>Feather...</sp-menu-item>\n                            <sp-menu-item>Select and Mask...</sp-menu-item>\n                            <sp-menu-divider></sp-menu-divider>\n                            <sp-menu-item>Save Selection</sp-menu-item>\n                            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n                        </sp-menu>\n                    </sp-action-menu>\n                </sp-card>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('loads - [gallery]', async () => {\n        const el = await fixture<Card>(\n            html`\n                <sp-card\n                    variant=\"gallery\"\n                    heading=\"Card Heading\"\n                    subheading=\"JPG\"\n                >\n                    <img\n                        slot=\"preview\"\n                        src=\"https://picsum.photos/532/192\"\n                        alt=\"Slotted Preview\"\n                    />\n                    <div slot=\"description\">10/15/18</div>\n                    <div slot=\"footer\">Footer</div>\n                </sp-card>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('loads - [horizontal]', async () => {\n        const el = await fixture<Card>(\n            Horizontal(Horizontal.args as StoryArgs)\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('[href] is clickable', async () => {\n        const clickSpy = spy();\n        const el = await fixture<Card>(href({}));\n\n        await elementUpdated(el);\n\n        el.addEventListener('click', (event: Event) => {\n            const composedTarget = event.composedPath()[0] as HTMLElement;\n            if (composedTarget.id !== 'like-anchor') return;\n            clickSpy();\n        });\n\n        el.click();\n\n        expect(clickSpy.callCount).to.equal(1);\n\n        (el.shadowRoot.querySelector('#like-anchor') as HTMLElement).click();\n\n        expect(clickSpy.callCount).to.equal(2);\n\n        const img = el.querySelector('img') as HTMLImageElement;\n        const boundingRect = img.getBoundingClientRect();\n        await sendMouse({\n            steps: [\n                {\n                    type: 'move',\n                    position: [\n                        boundingRect.x + boundingRect.width / 2,\n                        boundingRect.y + boundingRect.height / 2,\n                    ],\n                },\n                {\n                    type: 'down',\n                },\n                {\n                    type: 'up',\n                },\n            ],\n        });\n\n        expect(clickSpy.callCount).to.equal(3);\n    });\n    it('links in [href] do not pass their click', async () => {\n        const clickSpy = spy();\n        const el = await fixture<Card>(href({}));\n        el.setAttribute(\n            'style',\n            [\n                'width: 200px;',\n                'display: inline-flex;',\n                '--mod-card-preview-minimum-height: 136px;',\n                '--mod-actionbutton-height: 32px;',\n                '--spectrum-icon-tshirt-size-height: 18px;',\n                '--spectrum-icon-tshirt-size-width: 18px;',\n            ].join('')\n        );\n\n        await elementUpdated(el);\n        el.addEventListener('click', (event: Event) => {\n            event.preventDefault();\n            const path = event.composedPath();\n            const hasLikeAnchor = path.some(\n                (el) => (el as HTMLElement).id === 'like-anchor'\n            );\n            if (!hasLikeAnchor) return;\n            clickSpy();\n        });\n\n        el.click();\n\n        expect(clickSpy.callCount).to.equal(1);\n\n        const footer = el.querySelector('[slot=\"footer\"]') as HTMLElement;\n        let boundingRect = footer.getBoundingClientRect();\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [boundingRect.x, boundingRect.y],\n                },\n            ],\n        });\n\n        expect(clickSpy.callCount).to.equal(2);\n\n        const link = el.querySelector(\n            'sp-link[href=\"https://google.com\"]'\n        ) as HTMLElement;\n        link.setAttribute('style', 'display: block');\n        boundingRect = link.getBoundingClientRect();\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [boundingRect.x + 2, boundingRect.y + 2],\n                },\n            ],\n        });\n\n        expect(clickSpy.callCount).to.equal(2);\n    });\n    it('converts `Space` to `click` event', async () => {\n        const clickSpy = spy();\n        const handleClick = (): void => clickSpy();\n        const el = await fixture<Card>(Default(Default.args));\n        el.addEventListener('click', handleClick);\n\n        await elementUpdated(el);\n        expect(el.focused, 'default focused').to.be.false;\n\n        el.dispatchEvent(new Event('focusin'));\n        await elementUpdated(el);\n        expect(el.focused, 'first time focused').to.be.true;\n\n        el.dispatchEvent(spaceEvent());\n        await elementUpdated(el);\n        expect(el.focused, 'still focused').to.be.true;\n        expect(clickSpy.called).to.be.true;\n        expect(clickSpy.calledOnce).to.be.true;\n    });\n    it('can be `[toggles]`', async () => {\n        const el = await fixture<Card>(Default(Default.args));\n        el.toggles = true;\n\n        await elementUpdated(el);\n\n        const checkbox = el.shadowRoot.querySelector('sp-checkbox') as Checkbox;\n        expect(el.focused, 'default focused').to.be.false;\n        expect(el.selected, 'default selected').to.be.false;\n\n        el.dispatchEvent(new Event('focusin'));\n\n        await elementUpdated(el);\n        expect(el.focused, 'first time focused').to.be.true;\n        expect(el.selected, 'still not selected').to.be.false;\n\n        el.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(el.focused, 'still focused').to.be.true;\n        expect(el.selected, 'first selected').to.be.true;\n\n        el.addEventListener('change', (event: Event) => event.preventDefault());\n        el.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(el.focused, 'still focused after default prevented').to.be.true;\n        expect(el.selected, 'first selected after default prevented').to.be\n            .true;\n\n        checkbox.dispatchEvent(\n            new Event('focusin', {\n                composed: true,\n                bubbles: true,\n            })\n        );\n        checkbox.focus();\n\n        await elementUpdated(el);\n        expect(el.focused, 'still focused, again').to.be.true;\n        expect(el.selected, 'still selected').to.be.true;\n\n        el.dispatchEvent(new Event('focusin'));\n\n        await elementUpdated(el);\n        expect(el.focused, 'focused, again').to.be.true;\n        expect(el.selected, 'still selected, again').to.be.true;\n\n        el.dispatchEvent(new Event('focusout'));\n\n        await elementUpdated(el);\n        expect(el.focused, 'still not focused, again').to.be.false;\n        expect(el.selected, 'still selected, again 2').to.be.true;\n\n        el.dispatchEvent(new Event('focusout'));\n\n        checkbox.click();\n\n        await elementUpdated(el);\n        expect(el.focused, 'still not focused, again 2').to.be.false;\n        // change event is prevented\n        expect(el.selected, 'still selected, again 3').to.be.true;\n    });\n\n    it('announces when `[toggles]`', async () => {\n        const changeSpy = spy();\n        const el = await fixture<Card>(Default(Default.args));\n        el.toggles = true;\n        el.addEventListener('change', changeSpy);\n\n        await elementUpdated(el);\n\n        const checkbox = el.shadowRoot.querySelector('sp-checkbox') as Checkbox;\n        expect(el.selected, 'default to not selected').to.be.false;\n        checkbox.click();\n        await elementUpdated(el);\n\n        expect(el.selected, 'selected').to.be.true;\n        expect(changeSpy.callCount).to.equal(1);\n        checkbox.click();\n        await elementUpdated(el);\n\n        expect(el.selected, 'no longer selected').to.be.false;\n        expect(changeSpy.callCount).to.equal(2);\n    });\n    it('displays the `heading` attribute as `.title`', async () => {\n        const testHeading = 'This is a test heading';\n        const el = await fixture<Card>(\n            html`\n                <sp-card heading=${testHeading} subheading=\"JPG\">\n                    <img\n                        slot=\"preview\"\n                        src=\"https://picsum.photos/532/192\"\n                        alt=\"Slotted Preview\"\n                    />\n                    <div slot=\"footer\">Footer</div>\n                </sp-card>\n            `\n        );\n\n        await elementUpdated(el);\n\n        const root = el.shadowRoot ? el.shadowRoot : el;\n        const headingEl = root.querySelector('.title');\n\n        expect(headingEl, 'did not find title element').to.not.be.null;\n        expect((headingEl as HTMLDivElement).textContent).to.contain(\n            testHeading,\n            'the heading renders in the element'\n        );\n    });\n    it('displays the slotted content as `.title`', async () => {\n        const testHeading = 'This is a test heading';\n        const el = await fixture<Card>(\n            html`\n                <sp-card subheading=\"JPG\">\n                    <h1 slot=\"heading\">${testHeading}</h1>\n                    <img\n                        slot=\"preview\"\n                        src=\"https://picsum.photos/532/192\"\n                        alt=\"Slotted Preview\"\n                    />\n                    <div slot=\"footer\">Footer</div>\n                </sp-card>\n            `\n        );\n\n        await elementUpdated(el);\n\n        const root = el.shadowRoot ? el.shadowRoot : el;\n        const headingSlot = root.querySelector(\n            '.title [name=\"heading\"]'\n        ) as HTMLSlotElement;\n\n        expect(headingSlot, 'did not find slot element').to.not.be.null;\n        const nodes = headingSlot.assignedNodes();\n        const h1Element = nodes.find(\n            (node) => (node as HTMLElement).tagName === 'H1'\n        );\n        expect(h1Element, 'did not find H1 element').to.not.be.null;\n        expect((h1Element as HTMLHeadingElement).textContent).to.contain(\n            testHeading,\n            'the slotted content renders in the element'\n        );\n    });\n});\n"],
+  "mappings": ";AAYA,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AAEP,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAEtC,SAAS,QAAQ,MAAM;AACnB;AAAA,IACI,YACI,MAAM;AAAA,MACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUJ;AAAA,EACR;AACA,KAAG,SAAS,YAAY;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,mBAAmB,YAAY;AAC9B,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,0BAA0B,YAAY;AACrC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,qBAAqB,YAAY;AAChC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,wBAAwB,YAAY;AACnC,UAAM,KAAK,MAAM;AAAA,MACb,WAAW,WAAW,IAAiB;AAAA,IAC3C;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,uBAAuB,YAAY;AAClC,UAAM,WAAW,IAAI;AACrB,UAAM,KAAK,MAAM,QAAc,KAAK,CAAC,CAAC,CAAC;AAEvC,UAAM,eAAe,EAAE;AAEvB,OAAG,iBAAiB,SAAS,CAAC,UAAiB;AAC3C,YAAM,iBAAiB,MAAM,aAAa,EAAE,CAAC;AAC7C,UAAI,eAAe,OAAO,cAAe;AACzC,eAAS;AAAA,IACb,CAAC;AAED,OAAG,MAAM;AAET,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAErC,IAAC,GAAG,WAAW,cAAc,cAAc,EAAkB,MAAM;AAEnE,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAErC,UAAM,MAAM,GAAG,cAAc,KAAK;AAClC,UAAM,eAAe,IAAI,sBAAsB;AAC/C,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,IAAI,aAAa,QAAQ;AAAA,YACtC,aAAa,IAAI,aAAa,SAAS;AAAA,UAC3C;AAAA,QACJ;AAAA,QACA;AAAA,UACI,MAAM;AAAA,QACV;AAAA,QACA;AAAA,UACI,MAAM;AAAA,QACV;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EACzC,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,UAAM,WAAW,IAAI;AACrB,UAAM,KAAK,MAAM,QAAc,KAAK,CAAC,CAAC,CAAC;AACvC,OAAG;AAAA,MACC;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,EAAE,KAAK,EAAE;AAAA,IACb;AAEA,UAAM,eAAe,EAAE;AACvB,OAAG,iBAAiB,SAAS,CAAC,UAAiB;AAC3C,YAAM,eAAe;AACrB,YAAM,OAAO,MAAM,aAAa;AAChC,YAAM,gBAAgB,KAAK;AAAA,QACvB,CAACA,QAAQA,IAAmB,OAAO;AAAA,MACvC;AACA,UAAI,CAAC,cAAe;AACpB,eAAS;AAAA,IACb,CAAC;AAED,OAAG,MAAM;AAET,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAErC,UAAM,SAAS,GAAG,cAAc,iBAAiB;AACjD,QAAI,eAAe,OAAO,sBAAsB;AAChD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU,CAAC,aAAa,GAAG,aAAa,CAAC;AAAA,QAC7C;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAErC,UAAM,OAAO,GAAG;AAAA,MACZ;AAAA,IACJ;AACA,SAAK,aAAa,SAAS,gBAAgB;AAC3C,mBAAe,KAAK,sBAAsB;AAC1C,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU,CAAC,aAAa,IAAI,GAAG,aAAa,IAAI,CAAC;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EACzC,CAAC;AACD,KAAG,qCAAqC,YAAY;AAChD,UAAM,WAAW,IAAI;AACrB,UAAM,cAAc,MAAY,SAAS;AACzC,UAAM,KAAK,MAAM,QAAc,QAAQ,QAAQ,IAAI,CAAC;AACpD,OAAG,iBAAiB,SAAS,WAAW;AAExC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,iBAAiB,EAAE,GAAG,GAAG;AAE5C,OAAG,cAAc,IAAI,MAAM,SAAS,CAAC;AACrC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,oBAAoB,EAAE,GAAG,GAAG;AAE/C,OAAG,cAAc,WAAW,CAAC;AAC7B,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,eAAe,EAAE,GAAG,GAAG;AAC1C,WAAO,SAAS,MAAM,EAAE,GAAG,GAAG;AAC9B,WAAO,SAAS,UAAU,EAAE,GAAG,GAAG;AAAA,EACtC,CAAC;AACD,KAAG,sBAAsB,YAAY;AACjC,UAAM,KAAK,MAAM,QAAc,QAAQ,QAAQ,IAAI,CAAC;AACpD,OAAG,UAAU;AAEb,UAAM,eAAe,EAAE;AAEvB,UAAM,WAAW,GAAG,WAAW,cAAc,aAAa;AAC1D,WAAO,GAAG,SAAS,iBAAiB,EAAE,GAAG,GAAG;AAC5C,WAAO,GAAG,UAAU,kBAAkB,EAAE,GAAG,GAAG;AAE9C,OAAG,cAAc,IAAI,MAAM,SAAS,CAAC;AAErC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,oBAAoB,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,UAAU,oBAAoB,EAAE,GAAG,GAAG;AAEhD,OAAG,cAAc,WAAW,CAAC;AAE7B,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,eAAe,EAAE,GAAG,GAAG;AAC1C,WAAO,GAAG,UAAU,gBAAgB,EAAE,GAAG,GAAG;AAE5C,OAAG,iBAAiB,UAAU,CAAC,UAAiB,MAAM,eAAe,CAAC;AACtE,OAAG,cAAc,WAAW,CAAC;AAE7B,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,uCAAuC,EAAE,GAAG,GAAG;AAClE,WAAO,GAAG,UAAU,wCAAwC,EAAE,GAAG,GAC5D;AAEL,aAAS;AAAA,MACL,IAAI,MAAM,WAAW;AAAA,QACjB,UAAU;AAAA,QACV,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AACA,aAAS,MAAM;AAEf,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,sBAAsB,EAAE,GAAG,GAAG;AACjD,WAAO,GAAG,UAAU,gBAAgB,EAAE,GAAG,GAAG;AAE5C,OAAG,cAAc,IAAI,MAAM,SAAS,CAAC;AAErC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,gBAAgB,EAAE,GAAG,GAAG;AAC3C,WAAO,GAAG,UAAU,uBAAuB,EAAE,GAAG,GAAG;AAEnD,OAAG,cAAc,IAAI,MAAM,UAAU,CAAC;AAEtC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,0BAA0B,EAAE,GAAG,GAAG;AACrD,WAAO,GAAG,UAAU,yBAAyB,EAAE,GAAG,GAAG;AAErD,OAAG,cAAc,IAAI,MAAM,UAAU,CAAC;AAEtC,aAAS,MAAM;AAEf,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,SAAS,4BAA4B,EAAE,GAAG,GAAG;AAEvD,WAAO,GAAG,UAAU,yBAAyB,EAAE,GAAG,GAAG;AAAA,EACzD,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM,QAAc,QAAQ,QAAQ,IAAI,CAAC;AACpD,OAAG,UAAU;AACb,OAAG,iBAAiB,UAAU,SAAS;AAEvC,UAAM,eAAe,EAAE;AAEvB,UAAM,WAAW,GAAG,WAAW,cAAc,aAAa;AAC1D,WAAO,GAAG,UAAU,yBAAyB,EAAE,GAAG,GAAG;AACrD,aAAS,MAAM;AACf,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,UAAU,EAAE,GAAG,GAAG;AACtC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,aAAS,MAAM;AACf,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,oBAAoB,EAAE,GAAG,GAAG;AAChD,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EAC1C,CAAC;AACD,KAAG,gDAAgD,YAAY;AAC3D,UAAM,cAAc;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA,mCACuB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStC;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,GAAG,aAAa,GAAG,aAAa;AAC7C,UAAM,YAAY,KAAK,cAAc,QAAQ;AAE7C,WAAO,WAAW,4BAA4B,EAAE,GAAG,IAAI,GAAG;AAC1D,WAAQ,UAA6B,WAAW,EAAE,GAAG;AAAA,MACjD;AAAA,MACA;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,4CAA4C,YAAY;AACvD,UAAM,cAAc;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA,yCAE6B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS5C;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,GAAG,aAAa,GAAG,aAAa;AAC7C,UAAM,cAAc,KAAK;AAAA,MACrB;AAAA,IACJ;AAEA,WAAO,aAAa,2BAA2B,EAAE,GAAG,IAAI,GAAG;AAC3D,UAAM,QAAQ,YAAY,cAAc;AACxC,UAAM,YAAY,MAAM;AAAA,MACpB,CAAC,SAAU,KAAqB,YAAY;AAAA,IAChD;AACA,WAAO,WAAW,yBAAyB,EAAE,GAAG,IAAI,GAAG;AACvD,WAAQ,UAAiC,WAAW,EAAE,GAAG;AAAA,MACrD;AAAA,MACA;AAAA,IACJ;AAAA,EACJ,CAAC;AACL,CAAC;",
+  "names": ["el"]
+}

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/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 { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
-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 headingStyles from '@spectrum-web-components/styles/heading.js';
-import detailStyles from '@spectrum-web-components/styles/detail.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) {
-    public static get styles(): CSSResultArray {
-        return [headingStyles, detailStyles, 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 spectrum-Heading spectrum-Heading--sizeXS">
-                <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;
-    }
-
-    private get renderSubtitleAndDescription(): TemplateResult {
-        return html`
-            <div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
-                <slot name="subheading">
-                    ${this.subheading}
-                </slot>
-            </div>
-            <slot name="description"></slot>
-        `;
-    }
-
-    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'
-                        ? this.renderSubtitleAndDescription
-                        : html``}
-                    ${this.variant !== 'quiet' || !this.small
-                        ? html`
-                              <div class="actionButton">
-                                  <slot name="actions"></slot>
-                              </div>
-                          `
-                        : html``}
-                </div>
-                ${this.variant !== 'gallery'
-                    ? html`
-                          <div class="content">
-                              ${this.renderSubtitleAndDescription}
-                          </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.
- **/
-.title {
-    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:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent;border-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));text-decoration:none}: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:var(--spectrum-card-coverphoto-border-bottom-size,var(--spectrum-alias-border-size-thin)) solid 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%}:host([dir=ltr]) .body{padding-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) .body{padding-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300))}:host([dir=ltr]) .body{padding-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) .body{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))}.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{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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))}::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))}:host([dir=rtl]) ::slotted([slot=footer]){margin-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300))}:host([dir=ltr]) ::slotted([slot=footer]){margin-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) ::slotted([slot=footer]){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}.header{display:flex;align-items:baseline}.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))}:host([dir=rtl][horizontal]) #preview{border-top-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][horizontal]) #preview{border-top-right-radius:0}:host([dir=rtl][horizontal]) #preview{border-top-left-radius:0}:host([dir=ltr][horizontal]) #preview{border-bottom-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][horizontal]) #preview{border-bottom-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][horizontal]) #preview{border-bottom-right-radius:0}:host([dir=rtl][horizontal]) #preview{border-bottom-left-radius:0}:host([dir=ltr][horizontal]) #preview{border-right:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([dir=rtl][horizontal]) #preview{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)}: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{border-color: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(:hover){border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}:host(.focus-visible),: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(.focus-visible),: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))}#cover-photo{background-color:var(--spectrum-card-coverphoto-background-color,var(--spectrum-global-color-gray-200));border-bottom-color:var(--spectrum-card-coverphoto-border-color,var(--spectrum-global-color-gray-200))}::slotted([slot=footer]){border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}: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].focus-visible),:host([variant=gallery][selected]),:host([variant=quiet].focus-visible),:host([variant=quiet].focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery].focus-visible),:host([variant=gallery]:focus-visible),:host([variant=gallery][selected]),:host([variant=quiet].focus-visible),:host([variant=quiet]:focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery].focus-visible) #preview,:host([variant=gallery].focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet].focus-visible) #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,:host([variant=gallery]:focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet].focus-visible) #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].focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet].focus-visible) #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].focus-visible) #preview:before,:host([variant=gallery]:focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet].focus-visible) #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))}:host([horizontal]) #preview{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))}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}.title{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';