kemet-ui 1.3.1 → 2.0.0

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

@@ -1,57 +1,53 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
-export default class KemetScrollSnapSlide extends LitElement {
-  static get styles() {
-    return 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);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Is true when the slide is fully visible in it's container.
-       */
-      focused: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Identifies the slide.
-       */
-      index: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * Labels the slide.
-       */
-      label: {
-        type: String,
-        reflect: true,
-      },
-    };
-  }
-
-  updated() {
-    this.addTabIndex();
-  }
-
-  render() {
-    return html`
+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 it's 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');
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-scroll-snap-slide') || customElements.define('kemet-scroll-snap-slide', KemetScrollSnapSlide);
+    }
+    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

@@ -0,0 +1 @@
+{"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;AAGH,IAAqB,oBAAoB,GAAzC,MAAqB,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;CACF,CAAA;AA/BQ,2BAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;GAOnB,CAAC,CAAC;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 it's 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

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { TypeAxis, TypePagination } from './types';
+/**
+ * @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. Default: 1.5rem.
+ * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.
+ * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.
+ * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.
+ *
+ * @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: any[];
+    constructor();
+    firstUpdated(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    setFocusedSlides(): void;
+    makeSlides(): void;
+    focusSlide(index: any): void;
+    setVerticalAttribute(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap': KemetScrollSnap;
+    }
+}

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

@@ -1,181 +1,122 @@
-import { html, css, LitElement } from 'lit';
-
-export default class KemetScrollSnap extends LitElement {
-  static get styles() {
-    return css`
-      *,
-      *::after,
-      *::before {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-      }
-
-      :host([axis='horizontal']) {
-        margin: auto;
-        max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);
-      }
-
-      :host([pagination="left"]),
-      :host([pagination="right"]) {
-        flex-direction: row;
-      }
-
-      :host([pagination="none"]) ::slotted([slot="pagination"]) {
-        display: none;
-      }
-
-      :host([pagination="top"]) ::slotted([slot="pagination"]),
-      :host([pagination="left"]) ::slotted([slot="pagination"]) {
-        order: -1;
-      }
-
-
-      ::slotted([slot="slides"]) {
-        display: flex;
-        gap: var(--kemet-scroll-snap-gap, 1.5rem);
-        scroll-snap-type: x mandatory;
-        overflow-x: scroll;
-      }
-
-      /* vertical */
-      :host([axis="vertical"]) {
-        height: var(--kemet-scroll-snap-vertical-height, 100vh);
-      }
-
-      :host([axis="vertical"]) ::slotted([slot="slides"]) {
-        flex-direction: column;
-        overflow-x: hidden;
-        scroll-snap-type: y mandatory;
-        padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Determines the direction the component flows. Values include: (horizontal|vertical)
-       */
-      axis: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * Determines where to display the paginator. Values include: (top | right | bottom | left)
-       */
-      pagination: {
-        type: String,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    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`
+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. Default: 1.5rem.
+ * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.
+ * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.
+ * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.
+ *
+ * @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;
-
-        if (entry.intersectionRatio >= 0.5) {
-          target.focused = true;
-        } else {
-          target.focused = false;
+    }
+    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;
+                if (entry.intersectionRatio >= 0.5) {
+                    target.focused = true;
+                }
+                else {
+                    target.focused = false;
+                }
+            });
+            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');
         }
-      });
-
-      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;
-
-    /**
-     * Fires when slide data has been created.
-     */
-    this.dispatchEvent(new CustomEvent('kemet-scroll-snap-make-slides', {
-      bubbles: true,
-      composed: true,
-      detail: 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');
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-scroll-snap') || customElements.define('kemet-scroll-snap', KemetScrollSnap);
+};
+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

@@ -0,0 +1 @@
+{"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';\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. Default: 1.5rem.\n * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.\n * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.\n * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.\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: any[];\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) => {\n      entries.forEach((entry) => {\n        const { target } = entry;\n\n        if (entry.intersectionRatio >= 0.5) {\n          target.focused = true;\n        } else {\n          target.focused = false;\n        }\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) {\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

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

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

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+export const stylesScrollSnap = css `
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  :host([axis='horizontal']) {
+    margin: auto;
+    max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);
+  }
+
+  :host([pagination="left"]),
+  :host([pagination="right"]) {
+    flex-direction: row;
+  }
+
+  :host([pagination="none"]) ::slotted([slot="pagination"]) {
+    display: none;
+  }
+
+  :host([pagination="top"]) ::slotted([slot="pagination"]),
+  :host([pagination="left"]) ::slotted([slot="pagination"]) {
+    order: -1;
+  }
+
+
+  ::slotted([slot="slides"]) {
+    display: flex;
+    gap: var(--kemet-scroll-snap-gap, 1.5rem);
+    scroll-snap-type: x mandatory;
+    overflow-x: scroll;
+  }
+
+  /* vertical */
+  :host([axis="vertical"]) {
+    height: var(--kemet-scroll-snap-vertical-height, 100vh);
+  }
+
+  :host([axis="vertical"]) ::slotted([slot="slides"]) {
+    flex-direction: column;
+    overflow-x: hidden;
+    scroll-snap-type: y mandatory;
+    padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);
+  }
+`;
+export const stylesScrollSnapPaginator = css `
+  :host {
+    margin: auto;
+    padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);
+  }
+
+  nav {
+    display: flex;
+    gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);
+  }
+
+  :host([center]) nav {
+    justify-content: center;
+  }
+
+  .link {
+    cursor: pointer;
+    color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDlC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmB3C,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    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, 1024px);\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, 100vh);\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, 0 2rem);\n  }\n`;\n\nexport const stylesScrollSnapPaginator = css`\n  :host {\n    margin: auto;\n    padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);\n  }\n\n  nav {\n    display: flex;\n    gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);\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, var(--kemet-color-primary));\n  }\n`;\n"]}

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

@@ -0,0 +1,20 @@
+export declare type TypeAxis = 'horizontal' | 'vertical';
+export declare 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

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

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

@@ -0,0 +1 @@
+{"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/kemet-option.d.ts

@@ -0,0 +1,29 @@
+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;
+    disable: boolean;
+    selected: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-option': KemetOption;
+    }
+}