kanto-ds 1.5.2 → 1.6.0

package/dist/components/forms/kt-radio-group/kt-radio-group.js

@@ -1,10 +1,10 @@
-import { css as b, nothing as d, html as p } from "lit";
-import { property as a, queryAssignedElements as y, state as m } from "lit/decorators.js";
-import { K as u, d as v } from "../../../chunks/kt-element-Djx2JcGl.js";
-import { e as g } from "../../../chunks/events-r51msXNf.js";
+import { css as f, nothing as d, html as p } from "lit";
+import { property as i, queryAssignedElements as y, state as g } from "lit/decorators.js";
+import { K as u, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as k, s as w, b as x } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as f } from "../../../chunks/index-STEEvEP7.js";
-var D = Object.defineProperty, i = (c, e, t, l) => {
+import { s as b } from "../../../chunks/index-TWJzttLX.js";
+var D = Object.defineProperty, a = (c, e, t, l) => {
   for (var r = void 0, o = c.length - 1, h; o >= 0; o--)
     (h = c[o]) && (r = h(e, t, r) || r);
   return r && D(e, t, r), r;
@@ -16,10 +16,14 @@ class n extends u {
   static {
     this.styles = [
       u.styles,
-      b`
+      f`
       :host {
         display: block;
-        --radio-size: calc(var(--button-height) * 0.45);
+        /* Whole, even pixels: an even circle around an even dot leaves the
+           same whole number of pixels on each side, so no browser has a half
+           to round its own way. */
+        --radio-size: round(nearest, calc(var(--button-height) * 0.45), 2px);
+        --radio-dot: 8px;
       }
 
       .radio {
@@ -33,7 +37,8 @@ class n extends u {
       }
 
       .circle {
-        position: relative;
+        display: grid;
+        place-items: center;
         flex: none;
         width: var(--radio-size);
         height: var(--radio-size);
@@ -44,11 +49,11 @@ class n extends u {
         transition: border-color var(--duration-instant);
       }
 
-      /* The dot: a fill inset by a third of the circle. */
-      .circle::after {
-        content: '';
-        position: absolute;
-        inset: 22%;
+      /* The dot, centred by the circle's grid rather than inset by a
+         percentage, which landed it on fractions of a pixel. */
+      .dot {
+        width: var(--radio-dot);
+        height: var(--radio-dot);
         border-radius: var(--radius-full);
         background-color: var(--color-primary-base);
         transform: scale(0);
@@ -67,7 +72,7 @@ class n extends u {
       .radio[aria-checked='true'] .circle {
         border-color: var(--color-primary-base);
       }
-      .radio[aria-checked='true'] .circle::after {
+      .radio[aria-checked='true'] .dot {
         transform: scale(1);
       }
 
@@ -85,8 +90,8 @@ class n extends u {
         background-color: var(--color-dark-22);
         border-color: var(--color-dark-24);
       }
-      :host([disabled]) .circle::after,
-      :host([group-disabled]) .circle::after {
+      :host([disabled]) .dot,
+      :host([group-disabled]) .dot {
         background-color: var(--text-disabled);
       }
     `
@@ -107,28 +112,28 @@ class n extends u {
       aria-disabled=${this.inactive ? "true" : d}
       tabindex=${this.tabbable && !this.inactive ? 0 : -1}
     >
-      <span part="circle" class="circle"></span>
+      <span part="circle" class="circle"><span class="dot"></span></span>
       <span class="text"><slot></slot></span>
     </div>`;
   }
 }
-i([
-  a({ type: String, reflect: !0 })
+a([
+  i({ type: String, reflect: !0 })
 ], n.prototype, "value");
-i([
-  a({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], n.prototype, "disabled");
-i([
-  a({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], n.prototype, "checked");
-i([
-  a({ type: Boolean, attribute: !1 })
+a([
+  i({ type: Boolean, attribute: !1 })
 ], n.prototype, "tabbable");
-i([
-  a({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], n.prototype, "invalid");
-i([
-  a({ type: Boolean, reflect: !0, attribute: "group-disabled" })
+a([
+  i({ type: Boolean, reflect: !0, attribute: "group-disabled" })
 ], n.prototype, "groupDisabled");
 class s extends u {
   constructor() {
@@ -161,7 +166,7 @@ class s extends u {
   static {
     this.styles = [
       u.styles,
-      b`
+      f`
       :host {
         display: block;
       }
@@ -197,7 +202,7 @@ class s extends u {
       x(
         this.internals,
         { valueMissing: t, customError: !!this.error },
-        this.error || (t ? f().selectOption : "")
+        this.error || (t ? b().selectOption : "")
       );
     }
   }
@@ -224,7 +229,7 @@ class s extends u {
     return this.inactive ? [] : this.radios.filter((e) => !e.disabled);
   }
   choose(e) {
-    e.value !== this.value && (this.value = e.value, g(this, "kt-change", { value: this.value }));
+    e.value !== this.value && (this.value = e.value, m(this, "kt-change", { value: this.value }));
   }
   render() {
     return p`${this.error ? p`<span id="error-message" class="visually-hidden">${this.error}</span>` : d}
@@ -232,7 +237,7 @@ class s extends u {
         part="base"
         class="group"
         role="radiogroup"
-        aria-label=${this.label || f().options}
+        aria-label=${this.label || b().options}
         aria-orientation=${this.orientation}
         aria-required=${this.required ? "true" : d}
         aria-invalid=${this.error ? "true" : d}
@@ -243,32 +248,32 @@ class s extends u {
       </div>`;
   }
 }
-i([
+a([
   y({ selector: "kt-radio" })
 ], s.prototype, "radios");
-i([
-  a({ type: String, reflect: !0 })
+a([
+  i({ type: String, reflect: !0 })
 ], s.prototype, "value");
-i([
-  a({ type: String })
+a([
+  i({ type: String })
 ], s.prototype, "name");
-i([
-  a({ type: String })
+a([
+  i({ type: String })
 ], s.prototype, "label");
-i([
-  a({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled");
-i([
-  m()
+a([
+  g()
 ], s.prototype, "formDisabled");
-i([
-  a({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], s.prototype, "required");
-i([
-  a({ type: String, reflect: !0 })
+a([
+  i({ type: String, reflect: !0 })
 ], s.prototype, "orientation");
-i([
-  a({ type: String, reflect: !0 })
+a([
+  i({ type: String, reflect: !0 })
 ], s.prototype, "error");
 v("kt-radio", n);
 v("kt-radio-group", s);

package/dist/components/forms/kt-radio-group/kt-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-radio-group.js","sources":["../../../../src/components/forms/kt-radio-group/kt-radio-group.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { strings } from '#internal/strings';\n\nexport type KtRadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * One option of a `<kt-radio-group>`.\n *\n * It draws itself and carries `role=\"radio\"`; the group owns the selection,\n * the tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\n * useful.\n *\n * @element kt-radio\n *\n * @slot - The label.\n *\n * @csspart base - The `role=\"radio\"` row.\n * @csspart circle - The drawn circle.\n */\nexport class KtRadio extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --radio-size: calc(var(--button-height) * 0.45);\n      }\n\n      .radio {\n        display: inline-flex;\n        align-items: flex-start;\n        gap: var(--gap-button);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        outline: none;\n        cursor: pointer;\n      }\n\n      .circle {\n        position: relative;\n        flex: none;\n        width: var(--radio-size);\n        height: var(--radio-size);\n        margin-top: calc((1lh - var(--radio-size)) / 2);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-full);\n        transition: border-color var(--duration-instant);\n      }\n\n      /* The dot: a fill inset by a third of the circle. */\n      .circle::after {\n        content: '';\n        position: absolute;\n        inset: 22%;\n        border-radius: var(--radius-full);\n        background-color: var(--color-primary-base);\n        transform: scale(0);\n        transition: transform var(--duration-fast);\n      }\n\n      .radio:hover .circle {\n        border-color: var(--text-muted);\n      }\n\n      .radio:focus-visible .circle {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .radio[aria-checked='true'] .circle {\n        border-color: var(--color-primary-base);\n      }\n      .radio[aria-checked='true'] .circle::after {\n        transform: scale(1);\n      }\n\n      :host([invalid]) .circle {\n        border-color: var(--color-danger-base);\n      }\n\n      :host([disabled]) .radio,\n      :host([group-disabled]) .radio {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      :host([disabled]) .circle,\n      :host([group-disabled]) .circle {\n        background-color: var(--color-dark-22);\n        border-color: var(--color-dark-24);\n      }\n      :host([disabled]) .circle::after,\n      :host([group-disabled]) .circle::after {\n        background-color: var(--text-disabled);\n      }\n    `,\n  ];\n\n  /** Submitted by the group when this option is chosen. */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Set by the group. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Set by the group: whether this option holds the group's one tab stop. */\n  @property({ type: Boolean, attribute: false })\n  tabbable = false;\n\n  /** Set by the group while it reports an error. */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /** Set by the group while the whole group is disabled. */\n  @property({ type: Boolean, reflect: true, attribute: 'group-disabled' })\n  groupDisabled = false;\n\n  private get inactive(): boolean {\n    return this.disabled || this.groupDisabled;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.radio')?.focus(options);\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n      part=\"base\"\n      class=\"radio\"\n      role=\"radio\"\n      aria-checked=${this.checked ? 'true' : 'false'}\n      aria-disabled=${this.inactive ? 'true' : nothing}\n      tabindex=${this.tabbable && !this.inactive ? 0 : -1}\n    >\n      <span part=\"circle\" class=\"circle\"></span>\n      <span class=\"text\"><slot></slot></span>\n    </div>`;\n  }\n}\n\n/**\n * One choice among a few, all visible at once.\n *\n * Reach for it over `<kt-select>` when there are few enough options to show\n * them all — seeing every option is the point — and over\n * `<kt-segmented-control>` when the options need a sentence each, or the\n * choice belongs in a form rather than a toolbar.\n *\n * Native radios cannot form a group across shadow roots, so this is the ARIA\n * radio group pattern: one tab stop for the whole group, arrow keys move and\n * select, disabled options are skipped.\n *\n * @element kt-radio-group\n *\n * @slot - The `<kt-radio>` options.\n *\n * @csspart base - The `role=\"radiogroup\"` container.\n *\n * @fires kt-change - An option was chosen. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-radio-group label=\"Billing\" name=\"billing\" value=\"monthly\">\n *   <kt-radio value=\"monthly\">Monthly</kt-radio>\n *   <kt-radio value=\"yearly\">Yearly — two months free</kt-radio>\n * </kt-radio-group>\n * ```\n */\nexport class KtRadioGroup extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .group {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      :host([orientation='horizontal']) .group {\n        flex-direction: row;\n        flex-wrap: wrap;\n        column-gap: var(--gap-card);\n      }\n    `,\n  ];\n\n  @queryAssignedElements({ selector: 'kt-radio' })\n  private radios!: KtRadio[];\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | null = null;\n\n  /** The chosen option's value, or `null`. */\n  @property({ type: String, reflect: true })\n  value: string | null = null;\n\n  @property({ type: String })\n  name = '';\n\n  /** Accessible name of the group. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */\n  @state()\n  private formDisabled = false;\n\n  /** Whether the control is off, by its own `disabled` or by its form. */\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: String, reflect: true })\n  orientation: KtRadioGroupOrientation = 'vertical';\n\n  /** Error message. A non-empty value puts the group in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    // On the host: the radios are slotted light-DOM children.\n    this.addEventListener('click', this.onClick);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.onClick);\n    this.removeEventListener('keydown', this.onKeyDown);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.value);\n\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().selectOption : ''),\n      );\n    }\n  }\n\n  override updated(): void {\n    this.syncRadios();\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /**\n   * Called by the platform when the control's disabled state changes — its\n   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.radios.find((radio) => radio.tabbable)?.focus(options);\n  }\n\n  private enabled(): KtRadio[] {\n    return this.inactive ? [] : this.radios.filter((radio) => !radio.disabled);\n  }\n\n  /**\n   * Pushes the group's state down; the radios are the display, not the truth.\n   * The tab stop sits on the chosen option, or the first enabled one.\n   */\n  private syncRadios = (): void => {\n    const enabled = this.enabled();\n    const chosen = enabled.find((radio) => radio.value === this.value);\n    const tabStop = chosen ?? enabled[0];\n\n    for (const radio of this.radios) {\n      radio.checked = radio.value === this.value;\n      radio.tabbable = radio === tabStop;\n      radio.invalid = Boolean(this.error);\n      radio.groupDisabled = this.inactive;\n    }\n  };\n\n  private choose(radio: KtRadio): void {\n    if (radio.value === this.value) return;\n    this.value = radio.value;\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  private onClick = (event: Event): void => {\n    const radio = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    if (!radio || !this.enabled().includes(radio)) return;\n    this.choose(radio);\n    radio.focus();\n  };\n\n  /** Arrows move and select, wrapping; Space selects the focused option. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    const enabled = this.enabled();\n    if (enabled.length === 0) return;\n\n    const focused = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    const from = focused ? enabled.indexOf(focused) : -1;\n\n    let target: KtRadio | undefined;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      target = enabled[(from + 1) % enabled.length];\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      target = enabled[(from - 1 + enabled.length) % enabled.length];\n    } else if (event.key === ' ' && focused && from >= 0) {\n      target = focused;\n    } else {\n      return;\n    }\n\n    event.preventDefault();\n    if (!target) return;\n    this.choose(target);\n    void this.updateComplete.then(() => target.focus());\n  };\n\n  override render(): TemplateResult {\n    return html`${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <div\n        part=\"base\"\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-label=${this.label || strings().options}\n        aria-orientation=${this.orientation}\n        aria-required=${this.required ? 'true' : nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-disabled=${this.inactive ? 'true' : nothing}\n        aria-describedby=${this.error ? 'error-message' : nothing}\n      >\n        <slot @slotchange=${this.syncRadios}></slot>\n      </div>`;\n  }\n}\n\ndefineElement('kt-radio', KtRadio);\ndefineElement('kt-radio-group', KtRadioGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-radio': KtRadio;\n    'kt-radio-group': KtRadioGroup;\n  }\n}\n"],"names":["KtRadio","KtElement","css","options","html","nothing","__decorateClass","property","KtRadioGroup","enabled","tabStop","radio","event","node","focused","from","target","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","emit","queryAssignedElements","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-radio-group.js","sources":["../../../../src/components/forms/kt-radio-group/kt-radio-group.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { strings } from '#internal/strings';\n\nexport type KtRadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * One option of a `<kt-radio-group>`.\n *\n * It draws itself and carries `role=\"radio\"`; the group owns the selection,\n * the tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\n * useful.\n *\n * @element kt-radio\n *\n * @slot - The label.\n *\n * @csspart base - The `role=\"radio\"` row.\n * @csspart circle - The drawn circle.\n */\nexport class KtRadio extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        /* Whole, even pixels: an even circle around an even dot leaves the\n           same whole number of pixels on each side, so no browser has a half\n           to round its own way. */\n        --radio-size: round(nearest, calc(var(--button-height) * 0.45), 2px);\n        --radio-dot: 8px;\n      }\n\n      .radio {\n        display: inline-flex;\n        align-items: flex-start;\n        gap: var(--gap-button);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        outline: none;\n        cursor: pointer;\n      }\n\n      .circle {\n        display: grid;\n        place-items: center;\n        flex: none;\n        width: var(--radio-size);\n        height: var(--radio-size);\n        margin-top: calc((1lh - var(--radio-size)) / 2);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-full);\n        transition: border-color var(--duration-instant);\n      }\n\n      /* The dot, centred by the circle's grid rather than inset by a\n         percentage, which landed it on fractions of a pixel. */\n      .dot {\n        width: var(--radio-dot);\n        height: var(--radio-dot);\n        border-radius: var(--radius-full);\n        background-color: var(--color-primary-base);\n        transform: scale(0);\n        transition: transform var(--duration-fast);\n      }\n\n      .radio:hover .circle {\n        border-color: var(--text-muted);\n      }\n\n      .radio:focus-visible .circle {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .radio[aria-checked='true'] .circle {\n        border-color: var(--color-primary-base);\n      }\n      .radio[aria-checked='true'] .dot {\n        transform: scale(1);\n      }\n\n      :host([invalid]) .circle {\n        border-color: var(--color-danger-base);\n      }\n\n      :host([disabled]) .radio,\n      :host([group-disabled]) .radio {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      :host([disabled]) .circle,\n      :host([group-disabled]) .circle {\n        background-color: var(--color-dark-22);\n        border-color: var(--color-dark-24);\n      }\n      :host([disabled]) .dot,\n      :host([group-disabled]) .dot {\n        background-color: var(--text-disabled);\n      }\n    `,\n  ];\n\n  /** Submitted by the group when this option is chosen. */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Set by the group. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Set by the group: whether this option holds the group's one tab stop. */\n  @property({ type: Boolean, attribute: false })\n  tabbable = false;\n\n  /** Set by the group while it reports an error. */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /** Set by the group while the whole group is disabled. */\n  @property({ type: Boolean, reflect: true, attribute: 'group-disabled' })\n  groupDisabled = false;\n\n  private get inactive(): boolean {\n    return this.disabled || this.groupDisabled;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.radio')?.focus(options);\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n      part=\"base\"\n      class=\"radio\"\n      role=\"radio\"\n      aria-checked=${this.checked ? 'true' : 'false'}\n      aria-disabled=${this.inactive ? 'true' : nothing}\n      tabindex=${this.tabbable && !this.inactive ? 0 : -1}\n    >\n      <span part=\"circle\" class=\"circle\"><span class=\"dot\"></span></span>\n      <span class=\"text\"><slot></slot></span>\n    </div>`;\n  }\n}\n\n/**\n * One choice among a few, all visible at once.\n *\n * Reach for it over `<kt-select>` when there are few enough options to show\n * them all — seeing every option is the point — and over\n * `<kt-segmented-control>` when the options need a sentence each, or the\n * choice belongs in a form rather than a toolbar.\n *\n * Native radios cannot form a group across shadow roots, so this is the ARIA\n * radio group pattern: one tab stop for the whole group, arrow keys move and\n * select, disabled options are skipped.\n *\n * @element kt-radio-group\n *\n * @slot - The `<kt-radio>` options.\n *\n * @csspart base - The `role=\"radiogroup\"` container.\n *\n * @fires kt-change - An option was chosen. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-radio-group label=\"Billing\" name=\"billing\" value=\"monthly\">\n *   <kt-radio value=\"monthly\">Monthly</kt-radio>\n *   <kt-radio value=\"yearly\">Yearly — two months free</kt-radio>\n * </kt-radio-group>\n * ```\n */\nexport class KtRadioGroup extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .group {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      :host([orientation='horizontal']) .group {\n        flex-direction: row;\n        flex-wrap: wrap;\n        column-gap: var(--gap-card);\n      }\n    `,\n  ];\n\n  @queryAssignedElements({ selector: 'kt-radio' })\n  private radios!: KtRadio[];\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | null = null;\n\n  /** The chosen option's value, or `null`. */\n  @property({ type: String, reflect: true })\n  value: string | null = null;\n\n  @property({ type: String })\n  name = '';\n\n  /** Accessible name of the group. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */\n  @state()\n  private formDisabled = false;\n\n  /** Whether the control is off, by its own `disabled` or by its form. */\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: String, reflect: true })\n  orientation: KtRadioGroupOrientation = 'vertical';\n\n  /** Error message. A non-empty value puts the group in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    // On the host: the radios are slotted light-DOM children.\n    this.addEventListener('click', this.onClick);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.onClick);\n    this.removeEventListener('keydown', this.onKeyDown);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.value);\n\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().selectOption : ''),\n      );\n    }\n  }\n\n  override updated(): void {\n    this.syncRadios();\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /**\n   * Called by the platform when the control's disabled state changes — its\n   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.radios.find((radio) => radio.tabbable)?.focus(options);\n  }\n\n  private enabled(): KtRadio[] {\n    return this.inactive ? [] : this.radios.filter((radio) => !radio.disabled);\n  }\n\n  /**\n   * Pushes the group's state down; the radios are the display, not the truth.\n   * The tab stop sits on the chosen option, or the first enabled one.\n   */\n  private syncRadios = (): void => {\n    const enabled = this.enabled();\n    const chosen = enabled.find((radio) => radio.value === this.value);\n    const tabStop = chosen ?? enabled[0];\n\n    for (const radio of this.radios) {\n      radio.checked = radio.value === this.value;\n      radio.tabbable = radio === tabStop;\n      radio.invalid = Boolean(this.error);\n      radio.groupDisabled = this.inactive;\n    }\n  };\n\n  private choose(radio: KtRadio): void {\n    if (radio.value === this.value) return;\n    this.value = radio.value;\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  private onClick = (event: Event): void => {\n    const radio = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    if (!radio || !this.enabled().includes(radio)) return;\n    this.choose(radio);\n    radio.focus();\n  };\n\n  /** Arrows move and select, wrapping; Space selects the focused option. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    const enabled = this.enabled();\n    if (enabled.length === 0) return;\n\n    const focused = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    const from = focused ? enabled.indexOf(focused) : -1;\n\n    let target: KtRadio | undefined;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      target = enabled[(from + 1) % enabled.length];\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      target = enabled[(from - 1 + enabled.length) % enabled.length];\n    } else if (event.key === ' ' && focused && from >= 0) {\n      target = focused;\n    } else {\n      return;\n    }\n\n    event.preventDefault();\n    if (!target) return;\n    this.choose(target);\n    void this.updateComplete.then(() => target.focus());\n  };\n\n  override render(): TemplateResult {\n    return html`${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <div\n        part=\"base\"\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-label=${this.label || strings().options}\n        aria-orientation=${this.orientation}\n        aria-required=${this.required ? 'true' : nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-disabled=${this.inactive ? 'true' : nothing}\n        aria-describedby=${this.error ? 'error-message' : nothing}\n      >\n        <slot @slotchange=${this.syncRadios}></slot>\n      </div>`;\n  }\n}\n\ndefineElement('kt-radio', KtRadio);\ndefineElement('kt-radio-group', KtRadioGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-radio': KtRadio;\n    'kt-radio-group': KtRadioGroup;\n  }\n}\n"],"names":["KtRadio","KtElement","css","options","html","nothing","__decorateClass","property","KtRadioGroup","enabled","tabStop","radio","event","node","focused","from","target","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","emit","queryAssignedElements","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-select/kt-select.js

@@ -1,12 +1,12 @@
 import { css as x, nothing as n, html as h } from "lit";
 import { state as p, property as s } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
-import { K as v, d as w } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as v, d as w } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { u as k, t as g, e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as $, s as I, b as D } from "../../../chunks/form-control-B74_EHtG.js";
-import { a as S, f as b, l as L, n as C, o as y } from "../../../chunks/listbox-llcUu_V-.js";
-import { F as E, f as P } from "../../../chunks/floating-B7_Dahpn.js";
-import { s as l } from "../../../chunks/index-STEEvEP7.js";
+import { a as S, f as b, l as L, n as C, o as y } from "../../../chunks/listbox-LsUEyGhQ.js";
+import { F as E, f as P } from "../../../chunks/floating-B33g-M_1.js";
+import { s as l } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
 var q = Object.defineProperty, i = (c, e, o, a) => {
   for (var r = void 0, u = c.length - 1, f; u >= 0; u--)

package/dist/components/forms/kt-textarea/kt-textarea.js

@@ -2,10 +2,10 @@ import { css as m, nothing as i, html as l } from "lit";
 import { query as f, property as a, state as b } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { live as g } from "lit/directives/live.js";
-import { K as c, d as y } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as c, d as y } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as p } from "../../../chunks/events-r51msXNf.js";
 import { a as x, s as v, b as w } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as $ } from "../../../chunks/index-STEEvEP7.js";
+import { s as $ } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
 var k = Object.defineProperty, r = (n, e, o, C) => {
   for (var s = void 0, h = n.length - 1, d; h >= 0; h--)

package/dist/components/forms/kt-time-input/kt-time-input.d.ts

@@ -0,0 +1,48 @@
+import { type PropertyValues } from 'lit';
+import { KtSegmentedField, type FieldItem, type Segment } from '#internal/segmented-field';
+export type KtHourCycle = 'h12' | 'h23';
+/**
+ * A time of day typed into its parts: hours, minutes and, if asked, seconds.
+ *
+ * The clock is the reader's — `14:30` in London, `2:30 PM` in New York — or
+ * the one `hour-cycle` names. Whatever the clock shows, the value is the
+ * 24-hour time HTML uses, `14:30` or `14:30:00`, and `null` until complete.
+ * The arrows step a segment, the minutes by `step`.
+ *
+ * @element kt-time-input
+ *
+ * @csspart field - The field.
+ * @csspart segment - An hour, minute, second or AM/PM segment.
+ *
+ * @fires kt-change - The time became complete, changed, or stopped being one.
+ *   `detail: { value }` — `HH:MM`, `HH:MM:SS` or `null`.
+ *
+ * @example
+ * ```html
+ * <kt-time-input label="Starts at" name="start" step="15" min="08:00" max="20:00"></kt-time-input>
+ * ```
+ */
+export declare class KtTimeInput extends KtSegmentedField {
+    /** Shows a seconds segment, and puts seconds in the value. */
+    seconds: boolean;
+    /** The clock to show: `h12` with AM/PM, `h23` without. Empty: the language's. */
+    hourCycle: KtHourCycle | '';
+    /** How many minutes the arrows step by. */
+    step: number;
+    private get twelve();
+    willUpdate(changed: PropertyValues<this>): void;
+    protected items(): FieldItem[];
+    protected fill(value: string | null): Record<string, string>;
+    protected read(texts: Record<string, string>): {
+        value: string | null;
+        error: string;
+    };
+    /** A number left at one digit is written out: 9 is 09. */
+    protected completeOnBlur(segment: Segment, text: string): string | null;
+    protected requiredMessage(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-time-input': KtTimeInput;
+    }
+}

package/dist/components/forms/kt-time-input/kt-time-input.js

@@ -0,0 +1,114 @@
+import "lit";
+import { property as v } from "lit/decorators.js";
+import { d as x } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as O } from "../../../chunks/segmented-field-BBXR4XFL.js";
+import { d as w } from "../../../chunks/locale-C5xLkGx5.js";
+import { s as y } from "../../../chunks/index-TWJzttLX.js";
+var P = Object.defineProperty, g = (u, e, t, r) => {
+  for (var o = void 0, n = u.length - 1, s; n >= 0; n--)
+    (s = u[n]) && (o = s(e, t, o) || o);
+  return o && P(e, t, o), o;
+};
+function b(u, e) {
+  const t = w(u, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: e ? "h12" : "h23"
+  }), r = t.formatToParts(new Date(2026, 0, 1, 1, 5)), o = r.map((i) => i.type), n = r.find((i) => i.type === "literal")?.value.trim() || ":", s = (i) => t.formatToParts(new Date(2026, 0, 1, i)).find((l) => l.type === "dayPeriod")?.value ?? (i < 12 ? "AM" : "PM");
+  return {
+    separator: n === "." ? "." : ":",
+    periodFirst: o.indexOf("dayPeriod") >= 0 && o.indexOf("dayPeriod") < o.indexOf("hour"),
+    periods: [s(1), s(13)]
+  };
+}
+function m(u) {
+  const e = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(u);
+  if (!e) return null;
+  const [t, r, o = 0] = e.slice(1).map((n) => Number(n ?? 0));
+  return t > 23 || r > 59 || o > 59 ? null : t * 3600 + r * 60 + o;
+}
+const c = (u) => String(u).padStart(2, "0");
+class f extends O {
+  constructor() {
+    super(...arguments), this.seconds = !1, this.hourCycle = "", this.step = 1;
+  }
+  get twelve() {
+    if (this.hourCycle) return this.hourCycle === "h12";
+    const e = w(this.resolvedLocale, { hour: "numeric" }).resolvedOptions().hourCycle;
+    return e === "h11" || e === "h12";
+  }
+  willUpdate(e) {
+    (e.has("hourCycle") || e.has("seconds")) && (this.texts = this.fill(this.value)), super.willUpdate(e);
+  }
+  // --- Segments ---
+  items() {
+    const e = y(), t = this.twelve, { separator: r, periodFirst: o, periods: n } = b(this.resolvedLocale, t), s = (l, p, a, d, h = 1) => ({
+      key: l,
+      label: p,
+      placeholder: e.placeholderTime,
+      spec: { min: a, max: d, length: 2 },
+      step: h
+    }), i = [
+      t ? s("hour", e.segmentHour, 1, 12) : s("hour", e.segmentHour, 0, 23),
+      { literal: r },
+      s("minute", e.segmentMinute, 0, 59, Math.max(1, Math.round(this.step) || 1))
+    ];
+    if (this.seconds && i.push({ literal: r }, s("second", e.segmentSecond, 0, 59)), t) {
+      const l = {
+        key: "period",
+        label: e.segmentDayPeriod,
+        placeholder: e.placeholderTime,
+        choices: n
+      };
+      o ? i.unshift(l, { literal: " " }) : i.push({ literal: " " }, l);
+    }
+    return i;
+  }
+  fill(e) {
+    const t = e === null ? null : m(e);
+    if (t === null) return { hour: "", minute: "", second: "", period: "" };
+    const r = Math.floor(t / 3600);
+    return {
+      hour: c(this.twelve ? r % 12 || 12 : r),
+      minute: c(Math.floor(t / 60) % 60),
+      second: c(t % 60),
+      period: r < 12 ? "0" : "1"
+    };
+  }
+  read(e) {
+    const { hour: t = "", minute: r = "", second: o = "", period: n = "" } = e, s = this.twelve;
+    if (t.length < 2 || r.length < 2 || this.seconds && o.length < 2 || s && n === "") return { value: null, error: "" };
+    let l = Number(t);
+    if (s) {
+      if (l < 1 || l > 12) return { value: null, error: "" };
+      l = l % 12 + (n === "1" ? 12 : 0);
+    }
+    const p = `${c(l)}:${r}${this.seconds ? `:${o}` : ""}`, a = m(p);
+    if (a === null) return { value: null, error: "" };
+    const d = m(this.min), h = m(this.max);
+    return d !== null && a < d || h !== null && a > h ? { value: null, error: y().timeOutOfRange } : { value: p, error: "" };
+  }
+  /** A number left at one digit is written out: 9 is 09. */
+  completeOnBlur(e, t) {
+    if (!e.spec || t.length !== 1) return null;
+    const r = Number(t);
+    return r < e.spec.min ? null : c(r);
+  }
+  requiredMessage() {
+    return y().timeRequired;
+  }
+}
+g([
+  v({ type: Boolean, reflect: !0 })
+], f.prototype, "seconds");
+g([
+  v({ type: String, attribute: "hour-cycle" })
+], f.prototype, "hourCycle");
+g([
+  v({ type: Number })
+], f.prototype, "step");
+x("kt-time-input", f);
+export {
+  f as KtTimeInput
+};
+//# sourceMappingURL=kt-time-input.js.map

package/dist/components/forms/kt-time-input/kt-time-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-time-input.js","sources":["../../../../src/components/forms/kt-time-input/kt-time-input.ts"],"sourcesContent":["import { type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { defineElement } from '#internal/kt-element';\nimport { KtSegmentedField, type FieldItem, type Segment } from '#internal/segmented-field';\nimport { dateFormat } from '#internal/locale';\nimport { strings } from '#internal/strings';\n\nexport type KtHourCycle = 'h12' | 'h23';\n\n/** How the language writes a time on a clock: what goes between the numbers, and where AM/PM sits. */\nfunction timeLayout(\n  locale: string,\n  twelve: boolean,\n): { separator: string; periodFirst: boolean; periods: [string, string] } {\n  const format = dateFormat(locale, {\n    hour: '2-digit',\n    minute: '2-digit',\n    hourCycle: twelve ? 'h12' : 'h23',\n  });\n  const parts = format.formatToParts(new Date(2026, 0, 1, 1, 5));\n  const types = parts.map((part) => part.type);\n  const separator = parts.find((part) => part.type === 'literal')?.value.trim() || ':';\n  const period = (hour: number) =>\n    format.formatToParts(new Date(2026, 0, 1, hour)).find((part) => part.type === 'dayPeriod')\n      ?.value ?? (hour < 12 ? 'AM' : 'PM');\n  return {\n    separator: separator === '.' ? '.' : ':',\n    periodFirst:\n      types.indexOf('dayPeriod') >= 0 && types.indexOf('dayPeriod') < types.indexOf('hour'),\n    periods: [period(1), period(13)],\n  };\n}\n\n/** `HH:MM` or `HH:MM:SS` as seconds since midnight, or null when it is not one. */\nfunction secondsOf(time: string): number | null {\n  const match = /^(\\d{2}):(\\d{2})(?::(\\d{2}))?$/.exec(time);\n  if (!match) return null;\n  const [hours, minutes, seconds = 0] = match.slice(1).map((part) => Number(part ?? 0));\n  if (hours! > 23 || minutes! > 59 || seconds > 59) return null;\n  return hours! * 3600 + minutes! * 60 + seconds;\n}\n\nconst pad = (n: number) => String(n).padStart(2, '0');\n\n/**\n * A time of day typed into its parts: hours, minutes and, if asked, seconds.\n *\n * The clock is the reader's — `14:30` in London, `2:30 PM` in New York — or\n * the one `hour-cycle` names. Whatever the clock shows, the value is the\n * 24-hour time HTML uses, `14:30` or `14:30:00`, and `null` until complete.\n * The arrows step a segment, the minutes by `step`.\n *\n * @element kt-time-input\n *\n * @csspart field - The field.\n * @csspart segment - An hour, minute, second or AM/PM segment.\n *\n * @fires kt-change - The time became complete, changed, or stopped being one.\n *   `detail: { value }` — `HH:MM`, `HH:MM:SS` or `null`.\n *\n * @example\n * ```html\n * <kt-time-input label=\"Starts at\" name=\"start\" step=\"15\" min=\"08:00\" max=\"20:00\"></kt-time-input>\n * ```\n */\nexport class KtTimeInput extends KtSegmentedField {\n  /** Shows a seconds segment, and puts seconds in the value. */\n  @property({ type: Boolean, reflect: true })\n  seconds = false;\n\n  /** The clock to show: `h12` with AM/PM, `h23` without. Empty: the language's. */\n  @property({ type: String, attribute: 'hour-cycle' })\n  hourCycle: KtHourCycle | '' = '';\n\n  /** How many minutes the arrows step by. */\n  @property({ type: Number })\n  step = 1;\n\n  private get twelve(): boolean {\n    if (this.hourCycle) return this.hourCycle === 'h12';\n    const cycle = dateFormat(this.resolvedLocale, { hour: 'numeric' }).resolvedOptions().hourCycle;\n    return cycle === 'h11' || cycle === 'h12';\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    // Another clock shows the same value in other segments.\n    if (changed.has('hourCycle') || changed.has('seconds')) this.texts = this.fill(this.value);\n    super.willUpdate(changed);\n  }\n\n  // --- Segments ---\n\n  protected override items(): FieldItem[] {\n    const s = strings();\n    const twelve = this.twelve;\n    const { separator, periodFirst, periods } = timeLayout(this.resolvedLocale, twelve);\n    const number = (key: string, label: string, min: number, max: number, step = 1): Segment => ({\n      key,\n      label,\n      placeholder: s.placeholderTime,\n      spec: { min, max, length: 2 },\n      step,\n    });\n\n    const items: FieldItem[] = [\n      twelve ? number('hour', s.segmentHour, 1, 12) : number('hour', s.segmentHour, 0, 23),\n      { literal: separator },\n      number('minute', s.segmentMinute, 0, 59, Math.max(1, Math.round(this.step) || 1)),\n    ];\n    if (this.seconds) items.push({ literal: separator }, number('second', s.segmentSecond, 0, 59));\n    if (twelve) {\n      const period: Segment = {\n        key: 'period',\n        label: s.segmentDayPeriod,\n        placeholder: s.placeholderTime,\n        choices: periods,\n      };\n      if (periodFirst) items.unshift(period, { literal: ' ' });\n      else items.push({ literal: ' ' }, period);\n    }\n    return items;\n  }\n\n  protected override fill(value: string | null): Record<string, string> {\n    const total = value === null ? null : secondsOf(value);\n    if (total === null) return { hour: '', minute: '', second: '', period: '' };\n    const hours = Math.floor(total / 3600);\n    return {\n      hour: pad(this.twelve ? hours % 12 || 12 : hours),\n      minute: pad(Math.floor(total / 60) % 60),\n      second: pad(total % 60),\n      period: hours < 12 ? '0' : '1',\n    };\n  }\n\n  protected override read(texts: Record<string, string>): { value: string | null; error: string } {\n    const { hour = '', minute = '', second = '', period = '' } = texts;\n    const twelve = this.twelve;\n    // A segment still being typed is not a number yet: two digits, or one\n    // written out when the focus leaves it.\n    const incomplete =\n      hour.length < 2 ||\n      minute.length < 2 ||\n      (this.seconds && second.length < 2) ||\n      (twelve && period === '');\n    if (incomplete) return { value: null, error: '' };\n\n    let hours = Number(hour);\n    if (twelve) {\n      if (hours < 1 || hours > 12) return { value: null, error: '' };\n      hours = (hours % 12) + (period === '1' ? 12 : 0);\n    }\n    const time = `${pad(hours)}:${minute}${this.seconds ? `:${second}` : ''}`;\n    const total = secondsOf(time);\n    if (total === null) return { value: null, error: '' };\n\n    const min = secondsOf(this.min);\n    const max = secondsOf(this.max);\n    if ((min !== null && total < min) || (max !== null && total > max)) {\n      return { value: null, error: strings().timeOutOfRange };\n    }\n    return { value: time, error: '' };\n  }\n\n  /** A number left at one digit is written out: 9 is 09. */\n  protected override completeOnBlur(segment: Segment, text: string): string | null {\n    if (!segment.spec || text.length !== 1) return null;\n    const value = Number(text);\n    return value < segment.spec.min ? null : pad(value);\n  }\n\n  protected override requiredMessage(): string {\n    return strings().timeRequired;\n  }\n}\n\ndefineElement('kt-time-input', KtTimeInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-time-input': KtTimeInput;\n  }\n}\n"],"names":["timeLayout","locale","twelve","format","dateFormat","parts","types","part","separator","period","hour","secondsOf","time","match","hours","minutes","seconds","pad","n","KtTimeInput","KtSegmentedField","cycle","changed","s","strings","periodFirst","periods","number","key","label","min","max","step","items","value","total","texts","minute","second","segment","text","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-toggle/kt-toggle.js

@@ -1,6 +1,6 @@
 import { css as d, nothing as h, html as u } from "lit";
 import { property as i, state as b } from "lit/decorators.js";
-import { K as n, d as p } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as n, d as p } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as f, s as v } from "../../../chunks/form-control-B74_EHtG.js";
 var g = Object.defineProperty, a = (s, t, l, k) => {

package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js

@@ -1,13 +1,13 @@
 import { css as d, nothing as f, html as s } from "lit";
 import { property as c } from "lit/decorators.js";
-import { K as p, d as u } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as p, d as u } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as h } from "../../../chunks/events-r51msXNf.js";
-import { s as b } from "../../../chunks/index-STEEvEP7.js";
+import { s as v } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
-var v = Object.defineProperty, m = (o, t, e, a) => {
+var b = Object.defineProperty, m = (o, t, e, a) => {
   for (var r = void 0, i = o.length - 1, l; i >= 0; i--)
     (l = o[i]) && (r = l(t, e, r) || r);
-  return r && v(t, e, r), r;
+  return r && b(t, e, r), r;
 };
 class n extends p {
   constructor() {
@@ -32,7 +32,7 @@ class n extends p {
         padding: 2px 6px;
         color: var(--text-muted);
         font: var(--font-normal-regular);
-        border-radius: 6px;
+        border-radius: calc(6px * var(--radius-scale, 1));
         text-decoration: none;
       }
 
@@ -64,7 +64,7 @@ class n extends p {
   }
   render() {
     const t = this.items.length - 1;
-    return s`<nav part="nav" aria-label=${this.label ?? b().breadcrumb}>
+    return s`<nav part="nav" aria-label=${this.label ?? v().breadcrumb}>
       ${this.items.map(
       (e, a) => a === t ? s`<span part="item" class="item current" aria-current="page">${e.label}</span>` : s`<a
                 part="item"

package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-breadcrumb.js","sources":["../../../../src/components/navigation/kt-breadcrumb/kt-breadcrumb.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtBreadcrumbItem {\n  readonly label: string;\n  readonly href?: string;\n}\n\n/**\n * A trail showing where the current page sits.\n *\n * The last entry is the current page: rendered as text, not a link, and marked\n * `aria-current=\"page\"`. A breadcrumb whose final item links to the page you\n * are already on is a dead control.\n *\n * @element kt-breadcrumb\n *\n * @csspart nav - The `<nav>`.\n * @csspart item - A trail entry.\n *\n * @fires kt-navigate - An entry was activated. `detail: { item, index }`.\n *   Cancel it to keep the browser from following the href.\n *\n * @example\n * ```js\n * trail.items = [\n *   { label: 'Home', href: '/' },\n *   { label: 'Entities', href: '/entities' },\n *   { label: 'Entity 4812' },\n * ];\n * ```\n */\nexport class KtBreadcrumb extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .item {\n        padding: 2px 6px;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        border-radius: 6px;\n        text-decoration: none;\n      }\n\n      a.item:hover {\n        color: var(--text-body);\n        background: var(--color-dark-18);\n        text-decoration: none;\n      }\n\n      a.item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 1px;\n      }\n\n      .current {\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n\n      .separator {\n        display: inline-flex;\n        color: var(--color-text-600);\n      }\n    `,\n  ];\n\n  /** The trail, root first. The last entry is the current page. */\n  @property({ attribute: false })\n  items: readonly KtBreadcrumbItem[] = [];\n\n  /** Accessible name for the navigation landmark. */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  private onSelect(event: MouseEvent, item: KtBreadcrumbItem, index: number): void {\n    // Let modified clicks through: they open a new tab, which is the user\n    // asking the browser for something we should not intercept.\n    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n    const proceed = emit(this, 'kt-navigate', { item, index });\n    if (!proceed.defaultPrevented) return;\n    event.preventDefault();\n  }\n\n  override render(): TemplateResult {\n    const lastIndex = this.items.length - 1;\n\n    return html`<nav part=\"nav\" aria-label=${this.label ?? strings().breadcrumb}>\n      ${this.items.map((item, index) =>\n        index === lastIndex\n          ? html`<span part=\"item\" class=\"item current\" aria-current=\"page\">${item.label}</span>`\n          : html`<a\n                part=\"item\"\n                class=\"item\"\n                href=${item.href ?? '#'}\n                @click=${(event: MouseEvent) => this.onSelect(event, item, index)}\n                >${item.label}</a\n              >\n              <span class=\"separator\" aria-hidden=\"true\">\n                <kt-icon name=\"chevron-right\" size=\"14\"></kt-icon>\n              </span>`,\n      )}\n      ${this.items.length === 0 ? nothing : ''}\n    </nav>`;\n  }\n}\n\ndefineElement('kt-breadcrumb', KtBreadcrumb);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-breadcrumb': KtBreadcrumb;\n  }\n}\n"],"names":["KtBreadcrumb","KtElement","css","event","item","index","emit","lastIndex","html","strings","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgDL,KAAA,QAAqC,CAAA,GAIrC,KAAA,QAA4B;AAAA,EAAA;AAAA,EAnD5B,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAyCF;AAAA,EAUQ,SAASC,GAAmBC,GAAwBC,GAAqB;AAM/E,IAHIF,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM,WAAW,KAGrE,CADYG,EAAK,MAAM,eAAe,EAAE,MAAAF,GAAM,OAAAC,GAAO,EAC5C,oBACbF,EAAM,eAAA;AAAA,EACR;AAAA,EAES,SAAyB;AAChC,UAAMI,IAAY,KAAK,MAAM,SAAS;AAEtC,WAAOC,+BAAkC,KAAK,SAASC,EAAA,EAAU,UAAU;AAAA,QACvE,KAAK,MAAM;AAAA,MAAI,CAACL,GAAMC,MACtBA,MAAUE,IACNC,+DAAkEJ,EAAK,KAAK,YAC5EI;AAAA;AAAA;AAAA,uBAGWJ,EAAK,QAAQ,GAAG;AAAA,yBACd,CAACD,MAAsB,KAAK,SAASA,GAAOC,GAAMC,CAAK,CAAC;AAAA,mBAC9DD,EAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAKtB;AAAA,QACC,KAAK,MAAM,WAAW,IAAIM,IAAU,EAAE;AAAA;AAAA,EAE5C;AACF;AArCEC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA/CnBZ,EAgDX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnDfZ,EAoDX,WAAA,OAAA;AAmCFa,EAAc,iBAAiBb,CAAY;"}
+{"version":3,"file":"kt-breadcrumb.js","sources":["../../../../src/components/navigation/kt-breadcrumb/kt-breadcrumb.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtBreadcrumbItem {\n  readonly label: string;\n  readonly href?: string;\n}\n\n/**\n * A trail showing where the current page sits.\n *\n * The last entry is the current page: rendered as text, not a link, and marked\n * `aria-current=\"page\"`. A breadcrumb whose final item links to the page you\n * are already on is a dead control.\n *\n * @element kt-breadcrumb\n *\n * @csspart nav - The `<nav>`.\n * @csspart item - A trail entry.\n *\n * @fires kt-navigate - An entry was activated. `detail: { item, index }`.\n *   Cancel it to keep the browser from following the href.\n *\n * @example\n * ```js\n * trail.items = [\n *   { label: 'Home', href: '/' },\n *   { label: 'Entities', href: '/entities' },\n *   { label: 'Entity 4812' },\n * ];\n * ```\n */\nexport class KtBreadcrumb extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .item {\n        padding: 2px 6px;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        border-radius: calc(6px * var(--radius-scale, 1));\n        text-decoration: none;\n      }\n\n      a.item:hover {\n        color: var(--text-body);\n        background: var(--color-dark-18);\n        text-decoration: none;\n      }\n\n      a.item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 1px;\n      }\n\n      .current {\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n\n      .separator {\n        display: inline-flex;\n        color: var(--color-text-600);\n      }\n    `,\n  ];\n\n  /** The trail, root first. The last entry is the current page. */\n  @property({ attribute: false })\n  items: readonly KtBreadcrumbItem[] = [];\n\n  /** Accessible name for the navigation landmark. */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  private onSelect(event: MouseEvent, item: KtBreadcrumbItem, index: number): void {\n    // Let modified clicks through: they open a new tab, which is the user\n    // asking the browser for something we should not intercept.\n    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n    const proceed = emit(this, 'kt-navigate', { item, index });\n    if (!proceed.defaultPrevented) return;\n    event.preventDefault();\n  }\n\n  override render(): TemplateResult {\n    const lastIndex = this.items.length - 1;\n\n    return html`<nav part=\"nav\" aria-label=${this.label ?? strings().breadcrumb}>\n      ${this.items.map((item, index) =>\n        index === lastIndex\n          ? html`<span part=\"item\" class=\"item current\" aria-current=\"page\">${item.label}</span>`\n          : html`<a\n                part=\"item\"\n                class=\"item\"\n                href=${item.href ?? '#'}\n                @click=${(event: MouseEvent) => this.onSelect(event, item, index)}\n                >${item.label}</a\n              >\n              <span class=\"separator\" aria-hidden=\"true\">\n                <kt-icon name=\"chevron-right\" size=\"14\"></kt-icon>\n              </span>`,\n      )}\n      ${this.items.length === 0 ? nothing : ''}\n    </nav>`;\n  }\n}\n\ndefineElement('kt-breadcrumb', KtBreadcrumb);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-breadcrumb': KtBreadcrumb;\n  }\n}\n"],"names":["KtBreadcrumb","KtElement","css","event","item","index","emit","lastIndex","html","strings","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgDL,KAAA,QAAqC,CAAA,GAIrC,KAAA,QAA4B;AAAA,EAAA;AAAA,EAnD5B,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAyCF;AAAA,EAUQ,SAASC,GAAmBC,GAAwBC,GAAqB;AAM/E,IAHIF,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM,WAAW,KAGrE,CADYG,EAAK,MAAM,eAAe,EAAE,MAAAF,GAAM,OAAAC,GAAO,EAC5C,oBACbF,EAAM,eAAA;AAAA,EACR;AAAA,EAES,SAAyB;AAChC,UAAMI,IAAY,KAAK,MAAM,SAAS;AAEtC,WAAOC,+BAAkC,KAAK,SAASC,EAAA,EAAU,UAAU;AAAA,QACvE,KAAK,MAAM;AAAA,MAAI,CAACL,GAAMC,MACtBA,MAAUE,IACNC,+DAAkEJ,EAAK,KAAK,YAC5EI;AAAA;AAAA;AAAA,uBAGWJ,EAAK,QAAQ,GAAG;AAAA,yBACd,CAACD,MAAsB,KAAK,SAASA,GAAOC,GAAMC,CAAK,CAAC;AAAA,mBAC9DD,EAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAKtB;AAAA,QACC,KAAK,MAAM,WAAW,IAAIM,IAAU,EAAE;AAAA;AAAA,EAE5C;AACF;AArCEC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA/CnBZ,EAgDX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnDfZ,EAoDX,WAAA,OAAA;AAmCFa,EAAc,iBAAiBb,CAAY;"}

package/dist/components/navigation/kt-header/kt-header.js

@@ -1,8 +1,8 @@
 import { css as c, nothing as u, html as m } from "lit";
 import { state as b, property as n } from "lit/decorators.js";
-import { K as d, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as d, d as f } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as p } from "../../../chunks/events-r51msXNf.js";
-import { s as h } from "../../../chunks/index-STEEvEP7.js";
+import { s as h } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-button/kt-button.js";
 var g = Object.defineProperty, a = (r, o, s, v) => {
   for (var e = void 0, i = r.length - 1, l; i >= 0; i--)

package/dist/components/navigation/kt-page-header/kt-page-header.js

@@ -1,6 +1,6 @@
 import { css as c, html as t, nothing as l } from "lit";
 import { property as s } from "lit/decorators.js";
-import { K as h, d as g } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as h, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
 var f = Object.defineProperty, o = (a, r, p, v) => {
   for (var e = void 0, n = a.length - 1, d; n >= 0; n--)
     (d = a[n]) && (e = d(r, p, e) || e);

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js

@@ -1,10 +1,10 @@
 import { css as b, nothing as c, html as p } from "lit";
 import { queryAll as v, property as n, state as m } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { K as f, d as g } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as f, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as x } from "../../../chunks/events-r51msXNf.js";
 import { a as y, s as k, b as w } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as $ } from "../../../chunks/index-STEEvEP7.js";
+import { s as $ } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
 var I = Object.defineProperty, s = (h, t, i, o) => {
   for (var e = void 0, r = h.length - 1, l; r >= 0; r--)