kemet-ui 4.0.2 → 5.0.0

package/dist/elements/radios/index.js

@@ -0,0 +1,296 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/radios/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = {}) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/radios/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+}
+
+legend {
+  margin-bottom: 1rem;
+}
+
+:host([axis=vertical]) fieldset {
+  flex-direction: column;
+}
+
+[part=message] {
+  display: block;
+  margin-top: 0.5rem;
+}
+
+:host([appearance=error]) [part=message] {
+  color: var(--kemet-color-font-error);
+}
+
+:host([appearance=warning]) [part=message] {
+  color: var(--kemet-color-font-warning);
+}
+`;
+
+// src/elements/radios/index.ts
+var KemetRadios = class extends LitElement {
+  constructor() {
+    super();
+    this.legend = "";
+    this.axis = "horizontal" /* Horizontal */;
+    this.name = "radios";
+    this.appearance = "neutral" /* Neutral */;
+    this.dom = "initializing";
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    this.radios = this.querySelectorAll("kemet-radio");
+    this.setAttribute("role", "radiogroup");
+    emitEvent(this, "kemet-radios-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    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>
+      </fieldset>
+      ${this.makeMessage()}
+    `;
+  }
+  handleClick(event) {
+    const target = event.target;
+    this.radios.forEach((radio) => {
+      radio.checked = false;
+      radio.tabIndex = radio === target ? 0 : -1;
+      radio.setAttribute("aria-checked", "false");
+    });
+    if (!target.disabled) {
+      target.checked = true;
+      target.setAttribute("aria-checked", "true");
+      this.value = target.value;
+      this.appearance = "neutral" /* Neutral */;
+      emitEvent(this, "kemet-radios-change", this);
+    }
+  }
+  handleKeyDown(event) {
+    const radios = Array.from(this.radios);
+    const arrowKeys = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
+    const forwardKeys = ["ArrowRight", "ArrowDown"];
+    const shift = forwardKeys.includes(event.key) ? 1 : -1;
+    const checkedIndex = radios.findIndex((radio) => radio.checked) ?? radios[0];
+    let index;
+    if (typeof checkedIndex === "number") {
+      index = checkedIndex + shift;
+    } else {
+      index = shift;
+    }
+    if (arrowKeys.includes(event.key)) {
+      if (index < 0) {
+        index = radios.length - 1;
+      }
+      if (index > radios.length - 1) {
+        index = 0;
+      }
+      this.radios.forEach((radio2) => {
+        radio2.checked = false;
+        radio2.tabIndex = -1;
+      });
+      const radio = this.radios[index];
+      if (radio) {
+        radio.focus();
+        radio.checked = true;
+        radio.tabIndex = 0;
+      }
+    }
+  }
+  handleSlotChange() {
+    const radios = Array.from(this.radios);
+    const checkedRadio = radios.find((radio) => radio.checked);
+    this.radios.forEach((radio) => {
+      radio.tabIndex = -1;
+      radio.input.tabIndex = -1;
+    });
+    if (checkedRadio) {
+      checkedRadio.tabIndex = 0;
+    }
+  }
+  makeMessage() {
+    if (this.appearance === "error" || this.appearance === "warning") {
+      return html`<span part="message">${this.message}</span>`;
+    }
+    return null;
+  }
+  checkValidity() {
+    if (this.required) {
+      return !!this.value;
+    }
+    return true;
+  }
+};
+KemetRadios.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetRadios.prototype, "legend", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRadios.prototype, "axis", 2);
+__decorateClass([
+  property({ type: String })
+], KemetRadios.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], KemetRadios.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRadios.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: String })
+], KemetRadios.prototype, "message", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetRadios.prototype, "required", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRadios.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRadios.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetRadios.prototype, "radios", 2);
+KemetRadios = __decorateClass([
+  customElement("kemet-radios")
+], KemetRadios);
+export {
+  KemetRadios as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/radios/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/radios/index.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/radios/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAxis, EnumAppearances } from '../../utilities/constants';\nimport type HTMLKemetRadioElement from '../radio';\nimport styles from './styles.css.ts'\n\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 {TypeAxis} 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 {EnumAppearances} appearance - The appearance 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 * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\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 * @fires kemet-radios-mounted - Fired when the radios is mounted to the DOM\n * @detail {HTMLElement} element - The radios element\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: EnumAxis = EnumAxis.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  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Boolean })\n  required!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  radios!: NodeListOf<HTMLKemetRadioElement>;\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    emitEvent(this, 'kemet-radios-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\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 HTMLKemetRadioElement;\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.appearance = EnumAppearances.Neutral;\n\n      emitEvent(this, 'kemet-radios-change', this);\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 | HTMLKemetRadioElement = radios.findIndex((radio: HTMLKemetRadioElement) => 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      const radio = this.radios[index];\n      if (radio) {\n        radio.focus();\n        radio.checked = true;\n        radio.tabIndex = 0;\n      }\n    }\n  }\n\n  handleSlotChange() {\n    const radios = Array.from(this.radios);\n    const checkedRadio = radios.find((radio: HTMLKemetRadioElement) => radio.checked) as HTMLKemetRadioElement;\n\n    this.radios.forEach((radio: HTMLKemetRadioElement) => {\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.appearance === 'error' || this.appearance === '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","export class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n\nfieldset {\n  border: 0;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 0.5rem;\n}\n\nlegend {\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([appearance=error]) [part=message] {\n  color: var(--kemet-color-font-error);\n}\n\n:host([appearance=warning]) [part=message] {\n  color: var(--kemet-color-font-warning);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;;;ACDxC,IAAM,uBAAN,MAA2B;AAAA,EAUhC,YAAY,MAAW,UAKlB,CAAC,GAAG;AACP,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AAErC,SAAK,UAAU;AAAA,MACb,MAAM,CAAC,UAAe,MAAM,QAAQ,MAAM;AAAA,MAC1C,MAAM,CAAC,UAAe,MAAM;AAAA,MAC5B,OAAO,CAAC,UAAe,MAAM;AAAA,MAC7B,UAAU,CAAC,UAAe,MAAM;AAAA,MAChC,GAAG;AAAA,IACL;AAEA,SAAK,iBAAiB,KAAK,eAAe,KAAK,IAAI;AACnD,SAAK,mBAAmB,KAAK,iBAAiB,KAAK,IAAI;AAAA,EACzD;AAAA,EAEA,gBAAgB;AACd,SAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AAEvC,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,iBAAiB,YAAY,KAAK,cAAc;AAC1D,WAAK,KAAK,iBAAiB,UAAU,KAAK,gBAAgB;AAAA,IAC5D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,oBAAoB,YAAY,KAAK,cAAc;AAC7D,WAAK,KAAK,oBAAoB,UAAU,KAAK,gBAAgB;AAC7D,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAEA,eAAe,OAAsB;AACnC,UAAM,WAAW,KAAK,QAAQ,SAAS,KAAK,IAAI;AAChD,UAAM,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AACxC,UAAM,QAAQ,KAAK,QAAQ,MAAM,KAAK,IAAI;AAE1C,QAAI,CAAC,YAAY,OAAO,SAAS,YAAY,OAAO,UAAU,aAAa;AASzE,YAAM,UAAU,OAAO,MAAM,MAAM,SAAS,CAAC;AAAA,IAC/C;AAAA,EACF;AAAA,EAEA,iBAAiB,OAAoB;AACnC,UAAM,eAAe;AACrB,UAAM,yBAAyB;AAE/B,UAAM,WAAW,KAAK,QAAQ,SAAS,KAAK,IAAI;AAChD,SAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AAEvC,QAAI,KAAK,QAAQ,CAAC,UAAU;AAC1B,YAAM,aAAa,KAAK,KAAK,iBAAiB,yEAAyE;AAEvH,iBAAW,QAAQ,CAAC,cAAmB;AACrC,YAAI,UAAU,eAAe;AAC3B,oBAAU,cAAc;AAExB,cAAI,CAAC,UAAU,cAAc,GAAG;AAC9B,sBAAU,SAAS;AACnB,sBAAU,UAAU;AAEpB,sBAAU;AAAA,cACR,IAAI,YAAY,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ;AAAA,kBACN,QAAQ;AAAA,kBACR,UAAU,UAAU,WAAW,UAAU,WAAW,CAAC;AAAA,kBACrD,SAAS;AAAA,gBACX;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAEA,cAAI,UAAU,sBAAsB,CAAC,UAAU,mBAAmB,GAAG;AACnE,sBAAU,SAAS;AACnB,sBAAU,UAAU;AAEpB,sBAAU;AAAA,cACR,IAAI,YAAY,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ;AAAA,kBACN,QAAQ;AAAA,kBACR,UAAU,EAAE,aAAa,KAAK;AAAA,kBAC9B,SAAS;AAAA,gBACX;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,QAAI,KAAK,MAAM;AACb,aAAO,OAAO;AACd,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,SAAS;AACtB,aAAO,MAAM,OAAO;AACpB,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,aAAa;AAC1B,WAAK,KAAK,OAAO,MAAM;AACvB,aAAO,MAAM;AACb,aAAO,OAAO;AAAA,IAChB;AAAA,EACF;AACF;;;ACtIO,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHmCf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAmClD,cAAc;AACZ,UAAM;AA9BR,kBAAiB;AAGjB;AAMA,gBAAe;AAGf;AAYA,eAAc;AASZ,SAAK,uBAAuB,IAAI,qBAAqB,IAAI;AAAA,EAC3D;AAAA,EAEA,eAAe;AACb,SAAK,SAAS,KAAK,iBAAiB,aAAa;AACjD,SAAK,aAAa,QAAQ,YAAY;AAEtC,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,UAED,KAAK,WAAW,KAAK,6BAA6B,KAAK,MAAM,cAAc,IAAI;AAAA,uBAClE,CAAC,UAAsB,KAAK,YAAY,KAAK,CAAC,aAAa,CAAC,UAAyB,KAAK,cAAc,KAAK,CAAC,gBAAgB,MAAM,KAAK,iBAAiB,CAAC;AAAA;AAAA,QAE1K,KAAK,YAAY,CAAC;AAAA;AAAA,EAExB;AAAA,EAEA,YAAY,OAAmB;AAC7B,UAAM,SAAS,MAAM;AAErB,SAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,YAAM,UAAU;AAChB,YAAM,WAAW,UAAU,SAAS,IAAI;AACxC,YAAM,aAAa,gBAAgB,OAAO;AAAA,IAC5C,CAAC;AAED,QAAI,CAAC,OAAO,UAAU;AACpB,aAAO,UAAU;AACjB,aAAO,aAAa,gBAAgB,MAAM;AAC1C,WAAK,QAAQ,OAAO;AACpB,WAAK;AAEL,gBAAU,MAAM,uBAAuB,IAAI;AAAA,IAC7C;AAAA,EACF;AAAA,EAEA,cAAc,OAAsB;AAClC,UAAM,SAAS,MAAM,KAAK,KAAK,MAAM;AACrC,UAAM,YAAY,CAAC,WAAW,cAAc,aAAa,WAAW;AACpE,UAAM,cAAc,CAAC,cAAc,WAAW;AAC9C,UAAM,QAAgB,YAAY,SAAS,MAAM,GAAG,IAAI,IAAI;AAC5D,UAAM,eAA+C,OAAO,UAAU,CAAC,UAAiC,MAAM,OAAO,KAAK,OAAO,CAAC;AAElI,QAAI;AAEJ,QAAI,OAAO,iBAAiB,UAAU;AACpC,cAAQ,eAAe;AAAA,IACzB,OAAO;AACL,cAAQ;AAAA,IACV;AAEA,QAAI,UAAU,SAAS,MAAM,GAAG,GAAG;AACjC,UAAI,QAAQ,GAAG;AACb,gBAAQ,OAAO,SAAS;AAAA,MAC1B;AAEA,UAAI,QAAQ,OAAO,SAAS,GAAG;AAC7B,gBAAQ;AAAA,MACV;AAEA,WAAK,OAAO,QAAQ,CAACA,WAAU;AAC7B,QAAAA,OAAM,UAAU;AAChB,QAAAA,OAAM,WAAW;AAAA,MACnB,CAAC;AAED,YAAM,QAAQ,KAAK,OAAO,KAAK;AAC/B,UAAI,OAAO;AACT,cAAM,MAAM;AACZ,cAAM,UAAU;AAChB,cAAM,WAAW;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,UAAM,SAAS,MAAM,KAAK,KAAK,MAAM;AACrC,UAAM,eAAe,OAAO,KAAK,CAAC,UAAiC,MAAM,OAAO;AAEhF,SAAK,OAAO,QAAQ,CAAC,UAAiC;AACpD,YAAM,WAAW;AACjB,YAAM,MAAM,WAAW;AAAA,IACzB,CAAC;AAED,QAAI,cAAc;AAChB,mBAAa,WAAW;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,eAAe,WAAW,KAAK,eAAe,WAAW;AAChE,aAAO,4BAA4B,KAAK,OAAO;AAAA,IACjD;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,UAAU;AACjB,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAEA,WAAO;AAAA,EACT;AACF;AAxJqB,YAGZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GALP,YAMnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GARtB,YASnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,YAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,YAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjBtB,YAkBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApBP,YAqBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAvBR,YAwBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1BtB,YA2BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA7BtB,YA8BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhCY,YAiCnB;AAjCmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":["radio"]}

package/dist/elements/radios/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/radios/styles.css.js

@@ -0,0 +1,39 @@
+// src/elements/radios/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+}
+
+legend {
+  margin-bottom: 1rem;
+}
+
+:host([axis=vertical]) fieldset {
+  flex-direction: column;
+}
+
+[part=message] {
+  display: block;
+  margin-top: 0.5rem;
+}
+
+:host([appearance=error]) [part=message] {
+  color: var(--kemet-color-font-error);
+}
+
+:host([appearance=warning]) [part=message] {
+  color: var(--kemet-color-font-warning);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/radios/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/radios/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n\nfieldset {\n  border: 0;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 0.5rem;\n}\n\nlegend {\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([appearance=error]) [part=message] {\n  color: var(--kemet-color-font-error);\n}\n\n:host([appearance=warning]) [part=message] {\n  color: var(--kemet-color-font-warning);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/rotator/index.d.ts

@@ -0,0 +1,59 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare enum EnumEffects {
+    Fade = "fade",
+    Flip = "flip"
+}
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-rotator
+ * @summary A component that rotates through an array of text.
+ *
+ * @prop {number} activeSlide - The index number for the current slide.
+ * @prop {array} messages - Text in the rotator. Supports HTML.
+ * @prop {TypeEffects} effect - The transition effect type.
+ * @prop {number} speed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background.
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.
+ *
+ * @fires kemet-rotator-mounted - Fired when the rotator is mounted to the DOM
+ * @detail {HTMLElement} element - The rotator element
+ *
+ */
+declare class KemetRotator extends LitElement {
+    static styles: lit.CSSResult[];
+    activeSlide: number;
+    messages: string[];
+    effect: EnumEffects;
+    speed: number;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    width: string;
+    height: string;
+    prevSlide: number | null;
+    firstUpdated(): void;
+    updated(changed: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    makeMessages(): lit_html.TemplateResult<1>[];
+    setDimensions(): void;
+    /**
+     * Rotates to the next slide.
+     * @public
+     * @method nextSlide
+     * @returns {void}
+     */
+    nextSlide(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-rotator': KemetRotator;
+    }
+}
+
+export { EnumEffects, KemetRotator as default };

package/dist/elements/rotator/index.js

@@ -0,0 +1,223 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/rotator/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/rotator/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-rotator-transition-speed: 500ms;
+
+  display: flex;
+}
+
+[part=slide] {
+  pointer-events: none;
+}
+
+.rotator__slide--active {
+  pointer-events: auto;
+}
+
+/* fade effect */
+:host([effect=fade]) [part=rotator] {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+
+:host([effect=fade]) [part=slide] {
+  width: 100%;
+  flex: none;
+  opacity: 0;
+  box-sizing: border-box;
+  transition: all var(--kemet-rotator-transition-speed) ease;
+}
+
+:host([effect=fade]) [part=slide]:not(:first-child) {
+  margin-left: -100%; /* this is the bulk of the overlay trick */
+}
+
+:host([effect=fade]) .active {
+  opacity: 1;
+}
+
+/* flip effect */
+:host([effect=flip]) [part=rotator] {
+  display: flex;
+  position: relative;
+  perspective: 500px;
+}
+
+:host([effect=flip]) [part=slide] {
+  display: block;
+  width: auto;
+  position: absolute;
+  top: -20px;
+  left: 0;
+
+  opacity: 0;
+
+  transform: rotateX(90deg);
+  transform-origin: 0% 0%;
+  transition: all var(--kemet-rotator-transition-speed) ease;
+}
+
+:host([effect=flip]) .active {
+  top: 0;
+  opacity: 1;
+
+  transform: rotateX(0deg);
+}
+
+:host([effect=flip]) .previous {
+  top: 40px;;
+  transform: rotateX(-90deg);
+}
+`;
+
+// src/elements/rotator/index.ts
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["Fade"] = "fade";
+  EnumEffects2["Flip"] = "flip";
+  return EnumEffects2;
+})(EnumEffects || {});
+var KemetRotator = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.activeSlide = 0;
+    this.messages = [];
+    this.effect = "fade" /* Fade */;
+    this.speed = 3;
+    this.dom = "initializing";
+    this.width = "auto";
+    this.height = "auto";
+  }
+  firstUpdated() {
+    this.prevSlide = null;
+    window.addEventListener("resize", this.setDimensions.bind(this));
+    emitEvent(this, "kemet-rotator-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated(changed) {
+    const widthHasChanged = !!changed.get("width");
+    const heightHasChanged = !!changed.get("height");
+    this.setDimensions();
+    if (!widthHasChanged && !heightHasChanged) {
+      setTimeout(() => {
+        if (this.speed > 0) {
+          this.nextSlide();
+        }
+      }, this.speed * 1e3);
+    }
+  }
+  render() {
+    const setWidth = this.effect === "flip" ? `width:${this.width};` : "";
+    const setHeight = this.effect === "flip" ? `height:${this.height};` : "";
+    console.log(this.height);
+    return html`
+      <span part="rotator" style="${setWidth} ${setHeight}">
+        ${this.makeMessages()}
+      </span>
+    `;
+  }
+  makeMessages() {
+    return this.messages.map((message, index) => {
+      const setActiveClass = this.activeSlide === index ? "active" : "";
+      const setPrevClass = this.prevSlide === index ? "previous" : "";
+      return html`
+        <span part="slide" class="${setActiveClass} ${setPrevClass}">
+          ${unsafeHTML(message)}
+        </span>
+      `;
+    });
+  }
+  setDimensions() {
+    if (this.effect === "flip") {
+      this.width = `${this.offsetWidth}px`;
+      const slides = this.shadowRoot?.querySelectorAll('[part="slide"]');
+      let tallest = 0;
+      slides?.forEach((slide) => {
+        if (slide.offsetHeight > tallest) {
+          tallest = slide.offsetHeight;
+        }
+      });
+      this.height = `${tallest}px`;
+    }
+  }
+  /**
+   * Rotates to the next slide.
+   * @public
+   * @method nextSlide
+   * @returns {void}
+   */
+  nextSlide() {
+    if (this.activeSlide < this.messages.length - 1) {
+      this.activeSlide += 1;
+      this.prevSlide = this.activeSlide - 1;
+    } else {
+      this.activeSlide = 0;
+      this.prevSlide = this.messages.length - 1;
+    }
+  }
+};
+KemetRotator.styles = [styles_css_default];
+__decorateClass([
+  property({ type: Number, attribute: "active-slide" })
+], KemetRotator.prototype, "activeSlide", 2);
+__decorateClass([
+  property({ type: Array })
+], KemetRotator.prototype, "messages", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRotator.prototype, "effect", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetRotator.prototype, "speed", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRotator.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetRotator.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetRotator.prototype, "width", 2);
+__decorateClass([
+  state()
+], KemetRotator.prototype, "height", 2);
+__decorateClass([
+  state()
+], KemetRotator.prototype, "prevSlide", 2);
+KemetRotator = __decorateClass([
+  customElement("kemet-rotator")
+], KemetRotator);
+export {
+  EnumEffects,
+  KemetRotator as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/rotator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/rotator/index.ts","../../../src/utilities/events.ts","../../../src/elements/rotator/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumEffects {\n  Fade = 'fade',\n  Flip = 'flip',\n}\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 {array} messages - Text in the rotator. Supports HTML.\n * @prop {TypeEffects} effect - The transition effect type.\n * @prop {number} speed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background.\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n * @fires kemet-rotator-mounted - Fired when the rotator is mounted to the DOM\n * @detail {HTMLElement} element - The rotator element\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'active-slide' })\n  activeSlide: number = 0;\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: EnumEffects = EnumEffects.Fade;\n\n  @property({ type: Number })\n  speed: number = 3;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  width: string = 'auto';\n\n  @state()\n  height: string = 'auto';\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    emitEvent(this, 'kemet-rotator-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\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.speed > 0) {\n          this.nextSlide();\n        }\n      }, this.speed * 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    console.log(this.height);\n\n    return html`\n      <span part=\"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 ? 'active' : '';\n      const setPrevClass = this.prevSlide === index ? 'previous' : '';\n\n      return html`\n        <span part=\"slide\" class=\"${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('[part=\"slide\"]');\n      let tallest = 0;\n\n      slides?.forEach((slide: Element) => {\n        if ((slide as HTMLElement).offsetHeight > tallest) {\n          tallest = (slide as HTMLElement).offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  /**\n   * Rotates to the next slide.\n   * @public\n   * @method nextSlide\n   * @returns {void}\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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-rotator-transition-speed: 500ms;\n\n  display: flex;\n}\n\n[part=slide] {\n  pointer-events: none;\n}\n\n.rotator__slide--active {\n  pointer-events: auto;\n}\n\n/* fade effect */\n:host([effect=fade]) [part=rotator] {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n}\n\n:host([effect=fade]) [part=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]) [part=slide]:not(:first-child) {\n  margin-left: -100%; /* this is the bulk of the overlay trick */\n}\n\n:host([effect=fade]) .active {\n  opacity: 1;\n}\n\n/* flip effect */\n:host([effect=flip]) [part=rotator] {\n  display: flex;\n  position: relative;\n  perspective: 500px;\n}\n\n:host([effect=flip]) [part=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]) .active {\n  top: 0;\n  opacity: 1;\n\n  transform: rotateX(0deg);\n}\n\n:host([effect=flip]) .previous {\n  top: 40px;;\n  transform: rotateX(-90deg);\n}\n`;\n"],"mappings":"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","names":["EnumEffects"]}