kemet-ui 2.0.3 → 3.0.1

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

@@ -25,12 +25,13 @@ import { stylesRadio } from './styles';
  * @csspart text - The text next to the radio button.
  * @csspart dot - The circle that fills the radio button.
  *
- * @cssproperty --kemet-radio-size - The size of the radio button. Default: 18px.
- * @cssproperty --kemet-radio-border - The outer border of the radio button. Default: 1px solid var(--kemet-color-primary).
- * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot. Default: var(--kemet-color-primary).
- * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot. Default: 3px.
- * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot. Default: var(--kemet-color-white).
- * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-radio-size - The size of the radio button.
+ * @cssproperty --kemet-radio-border - The outer border of the radio button.
+ * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.
+ * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.
+ * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.
+ * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.
+ * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.
  *
  * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus
  * @event kemet-radio-focused - Fires when the checkbox loses or receives focus

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button. Default: 18px.\n * @cssproperty --kemet-radio-border - The outer border of the radio button. Default: 1px solid var(--kemet-color-primary).\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot. Default: var(--kemet-color-primary).\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot. Default: 3px.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot. Default: var(--kemet-color-white).\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button. Default: var(--kemet-color-white).\n *\n * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [stylesRadio];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @state()\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot.querySelector('input');\n    this.setAttribute('role', 'radio');\n\n    if (this.checked) {\n      this.setAttribute('aria-checked', 'true');\n    } else {\n      this.setAttribute('aria-checked', 'false');\n    }\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  click() {\n    this.input.click();\n  }\n\n  blur() {\n    this.input.blur();\n  }\n\n  focus() {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-focused', false);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focused', true);\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\n  }\n}\n"]}
+{"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radio.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QAIE,UAAK,GAAW,EAAE,CAAC;QAYnB,aAAQ,GAAY,KAAK,CAAC;IA0E5B,CAAC;IA/DC,YAAY;QACV,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAwB,CAAC;QAE1E,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,IAAI,cAAc,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;SAC5C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;mBAClB,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;sBACjB,IAAI,CAAC,QAAQ;kBACjB,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;mBACtB,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;2CAEA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;4BAC3C,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,IAAI,CAAA;;OAEV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAzFQ,iBAAM,GAAG,CAAC,WAAW,CAAC,CAAC;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,KAAK,EAAE;yCACgB;AAzBL,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CA0F9B;eA1FoB,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [stylesRadio];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @state()\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot.querySelector('input');\n    this.setAttribute('role', 'radio');\n\n    if (this.checked) {\n      this.setAttribute('aria-checked', 'true');\n    } else {\n      this.setAttribute('aria-checked', 'false');\n    }\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  click() {\n    this.input.click();\n  }\n\n  blur() {\n    this.input.blur();\n  }\n\n  focus() {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-focused', false);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focused', true);\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\n  }\n}\n"]}

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

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import { FormSubmitController } from '../../utilities/controllers/forms';
 import { TypeAxis, TypeStatus } from './types';
+import type KemetRadio from './kemet-radio';
 /**
  * @since 1.0.0
  * @status stable
@@ -14,7 +15,7 @@ import { TypeAxis, TypeStatus } from './types';
  * @prop {string} name - The name of the radio button set
  * @prop {string} status - The status of the radio button set
  * @prop {string} message - Validation message for the user
- * @prop {boolean} required - Determines whether or not the radio button set is required
+ * @prop {boolean} required - Determines whether the radio button set is required
  *
  * @csspart fieldset - The fieldset element.
  * @csspart legend - The legend element.
@@ -31,13 +32,13 @@ export default class KemetRadios extends LitElement {
     name: string;
     status: TypeStatus;
     message: string;
-    required: string;
-    radios: any;
+    required: boolean;
+    radios: NodeListOf<KemetRadio>;
     constructor();
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    handleClick(event: any): void;
-    handleKeyDown(event: any): void;
+    handleClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     handleSlotChange(): void;
     makeMessage(): import("lit-html").TemplateResult<1>;
     checkValidity(): boolean;

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

@@ -17,7 +17,7 @@ import { stylesRadios } from './styles';
  * @prop {string} name - The name of the radio button set
  * @prop {string} status - The status of the radio button set
  * @prop {string} message - Validation message for the user
- * @prop {boolean} required - Determines whether or not the radio button set is required
+ * @prop {boolean} required - Determines whether the radio button set is required
  *
  * @csspart fieldset - The fieldset element.
  * @csspart legend - The legend element.
@@ -43,13 +43,13 @@ let KemetRadios = class KemetRadios extends LitElement {
         return html `
       <fieldset part="fieldset">
         ${this.legend !== '' ? html `<legend part="legend">${this.legend}</legend>` : null}
-        <slot @click=${event => this.handleClick(event)} @keydown=${event => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
+        <slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
       </fieldset>
       ${this.makeMessage()}
     `;
     }
     handleClick(event) {
-        const { target } = event;
+        const target = event.target;
         this.radios.forEach((radio) => {
             radio.checked = false;
             radio.tabIndex = radio === target ? 0 : -1;
@@ -70,7 +70,13 @@ let KemetRadios = class KemetRadios extends LitElement {
         const forwardKeys = ['ArrowRight', 'ArrowDown'];
         const shift = forwardKeys.includes(event.key) ? 1 : -1;
         const checkedIndex = (_a = radios.findIndex((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0];
-        let index = checkedIndex + shift;
+        let index;
+        if (typeof checkedIndex === 'number') {
+            index = checkedIndex + shift;
+        }
+        else {
+            index = shift;
+        }
         if (arrowKeys.includes(event.key)) {
             if (index < 0) {
                 index = radios.length - 1;
@@ -131,7 +137,7 @@ __decorate([
     property({ type: String })
 ], KemetRadios.prototype, "message", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Boolean })
 ], KemetRadios.prototype, "required", void 0);
 __decorate([
     state()

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: String })\n  required: string;\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-radio/styles.js

@@ -7,6 +7,16 @@ export const stylesRadio = css `
   }
 
   :host {
+    --kemet-radio-size: 18px;
+    --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-radio-dot-color: rgb(var(--kemet-color-primary));
+    --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));
+    --kemet-radio-dot-border-width: 3px;
+    --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));
+    --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));
+    --kemet-radio-dot-border-width: 4px;
+    --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));
+
     display: inline-block;
   }
 
@@ -26,8 +36,8 @@ export const stylesRadio = css `
     cursor: pointer;
     margin: 0;
     padding: 0;
-    width: var(--kemet-radio-size, 18px);
-    height: var(--kemet-radio-size, 18px);
+    width: var(--kemet-radio-size);
+    height: var(--kemet-radio-size);
     position: absolute;
     opacity: 0;
   }
@@ -36,27 +46,27 @@ export const stylesRadio = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--kemet-radio-size, 18px);
-    height: var(--kemet-radio-size, 18px);
+    width: var(--kemet-radio-size);
+    height: var(--kemet-radio-size);
     padding: 0;
-    border-radius: 50%;
+    border-radius: var(--kemet-border-radius-circle);
     background: none;
-    border: var(--kemet-radio-border, 1px solid var(--kemet-color-background));
+    border: var(--kemet-radio-border);
   }
 
   [part='dot'] {
     display: inline-flex;
-    border-radius: 50%;
-    width: var(--kemet-radio-size, 18px);
-    height: var(--kemet-radio-size, 18px);
-    background: var(--kemet-radio-dot-color, var(--kemet-color-primary));
-    border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
-    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));
+    border-radius: var(--kemet-border-radius-circle);
+    width: var(--kemet-radio-size);
+    height: var(--kemet-radio-size);
+    background: var(--kemet-radio-dot-color);
+    border: var(--kemet-radio-dot-border);
+    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);
   }
 
   :host([filled]) [part='dot'] {
-    background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));
-    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));
+    background: var(--kemet-radio-dot-color-filled);
+    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);
   }
 `;
 export const stylesRadios = css `
@@ -92,11 +102,11 @@ export const stylesRadios = css `
   }
 
   :host([status='error']) [part='message'] {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
 
   :host([status='warning']) [part='message'] {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D7B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRadio = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: inline-flex;\n    gap: 0.5rem;\n    align-items: center;\n    margin-right: 0.5rem;\n  }\n\n  input {\n    cursor: pointer;\n    margin: 0;\n    padding: 0;\n    width: var(--kemet-radio-size, 18px);\n    height: var(--kemet-radio-size, 18px);\n    position: absolute;\n    opacity: 0;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--kemet-radio-size, 18px);\n    height: var(--kemet-radio-size, 18px);\n    padding: 0;\n    border-radius: 50%;\n    background: none;\n    border: var(--kemet-radio-border, 1px solid var(--kemet-color-background));\n  }\n\n  [part='dot'] {\n    display: inline-flex;\n    border-radius: 50%;\n    width: var(--kemet-radio-size, 18px);\n    height: var(--kemet-radio-size, 18px);\n    background: var(--kemet-radio-dot-color, var(--kemet-color-primary));\n    border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));\n  }\n\n  :host([filled]) [part='dot'] {\n    background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));\n  }\n`;\n\nexport const stylesRadios = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  legend {\n    margin-bottom: 1rem;\n  }\n\n  :host([axis='vertical']) fieldset {\n    flex-direction: column;\n  }\n\n  [part='message'] {\n    display: block;\n    margin-top: 0.5rem;\n  }\n\n  :host([status='error']) [part='message'] {\n    color: var(--kemet-color-error);\n  }\n\n  :host([status='warning']) [part='message'] {\n    color: var(--kemet-color-error);\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE7B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRadio = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-radio-size: 18px;\n    --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-radio-dot-color: rgb(var(--kemet-color-primary));\n    --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));\n    --kemet-radio-dot-border-width: 3px;\n    --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));\n    --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));\n    --kemet-radio-dot-border-width: 4px;\n    --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));\n\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: inline-flex;\n    gap: 0.5rem;\n    align-items: center;\n    margin-right: 0.5rem;\n  }\n\n  input {\n    cursor: pointer;\n    margin: 0;\n    padding: 0;\n    width: var(--kemet-radio-size);\n    height: var(--kemet-radio-size);\n    position: absolute;\n    opacity: 0;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--kemet-radio-size);\n    height: var(--kemet-radio-size);\n    padding: 0;\n    border-radius: var(--kemet-border-radius-circle);\n    background: none;\n    border: var(--kemet-radio-border);\n  }\n\n  [part='dot'] {\n    display: inline-flex;\n    border-radius: var(--kemet-border-radius-circle);\n    width: var(--kemet-radio-size);\n    height: var(--kemet-radio-size);\n    background: var(--kemet-radio-dot-color);\n    border: var(--kemet-radio-dot-border);\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n  }\n\n  :host([filled]) [part='dot'] {\n    background: var(--kemet-radio-dot-color-filled);\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n  }\n`;\n\nexport const stylesRadios = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  legend {\n    margin-bottom: 1rem;\n  }\n\n  :host([axis='vertical']) fieldset {\n    flex-direction: column;\n  }\n\n  [part='message'] {\n    display: block;\n    margin-top: 0.5rem;\n  }\n\n  :host([status='error']) [part='message'] {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='warning']) [part='message'] {\n    color: rgb(var(--kemet-color-error));\n  }\n`;\n"]}

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

@@ -7,3 +7,4 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Flip: Story;

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-rotator';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
@@ -6,41 +7,28 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Rotator',
     component: 'kemet-rotator',
-};
-export default meta;
-const Template = ({ message1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', message2 = 'Praesent ornare porta nulla.', message3 = 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.', effect = 'fade', rotationSpeed = 3, }) => html `
-  <kemet-rotator
-    effect="${effect}"
-    .rotation-speed=${rotationSpeed}
-    .messages="${[message1, message2, message3]}">
-  </kemet-rotator>
-`;
-export const Standard = {
-    render: args => Template(args),
     args: {
-        message1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        message2: 'Praesent ornare porta nulla.',
-        message3: 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',
-        effect: 'fade',
         rotationSpeed: 3,
+        messages: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Praesent ornare porta nulla.', 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.']
     },
     argTypes: {
-        message1: {
-            control: { type: 'text' },
-        },
-        message2: {
-            control: { type: 'text' },
-        },
-        message3: {
-            control: { type: 'text' },
-        },
         effect: {
-            control: { type: 'select' },
+            control: { type: 'radio' },
             options: ['fade', 'flip'],
         },
-        rotationSpeed: {
-            control: { type: 'number' },
-        },
     }
 };
+export default meta;
+const Template = (args) => html `
+  <kemet-rotator effect="${ifDefined(args.effect)}" .rotation-speed=${args.rotationSpeed} .messages="${args.messages}"></kemet-rotator>
+`;
+export const Standard = {
+    render: args => Template(args),
+};
+export const Flip = {
+    render: args => Template(args),
+    args: {
+        effect: 'flip',
+    },
+};
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CAC3B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,QAAQ,GAAG,0DAA0D,EACrE,QAAQ,GAAG,8BAA8B,EACzC,QAAQ,GAAG,yEAAyE,EACpF,MAAM,GAAG,MAAM,EACf,aAAa,GAAG,CAAC,GAClB,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;sBACE,aAAa;iBAClB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,0DAA0D;QACpE,QAAQ,EAAE,8BAA8B;QACxC,QAAQ,EAAE,yEAAyE;QACnF,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC1B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-rotator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Rotator',\n  component: 'kemet-rotator',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  message1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n  message2 = 'Praesent ornare porta nulla.',\n  message3 = 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',\n  effect = 'fade',\n  rotationSpeed = 3,\n}) => html`\n  <kemet-rotator\n    effect=\"${effect}\"\n    .rotation-speed=${rotationSpeed}\n    .messages=\"${[message1, message2, message3]}\">\n  </kemet-rotator>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    message1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n    message2: 'Praesent ornare porta nulla.',\n    message3: 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',\n    effect: 'fade',\n    rotationSpeed: 3,\n  },\n  argTypes: {\n    message1: {\n      control: { type: 'text' },\n    },\n    message2: {\n      control: { type: 'text' },\n    },\n    message3: {\n      control: { type: 'text' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['fade', 'flip'],\n    },\n    rotationSpeed: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,CAAC,0DAA0D,EAAE,8BAA8B,EAAE,yEAAyE,CAAC;KAClL;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC1B;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;2BACJ,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,qBAAqB,IAAI,CAAC,aAAa,eAAe,IAAI,CAAC,QAAQ;CACnH,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-rotator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Rotator',\n  component: 'kemet-rotator',\n  args: {\n    rotationSpeed: 3,\n    messages: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Praesent ornare porta nulla.', 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.']\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'radio' },\n      options: ['fade', 'flip'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-rotator effect=\"${ifDefined(args.effect)}\" .rotation-speed=${args.rotationSpeed} .messages=\"${args.messages}\"></kemet-rotator>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Flip: Story = {\n  render: args => Template(args),\n  args: {\n    effect: 'flip',\n  },\n};\n"]}

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

@@ -14,7 +14,7 @@ import { TypeEffect } from './types';
  * @prop {string} effect - The transition effect type.
  * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
  *
- * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
+ * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.
  *
  */
 export default class KemetRotator extends LitElement {
@@ -22,12 +22,12 @@ export default class KemetRotator extends LitElement {
     activeSlide: number;
     width: string;
     height: string;
-    messages: any[];
+    messages: string[];
     effect: TypeEffect;
     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

@@ -17,7 +17,7 @@ import { stylesRotator } from './styles';
  * @prop {string} effect - The transition effect type.
  * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
  *
- * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
+ * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.
  *
  */
 let KemetRotator = class KemetRotator extends LitElement {
@@ -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":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC;;;;;;;;;;;;;;;;GAgBG;AAGH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,UAAU;IAApD;;QAIE,gBAAW,GAAW,CAAC,CAAC;QAGxB,UAAK,GAAW,MAAM,CAAC;QAGvB,WAAM,GAAW,MAAM,CAAC;QAGxB,aAAQ,GAAU,EAAE,CAAC;QAGrB,WAAM,GAAe,MAAM,CAAC;QAG5B,kBAAa,GAAW,CAAC,CAAC;IAiF5B,CAAC;IA3EC,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,CAAC,OAAO;QACb,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC/C,MAAM,gBAAgB,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAEjD,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,mEAAmE;QACnE,IAAI,CAAC,eAAe,IAAI,CAAC,gBAAgB,EAAE;YACzC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;oBAC1B,IAAI,CAAC,SAAS,EAAE,CAAC;iBAClB;YACH,CAAC,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzE,OAAO,IAAI,CAAA;qCACsB,QAAQ,IAAI,SAAS;UAChD,IAAI,CAAC,YAAY,EAAE;;KAExB,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YACpD,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAC;YAClF,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;YAE5E,OAAO,IAAI,CAAA;sCACqB,cAAc,IAAI,YAAY;YACxD,UAAU,CAAC,OAAO,CAAC;;OAExB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YAC1B,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;YAErC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;YACnE,IAAI,OAAO,GAAG,CAAC,CAAC;YAEhB,MAAM,CAAC,OAAO,CAAC,CAAC,KAAkB,EAAE,EAAE;gBACpC,IAAI,KAAK,CAAC,YAAY,GAAG,OAAO,EAAE;oBAChC,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;iBAC9B;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,GAAG,GAAG,OAAO,IAAI,CAAC;SAC9B;IACH,CAAC;IAED,SAAS;QACP,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/C,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3C;IACH,CAAC;CACF,CAAA;AAnGQ,mBAAM,GAAG,CAAC,aAAa,CAAC,CAAC;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CACL;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACd;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;mDAC9B;AAG1B;IADC,KAAK,EAAE;+CACiB;AAtBN,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CAoGhC;eApGoB,YAAY","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. Default: 500ms.\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: any[] = [];\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/styles.js

@@ -1,6 +1,8 @@
 import { css } from 'lit';
 export const stylesRotator = css `
   :host {
+    --kemet-rotator-transition-speed: 500ms;
+
     display: flex;
   }
 
@@ -24,7 +26,7 @@ export const stylesRotator = css `
     flex: none;
     opacity: 0;
     box-sizing: border-box;
-    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
+    transition: all var(--kemet-rotator-transition-speed) ease;
   }
 
   :host([effect="fade"]) .rotator__slide:not(:first-child) {
@@ -54,7 +56,7 @@ export const stylesRotator = css `
 
     transform: rotateX(90deg);
     transform-origin: 0% 0%;
-    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
+    transition: all var(--kemet-rotator-transition-speed) ease;
   }
 
   :host([effect="flip"]) .rotator__slide--active {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuE/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    --kemet-rotator-transition-speed: 500ms;\n\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"]}

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

@@ -33,7 +33,7 @@ const Template = () => {
         width: 100%;
         height: var(--nav-height);
         border-bottom: 1px solid gray;
-        background-color: var(--kemet-color-white-to-black);
+        background-color: rgb(var(--kemet-color-white-to-black));
       }
 
       article {
@@ -41,7 +41,7 @@ const Template = () => {
       }
 
       kemet-scroll-link {
-        color: var(--kemet-color-background);
+        color: rgb(var(--kemet-color-foreground));
       }
 
       .docs-story nav {

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-link/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAG1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC;IACzE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAElD,WAAW,CAAC,OAAO,CAAC,CAAC,IAA8B,EAAE,EAAE;QACrD,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;CACzB,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { KemetScrollLinkInterface } from '../types';\n\nimport '../kemet-scroll-link';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\n\nconst meta: Meta = {\n  title: 'Components / Scroll Link',\n  component: 'kemet-scroll-link',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = () => {\n  const scrollLinks = document.querySelectorAll('nav > kemet-scroll-link');\n  const article = document.querySelector('article');\n\n  scrollLinks.forEach((link: KemetScrollLinkInterface) => {\n    link.yOffset = -72;\n    link.target = article.querySelector(`#${link.dataset.target}`);\n  });\n\n  return html`\n    <style>\n      body {\n        --nav-height: 72px;\n        line-height: 1.5;\n      }\n\n      nav {\n        position: fixed;\n        top: 0;\n        left: 0;\n        padding: 0 2rem;\n        display: flex;\n        gap: 2rem;\n        align-items: center;\n        width: 100%;\n        height: var(--nav-height);\n        border-bottom: 1px solid gray;\n        background-color: var(--kemet-color-white-to-black);\n      }\n\n      article {\n        margin-top: var(--nav-height);\n      }\n\n      kemet-scroll-link {\n        color: var(--kemet-color-background);\n      }\n\n      .docs-story nav {\n        display: none;\n      }\n    </style>\n\n    <nav>\n      <kemet-scroll-link data-target=\"heading-1\">Heading 1</kemet-scroll-link>\n      <kemet-scroll-link data-target=\"heading-2\">Heading 2</kemet-scroll-link>\n      <kemet-scroll-link data-target=\"heading-3\">Heading 3</kemet-scroll-link>\n      <kemet-scroll-link data-target=\"heading-4\">Heading 4</kemet-scroll-link>\n    </nav>\n\n    <article>\n      <h2 id=\"heading-1\">Heading 1</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2 id=\"heading-2\">Heading 2</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2 id=\"heading-3\">Heading 3</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2 id=\"heading-4\">Heading 4</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n    </article>\n\n    <kemet-scroll-link>\n      <kemet-button>Scroll to Top</kemet-button>\n    </kemet-scroll-link>\n  `;\n};\n\nexport const Standard: Story = {\n  render: () => Template(),\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-link/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAG1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC;IACzE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAElD,WAAW,CAAC,OAAO,CAAC,CAAC,IAA8B,EAAE,EAAE;QACrD,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;CACzB,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { KemetScrollLinkInterface } from '../types';\n\nimport '../kemet-scroll-link';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\n\nconst meta: Meta = {\n  title: 'Components / Scroll Link',\n  component: 'kemet-scroll-link',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = () => {\n  const scrollLinks = document.querySelectorAll('nav > kemet-scroll-link');\n  const article = document.querySelector('article');\n\n  scrollLinks.forEach((link: KemetScrollLinkInterface) => {\n    link.yOffset = -72;\n    link.target = article.querySelector(`#${link.dataset.target}`);\n  });\n\n  return html`\n    <style>\n      body {\n        --nav-height: 72px;\n        line-height: 1.5;\n      }\n\n      nav {\n        position: fixed;\n        top: 0;\n        left: 0;\n        padding: 0 2rem;\n        display: flex;\n        gap: 2rem;\n        align-items: center;\n        width: 100%;\n        height: var(--nav-height);\n        border-bottom: 1px solid gray;\n        background-color: rgb(var(--kemet-color-white-to-black));\n      }\n\n      article {\n        margin-top: var(--nav-height);\n      }\n\n      kemet-scroll-link {\n        color: rgb(var(--kemet-color-foreground));\n      }\n\n      .docs-story nav {\n        display: none;\n      }\n    </style>\n\n    <nav>\n      <kemet-scroll-link data-target=\"heading-1\">Heading 1</kemet-scroll-link>\n      <kemet-scroll-link data-target=\"heading-2\">Heading 2</kemet-scroll-link>\n      <kemet-scroll-link data-target=\"heading-3\">Heading 3</kemet-scroll-link>\n      <kemet-scroll-link data-target=\"heading-4\">Heading 4</kemet-scroll-link>\n    </nav>\n\n    <article>\n      <h2 id=\"heading-1\">Heading 1</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2 id=\"heading-2\">Heading 2</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2 id=\"heading-3\">Heading 3</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2 id=\"heading-4\">Heading 4</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n    </article>\n\n    <kemet-scroll-link>\n      <kemet-button>Scroll to Top</kemet-button>\n    </kemet-scroll-link>\n  `;\n};\n\nexport const Standard: Story = {\n  render: () => Template(),\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 {