kemet-ui 3.1.0 → 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/docs/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;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const TogglePanels: Story;

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

@@ -1,99 +0,0 @@
-import { html } from 'lit';
-import { userEvent, waitFor, within, expect, } from '@storybook/test';
-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),
-    play: async ({ canvasElement, step }) => {
-        const canvas = within(canvasElement);
-        const trigger1 = canvas.getByText('Trigger 1');
-        const trigger2 = canvas.getByText('Trigger 2');
-        const trigger3 = canvas.getByText('Trigger 3');
-        const panel1 = trigger1.closest('kemet-accordion-panel');
-        const panel2 = trigger2.closest('kemet-accordion-panel');
-        const panel3 = trigger3.closest('kemet-accordion-panel');
-        const accordion = trigger1.closest('kemet-accordion');
-        await step('Expand Trigger 2', async () => {
-            await userEvent.click(trigger2);
-            await waitFor(() => expect(panel2.opened).toBeTruthy());
-        });
-        await step('Expand them all', async () => {
-            accordion.expandAll();
-            await waitFor(() => expect(panel1.opened).toBeTruthy());
-            await waitFor(() => expect(panel2.opened).toBeTruthy());
-            await waitFor(() => expect(panel3.opened).toBeTruthy());
-        });
-        await step('Collapse them all', async () => {
-            accordion.collapseAll();
-            await waitFor(() => expect(panel1.opened).toBeFalsy());
-            await waitFor(() => expect(panel2.opened).toBeFalsy());
-            await waitFor(() => expect(panel3.opened).toBeFalsy());
-        });
-    },
-};
-export const TogglePanels = {
-    render: args => Template(args),
-    args: {
-        togglePanels: true,
-    },
-    play: async ({ canvasElement, step }) => {
-        const canvas = within(canvasElement);
-        const trigger1 = canvas.getByText('Trigger 1');
-        const trigger2 = canvas.getByText('Trigger 2');
-        const panel2 = trigger2.closest('kemet-accordion-panel');
-        await step('Expand Trigger 2', async () => {
-            await userEvent.click(trigger2);
-            await waitFor(() => expect(panel2.opened).toBeTruthy());
-        });
-        await step('Expand Trigger 1', async () => {
-            await waitFor(() => expect(panel2.opened).toBeTruthy());
-            await userEvent.click(trigger1);
-            await waitFor(() => expect(panel2.opened).toBeFalsy());
-        });
-        await step('Keyboard', async () => {
-            // await userEvent.click(trigger1);
-            // await userEvent.tab();
-            trigger2.focus();
-            await userEvent.keyboard('{ArrowDown}{Enter}');
-            // console.log(document.activeElement);
-            // fireEvent.keyDown(trigger1, { key: 'ArrowDown' });
-            // fireEvent.keyDown(trigger2, { key: 'Enter'});
-            // console.log(panel2.opened);
-        });
-    },
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-accordion/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport {\n userEvent, waitFor, within, expect,\n} from '@storybook/test';\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  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    const trigger1 = canvas.getByText('Trigger 1');\n    const trigger2 = canvas.getByText('Trigger 2');\n    const trigger3 = canvas.getByText('Trigger 3');\n    const panel1 = trigger1.closest('kemet-accordion-panel');\n    const panel2 = trigger2.closest('kemet-accordion-panel');\n    const panel3 = trigger3.closest('kemet-accordion-panel');\n    const accordion = trigger1.closest('kemet-accordion');\n\n    await step('Expand Trigger 2', async () => {\n      await userEvent.click(trigger2);\n      await waitFor(() => expect(panel2.opened).toBeTruthy());\n    });\n\n    await step('Expand them all', async () => {\n      accordion.expandAll();\n      await waitFor(() => expect(panel1.opened).toBeTruthy());\n      await waitFor(() => expect(panel2.opened).toBeTruthy());\n      await waitFor(() => expect(panel3.opened).toBeTruthy());\n    });\n\n    await step('Collapse them all', async () => {\n      accordion.collapseAll();\n      await waitFor(() => expect(panel1.opened).toBeFalsy());\n      await waitFor(() => expect(panel2.opened).toBeFalsy());\n      await waitFor(() => expect(panel3.opened).toBeFalsy());\n    });\n  },\n};\n\nexport const TogglePanels: Story = {\n  render: args => Template(args),\n  args: {\n    togglePanels: true,\n  },\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    const trigger1 = canvas.getByText('Trigger 1');\n    const trigger2 = canvas.getByText('Trigger 2');\n    const panel2 = trigger2.closest('kemet-accordion-panel');\n\n    await step('Expand Trigger 2', async () => {\n      await userEvent.click(trigger2);\n      await waitFor(() => expect(panel2.opened).toBeTruthy());\n    });\n\n    await step('Expand Trigger 1', async () => {\n      await waitFor(() => expect(panel2.opened).toBeTruthy());\n      await userEvent.click(trigger1);\n      await waitFor(() => expect(panel2.opened).toBeFalsy());\n    });\n\n    await step('Keyboard', async () => {\n      // await userEvent.click(trigger1);\n      // await userEvent.tab();\n\n      trigger2.focus();\n      await userEvent.keyboard('{ArrowDown}{Enter}');\n\n      // console.log(document.activeElement);\n      // fireEvent.keyDown(trigger1, { key: 'ArrowDown' });\n      // fireEvent.keyDown(trigger2, { key: 'Enter'});\n      // console.log(panel2.opened);\n    });\n  },\n};\n"]}

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