kemet-ui 5.0.2 → 5.0.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/toggle/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/toggle/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n * @ssrsafe yes\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\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 label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n * @fires kemet-toggle-mounted - Fired when the toggle is mounted to the DOM\n * @detail {HTMLElement} element - The toggle element\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\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  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-toggle-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      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', { element: this });\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\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  --kemet-toggle-width: 3.5rem;\n  --kemet-toggle-height: 2rem;\n  --kemet-toggle-handle-diameter: 1.6rem;\n  --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n  --kemet-toggle-track-border: none;\n  --kemet-toggle-track-color: var(--kemet-color-background-base);\n  --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(0 0 0 / 15%), inset 0 -0.2rem 0.4rem 0 rgb(0 0 0 / 5%);\n  --kemet-toggle-handle-border: none;\n  --kemet-toggle-handle-color: var(--kemet-color-font-active);\n  --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(0 0 0 / 10%), 0 0.5rem 0.5rem 0 rgb(0 0 0 / 20%);\n\n  display: flex;\n  align-items: center;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  font-size: inherit;\n  color: inherit;\n}\n\n:host([disabled]) label {\n  cursor: not-allowed;\n}\n\ninput {\n  display: none;\n}\n\n[part='control'] {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n}\n\n[part='control'] > span {\n  transition: 300ms ease-in-out;\n}\n\n[part='track'] {\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n  border: var(--kemet-toggle-track-border);\n  border-radius: var(--kemet-toggle-height);\n  background-color: var(--kemet-toggle-track-color);\n  box-shadow: var(--kemet-toggle-track-shadow);\n}\n\n:host([squared]) [part='track'] {\n  border-radius: 0;\n}\n\n[part='handle'] {\n  position: absolute;\n  top: var(--kemet-toggle-handle-margin);\n  left: var(--kemet-toggle-handle-margin);\n  width: var(--kemet-toggle-handle-diameter);\n  height: var(--kemet-toggle-handle-diameter);\n  transform: translateX(0);\n  border: var(--kemet-toggle-handle-border);\n  border-radius: var(--kemet-toggle-handle-diameter);\n  background-color: var(--kemet-toggle-handle-color);\n  box-shadow: var(--kemet-toggle-handle-shadow);\n}\n\n:host([squared]) [part='handle'] {\n  border-radius: 0;\n}\n\n:host([checked]) [part='handle'] {\n  transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n}\n\n.option {\n  font-size: 90%;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/toggle/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/toggle/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n * @ssrsafe yes\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\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 label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n * @fires kemet-toggle-mounted - Fired when the toggle is mounted to the DOM\n * @detail {HTMLElement} element - The toggle element\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\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  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-toggle-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      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', { element: this });\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { EnumAppearances } from \"./constants\";\n\nexport 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  }\n\n  hostConnected() {\n    console.log('what?!');\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      console.log('Adding form listeners');\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    console.log('~~Form submitted~~');\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.appearance = EnumAppearances.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: EnumAppearances.Error,\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.appearance = EnumAppearances.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  --kemet-toggle-width: 3.5rem;\n  --kemet-toggle-height: 2rem;\n  --kemet-toggle-handle-diameter: 1.6rem;\n  --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n  --kemet-toggle-track-border: none;\n  --kemet-toggle-track-color: var(--kemet-color-background-base);\n  --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(0 0 0 / 15%), inset 0 -0.2rem 0.4rem 0 rgb(0 0 0 / 5%);\n  --kemet-toggle-handle-border: none;\n  --kemet-toggle-handle-color: var(--kemet-color-font-active);\n  --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(0 0 0 / 10%), 0 0.5rem 0.5rem 0 rgb(0 0 0 / 20%);\n\n  display: flex;\n  align-items: center;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  font-size: inherit;\n  color: inherit;\n}\n\n:host([disabled]) label {\n  cursor: not-allowed;\n}\n\ninput {\n  display: none;\n}\n\n[part='control'] {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n}\n\n[part='control'] > span {\n  transition: 300ms ease-in-out;\n}\n\n[part='track'] {\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n  border: var(--kemet-toggle-track-border);\n  border-radius: var(--kemet-toggle-height);\n  background-color: var(--kemet-toggle-track-color);\n  box-shadow: var(--kemet-toggle-track-shadow);\n}\n\n:host([squared]) [part='track'] {\n  border-radius: 0;\n}\n\n[part='handle'] {\n  position: absolute;\n  top: var(--kemet-toggle-handle-margin);\n  left: var(--kemet-toggle-handle-margin);\n  width: var(--kemet-toggle-handle-diameter);\n  height: var(--kemet-toggle-handle-diameter);\n  transform: translateX(0);\n  border: var(--kemet-toggle-handle-border);\n  border-radius: var(--kemet-toggle-handle-diameter);\n  background-color: var(--kemet-toggle-handle-color);\n  box-shadow: var(--kemet-toggle-handle-shadow);\n}\n\n:host([squared]) [part='handle'] {\n  border-radius: 0;\n}\n\n:host([checked]) [part='handle'] {\n  transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n}\n\n.option {\n  font-size: 90%;\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/wrappers/react.d.ts

@@ -9,7 +9,7 @@ import KemetAvatars$1 from '../elements/avatars/index.js';
 import KemetBadge$1 from '../elements/badge/index.js';
 import KemetCard$1 from '../elements/card/index.js';
 import KemetCheckbox$1 from '../elements/checkbox/index.js';
-import { K as KemetCombo$1, I as InterfaceKemetSelectionEvent, a as KemetCount$1, b as InterfaceInputDetails, H as HTMLKemetFieldElement, c as HTMLKemetInputElement } from '../constants-CHvA2ed5.js';
+import { K as KemetCombo$1, I as InterfaceKemetSelectionEvent, a as KemetCount$1, b as InterfaceInputDetails, H as HTMLKemetFieldElement, c as HTMLKemetInputElement } from '../constants-C4-3KYlX.js';
 import KemetDrawer$1 from '../elements/drawer/index.js';
 import KemetFAB from '../elements/fab/index.js';
 import KemetFlipcard$1 from '../elements/flipcard/index.js';

package/dist/wrappers/react.js

@@ -470,7 +470,7 @@ var styles_css_default3 = css3`:host {
 }
 
 :host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
-  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
@@ -495,7 +495,7 @@ var styles_css_default3 = css3`:host {
 
 :host([variant=text][appearance=brand]:not([disabled])),
 :host([variant=plain][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([variant=text][appearance=success]:not([disabled])),
@@ -560,9 +560,9 @@ var styles_css_default3 = css3`:host {
 }
 
 :host([variant=outlined][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-background-color: transparent;
-  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
 }
 
@@ -900,8 +900,8 @@ var styles_css_default4 = css4`:host {
     --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
   }
 
-  :host([filled][appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([filled][appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([filled][appearance="success"]) {
@@ -944,8 +944,8 @@ var styles_css_default4 = css4`:host {
     border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
   }
 
-  :host([appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([appearance="success"]) {
@@ -1384,7 +1384,7 @@ var styles_css_default7 = css7`:host {
 }
 
 :host([appearance=brand]) {
-  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]) {
@@ -1742,8 +1742,10 @@ var FormSubmitController = class {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
   }
   hostConnected() {
+    console.log("what?!");
     this.form = this.options.form(this.host);
     if (this.form) {
+      console.log("Adding form listeners");
       this.form.addEventListener("formdata", this.handleFormData);
       this.form.addEventListener("submit", this.handleFormSubmit);
     }
@@ -1764,6 +1766,7 @@ var FormSubmitController = class {
     }
   }
   handleFormSubmit(event) {
+    console.log("~~Form submitted~~");
     event.preventDefault();
     event.stopImmediatePropagation();
     const disabled = this.options.disabled(this.host);
@@ -1774,14 +1777,14 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
                 bubbles: true,
                 composed: true,
                 detail: {
-                  status: "error",
+                  status: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }
@@ -1789,7 +1792,7 @@ var FormSubmitController = class {
             );
           }
           if (component.checkLimitValidity && !component.checkLimitValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
@@ -1909,7 +1912,7 @@ button {
 }
 
 :host([appearance=brand]) {
-  --kemet-checkbox-color: var(--kemet-color-brand-primary-base);
+  --kemet-checkbox-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {
@@ -2873,7 +2876,7 @@ button {
 }
 
 :host([appearance=brand]:not([disabled])) {
-  --kemet-fab-color: var(--kemet-color-brand-primary-base);
+  --kemet-fab-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]:not([disabled])) {
@@ -3740,7 +3743,7 @@ input[type=search]::-webkit-search-results-decoration {
 
 
 :host([appearance=brand]) {
-  --kemet-input-color: var(--kemet-color-brand-primary-base);
+  --kemet-input-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {
@@ -3761,7 +3764,7 @@ input[type=search]::-webkit-search-results-decoration {
 
 
 :host([appearance=brand][filled]) {
-  --_kemet-input-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-input-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error][filled]) {
@@ -4730,7 +4733,7 @@ input {
 }
 
 :host([appearance=brand]) {
-  --kemet-input-combo-color: var(--kemet-color-brand-primary-base);
+  --kemet-input-combo-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {
@@ -4750,7 +4753,7 @@ input {
 }
 
 :host([appearance=brand][filled]) {
-  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error][filled]) {
@@ -5340,7 +5343,7 @@ input {
   opacity: 0;
 }
 
-button {
+[part=button] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5386,12 +5389,6 @@ var KemetRadio = class extends LitElement23 {
     const radiosElement = this.closest("kemet-radios");
     this.name = radiosElement.name || "radio-button";
     this.input = this.shadowRoot?.querySelector("input");
-    this.setAttribute("role", "radio");
-    if (this.checked) {
-      this.setAttribute("aria-checked", "true");
-    } else {
-      this.setAttribute("aria-checked", "false");
-    }
     emitEvent(this, "kemet-radio-mounted", {
       bubbles: true,
       composed: true,
@@ -5413,7 +5410,7 @@ var KemetRadio = class extends LitElement23 {
           @blur=${() => this.handleBlur()}
           @focus=${() => this.handleFocus()}
         />
-        <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
+        <button part="button">${this.makeDot()}</button>
         <span part="text">${this.label}</span>
       </label>
     `;
@@ -5549,7 +5546,6 @@ var KemetRadios = class extends LitElement24 {
   }
   firstUpdated() {
     this.radios = this.querySelectorAll("kemet-radio");
-    this.setAttribute("role", "radiogroup");
     emitEvent(this, "kemet-radios-mounted", {
       bubbles: true,
       composed: true,
@@ -5563,18 +5559,13 @@ var KemetRadios = class extends LitElement24 {
     return html24`
       <fieldset part="fieldset">
         ${this.legend !== "" ? html24`<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)}></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");
@@ -5614,17 +5605,6 @@ var KemetRadios = class extends LitElement24 {
       }
     }
   }
-  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 html24`<span part="message">${this.message}</span>`;
@@ -5915,7 +5895,7 @@ option {
 }
 
 :host([appearance=brand]) {
-  --kemet-select-color: var(--kemet-color-brand-primary-base);
+  --kemet-select-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {
@@ -5971,7 +5951,7 @@ option {
 
 
 :host([appearance=brand][filled]) {
-  --_kemet-select-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-select-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error][filled]) {