kemet-ui 3.0.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { KemetRadioInterface, KemetRadiosInterface, TypeAxis, TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether or not the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesRadios];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean })\n  required: boolean;\n\n  @state()\n  radios: any;\n\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n    this.setAttribute('role', 'radiogroup');\n  }\n\n  render() {\n    return html`\n      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${event => this.handleClick(event)} @keydown=${event => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event) {\n    const { target } = event;\n\n    this.radios.forEach((radio) => {\n      radio.checked = false;\n      radio.tabIndex = radio === target ? 0 : -1;\n      radio.setAttribute('aria-checked', 'false');\n    });\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-radios-change', target);\n    }\n  }\n\n  handleKeyDown(event) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: any = radios.findIndex((radio: KemetRadioInterface) => radio.checked) ?? radios[0];\n\n    let index: number = checkedIndex + shift;\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n      this.radios[index].tabIndex = 0;\n    }\n  }\n\n  handleSlotChange() {\n    const radios = Array.from(this.radios);\n    const checkedRadio = radios.find((radio: KemetRadioInterface) => radio.checked) as KemetRadioInterface;\n\n    this.radios.forEach((radio) => {\n      radio.tabIndex = -1;\n      radio.input.tabIndex = -1;\n    });\n\n    if (checkedRadio) {\n      checkedRadio.tabIndex = 0;\n    }\n  }\n\n  makeMessage() {\n    if (this.status === 'error' || this.status === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\n  }\n}\n\n"]}
+{"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { TypeAxis, TypeStatus } from './types';\n\nimport type KemetRadio from './kemet-radio';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesRadios];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean })\n  required: boolean;\n\n  @state()\n  radios: NodeListOf<KemetRadio>;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n    this.setAttribute('role', 'radiogroup');\n  }\n\n  render() {\n    return html`\n      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as KemetRadio;\n\n    this.radios.forEach((radio) => {\n      radio.checked = false;\n      radio.tabIndex = radio === target ? 0 : -1;\n      radio.setAttribute('aria-checked', 'false');\n    });\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-radios-change', target);\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: number | KemetRadio = radios.findIndex((radio: KemetRadio) => radio.checked) ?? radios[0];\n\n    let index: number;\n\n    if (typeof checkedIndex === 'number') {\n      index = checkedIndex + shift;\n    } else {\n      index = shift;\n    }\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n      this.radios[index].tabIndex = 0;\n    }\n  }\n\n  handleSlotChange() {\n    const radios = Array.from(this.radios);\n    const checkedRadio = radios.find((radio: KemetRadio) => radio.checked) as KemetRadio;\n\n    this.radios.forEach((radio: KemetRadio) => {\n      radio.tabIndex = -1;\n      radio.input.tabIndex = -1;\n    });\n\n    if (checkedRadio) {\n      checkedRadio.tabIndex = 0;\n    }\n  }\n\n  makeMessage() {\n    if (this.status === 'error' || this.status === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\n  }\n}\n"]}

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-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;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAAvD;;QAWE,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;YACnD,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;AAzDQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;KAKF;CACF,CAAC;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/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;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAAtD;;QAIE,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;CACF,CAAA;AAnCQ,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,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-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":"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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';\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;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 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-select/kemet-option.d.ts

@@ -18,7 +18,7 @@ import { LitElement } from 'lit';
 export default class KemetOption extends LitElement {
     label: string;
     value: string;
-    disable: boolean;
+    disabled: boolean;
     selected: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -34,7 +34,7 @@ __decorate([
 ], KemetOption.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
-], KemetOption.prototype, "disable", void 0);
+], KemetOption.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })
 ], KemetOption.prototype, "selected", void 0);

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

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

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

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { FormSubmitController } from '../../utilities/controllers/forms';
 import { KemetFieldInterface } from '../kemet-field/types';
+import type KemetOption from './kemet-option';
 /**
  * @since 1.0.0
  * @status stable
@@ -13,8 +14,8 @@ import { KemetFieldInterface } from '../kemet-field/types';
  * @prop {string} value - The value of the select
  * @prop {array} options - The options the select contains
  * @prop {string} status - The status of the select
- * @prop {boolean} required - Determines whether or not the field is required
- * @prop {boolean} disabled - Determines whether or not the field is disabled
+ * @prop {boolean} required - Determines whether the field is required
+ * @prop {boolean} disabled - Determines whether the field is disabled
  * @prop {boolean} multiple - Support of multiple choice selections
  * @prop {string} icon - The dropdown icon
  * @prop {number} iconSize - The dropdown icon size
@@ -39,15 +40,22 @@ import { KemetFieldInterface } from '../kemet-field/types';
  *
  * @event kemet-input-focused - Fires when the input receives and loses focus
  * @event kemet-input-status - Fires when there's a change in status
+ * @event kemet-input-change - Fires when the select input changes
  *
  */
+interface IOptions {
+    label: string;
+    value: string;
+    disabled: boolean;
+    selected: boolean;
+}
 export default class KemetSelect extends LitElement {
     formSubmitController: FormSubmitController;
     static styles: import("lit").CSSResult[];
     slug: string;
     name: string;
     value: string;
-    options: any[];
+    options: IOptions[];
     status: string;
     required: boolean;
     disabled: boolean;
@@ -60,22 +68,22 @@ export default class KemetSelect extends LitElement {
     control: KemetFieldInterface;
     select: HTMLSelectElement;
     selectedOption: HTMLOptionElement;
-    optionElements: any;
+    optionElements: NodeListOf<KemetOption>;
     hasFocus: boolean;
     constructor();
     firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     /**
      * Generates the option elements
      * @private
      * @returns {TemplateResult} An option element
      */
-    makeOptions(): import("lit-html").TemplateResult<1>[];
+    makeOptions(): TemplateResult<1>[];
     /**
-     * Generates an dropdown icon
+     * Generates a dropdown icon
      * @private
      */
-    makeIcon(): import("lit-html").TemplateResult<1>;
+    makeIcon(): TemplateResult<1>;
     /**
      * Handles when the input receives focus
      * @private
@@ -101,10 +109,11 @@ export default class KemetSelect extends LitElement {
      * @public
      * @returns {boolean}
      */
-    checkValidity(): void;
+    checkValidity(): boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'kemet-select': KemetSelect;
     }
 }
+export {};