kemet-ui 2.0.2 → 3.0.0

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

@@ -14,8 +14,6 @@ import { LitElement } from 'lit';
  * @slot body - The body content of the panel.
  * @slot icon - The icon for the panel.
  *
- * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
- *
  * @csspart trigger - Contains the trigger for the panel.
  * @csspart body - Contains the body for the panel.
  *
@@ -28,6 +26,7 @@ export default class KemetAccordionPanel extends LitElement {
     opened: boolean | undefined;
     maxHeight: string;
     slug: string;
+    index: number;
     /** @internal */
     focusableSelector: string;
     /** @internal */

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

@@ -18,8 +18,6 @@ import { stylesPanel } from './styles';
  * @slot body - The body content of the panel.
  * @slot icon - The icon for the panel.
  *
- * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
- *
  * @csspart trigger - Contains the trigger for the panel.
  * @csspart body - Contains the body for the panel.
  *
@@ -117,6 +115,9 @@ __decorate([
 __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);

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

@@ -1 +1 @@
-{"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 * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.\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  /** @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) {\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 => 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) {\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"]}
+{"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) {\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 => 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) {\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,4 +1,5 @@
 import { LitElement } from 'lit';
+import KemetAccordionPanel from './kemet-accordion-panel';
 /**
  * @since 1.0.0
  * @status stable
@@ -15,9 +16,9 @@ export default class KemetAccordion extends LitElement {
     currentPanel: number;
     togglePanels: boolean;
     /** @internal */
-    panels: any;
+    panels: NodeListOf<KemetAccordionPanel>;
     /** @internal */
-    onKeyDown: (event: any) => any;
+    onKeyDown: (event: KeyboardEvent) => void;
     /** @internal */
     currentPanelFocus: number;
     constructor();

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

@@ -16,6 +16,7 @@ import { stylesBase } from './styles';
 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));
@@ -28,14 +29,21 @@ let KemetAccordion = class KemetAccordion extends LitElement {
     }
     handleSlotChange() {
         this.panels = this.querySelectorAll('kemet-accordion-panel');
-        this.panels.forEach((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) {
-            this.panels.forEach((panel) => {
+            (_b = this.panels) === null || _b === void 0 ? void 0 : _b.forEach((panel) => {
                 if (panel !== event.detail) {
                     panel.opened = false;
                 }
@@ -108,10 +116,10 @@ let KemetAccordion = class KemetAccordion extends LitElement {
 };
 KemetAccordion.styles = [stylesBase];
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'current-panel' })
 ], KemetAccordion.prototype, "currentPanel", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'toggle-panels ' })
+    property({ type: Boolean, attribute: 'toggle-panels' })
 ], KemetAccordion.prototype, "togglePanels", void 0);
 __decorate([
     state()

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

@@ -1 +1 @@
-{"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';\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 })\n  currentPanel: number;\n\n  @property({ type: Boolean, attribute: 'toggle-panels '})\n  togglePanels: boolean = false;\n\n  /** @internal */\n  @state()\n  panels: any;\n\n  /** @internal */\n  @state()\n  onKeyDown: (event: any) => any;\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) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event) {\n    if (this.togglePanels) {\n      this.panels.forEach((panel: any) => {\n        if (panel !== event.detail) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction) {\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) {\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        event.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"]}
+{"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) {\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) {\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) {\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        event.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

@@ -4,7 +4,9 @@ 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

@@ -4,13 +4,14 @@ 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 = ({ togglePanels = false, }) => html `
-  <kemet-accordion ?toggle-panels=${togglePanels} kemet-elevation="layer4">
+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>
@@ -36,8 +37,10 @@ const Template = ({ togglePanels = false, }) => html `
 `;
 export const Standard = {
     render: args => Template(args),
+};
+export const TogglePanels = {
+    render: args => Template(args),
     args: {
-        currentPanel: 0,
         togglePanels: true,
     },
 };

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

@@ -1 +1 @@
-{"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,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,YAAY,GAAG,KAAK,GACrB,EAAE,EAAE,CAAC,IAAI,CAAA;oCAC0B,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuB/C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC;QACf,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\nconst meta: Meta = {\n  title: 'Components / Accordion',\n  component: 'kemet-accordion',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  togglePanels = false,\n}) => html`\n  <kemet-accordion ?toggle-panels=${togglePanels} kemet-elevation=\"layer4\">\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  args: {\n    currentPanel: 0,\n    togglePanels: true,\n  },\n};\n"]}
+{"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.js

@@ -1,8 +1,8 @@
 import { css } from 'lit';
 export const stylesBase = css `
-:host {
-  display: block;
-}
+  :host {
+    display: block;
+  }
 `;
 export const stylesPanel = css `
   *,
@@ -14,7 +14,7 @@ export const stylesPanel = css `
   :host {
     display: block;
     padding: 1.5rem 1rem;
-    border-bottom: 1px solid var(--kemet-color-background);
+    border-bottom: 1px solid rgb(var(--kemet-color-foreground));
   }
 
   .trigger {
@@ -32,7 +32,7 @@ export const stylesPanel = css `
 
   .body {
     overflow: hidden;
-    transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;
+    transition: all 300ms ease;
   }
 
   ::slotted([slot='body']) {

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

@@ -1 +1 @@
-{"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 var(--kemet-color-background);\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 var(--kemet-accordion-panel-transition-speed, 300ms) ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"]}
+{"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

@@ -3,7 +3,19 @@ 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;

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

@@ -4,45 +4,10 @@ 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',
-};
-export default meta;
-const Template = ({ heading, text, icon, status, closable, border, opened, overlay, }) => {
-    const makeIcon = () => {
-        if (icon !== 'none') {
-            return html `<kemet-icon slot="icon" icon=${icon} size="24" ></kemet-icon>`;
-        }
-        return null;
-    };
-    return html `
-    <kemet-alert
-      status=${status}
-      ?closable=${closable}
-      ?opened=${opened}
-      border-status=${border}
-      overlay=${ifDefined(overlay !== 'none' ? overlay : null)}
-      kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>
-      ${makeIcon()}
-      <strong>${heading}</strong>
-      <br />
-      ${text}
-    </kemet-alert>
-  `;
-};
-export const Standard = {
-    render: (args) => 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',
-    },
     argTypes: {
         heading: {
             control: { type: 'text' },
@@ -74,4 +39,183 @@ export const Standard = {
         },
     }
 };
+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 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;eAEE,MAAM;kBACH,QAAQ;gBACV,MAAM;sBACA,MAAM;gBACZ,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACzC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7E,QAAQ,EAAE;gBACF,OAAO;;QAEf,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,oBAAoB;QAC7B,IAAI,EAAE,yCAAyC;QAC/C,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,EAAE,oBAAoB,CAAC;SAC/E;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAChE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACpD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;SACrG;KACF;CACF,CAAC","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\nconst meta: Meta = {\n  title: 'Components / Alert',\n  component: 'kemet-alert',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  heading,\n  text,\n  icon,\n  status,\n  closable,\n  border,\n  opened,\n  overlay,\n}) => {\n  const makeIcon = () => {\n    if (icon !== 'none') {\n      return html`<kemet-icon slot=\"icon\" icon=${icon} size=\"24\" ></kemet-icon>`;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-alert\n      status=${status}\n      ?closable=${closable}\n      ?opened=${opened}\n      border-status=${border}\n      overlay=${ifDefined(overlay !== 'none' ? overlay : null)}\n      kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>\n      ${makeIcon()}\n      <strong>${heading}</strong>\n      <br />\n      ${text}\n    </kemet-alert>\n  `;\n};\n\nexport 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  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};\n"]}
+{"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

@@ -21,12 +21,11 @@ import { TypeStatus } from './types';
  *
  * @csspart close - Container for the close button.
  *
- * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
- * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
+ * @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-gap - The alert's gap. Default: var(--kemet-alert-padding).
- * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
- * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
+ * @cssproperty --kemet-alert-align-items - The alert's alignment.
+ * @cssproperty --kemet-alert-border - The border around the alert.
  *
  */
 export default class KemetAlert extends LitElement {

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

@@ -24,15 +24,18 @@ import { stylesBase } from './styles';
  *
  * @csspart close - Container for the close button.
  *
- * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
- * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
+ * @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-gap - The alert's gap. Default: var(--kemet-alert-padding).
- * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
- * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
+ * @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;