kemet-ui 2.0.3 → 3.0.1

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

@@ -4,46 +4,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { FormSubmitController } from '../../utilities/controllers/forms';
 import { emitEvent } from '../../utilities/misc/events';
 import { stylesSelect } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-select
- * @summary An enhanced select element.
- *
- * @prop {string} slug - A string the uniquely identifies the select
- * @prop {string} name - The name of the select
- * @prop {string} value - The value of the select
- * @prop {array} options - The options the select contains
- * @prop {string} status - The status of the select
- * @prop {boolean} required - Determines whether or not the field is required
- * @prop {boolean} disabled - Determines whether or not the field is disabled
- * @prop {boolean} multiple - Support of multiple choice selections
- * @prop {string} icon - The dropdown icon
- * @prop {number} iconSize - The dropdown icon size
- * @prop {boolean} filled - Displays a filled select
- * @prop {boolean} rounded - Displays rounded corners
- *
- * @csspart select
- *
- * @cssproperty --kemet-select-padding - The padding on the textarea. Default: 1rem.
- * @cssproperty --kemet-select-border - The border of the textarea. Default: 1px solid var(--kemet-color-background).
- * @cssproperty --kemet-select-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).
- * @cssproperty --kemet-select-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
- * @cssproperty --kemet-select-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning).
- * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
- * @cssproperty --kemet-select-border-filled - The border on filled. Default: none.
- * @cssproperty --kemet-select-color-filled - The color on filled. Default: var(--kemet-color-white).
- * @cssproperty --kemet-select-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
- * @cssproperty --kemet-select-background-color-error - The error state background color. Default: var(--kemet-color-error).
- * @cssproperty --kemet-select-background-color-success - The success state background color. Default: var(--kemet-color-success).
- * @cssproperty --kemet-select-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
- * @cssproperty --kemet-select-icon-right - The space on the right of the icon. Default: 1rem.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status - Fires when there's a change in status
- *
- */
 let KemetSelect = class KemetSelect extends LitElement {
     constructor() {
         super();
@@ -89,8 +49,6 @@ let KemetSelect = class KemetSelect extends LitElement {
         this.options = [];
         this.optionElements = this.querySelectorAll('kemet-option');
         this.optionElements.forEach((option) => {
-            // if (index === 0) this.value = option.value;
-            // this.value = option.selected ? option.value : this.value;
             this.options = this.options.concat({
                 label: option.label,
                 value: option.value,
@@ -103,7 +61,7 @@ let KemetSelect = class KemetSelect extends LitElement {
         </option>`);
     }
     /**
-     * Generates an dropdown icon
+     * Generates a dropdown icon
      * @private
      */
     makeIcon() {
@@ -145,6 +103,7 @@ let KemetSelect = class KemetSelect extends LitElement {
      */
     handleChange() {
         this.value = this.select.value;
+        emitEvent(this, 'kemet-input-change', this.value);
         if (this.select.checkValidity()) {
             this.invalid = false;
             this.status = 'standard';
@@ -174,7 +133,7 @@ let KemetSelect = class KemetSelect extends LitElement {
      * @returns {boolean}
      */
     checkValidity() {
-        this.select.checkValidity();
+        return this.select.checkValidity();
     }
 };
 KemetSelect.styles = [stylesSelect];

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-select.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesSelect } from './styles';\nimport { KemetOptionInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether or not the field is required\n * @prop {boolean} disabled - Determines whether or not the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {boolean} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea. Default: 1rem.\n * @cssproperty --kemet-select-border - The border of the textarea. Default: 1px solid var(--kemet-color-background).\n * @cssproperty --kemet-select-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).\n * @cssproperty --kemet-select-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning).\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).\n * @cssproperty --kemet-select-border-filled - The border on filled. Default: none.\n * @cssproperty --kemet-select-color-filled - The color on filled. Default: var(--kemet-color-white).\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).\n * @cssproperty --kemet-select-background-color-error - The error state background color. Default: var(--kemet-color-error).\n * @cssproperty --kemet-select-background-color-success - The success state background color. Default: var(--kemet-color-success).\n * @cssproperty --kemet-select-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon. Default: 1rem.\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n *\n */\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: any[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetFieldInterface;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: any;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions() {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option) => {\n      // if (index === 0) this.value = option.value;\n      // this.value = option.selected ? option.value : this.value;\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n          ${option.label}\n        </option>`,\n    );\n  }\n\n  /**\n   * Generates an dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-input-focused', false);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = 'error';\n      this.control.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.select.value;\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = 'error';\n\n    emitEvent(this, 'kemet-input-status', {\n      status: 'error',\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity() {\n    this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n"]}
+{"version":3,"file":"kemet-select.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesSelect } from './styles';\n\nimport type KemetOption from './kemet-option';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {boolean} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n * @event kemet-input-change - Fires when the select input changes\n *\n */\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: IOptions[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetFieldInterface;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: NodeListOf<KemetOption>;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option: KemetOption) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n          ${option.label}\n        </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-input-focused', false);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = 'error';\n      this.control.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.select.value;\n    emitEvent(this, 'kemet-input-change', this.value);\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = 'error';\n\n    emitEvent(this, 'kemet-input-status', {\n      status: 'error',\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n"]}

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

@@ -1,36 +1,52 @@
 import { css } from 'lit';
 export const stylesSelect = css `
   :host {
+    --kemet-select-padding: 1rem;
+    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
+    --kemet-select-border-filled: none;
+    --kemet-select-color-filled: rgb(var(--kemet-color-white));
+    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-select-color-filled: rgb(var(--kemet-color-white));
+    --kemet-select-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-select-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-select-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));
+    --kemet-select-icon-right: 1rem;
+
     position: relative;
     display: block;
   }
 
   select {
-    color: var(--kemet-color-text);
+    color: rgb(var(--kemet-color-text));
     display: block;
     font-size: 1rem;
     width: 100%;
-    padding: var(--kemet-select-padding, 1rem);
-    border: var(--kemet-select-border, 1px solid var(--kemet-color-background));
+    padding: var(--kemet-select-padding);
+    border: var(--kemet-select-border);
     appearance: none;
     box-sizing: border-box;
     background-color: transparent;
   }
 
   option {
-    color: var(--kemet-color-black);
+    color: rgb(var(--kemet-color-black));
   }
 
   :host([status='error']) select {
-    border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));
+    border: var(--kemet-select-border-color-error);
   }
 
   :host([status='success']) select {
-    border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));
+    border: var(--kemet-select-border-color-success);
   }
 
   :host([status='warning']) select {
-    border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));
+    border: var(--kemet-select-border-color-warning);
   }
 
   :host([disabled]) select {
@@ -38,34 +54,34 @@ export const stylesSelect = css `
   }
 
   :host([rounded]) select {
-    border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));
+    border-radius: var(--kemet-select-border-radius-rounded);
   }
 
   :host([filled]) select {
-    border: var(--kemet-select-border-filled, none);
-    color: var(--kemet-select-color-filled, var(--kemet-color-white));
-    background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));
+    border: var(--kemet-select-border-filled);
+    color: var(--kemet-select-color-filled);
+    background-color: var(--kemet-select-background-color-filled);
   }
 
   :host([filled]) kemet-icon {
-    color: var(--kemet-select-color-filled, var(--kemet-color-white));
+    color: var(--kemet-select-color-filled);
   }
 
   :host([status='error'][filled]) select {
-    background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));
+    background-color: var(--kemet-select-background-color-error);
   }
 
   :host([status='success'][filled]) select {
-    background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));
+    background-color: var(--kemet-select-background-color-success);
   }
 
   :host([status='warning'][filled]) select {
-    background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));
+    background-color: var(--kemet-select-background-color-warning);
   }
 
   kemet-icon {
     position: absolute;
-    right: var(--kemet-select-icon-right, 1rem);
+    right: var(--kemet-select-icon-right);
     top: 50%;
     transform: translateY(-50%);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: var(--kemet-color-text);\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding, 1rem);\n    border: var(--kemet-select-border, 1px solid var(--kemet-color-background));\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  option {\n    color: var(--kemet-color-black);\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled, none);\n    color: var(--kemet-select-color-filled, var(--kemet-color-white));\n    background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));\n  }\n\n  :host([filled]) kemet-icon {\n    color: var(--kemet-select-color-filled, var(--kemet-color-white));\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));\n  }\n\n  kemet-icon {\n    position: absolute;\n    right: var(--kemet-select-icon-right, 1rem);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    --kemet-select-padding: 1rem;\n    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-select-border-filled: none;\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-select-icon-right: 1rem;\n\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding);\n    border: var(--kemet-select-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  option {\n    color: rgb(var(--kemet-color-black));\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error);\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success);\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning);\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    border-radius: var(--kemet-select-border-radius-rounded);\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled);\n    color: var(--kemet-select-color-filled);\n    background-color: var(--kemet-select-background-color-filled);\n  }\n\n  :host([filled]) kemet-icon {\n    color: var(--kemet-select-color-filled);\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error);\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success);\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning);\n  }\n\n  kemet-icon {\n    position: absolute;\n    right: var(--kemet-select-icon-right);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n"]}

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

@@ -7,11 +7,14 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Sortable',
     component: 'kemet-sortable',
+    args: {
+        numItems: 3,
+    },
 };
 export default meta;
-const Template = ({ numItems = 3 }) => {
+const Template = (args) => {
     const items = [];
-    for (let i = 0; i < numItems; i += 1) {
+    for (let i = 0; i < args.numItems; i += 1) {
         items.push(html `<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);
     }
     return html `
@@ -22,13 +25,5 @@ const Template = ({ numItems = 3 }) => {
 };
 export const Standard = {
     render: args => Template(args),
-    args: {
-        numItems: 3,
-    },
-    argTypes: {
-        numItems: {
-            control: { type: 'number' },
-        },
-    }
 };
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE;IACpC,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE;QACpC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,6BAA6B,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;KAC5E;IAED,OAAO,IAAI,CAAA;;QAEL,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-sortable';\nimport '../kemet-sortable-item';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Sortable',\n  component: 'kemet-sortable',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ numItems = 3 }) => {\n  const items = [];\n\n  for (let i = 0; i < numItems; i += 1) {\n    items.push(html`<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);\n  }\n\n  return html`\n    <kemet-sortable>\n      ${items}\n    </kemet-sortable>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    numItems: 3,\n  },\n  argTypes: {\n    numItems: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE;QACzC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,6BAA6B,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;KAC5E;IAED,OAAO,IAAI,CAAA;;QAEL,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-sortable';\nimport '../kemet-sortable-item';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Sortable',\n  component: 'kemet-sortable',\n  args: {\n    numItems: 3,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const items = [];\n\n  for (let i = 0; i < args.numItems; i += 1) {\n    items.push(html`<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);\n  }\n\n  return html`\n    <kemet-sortable>\n      ${items}\n    </kemet-sortable>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n"]}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { KemetSortableItemInterface } from './types';
+import type KemetSortableItem from './kemet-sortable-item';
 /**
  * @since 1.3.0
  * @status stable
@@ -11,12 +11,12 @@ import { KemetSortableItemInterface } from './types';
  */
 export default class KemetSortable extends LitElement {
     static styles: import("lit").CSSResult[];
-    sortableItem: KemetSortableItemInterface;
+    sortableItem: KemetSortableItem;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    handleDragStart(event: any): void;
-    handleDragOver(event: any): void;
-    handleDragEnd(event: any): void;
+    handleDragStart(event: DragEvent): void;
+    handleDragOver(event: DragEvent): void;
+    handleDragEnd(event: DragEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -5,12 +5,12 @@ import { polyfill } from 'mobile-drag-drop';
 import { emitEvent } from '../../utilities/misc/events';
 import { stylesSortable } from './styles';
 const getMouseOffset = (event) => {
-    const targetRect = event.target.getBoundingClientRect();
-    const offset = {
+    const target = event.target;
+    const targetRect = target.getBoundingClientRect();
+    return {
         x: event.pageX - targetRect.left,
         y: event.pageY - targetRect.top,
     };
-    return offset;
 };
 const getElementVerticalCenter = (element) => {
     const rect = element.getBoundingClientRect();
@@ -44,10 +44,10 @@ let KemetSortable = class KemetSortable extends LitElement {
     }
     handleDragOver(event) {
         event.preventDefault();
-        const { target } = event;
+        const target = event.target;
         if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
             const offset = getMouseOffset(event);
-            const middleY = getElementVerticalCenter(event.target);
+            const middleY = getElementVerticalCenter(target);
             if (offset.y > middleY) {
                 this.insertBefore(this.sortableItem, target.nextSibling);
             }

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-sortable.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesSortable } from './styles';\nimport { KemetSortableItemInterface } from './types';\n\nconst getMouseOffset = (event) => {\n  const targetRect = event.target.getBoundingClientRect();\n  const offset = {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n\n  return offset;\n};\n\nconst getElementVerticalCenter = (element) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItemInterface;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event) {\n    this.sortableItem = event.target;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n    }, 0);\n  }\n\n  handleDragOver(event) {\n    event.preventDefault();\n\n    const { target } = event;\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(event.target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-sortable-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"]}
+{"version":3,"file":"kemet-sortable.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,MAAM,cAAc,GAAG,CAAC,KAAgB,EAAE,EAAE;IAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAClD,OAAO;QACL,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI;QAChC,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG;KAChC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,CAAC,OAAoB,EAAE,EAAE;IACxD,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC7C,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF;;;;;;;;GAQG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAMnD,YAAY;QACV,QAAQ,EAAE,CAAC;QAEX,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;QAChF,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,eAAe,CAAC,KAAgB;QAC9B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAA2B,CAAC;QAEtD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;QAC9F,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC;QAE1F,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;QACjC,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED,cAAc,CAAC,KAAgB;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;QAEjD,IAAI,MAAM,IAAI,MAAM,CAAC,OAAO,KAAK,qBAAqB,EAAE;YACtD,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACrC,MAAM,OAAO,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;YAEjD,IAAI,MAAM,CAAC,CAAC,GAAG,OAAO,EAAE;gBACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;aAC1D;iBAAM;gBACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;aAC9C;SACF;IACH,CAAC;IAED,aAAa,CAAC,KAAgB;QAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;QAEhC,SAAS,CAAC,IAAI,EAAE,yBAAyB,EAAE;YACzC,KAAK;YACL,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,GAAG,EAAE,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;SAClD,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAtDQ,oBAAM,GAAG,CAAC,cAAc,CAAC,CAAC;AAGjC;IADC,KAAK,EAAE;mDACwB;AAJb,aAAa;IADjC,aAAa,CAAC,gBAAgB,CAAC;GACX,aAAa,CAuDjC;eAvDoB,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesSortable } from './styles';\nimport type KemetSortableItem from './kemet-sortable-item';\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItem;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as KemetSortableItem;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as KemetSortableItem;\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-sortable-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"]}

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

@@ -11,7 +11,7 @@ export const stylesSortableItem = css `
     cursor: grab;
     display: block;
     padding: 1rem;
-    border: 1px solid var(--kemet-color-background);
+    border: 1px solid rgb(var(--kemet-color-foreground));
   }
 
   :host([ghost]) {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid var(--kemet-color-background);\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"]}

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

@@ -7,9 +7,18 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / SVGs',
     component: 'kemet-svgs',
+    args: {
+        svg: 'anubis',
+    },
+    argTypes: {
+        svg: {
+            control: { type: 'radio' },
+            options: ['anubis', 'eye', 'horus'],
+        },
+    }
 };
 export default meta;
-const Template = ({ svg = 'anubis', }) => {
+const Template = (args) => {
     const getViewBox = (svg) => {
         let viewBox;
         switch (svg) {
@@ -49,19 +58,10 @@ const Template = ({ svg = 'anubis', }) => {
         </defs>
       </svg>
     </kemet-svgs>
-    <kemet-svg set="svgs" svg="${svg}" viewbox="${getViewBox(svg)}"></kemet-svg>
+    <kemet-svg set="svgs" svg="${args.svg}" viewbox="${getViewBox(args.svg)}"></kemet-svg>
   `;
 };
 export const Standard = {
     render: args => Template(args),
-    args: {
-        svg: 'anubis',
-    },
-    argTypes: {
-        svg: {
-            control: { type: 'select' },
-            options: ['anubis', 'eye', 'horus'],
-        },
-    }
 };
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-svgs/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AAEvB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CACxB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,GAAG,GAAG,QAAQ,GACf,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,EAAE;QACzB,IAAI,OAAO,CAAC;QAEZ,QAAQ,GAAG,EAAE;YACX,KAAK,QAAQ;gBAAE,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM;YACR,KAAK,KAAK;gBAAE,OAAO,GAAG,aAAa,CAAC;gBAClC,MAAM;YACR,KAAK,OAAO;gBAAE,OAAO,GAAG,iBAAiB,CAAC;gBACxC,MAAM;YACR,OAAO,CAAC,CAAC,OAAO,GAAG,aAAa,CAAC;SAClC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;iCAuBoB,GAAG,cAAc,UAAU,CAAC,GAAG,CAAC;GAC9D,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,GAAG,EAAE,QAAQ;KACd;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;SACpC;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-svg';\nimport '../kemet-svgs';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / SVGs',\n  component: 'kemet-svgs',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  svg = 'anubis',\n}) => {\n  const getViewBox = (svg) => {\n    let viewBox;\n\n    switch (svg) {\n      case 'anubis': viewBox = '0 0 512 512';\n        break;\n      case 'eye': viewBox = '0 0 706 500';\n        break;\n      case 'horus': viewBox = '0 0 1359.5 1027';\n        break;\n      default: viewBox = '0 0 512 512';\n    }\n\n    return viewBox;\n  };\n\n  return html`\n    <kemet-svgs set=\"svgs\">\n      <svg>\n        <defs>\n          <g id=\"anubis\">\n            <path d=\"M201 5.5c-1.5 1.8-.9 5.6 2.7 17.5 2.5 8.4 2.7 8.5 12 17.4 32.9 31.1 53.3 67.7 56.8 101.9l.7 6.8 6.6 3c3.6 1.6 6.7 2.8 6.9 2.6.5-.5-7-26.4-11-38.2-6-17.4-10.6-28.5-19.2-46-12.9-26.2-26.8-46.2-41.6-59.9-7.4-6.9-11.3-8.3-13.9-5.1z\"></path><path d=\"M168.5 17c-.3.6 5.9 20.5 13.9 44.3 20.3 60.4 26.1 82 27.3 100.8.5 8.6.3 10.2-1.6 14-5 10.2-14.4 17.3-40.8 30.8-15.4 7.8-21.1 11.2-23.5 14.1-1.8 2.1-7.3 10.5-12.3 18.6-12.6 20.7-22.5 34.4-31.9 44.2-6.5 6.7-12.2 11.1-28.1 21.7-31.3 20.6-41.1 29.4-40.3 36.2.2 2.2 1.8 3.8 7.3 7.5C48.6 356.1 61 362 65 362c2 0 8.8-2.3 15.5-5.1 28.4-12.1 63.7-25 75.5-27.5 5.6-1.2 8.3-1.1 20 .2 15.1 1.8 27.1 1.4 34.2-1.1 5.3-1.9 11.8-7.6 14.5-12.9l1.8-3.4 6 8.9c3.3 4.8 6.4 8.7 6.9 8.6.5-.2 1.5-1.2 2.2-2.3 1.2-1.7.5-3.7-6-16.6-10.1-20-12.1-26.2-10.7-33 .7-2.9 3.4-9.4 6.1-14.3 11.1-20 16.2-33.1 23-59.7 9.8-38.7 10.5-56.5 2.9-81.6-6.8-22.5-29.7-55-60.9-86.3-15.5-15.5-25.4-22.3-27.5-18.9zm58 174c0 3-31.3 27.8-41.5 33-3 1.5-8.2 3.5-11.4 4.5-13.1 3.7-21.8 10.1-26.5 19.4-2.4 4.5-3.8 5.8-5.3 4.3-2.5-2.5 8.6-17 16.8-21.8 2.3-1.4 8.8-4 14.4-5.8 12.8-4.3 27.6-14.2 47.5-32 4-3.5 6-4.1 6-1.6zm-3.1 14.6c4.7 1.8-2 8-29.2 26.5-11.1 7.6-11.6 8.1-14.9 14.9-4.6 9.4-8.3 11.9-19 12.9-7 .6-8.5 1.1-13 4.4-5.6 4.1-6.5 4.4-8.3 2.2-1-1.2-.7-1.9 1.6-4 1.6-1.5 4.1-3.4 5.6-4.3 1.5-.9 3.3-3 4-4.6 3.2-7.8 13-14.8 25.3-18 6.4-1.7 14.1-6.5 34-21.5 6.6-5 12.1-9.1 12.2-9.1.1 0 .8.3 1.7.6z\"></path><path d=\"M273.2 175.2c-5 36.6-15.3 69-27.4 86.6-3.6 5.3-7.9 15.5-8 19.1-.1 1.5 2.1 7.6 4.7 13.6 9.6 22.1 11.2 29.3 7.6 35.1-2.1 3.4-7.4 7.8-10.6 8.8-1.4.4-2.7 2.7-4.3 7.3-3.5 10.1-12.2 27.8-17.6 36.1-2.7 4-7.7 10.4-11.1 14.1-12.1 13.2-24.6 41-41.6 92.1l-5.8 17.5 17.7.3c9.7.1 18.1.1 18.8-.2.6-.2 1.4-4.6 1.8-10.8 2.3-35.4 11.5-71.4 22.3-87.1 6.9-10 37.7-27.5 72.3-41.2 36.2-14.2 73.2-23.6 111-28.1 15.8-1.8 55.2-2.5 67.7-1.1l7.2.8-1.1-3.2c-2.2-6.4-11.5-23.6-18.1-33.6-27-40.9-69.6-79.1-125.2-112.3-11.7-7-55.8-30-57.5-30-.3 0-1.6 7.3-2.8 16.2zm28.8 23.4c54.2 30 97.6 68.3 126.6 111.9 4 6.1 7.4 11.5 7.4 11.8 0 .4-3.4.7-7.5.7h-7.4l-5-7.3c-26.3-39-68.4-75.9-119.1-104.6-6.9-3.8-13-7.4-13.6-7.8-1.5-1 .4-13.3 2-13.3.6 0 8.1 3.9 16.6 8.6zm-11.5 31.7c34.3 22.8 63.8 50.8 89.8 85.4 4.2 5.6 7.7 10.4 7.7 10.6 0 .3-3.2 1.1-7.1 1.7-6.9 1.2-7.1 1.2-8.7-1.1-4.1-5.9-16.2-20.4-25.5-30.7-17.3-19.2-41.7-40.1-63.6-54.7l-9.9-6.6 2.1-6.4c2.4-7.4 1.1-7.6 15.2 1.8zm-11.9 36.4c14.8 12.3 34.8 32 45.1 44.3 8.1 9.8 18.5 24.1 17.9 24.7-.2.2-3.1 1.2-6.5 2.3l-6 1.8-6.6-8.8c-13.4-18-35.4-40.3-56.4-57.3l-7.8-6.3 3.1-5.7c1.7-3.1 3.4-5.7 3.7-5.7.3 0 6.4 4.8 13.5 10.7zm-5.6 50.5c8.2 12.2 19.5 33.7 18.2 34.8-.9.8-11.5 5.1-11.7 4.8 0-.2-1-2.3-2-4.7-1.1-2.4-4.3-8.7-7.2-13.9-4.8-8.7-5.3-10.2-5.3-15.8 0-4.3-.9-9-3-15.1l-2.9-8.8 2.9 3.5c1.7 1.9 6.6 8.8 11 15.2zm-20.6 38.5c1.1 13.6 1.4 12.8-5.7 16.8-3.5 1.9-6.7 3.5-7 3.5-1.6 0-.5-5.2 2.7-12.6 1.9-4.3 4.1-9.6 5-11.7 2.5-6.1 4.2-4.8 5 4z\"></path><path d=\"M442.4 354.8c-.6.4-2.3 4.5-3.7 9.2-11.4 37.3-41.5 70.3-83.3 91.3-33.7 16.9-69.6 25.6-128.9 31.3l-5.1.5.8 9.6c.4 5.3.9 9.7 1 9.9.8.7 22.9 3.4 33.3 3.9 29.8 1.7 68.8-4.9 98.2-16.6 38.7-15.3 78.3-45 99.6-74.6 13.9-19.4 23.7-44.8 23.7-61.4V354h-17.2c-9.5 0-17.8.4-18.4.8z\"></path><path d=\"M414.5 356.8c-7.5.7-33 4.5-42 6.3-46.6 9.3-85.6 24.5-117.3 45.6-14.9 9.9-20.8 15.8-25.5 25.4-4.1 8.3-7.7 21.1-7.7 27.1v3.8h4.8c13 0 47.6-5.3 68.2-10.5 24.4-6.1 49.1-16.1 65.9-26.6 24.5-15.4 43.6-36.6 53.3-59.1 4.5-10.5 4.6-12.4.3-12z\"></path>\n          </g>\n          <g id=\"eye\">\n            <defs id=\"defs2214\"/>\n            <path d=\"M 482.47122,483.65668 C 482.09821,481.16923 482.00349,468.19138 482.26073,454.81702 C 482.85598,423.86986 485.74029,409.33575 508.02304,325 C 517.97202,287.34512 518.96876,261.67667 510.62952,257.87706 C 503.22084,254.50144 495.51948,258.76554 483.33874,272.98748 C 444.87758,317.89379 384.416,371.63828 336.592,403.43111 C 234.38064,471.38003 125.75165,495.91654 61.5,465.56738 C 14.135995,443.19507 -9.4559604,386.23292 7.5301438,335.2586 C 23.728797,286.64738 86.775557,268.60992 123.4217,302.10244 C 141.67589,318.78573 137.19751,348.25122 114.70406,359.46018 C 96.526568,368.51841 73.570329,349.94535 79.65551,331.10368 C 81.787859,324.50125 81.436951,324.28716 72.953651,327.0149 C 23.293219,342.98286 33.831342,415.54173 88.682829,435.31611 C 152.06988,458.16762 251.76781,426.54376 351.5,351.95135 C 391.05504,322.36706 438.67015,273.24845 433.13368,267.73999 C 431.50743,266.12196 409.19769,266.53511 388,268.57582 C 325.73643,274.56995 251.40446,262.42665 164,231.98188 C 152.725,228.05456 136.525,222.43341 128,219.49042 C 109.63237,213.14958 75.226122,204.4179 51.5,200.07611 C 42.15,198.3651 33.478754,196.73725 32.230564,196.45866 L 29.961129,195.95214 L 30.230564,174.3183 L 30.5,152.68446 L 39,150.74391 C 72.50072,143.09568 128.76294,128.99955 175,116.66999 C 278.32991,89.11608 289.32495,86.38305 310.5,82.98883 C 383.04703,71.36 422.7219,78.62443 574.31118,131.29245 C 602.82103,141.19788 634.45188,143.67699 662.03604,138.16802 C 668.38086,136.90086 675.54332,136.00717 677.95262,136.18205 L 682.33316,136.5 L 691.61566,157 C 696.72104,168.275 700.92108,177.75395 700.94908,178.06434 C 700.97709,178.37472 694.8125,179.42018 687.25,180.38758 C 628.89838,187.85196 595.69886,201.31776 576.89325,225.14854 C 562.86714,242.92267 559.1993,250.80358 556.38741,269.20848 C 552.05483,297.56695 558.59871,307.69047 590.22312,321.55294 C 598.33549,325.10898 598.36533,325.2104 591.75,326.74292 C 566.33045,332.63166 554.58404,346.42334 542.01437,385.13842 C 521.75002,447.55347 501.97616,483.58514 485.82472,487.52648 C 483.28485,488.14627 483.11511,487.95039 482.47122,483.65668 z M 424.2218,225.63181 C 474.97905,220.35891 533.69333,201.01428 568.3406,178.14891 L 572.18119,175.61432 L 564.6736,171.83682 C 544.62325,161.74834 515.9203,151.09439 477.85766,139.61248 C 468.37374,136.75158 435.02218,129.50425 417.73035,126.54674 L 413.96069,125.902 L 414.73035,130.201 C 421.33896,167.11429 399.13266,191.38005 360.2101,189.77757 C 325.46755,188.34718 305.90676,167.5813 310.49936,137.00427 C 311.3496,131.34347 311.86562,126.53229 311.64607,126.31274 C 310.91615,125.58281 254.01865,138.94051 216.75536,148.59001 C 184.37601,156.9748 143.86144,166.87973 118,172.73355 L 109.5,174.65755 L 123,178.84822 C 130.425,181.15309 154.725,189.0744 177,196.45112 C 234.90395,215.62695 267.37147,222.92242 312.89555,226.98694 C 328.35761,228.36743 407.1171,227.40873 424.2218,225.63181 z M 35.354897,110.38623 C 35.716536,99.99881 36.572127,87.9 37.256211,83.5 L 38.5,75.5 L 56.5,75.47117 C 89.061602,75.41901 105.13604,71.29991 198.5,39.083437 C 273.3851,13.243341 349.47211,3.065576 403.05014,11.721825 C 448.7358,19.102957 499.55051,32.310146 558,51.99465 C 615.37673,71.31787 646.14746,74.42614 681.5,64.46987 C 684.63769,63.58621 703.5919,96.68847 701.36023,99.15444 C 699.55859,101.14524 692.34416,104.11236 682,107.11686 C 671.59412,110.13927 628.62391,111.07697 614.24412,108.59543 C 603.42274,106.72796 561.07836,94.69295 532.5,85.36232 C 458.57731,61.22709 370.02847,49.18587 319,56.32973 C 273.61484,62.68354 255.87256,67.04951 198.71398,85.92932 C 131.51605,108.12519 72.656502,123.90207 39.598686,128.57904 L 34.697371,129.27247 L 35.354897,110.38623 z\" />\n          </g>\n          <g id=\"horus\">\n            <style type=\"text/css\">.st0{fill:currentColor;} .st2{fill:currentColor;} .st3{fill:var(--kemet-color-white-to-black);}</style>\n            <path class=\"st0\" d=\"M1049.5,304.2c0,0,167.6,67.4,115.3,92.3C1112.5,421.5,1055.4,406.6,1049.5,304.2z M708.9,21.3 c0,0-18,79.6,26.9,155.4c0,0-222.2-27-446.9,36c0,0-28.3,60.4,5.1,133.6c0,0-195.3,74.5-289,170.8c0,0,219.6,41.1,197.9,258.2 c0,0,232.5-33.4,521.5,251.7c88.6-475.4,426.2-668.3,625.5-450.8c0,0,60.4-133.6-122-231.2c0,0-19.3-93.7-187.5-132.3 c0,0-66.8-28.3-100.2-98.9c0,0-10.3,12.9-14.2,51.4C925.9,165.2,764.2,36.7,708.9,21.3L708.9,21.3z\"/>\n            <path class=\"st1\" d=\"M509.8,4.6c0,0-61.6,77.1-77,129.6L737.2,345l-1.5,1.3L409.6,192.2c0,0-18,27-29.6,111.7 c0,0,186.5,81.4,326.4,96.1c-0.2,1-0.3,2.1-0.5,3.1c-38,2.1-138.1,2.7-331.1-27.3c0,0-16.7,107.9,27,178.5 c0,0,199.8-88.8,306.2-114.8c0.4,1.4,0.8,2.9,1.3,4.3C662.1,470.7,495.9,567.1,430,627.5c0,0,30.8,89.9,97.7,128.5 c0,0,147.5-222.4,199.3-280l2.3,2.5c-18.1,32.4-162,289.5-164.4,317.3c0,0,78.4,69.4,163.1,92.5c0,0-39.4-246.4,63.8-379.3 c2.3,0.2,4.5,0.3,6.8,0.3c22.4,0,44.1-8.1,61.1-22.8c8.7-6.7,15.8-15.3,20.7-25.1c16.7-29.8,15.9-66.3-2.1-95.3 c-11.2-22-32.1-37.3-56.4-41.3c-17.4-4.6-35.9-4-52.9,1.9C767.9,325.8,549.5,127.6,509.8,4.6L509.8,4.6z\"/>\n            <path class=\"st2\" d=\"M1159.9,487.1c0,0-198-10.1-346.9,64.4c0,0-49.1,101.7-34.5,185.3C778.4,736.9,938.2,510.7,1159.9,487.1z M1164.4,367.2c0,0-56.3-67.2-137.1-101.7c0,0,19.1,56.3,26.4,74.5l1-30.6C1054.6,309.3,1108,324.5,1164.4,367.2z\"/>\n            <g>\n              <path class=\"st3\" d=\"M769.1,326.8L475.5,52.1l34.3-47.5C509.8,4.6,516.6,58.2,769.1,326.8z M735.6,346.5l-326-154.3 c-8.9,17-15.1,35.4-18.3,54.3L735.6,346.5z M706,403.2c0,0-128.4,7.1-331.1-27.3c0,0-8.4,66.4,0.2,100L706,403.2z M709.5,443.9 c0,0-210.2,117.8-279.3,183.7c0,0,15.3,39.8,27.6,56.6L709.5,443.9z M729.4,478.5c0,0-122.2,215.4-164.4,317.3 c0,0,33,27.9,59.4,44.1L729.4,478.5z M813.2,340.1C856,363.2,872,416.6,849,459.4c-8.2,15.2-20.6,27.6-35.8,35.8 c42.8-4,74.3-42,70.2-84.8C879.9,373.1,850.4,343.6,813.2,340.1z\"/>\n            </g>\n          </g>\n        </defs>\n      </svg>\n    </kemet-svgs>\n    <kemet-svg set=\"svgs\" svg=\"${svg}\" viewbox=\"${getViewBox(svg)}\"></kemet-svg>\n  `;\n}\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    svg: 'anubis',\n  },\n  argTypes: {\n    svg: {\n      control: { type: 'select' },\n      options: ['anubis', 'eye', 'horus'],\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-svgs/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AAEvB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,GAAG,EAAE,QAAQ;KACd;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;SACpC;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,EAAE;QACzB,IAAI,OAAO,CAAC;QAEZ,QAAQ,GAAG,EAAE;YACX,KAAK,QAAQ;gBAAE,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM;YACR,KAAK,KAAK;gBAAE,OAAO,GAAG,aAAa,CAAC;gBAClC,MAAM;YACR,KAAK,OAAO;gBAAE,OAAO,GAAG,iBAAiB,CAAC;gBACxC,MAAM;YACR,OAAO,CAAC,CAAC,OAAO,GAAG,aAAa,CAAC;SAClC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;iCAuBoB,IAAI,CAAC,GAAG,cAAc,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;GACxE,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-svg';\nimport '../kemet-svgs';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / SVGs',\n  component: 'kemet-svgs',\n  args: {\n    svg: 'anubis',\n  },\n  argTypes: {\n    svg: {\n      control: { type: 'radio' },\n      options: ['anubis', 'eye', 'horus'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const getViewBox = (svg) => {\n    let viewBox;\n\n    switch (svg) {\n      case 'anubis': viewBox = '0 0 512 512';\n        break;\n      case 'eye': viewBox = '0 0 706 500';\n        break;\n      case 'horus': viewBox = '0 0 1359.5 1027';\n        break;\n      default: viewBox = '0 0 512 512';\n    }\n\n    return viewBox;\n  };\n\n  return html`\n    <kemet-svgs set=\"svgs\">\n      <svg>\n        <defs>\n          <g id=\"anubis\">\n            <path d=\"M201 5.5c-1.5 1.8-.9 5.6 2.7 17.5 2.5 8.4 2.7 8.5 12 17.4 32.9 31.1 53.3 67.7 56.8 101.9l.7 6.8 6.6 3c3.6 1.6 6.7 2.8 6.9 2.6.5-.5-7-26.4-11-38.2-6-17.4-10.6-28.5-19.2-46-12.9-26.2-26.8-46.2-41.6-59.9-7.4-6.9-11.3-8.3-13.9-5.1z\"></path><path d=\"M168.5 17c-.3.6 5.9 20.5 13.9 44.3 20.3 60.4 26.1 82 27.3 100.8.5 8.6.3 10.2-1.6 14-5 10.2-14.4 17.3-40.8 30.8-15.4 7.8-21.1 11.2-23.5 14.1-1.8 2.1-7.3 10.5-12.3 18.6-12.6 20.7-22.5 34.4-31.9 44.2-6.5 6.7-12.2 11.1-28.1 21.7-31.3 20.6-41.1 29.4-40.3 36.2.2 2.2 1.8 3.8 7.3 7.5C48.6 356.1 61 362 65 362c2 0 8.8-2.3 15.5-5.1 28.4-12.1 63.7-25 75.5-27.5 5.6-1.2 8.3-1.1 20 .2 15.1 1.8 27.1 1.4 34.2-1.1 5.3-1.9 11.8-7.6 14.5-12.9l1.8-3.4 6 8.9c3.3 4.8 6.4 8.7 6.9 8.6.5-.2 1.5-1.2 2.2-2.3 1.2-1.7.5-3.7-6-16.6-10.1-20-12.1-26.2-10.7-33 .7-2.9 3.4-9.4 6.1-14.3 11.1-20 16.2-33.1 23-59.7 9.8-38.7 10.5-56.5 2.9-81.6-6.8-22.5-29.7-55-60.9-86.3-15.5-15.5-25.4-22.3-27.5-18.9zm58 174c0 3-31.3 27.8-41.5 33-3 1.5-8.2 3.5-11.4 4.5-13.1 3.7-21.8 10.1-26.5 19.4-2.4 4.5-3.8 5.8-5.3 4.3-2.5-2.5 8.6-17 16.8-21.8 2.3-1.4 8.8-4 14.4-5.8 12.8-4.3 27.6-14.2 47.5-32 4-3.5 6-4.1 6-1.6zm-3.1 14.6c4.7 1.8-2 8-29.2 26.5-11.1 7.6-11.6 8.1-14.9 14.9-4.6 9.4-8.3 11.9-19 12.9-7 .6-8.5 1.1-13 4.4-5.6 4.1-6.5 4.4-8.3 2.2-1-1.2-.7-1.9 1.6-4 1.6-1.5 4.1-3.4 5.6-4.3 1.5-.9 3.3-3 4-4.6 3.2-7.8 13-14.8 25.3-18 6.4-1.7 14.1-6.5 34-21.5 6.6-5 12.1-9.1 12.2-9.1.1 0 .8.3 1.7.6z\"></path><path d=\"M273.2 175.2c-5 36.6-15.3 69-27.4 86.6-3.6 5.3-7.9 15.5-8 19.1-.1 1.5 2.1 7.6 4.7 13.6 9.6 22.1 11.2 29.3 7.6 35.1-2.1 3.4-7.4 7.8-10.6 8.8-1.4.4-2.7 2.7-4.3 7.3-3.5 10.1-12.2 27.8-17.6 36.1-2.7 4-7.7 10.4-11.1 14.1-12.1 13.2-24.6 41-41.6 92.1l-5.8 17.5 17.7.3c9.7.1 18.1.1 18.8-.2.6-.2 1.4-4.6 1.8-10.8 2.3-35.4 11.5-71.4 22.3-87.1 6.9-10 37.7-27.5 72.3-41.2 36.2-14.2 73.2-23.6 111-28.1 15.8-1.8 55.2-2.5 67.7-1.1l7.2.8-1.1-3.2c-2.2-6.4-11.5-23.6-18.1-33.6-27-40.9-69.6-79.1-125.2-112.3-11.7-7-55.8-30-57.5-30-.3 0-1.6 7.3-2.8 16.2zm28.8 23.4c54.2 30 97.6 68.3 126.6 111.9 4 6.1 7.4 11.5 7.4 11.8 0 .4-3.4.7-7.5.7h-7.4l-5-7.3c-26.3-39-68.4-75.9-119.1-104.6-6.9-3.8-13-7.4-13.6-7.8-1.5-1 .4-13.3 2-13.3.6 0 8.1 3.9 16.6 8.6zm-11.5 31.7c34.3 22.8 63.8 50.8 89.8 85.4 4.2 5.6 7.7 10.4 7.7 10.6 0 .3-3.2 1.1-7.1 1.7-6.9 1.2-7.1 1.2-8.7-1.1-4.1-5.9-16.2-20.4-25.5-30.7-17.3-19.2-41.7-40.1-63.6-54.7l-9.9-6.6 2.1-6.4c2.4-7.4 1.1-7.6 15.2 1.8zm-11.9 36.4c14.8 12.3 34.8 32 45.1 44.3 8.1 9.8 18.5 24.1 17.9 24.7-.2.2-3.1 1.2-6.5 2.3l-6 1.8-6.6-8.8c-13.4-18-35.4-40.3-56.4-57.3l-7.8-6.3 3.1-5.7c1.7-3.1 3.4-5.7 3.7-5.7.3 0 6.4 4.8 13.5 10.7zm-5.6 50.5c8.2 12.2 19.5 33.7 18.2 34.8-.9.8-11.5 5.1-11.7 4.8 0-.2-1-2.3-2-4.7-1.1-2.4-4.3-8.7-7.2-13.9-4.8-8.7-5.3-10.2-5.3-15.8 0-4.3-.9-9-3-15.1l-2.9-8.8 2.9 3.5c1.7 1.9 6.6 8.8 11 15.2zm-20.6 38.5c1.1 13.6 1.4 12.8-5.7 16.8-3.5 1.9-6.7 3.5-7 3.5-1.6 0-.5-5.2 2.7-12.6 1.9-4.3 4.1-9.6 5-11.7 2.5-6.1 4.2-4.8 5 4z\"></path><path d=\"M442.4 354.8c-.6.4-2.3 4.5-3.7 9.2-11.4 37.3-41.5 70.3-83.3 91.3-33.7 16.9-69.6 25.6-128.9 31.3l-5.1.5.8 9.6c.4 5.3.9 9.7 1 9.9.8.7 22.9 3.4 33.3 3.9 29.8 1.7 68.8-4.9 98.2-16.6 38.7-15.3 78.3-45 99.6-74.6 13.9-19.4 23.7-44.8 23.7-61.4V354h-17.2c-9.5 0-17.8.4-18.4.8z\"></path><path d=\"M414.5 356.8c-7.5.7-33 4.5-42 6.3-46.6 9.3-85.6 24.5-117.3 45.6-14.9 9.9-20.8 15.8-25.5 25.4-4.1 8.3-7.7 21.1-7.7 27.1v3.8h4.8c13 0 47.6-5.3 68.2-10.5 24.4-6.1 49.1-16.1 65.9-26.6 24.5-15.4 43.6-36.6 53.3-59.1 4.5-10.5 4.6-12.4.3-12z\"></path>\n          </g>\n          <g id=\"eye\">\n            <defs id=\"defs2214\"/>\n            <path d=\"M 482.47122,483.65668 C 482.09821,481.16923 482.00349,468.19138 482.26073,454.81702 C 482.85598,423.86986 485.74029,409.33575 508.02304,325 C 517.97202,287.34512 518.96876,261.67667 510.62952,257.87706 C 503.22084,254.50144 495.51948,258.76554 483.33874,272.98748 C 444.87758,317.89379 384.416,371.63828 336.592,403.43111 C 234.38064,471.38003 125.75165,495.91654 61.5,465.56738 C 14.135995,443.19507 -9.4559604,386.23292 7.5301438,335.2586 C 23.728797,286.64738 86.775557,268.60992 123.4217,302.10244 C 141.67589,318.78573 137.19751,348.25122 114.70406,359.46018 C 96.526568,368.51841 73.570329,349.94535 79.65551,331.10368 C 81.787859,324.50125 81.436951,324.28716 72.953651,327.0149 C 23.293219,342.98286 33.831342,415.54173 88.682829,435.31611 C 152.06988,458.16762 251.76781,426.54376 351.5,351.95135 C 391.05504,322.36706 438.67015,273.24845 433.13368,267.73999 C 431.50743,266.12196 409.19769,266.53511 388,268.57582 C 325.73643,274.56995 251.40446,262.42665 164,231.98188 C 152.725,228.05456 136.525,222.43341 128,219.49042 C 109.63237,213.14958 75.226122,204.4179 51.5,200.07611 C 42.15,198.3651 33.478754,196.73725 32.230564,196.45866 L 29.961129,195.95214 L 30.230564,174.3183 L 30.5,152.68446 L 39,150.74391 C 72.50072,143.09568 128.76294,128.99955 175,116.66999 C 278.32991,89.11608 289.32495,86.38305 310.5,82.98883 C 383.04703,71.36 422.7219,78.62443 574.31118,131.29245 C 602.82103,141.19788 634.45188,143.67699 662.03604,138.16802 C 668.38086,136.90086 675.54332,136.00717 677.95262,136.18205 L 682.33316,136.5 L 691.61566,157 C 696.72104,168.275 700.92108,177.75395 700.94908,178.06434 C 700.97709,178.37472 694.8125,179.42018 687.25,180.38758 C 628.89838,187.85196 595.69886,201.31776 576.89325,225.14854 C 562.86714,242.92267 559.1993,250.80358 556.38741,269.20848 C 552.05483,297.56695 558.59871,307.69047 590.22312,321.55294 C 598.33549,325.10898 598.36533,325.2104 591.75,326.74292 C 566.33045,332.63166 554.58404,346.42334 542.01437,385.13842 C 521.75002,447.55347 501.97616,483.58514 485.82472,487.52648 C 483.28485,488.14627 483.11511,487.95039 482.47122,483.65668 z M 424.2218,225.63181 C 474.97905,220.35891 533.69333,201.01428 568.3406,178.14891 L 572.18119,175.61432 L 564.6736,171.83682 C 544.62325,161.74834 515.9203,151.09439 477.85766,139.61248 C 468.37374,136.75158 435.02218,129.50425 417.73035,126.54674 L 413.96069,125.902 L 414.73035,130.201 C 421.33896,167.11429 399.13266,191.38005 360.2101,189.77757 C 325.46755,188.34718 305.90676,167.5813 310.49936,137.00427 C 311.3496,131.34347 311.86562,126.53229 311.64607,126.31274 C 310.91615,125.58281 254.01865,138.94051 216.75536,148.59001 C 184.37601,156.9748 143.86144,166.87973 118,172.73355 L 109.5,174.65755 L 123,178.84822 C 130.425,181.15309 154.725,189.0744 177,196.45112 C 234.90395,215.62695 267.37147,222.92242 312.89555,226.98694 C 328.35761,228.36743 407.1171,227.40873 424.2218,225.63181 z M 35.354897,110.38623 C 35.716536,99.99881 36.572127,87.9 37.256211,83.5 L 38.5,75.5 L 56.5,75.47117 C 89.061602,75.41901 105.13604,71.29991 198.5,39.083437 C 273.3851,13.243341 349.47211,3.065576 403.05014,11.721825 C 448.7358,19.102957 499.55051,32.310146 558,51.99465 C 615.37673,71.31787 646.14746,74.42614 681.5,64.46987 C 684.63769,63.58621 703.5919,96.68847 701.36023,99.15444 C 699.55859,101.14524 692.34416,104.11236 682,107.11686 C 671.59412,110.13927 628.62391,111.07697 614.24412,108.59543 C 603.42274,106.72796 561.07836,94.69295 532.5,85.36232 C 458.57731,61.22709 370.02847,49.18587 319,56.32973 C 273.61484,62.68354 255.87256,67.04951 198.71398,85.92932 C 131.51605,108.12519 72.656502,123.90207 39.598686,128.57904 L 34.697371,129.27247 L 35.354897,110.38623 z\" />\n          </g>\n          <g id=\"horus\">\n            <style type=\"text/css\">.st0{fill:currentColor;} .st2{fill:currentColor;} .st3{fill:var(--kemet-color-white-to-black);}</style>\n            <path class=\"st0\" d=\"M1049.5,304.2c0,0,167.6,67.4,115.3,92.3C1112.5,421.5,1055.4,406.6,1049.5,304.2z M708.9,21.3 c0,0-18,79.6,26.9,155.4c0,0-222.2-27-446.9,36c0,0-28.3,60.4,5.1,133.6c0,0-195.3,74.5-289,170.8c0,0,219.6,41.1,197.9,258.2 c0,0,232.5-33.4,521.5,251.7c88.6-475.4,426.2-668.3,625.5-450.8c0,0,60.4-133.6-122-231.2c0,0-19.3-93.7-187.5-132.3 c0,0-66.8-28.3-100.2-98.9c0,0-10.3,12.9-14.2,51.4C925.9,165.2,764.2,36.7,708.9,21.3L708.9,21.3z\"/>\n            <path class=\"st1\" d=\"M509.8,4.6c0,0-61.6,77.1-77,129.6L737.2,345l-1.5,1.3L409.6,192.2c0,0-18,27-29.6,111.7 c0,0,186.5,81.4,326.4,96.1c-0.2,1-0.3,2.1-0.5,3.1c-38,2.1-138.1,2.7-331.1-27.3c0,0-16.7,107.9,27,178.5 c0,0,199.8-88.8,306.2-114.8c0.4,1.4,0.8,2.9,1.3,4.3C662.1,470.7,495.9,567.1,430,627.5c0,0,30.8,89.9,97.7,128.5 c0,0,147.5-222.4,199.3-280l2.3,2.5c-18.1,32.4-162,289.5-164.4,317.3c0,0,78.4,69.4,163.1,92.5c0,0-39.4-246.4,63.8-379.3 c2.3,0.2,4.5,0.3,6.8,0.3c22.4,0,44.1-8.1,61.1-22.8c8.7-6.7,15.8-15.3,20.7-25.1c16.7-29.8,15.9-66.3-2.1-95.3 c-11.2-22-32.1-37.3-56.4-41.3c-17.4-4.6-35.9-4-52.9,1.9C767.9,325.8,549.5,127.6,509.8,4.6L509.8,4.6z\"/>\n            <path class=\"st2\" d=\"M1159.9,487.1c0,0-198-10.1-346.9,64.4c0,0-49.1,101.7-34.5,185.3C778.4,736.9,938.2,510.7,1159.9,487.1z M1164.4,367.2c0,0-56.3-67.2-137.1-101.7c0,0,19.1,56.3,26.4,74.5l1-30.6C1054.6,309.3,1108,324.5,1164.4,367.2z\"/>\n            <g>\n              <path class=\"st3\" d=\"M769.1,326.8L475.5,52.1l34.3-47.5C509.8,4.6,516.6,58.2,769.1,326.8z M735.6,346.5l-326-154.3 c-8.9,17-15.1,35.4-18.3,54.3L735.6,346.5z M706,403.2c0,0-128.4,7.1-331.1-27.3c0,0-8.4,66.4,0.2,100L706,403.2z M709.5,443.9 c0,0-210.2,117.8-279.3,183.7c0,0,15.3,39.8,27.6,56.6L709.5,443.9z M729.4,478.5c0,0-122.2,215.4-164.4,317.3 c0,0,33,27.9,59.4,44.1L729.4,478.5z M813.2,340.1C856,363.2,872,416.6,849,459.4c-8.2,15.2-20.6,27.6-35.8,35.8 c42.8-4,74.3-42,70.2-84.8C879.9,373.1,850.4,343.6,813.2,340.1z\"/>\n            </g>\n          </g>\n        </defs>\n      </svg>\n    </kemet-svgs>\n    <kemet-svg set=\"svgs\" svg=\"${args.svg}\" viewbox=\"${getViewBox(args.svg)}\"></kemet-svg>\n  `;\n}\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n"]}

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

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
  * @status stable
  *
  * @tagname kemet-svgs
- * @summary A set of SVG graphics that can be referenced any where in a page or app.
+ * @summary A set of SVG graphics that can be referenced anywhere in a page or app.
  *
  * @prop {string} set - Defines the name for the set of svgs.
  *

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

@@ -6,7 +6,7 @@ import { customElement, property, state } from 'lit/decorators.js';
  * @status stable
  *
  * @tagname kemet-svgs
- * @summary A set of SVG graphics that can be referenced any where in a page or app.
+ * @summary A set of SVG graphics that can be referenced anywhere in a page or app.
  *
  * @prop {string} set - Defines the name for the set of svgs.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-svgs.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svgs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;GASG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAAjD;;QAQE,QAAG,GAAW,MAAM,CAAC;IA0BvB,CAAC;IApBC,YAAY;QACV,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC;QAE9C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,aAAa;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAElE,IAAI,WAAW,EAAE;YACf,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;SAC5C;IACH,CAAC;CACF,CAAA;AAjCQ,gBAAM,GAAG,CAAC,GAAG,CAAA;;;;GAInB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACN;AAGrB;IADC,KAAK,EAAE;8CACqB;AAXV,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAkC7B;eAlCoB,SAAS","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svgs\n * @summary A set of SVG graphics that can be referenced any where in a page or app.\n *\n * @prop {string} set - Defines the name for the set of svgs.\n *\n */\n\n@customElement('kemet-svgs')\nexport default class KemetSVGs extends LitElement {\n  static styles = [css`\n    :host {\n      display: none;\n    }\n  `];\n\n  @property({ type: String })\n  set: string = 'svgs';\n\n  @state()\n  slotElement: HTMLSlotElement;\n\n\n  firstUpdated() {\n    this.slotElement = this.shadowRoot.querySelector('slot');\n    document.kemetSVGs = document.kemetSVGs || {};\n\n    this.populateIcons();\n    this.slotElement.addEventListener('slotchange', () => this.populateIcons());\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  populateIcons() {\n    const svg = this.slotElement.assignedElements()[0];\n    const svgContents = svg ? svg.querySelectorAll('defs > g') : null;\n\n    if (svgContents) {\n      document.kemetSVGs[this.set] = svgContents;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svgs': KemetSVGs\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"]}
+{"version":3,"file":"kemet-svgs.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svgs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;GASG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAAjD;;QAQE,QAAG,GAAW,MAAM,CAAC;IAyBvB,CAAC;IApBC,YAAY;QACV,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC;QAE9C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,aAAa;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAElE,IAAI,WAAW,EAAE;YACf,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;SAC5C;IACH,CAAC;CACF,CAAA;AAhCQ,gBAAM,GAAG,CAAC,GAAG,CAAA;;;;GAInB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACN;AAGrB;IADC,KAAK,EAAE;8CACqB;AAXV,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAiC7B;eAjCoB,SAAS","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svgs\n * @summary A set of SVG graphics that can be referenced anywhere in a page or app.\n *\n * @prop {string} set - Defines the name for the set of svgs.\n *\n */\n\n@customElement('kemet-svgs')\nexport default class KemetSVGs extends LitElement {\n  static styles = [css`\n    :host {\n      display: none;\n    }\n  `];\n\n  @property({ type: String })\n  set: string = 'svgs';\n\n  @state()\n  slotElement: HTMLSlotElement;\n\n  firstUpdated() {\n    this.slotElement = this.shadowRoot.querySelector('slot');\n    document.kemetSVGs = document.kemetSVGs || {};\n\n    this.populateIcons();\n    this.slotElement.addEventListener('slotchange', () => this.populateIcons());\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  populateIcons() {\n    const svg = this.slotElement.assignedElements()[0];\n    const svgContents = svg ? svg.querySelectorAll('defs > g') : null;\n\n    if (svgContents) {\n      document.kemetSVGs[this.set] = svgContents;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svgs': KemetSVGs\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"]}

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

@@ -2,8 +2,17 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import '../kemet-tabs';
 import '../kemet-tab';
 import '../kemet-tab-panel';
+import '../../kemet-icon/kemet-icon';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const SelectByName: Story;
 export declare const SelectByIndex: Story;
+export declare const Closable: Story;
+export declare const Fade: Story;
+export declare const Slide: Story;
+export declare const Divider: Story;
+export declare const NoInk: Story;
+export declare const Right: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;