kemet-ui 3.0.0 → 3.1.0

package/dist/components/kemet-radio/spec.js

@@ -0,0 +1,67 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import './kemet-radio';
+import './kemet-radios';
+import '../kemet-button/kemet-button';
+describe('Radio', () => {
+    const templates = {
+        default: html `
+      <kemet-radios legend="The legend.">
+        <kemet-radio value="1" name="kemet-radio-button" label="Item 1" checked></kemet-radio>
+        <kemet-radio value="2" name="kemet-radio-button" label="Item 2"></kemet-radio>
+        <kemet-radio value="3" name="kemet-radio-button" label="Item 3"></kemet-radio>
+      </kemet-radios>
+    `,
+        required: html `
+      <kemet-radios required status="error" legend="The legend." message="error">
+        <kemet-radio value="1" name="kemet-radio-button" label="Item 1"></kemet-radio>
+        <kemet-radio value="2" name="kemet-radio-button" label="Item 2"></kemet-radio>
+        <kemet-radio value="3" name="kemet-radio-button" label="Item 3"></kemet-radio>
+      </kemet-radios>
+    `,
+    };
+    it('allows you to select a radio button', async () => {
+        render(templates.default, document.body);
+        const lastButton = document.querySelectorAll('kemet-radio')[2];
+        await waitFor(async () => {
+            await userEvent.click(lastButton.shadowRoot.querySelector('label'));
+            expect(lastButton.checked).toBe(true);
+        });
+    });
+    it('click method selects a radio button', async () => {
+        render(templates.default, document.body);
+        const lastButton = document.querySelectorAll('kemet-radio')[2];
+        lastButton.click();
+        expect(lastButton.checked).toBe(true);
+    });
+    it('focuses correctly', async () => {
+        render(templates.default, document.body);
+        const kemetRadio = document.querySelector('kemet-radio');
+        await waitFor(async () => {
+            const input = kemetRadio.shadowRoot.querySelector('input');
+            fireEvent.focus(input);
+            expect(kemetRadio.focused).toBe(true);
+            fireEvent.blur(input);
+            expect(kemetRadio.focused).toBe(false);
+        });
+    });
+    it('should handle keyboard navigation', async () => {
+        render(templates.default, document.body);
+        const kemetRadio = document.querySelectorAll('kemet-radio');
+        const kemetRadios = document.querySelector('kemet-radios');
+        await userEvent.click(kemetRadio[0]);
+        fireEvent.keyDown(kemetRadio[0], { key: 'ArrowLeft' });
+        expect(kemetRadio[2].checked).toBe(true);
+        fireEvent.keyDown(kemetRadio[0], { key: 'ArrowRight' });
+        expect(kemetRadio[0].checked).toBe(true);
+        expect(kemetRadios.checkValidity()).toBe(true);
+    });
+    it('should show an error message when required', async () => {
+        render(templates.required, document.body);
+        const kemetRadios = document.querySelector('kemet-radios');
+        expect(kemetRadios.checkValidity()).toBe(false);
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-radio/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport './kemet-radio';\nimport './kemet-radios';\nimport '../kemet-button/kemet-button';\n\ndescribe('Radio', () => {\n  const templates = {\n    default: html`\n      <kemet-radios legend=\"The legend.\">\n        <kemet-radio value=\"1\" name=\"kemet-radio-button\" label=\"Item 1\" checked></kemet-radio>\n        <kemet-radio value=\"2\" name=\"kemet-radio-button\" label=\"Item 2\"></kemet-radio>\n        <kemet-radio value=\"3\" name=\"kemet-radio-button\" label=\"Item 3\"></kemet-radio>\n      </kemet-radios>\n    `,\n    required: html`\n      <kemet-radios required status=\"error\" legend=\"The legend.\" message=\"error\">\n        <kemet-radio value=\"1\" name=\"kemet-radio-button\" label=\"Item 1\"></kemet-radio>\n        <kemet-radio value=\"2\" name=\"kemet-radio-button\" label=\"Item 2\"></kemet-radio>\n        <kemet-radio value=\"3\" name=\"kemet-radio-button\" label=\"Item 3\"></kemet-radio>\n      </kemet-radios>\n    `,\n  };\n\n  it('allows you to select a radio button', async () => {\n    render(templates.default, document.body);\n    const lastButton = document.querySelectorAll('kemet-radio')[2];\n    await waitFor(async () => {\n      await userEvent.click(lastButton.shadowRoot.querySelector('label'));\n      expect(lastButton.checked).toBe(true);\n    });\n  });\n\n  it('click method selects a radio button', async () => {\n    render(templates.default, document.body);\n    const lastButton = document.querySelectorAll('kemet-radio')[2];\n    lastButton.click();\n    expect(lastButton.checked).toBe(true);\n  });\n\n  it('focuses correctly', async () => {\n    render(templates.default, document.body);\n    const kemetRadio = document.querySelector('kemet-radio');\n    await waitFor(async () => {\n      const input = kemetRadio.shadowRoot.querySelector('input');\n      fireEvent.focus(input);\n      expect(kemetRadio.focused).toBe(true);\n      fireEvent.blur(input);\n      expect(kemetRadio.focused).toBe(false);\n    });\n  });\n\n  it('should handle keyboard navigation', async () => {\n    render(templates.default, document.body);\n    const kemetRadio = document.querySelectorAll('kemet-radio');\n    const kemetRadios = document.querySelector('kemet-radios');\n    await userEvent.click(kemetRadio[0]);\n    fireEvent.keyDown(kemetRadio[0], { key: 'ArrowLeft' });\n    expect(kemetRadio[2].checked).toBe(true);\n    fireEvent.keyDown(kemetRadio[0], { key: 'ArrowRight' });\n    expect(kemetRadio[0].checked).toBe(true);\n    expect(kemetRadios.checkValidity()).toBe(true);\n  });\n\n  it('should show an error message when required', async () => {\n    render(templates.required, document.body);\n    const kemetRadios = document.querySelector('kemet-radios');\n    expect(kemetRadios.checkValidity()).toBe(false);\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export declare type TypeAxis = 'horizontal' | 'vertical';
+export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export type TypeAxis = 'horizontal' | 'vertical';
 export interface KemetRadioInterface extends HTMLElement {
     label?: string;
     checked?: boolean;

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

@@ -5,6 +5,6 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Flip: Story;

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

@@ -27,7 +27,7 @@ export default class KemetRotator extends LitElement {
     rotationSpeed: number;
     prevSlide: number | null;
     firstUpdated(): void;
-    updated(changed: any): void;
+    updated(changed: Map<string, never>): void;
     render(): import("lit-html").TemplateResult<1>;
     makeMessages(): import("lit-html").TemplateResult<1>[];
     setDimensions(): void;

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

@@ -58,7 +58,7 @@ let KemetRotator = class KemetRotator extends LitElement {
     `;
     }
     makeMessages() {
-        const messages = this.messages.map((message, index) => {
+        return this.messages.map((message, index) => {
             const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';
             const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';
             return html `
@@ -67,7 +67,6 @@ let KemetRotator = class KemetRotator extends LitElement {
         </span>
       `;
         });
-        return messages;
     }
     setDimensions() {
         if (this.effect === 'flip') {

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-rotator.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/kemet-rotator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from './styles';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {string} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'fade';\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    const messages = this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n\n    return messages;\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n"]}
+{"version":3,"file":"kemet-rotator.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/kemet-rotator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from './styles';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {string} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'fade';\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed: Map<string, never>) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    return this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-export declare type TypeEffect = 'fade' | 'flip';
+export type TypeEffect = 'fade' | 'flip';
 export interface KemetRotator extends HTMLElement {
     activeSlide?: number;
     width?: string;

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

@@ -5,5 +5,5 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;

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

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
  * @status stable
  *
  * @tagname kemet-scroll-link
- * @summary A component that adds a smooth scrolling link to an target..
+ * @summary A component that adds a smooth scrolling link to a target.
  *
  * @prop {object} element - A DOM element that establishes the context of scrolling.
  * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.
@@ -21,7 +21,7 @@ export default class KemetScrollLink extends LitElement {
     isSmoothSupported: boolean;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    handleKeyup(event: any): void;
+    handleKeyup(event: KeyboardEvent): void;
     handleScroll(): void;
 }
 declare global {

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

@@ -1,13 +1,12 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { keyCodes } from '../../utilities/misc/constants';
 /**
  * @since 1.0.0
  * @status stable
  *
  * @tagname kemet-scroll-link
- * @summary A component that adds a smooth scrolling link to an target..
+ * @summary A component that adds a smooth scrolling link to a target.
  *
  * @prop {object} element - A DOM element that establishes the context of scrolling.
  * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.
@@ -29,13 +28,13 @@ let KemetScrollLink = class KemetScrollLink extends LitElement {
     }
     render() {
         return html `
-      <div tabindex="0" @click=${() => this.handleScroll()} @keyup=${event => this.handleKeyup(event)}>
+      <div tabindex="0" @click=${() => this.handleScroll()} @keyup=${(event) => this.handleKeyup(event)}>
         <slot></slot>
       </div>
     `;
     }
     handleKeyup(event) {
-        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
+        if (event.key === 'Enter' || event.code === 'Space') {
             this.handleScroll();
         }
     }
@@ -54,12 +53,14 @@ let KemetScrollLink = class KemetScrollLink extends LitElement {
         }
     }
 };
-KemetScrollLink.styles = [css `
-    :host {
-      cursor: pointer;
-      display: inline-block;
-    }
-  `];
+KemetScrollLink.styles = [
+    css `
+      :host {
+        cursor: pointer;
+        display: inline-block;
+      }
+    `,
+];
 __decorate([
     property({ type: Object })
 ], KemetScrollLink.prototype, "element", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-scroll-link.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-link/kemet-scroll-link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAAvD;;QASE,YAAO,GAAyB,MAAM,CAAC;QAGvC,WAAM,GAAgB,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAGrD,YAAO,GAAW,CAAC,CAAC;QAGpB,YAAO,GAAW,CAAC,CAAC;IAsCtB,CAAC;IAjCC,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;;KAGhG,CAAC;IACJ,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,KAAK,EAAE;YACxE,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAED,YAAY;QACV,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;gBACpB,GAAG,EAAE,SAAS;gBACd,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;SAC9C;IACH,CAAC;CACF,CAAA;AAvDQ,sBAAM,GAAI,CAAC,GAAG,CAAA;;;;;GAKpB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACY;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAC0B;AAGrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7C;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7C;AAGpB;IADC,KAAK,EAAE;0DACmB;AArBR,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAwDnC;eAxDoB,eAAe","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { keyCodes } from '../../utilities/misc/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-link\n * @summary A component that adds a smooth scrolling link to an target..\n *\n * @prop {object} element - A DOM element that establishes the context of scrolling.\n * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.\n * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.\n * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.\n *\n */\n\n@customElement('kemet-scroll-link')\nexport default class KemetScrollLink extends LitElement {\n  static styles =  [css`\n    :host {\n      cursor: pointer;\n      display: inline-block;\n    }\n  `];\n\n  @property({ type: Object })\n  element: HTMLElement | Window = window;\n\n  @property({ type: Object })\n  target: HTMLElement = document.querySelector('body');\n\n  @property({ type: Number, attribute: 'x-offset', reflect: true })\n  xOffset: number = 0;\n\n  @property({ type: Number, attribute: 'y-offset', reflect: true })\n  yOffset: number = 0;\n\n  @state()\n  isSmoothSupported: boolean;\n\n  firstUpdated() {\n    // standard properties\n    this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;\n  }\n\n  render() {\n    return html`\n      <div tabindex=\"0\" @click=${() => this.handleScroll()} @keyup=${event => this.handleKeyup(event)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleKeyup(event) {\n    if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {\n      this.handleScroll();\n    }\n  }\n\n  handleScroll() {\n    const scrollTop = this.target.offsetTop + this.yOffset;\n    const scrollLeft = this.target.offsetLeft + this.xOffset;\n\n    if (this.isSmoothSupported) {\n      this.element.scrollTo({\n        top: scrollTop,\n        left: scrollLeft,\n        behavior: 'smooth',\n      });\n    } else {\n      this.element.scrollTo(scrollLeft, scrollTop);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-link': KemetScrollLink\n  }\n}\n\n"]}
+{"version":3,"file":"kemet-scroll-link.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-link/kemet-scroll-link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;;;;GAYG;AAGY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAWb,YAAO,GAAyB,MAAM,CAAC;QAGvC,WAAM,GAAgB,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAGrD,YAAO,GAAW,CAAC,CAAC;QAGpB,YAAO,GAAW,CAAC,CAAC;IAsCtB,CAAC;IAjCC,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;;KAGjH,CAAC;IACJ,CAAC;IAED,WAAW,CAAC,KAAoB;QAC9B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACpD,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,YAAY;QACV,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;gBACpB,GAAG,EAAE,SAAS;gBACd,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;;AAxDM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;KAKF;CACF,AAPY,CAOX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACY;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAC0B;AAGrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7C;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7C;AAGpB;IADC,KAAK,EAAE;0DACmB;AAvBR,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CA0DnC;eA1DoB,eAAe","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-link\n * @summary A component that adds a smooth scrolling link to a target.\n *\n * @prop {object} element - A DOM element that establishes the context of scrolling.\n * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.\n * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.\n * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.\n *\n */\n\n@customElement('kemet-scroll-link')\nexport default class KemetScrollLink extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Object })\n  element: HTMLElement | Window = window;\n\n  @property({ type: Object })\n  target: HTMLElement = document.querySelector('body');\n\n  @property({ type: Number, attribute: 'x-offset', reflect: true })\n  xOffset: number = 0;\n\n  @property({ type: Number, attribute: 'y-offset', reflect: true })\n  yOffset: number = 0;\n\n  @state()\n  isSmoothSupported: boolean;\n\n  firstUpdated() {\n    // standard properties\n    this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;\n  }\n\n  render() {\n    return html`\n      <div tabindex=\"0\" @click=${() => this.handleScroll()} @keyup=${(event: KeyboardEvent) => this.handleKeyup(event)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.code === 'Space') {\n      this.handleScroll();\n    }\n  }\n\n  handleScroll() {\n    const scrollTop = this.target.offsetTop + this.yOffset;\n    const scrollLeft = this.target.offsetLeft + this.xOffset;\n\n    if (this.isSmoothSupported) {\n      this.element.scrollTo({\n        top: scrollTop,\n        left: scrollLeft,\n        behavior: 'smooth',\n      });\n    } else {\n      this.element.scrollTo(scrollLeft, scrollTop);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-link': KemetScrollLink\n  }\n}\n"]}

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

@@ -5,6 +5,6 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Resize: Story;
 export declare const Sticky: Story;

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

@@ -8,7 +8,7 @@ import { TypeEffect } from './types';
  * @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 {boolean} transform - Whether 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.
@@ -25,7 +25,7 @@ export default class KemetScrollNav extends LitElement {
     offset: number;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
-    handleScroll(stickPoint: any, elementHeight: any): void;
+    handleScroll(stickPoint: number, elementHeight: number): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -10,7 +10,7 @@ import { stylesScrollNav } from './styles';
  * @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 {boolean} transform - Whether 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.
@@ -45,12 +45,7 @@ let KemetScrollNav = class KemetScrollNav extends LitElement {
         const transformPoint = (this.effect === 'sticky')
             ? stickPoint + this.offset
             : elementHeight + this.offset;
-        if (window.pageYOffset >= transformPoint) {
-            this.transform = true;
-        }
-        else {
-            this.transform = false;
-        }
+        this.transform = window.pageYOffset >= transformPoint;
     }
 };
 KemetScrollNav.styles = [stylesScrollNav];

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

@@ -1 +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.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.\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"]}
+{"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;AAGY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAIb,WAAM,GAAe,QAAQ,CAAC;QAG9B,cAAS,GAAY,KAAK,CAAC;QAG3B,WAAM,GAAW,CAAC,CAAC;IA0BrB,CAAC;IAxBC,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,UAAkB,EAAE,aAAqB;QACpD,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,CAAC,SAAS,GAAG,MAAM,CAAC,WAAW,IAAI,cAAc,CAAC;IACxD,CAAC;;AAlCM,qBAAM,GAAG,CAAC,eAAe,CAAC,AAApB,CAAqB;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,CAoClC;eApCoB,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 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.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.\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  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: number, elementHeight: number) {\n    const transformPoint = (this.effect === 'sticky')\n      ? stickPoint + this.offset\n      : elementHeight + this.offset;\n\n    this.transform = window.pageYOffset >= transformPoint;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-nav': KemetScrollNav\n  }\n}\n"]}

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

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

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

@@ -8,7 +8,7 @@ import '../../kemet-tabs/kemet-tab-panel';
 import '../../kemet-icon/kemet-icon';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Vertical: Story;
 export declare const Pagination: Story;

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

@@ -1 +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 { ifDefined } from 'lit/directives/if-defined.js';\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';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Scroll Snap',\n  component: 'kemet-scroll-snap',\n  args: {\n    numberOfSlides: 5,\n  },\n  argTypes: {\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  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\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=\"2xl\" style=${ifDefined(args.slideWidth ? `--kemet-scroll-snap-slide-width: ${args.slideWidth};` : undefined)}>\n          <h3 kemet-type-size=\"3xl\">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\" style=\"max-width:100%\" />\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=\"${ifDefined(icon)}\"\n          size=\"${ifDefined(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    <kemet-scroll-snap axis=\"${ifDefined(args.axis)}\" pagination=\"${ifDefined(args.pagination)}\">\n      <div slot=\"slides\">\n        ${makeSlides(args.numberOfSlides)}\n      </div>\n      ${makePagination(args.showPagination, args.paginationIcon, args.paginationSize, args.paginationUseNumbers, args.paginationUseLabels, args.paginationCenter)}\n    </kemet-scroll-snap>\n  `;\n}\n\n\n// export 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// };\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Vertical: Story = {\n  render: args => Template(args),\n  args: {\n    axis: 'vertical',\n  },\n};\n\nexport const Pagination: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n  },\n};\n\nexport const PaginationLabels: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    paginationUseLabels: true,\n  },\n};\n\nexport const PaginationNumbers: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    paginationUseNumbers: true,\n  },\n};\n\nexport const MultipleSlides: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    slideWidth: '33vw',\n  },\n}\n"]}
+{"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 { ifDefined } from 'lit/directives/if-defined.js';\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';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Scroll Snap',\n  component: 'kemet-scroll-snap',\n  args: {\n    numberOfSlides: 5,\n  },\n  argTypes: {\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  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\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=\"2xl\" style=${ifDefined(args.slideWidth ? `--kemet-scroll-snap-slide-width: ${args.slideWidth};` : undefined)}>\n          <h3 kemet-type-size=\"3xl\">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\" style=\"max-width:100%\" />\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=\"${ifDefined(icon)}\"\n          size=\"${ifDefined(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    <kemet-scroll-snap axis=\"${ifDefined(args.axis)}\" pagination=\"${ifDefined(args.pagination)}\">\n      <div slot=\"slides\">\n        ${makeSlides(args.numberOfSlides)}\n      </div>\n      ${makePagination(args.showPagination, args.paginationIcon, args.paginationSize, args.paginationUseNumbers, args.paginationUseLabels, args.paginationCenter)}\n    </kemet-scroll-snap>\n  `;\n}\n\n\n// export 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// };\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Vertical: Story = {\n  render: args => Template(args),\n  args: {\n    axis: 'vertical',\n  },\n};\n\nexport const Pagination: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n  },\n};\n\nexport const PaginationLabels: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    paginationUseLabels: true,\n  },\n};\n\nexport const PaginationNumbers: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    paginationUseNumbers: true,\n  },\n};\n\nexport const MultipleSlides: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    slideWidth: '33vw',\n  },\n}\n"]}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import KemetScrollSnapSlide from './kemet-scroll-snap-slide';
 /**
  * @since 1.0.0
  * @status stable
@@ -23,7 +24,7 @@ import { LitElement } from 'lit';
  */
 export default class KemetScrollSnapPaginator extends LitElement {
     static styles: import("lit").CSSResult[];
-    slides: any[];
+    slides: KemetScrollSnapSlide[];
     icon: string;
     size: number;
     center: boolean;
@@ -33,9 +34,9 @@ export default class KemetScrollSnapPaginator extends LitElement {
     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;
+    pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number): string | number | import("lit-html").TemplateResult<1>;
+    slideLink(index: string): void;
+    handleKeyboardInput(event: KeyboardEvent, id: string): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -63,7 +63,7 @@ let KemetScrollSnapPaginator = class KemetScrollSnapPaginator extends LitElement
             class="link"
             tabindex="0"
             role="button"
-            @keyup="${event => this.handleKeyboardInput(event, slide.id)}"
+            @keyup="${(event) => this.handleKeyboardInput(event, slide.id)}"
             @click=${() => this.slideLink(slide.id)}
             aria-label="${slide.label}">
             ${this.pageDisplay(slide, counter)}

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-scroll-snap-paginator.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnapPaginator } from './styles';\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: any[] = [];\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\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 => 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, visibleIndex) {\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) {\n    emitEvent(this, 'kemet-scroll-snap-focus', index);\n  }\n\n  handleKeyboardInput(event, id) {\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"]}
+{"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

@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
  * @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 {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.
  *

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

@@ -8,7 +8,7 @@ import { customElement, property } from 'lit/decorators.js';
  * @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 {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.
  *

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

@@ -1 +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"]}
+{"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,5 +1,6 @@
 import { LitElement } from 'lit';
 import { TypeAxis, TypePagination } from './types';
+import KemetScrollSnapSlide from './kemet-scroll-snap-slide';
 /**
  * @since 1.0.0
  * @status stable
@@ -29,14 +30,14 @@ export default class KemetScrollSnap extends LitElement {
     axis: TypeAxis;
     pagination: TypePagination;
     isTouchDevice: boolean;
-    slides: any[];
+    slides: KemetScrollSnapSlide[];
     constructor();
     firstUpdated(): void;
     updated(): void;
     render(): import("lit-html").TemplateResult<1>;
     setFocusedSlides(): void;
     makeSlides(): void;
-    focusSlide(index: any): void;
+    focusSlide(index: number): void;
     setVerticalAttribute(): void;
 }
 declare global {

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

@@ -63,13 +63,8 @@ let KemetScrollSnap = class KemetScrollSnap extends LitElement {
         };
         const callback = (entries) => {
             entries.forEach((entry) => {
-                const { target } = entry;
-                if (entry.intersectionRatio >= 0.5) {
-                    target.focused = true;
-                }
-                else {
-                    target.focused = false;
-                }
+                const target = entry.target;
+                target.focused = entry.intersectionRatio >= 0.5;
             });
             this.makeSlides();
         };

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

@@ -1 +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.\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: 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"]}
+{"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/types.d.ts

@@ -1,5 +1,5 @@
-export declare type TypeAxis = 'horizontal' | 'vertical';
-export declare type TypePagination = 'top' | 'right' | 'bottom' | 'left';
+export type TypeAxis = 'horizontal' | 'vertical';
+export type TypePagination = 'top' | 'right' | 'bottom' | 'left';
 export interface KemetScrollSnapInterface extends HTMLElement {
     axis?: TypeAxis;
     pagination?: TypePagination;