kemet-ui 1.4.0 → 2.0.1

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

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import { TypeEffect } from './types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-nav
+ * @summary An element that transforms at a scroll point.
+ *
+ * @prop {string} effect - Determines where the transform point is activated. Values include: (sticky | resize)
+ * @prop {boolean} transform - Whether or not the nav has shifted into a new state.
+ * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.
+ *
+ * @cssproperty --kemet-scroll-nav-padding - The padding of the nav. Default: 1rem 2rem.
+ * @cssproperty --kemet-scroll-nav-background - The background color of the nav. Default: #fafafa.
+ * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation. Default: 300ms.
+ * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav. Default: 400px.
+ * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.
+ *
+ */
+export default class KemetScrollNav extends LitElement {
+    static styles: import("lit").CSSResult[];
+    effect: TypeEffect;
+    transform: boolean;
+    offset: number;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    handleScroll(stickPoint: any, elementHeight: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-nav': KemetScrollNav;
+    }
+}

package/dist/components/kemet-scroll-nav/kemet-scroll-nav.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 { stylesScrollNav } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -18,90 +20,51 @@ import { LitElement, html, css } from 'lit';
  * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.
  *
  */
-
-export default class KemetScrollNav extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          box-sizing: border-box;
-          padding: var(--kemet-scroll-nav-padding, 1rem 2rem);
-          background-color: var(--kemet-scroll-nav-background, #fafafa);
-          transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
-        }
-
-        :host([transform]),
-        :host([effect="resize"]) {
-          position: fixed;
-          top: 0;
-          width: 100%;
-        }
-
-        :host([effect="resize"]) {
-          height: var(--kemet-scroll-nav-resize-height, 400px);
-        }
-
-        :host([transform][effect="resize"]) {
-          height: var(--kemet-scroll-nav-resize-height-transformed, 100px);
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      effect: {
-        type: String,
-        reflect: true,
-      },
-      transform: {
-        type: Boolean,
-        reflect: true,
-      },
-      offset: {
-        type: Number,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.effect = 'sticky';
-    this.transform = false;
-    this.offset = 0;
-  }
-
-  render() {
-    return html`
+let KemetScrollNav = class KemetScrollNav extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.effect = 'sticky';
+        this.transform = false;
+        this.offset = 0;
+    }
+    render() {
+        return html `
       <slot></slot>
     `;
-  }
-
-  firstUpdated() {
-    const stickPoint = this.offsetTop;
-    const elementHeight = this.offsetHeight;
-
-    window.addEventListener('scroll', () => {
-      // we pass stickPoint and elementHeight as recorded constants
-      // so that it does not update for each call to handleScroll
-      this.handleScroll(stickPoint, elementHeight);
-    });
-  }
-
-  handleScroll(stickPoint, elementHeight) {
-    const transformPoint = (this.effect === 'sticky')
-      ? stickPoint + this.offset
-      : elementHeight + this.offset;
-
-    if (window.pageYOffset >= transformPoint) {
-      this.transform = true;
-    } else {
-      this.transform = false;
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-scroll-nav') || customElements.define('kemet-scroll-nav', KemetScrollNav);
+    firstUpdated() {
+        const stickPoint = this.offsetTop;
+        const elementHeight = this.offsetHeight;
+        window.addEventListener('scroll', () => {
+            // we pass stickPoint and elementHeight as recorded constants
+            // so that it does not update for each call to handleScroll
+            this.handleScroll(stickPoint, elementHeight);
+        });
+    }
+    handleScroll(stickPoint, elementHeight) {
+        const transformPoint = (this.effect === 'sticky')
+            ? stickPoint + this.offset
+            : elementHeight + this.offset;
+        if (window.pageYOffset >= transformPoint) {
+            this.transform = true;
+        }
+        else {
+            this.transform = false;
+        }
+    }
+};
+KemetScrollNav.styles = [stylesScrollNav];
+__decorate([
+    property({ type: String, reflect: true })
+], KemetScrollNav.prototype, "effect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetScrollNav.prototype, "transform", void 0);
+__decorate([
+    property({ type: Number })
+], KemetScrollNav.prototype, "offset", void 0);
+KemetScrollNav = __decorate([
+    customElement('kemet-scroll-nav')
+], KemetScrollNav);
+export default KemetScrollNav;
+//# sourceMappingURL=kemet-scroll-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-scroll-nav.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-nav/kemet-scroll-nav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAAtD;;QAIE,WAAM,GAAe,QAAQ,CAAC;QAG9B,cAAS,GAAY,KAAK,CAAC;QAG3B,WAAM,GAAW,CAAC,CAAC;IA+BrB,CAAC;IA5BC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;QAExC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,6DAA6D;YAC7D,2DAA2D;YAC3D,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAAC,UAAU,EAAE,aAAa;QACpC,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;YAC/C,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM;YAC1B,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;QAEhC,IAAI,MAAM,CAAC,WAAW,IAAI,cAAc,EAAE;YACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;IACH,CAAC;CACF,CAAA;AAxCQ,qBAAM,GAAG,CAAC,eAAe,CAAC,CAAC;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACZ;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAChB;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACR;AAVA,cAAc;IADlC,aAAa,CAAC,kBAAkB,CAAC;GACb,cAAc,CAyClC;eAzCoB,cAAc","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesScrollNav } from './styles';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-nav\n * @summary An element that transforms at a scroll point.\n *\n * @prop {string} effect - Determines where the transform point is activated. Values include: (sticky | resize)\n * @prop {boolean} transform - Whether or not the nav has shifted into a new state.\n * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.\n *\n * @cssproperty --kemet-scroll-nav-padding - The padding of the nav. Default: 1rem 2rem.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav. Default: #fafafa.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation. Default: 300ms.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav. Default: 400px.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.\n *\n */\n\n@customElement('kemet-scroll-nav')\nexport default class KemetScrollNav extends LitElement {\n  static styles = [stylesScrollNav];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'sticky';\n\n  @property({ type: Boolean, reflect: true })\n  transform: boolean = false;\n\n  @property({ type: Number })\n  offset: number = 0;\n\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  firstUpdated() {\n    const stickPoint = this.offsetTop;\n    const elementHeight = this.offsetHeight;\n\n    window.addEventListener('scroll', () => {\n      // we pass stickPoint and elementHeight as recorded constants\n      // so that it does not update for each call to handleScroll\n      this.handleScroll(stickPoint, elementHeight);\n    });\n  }\n\n  handleScroll(stickPoint, elementHeight) {\n    const transformPoint = (this.effect === 'sticky')\n      ? stickPoint + this.offset\n      : elementHeight + this.offset;\n\n    if (window.pageYOffset >= transformPoint) {\n      this.transform = true;\n    } else {\n      this.transform = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-nav': KemetScrollNav\n  }\n}\n\n"]}

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

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

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

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const stylesScrollNav = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    padding: var(--kemet-scroll-nav-padding, 1rem 2rem);
+    background-color: var(--kemet-scroll-nav-background, #fafafa);
+    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
+  }
+
+  :host([transform]),
+  :host([effect="resize"]) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  :host([effect="resize"]) {
+    height: var(--kemet-scroll-nav-resize-height, 400px);
+  }
+
+  :host([transform][effect="resize"]) {
+    height: var(--kemet-scroll-nav-resize-height-transformed, 100px);
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-nav/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesScrollNav = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    padding: var(--kemet-scroll-nav-padding, 1rem 2rem);\n    background-color: var(--kemet-scroll-nav-background, #fafafa);\n    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;\n  }\n\n  :host([transform]),\n  :host([effect=\"resize\"]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n  }\n\n  :host([effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height, 400px);\n  }\n\n  :host([transform][effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height-transformed, 100px);\n  }\n`;\n"]}

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

@@ -0,0 +1,6 @@
+export declare type TypeEffect = 'sticky' | 'resize';
+export interface KemetScrollNavInterface extends HTMLElement {
+    effect?: TypeEffect;
+    transform?: boolean;
+    offset?: number;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-nav/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'sticky' | 'resize';\n\nexport interface KemetScrollNavInterface extends HTMLElement {\n  effect?: TypeEffect,\n  transform?: boolean,\n  offset?: number\n}\n"]}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-scroll-snap';
+import '../kemet-scroll-snap-slide';
+import '../kemet-scroll-snap-paginator';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

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

@@ -0,0 +1,131 @@
+import { html } from 'lit';
+import '../kemet-scroll-snap';
+import '../kemet-scroll-snap-slide';
+import '../kemet-scroll-snap-paginator';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Scroll Snap',
+    component: 'kemet-scroll-snap',
+};
+export default meta;
+const Template = ({ showPagination = true, numberOfSlides = 5, gap = '1.5rem', axis = 'horizontal', pagination = 'bottom', paginationIcon = 'circle-fill', paginationSize = 16, paginationUseNumbers = false, paginationUseLabels = false, paginationCenter = true, paginationGap = '0.5rem', slideWidth = '44vw', horizontalMaxWidth = '90%', }) => {
+    const makeSlides = (numberOfSlides) => {
+        const slides = [];
+        // eslint-disable-next-line no-plusplus
+        for (let i = 0; i < numberOfSlides; i++) {
+            slides.push(html `
+        <kemet-scroll-snap-slide label="Heading ${i + 1}" kemet-margin-top="tiny:normal">
+          <h3 kemet-type-size="plus-6">Heading ${i + 1}</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <img src="https://via.placeholder.com/1920x1080" alt="A placeholder" />
+        </kemet-scroll-snap-slide>
+      `);
+        }
+        return slides;
+    };
+    const makePagination = (display, icon, size, useNumbers, useLabels, center) => {
+        if (display) {
+            return html `
+        <kemet-scroll-snap-paginator
+          slot="pagination"
+          icon="${icon}"
+          size="${size}"
+          ?use-number-pages=${useNumbers}
+          ?use-label-pages=${useLabels}
+          ?center=${center}>
+        </kemet-scroll-snap-paginator>
+      `;
+        }
+        return null;
+    };
+    return html `
+    <style>
+      img {
+        max-width: 100%;
+      }
+
+      kemet-scroll-snap {
+        --kemet-scroll-snap-gap: ${gap};
+        --kemet-scroll-snap-horizontal-max-width: ${horizontalMaxWidth};
+      }
+
+      kemet-scroll-snap-slide {
+        --kemet-scroll-snap-slide-width: ${slideWidth};
+      }
+
+      kemet-scroll-snap-paginator {
+        --kemet-scroll-snap-paginator-gap: ${paginationGap};
+      }
+    </style>
+    <kemet-scroll-snap axis="${axis}" pagination="${pagination}">
+      <div slot="slides">
+        ${makeSlides(numberOfSlides)}
+      </div>
+      ${makePagination(showPagination, paginationIcon, paginationSize, paginationUseNumbers, paginationUseLabels, paginationCenter)}
+    </kemet-scroll-snap>
+  `;
+};
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        showPagination: true,
+        numberOfSlides: 5,
+        gap: '1.5rem',
+        axis: 'horizontal',
+        pagination: 'bottom',
+        paginationIcon: 'circle-fill',
+        paginationSize: 16,
+        paginationUseNumbers: false,
+        paginationUseLabels: false,
+        paginationCenter: true,
+        paginationGap: '0.5rem',
+        slideWidth: '44vw',
+        horizontalMaxWidth: '90%',
+    },
+    argTypes: {
+        showPagination: {
+            control: { type: 'boolean' },
+        },
+        numberOfSlides: {
+            control: { type: 'number' },
+        },
+        gap: {
+            control: { type: 'text' },
+        },
+        axis: {
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+        },
+        pagination: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+        paginationIcon: {
+            control: { type: 'text' },
+        },
+        paginationSize: {
+            control: { type: 'number' },
+        },
+        paginationUseNumbers: {
+            control: { type: 'boolean' },
+        },
+        paginationUseLabels: {
+            control: { type: 'boolean' },
+        },
+        paginationCenter: {
+            control: { type: 'boolean' },
+        },
+        paginationGap: {
+            control: { type: 'text' },
+        },
+        slideWidth: {
+            control: { type: 'text' },
+        },
+        horizontalMaxWidth: {
+            control: { type: 'text' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-snap/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-scroll-snap';\nimport '../kemet-scroll-snap-slide';\nimport '../kemet-scroll-snap-paginator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Scroll Snap',\n  component: 'kemet-scroll-snap',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  showPagination = true,\n  numberOfSlides = 5,\n  gap = '1.5rem',\n  axis = 'horizontal',\n  pagination = 'bottom',\n  paginationIcon = 'circle-fill',\n  paginationSize = 16,\n  paginationUseNumbers = false,\n  paginationUseLabels = false,\n  paginationCenter = true,\n  paginationGap = '0.5rem',\n  slideWidth = '44vw',\n  horizontalMaxWidth = '90%',\n}) => {\n  const makeSlides = (numberOfSlides) => {\n    const slides = [];\n\n    // eslint-disable-next-line no-plusplus\n    for (let i = 0; i < numberOfSlides; i++) {\n      slides.push(html`\n        <kemet-scroll-snap-slide label=\"Heading ${i + 1}\" kemet-margin-top=\"tiny:normal\">\n          <h3 kemet-type-size=\"plus-6\">Heading ${i + 1}</h3>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n          <img src=\"https://via.placeholder.com/1920x1080\" alt=\"A placeholder\" />\n        </kemet-scroll-snap-slide>\n      `);\n    }\n\n    return slides;\n  };\n\n  const makePagination = (display, icon, size, useNumbers, useLabels, center) => {\n    if (display) {\n      return html`\n        <kemet-scroll-snap-paginator\n          slot=\"pagination\"\n          icon=\"${icon}\"\n          size=\"${size}\"\n          ?use-number-pages=${useNumbers}\n          ?use-label-pages=${useLabels}\n          ?center=${center}>\n        </kemet-scroll-snap-paginator>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <style>\n      img {\n        max-width: 100%;\n      }\n\n      kemet-scroll-snap {\n        --kemet-scroll-snap-gap: ${gap};\n        --kemet-scroll-snap-horizontal-max-width: ${horizontalMaxWidth};\n      }\n\n      kemet-scroll-snap-slide {\n        --kemet-scroll-snap-slide-width: ${slideWidth};\n      }\n\n      kemet-scroll-snap-paginator {\n        --kemet-scroll-snap-paginator-gap: ${paginationGap};\n      }\n    </style>\n    <kemet-scroll-snap axis=\"${axis}\" pagination=\"${pagination}\">\n      <div slot=\"slides\">\n        ${makeSlides(numberOfSlides)}\n      </div>\n      ${makePagination(showPagination, paginationIcon, paginationSize, paginationUseNumbers, paginationUseLabels, paginationCenter)}\n    </kemet-scroll-snap>\n  `;\n}\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    numberOfSlides: 5,\n    gap: '1.5rem',\n    axis: 'horizontal',\n    pagination: 'bottom',\n    paginationIcon: 'circle-fill',\n    paginationSize: 16,\n    paginationUseNumbers: false,\n    paginationUseLabels: false,\n    paginationCenter: true,\n    paginationGap: '0.5rem',\n    slideWidth: '44vw',\n    horizontalMaxWidth: '90%',\n  },\n  argTypes: {\n    showPagination: {\n      control: { type: 'boolean' },\n    },\n    numberOfSlides: {\n      control: { type: 'number' },\n    },\n    gap: {\n      control: { type: 'text' },\n    },\n    axis: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    pagination: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n    paginationIcon: {\n      control: { type: 'text' },\n    },\n    paginationSize: {\n      control: { type: 'number' },\n    },\n    paginationUseNumbers: {\n      control: { type: 'boolean' },\n    },\n    paginationUseLabels: {\n      control: { type: 'boolean' },\n    },\n    paginationCenter: {\n      control: { type: 'boolean' },\n    },\n    paginationGap: {\n      control: { type: 'text' },\n    },\n    slideWidth: {\n      control: { type: 'text' },\n    },\n    horizontalMaxWidth: {\n      control: { type: 'text' },\n    },\n  }\n};\n"]}

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * @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. Default: 1rem 0.
+ * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items. Default: 0.5rem.
+ * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item. Default: var(--kemet-color-primary).
+ *
+ * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.
+ *
+ */
+export default class KemetScrollSnapPaginator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    slides: any[];
+    icon: string;
+    size: number;
+    center: boolean;
+    hideFocusedLinks: boolean;
+    useNumberPages: boolean;
+    useLabelPages: boolean;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    makePagination(): import("lit-html").TemplateResult<1>[];
+    pageDisplay(slide: any, visibleIndex: any): any;
+    slideLink(index: any): void;
+    handleKeyboardInput(event: any, id: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap-paginator': KemetScrollSnapPaginator;
+    }
+}