kemet-ui 3.0.1 → 4.0.0

package/types/jsx.d.ts

@@ -0,0 +1,140 @@
+import { LitElement } from 'lit';
+import 'react';
+
+import KemetAccordionClass from '../dist/elements/accordion';
+import KemetAccordionPanelClass from '../dist/elements/accordion-panel';
+import KemetAlertClass from '../dist/elements/alert';
+import KemetAvatarClass from '../dist/elements/avatar';
+import KemetBadgeClass from '../dist/elements/badge';
+import KemetButtonClass from '../dist/elements/button';
+import KemetCardClass from '../dist/elements/card';
+import KemetCarouselClass from '../dist/elements/carousel';
+import KemetCarouselCurrentClass from '../dist/elements/carousel-current';
+import KemetCarouselFirstClass from '../dist/elements/carousel-first';
+import KemetCarouselLastClass from '../dist/elements/carousel-last';
+import KemetCarouselNextClass from '../dist/elements/carousel-next';
+import KemetCarouselPrevClass from '../dist/elements/carousel-prev';
+import KemetCarouselLinkClass from '../dist/elements/carousel-link';
+import KemetCarouselSlideClass from '../dist/elements/carousel-slide';
+import KemetCarouselTotalClass from '../dist/elements/carousel-total';
+import KemetCheckboxClass from '../dist/elements/checkbox';
+import KemetComboClass from '../dist/elements/combo';
+import KemetCountClass from '../dist/elements/count';
+import KemetDraggableClass from '../dist/elements/draggable';
+import KemetDrawerClass from '../dist/elements/drawer';
+import KemetFabClass from '../dist/elements/fab';
+import KemetFieldClass from '../dist/elements/field';
+import KemetFlipcardClass from '../dist/elements/flipcard';
+import KemetFlipcardTriggerClass from '../dist/elements/flipcard-trigger';
+import KemetIconBootstrapClass from '../dist/elements/icon-bootstrap';
+import KemetIconLucideClass from '../dist/elements/icon-lucide';
+import KemetInputClass from '../dist/elements/input';
+import KemetModalClass from '../dist/elements/modal';
+import KemetMultiInputClass from '../dist/elements/multi-input';
+import KemetPasswordClass from '../dist/elements/password';
+import KemetPopperClass from '../dist/elements/popper';
+import KemetRadioClass from '../dist/elements/radio';
+import KemetRotatorClass from '../dist/elements/rotator';
+import KemetSelectClass from '../dist/elements/select';
+import KemetScrollNavClass from '../dist/elements/scroll-nav';
+import KemetScrollSnapClass from '../dist/elements/scroll-snap';
+import KemetScrollSnapPaginatorClass from '../dist/elements/scroll-snap-paginator';
+import KemetScrollSnapSlideClass from '../dist/elements/scroll-snap-slide';
+import KemetSortableClass from '../dist/elements/sortable';
+import KemetSvgs from '../dist/elements/svgs';
+import KemetTabClass from '../dist/elements/tab';
+import KemetTabPanelClass from '../dist/elements/tab-panel';
+import KemetTabsClass from '../dist/elements/tabs';
+import KemetTextareaClass from '../dist/elements/textarea';
+import KemetTimerClass from '../dist/elements/timer';
+import KemetToggleClass from '../dist/elements/toggle';
+import KemetTooltipClass from '../dist/elements/tooltip';
+import KemetTrackerClass from '../dist/elements/tracker';
+import KemetUpload from '../dist/elements/upload';
+
+
+/**
+ * Extract only data properties (no methods) from a type
+ */
+type DataProps<T> = {
+  [K in keyof T as T[K] extends (...args: any[]) => any ? never : K]: T[K];
+};
+
+/**
+ * Extract custom properties from a LitElement instance (excluding base LitElement props)
+ */
+type LitElementProps<T extends LitElement> = Omit<
+  DataProps<T>,
+  keyof LitElement
+>;
+
+/**
+ * Create React-compatible props for a Lit custom element
+ */
+type ReactLitProps<T extends LitElement> =
+  Omit<React.HTMLAttributes<T>, 'children'> &
+  Partial<LitElementProps<T>> & {
+    ref?: React.Ref<T>;
+    children?: React.ReactNode;
+    slot?: string;
+  };
+
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kemet-accordion': ReactLitProps<KemetAccordionClass>;
+      'kemet-accordion-panel': ReactLitProps<KemetAccordionPanelClass>;
+      'kemet-alert': ReactLitProps<KemetAlertClass>;
+      'kemet-avatar': ReactLitProps<KemetAvatarClass>;
+      'kemet-badge': ReactLitProps<KemetBadgeClass>;
+      'kemet-button': ReactLitProps<KemetButtonClass>;
+      'kemet-card': ReactLitProps<KemetCardClass>;
+      'kemet-carousel': ReactLitProps<KemetCarouselClass>;
+      'kemet-carousel-current': ReactLitProps<KemetCarouselCurrentClass>;
+      'kemet-carousel-first': ReactLitProps<KemetCarouselFirstClass>;
+      'kemet-carousel-last': ReactLitProps<KemetCarouselLastClass>;
+      'kemet-carousel-next': ReactLitProps<KemetCarouselNextClass>;
+      'kemet-carousel-prev': ReactLitProps<KemetCarouselPrevClass>;
+      'kemet-carousel-link': ReactLitProps<KemetCarouselLinkClass>;
+      'kemet-carousel-slide': ReactLitProps<KemetCarouselSlideClass>;
+      'kemet-carousel-total': ReactLitProps<KemetCarouselTotalClass>;
+      'kemet-checkbox': ReactLitProps<KemetCheckboxClass>;
+      'kemet-combo': ReactLitProps<KemetComboClass>;
+      'kemet-count': ReactLitProps<KemetCountClass>;
+      'kemet-draggable': ReactLitProps<KemetDraggableClass>;
+      'kemet-drawer': ReactLitProps<KemetDrawerClass>;
+      'kemet-fab': ReactLitProps<KemetFabClass>;
+      'kemet-field': ReactLitProps<KemetFieldClass>;
+      'kemet-flipcard': ReactLitProps<KemetFlipcardClass>;
+      'kemet-flipcard-trigger': ReactLitProps<KemetFlipcardTriggerClass>;
+      'kemet-icon-bootstrap': ReactLitProps<KemetIconBootstrapClass>;
+      'kemet-icon-lucide' : ReactLitProps<KemetIconLucideClass>;
+      'kemet-input': ReactLitProps<KemetInputClass>;
+      'kemet-modal': ReactLitProps<KemetModalClass>;
+      'kemet-multi-input': ReactLitProps<KemetMultiInputClass>;
+      'kemet-password': ReactLitProps<KemetPasswordClass>;
+      'kemet-popper': ReactLitProps<KemetPopperClass>;
+      'kemet-radio': ReactLitProps<KemetRadioClass>;
+      'kemet-rotator': ReactLitProps<KemetRotatorClass>;
+      'kemet-select': ReactLitProps<KemetSelectClass>;
+      'kemet-scroll-nav': ReactLitProps<KemetScrollNavClass>;
+      'kemet-scroll-snap': ReactLitProps<KemetScrollSnapClass>;
+      'kemet-scroll-snap-paginator': ReactLitProps<KemetScrollSnapPaginatorClass>;
+      'kemet-scroll-snap-slide': ReactLitProps<KemetScrollSnapSlideClass>;
+      'kemet-sortable': ReactLitProps<KemetSortableClass>;
+      'kemet-svgs': ReactLitProps<KemetSvgs>;
+      'kemet-tab': ReactLitProps<KemetTabClass>;
+      'kemet-tab-panel': ReactLitProps<KemetTabPanelClass>;
+      'kemet-tabs': ReactLitProps<KemetTabsClass>;
+      'kemet-textarea': ReactLitProps<KemetTextareaClass>;
+      'kemet-timer': ReactLitProps<KemetTimerClass>;
+      'kemet-toggle': ReactLitProps<KemetToggleClass>;
+      'kemet-tooltip': ReactLitProps<KemetTooltipClass>;
+      'kemet-tracker': ReactLitProps<KemetTrackerClass>;
+      'kemet-upload': ReactLitProps<KemetUpload>;
+    }
+  }
+}
+
+export {};

package/dist/components/kemet-accordion/kemet-accordion-panel.d.ts

@@ -1,50 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion-panel
- * @summary A blade for an accordion.
- *
- * @prop {boolean} opened - Determines the opened state of the panel
- * @prop {string} maxHeight - Sets the max height of the panel's body
- * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
- *
- * @slot trigger - The trigger button that opens and closes the panel.
- * @slot body - The body content of the panel.
- * @slot icon - The icon for the panel.
- *
- * @csspart trigger - Contains the trigger for the panel.
- * @csspart body - Contains the body for the panel.
- *
- * @event kemet-accordion-panel-opened - Fires when a panel is opened
- * @event kemet-accordion-panel-closed - Fires when a panel is closed
- *
- */
-export default class KemetAccordionPanel extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean | undefined;
-    maxHeight: string;
-    slug: string;
-    index: number;
-    /** @internal */
-    focusableSelector: string;
-    /** @internal */
-    bodyElement: HTMLElement | null;
-    /** @internal */
-    bodyElementFirst: HTMLElement | null | undefined;
-    /** @internal */
-    bodyElementLast: HTMLElement | null | undefined;
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    toggle(): void;
-    focusableBodyElements(): void;
-    a11y(): void;
-    handleKeyDown(event: KeyboardEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-accordion-panel': KemetAccordionPanel;
-    }
-}

package/dist/components/kemet-accordion/kemet-accordion-panel.js

@@ -1,137 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesPanel } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion-panel
- * @summary A blade for an accordion.
- *
- * @prop {boolean} opened - Determines the opened state of the panel
- * @prop {string} maxHeight - Sets the max height of the panel's body
- * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
- *
- * @slot trigger - The trigger button that opens and closes the panel.
- * @slot body - The body content of the panel.
- * @slot icon - The icon for the panel.
- *
- * @csspart trigger - Contains the trigger for the panel.
- * @csspart body - Contains the body for the panel.
- *
- * @event kemet-accordion-panel-opened - Fires when a panel is opened
- * @event kemet-accordion-panel-closed - Fires when a panel is closed
- *
- */
-let KemetAccordionPanel = class KemetAccordionPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.opened = undefined;
-        this.maxHeight = '0px';
-        this.slug = 'panel';
-    }
-    firstUpdated() {
-        var _a, _b;
-        this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
-        this.bodyElement = this.querySelector('[slot="body"]');
-        this.bodyElementFirst = (_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.querySelector(':first-child');
-        this.bodyElementLast = (_b = this.bodyElement) === null || _b === void 0 ? void 0 : _b.querySelector(':last-child');
-        if (this.bodyElementFirst)
-            this.bodyElementFirst.style.marginTop = '0';
-        if (this.bodyElementLast)
-            this.bodyElementLast.style.marginBottom = '0';
-    }
-    updated(prevProps) {
-        var _a;
-        if (!prevProps.get('opened') && this.opened === true) {
-            this.maxHeight = `${(_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.offsetHeight}px`;
-            emitEvent(this, 'kemet-accordion-panel-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            this.maxHeight = '0px';
-            emitEvent(this, 'kemet-accordion-panel-closed', this);
-        }
-        this.a11y();
-        this.focusableBodyElements();
-    }
-    render() {
-        return html `
-      <button
-        class="trigger"
-        part="trigger"
-        @click=${() => this.toggle()}
-        @keydown=${(event) => this.handleKeyDown(event)}
-      >
-        <slot name="trigger"></slot>
-        <slot name="icon"></slot>
-      </button>
-      <section class="body" part="body" style="max-height:${this.maxHeight};">
-        <slot name="body"></slot>
-      </section>
-    `;
-    }
-    toggle() {
-        this.opened = !this.opened;
-    }
-    focusableBodyElements() {
-        var _a;
-        const focusableElements = (_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.focusableSelector);
-        if (this.opened) {
-            focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.forEach((element) => {
-                element.removeAttribute('tabindex');
-            });
-        }
-        else {
-            focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.forEach((element) => {
-                element.setAttribute('tabindex', '-1');
-            });
-        }
-    }
-    a11y() {
-        var _a, _b;
-        const trigger = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.trigger');
-        const body = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.body');
-        trigger === null || trigger === void 0 ? void 0 : trigger.setAttribute('id', `${this.slug}-button`);
-        trigger === null || trigger === void 0 ? void 0 : trigger.setAttribute('aria-controls', `${this.slug}-content`);
-        body === null || body === void 0 ? void 0 : body.setAttribute('id', `${this.slug}-content`);
-        body === null || body === void 0 ? void 0 : body.setAttribute('aria-labelledby', `${this.slug}-button`);
-        body === null || body === void 0 ? void 0 : body.setAttribute('aria-hidden', `${!this.opened}`);
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Space' || event.key === 'Enter') {
-            this.toggle();
-        }
-    }
-};
-KemetAccordionPanel.styles = [stylesPanel];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAccordionPanel.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, attribute: 'max-height' })
-], KemetAccordionPanel.prototype, "maxHeight", void 0);
-__decorate([
-    property({ type: String })
-], KemetAccordionPanel.prototype, "slug", void 0);
-__decorate([
-    property({ type: Number })
-], KemetAccordionPanel.prototype, "index", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "focusableSelector", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "bodyElement", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "bodyElementFirst", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "bodyElementLast", void 0);
-KemetAccordionPanel = __decorate([
-    customElement('kemet-accordion-panel')
-], KemetAccordionPanel);
-export default KemetAccordionPanel;
-//# sourceMappingURL=kemet-accordion-panel.js.map

package/dist/components/kemet-accordion/kemet-accordion-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-accordion-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/kemet-accordion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesPanel } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @event kemet-accordion-panel-opened - Fires when a panel is opened\n * @event kemet-accordion-panel-closed - Fires when a panel is closed\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [stylesPanel];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index: number;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  bodyElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-accordion-panel-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-accordion-panel-closed', this);\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\n  }\n}\n"]}

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

@@ -1,38 +0,0 @@
-import { LitElement } from 'lit';
-import KemetAccordionPanel from './kemet-accordion-panel';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion
- * @summary A component that acts like a standard accordion.
- *
- * @prop {number} currentPanel - The index value for the most recently opened panel
- * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
- *
- */
-export default class KemetAccordion extends LitElement {
-    static styles: import("lit").CSSResult[];
-    currentPanel: number;
-    togglePanels: boolean;
-    /** @internal */
-    panels: NodeListOf<KemetAccordionPanel>;
-    /** @internal */
-    onKeyDown: (event: KeyboardEvent) => void;
-    /** @internal */
-    currentPanelFocus: number;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleSlotChange(): void;
-    handlePanelOpened(event: CustomEvent): void;
-    navigatePanels(direction: string): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    expandAll(): void;
-    collapseAll(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-accordion': KemetAccordion;
-    }
-}

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

@@ -1,138 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { stylesBase } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion
- * @summary A component that acts like a standard accordion.
- *
- * @prop {number} currentPanel - The index value for the most recently opened panel
- * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
- *
- */
-let KemetAccordion = class KemetAccordion extends LitElement {
-    constructor() {
-        super();
-        this.currentPanel = 0;
-        this.togglePanels = false;
-        // bindings
-        this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));
-    }
-    firstUpdated() {
-        this.onKeyDown = event => this.handleKeyDown(event);
-    }
-    render() {
-        return html `<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-    }
-    handleSlotChange() {
-        this.panels = this.querySelectorAll('kemet-accordion-panel');
-        this.panels.forEach((panel, index) => {
-            panel.index = index;
-            panel.removeEventListener('keydown', this.onKeyDown);
-            panel.addEventListener('keydown', this.onKeyDown);
-        });
-    }
-    handlePanelOpened(event) {
-        var _a, _b;
-        (_a = this.panels) === null || _a === void 0 ? void 0 : _a.forEach((panel) => {
-            if (panel === event.detail) {
-                this.currentPanel = panel.index;
-            }
-        });
-        if (this.togglePanels) {
-            (_b = this.panels) === null || _b === void 0 ? void 0 : _b.forEach((panel) => {
-                if (panel !== event.detail) {
-                    panel.opened = false;
-                }
-            });
-        }
-    }
-    navigatePanels(direction) {
-        switch (direction) {
-            case 'home':
-                this.currentPanel = 0;
-                break;
-            case 'end':
-                this.currentPanel = this.panels.length - 1;
-                break;
-            case 'next':
-                this.currentPanel += 1;
-                break;
-            case 'prev':
-                this.currentPanel -= 1;
-                break;
-            default:
-                this.currentPanelFocus = 0;
-                break;
-        }
-        if (this.currentPanel > this.panels.length - 1)
-            this.currentPanel = 0;
-        if (this.currentPanel < 0)
-            this.currentPanel = this.panels.length - 1;
-        this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();
-    }
-    handleKeyDown(event) {
-        const target = event.target;
-        switch (event.key) {
-            case 'Enter':
-            case 'Space':
-                event.preventDefault();
-                target.click();
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                event.preventDefault();
-                this.navigatePanels('prev');
-                break;
-            case 'ArrowRight':
-            case 'ArrowDown':
-                event.preventDefault();
-                this.navigatePanels('next');
-                break;
-            case 'End':
-                event.preventDefault();
-                this.navigatePanels('end');
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.navigatePanels('home');
-                break;
-            default:
-                break;
-        }
-    }
-    expandAll() {
-        this.panels.forEach((panel) => {
-            panel.opened = true;
-        });
-    }
-    collapseAll() {
-        this.panels.forEach((panel) => {
-            panel.opened = false;
-        });
-    }
-};
-KemetAccordion.styles = [stylesBase];
-__decorate([
-    property({ type: Number, attribute: 'current-panel' })
-], KemetAccordion.prototype, "currentPanel", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'toggle-panels' })
-], KemetAccordion.prototype, "togglePanels", void 0);
-__decorate([
-    state()
-], KemetAccordion.prototype, "panels", void 0);
-__decorate([
-    state()
-], KemetAccordion.prototype, "onKeyDown", void 0);
-__decorate([
-    state()
-], KemetAccordion.prototype, "currentPanelFocus", void 0);
-KemetAccordion = __decorate([
-    customElement('kemet-accordion')
-], KemetAccordion);
-export default KemetAccordion;
-//# sourceMappingURL=kemet-accordion.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-accordion.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/kemet-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\nimport KemetAccordionPanel from './kemet-accordion-panel';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  /** @internal */\n  @state()\n  panels: NodeListOf<KemetAccordionPanel>;\n\n  /** @internal */\n  @state()\n  onKeyDown: (event: KeyboardEvent) => void;\n\n  /** @internal */\n  @state()\n  currentPanelFocus: number;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.panels = this.querySelectorAll('kemet-accordion-panel');\n\n    this.panels.forEach((panel: KemetAccordionPanel, index) => {\n      panel.index = index;\n      panel.removeEventListener('keydown', this.onKeyDown);\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: CustomEvent) {\n    this.panels?.forEach((panel: KemetAccordionPanel) => {\n      if (panel === event.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: KemetAccordionPanel) => {\n        if (panel !== event.detail) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  expandAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  collapseAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n"]}

package/dist/components/kemet-accordion/stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-import '../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const TogglePanels: Story;

package/dist/components/kemet-accordion/stories.js

@@ -1,47 +0,0 @@
-import { html } from 'lit';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-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 / Accordion',
-    component: 'kemet-accordion',
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-accordion ?toggle-panels=${args.togglePanels} kemet-elevation="layer-4">
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 1</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 2</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 3</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-  </kemet-accordion>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const TogglePanels = {
-    render: args => Template(args),
-    args: {
-        togglePanels: true,
-    },
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-accordion/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yBAAyB,CAAC;AAEjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AAEvC,OAAO,0BAA0B,CAAC;AAElC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;oCACK,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuBpD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,IAAI;KACnB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport './kemet-accordion';\nimport './kemet-accordion-panel';\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 / Accordion',\n  component: 'kemet-accordion',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-accordion ?toggle-panels=${args.togglePanels} kemet-elevation=\"layer-4\">\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 1</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 2</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 3</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n  </kemet-accordion>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const TogglePanels: Story = {\n  render: args => Template(args),\n  args: {\n    togglePanels: true,\n  },\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAI,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase =  css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesPanel = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n    padding: 1.5rem 1rem;\n    border-bottom: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  .trigger {\n    color: inherit;\n    cursor: pointer;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n    width: 100%;\n    text-align: left;\n    padding: 0;\n    border: none;\n    background: none;\n  }\n\n  .body {\n    overflow: hidden;\n    transition: all 300ms ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"]}

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

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-alert';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Heading: Story;
-export declare const Icon: Story;
-export declare const Closable: Story;
-export declare const BorderTop: Story;
-export declare const BorderRight: Story;
-export declare const BorderBottom: Story;
-export declare const BorderLeft: Story;
-export declare const Primary: Story;
-export declare const Success: Story;
-export declare const Warning: Story;
-export declare const Error: Story;