kanto-ds 1.2.0 → 1.4.0

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

@@ -0,0 +1,265 @@
+import { css as b, nothing as d, html as p } from "lit";
+import { property as a, queryAssignedElements as y } from "lit/decorators.js";
+import { K as h, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as m, s as k, b as w } from "../../../chunks/form-control-CxjBTt1c.js";
+import { s as f } from "../../../chunks/index-DSSLJirw.js";
+var x = Object.defineProperty, i = (c, e, r, s) => {
+  for (var t = void 0, o = c.length - 1, u; o >= 0; o--)
+    (u = c[o]) && (t = u(e, r, t) || t);
+  return t && x(e, r, t), t;
+};
+class l extends h {
+  constructor() {
+    super(...arguments), this.value = "", this.disabled = !1, this.checked = !1, this.tabbable = !1, this.invalid = !1, this.groupDisabled = !1;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      b`
+      :host {
+        display: block;
+        --radio-size: calc(var(--button-height) * 0.45);
+      }
+
+      .radio {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--gap-button);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        outline: none;
+        cursor: pointer;
+      }
+
+      .circle {
+        position: relative;
+        flex: none;
+        width: var(--radio-size);
+        height: var(--radio-size);
+        margin-top: calc((1lh - var(--radio-size)) / 2);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-full);
+        transition: border-color var(--duration-instant);
+      }
+
+      /* The dot: a fill inset by a third of the circle. */
+      .circle::after {
+        content: '';
+        position: absolute;
+        inset: 22%;
+        border-radius: var(--radius-full);
+        background-color: var(--color-primary-base);
+        transform: scale(0);
+        transition: transform var(--duration-fast);
+      }
+
+      .radio:hover .circle {
+        border-color: var(--text-muted);
+      }
+
+      .radio:focus-visible .circle {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .radio[aria-checked='true'] .circle {
+        border-color: var(--color-primary-base);
+      }
+      .radio[aria-checked='true'] .circle::after {
+        transform: scale(1);
+      }
+
+      :host([invalid]) .circle {
+        border-color: var(--color-danger-base);
+      }
+
+      :host([disabled]) .radio,
+      :host([group-disabled]) .radio {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      :host([disabled]) .circle,
+      :host([group-disabled]) .circle {
+        background-color: var(--color-dark-22);
+        border-color: var(--color-dark-24);
+      }
+      :host([disabled]) .circle::after,
+      :host([group-disabled]) .circle::after {
+        background-color: var(--text-disabled);
+      }
+    `
+    ];
+  }
+  get inactive() {
+    return this.disabled || this.groupDisabled;
+  }
+  focus(e) {
+    this.shadowRoot?.querySelector(".radio")?.focus(e);
+  }
+  render() {
+    return p`<div
+      part="base"
+      class="radio"
+      role="radio"
+      aria-checked=${this.checked ? "true" : "false"}
+      aria-disabled=${this.inactive ? "true" : d}
+      tabindex=${this.tabbable && !this.inactive ? 0 : -1}
+    >
+      <span part="circle" class="circle"></span>
+      <span class="text"><slot></slot></span>
+    </div>`;
+  }
+}
+i([
+  a({ type: String, reflect: !0 })
+], l.prototype, "value");
+i([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "checked");
+i([
+  a({ type: Boolean, attribute: !1 })
+], l.prototype, "tabbable");
+i([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "invalid");
+i([
+  a({ type: Boolean, reflect: !0, attribute: "group-disabled" })
+], l.prototype, "groupDisabled");
+class n extends h {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.value = null, this.name = "", this.label = "", this.disabled = !1, this.required = !1, this.orientation = "vertical", this.error = "", this.syncRadios = () => {
+      const e = this.enabled(), s = e.find((t) => t.value === this.value) ?? e[0];
+      for (const t of this.radios)
+        t.checked = t.value === this.value, t.tabbable = t === s, t.invalid = !!this.error, t.groupDisabled = this.disabled;
+    }, this.onClick = (e) => {
+      const r = e.composedPath().find((s) => s instanceof l);
+      !r || !this.enabled().includes(r) || (this.choose(r), r.focus());
+    }, this.onKeyDown = (e) => {
+      const r = this.enabled();
+      if (r.length === 0) return;
+      const s = e.composedPath().find((u) => u instanceof l), t = s ? r.indexOf(s) : -1;
+      let o;
+      if (e.key === "ArrowDown" || e.key === "ArrowRight")
+        o = r[(t + 1) % r.length];
+      else if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+        o = r[(t - 1 + r.length) % r.length];
+      else if (e.key === " " && s && t >= 0)
+        o = s;
+      else
+        return;
+      e.preventDefault(), o && (this.choose(o), this.updateComplete.then(() => o.focus()));
+    };
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      b`
+      :host {
+        display: block;
+      }
+
+      .group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+      }
+
+      :host([orientation='horizontal']) .group {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--gap-card);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= m(this), this.defaultValue = this.value, this.addEventListener("click", this.onClick), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.onClick), this.removeEventListener("keydown", this.onKeyDown);
+  }
+  willUpdate(e) {
+    if (e.has("value") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      k(this.internals, this.value);
+      const r = this.required && this.value === null;
+      w(
+        this.internals,
+        { valueMissing: r, customError: !!this.error },
+        this.error || (r ? f().selectOption : "")
+      );
+    }
+  }
+  updated() {
+    this.syncRadios();
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  focus(e) {
+    this.radios.find((r) => r.tabbable)?.focus(e);
+  }
+  enabled() {
+    return this.disabled ? [] : this.radios.filter((e) => !e.disabled);
+  }
+  choose(e) {
+    e.value !== this.value && (this.value = e.value, g(this, "kt-change", { value: this.value }));
+  }
+  render() {
+    return p`${this.error ? p`<span id="error-message" class="visually-hidden">${this.error}</span>` : d}
+      <div
+        part="base"
+        class="group"
+        role="radiogroup"
+        aria-label=${this.label || f().options}
+        aria-orientation=${this.orientation}
+        aria-required=${this.required ? "true" : d}
+        aria-invalid=${this.error ? "true" : d}
+        aria-disabled=${this.disabled ? "true" : d}
+        aria-describedby=${this.error ? "error-message" : d}
+      >
+        <slot @slotchange=${this.syncRadios}></slot>
+      </div>`;
+  }
+}
+i([
+  y({ selector: "kt-radio" })
+], n.prototype, "radios");
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "value");
+i([
+  a({ type: String })
+], n.prototype, "name");
+i([
+  a({ type: String })
+], n.prototype, "label");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "required");
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "orientation");
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "error");
+v("kt-radio", l);
+v("kt-radio-group", n);
+export {
+  l as KtRadio,
+  n as KtRadioGroup
+};
+//# sourceMappingURL=kt-radio-group.js.map

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

@@ -0,0 +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 } 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  @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  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.disabled ? [] : 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.disabled;\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.disabled ? '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","state","emit","queryAssignedElements","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-select/kt-select.d.ts

@@ -42,7 +42,7 @@ export declare class KtSelect extends KtElement {
     options: readonly KtOption[];
     /** The selected option's id, or `null`. */
     value: string | number | null;
-    placeholder: string;
+    placeholder: string | undefined;
     name: string;
     size: KtSelectSize;
     disabled: boolean;
@@ -54,7 +54,7 @@ export declare class KtSelect extends KtElement {
     /** Accessible name, when no `<kt-label-input>` wraps the control. */
     label: string;
     /** Shown when `options` is empty. */
-    emptyText: string;
+    emptyText: string | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;

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

@@ -1,19 +1,20 @@
-import { css as m, nothing as n, html as l } from "lit";
-import { state as g, property as r } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { K as u, d as y } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { u as x, e as v } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as w, s as k, b as $ } from "../../../chunks/form-control-CxjBTt1c.js";
-import { a as I, f, l as D, n as L, o as b } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { css as y, nothing as n, html as d } from "lit";
+import { state as m, property as o } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { K as v, d as x } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { u as w, e as f } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as k, s as $, b as I } from "../../../chunks/form-control-CxjBTt1c.js";
+import { a as D, f as b, l as L, n as S, o as g } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { s as l } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
-var S = Object.defineProperty, i = (h, e, o, a) => {
-  for (var s = void 0, c = h.length - 1, p; c >= 0; c--)
-    (p = h[c]) && (s = p(e, o, s) || s);
-  return s && S(e, o, s), s;
+var E = Object.defineProperty, i = (c, e, s, a) => {
+  for (var r = void 0, p = c.length - 1, u; p >= 0; p--)
+    (u = c[p]) && (r = u(e, s, r) || r);
+  return r && E(e, s, r), r;
 };
-class t extends u {
+class t extends v {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = x("kt-select-list"), this.open = !1, this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "Select", this.name = "", this.size = "medium", this.disabled = !1, this.required = !1, this.error = "", this.clearable = !0, this.label = "", this.emptyText = "No options available", this.onDocumentPointerDown = (e) => {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = w("kt-select-list"), this.open = !1, this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = void 0, this.name = "", this.size = "medium", this.disabled = !1, this.required = !1, this.error = "", this.clearable = !0, this.label = "", this.emptyText = void 0, this.onDocumentPointerDown = (e) => {
       e.composedPath().includes(this) || (this.open = !1);
     };
   }
@@ -22,9 +23,9 @@ class t extends u {
   }
   static {
     this.styles = [
-      u.styles,
-      I,
-      m`
+      v.styles,
+      D,
+      y`
       :host {
         position: relative;
         display: block;
@@ -137,19 +138,19 @@ class t extends u {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= w(this), this.defaultValue = this.value, document.addEventListener("pointerdown", this.onDocumentPointerDown);
+    super.connectedCallback(), this.internals ??= k(this), this.defaultValue = this.value, document.addEventListener("pointerdown", this.onDocumentPointerDown);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
   }
   willUpdate(e) {
-    if (e.has("value") || e.has("required") || e.has("error")) {
-      k(this.internals, this.value === null ? null : String(this.value));
-      const o = this.required && this.value === null;
-      $(
+    if (e.has("value") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      $(this.internals, this.value === null ? null : String(this.value));
+      const s = this.required && this.value === null;
+      I(
         this.internals,
-        { valueMissing: o, customError: !!this.error },
-        this.error || (o ? "Select an option." : "")
+        { valueMissing: s, customError: !!this.error },
+        this.error || (s ? l().selectOption : "")
       );
     }
   }
@@ -169,8 +170,8 @@ class t extends u {
   openList() {
     if (this.disabled) return;
     this.open = !0;
-    const e = this.options.findIndex((o) => o.id === this.value);
-    this.activeIndex = e >= 0 ? e : f(this.options);
+    const e = this.options.findIndex((s) => s.id === this.value);
+    this.activeIndex = e >= 0 ? e : b(this.options);
   }
   closeList() {
     this.open = !1, this.activeIndex = -1;
@@ -179,17 +180,17 @@ class t extends u {
     this.open ? this.closeList() : this.openList();
   }
   choose(e) {
-    e.disabled || (this.value = e.id, this.closeList(), this.focus(), v(this, "kt-change", { value: e.id, option: e }));
+    e.disabled || (this.value = e.id, this.closeList(), this.focus(), f(this, "kt-change", { value: e.id, option: e }));
   }
   clear(e) {
-    e.stopPropagation(), this.value = null, v(this, "kt-change", { value: null, option: null });
+    e.stopPropagation(), this.value = null, f(this, "kt-change", { value: null, option: null });
   }
   onKeyDown(e) {
     switch (e.key) {
       case "ArrowDown":
       case "ArrowUp": {
         if (e.preventDefault(), !this.open) return this.openList();
-        this.activeIndex = L(
+        this.activeIndex = S(
           this.options,
           this.activeIndex,
           e.key === "ArrowDown" ? 1 : -1
@@ -198,17 +199,17 @@ class t extends u {
       }
       case "Home":
         if (!this.open) return;
-        e.preventDefault(), this.activeIndex = f(this.options);
+        e.preventDefault(), this.activeIndex = b(this.options);
         return;
       case "End":
         if (!this.open) return;
-        e.preventDefault(), this.activeIndex = D(this.options);
+        e.preventDefault(), this.activeIndex = L(this.options);
         return;
       case "Enter":
       case " ": {
         if (e.preventDefault(), !this.open) return this.openList();
-        const o = this.options[this.activeIndex];
-        o && this.choose(o);
+        const s = this.options[this.activeIndex];
+        s && this.choose(s);
         return;
       }
       case "Escape":
@@ -223,9 +224,9 @@ class t extends u {
     return `${this.listId}-option-${e}`;
   }
   render() {
-    const e = this.selectedOption, o = this.clearable && e !== void 0 && !this.disabled;
-    return l`<div
-      class=${d({ open: this.open, error: !!this.error })}
+    const e = this.selectedOption, s = this.clearable && e !== void 0 && !this.disabled;
+    return d`<div
+      class=${h({ open: this.open, error: !!this.error })}
       @keydown=${this.onKeyDown}
     >
       <button
@@ -242,15 +243,15 @@ class t extends u {
         ?disabled=${this.disabled}
         @click=${this.toggleList}
       >
-        <span class=${d({ value: !0, placeholder: !e })}>
-          ${e ? b(e) : this.placeholder}
+        <span class=${h({ value: !0, placeholder: !e })}>
+          ${e ? g(e) : this.placeholder ?? l().select}
         </span>
         <span class="icons">
-          ${o ? l`<span
+          ${s ? d`<span
                   class="clear"
                   role="button"
                   tabindex="-1"
-                  aria-label="Clear"
+                  aria-label=${l().clear}
                   @click=${this.clear}
                 >
                   <kt-icon name="x" size="18"></kt-icon>
@@ -262,18 +263,18 @@ class t extends u {
       <ul
         part="popup"
         id=${this.listId}
-        class=${d({ popup: !0, open: this.open })}
+        class=${h({ popup: !0, open: this.open })}
         role="listbox"
-        aria-label=${this.label || this.placeholder}
+        aria-label=${this.label || (this.placeholder ?? l().select)}
       >
-        ${this.options.length === 0 ? l`<li class="empty">${this.emptyText}</li>` : this.options.map(
-      (a, s) => l`<li
+        ${this.options.length === 0 ? d`<li class="empty">${this.emptyText ?? l().noOptions}</li>` : this.options.map(
+      (a, r) => d`<li
                     part="option"
-                    id=${this.optionId(s)}
-                    class=${d({
+                    id=${this.optionId(r)}
+                    class=${h({
         option: !0,
         selected: a.id === this.value,
-        active: s === this.activeIndex,
+        active: r === this.activeIndex,
         disabled: !!a.disabled
       })}
                     role="option"
@@ -281,7 +282,7 @@ class t extends u {
                     aria-disabled=${a.disabled ? "true" : n}
                     @click=${() => this.choose(a)}
                   >
-                    ${b(a)}
+                    ${g(a)}
                   </li>`
     )}
       </ul>
@@ -289,45 +290,45 @@ class t extends u {
   }
 }
 i([
-  g()
+  m()
 ], t.prototype, "open");
 i([
-  g()
+  m()
 ], t.prototype, "activeIndex");
 i([
-  r({ attribute: !1 })
+  o({ attribute: !1 })
 ], t.prototype, "options");
 i([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "value");
 i([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "placeholder");
 i([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "name");
 i([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "size");
 i([
-  r({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled");
 i([
-  r({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "required");
 i([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "error");
 i([
-  r({ type: Boolean })
+  o({ type: Boolean })
 ], t.prototype, "clearable");
 i([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "label");
 i([
-  r({ type: String, attribute: "empty-text" })
+  o({ type: String, attribute: "empty-text" })
 ], t.prototype, "emptyText");
-y("kt-select", t);
+x("kt-select", t);
 export {
   t as KtSelect
 };