kemet-ui 3.1.0 → 4.0.0

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js

@@ -1,120 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesScrollSnapPaginator } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-scroll-snap-paginator
- * @summary The scroll snap's pagination.
- *
- * @prop {array} slides - Information about each slide.
- * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.
- * @prop {number} size - The size in pixels of the icons.
- * @prop {boolean} center - Determines whether to center the pagination items.
- * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.
- * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.
- * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.
- *
- * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.
- * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.
- * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.
- *
- * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.
- *
- */
-let KemetScrollSnapPaginator = class KemetScrollSnapPaginator extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.slides = [];
-        this.icon = 'circle-fill';
-        this.size = 16;
-        this.hideFocusedLinks = false;
-        this.useNumberPages = false;
-        this.useLabelPages = false;
-    }
-    updated() {
-        const scrollSnapElement = this.closest('kemet-scroll-snap');
-        if (scrollSnapElement) {
-            scrollSnapElement.addEventListener('kemet-scroll-snap-make-slides', (event) => {
-                this.slides = event.detail;
-            });
-        }
-    }
-    render() {
-        return html `
-      <nav part="nav">${this.makePagination()}</nav>
-    `;
-    }
-    makePagination() {
-        let counter = 0;
-        if (this.slides) {
-            return this.slides.map((slide) => {
-                counter = counter += 1;
-                if (slide.focused) {
-                    return html `
-            <span part="span">${this.pageDisplay(slide, counter)}</span>
-          `;
-                }
-                return html `
-          <span
-            class="link"
-            tabindex="0"
-            role="button"
-            @keyup="${(event) => this.handleKeyboardInput(event, slide.id)}"
-            @click=${() => this.slideLink(slide.id)}
-            aria-label="${slide.label}">
-            ${this.pageDisplay(slide, counter)}
-          </span>
-        `;
-            });
-        }
-        return null;
-    }
-    pageDisplay(slide, visibleIndex) {
-        if (this.useNumberPages) {
-            return visibleIndex;
-        }
-        if (this.useLabelPages) {
-            return slide.label;
-        }
-        return html `<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;
-    }
-    slideLink(index) {
-        emitEvent(this, 'kemet-scroll-snap-focus', index);
-    }
-    handleKeyboardInput(event, id) {
-        if (event.code === 'Enter' || event.code === 'Space') {
-            this.slideLink(id);
-        }
-    }
-};
-KemetScrollSnapPaginator.styles = [stylesScrollSnapPaginator];
-__decorate([
-    property({ type: Array })
-], KemetScrollSnapPaginator.prototype, "slides", void 0);
-__decorate([
-    property({ type: String })
-], KemetScrollSnapPaginator.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number })
-], KemetScrollSnapPaginator.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetScrollSnapPaginator.prototype, "center", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'hide-focused-links' })
-], KemetScrollSnapPaginator.prototype, "hideFocusedLinks", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })
-], KemetScrollSnapPaginator.prototype, "useNumberPages", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })
-], KemetScrollSnapPaginator.prototype, "useLabelPages", void 0);
-KemetScrollSnapPaginator = __decorate([
-    customElement('kemet-scroll-snap-paginator')
-], KemetScrollSnapPaginator);
-export default KemetScrollSnapPaginator;
-//# sourceMappingURL=kemet-scroll-snap-paginator.js.map

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-scroll-snap-paginator.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGY,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAIb,WAAM,GAA2B,EAAE,CAAC;QAGpC,SAAI,GAAW,aAAa,CAAC;QAG7B,SAAI,GAAW,EAAE,CAAC;QAMlB,qBAAgB,GAAY,KAAK,CAAC;QAGlC,mBAAc,GAAY,KAAK,CAAC;QAGhC,kBAAa,GAAY,KAAK,CAAC;IAqEjC,CAAC;IAnEC,OAAO;QACL,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,iBAAiB,EAAE,CAAC;YACtB,iBAAiB,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,CAAC,KAAkB,EAAE,EAAE;gBACzF,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC7B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,cAAc,EAAE;KACxC,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,OAAO,GAAG,CAAC,CAAC;QAEhB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC/B,OAAO,GAAG,OAAO,IAAI,CAAC,CAAC;gBAEvB,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;oBAClB,OAAO,IAAI,CAAA;gCACW,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;WACrD,CAAC;gBACJ,CAAC;gBAED,OAAO,IAAI,CAAA;;;;;sBAKG,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;qBACpE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;0BACzB,KAAK,CAAC,KAAK;cACvB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;;SAErC,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW,CAAC,KAA2B,EAAE,YAAoB;QAC3D,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,KAAK,CAAC;QACrB,CAAC;QAED,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,gBAAgB,CAAC;IAC7E,CAAC;IAED,SAAS,CAAC,KAAa;QACrB,SAAS,CAAC,IAAI,EAAE,yBAAyB,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC;IAED,mBAAmB,CAAC,KAAoB,EAAE,EAAU;QAClD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACrD,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;;AAzFM,+BAAM,GAAG,CAAC,yBAAyB,CAAC,AAA9B,CAA+B;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wDACU;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;kEAC3B;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;gEAC1C;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;+DAC1C;AAtBZ,wBAAwB;IAD5C,aAAa,CAAC,6BAA6B,CAAC;GACxB,wBAAwB,CA2F5C;eA3FoB,wBAAwB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnapPaginator } from './styles';\nimport KemetScrollSnapSlide from './kemet-scroll-snap-slide';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap-paginator\n * @summary The scroll snap's pagination.\n *\n * @prop {array} slides - Information about each slide.\n * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.\n * @prop {number} size - The size in pixels of the icons.\n * @prop {boolean} center - Determines whether to center the pagination items.\n * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.\n * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.\n * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.\n *\n * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.\n * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.\n * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.\n *\n * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.\n *\n */\n\n@customElement('kemet-scroll-snap-paginator')\nexport default class KemetScrollSnapPaginator extends LitElement {\n  static styles = [stylesScrollSnapPaginator];\n\n  @property({ type: Array })\n  slides: KemetScrollSnapSlide[] = [];\n\n  @property({ type: String })\n  icon: string = 'circle-fill';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  @property({ type: Boolean, attribute: 'hide-focused-links' })\n  hideFocusedLinks: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })\n  useNumberPages: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })\n  useLabelPages: boolean = false;\n\n  updated() {\n    const scrollSnapElement = this.closest('kemet-scroll-snap');\n\n    if (scrollSnapElement) {\n      scrollSnapElement.addEventListener('kemet-scroll-snap-make-slides', (event: CustomEvent) => {\n        this.slides = event.detail;\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <nav part=\"nav\">${this.makePagination()}</nav>\n    `;\n  }\n\n  makePagination() {\n    let counter = 0;\n\n    if (this.slides) {\n      return this.slides.map((slide) => {\n        counter = counter += 1;\n\n        if (slide.focused) {\n          return html`\n            <span part=\"span\">${this.pageDisplay(slide, counter)}</span>\n          `;\n        }\n\n        return html`\n          <span\n            class=\"link\"\n            tabindex=\"0\"\n            role=\"button\"\n            @keyup=\"${(event: KeyboardEvent) => this.handleKeyboardInput(event, slide.id)}\"\n            @click=${() => this.slideLink(slide.id)}\n            aria-label=\"${slide.label}\">\n            ${this.pageDisplay(slide, counter)}\n          </span>\n        `;\n      });\n    }\n\n    return null;\n  }\n\n  pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number) {\n    if (this.useNumberPages) {\n      return visibleIndex;\n    }\n\n    if (this.useLabelPages) {\n      return slide.label;\n    }\n\n    return html`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;\n  }\n\n  slideLink(index: string) {\n    emitEvent(this, 'kemet-scroll-snap-focus', index);\n  }\n\n  handleKeyboardInput(event: KeyboardEvent, id: string) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.slideLink(id);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-paginator': KemetScrollSnapPaginator\n  }\n}\n"]}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts

@@ -1,30 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-scroll-snap-slide
- * @summary A slide in a scroll snap component.
- *
- * @prop {boolean} focused - Is true when the slide is fully visible in its container.
- * @prop {number} index - Identifies the slide.
- * @prop {string} label - Labels the slide.
- *
- * @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.
- * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.
- *
- */
-export default class KemetScrollSnapSlide extends LitElement {
-    static styles: import("lit").CSSResult[];
-    focused: boolean;
-    index: number;
-    label: string;
-    updated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    addTabIndex(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-scroll-snap-slide': KemetScrollSnapSlide;
-    }
-}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js

@@ -1,53 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-scroll-snap-slide
- * @summary A slide in a scroll snap component.
- *
- * @prop {boolean} focused - Is true when the slide is fully visible in its container.
- * @prop {number} index - Identifies the slide.
- * @prop {string} label - Labels the slide.
- *
- * @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.
- * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.
- *
- */
-let KemetScrollSnapSlide = class KemetScrollSnapSlide extends LitElement {
-    updated() {
-        this.addTabIndex();
-    }
-    render() {
-        return html `
-      <slot></slot>
-    `;
-    }
-    addTabIndex() {
-        this.setAttribute('tabindex', '0');
-    }
-};
-KemetScrollSnapSlide.styles = [css `
-    :host {
-      display: block;
-      flex: 0 0 auto;
-      width: var(--kemet-scroll-snap-slide-width, 100%);
-      scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
-    }
-  `];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetScrollSnapSlide.prototype, "focused", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], KemetScrollSnapSlide.prototype, "index", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetScrollSnapSlide.prototype, "label", void 0);
-KemetScrollSnapSlide = __decorate([
-    customElement('kemet-scroll-snap-slide')
-], KemetScrollSnapSlide);
-export default KemetScrollSnapSlide;
-//# sourceMappingURL=kemet-scroll-snap-slide.js.map

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-scroll-snap-slide.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-slide.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;;;;;;;;;;;;;;GAcG;AAGY,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAmB1D,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;;AA9BM,2BAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;GAOnB,CAAC,AAPW,CAOV;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAjBK,oBAAoB;IADxC,aAAa,CAAC,yBAAyB,CAAC;GACpB,oBAAoB,CAgCxC;eAhCoB,oBAAoB","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-scroll-snap-slide\n * @summary A slide in a scroll snap component.\n *\n * @prop {boolean} focused - Is true when the slide is fully visible in its container.\n * @prop {number} index - Identifies the slide.\n * @prop {string} label - Labels the slide.\n *\n * @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.\n * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.\n *\n */\n\n@customElement('kemet-scroll-snap-slide')\nexport default class KemetScrollSnapSlide extends LitElement {\n  static styles = [css`\n    :host {\n      display: block;\n      flex: 0 0 auto;\n      width: var(--kemet-scroll-snap-slide-width, 100%);\n      scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Number, reflect: true })\n  index: number;\n\n  @property({ type: String, reflect: true })\n  label: string;\n\n  updated() {\n    this.addTabIndex();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  addTabIndex() {\n    this.setAttribute('tabindex', '0');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-slide': KemetScrollSnapSlide\n  }\n}\n"]}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap.d.ts

@@ -1,47 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeAxis, TypePagination } from './types';
-import KemetScrollSnapSlide from './kemet-scroll-snap-slide';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-scroll-snap
- * @summary A scroll-snap implementation for responsive sliders.
- *
- * @prop {string} axis - Determines the direction the component flows. Values include: (horizontal | vertical)
- * @prop {string} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)
- *
- * @slot slides - Place your slides here.
- * @slot pagination - Place the paginator component here if you want one.
- *
- * @csspart slides - The slides container.
- * @csspart pagination - The pagination element.
- *
- * @cssproperty --kemet-scroll-snap-gap - Space between the slides.
- * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.
- * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.
- * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.
- *
- * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.
- *
- */
-export default class KemetScrollSnap extends LitElement {
-    static styles: import("lit").CSSResult[];
-    axis: TypeAxis;
-    pagination: TypePagination;
-    isTouchDevice: boolean;
-    slides: KemetScrollSnapSlide[];
-    constructor();
-    firstUpdated(): void;
-    updated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    setFocusedSlides(): void;
-    makeSlides(): void;
-    focusSlide(index: number): void;
-    setVerticalAttribute(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-scroll-snap': KemetScrollSnap;
-    }
-}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js

@@ -1,117 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesScrollSnap } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-scroll-snap
- * @summary A scroll-snap implementation for responsive sliders.
- *
- * @prop {string} axis - Determines the direction the component flows. Values include: (horizontal | vertical)
- * @prop {string} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)
- *
- * @slot slides - Place your slides here.
- * @slot pagination - Place the paginator component here if you want one.
- *
- * @csspart slides - The slides container.
- * @csspart pagination - The pagination element.
- *
- * @cssproperty --kemet-scroll-snap-gap - Space between the slides.
- * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.
- * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.
- * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.
- *
- * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.
- *
- */
-let KemetScrollSnap = class KemetScrollSnap extends LitElement {
-    constructor() {
-        super();
-        this.axis = 'horizontal';
-        this.pagination = 'bottom';
-        this.addEventListener('kemet-scroll-snap-focus', (event) => {
-            this.focusSlide(event.detail);
-        });
-    }
-    firstUpdated() {
-        // standard properties
-        this.isTouchDevice = 'ontouchstart' in document.documentElement;
-        this.slides = [];
-        this.setFocusedSlides();
-    }
-    updated() {
-        this.setVerticalAttribute();
-    }
-    render() {
-        return html `
-      <slot name="slides"></slot>
-      <slot name="pagination"></slot>
-    `;
-    }
-    setFocusedSlides() {
-        // reference: https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/
-        // reference: https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/
-        const slides = this.querySelectorAll('kemet-scroll-snap-slide');
-        const container = this.querySelector('[slot="slides"]');
-        const options = {
-            root: container,
-            rootMargin: '0px',
-            threshold: 0.5,
-        };
-        const callback = (entries) => {
-            entries.forEach((entry) => {
-                const target = entry.target;
-                target.focused = entry.intersectionRatio >= 0.5;
-            });
-            this.makeSlides();
-        };
-        const observer = new IntersectionObserver(callback, options);
-        slides.forEach((slide) => {
-            observer.observe(slide);
-        });
-    }
-    makeSlides() {
-        const slides = [];
-        this.querySelectorAll('kemet-scroll-snap-slide').forEach((element, index) => {
-            const slide = element;
-            slide.index = index;
-            slides.push({
-                id: index,
-                focused: slide.focused,
-                label: slide.label,
-            });
-        });
-        this.slides = slides;
-        emitEvent(this, 'kemet-scroll-snap-make-slides', this.slides);
-    }
-    focusSlide(index) {
-        const activeSlide = this.querySelector(`kemet-scroll-snap-slide[index="${index}"]`);
-        activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-    setVerticalAttribute() {
-        if (this.axis === 'vertical') {
-            document.querySelector('html').setAttribute('kemet-scroll-snap-axis', 'vertical');
-        }
-    }
-};
-KemetScrollSnap.styles = [stylesScrollSnap];
-__decorate([
-    property({ type: String, reflect: true })
-], KemetScrollSnap.prototype, "axis", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetScrollSnap.prototype, "pagination", void 0);
-__decorate([
-    state()
-], KemetScrollSnap.prototype, "isTouchDevice", void 0);
-__decorate([
-    state()
-], KemetScrollSnap.prototype, "slides", void 0);
-KemetScrollSnap = __decorate([
-    customElement('kemet-scroll-snap')
-], KemetScrollSnap);
-export default KemetScrollSnap;
-//# sourceMappingURL=kemet-scroll-snap.js.map

package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-scroll-snap.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnap } from './styles';\nimport { KemetScrollSnapSlideInterface, TypeAxis, TypePagination } from './types';\nimport KemetScrollSnapSlide from './kemet-scroll-snap-slide';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap\n * @summary A scroll-snap implementation for responsive sliders.\n *\n * @prop {string} axis - Determines the direction the component flows. Values include: (horizontal | vertical)\n * @prop {string} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)\n *\n * @slot slides - Place your slides here.\n * @slot pagination - Place the paginator component here if you want one.\n *\n * @csspart slides - The slides container.\n * @csspart pagination - The pagination element.\n *\n * @cssproperty --kemet-scroll-snap-gap - Space between the slides.\n * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.\n * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.\n * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.\n *\n * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.\n *\n */\n\n@customElement('kemet-scroll-snap')\nexport default class KemetScrollSnap extends LitElement {\n  static styles = [stylesScrollSnap];\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String, reflect: true })\n  pagination: TypePagination = 'bottom';\n\n  @state()\n  isTouchDevice: boolean;\n\n  @state()\n  slides: KemetScrollSnapSlide[];\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-scroll-snap-focus', (event: CustomEvent) => {\n      this.focusSlide(event.detail);\n    });\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.isTouchDevice = 'ontouchstart' in document.documentElement;\n    this.slides = [];\n\n    this.setFocusedSlides();\n  }\n\n  updated() {\n    this.setVerticalAttribute();\n  }\n\n  render() {\n    return html`\n      <slot name=\"slides\"></slot>\n      <slot name=\"pagination\"></slot>\n    `;\n  }\n\n  setFocusedSlides() {\n    // reference: https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/\n    // reference: https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/\n    const slides = this.querySelectorAll('kemet-scroll-snap-slide');\n    const container = this.querySelector('[slot=\"slides\"]');\n\n    const options = {\n      root: container,\n      rootMargin: '0px',\n      threshold: 0.5,\n    };\n\n    const callback = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach((entry: IntersectionObserverEntry) => {\n        const target = entry.target as KemetScrollSnapSlide;\n        target.focused = entry.intersectionRatio >= 0.5;\n      });\n\n      this.makeSlides();\n    };\n\n    const observer = new IntersectionObserver(callback, options);\n\n    slides.forEach((slide) => {\n      observer.observe(slide);\n    });\n  }\n\n  makeSlides() {\n    const slides = [];\n\n    this.querySelectorAll('kemet-scroll-snap-slide').forEach((element, index) => {\n      const slide = element as KemetScrollSnapSlideInterface;\n\n      slide.index = index;\n      slides.push({\n        id: index,\n        focused: slide.focused,\n        label: slide.label,\n      });\n    });\n\n    this.slides = slides;\n    emitEvent(this, 'kemet-scroll-snap-make-slides', this.slides);\n  }\n\n  focusSlide(index: number) {\n    const activeSlide = this.querySelector(`kemet-scroll-snap-slide[index=\"${index}\"]`);\n    activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }\n\n  setVerticalAttribute() {\n    if (this.axis === 'vertical') {\n      document.querySelector('html').setAttribute('kemet-scroll-snap-axis', 'vertical');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap': KemetScrollSnap\n  }\n}\n"]}

package/dist/components/kemet-scroll-snap/styles.d.ts

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

package/dist/components/kemet-scroll-snap/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDlC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuB3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesScrollSnap = css`\n  *,\n  *::after,\n  *::before {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-scroll-snap-horizontal-max-width: 1024px;\n    --kemet-scroll-snap-vertical-height: 100vh;\n    --kemet-scroll-snap-slides-vertical-padding: 0 2rem;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  :host([axis='horizontal']) {\n    margin: auto;\n    max-width: var(--kemet-scroll-snap-horizontal-max-width);\n  }\n\n  :host([pagination=\"left\"]),\n  :host([pagination=\"right\"]) {\n    flex-direction: row;\n  }\n\n  :host([pagination=\"none\"]) ::slotted([slot=\"pagination\"]) {\n    display: none;\n  }\n\n  :host([pagination=\"top\"]) ::slotted([slot=\"pagination\"]),\n  :host([pagination=\"left\"]) ::slotted([slot=\"pagination\"]) {\n    order: -1;\n  }\n\n\n  ::slotted([slot=\"slides\"]) {\n    display: flex;\n    gap: var(--kemet-scroll-snap-gap, 1.5rem);\n    scroll-snap-type: x mandatory;\n    overflow-x: scroll;\n  }\n\n  /* vertical */\n  :host([axis=\"vertical\"]) {\n    height: var(--kemet-scroll-snap-vertical-height);\n  }\n\n  :host([axis=\"vertical\"]) ::slotted([slot=\"slides\"]) {\n    flex-direction: column;\n    overflow-x: hidden;\n    scroll-snap-type: y mandatory;\n    padding: var(--kemet-scroll-snap-slides-vertical-padding);\n  }\n`;\n\nexport const stylesScrollSnapPaginator = css`\n  :host {\n    --kemet-scroll-snap-paginator-padding: 1rem 0;\n    --kemet-scroll-snap-paginator-gap: 0.5rem;\n    --kemet-scroll-snap-paginator-link-color: rgb(var(--kemet-color-primary));\n\n    margin: auto;\n    padding: var(--kemet-scroll-snap-paginator-padding);\n  }\n\n  nav {\n    display: flex;\n    gap: var(--kemet-scroll-snap-paginator-gap);\n  }\n\n  :host([center]) nav {\n    justify-content: center;\n  }\n\n  .link {\n    cursor: pointer;\n    color: var(--kemet-scroll-snap-paginator-link-color);\n  }\n`;\n"]}

package/dist/components/kemet-scroll-snap/types.d.ts

@@ -1,20 +0,0 @@
-export type TypeAxis = 'horizontal' | 'vertical';
-export type TypePagination = 'top' | 'right' | 'bottom' | 'left';
-export interface KemetScrollSnapInterface extends HTMLElement {
-    axis?: TypeAxis;
-    pagination?: TypePagination;
-}
-export interface KemetScrollSnapSlideInterface extends HTMLElement {
-    focused?: boolean;
-    index?: number;
-    label?: string;
-}
-export interface KemetScrollSnapPaginatorInterface extends HTMLElement {
-    slides?: any[];
-    icon?: string;
-    size?: number;
-    center?: boolean;
-    hideFocusedLinks?: boolean;
-    useNumberPages?: boolean;
-    useLabelPages?: boolean;
-}

package/dist/components/kemet-scroll-snap/types.js

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

package/dist/components/kemet-scroll-snap/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeAxis = 'horizontal' | 'vertical';\nexport type TypePagination = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface KemetScrollSnapInterface extends HTMLElement {\n  axis?: TypeAxis,\n  pagination?: TypePagination,\n}\n\nexport interface KemetScrollSnapSlideInterface extends HTMLElement {\n focused?: boolean,\n index?: number,\n label?: string,\n}\n\nexport interface KemetScrollSnapPaginatorInterface extends HTMLElement {\n  slides?: any[],\n  icon?: string,\n  size?: number,\n  center?: boolean,\n  hideFocusedLinks?: boolean,\n  useNumberPages?: boolean,\n  useLabelPages?: boolean,\n}\n"]}

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

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-select';
-import '../kemet-option';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Disabled: Story;
-export declare const Filled: Story;
-export declare const Rounded: Story;

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

@@ -1,49 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-select';
-import '../kemet-option';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Select',
-    component: 'kemet-select',
-    argTypes: {
-        status: {
-            control: { type: 'radio' },
-            options: ['standard', 'error', 'success', 'warning'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `
-<kemet-select status="${ifDefined(args.status)}" ?required=${args.required} ?disabled=${args.disabled} icon=${ifDefined(args.icon)} icon-size=${ifDefined(args.iconSize)} ?filled=${args.filled} ?rounded=${args.rounded}>
-  <kemet-option label="Choose an Item" value=""></kemet-option>
-  <kemet-option label="Item 1" value="1"></kemet-option>
-  <kemet-option label="Item 2" value="2" selected></kemet-option>
-  <kemet-option label="Item 3" value="3"></kemet-option>
-  <kemet-option label="Item 4" value="4" disabled></kemet-option>
-</kemet-select>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const Disabled = {
-    render: args => Template(args),
-    args: {
-        disabled: true,
-    },
-};
-export const Filled = {
-    render: args => Template(args),
-    args: {
-        filled: true,
-    },
-};
-export const Rounded = {
-    render: args => Template(args),
-    args: {
-        rounded: true,
-    },
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-select/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;SACrD;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAKpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;wBACP,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,QAAQ,SAAS,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO;;;;;;;CAOvN,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-select';\nimport '../kemet-option';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Select',\n  component: 'kemet-select',\n  argTypes: {\n    status: {\n      control: { type: 'radio' },\n      options: ['standard', 'error', 'success', 'warning'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\n\nconst Template = (args) => html`\n<kemet-select status=\"${ifDefined(args.status)}\" ?required=${args.required} ?disabled=${args.disabled} icon=${ifDefined(args.icon)} icon-size=${ifDefined(args.iconSize)} ?filled=${args.filled} ?rounded=${args.rounded}>\n  <kemet-option label=\"Choose an Item\" value=\"\"></kemet-option>\n  <kemet-option label=\"Item 1\" value=\"1\"></kemet-option>\n  <kemet-option label=\"Item 2\" value=\"2\" selected></kemet-option>\n  <kemet-option label=\"Item 3\" value=\"3\"></kemet-option>\n  <kemet-option label=\"Item 4\" value=\"4\" disabled></kemet-option>\n</kemet-select>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Disabled: Story = {\n  render: args => Template(args),\n  args: {\n    disabled: true,\n  },\n};\n\nexport const Filled: Story = {\n  render: args => Template(args),\n  args: {\n    filled: true,\n  },\n};\n\nexport const Rounded: Story = {\n  render: args => Template(args),\n  args: {\n    rounded: true,\n  },\n};\n"]}

package/dist/components/kemet-select/kemet-option.d.ts

@@ -1,29 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-option
- * @summary An option in a select.
- *
- * @prop {string} label - The label of the option
- * @prop {string} value - The value of the options
- * @prop {boolean} disabled - Determines whether to disable the option
- * @prop {boolean} selected - Selects the option if true
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status - Fires when there's a change in status
- *
- */
-export default class KemetOption extends LitElement {
-    label: string;
-    value: string;
-    disabled: boolean;
-    selected: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-option': KemetOption;
-    }
-}

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

@@ -1,45 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-option
- * @summary An option in a select.
- *
- * @prop {string} label - The label of the option
- * @prop {string} value - The value of the options
- * @prop {boolean} disabled - Determines whether to disable the option
- * @prop {boolean} selected - Selects the option if true
- *
- * @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 KemetOption = class KemetOption extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = '';
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-};
-__decorate([
-    property({ type: String })
-], KemetOption.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], KemetOption.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetOption.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetOption.prototype, "selected", void 0);
-KemetOption = __decorate([
-    customElement('kemet-option')
-], KemetOption);
-export default KemetOption;
-//# sourceMappingURL=kemet-option.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-option.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGY,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAKb,UAAK,GAAW,EAAE,CAAC;IAWrB,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAdC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAXC,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAgB/B;eAhBoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-option\n * @summary An option in a select.\n *\n * @prop {string} label - The label of the option\n * @prop {string} value - The value of the options\n * @prop {boolean} disabled - Determines whether to disable the option\n * @prop {boolean} selected - Selects the option if true\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-option')\nexport default class KemetOption extends LitElement {\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  selected: boolean;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-option': KemetOption\n  }\n}\n"]}