kemet-ui 3.1.0 → 4.0.1

package/dist/components/kemet-card/docs/stories.d.ts

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-card';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-avatar/kemet-avatar';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Header: Story;
-export declare const Footer: Story;
-export declare const HeaderAndFooter: Story;
-export declare const Image: Story;
-export declare const Video: Story;
-export declare const Embed: Story;
-export declare const Avatar: Story;
-export declare const Full: Story;

package/dist/components/kemet-card/docs/stories.js

@@ -1,120 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-card';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-avatar/kemet-avatar';
-import '../../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Card',
-    component: 'kemet-card',
-    args: {
-        bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        captionText: '',
-        isCentered: false,
-    },
-    argTypes: {
-        mediaType: {
-            control: { type: 'radio' },
-            options: ['none', 'image', 'avatar', 'video', 'embed'],
-        },
-        elevation: {
-            control: { type: 'select' },
-            options: ['none', 'layer-1', 'layer-2', 'layer-3', 'layer-4', 'layer-5', 'layer-6', 'inner'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-card ?center=${args.isCentered} kemet-elevation="${ifDefined(args.elevation !== 'none' ? args.elevation : null)}">
-    ${args.showHeader ? html `<div slot="header">This is the header.</div>` : null}
-    ${showMedia(args.mediaType)}
-    ${args.captionText && args.captionText !== '' ? html `<div slot="caption">${args.captionText}</div>` : null}
-    ${args.bodyText}
-    ${args.showFooter ? html `<div slot="footer">This is the footer.</div>` : null}
-  </kemet-card>
-`;
-const showMedia = (type) => {
-    if (type === 'image') {
-        return html `<img slot="media" src="https://via.placeholder.com/1920x1080" alt="a placeholder" />`;
-    }
-    if (type === 'avatar') {
-        return html `
-      <kemet-avatar circle slot="media">
-        <kemet-icon size="196" kemet-margin="xs" icon="person"></kemet-icon>
-      </kemet-avatar>
-    `;
-    }
-    if (type === 'video') {
-        return html `
-      <video slot="media" controls>
-        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
-    `;
-    }
-    if (type === 'embed') {
-        return html `
-      <iframe slot="media" width="100%" style="aspect-ratio:16/9;" src="https://www.youtube.com/embed/5gBqTXctxO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-    `;
-    }
-    return null;
-};
-export const Standard = {
-    render: (args) => Template(args),
-};
-export const Header = {
-    render: (args) => Template(args),
-    args: {
-        showHeader: true
-    }
-};
-export const Footer = {
-    render: (args) => Template(args),
-    args: {
-        showFooter: true
-    }
-};
-export const HeaderAndFooter = {
-    render: (args) => Template(args),
-    args: {
-        showHeader: true,
-        showFooter: true
-    }
-};
-export const Image = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'image'
-    }
-};
-export const Video = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'video'
-    }
-};
-export const Embed = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'embed'
-    }
-};
-export const Avatar = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'avatar',
-        isCentered: true
-    }
-};
-export const Full = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'embed',
-        showHeader: true,
-        showFooter: true,
-        elevation: 'layer-4',
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-card/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-card/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-card';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-avatar/kemet-avatar';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Card',\n  component: 'kemet-card',\n  args: {\n    bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n    captionText: '',\n    isCentered: false,\n  },\n  argTypes: {\n    mediaType: {\n      control: { type: 'radio' },\n      options: ['none', 'image', 'avatar', 'video', 'embed'],\n    },\n    elevation: {\n      control: { type: 'select' },\n      options: ['none', 'layer-1', 'layer-2', 'layer-3', 'layer-4', 'layer-5', 'layer-6', 'inner'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-card ?center=${args.isCentered} kemet-elevation=\"${ifDefined(args.elevation !== 'none' ? args.elevation : null)}\">\n    ${args.showHeader ? html`<div slot=\"header\">This is the header.</div>` : null}\n    ${showMedia(args.mediaType)}\n    ${args.captionText && args.captionText !== '' ? html`<div slot=\"caption\">${args.captionText}</div>` : null}\n    ${args.bodyText}\n    ${args.showFooter ? html`<div slot=\"footer\">This is the footer.</div>` : null}\n  </kemet-card>\n`;\n\nconst showMedia = (type) => {\n  if (type === 'image') {\n    return html`<img slot=\"media\" src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />`;\n  }\n\n  if (type === 'avatar') {\n    return html`\n      <kemet-avatar circle slot=\"media\">\n        <kemet-icon size=\"196\" kemet-margin=\"xs\" icon=\"person\"></kemet-icon>\n      </kemet-avatar>\n    `;\n  }\n\n  if (type === 'video') {\n    return html`\n      <video slot=\"media\" controls>\n        <source src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      </video>\n    `;\n  }\n\n  if (type === 'embed') {\n    return html`\n      <iframe slot=\"media\" width=\"100%\" style=\"aspect-ratio:16/9;\" src=\"https://www.youtube.com/embed/5gBqTXctxO8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n    `;\n  }\n\n  return null;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const Header: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showHeader: true\n  }\n};\n\nexport const Footer: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showFooter: true\n  }\n};\n\nexport const HeaderAndFooter: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showHeader: true,\n    showFooter: true\n  }\n};\n\nexport const Image: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'image'\n  }\n};\n\nexport const Video: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'video'\n  }\n};\n\nexport const Embed: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'embed'\n  }\n};\n\nexport const Avatar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'avatar',\n    isCentered: true\n  }\n};\n\nexport const Full: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'embed',\n    showHeader: true,\n    showFooter: true,\n    elevation: 'layer-4',\n  }\n}\n"]}

package/dist/components/kemet-card/kemet-card.d.ts

@@ -1,47 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-card
- * @summary A highly configurable panel design to display media and information.
- *
- * @prop {boolean} center - Centers the elements in the card.
- *
- * @slot default - The contents of the alert.
- * @slot header - The card's header.
- * @slot media - A slot for images, videos, or embeds.
- * @slot caption - Text for the media slot.
- * @slot footer - The card's footer.
- *
- *
- * @csspart media - The media area of the card.
- * @csspart body - The main contents of the card.
- *
- * @cssproperty --kemet-card-padding - The space around elements.
- * @cssproperty --kemet-card-border-color - The color of the borders.
- * @cssproperty --kemet-card-color - The color of the text. Default:
- * @cssproperty --kemet-card-max-width - The max width of the card.
- * @cssproperty --kemet-card-border - The border around the card.
- * @cssproperty --kemet-card-border-radius - The border radius of the card.
- * @cssproperty --kemet-card-background-color - The background color.
- * @cssproperty --kemet-card-body-padding - The body spacing.
- * @cssproperty --kemet-card-header-padding - The header spacing.
- * @cssproperty --kemet-card-header-border-bottom - The header border.
- * @cssproperty --kemet-card-caption-color - The caption text color.
- * @cssproperty --kemet-card-caption-padding - The caption spacing.
- * @cssproperty --kemet-card-caption-background-color - The caption background color.
- * @cssproperty --kemet-card-footer-padding - The footer spacing.
- * @cssproperty --kemet-card-footer-border-top - The footer border.
- *
- */
-export default class KemetCard extends LitElement {
-    static styles: import("lit").CSSResult[];
-    center: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-card': KemetCard;
-    }
-}

package/dist/components/kemet-card/kemet-card.js

@@ -1,65 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { stylesBase } from './styles';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-card
- * @summary A highly configurable panel design to display media and information.
- *
- * @prop {boolean} center - Centers the elements in the card.
- *
- * @slot default - The contents of the alert.
- * @slot header - The card's header.
- * @slot media - A slot for images, videos, or embeds.
- * @slot caption - Text for the media slot.
- * @slot footer - The card's footer.
- *
- *
- * @csspart media - The media area of the card.
- * @csspart body - The main contents of the card.
- *
- * @cssproperty --kemet-card-padding - The space around elements.
- * @cssproperty --kemet-card-border-color - The color of the borders.
- * @cssproperty --kemet-card-color - The color of the text. Default:
- * @cssproperty --kemet-card-max-width - The max width of the card.
- * @cssproperty --kemet-card-border - The border around the card.
- * @cssproperty --kemet-card-border-radius - The border radius of the card.
- * @cssproperty --kemet-card-background-color - The background color.
- * @cssproperty --kemet-card-body-padding - The body spacing.
- * @cssproperty --kemet-card-header-padding - The header spacing.
- * @cssproperty --kemet-card-header-border-bottom - The header border.
- * @cssproperty --kemet-card-caption-color - The caption text color.
- * @cssproperty --kemet-card-caption-padding - The caption spacing.
- * @cssproperty --kemet-card-caption-background-color - The caption background color.
- * @cssproperty --kemet-card-footer-padding - The footer spacing.
- * @cssproperty --kemet-card-footer-border-top - The footer border.
- *
- */
-let KemetCard = class KemetCard extends LitElement {
-    render() {
-        return html `
-      <slot name="header"></slot>
-      <div class="media" part="media">
-        <slot name="media"></slot>
-        <slot name="caption"></slot>
-      </div>
-      <div class="body" part="body">
-        <slot></slot>
-      </div>
-      </div>
-      <slot name="footer"></slot>
-    `;
-    }
-};
-KemetCard.styles = [stylesBase];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetCard.prototype, "center", void 0);
-KemetCard = __decorate([
-    customElement('kemet-card')
-], KemetCard);
-export default KemetCard;
-//# sourceMappingURL=kemet-card.js.map

package/dist/components/kemet-card/kemet-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-card.js","sourceRoot":"","sources":["../../../src/components/kemet-card/kemet-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGY,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAM/C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;;AAlBM,gBAAM,GAAG,CAAC,UAAU,CAAC,AAAf,CAAgB;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAJG,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAoB7B;eApBoB,SAAS","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n *\n * @slot default - The contents of the alert.\n * @slot header - The card's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-border-radius - The border radius of the card.\n * @cssproperty --kemet-card-background-color - The background color.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\n *\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\n  }\n}\n"]}

package/dist/components/kemet-card/spec.d.ts

@@ -1 +0,0 @@
-import './kemet-card';

package/dist/components/kemet-card/spec.js

@@ -1,31 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import { getByText } from '@testing-library/dom';
-import './kemet-card';
-describe('Card', () => {
-    const templates = {
-        default: html `
-      <kemet-card>
-        <div slot="header">This is the header.</div>
-        <iframe
-          slot="media"
-          width="100%"
-          style="aspect-ratio:16/9;"
-          src="https://www.youtube.com/embed/5gBqTXctxO8"
-          title="YouTube video player"
-          frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen=""
-        ></iframe>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        <div slot="footer">This is the footer.</div>
-      </kemet-card>
-    `,
-    };
-    it('displays a card', async () => {
-        render(templates.default, document.body);
-        const card = getByText(document.body, 'This is the header.').closest('kemet-card');
-        expect(card).toBeTruthy();
-    });
-});
-//# sourceMappingURL=spec.js.map

package/dist/components/kemet-card/spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-card/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACpB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBZ;KACF,CAAC;IAEF,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvC,MAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QACnF,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { getByText } from '@testing-library/dom';\n\nimport './kemet-card';\n\ndescribe('Card', () => {\n  const templates = {\n    default: html`\n      <kemet-card>\n        <div slot=\"header\">This is the header.</div>\n        <iframe\n          slot=\"media\"\n          width=\"100%\"\n          style=\"aspect-ratio:16/9;\"\n          src=\"https://www.youtube.com/embed/5gBqTXctxO8\"\n          title=\"YouTube video player\"\n          frameborder=\"0\"\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen=\"\"\n        ></iframe>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        <div slot=\"footer\">This is the footer.</div>\n      </kemet-card>\n    `,\n  };\n\n  it('displays a card', async () => {\n    render(templates.default, document.body);\n      const card = getByText(document.body, 'This is the header.').closest('kemet-card');\n      expect(card).toBeTruthy();\n  });\n});\n"]}

package/dist/components/kemet-card/styles.d.ts

@@ -1 +0,0 @@
-export declare const stylesBase: import("lit").CSSResult;

package/dist/components/kemet-card/styles.js

@@ -1,78 +0,0 @@
-import { css } from 'lit';
-export const stylesBase = css `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-card-padding: 1rem;
-    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));
-    --kemet-card-color: rgb(var(--kemet-color-text));
-    --kemet-card-max-width: 600px;
-    --kemet-card-border: 1px solid var(--kemet-card-border-color);
-    --kemet-card-border-radius: 0;
-    --kemet-card-background-color: rgb(var(--kemet-color-white));
-    --kemet-card-body-padding: var(--kemet-card-padding);
-    --kemet-card-header-padding: var(--kemet-card-padding);
-    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);
-    --kemet-card-caption-color: rgb(var(--kemet-color-white));
-    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);
-    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);
-    --kemet-card-footer-padding: var(--kemet-card-padding);
-    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);
-
-    color: var(--kemet-card-color);
-    display: inline-flex;
-    flex-direction: column;
-    max-width: var(--kemet-card-max-width);
-    border: var(--kemet-card-border);
-    border-radius: var(--kemet-card-border-radius);
-    background-color: var(--kemet-card-background-color);
-  }
-
-  :host([center]) {
-    align-items: center;
-    text-align: center;
-  }
-
-  .body {
-    padding: var(--kemet-card-body-padding);
-  }
-
-  .media {
-    position: relative;
-  }
-
-  ::slotted(*) {
-    max-width: 100%;
-  }
-
-  ::slotted(img) {
-    display: flex;
-    max-width: 100%;
-  }
-
-  ::slotted([slot="header"]) {
-    width: 100%;
-    padding: var(--kemet-card-header-padding);
-    border-bottom: var(--kemet-card-header-border-bottom);
-  }
-
-  ::slotted([slot="caption"]) {
-    color: var(--kemet-card-caption-color);
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: var(--kemet-card-caption-padding);
-    background-color: var(--kemet-card-caption-background-color);
-  }
-
-  ::slotted([slot="footer"]) {
-    width: 100%;
-    padding: var(--kemet-card-footer-padding);
-    border-top: var(--kemet-card-footer-border-top);
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/components/kemet-card/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2E5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-card-padding: 1rem;\n    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));\n    --kemet-card-color: rgb(var(--kemet-color-text));\n    --kemet-card-max-width: 600px;\n    --kemet-card-border: 1px solid var(--kemet-card-border-color);\n    --kemet-card-border-radius: 0;\n    --kemet-card-background-color: rgb(var(--kemet-color-white));\n    --kemet-card-body-padding: var(--kemet-card-padding);\n    --kemet-card-header-padding: var(--kemet-card-padding);\n    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);\n    --kemet-card-caption-color: rgb(var(--kemet-color-white));\n    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);\n    --kemet-card-footer-padding: var(--kemet-card-padding);\n    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);\n\n    color: var(--kemet-card-color);\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width);\n    border: var(--kemet-card-border);\n    border-radius: var(--kemet-card-border-radius);\n    background-color: var(--kemet-card-background-color);\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-padding);\n  }\n\n  .media {\n    position: relative;\n  }\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n\n  ::slotted(img) {\n    display: flex;\n    max-width: 100%;\n  }\n\n  ::slotted([slot=\"header\"]) {\n    width: 100%;\n    padding: var(--kemet-card-header-padding);\n    border-bottom: var(--kemet-card-header-border-bottom);\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color);\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding);\n    background-color: var(--kemet-card-caption-background-color);\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    width: 100%;\n    padding: var(--kemet-card-footer-padding);\n    border-top: var(--kemet-card-footer-border-top);\n  }\n`;\n"]}

package/dist/components/kemet-carousel/docs/stories.d.ts

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-carousel';
-import '../kemet-carousel-link';
-import '../kemet-carousel-first';
-import '../kemet-carousel-last';
-import '../kemet-carousel-next';
-import '../kemet-carousel-prev';
-import '../kemet-carousel-slide';
-import '../kemet-carousel-current';
-import '../kemet-carousel-total';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-badge/kemet-badge';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const DescriptionToolbar: Story;
-export declare const PaginationToolbar: Story;
-export declare const InnerToolbar: Story;
-export declare const Arrows: Story;

package/dist/components/kemet-carousel/docs/stories.js

@@ -1,180 +0,0 @@
-import { html } from 'lit';
-import '../kemet-carousel';
-import '../kemet-carousel-link';
-import '../kemet-carousel-first';
-import '../kemet-carousel-last';
-import '../kemet-carousel-next';
-import '../kemet-carousel-prev';
-import '../kemet-carousel-slide';
-import '../kemet-carousel-current';
-import '../kemet-carousel-total';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-badge/kemet-badge';
-import '../../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Carousel',
-    component: 'kemet-carousel',
-    args: {
-        numOfSlides: 5,
-        toolbarType: 'none',
-        options: {
-            perView: 1,
-            perMove: 1,
-            gap: 12,
-            slideshow: 0,
-            rewind: true,
-            center: false,
-        },
-        breakpoints: {
-            768: {
-                perView: 2,
-                gap: 24,
-                rewind: false,
-            },
-            1280: {
-                perView: 2.5,
-                center: true,
-            },
-        },
-    },
-    argTypes: {
-        toolbarType: {
-            control: { type: 'radio' },
-            options: ['none', 'pagination', 'description'],
-        },
-        options: {
-            control: { type: 'object' },
-        },
-        breakpoints: {
-            control: { type: 'object' },
-        },
-    }
-};
-export default meta;
-const Template = (args) => {
-    const makeSlides = () => {
-        const slides = [];
-        for (let i = 0; i < args.numOfSlides; i += 1) {
-            const slideNumber = i + 1;
-            slides.push(html `
-        <kemet-carousel-slide slot="slides">
-          <figure kemet-border="all-1 solid gray-50" kemet-margin="none" kemet-padding="2xl" kemet-elevation="layer-4">
-            <h3 kemet-margin="none">Slide ${slideNumber}</h3>
-            <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" style="max-width:100%" />
-            <figcaption>An image in a carousel.</figcaption>
-          </figure>
-          <span slot="information"><a href="https://google.com" target="_blank">Title</a>. An image of slide ${slideNumber}. </span>
-        </kemet-carousel-slide>
-      `);
-        }
-        return slides;
-    };
-    const makePrevArrow = () => {
-        if (args.arrows) {
-            return html `
-        <kemet-carousel-prev slot="prev">
-          <kemet-icon icon="chevron-left" size="72"></kemet-icon>
-        </kemet-carousel-prev>
-      `;
-        }
-        return null;
-    };
-    const makeNextArrow = () => {
-        if (args.arrows) {
-            return html `
-        <kemet-carousel-next slot="next">
-          <kemet-icon icon="chevron-right" size="72"></kemet-icon>
-        </kemet-carousel-next>
-      `;
-        }
-        return null;
-    };
-    const makePagination = () => {
-        if (args.toolbarType === 'pagination') {
-            const pages = [];
-            for (let i = 0; i < args.numOfSlides; i += 1) {
-                pages.push(html `
-          <kemet-carousel-link slide="${i}" slot="toolbar">${i + 1}</kemet-carousel-link>
-        `);
-            }
-            return html `
-        <kemet-carousel-first slot="toolbar">
-          <kemet-icon icon="chevron-double-left"></kemet-icon>
-        </kemet-carousel-first>
-        <kemet-carousel-prev slot="toolbar">
-          <kemet-icon icon="chevron-left"></kemet-icon>
-        </kemet-carousel-prev>
-        ${pages}
-        <kemet-carousel-next slot="toolbar">
-          <kemet-icon icon="chevron-right"></kemet-icon>
-        </kemet-carousel-next>
-        <kemet-carousel-last slot="toolbar">
-          <kemet-icon icon="chevron-double-right"></kemet-icon>
-        </kemet-carousel-last>
-      `;
-        }
-        return null;
-    };
-    const makeDescription = () => {
-        if (args.toolbarType === 'description') {
-            return html `
-        <div slot="toolbar" kemet-layout="flexrow" kemet-align="middle" kemet-gutters>
-          <div>
-            <kemet-carousel-current></kemet-carousel-current>
-            &nbsp;of&nbsp;
-            <kemet-carousel-total></kemet-carousel-total>
-            :&nbsp;
-            <kemet-carousel-information></kemet-carousel-information>
-          </div>
-          <kemet-carousel-prev kemet-breakpoint="tiny:content">
-            <kemet-badge circle kemet-padding="sm"><kemet-icon icon="chevron-left"></kemet-icon></kemet-badge>
-          </kemet-carousel-prev>
-          <kemet-carousel-next kemet-breakpoint="tiny:content">
-            <kemet-badge circle kemet-padding="sm"><kemet-icon icon="chevron-right"></kemet-icon></kemet-badge>
-          </kemet-carousel-next>
-        </div>
-      `;
-        }
-        return null;
-    };
-    return html `
-    <kemet-carousel index="${args.index}" ?inner=${args.inner} .options=${args.options} .breakpoints=${args.breakpoints}>
-      ${makePrevArrow()}
-      ${makeSlides()}
-      ${makeNextArrow()}
-      ${makePagination()}
-      ${makeDescription()}
-    </kemet-carousel>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-};
-export const DescriptionToolbar = {
-    render: (args) => Template(args),
-    args: {
-        toolbarType: 'description',
-    }
-};
-export const PaginationToolbar = {
-    render: (args) => Template(args),
-    args: {
-        toolbarType: 'pagination',
-    }
-};
-export const InnerToolbar = {
-    render: (args) => Template(args),
-    args: {
-        inner: true,
-        toolbarType: 'pagination',
-    }
-};
-export const Arrows = {
-    render: (args) => Template(args),
-    args: {
-        arrows: true,
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-carousel/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-carousel/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\n\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-carousel';\nimport '../kemet-carousel-link';\nimport '../kemet-carousel-first';\nimport '../kemet-carousel-last';\nimport '../kemet-carousel-next';\nimport '../kemet-carousel-prev';\nimport '../kemet-carousel-slide';\nimport '../kemet-carousel-current';\nimport '../kemet-carousel-total';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-badge/kemet-badge';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Carousel',\n  component: 'kemet-carousel',\n  args: {\n    numOfSlides: 5,\n    toolbarType: 'none',\n    options: {\n      perView: 1,\n      perMove: 1,\n      gap: 12,\n      slideshow: 0,\n      rewind: true,\n      center: false,\n    },\n    breakpoints: {\n      768: {\n        perView: 2,\n        gap: 24,\n        rewind: false,\n      },\n      1280: {\n        perView: 2.5,\n        center: true,\n      },\n    },\n  },\n  argTypes: {\n    toolbarType: {\n      control: { type: 'radio' },\n      options: ['none', 'pagination', 'description'],\n    },\n    options: {\n      control: { type: 'object' },\n    },\n    breakpoints: {\n      control: { type: 'object' },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const makeSlides = () => {\n    const slides = [];\n\n    for (let i = 0; i < args.numOfSlides; i += 1) {\n      const slideNumber = i + 1;\n\n      slides.push(html`\n        <kemet-carousel-slide slot=\"slides\">\n          <figure kemet-border=\"all-1 solid gray-50\" kemet-margin=\"none\" kemet-padding=\"2xl\" kemet-elevation=\"layer-4\">\n            <h3 kemet-margin=\"none\">Slide ${slideNumber}</h3>\n            <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" style=\"max-width:100%\" />\n            <figcaption>An image in a carousel.</figcaption>\n          </figure>\n          <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide ${slideNumber}. </span>\n        </kemet-carousel-slide>\n      `);\n    }\n\n    return slides;\n  };\n\n  const makePrevArrow = () => {\n    if (args.arrows) {\n      return html`\n        <kemet-carousel-prev slot=\"prev\">\n          <kemet-icon icon=\"chevron-left\" size=\"72\"></kemet-icon>\n        </kemet-carousel-prev>\n      `;\n    }\n\n    return null;\n  };\n\n  const makeNextArrow = () => {\n    if (args.arrows) {\n      return html`\n        <kemet-carousel-next slot=\"next\">\n          <kemet-icon icon=\"chevron-right\" size=\"72\"></kemet-icon>\n        </kemet-carousel-next>\n      `;\n    }\n\n    return null;\n  };\n\n  const makePagination = () => {\n    if (args.toolbarType === 'pagination') {\n      const pages = [];\n\n      for (let i = 0; i < args.numOfSlides; i += 1) {\n        pages.push(html`\n          <kemet-carousel-link slide=\"${i}\" slot=\"toolbar\">${i + 1}</kemet-carousel-link>\n        `);\n      }\n\n      return html`\n        <kemet-carousel-first slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-double-left\"></kemet-icon>\n        </kemet-carousel-first>\n        <kemet-carousel-prev slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-left\"></kemet-icon>\n        </kemet-carousel-prev>\n        ${pages}\n        <kemet-carousel-next slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-right\"></kemet-icon>\n        </kemet-carousel-next>\n        <kemet-carousel-last slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-double-right\"></kemet-icon>\n        </kemet-carousel-last>\n      `;\n    }\n\n    return null;\n  };\n\n  const makeDescription = () => {\n    if (args.toolbarType === 'description') {\n      return html`\n        <div slot=\"toolbar\" kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-gutters>\n          <div>\n            <kemet-carousel-current></kemet-carousel-current>\n            &nbsp;of&nbsp;\n            <kemet-carousel-total></kemet-carousel-total>\n            :&nbsp;\n            <kemet-carousel-information></kemet-carousel-information>\n          </div>\n          <kemet-carousel-prev kemet-breakpoint=\"tiny:content\">\n            <kemet-badge circle kemet-padding=\"sm\"><kemet-icon icon=\"chevron-left\"></kemet-icon></kemet-badge>\n          </kemet-carousel-prev>\n          <kemet-carousel-next kemet-breakpoint=\"tiny:content\">\n            <kemet-badge circle kemet-padding=\"sm\"><kemet-icon icon=\"chevron-right\"></kemet-icon></kemet-badge>\n          </kemet-carousel-next>\n        </div>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-carousel index=\"${args.index}\" ?inner=${args.inner} .options=${args.options} .breakpoints=${args.breakpoints}>\n      ${makePrevArrow()}\n      ${makeSlides()}\n      ${makeNextArrow()}\n      ${makePagination()}\n      ${makeDescription()}\n    </kemet-carousel>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const DescriptionToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    toolbarType: 'description',\n  }\n};\n\nexport const PaginationToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    toolbarType: 'pagination',\n  }\n};\n\nexport const InnerToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    inner: true,\n    toolbarType: 'pagination',\n  }\n};\n\nexport const Arrows: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    arrows: true,\n  }\n};\n"]}