kemet-ui 1.4.0 → 2.0.1

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

@@ -1,5 +1,6 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
+import { customElement, property } from 'lit/decorators.js';
 /**
  * @since 1.0.0
  * @status stable
@@ -16,96 +17,81 @@ import { html, css, LitElement } from 'lit';
  * @csspart svg - The svg element.
  *
  */
-
-export default class KemetSVG extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      set: {
-        type: String,
-      },
-      svg: {
-        type: String,
-      },
-      size: {
-        type: Number,
-      },
-      ratio: {
-        type: String,
-      },
-      viewBox: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.set = 'svgs';
-    this.ratio = 'none';
-    this.viewBox = '0 0 128 128';
-  }
-
-  updated() {
-    this.setSize();
-    this.getIcon();
-  }
-
-  render() {
-    return html`
-      <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}"></svg>
+let KemetSVG = class KemetSVG extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.svg = 'svgs';
+        this.ratio = 'none';
+        this.viewBox = '0 0 128 128';
+    }
+    updated() {
+        this.setSize();
+        this.getIcon();
+    }
+    render() {
+        return html `
+      <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}" fill="currentColor"></svg>
     `;
-  }
-
-  setSize() {
-    if (this.size) {
-      this.style.width = `${this.size}px`;
-      this.style.height = `${this.size}px`;
     }
-  }
-
-  getIcon() {
-    let svgElement;
-    const svgs = document.kemetSVGs[this.set];
-
-    svgs.forEach((svg, index) => {
-      const id = svg.getAttribute('id');
-
-      if (id && id === this.svg) {
-        svgElement = svgs[index];
-      }
-    });
-
-    if (svgElement) {
-      this.fillSVG(svgElement);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Could not find svg "${this.svg}" in set "${this.set}".`);
+    setSize() {
+        if (this.size) {
+            this.style.width = `${this.size}px`;
+            this.style.height = `${this.size}px`;
+        }
+    }
+    getIcon() {
+        let svgElement;
+        const svgs = document.kemetSVGs[this.set];
+        svgs.forEach((svg, index) => {
+            const id = svg.getAttribute('id');
+            if (id && id === this.svg) {
+                svgElement = svgs[index];
+            }
+        });
+        if (svgElement) {
+            this.fillSVG(svgElement);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Could not find svg "${this.svg}" in set "${this.set}".`);
+        }
+    }
+    fillSVG(element) {
+        const content = element.cloneNode(true);
+        const svg = this.shadowRoot.querySelector('svg');
+        const g = svg.querySelector('g');
+        if (g)
+            g.remove();
+        svg.appendChild(content);
+    }
+};
+KemetSVG.styles = [css `
+    :host {
+      display: inline-block;
     }
-  }
-
-  fillSVG(element) {
-    const content = element.cloneNode(true);
-    const svg = this.shadowRoot.querySelector('svg');
-    const g = svg.querySelector('g');
-
-    if (g) g.remove();
-    svg.appendChild(content);
-  }
-}
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-svg') || customElements.define('kemet-svg', KemetSVG);
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  `];
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "set", void 0);
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "svg", void 0);
+__decorate([
+    property({ type: Number })
+], KemetSVG.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "ratio", void 0);
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "viewBox", void 0);
+KemetSVG = __decorate([
+    customElement('kemet-svg')
+], KemetSVG);
+export default KemetSVG;
+//# sourceMappingURL=kemet-svg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-svg.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svg.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAgBE,QAAG,GAAW,MAAM,CAAC;QAMrB,UAAK,GAAW,MAAM,CAAC;QAGvB,YAAO,GAAW,aAAa,CAAC;IAgDlC,CAAC;IA9CC,OAAO;QACL,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,OAAO,0BAA0B,IAAI,CAAC,KAAK;KAC5E,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;YACpC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;SACtC;IACH,CAAC;IAED,OAAO;QACL,IAAI,UAAU,CAAC;QACf,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1C,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAElC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE;gBACzB,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;SAC1B;aAAM;YACL,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,GAAG,aAAa,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;SACzE;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,CAAC;YAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAClB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;CACF,CAAA;AAxEQ,eAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;GASnB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACK;AAzBb,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyE5B;eAzEoB,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svg\n * @summary A svg from a set of custom SVGs.\n *\n * @prop {string} set - Defines which set of svgs is referenced.\n * @prop {string} svg - The name (id) of the svg to be displayed.\n * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.\n * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.\n * @prop {string} viewBox - The value for the viewBox attribute of the svg.\n *\n * @csspart svg - The svg element.\n *\n */\n\n@customElement('kemet-svg')\nexport default class KemetSVG extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n\n  @property({ type: String })\n  set: string;\n\n  @property({ type: String })\n  svg: string = 'svgs';\n\n  @property({ type: Number })\n  size: number;\n\n  @property({ type: String })\n  ratio: string = 'none';\n\n  @property({ type: String })\n  viewBox: string = '0 0 128 128';\n\n  updated() {\n    this.setSize();\n    this.getIcon();\n  }\n\n  render() {\n    return html`\n      <svg part=\"svg\" viewBox=\"${this.viewBox}\" preserveAspectRatio=\"${this.ratio}\" fill=\"currentColor\"></svg>\n    `;\n  }\n\n  setSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  getIcon() {\n    let svgElement;\n    const svgs = document.kemetSVGs[this.set];\n\n    svgs.forEach((svg, index) => {\n      const id = svg.getAttribute('id');\n\n      if (id && id === this.svg) {\n        svgElement = svgs[index];\n      }\n    });\n\n    if (svgElement) {\n      this.fillSVG(svgElement);\n    } else {\n      // eslint-disable-next-line no-console\n      console.error(`Could not find svg \"${this.svg}\" in set \"${this.set}\".`);\n    }\n  }\n\n  fillSVG(element) {\n    const content = element.cloneNode(true);\n    const svg = this.shadowRoot.querySelector('svg');\n    const g = svg.querySelector('g');\n\n    if (g) g.remove();\n    svg.appendChild(content);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svg': KemetSVG\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svgs
+ * @summary A set of SVG graphics that can be referenced any where in a page or app.
+ *
+ * @prop {string} set - Defines the name for the set of svgs.
+ *
+ */
+export default class KemetSVGs extends LitElement {
+    static styles: import("lit").CSSResult[];
+    set: string;
+    slotElement: HTMLSlotElement;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    populateIcons(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svgs': KemetSVGs;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}

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

@@ -1,5 +1,6 @@
+import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
-
+import { customElement, property, state } from 'lit/decorators.js';
 /**
  * @since 1.0.0
  * @status stable
@@ -10,51 +11,41 @@ import { LitElement, html, css } from 'lit';
  * @prop {string} set - Defines the name for the set of svgs.
  *
  */
-
-export default class KemetSVGs extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      set: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.set = 'svgs';
-  }
-
-  firstUpdated() {
-    this.slotElement = this.shadowRoot.querySelector('slot');
-    document.kemetSVGs = document.kemetSVGs || {};
-
-    this.populateIcons();
-    this.slotElement.addEventListener('slotchange', this.populateIcons());
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-
-  populateIcons() {
-    const svg = this.slotElement.assignedElements()[0];
-    const svgContents = svg ? svg.querySelectorAll('defs > g') : null;
-
-    if (svgContents) {
-      document.kemetSVGs[this.set] = svgContents;
+let KemetSVGs = class KemetSVGs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.set = 'svgs';
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-svgs') || customElements.define('kemet-svgs', KemetSVGs);
+    firstUpdated() {
+        this.slotElement = this.shadowRoot.querySelector('slot');
+        document.kemetSVGs = document.kemetSVGs || {};
+        this.populateIcons();
+        this.slotElement.addEventListener('slotchange', () => this.populateIcons());
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    populateIcons() {
+        const svg = this.slotElement.assignedElements()[0];
+        const svgContents = svg ? svg.querySelectorAll('defs > g') : null;
+        if (svgContents) {
+            document.kemetSVGs[this.set] = svgContents;
+        }
+    }
+};
+KemetSVGs.styles = [css `
+    :host {
+      display: none;
+    }
+  `];
+__decorate([
+    property({ type: String })
+], KemetSVGs.prototype, "set", void 0);
+__decorate([
+    state()
+], KemetSVGs.prototype, "slotElement", void 0);
+KemetSVGs = __decorate([
+    customElement('kemet-svgs')
+], KemetSVGs);
+export default KemetSVGs;
+//# sourceMappingURL=kemet-svgs.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+export interface KemetSVGInterface extends HTMLElement {
+    set?: string;
+    svg?: string;
+    size?: number;
+    ratio?: string;
+    viewBox?: string;
+}
+export interface KemetSVGsInterface extends HTMLElement {
+    set?: string;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSVGInterface extends HTMLElement {\n  set?: string,\n  svg?: string,\n  size?: number,\n  ratio?: string,\n  viewBox?: string,\n}\n\nexport interface KemetSVGsInterface extends HTMLElement {\n  set?: string,\n}\n"]}

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

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

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

@@ -0,0 +1,142 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../kemet-tabs';
+import '../kemet-tab';
+import '../kemet-tab-panel';
+const meta = {
+    title: 'Components / Tabs',
+    component: 'kemet-tabs',
+};
+export default meta;
+const NamedTemplate = ({ selected = 'settings', panelEffect = 'slide', swipe = true, divider = true, tabsAlign = 'center', hideInk = false, placement = 'top', measureHeightOffset, }) => html `
+  <kemet-tabs selected="${selected}" panel-effect=${panelEffect} ?swipe=${swipe} ?divider=${divider} tabs-align=${tabsAlign} ?hide-ink=${hideInk} placement=${placement} measure-height-offset=${ifDefined(measureHeightOffset)}>
+    <kemet-tab slot="tab" link="account">
+      <kemet-icon icon="person-circle"></kemet-icon>&nbsp;Account
+    </kemet-tab>
+    <kemet-tab slot="tab" link="settings">
+      <kemet-icon icon="gear"></kemet-icon>&nbsp;Settings
+    </kemet-tab>
+    <kemet-tab slot="tab" link="dashboard">
+      <kemet-icon icon="columns-gap"></kemet-icon>&nbsp;Dashboard
+    </kemet-tab>
+    <kemet-tab-panel panel="account" slot="panel">
+      <h3 kemet-margin-top="tiny:none">Account</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </kemet-tab-panel>
+    <kemet-tab-panel panel="settings" slot="panel">
+      <h3 kemet-margin-top="tiny:none">Settings</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </kemet-tab-panel>
+    <kemet-tab-panel panel="dashboard" slot="panel">
+      <h3 kemet-margin-top="tiny:none">Dashboard</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <p>Tellus integer feugiat scelerisque varius morbi. Non odio euismod lacinia at quis. Dictum sit amet justo donec. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sed nisi lacus sed viverra tellus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Arcu dui vivamus arcu felis bibendum ut tristique. Dictum at tempor commodo ullamcorper a. Nisl nunc mi ipsum faucibus vitae. In eu mi bibendum neque.</p>
+    </kemet-tab-panel>
+  </kemet-tabs>
+  <hr />
+`;
+const IndexTemplate = ({ panelEffect = 'slide', swipe = true, divider = true, tabsAlign = 'center', hideInk = false, placement = 'top', numOfTabs = 5, closable = true, measureHeightOffset, }) => {
+    const tabs = [];
+    const panels = [];
+    for (let i = 0; i < numOfTabs; i += 1) {
+        tabs.push(html `<kemet-tab slot="tab" ?closable=${closable}>This is tab ${i + 1}.</kemet-tab>`);
+    }
+    for (let i = 0; i < numOfTabs; i += 1) {
+        panels.push(html `
+      <kemet-tab-panel slot="panel">
+        <h3>Panel ${i + 1}</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </kemet-tab-panel>
+    `);
+    }
+    return html `
+    <kemet-tabs panel-effect=${panelEffect} ?swipe=${swipe} ?divider=${divider} tabs-align=${tabsAlign} ?hide-ink=${hideInk} placement=${placement} measure-height-offset=${ifDefined(measureHeightOffset)}>
+      ${tabs}
+      ${panels}
+    </kemet-tabs>
+  `;
+};
+export const SelectByName = {
+    render: (args) => NamedTemplate(args),
+    args: {
+        selected: 'settings',
+        panelEffect: 'slide',
+        swipe: true,
+        divider: true,
+        tabsAlign: 'center',
+        hideInk: false,
+        placement: 'top',
+    },
+    argTypes: {
+        panelEffect: {
+            control: { type: 'select' },
+            options: ['none', 'slide', 'fade'],
+        },
+        swipe: {
+            control: { type: 'boolean' },
+        },
+        divider: {
+            control: { type: 'boolean' },
+        },
+        tabsAlign: {
+            control: { type: 'select' },
+            options: ['center', 'between', 'around', 'evenly', 'start', 'end'],
+        },
+        hideInk: {
+            control: { type: 'boolean' },
+        },
+        placement: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+        measureHeightOffset: {
+            control: { type: 'number' },
+        },
+    }
+};
+export const SelectByIndex = {
+    render: (args) => IndexTemplate(args),
+    args: {
+        numOfTabs: 5,
+        closable: true,
+        panelEffect: 'slide',
+        swipe: true,
+        divider: true,
+        tabsAlign: 'center',
+        hideInk: false,
+        placement: 'top',
+    },
+    argTypes: {
+        numOfTabs: {
+            control: { type: 'number' },
+        },
+        closable: {
+            control: { type: 'boolean' },
+        },
+        panelEffect: {
+            control: { type: 'select' },
+            options: ['none', 'slide', 'fade'],
+        },
+        swipe: {
+            control: { type: 'boolean' },
+        },
+        divider: {
+            control: { type: 'boolean' },
+        },
+        tabsAlign: {
+            control: { type: 'select' },
+            options: ['center', 'between', 'around', 'evenly', 'start', 'end'],
+        },
+        hideInk: {
+            control: { type: 'boolean' },
+        },
+        placement: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+        measureHeightOffset: {
+            control: { type: 'number' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tabs/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tabs';\nimport '../kemet-tab';\nimport '../kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tabs',\n  component: 'kemet-tabs',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst NamedTemplate = ({\n  selected = 'settings',\n  panelEffect = 'slide',\n  swipe = true,\n  divider = true,\n  tabsAlign = 'center',\n  hideInk = false,\n  placement = 'top',\n  measureHeightOffset,\n}) => html`\n  <kemet-tabs selected=\"${selected}\" panel-effect=${panelEffect} ?swipe=${swipe} ?divider=${divider} tabs-align=${tabsAlign} ?hide-ink=${hideInk} placement=${placement} measure-height-offset=${ifDefined(measureHeightOffset)}>\n    <kemet-tab slot=\"tab\" link=\"account\">\n      <kemet-icon icon=\"person-circle\"></kemet-icon>&nbsp;Account\n    </kemet-tab>\n    <kemet-tab slot=\"tab\" link=\"settings\">\n      <kemet-icon icon=\"gear\"></kemet-icon>&nbsp;Settings\n    </kemet-tab>\n    <kemet-tab slot=\"tab\" link=\"dashboard\">\n      <kemet-icon icon=\"columns-gap\"></kemet-icon>&nbsp;Dashboard\n    </kemet-tab>\n    <kemet-tab-panel panel=\"account\" slot=\"panel\">\n      <h3 kemet-margin-top=\"tiny:none\">Account</h3>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    </kemet-tab-panel>\n    <kemet-tab-panel panel=\"settings\" slot=\"panel\">\n      <h3 kemet-margin-top=\"tiny:none\">Settings</h3>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    </kemet-tab-panel>\n    <kemet-tab-panel panel=\"dashboard\" slot=\"panel\">\n      <h3 kemet-margin-top=\"tiny:none\">Dashboard</h3>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n      <p>Tellus integer feugiat scelerisque varius morbi. Non odio euismod lacinia at quis. Dictum sit amet justo donec. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sed nisi lacus sed viverra tellus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Arcu dui vivamus arcu felis bibendum ut tristique. Dictum at tempor commodo ullamcorper a. Nisl nunc mi ipsum faucibus vitae. In eu mi bibendum neque.</p>\n    </kemet-tab-panel>\n  </kemet-tabs>\n  <hr />\n`;\n\nconst IndexTemplate = ({\n  panelEffect = 'slide',\n  swipe = true,\n  divider = true,\n  tabsAlign = 'center',\n  hideInk = false,\n  placement = 'top',\n  numOfTabs = 5,\n  closable = true,\n  measureHeightOffset,\n}) => {\n  const tabs = [];\n  const panels = [];\n\n  for (let i = 0; i < numOfTabs; i += 1) {\n    tabs.push(html`<kemet-tab slot=\"tab\" ?closable=${closable}>This is tab ${i + 1}.</kemet-tab>`);\n  }\n\n  for (let i = 0; i < numOfTabs; i += 1) {\n    panels.push(html`\n      <kemet-tab-panel slot=\"panel\">\n        <h3>Panel ${i + 1}</h3>\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n      </kemet-tab-panel>\n    `);\n  }\n\n  return html`\n    <kemet-tabs panel-effect=${panelEffect} ?swipe=${swipe} ?divider=${divider} tabs-align=${tabsAlign} ?hide-ink=${hideInk} placement=${placement} measure-height-offset=${ifDefined(measureHeightOffset)}>\n      ${tabs}\n      ${panels}\n    </kemet-tabs>\n  `;\n};\n\nexport const SelectByName: Story = {\n  render: (args: any) => NamedTemplate(args),\n  args: {\n    selected: 'settings',\n    panelEffect: 'slide',\n    swipe: true,\n    divider: true,\n    tabsAlign: 'center',\n    hideInk: false,\n    placement: 'top',\n  },\n  argTypes: {\n    panelEffect: {\n      control: { type: 'select' },\n      options: ['none', 'slide', 'fade'],\n    },\n    swipe: {\n      control: { type: 'boolean' },\n    },\n    divider: {\n      control: { type: 'boolean' },\n    },\n    tabsAlign: {\n      control: { type: 'select' },\n      options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n    },\n    hideInk: {\n      control: { type: 'boolean' },\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n    measureHeightOffset: {\n      control: { type: 'number' },\n    },\n  }\n};\n\nexport const SelectByIndex: Story = {\n  render: (args: any) => IndexTemplate(args),\n  args: {\n    numOfTabs: 5,\n    closable: true,\n    panelEffect: 'slide',\n    swipe: true,\n    divider: true,\n    tabsAlign: 'center',\n    hideInk: false,\n    placement: 'top',\n  },\n  argTypes: {\n    numOfTabs: {\n      control: { type: 'number' },\n    },\n    closable: {\n      control: { type: 'boolean' },\n    },\n    panelEffect: {\n      control: { type: 'select' },\n      options: ['none', 'slide', 'fade'],\n    },\n    swipe: {\n      control: { type: 'boolean' },\n    },\n    divider: {\n      control: { type: 'boolean' },\n    },\n    tabsAlign: {\n      control: { type: 'select' },\n      options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n    },\n    hideInk: {\n      control: { type: 'boolean' },\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n    measureHeightOffset: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}

package/dist/components/kemet-tabs/kemet-tab-panel.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tab-panel
+ * @summary A panel in a set of tabs.
+ *
+ * @prop {boolean} selected - Is true when a panel is selected
+ * @prop {string} panel - Identifies the panel to be linked by a tab
+ *
+ * @cssproperty --kemet-tab-panel-fade-speed - The fade speed. Default: 0.5s.
+ *
+ */
+export default class KemetTabPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selected: boolean;
+    panel: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    a11y(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tab-panel': KemetTabPanel;
+    }
+}

package/dist/components/kemet-tabs/kemet-tab-panel.js

@@ -1,5 +1,7 @@
-import { LitElement, html, css } from 'lit';
-
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesKemetTabPanel } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -13,80 +15,38 @@ import { LitElement, html, css } from 'lit';
  * @cssproperty --kemet-tab-panel-fade-speed - The fade speed. Default: 0.5s.
  *
  */
-
-export default class KemetTabPanel extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        width: 100%;
-        flex: 0 0 auto;
-      }
-
-      ::slotted(img) {
-        max-width: 100%;
-      }
-
-      :host(.fade) {
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity var(--kemet-tab-panel-fade-speed, 0.5s) ease;
-      }
-
-      :host(.fade[selected]) {
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      :host(.fade.push) {
-        margin-left: -100%;
-      }
-
-      :host(.vertical) {
-        display: none;
-      }
-
-      :host(.vertical[selected]) {
-        display: block;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      selected: {
-        type: Boolean,
-        reflect: true,
-      },
-      panel: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.selected = false;
-  }
-
-  updated() {
-    this.a11y();
-  }
-
-  render() {
-    return html`
+let KemetTabPanel = class KemetTabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+    }
+    updated() {
+        this.a11y();
+    }
+    render() {
+        return html `
       <slot></slot>
     `;
-  }
-
-  a11y() {
-    this.setAttribute('role', 'tabpanel');
-
-    if (this.selected) {
-      this.setAttribute('tabindex', '0');
-    } else {
-      this.setAttribute('tabindex', '-1');
     }
-  }
-}
-
-customElements.define('kemet-tab-panel', KemetTabPanel);
+    a11y() {
+        this.setAttribute('role', 'tabpanel');
+        if (this.selected) {
+            this.setAttribute('tabindex', '0');
+        }
+        else {
+            this.setAttribute('tabindex', '-1');
+        }
+    }
+};
+KemetTabPanel.styles = [stylesKemetTabPanel];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTabPanel.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], KemetTabPanel.prototype, "panel", void 0);
+KemetTabPanel = __decorate([
+    customElement('kemet-tab-panel')
+], KemetTabPanel);
+export default KemetTabPanel;
+//# sourceMappingURL=kemet-tab-panel.js.map