kemet-ui 3.0.1 → 4.0.0

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

@@ -1,221 +0,0 @@
-import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-alert';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Alert',
-    component: 'kemet-alert',
-    argTypes: {
-        heading: {
-            control: { type: 'text' },
-        },
-        text: {
-            control: { type: 'text' },
-        },
-        icon: {
-            control: { type: 'select' },
-            options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],
-        },
-        status: {
-            control: { type: 'select' },
-            options: ['standard', 'primary', 'success', 'warning', 'error'],
-        },
-        closable: {
-            control: { type: 'boolean' },
-        },
-        border: {
-            control: { type: 'select' },
-            options: ['none', 'top', 'right', 'bottom', 'left'],
-        },
-        opened: {
-            control: { type: 'boolean' },
-        },
-        overlay: {
-            control: { type: 'select' },
-            options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => {
-    const makeIcon = () => {
-        if (args.icon !== 'none' && args.icon) {
-            return html `<kemet-icon slot="icon" icon=${args.icon} size="24" ></kemet-icon>`;
-        }
-        return null;
-    };
-    const makeHeading = () => {
-        if (args.heading !== '' && args.heading) {
-            return html `<h3 kemet-margin-bottom="none" kemet-margin-top="none">${args.heading}</h3>`;
-        }
-        return null;
-    };
-    return html `
-    <kemet-alert
-      status=${ifDefined(args.status)}
-      ?closable=${args.closable}
-      ?opened=${args.opened}
-      border-status=${args.border}
-      overlay=${ifDefined(args.overlay !== 'none' ? args.overlay : null)}
-      kemet-margin=${ifDefined(args.overlay.indexOf('full') < 0 ? '2xl' : nothing)}>
-      ${makeIcon()}
-      ${makeHeading()}
-      ${args.text}
-    </kemet-alert>
-  `;
-};
-// export const Standard: Story = {
-//   render: (args: any) => Template(args),
-//   args: {
-//     heading: 'This is a heading.',
-//     text: 'The brown fox jumped over the lazy dog.',
-//     icon: 'gear',
-//     status: 'standard',
-//     closable: false,
-//     border: 'left',
-//     opened: true,
-//     overlay: 'none',
-//   },
-// };
-export const Standard = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        text: 'The brown fox jumped over the lazy dog.',
-        overlay: 'none',
-    }
-};
-export const Heading = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        overlay: 'none',
-    },
-};
-export const Icon = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        overlay: 'none',
-    },
-};
-export const Closable = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        overlay: 'none',
-    },
-};
-export const BorderTop = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'top',
-        overlay: 'none',
-    },
-};
-export const BorderRight = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'right',
-        overlay: 'none',
-    },
-};
-export const BorderBottom = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'bottom',
-        overlay: 'none',
-    },
-};
-export const BorderLeft = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-    },
-};
-export const Primary = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'primary'
-    },
-};
-export const Success = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'check-circle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'success'
-    },
-};
-export const Warning = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'exclamation-triangle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'warning'
-    },
-};
-export const Error = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'exclamation-octagon',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'error'
-    },
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-alert';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Alert',\n  component: 'kemet-alert',\n  argTypes: {\n    heading: {\n      control: { type: 'text' },\n    },\n    text: {\n      control: { type: 'text' },\n    },\n    icon: {\n      control: { type: 'select' },\n      options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['standard', 'primary', 'success', 'warning', 'error'],\n    },\n    closable: {\n      control: { type: 'boolean' },\n    },\n    border: {\n      control: { type: 'select' },\n      options: ['none', 'top', 'right', 'bottom', 'left'],\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    overlay: {\n      control: { type: 'select' },\n      options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const makeIcon = () => {\n    if (args.icon !== 'none' && args.icon) {\n      return html`<kemet-icon slot=\"icon\" icon=${args.icon} size=\"24\" ></kemet-icon>`;\n    }\n\n    return null;\n  };\n\n  const makeHeading = () => {\n    if (args.heading !== '' && args.heading) {\n      return html`<h3 kemet-margin-bottom=\"none\" kemet-margin-top=\"none\">${args.heading}</h3>`;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-alert\n      status=${ifDefined(args.status)}\n      ?closable=${args.closable}\n      ?opened=${args.opened}\n      border-status=${args.border}\n      overlay=${ifDefined(args.overlay !== 'none' ? args.overlay : null)}\n      kemet-margin=${ifDefined(args.overlay.indexOf('full') < 0 ? '2xl' : nothing)}>\n      ${makeIcon()}\n      ${makeHeading()}\n      ${args.text}\n    </kemet-alert>\n  `;\n};\n\n// export const Standard: Story = {\n//   render: (args: any) => Template(args),\n//   args: {\n//     heading: 'This is a heading.',\n//     text: 'The brown fox jumped over the lazy dog.',\n//     icon: 'gear',\n//     status: 'standard',\n//     closable: false,\n//     border: 'left',\n//     opened: true,\n//     overlay: 'none',\n//   },\n// };\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    text: 'The brown fox jumped over the lazy dog.',\n    overlay: 'none',\n  }\n};\n\nexport const Heading: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    overlay: 'none',\n  },\n};\n\nexport const Icon: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    overlay: 'none',\n  },\n};\n\nexport const Closable: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    overlay: 'none',\n  },\n};\n\nexport const BorderTop: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'top',\n    overlay: 'none',\n  },\n};\n\nexport const BorderRight: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'right',\n    overlay: 'none',\n  },\n};\n\nexport const BorderBottom: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'bottom',\n    overlay: 'none',\n  },\n};\n\nexport const BorderLeft: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n  },\n};\n\nexport const Primary: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'primary'\n  },\n};\n\nexport const Success: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'check-circle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'success'\n  },\n};\n\nexport const Warning: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'exclamation-triangle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'warning'\n  },\n};\n\nexport const Error: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'exclamation-octagon',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'error'\n  },\n};\n\n\n"]}

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

@@ -1,51 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeStatus } from './types';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-alert
- * @summary Calls out important messages and notifications.
- *
- * @prop {boolean} opened - Determines if the alert is opened or not.
- * @prop {boolean} reveal - Fades in the alert when opened.
- * @prop {boolean} closable - Adds a close button to the alert.
- * @prop {string} borderStatus - Adds a border that indicates the status.
- * @prop {boolean} hidden - Hides the element from document flow.
- * @prop {string} overlay - Fixes the alert over content in specified position.
- *
- * @slot default - The contents of the alert.
- *
- * @event kemet-alert-opened - Fires when alert is opened.
- * @event kemet-alert-closed - Fires when alert is closed.
- *
- * @csspart close - Container for the close button.
- *
- * @cssproperty --kemet-alert-padding - The padding on the alert.
- * @cssproperty --kemet-alert-border-thickness - The thickness of the border.
- * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
- * @cssproperty --kemet-alert-align-items - The alert's alignment.
- * @cssproperty --kemet-alert-border - The border around the alert.
- *
- */
-export default class KemetAlert extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean;
-    reveal: boolean;
-    closable: boolean;
-    status: TypeStatus;
-    borderStatus: string;
-    hidden: boolean;
-    overlay: string;
-    shouldUpdate(prevProps: Map<string, never>): boolean;
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    makeCloseBtn(): import("lit-html").TemplateResult<1>;
-    handleMotion(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-alert': KemetAlert;
-    }
-}

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

@@ -1,111 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesBase } from './styles';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-alert
- * @summary Calls out important messages and notifications.
- *
- * @prop {boolean} opened - Determines if the alert is opened or not.
- * @prop {boolean} reveal - Fades in the alert when opened.
- * @prop {boolean} closable - Adds a close button to the alert.
- * @prop {string} borderStatus - Adds a border that indicates the status.
- * @prop {boolean} hidden - Hides the element from document flow.
- * @prop {string} overlay - Fixes the alert over content in specified position.
- *
- * @slot default - The contents of the alert.
- *
- * @event kemet-alert-opened - Fires when alert is opened.
- * @event kemet-alert-closed - Fires when alert is closed.
- *
- * @csspart close - Container for the close button.
- *
- * @cssproperty --kemet-alert-padding - The padding on the alert.
- * @cssproperty --kemet-alert-border-thickness - The thickness of the border.
- * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
- * @cssproperty --kemet-alert-align-items - The alert's alignment.
- * @cssproperty --kemet-alert-border - The border around the alert.
- *
- */
-let KemetAlert = class KemetAlert extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.status = 'standard';
-    }
-    shouldUpdate(prevProps) {
-        if (prevProps.has('opened') && !prevProps.get('opened')) {
-            this.hidden = false;
-            this.reveal = true;
-        }
-        return true;
-    }
-    firstUpdated() {
-        this.handleMotion();
-    }
-    updated(prevProps) {
-        if (!prevProps.get('opened') && this.opened === true) {
-            emitEvent(this, 'kemet-alert-opened', this);
-        }
-        else {
-            emitEvent(this, 'kemet-alert-closed', this);
-        }
-    }
-    render() {
-        return html `
-      <slot name="icon"></slot>
-      <div>
-        <slot></slot>
-      </div>
-      <div class="close" part="close">
-        ${this.makeCloseBtn()}
-      </div>
-    `;
-    }
-    makeCloseBtn() {
-        if (this.closable) {
-            return html `<kemet-icon icon="x-lg" @click=${() => { this.opened = false; }}></kemet-icon>`;
-        }
-        return null;
-    }
-    handleMotion() {
-        this.addEventListener('transitionend', () => {
-            if (!this.opened) {
-                this.hidden = true;
-            }
-        });
-        this.addEventListener('animationend', () => {
-            this.reveal = false;
-        });
-    }
-};
-KemetAlert.styles = [stylesBase];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "reveal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "closable", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetAlert.prototype, "status", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'border-status' })
-], KemetAlert.prototype, "borderStatus", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "hidden", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetAlert.prototype, "overlay", void 0);
-KemetAlert = __decorate([
-    customElement('kemet-alert')
-], KemetAlert);
-export default KemetAlert;
-//# sourceMappingURL=kemet-alert.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-alert.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/kemet-alert.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {string} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {string} overlay - Fixes the alert over content in specified position.\n *\n * @slot default - The contents of the alert.\n *\n * @event kemet-alert-opened - Fires when alert is opened.\n * @event kemet-alert-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n * @cssproperty --kemet-alert-border - The border around the alert.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String, reflect: true, attribute: 'border-status' })\n  borderStatus: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay: string;\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-alert-opened', this);\n    } else {\n      emitEvent(this, 'kemet-alert-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div>\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  handleMotion() {\n    this.addEventListener('transitionend', () => {\n      if (!this.opened) {\n        this.hidden = true;\n      }\n    });\n\n    this.addEventListener('animationend', () => {\n      this.reveal = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n    --kemet-alert-status-color: inherit;\n    --kemet-alert-align-items: center;\n    --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));\n\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--kemet-alert-border);\n    transition: opacity 300ms ease;\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([border-status=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([status=\"standard\"]) {\n    --kemet-alert-status-color: var(--kemet-color-text);\n  }\n\n  :host([status=\"primary\"]) {\n    --kemet-alert-status-color: var(--kemet-color-primary);\n  }\n\n  :host([status=\"success\"]) {\n    --kemet-alert-status-color: var(--kemet-color-success);\n  }\n\n  :host([status=\"warning\"]) {\n    --kemet-alert-status-color: var(--kemet-color-warning);\n  }\n\n  :host([status=\"error\"]) {\n    --kemet-alert-status-color: var(--kemet-color-error);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  ::slotted(kemet-icon) {\n    color: rgb(var(--kemet-alert-status-color));\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"]}

package/dist/components/kemet-alert/types.d.ts

@@ -1 +0,0 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning' | 'primary';

package/dist/components/kemet-alert/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/kemet-alert/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning' | 'primary';\n"]}

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

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-avatar';
-import '../kemet-avatars';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Initials: Story;
-export declare const Image: Story;
-export declare const Circle: Story;
-export declare const Status: Story;
-export declare const Multiple: Story;

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

@@ -1,108 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-avatar';
-import '../kemet-avatars';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Avatar',
-    component: 'kemet-avatar',
-    argTypes: {
-        circle: {
-            control: { type: 'boolean' },
-        },
-        rounded: {
-            control: { type: 'boolean' },
-        },
-        image: {
-            control: { type: 'text' },
-        },
-        initials: {
-            control: { type: 'text' },
-        },
-        icon: {
-            control: { type: 'text' },
-        },
-        status: {
-            control: { type: 'boolean' },
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-avatar
-    ?circle=${args.circle}
-    ?rounded=${args.rounded}
-    image="${ifDefined(args.image !== '' ? args.image : null)}"
-    initials="${ifDefined(args.initials !== '' ? args.initials : null)}"
-  >
-    ${args.icon !== '' && args.icon ? html `<kemet-icon icon=${args.icon} size="48" kemet-margin="xs"></kemet-icon>` : null}
-    ${args.status ? html `<kemet-badge slot="status" status="success" kemet-border="all-2 solid white"></kemet-badge>` : null}
-  </kemet-avatar>
-`;
-const TemplateMultiple = (args) => {
-    const avatars = [];
-    for (let i = 0; i < args.numOfAvatars; i += 1) {
-        avatars.push(html `<kemet-avatar circle image="https://via.placeholder.com/64x64" kemet-border="all-4 solid gray-50"></kemet-avatar>\n`);
-    }
-    return html `
-    <style>
-      kemet-avatars {
-        --kemet-avatars-squeeze: ${args.squeeze};
-      }
-    </style>
-    <kemet-avatars>
-      ${avatars}
-    </kemet-avatars>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-    args: {
-        icon: 'person',
-    }
-};
-export const Initials = {
-    render: (args) => Template(args),
-    args: {
-        initials: 'KU',
-    }
-};
-export const Image = {
-    render: (args) => Template(args),
-    args: {
-        image: 'https://via.placeholder.com/64x64',
-    }
-};
-export const Circle = {
-    render: (args) => Template(args),
-    args: {
-        circle: true,
-        image: 'https://via.placeholder.com/64x64',
-    }
-};
-export const Status = {
-    render: (args) => Template(args),
-    args: {
-        circle: true,
-        image: 'https://via.placeholder.com/64x64',
-        status: true,
-    }
-};
-export const Multiple = {
-    render: (args) => TemplateMultiple(args),
-    args: {
-        squeeze: '-1.5rem',
-        numOfAvatars: 3,
-    },
-    argTypes: {
-        squeeze: {
-            control: { type: 'text' },
-        },
-        numOfAvatars: {
-            control: { type: 'number' },
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-avatar/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-avatar';\nimport '../kemet-avatars';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Avatar',\n  component: 'kemet-avatar',\n  argTypes: {\n    circle: {\n      control: { type: 'boolean' },\n    },\n    rounded: {\n      control: { type: 'boolean' },\n    },\n    image: {\n      control: { type: 'text' },\n    },\n    initials: {\n      control: { type: 'text' },\n    },\n    icon: {\n      control: { type: 'text' },\n    },\n    status: {\n      control: { type: 'boolean' },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-avatar\n    ?circle=${args.circle}\n    ?rounded=${args.rounded}\n    image=\"${ifDefined(args.image !== '' ? args.image : null)}\"\n    initials=\"${ifDefined(args.initials !== '' ? args.initials : null)}\"\n  >\n    ${args.icon !== '' && args.icon ? html`<kemet-icon icon=${args.icon} size=\"48\" kemet-margin=\"xs\"></kemet-icon>` : null}\n    ${args.status ? html`<kemet-badge slot=\"status\" status=\"success\" kemet-border=\"all-2 solid white\"></kemet-badge>` : null}\n  </kemet-avatar>\n`;\n\nconst TemplateMultiple = (args) => {\n  const avatars = [];\n\n  for (let i = 0; i < args.numOfAvatars; i += 1) {\n    avatars.push(html`<kemet-avatar circle image=\"https://via.placeholder.com/64x64\" kemet-border=\"all-4 solid gray-50\"></kemet-avatar>\\n`);\n  }\n\n  return html`\n    <style>\n      kemet-avatars {\n        --kemet-avatars-squeeze: ${args.squeeze};\n      }\n    </style>\n    <kemet-avatars>\n      ${avatars}\n    </kemet-avatars>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    icon: 'person',\n  }\n};\n\nexport const Initials: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    initials: 'KU',\n  }\n};\n\nexport const Image: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    image: 'https://via.placeholder.com/64x64',\n  }\n};\n\nexport const Circle: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    circle: true,\n    image: 'https://via.placeholder.com/64x64',\n  }\n};\n\nexport const Status: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    circle: true,\n    image: 'https://via.placeholder.com/64x64',\n    status: true,\n  }\n};\n\nexport const Multiple: Story = {\n  render: (args: any) => TemplateMultiple(args),\n  args: {\n    squeeze: '-1.5rem',\n    numOfAvatars: 3,\n  },\n  argTypes: {\n    squeeze: {\n      control: { type: 'text' },\n    },\n    numOfAvatars: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}

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

@@ -1,43 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-avatar
- * @summary A representation of a person or thing.
- *
- * @prop {string} size - The size in pixels.
- * @prop {string} image - Url to an image.
- * @prop {string} label - Labels the avatar.
- * @prop {string} initials - Initials of the user.
- * @prop {boolean} circle - Displays in a circle.
- * @prop {boolean} rounded - Displays with rounded corners
- *
- * @slot status - A slot for an icon or element that indicates the status of the avatar.
- *
- * @csspart initials - Contains the initials for the avatar.
- *
- * @cssproperty --kemet-avatar-color - The color of the text.
- * @cssproperty --kemet-avatar-background-color - The color of the background.
- * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type.
- * @cssproperty --kemet-avatar-initials-margin - The space around the initials.
- *
- */
-export default class KemetAvatar extends LitElement {
-    static styles: import("lit").CSSResult[];
-    size: string;
-    image: string;
-    label: string;
-    initials: string;
-    circle: boolean;
-    rounded: boolean;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    makeSize(): void;
-    makeContent(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-avatar': KemetAvatar;
-    }
-}