npm - kanto-ds - Versions diffs - 1.4.0 → 1.5.2 - Mend

kanto-ds 1.4.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

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

@@ -1,16 +1,16 @@
 import { css as d, nothing as h, html as u } from "lit";
-import { property as r } from "lit/decorators.js";
-import { K as n, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as m, s as g } from "../../../chunks/form-control-CxjBTt1c.js";
-var k = Object.defineProperty, s = (i, t, l, v) => {
-  for (var a = void 0, o = i.length - 1, c; o >= 0; o--)
-    (c = i[o]) && (a = c(t, l, a) || a);
-  return a && k(t, l, a), a;
+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 { 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) => {
+  for (var r = void 0, o = s.length - 1, c; o >= 0; o--)
+    (c = s[o]) && (r = c(t, l, r) || r);
+  return r && g(t, l, r), r;
 };
 class e extends n {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultChecked = !1, this.checked = !1, this.disabled = !1, this.size = "medium", this.name = "", this.value = "on", this.label = "";
+    super(...arguments), this.internals = null, this.defaultChecked = !1, this.checked = !1, this.disabled = !1, this.formDisabled = !1, this.size = "medium", this.name = "", this.value = "on", this.label = "";
   }
   static {
     this.formAssociated = !0;
@@ -87,10 +87,10 @@ class e extends n {
         left: calc(100% - var(--switch-inset) - var(--thumb-size));
       }
-      :host([disabled]) .track {
+      :host(:disabled) .track {
         background-color: var(--color-dark-22);
       }
-      :host([disabled]) .thumb {
+      :host(:disabled) .thumb {
         background-color: var(--color-text-500);
       }
@@ -100,25 +100,36 @@ class e extends n {
         cursor: pointer;
       }
-      :host([disabled]) .label {
+      :host(:disabled) .label {
         color: var(--text-disabled);
         cursor: not-allowed;
       }
     `
     ];
   }
+  /** Whether the control is off, by its own `disabled` or by its form. */
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= m(this), this.defaultChecked = this.checked, this.syncFormValue();
+    super.connectedCallback(), this.internals ??= f(this), this.defaultChecked = this.checked, this.syncFormValue();
   }
   willUpdate(t) {
     (t.has("checked") || t.has("value")) && this.syncFormValue();
   }
   syncFormValue() {
-    g(this.internals, this.checked ? this.value : null);
+    v(this.internals, this.checked ? this.value : null);
   }
   formResetCallback() {
     this.checked = this.defaultChecked;
   }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
   formStateRestoreCallback(t) {
     this.checked = t === this.value;
   }
@@ -126,7 +137,7 @@ class e extends n {
     this.shadowRoot?.querySelector("button")?.focus(t);
   }
   toggle() {
-    this.disabled || (this.checked = !this.checked, p(this, "kt-change", { checked: this.checked }));
+    this.inactive || (this.checked = !this.checked, m(this, "kt-change", { checked: this.checked }));
   }
   render() {
     return u`<button
@@ -136,7 +147,7 @@ class e extends n {
         aria-checked=${this.checked ? "true" : "false"}
         aria-label=${this.label || h}
         aria-labelledby=${this.label ? h : "label"}
-        ?disabled=${this.disabled}
+        ?disabled=${this.inactive}
         @click=${this.toggle}
       >
         <span part="track" class="track">
@@ -146,25 +157,28 @@ class e extends n {
       <span id="label" class="label" @click=${this.toggle}><slot></slot></span>`;
   }
 }
-s([
-  r({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "checked");
-s([
-  r({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
-s([
-  r({ type: String, reflect: !0 })
+a([
+  b()
+], e.prototype, "formDisabled");
+a([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "size");
-s([
-  r({ type: String })
+a([
+  i({ type: String })
 ], e.prototype, "name");
-s([
-  r({ type: String })
+a([
+  i({ type: String })
 ], e.prototype, "value");
-s([
-  r({ type: String })
+a([
+  i({ type: String })
 ], e.prototype, "label");
-b("kt-toggle", e);
+p("kt-toggle", e);
 export {
   e as KtToggle
 };

package/dist/components/forms/kt-toggle/kt-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-toggle.js","sources":["../../../../src/components/forms/kt-toggle/kt-toggle.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { attachFormInternals, setFormValue, type UsableInternals } from '#internal/form-control';\n\nexport type KtToggleSize = 'small' \| 'medium' \| 'large';\n\n/*\n An on/off switch.\n \n Sized off the button heights so a toggle lines up with the controls beside\n * it: the track is 1.8× the field height, the thumb is inset by 12% of it.\n * Change `--button-height` and the switch follows.\n \n @element kt-toggle\n \n @slot - Optional label, rendered beside the switch and clickable.\n \n @csspart base - The button carrying `role=\"switch\"`.\n * @csspart track - The track.\n * @csspart thumb - The sliding thumb.\n \n @fires kt-change - The state changed. `detail: { checked }`.\n \n @example\n * ```html\n * <kt-toggle checked>Notifications</kt-toggle>\n * <kt-toggle size=\"small\" disabled></kt-toggle>\n * ```\n /\nexport class KtToggle extends KtElement {\n static readonly formAssociated = true;\n\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n align-items: center;\n gap: var(--gap-button);\n\n / The whole switch derives from the field height, so it keeps its\n proportions at every breakpoint and every size. /\n --switch-height: var(--button-height);\n --switch-inset: calc(var(--switch-height) 0.12);\n --thumb-size: calc(var(--switch-height) - var(--switch-inset) * 2);\n }\n\n :host([size='small']) {\n --switch-height: var(--button-height-small);\n }\n :host([size='large']) {\n --switch-height: var(--button-height-large);\n }\n\n button {\n display: inline-flex;\n margin: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n appearance: none;\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n button:focus-visible .track {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n }\n\n .track {\n position: relative;\n display: inline-block;\n width: calc(var(--switch-height) * 1.8);\n height: var(--switch-height);\n background-color: var(--color-dark-24);\n border-radius: var(--radius-full);\n transition: background-color var(--duration-instant);\n }\n\n button[aria-checked='true'] .track {\n background-color: var(--color-primary-base);\n }\n\n .thumb {\n position: absolute;\n top: var(--switch-inset);\n left: var(--switch-inset);\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--color-white);\n border-radius: var(--radius-full);\n transition: left var(--duration-normal);\n }\n\n button[aria-checked='true'] .thumb {\n left: calc(100% - var(--switch-inset) - var(--thumb-size));\n }\n\n :host([disabled]) .track {\n background-color: var(--color-dark-22);\n }\n :host([disabled]) .thumb {\n background-color: var(--color-text-500);\n }\n\n .label {\n color: var(--text-body);\n font: var(--font-normal-regular);\n cursor: pointer;\n }\n\n :host([disabled]) .label {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n `,\n ];\n\n private internals: UsableInternals \| null = null;\n private defaultChecked = false;\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String, reflect: true })\n size: KtToggleSize = 'medium';\n\n @property({ type: String })\n name = '';\n\n /** Submitted when checked, as for a native checkbox. /\n @property({ type: String })\n value = 'on';\n\n /* Accessible name, when nothing is slotted. */\n @property({ type: String })\n label = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.internals ??= attachFormInternals(this);\n this.defaultChecked = this.checked;\n this.syncFormValue();\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('checked') \|\| changed.has('value')) this.syncFormValue();\n }\n\n private syncFormValue(): void {\n // An unchecked checkbox contributes nothing to a submission, not an empty\n // string — null is how ElementInternals says \"leave me out\".\n setFormValue(this.internals, this.checked ? this.value : null);\n }\n\n formResetCallback(): void {\n this.checked = this.defaultChecked;\n }\n\n formStateRestoreCallback(state: string): void {\n this.checked = state === this.value;\n }\n\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector('button')?.focus(options);\n }\n\n private toggle(): void {\n if (this.~~disabled~~) return;\n this.checked = !this.checked;\n emit(this, 'kt-change', { checked: this.checked });\n }\n\n override render(): TemplateResult {\n return html`<button\n part=\"base\"\n type=\"button\"\n role=\"switch\"\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-label=${this.label \|\| nothing}\n aria-labelledby=${this.label ? nothing : 'label'}\n ?disabled=${this.~~disabled~~}\n @click=${this.toggle}\n >\n <span part=\"track\" class=\"track\">\n <span part=\"thumb\" class=\"thumb\"></span>\n </span>\n </button>\n <span id=\"label\" class=\"label\" @click=${this.toggle}><slot></slot></span>`;\n }\n}\n\ndefineElement('kt-toggle', KtToggle);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-toggle': KtToggle;\n }\n}\n"],"names":["KtToggle","KtElement","css","attachFormInternals","changed","setFormValue","state","options","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AA+BO,MAAMA,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8FL,KAAQ,YAAoC,MAC5C,KAAQ,iBAAiB,IAGzB,KAAA,UAAU,IAGV,KAAA,WAAW,~~IAGX~~,KAAA,OAAqB,UAGrB,KAAA,OAAO,IAIP,KAAA,QAAQ,MAIR,KAAA,QAAQ;AAAA,EAAA;AAAA,~~EAlHR~~,OAAA;AAAA,SAAgB,iBAAiB;AAAA,EAAA;AAAA,EAEjC,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;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;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAuFF;AAAA,~~EAyBS~~,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,cAAcC,EAAoB,IAAI,GAC3C,KAAK,iBAAiB,KAAK,SAC3B,KAAK,cAAA;AAAA,EACP;AAAA,EAES,WAAWC,GAAqC;AACvD,KAAIA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,OAAO,MAAG,KAAK,cAAA;AAAA,EAC3D;AAAA,EAEQ,gBAAsB;AAG5B,IAAAC,EAAa,KAAK,WAAW,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAC/D;AAAA,EAEA,oBAA0B;AACxB,SAAK,UAAU,KAAK;AAAA,EACtB;AAAA,EAEA,yBAAyBC,GAAqB;AAC5C,SAAK,UAAUA,MAAU,KAAK;AAAA,EAChC;AAAA,EAES,MAAMC,GAA8B;AAC3C,SAAK,YAAY,cAAc,QAAQ,GAAG,MAAMA,CAAO;AAAA,EACzD;AAAA,EAEQ,SAAe;AACrB,IAAI,KAAK,aACT,KAAK,UAAU,CAAC,KAAK,SACrBC,EAAK,MAAM,aAAa,EAAE,SAAS,KAAK,SAAS;AAAA,EACnD;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK,UAAU,SAAS,OAAO;AAAA,qBACjC,KAAK,SAASC,CAAO;AAAA,0BAChB,KAAK,QAAQA,IAAU,OAAO;AAAA,oBACpC,KAAK,QAAQ;AAAA,iBAChB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8CAMkB,KAAK,MAAM;AAAA,EACvD;AACF;~~AAvEEC~~,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjG/BZ,EAkGX,WAAA,SAAA;~~AAGAW~~,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApG/BZ,EAqGX,WAAA,UAAA;~~AAGAW~~,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,~~GAvG9BZ~~,~~EAwGX~~,WAAA,MAAA;~~AAGAW~~,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GA1GfZ~~,~~EA2GX~~,WAAA,MAAA;~~AAIAW~~,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GA9GfZ~~,~~EA+GX~~,WAAA,OAAA;~~AAIAW~~,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAlHfZ~~,~~EAmHX~~,WAAA,OAAA;~~AAwDFa~~,EAAc,~~aAAab~~,CAAQ;"}
1	+ {"version":3,"file":"kt-toggle.js","sources":["../../../../src/components/forms/kt-toggle/kt-toggle.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { attachFormInternals, setFormValue, type UsableInternals } from '#internal/form-control';\n\nexport type KtToggleSize = 'small' \| 'medium' \| 'large';\n\n/*\n An on/off switch.\n \n Sized off the button heights so a toggle lines up with the controls beside\n * it: the track is 1.8× the field height, the thumb is inset by 12% of it.\n * Change `--button-height` and the switch follows.\n \n @element kt-toggle\n \n @slot - Optional label, rendered beside the switch and clickable.\n \n @csspart base - The button carrying `role=\"switch\"`.\n * @csspart track - The track.\n * @csspart thumb - The sliding thumb.\n \n @fires kt-change - The state changed. `detail: { checked }`.\n \n @example\n * ```html\n * <kt-toggle checked>Notifications</kt-toggle>\n * <kt-toggle size=\"small\" disabled></kt-toggle>\n * ```\n /\nexport class KtToggle extends KtElement {\n static readonly formAssociated = true;\n\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n align-items: center;\n gap: var(--gap-button);\n\n / The whole switch derives from the field height, so it keeps its\n proportions at every breakpoint and every size. /\n --switch-height: var(--button-height);\n --switch-inset: calc(var(--switch-height) 0.12);\n --thumb-size: calc(var(--switch-height) - var(--switch-inset) * 2);\n }\n\n :host([size='small']) {\n --switch-height: var(--button-height-small);\n }\n :host([size='large']) {\n --switch-height: var(--button-height-large);\n }\n\n button {\n display: inline-flex;\n margin: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n appearance: none;\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n button:focus-visible .track {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n }\n\n .track {\n position: relative;\n display: inline-block;\n width: calc(var(--switch-height) * 1.8);\n height: var(--switch-height);\n background-color: var(--color-dark-24);\n border-radius: var(--radius-full);\n transition: background-color var(--duration-instant);\n }\n\n button[aria-checked='true'] .track {\n background-color: var(--color-primary-base);\n }\n\n .thumb {\n position: absolute;\n top: var(--switch-inset);\n left: var(--switch-inset);\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--color-white);\n border-radius: var(--radius-full);\n transition: left var(--duration-normal);\n }\n\n button[aria-checked='true'] .thumb {\n left: calc(100% - var(--switch-inset) - var(--thumb-size));\n }\n\n :host(:disabled) .track {\n background-color: var(--color-dark-22);\n }\n :host(:disabled) .thumb {\n background-color: var(--color-text-500);\n }\n\n .label {\n color: var(--text-body);\n font: var(--font-normal-regular);\n cursor: pointer;\n }\n\n :host(:disabled) .label {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n `,\n ];\n\n private internals: UsableInternals \| null = null;\n private defaultChecked = false;\n\n @property({ type: Boolean, reflect: true })\n checked = false;\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: String, reflect: true })\n size: KtToggleSize = 'medium';\n\n @property({ type: String })\n name = '';\n\n /* Submitted when checked, as for a native checkbox. /\n @property({ type: String })\n value = 'on';\n\n /* Accessible name, when nothing is slotted. /\n @property({ type: String })\n label = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.internals ??= attachFormInternals(this);\n this.defaultChecked = this.checked;\n this.syncFormValue();\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('checked') \|\| changed.has('value')) this.syncFormValue();\n }\n\n private syncFormValue(): void {\n // An unchecked checkbox contributes nothing to a submission, not an empty\n // string — null is how ElementInternals says \"leave me out\".\n setFormValue(this.internals, this.checked ? this.value : null);\n }\n\n formResetCallback(): void {\n this.checked = this.defaultChecked;\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): void {\n this.checked = state === this.value;\n }\n\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector('button')?.focus(options);\n }\n\n private toggle(): void {\n if (this.inactive) return;\n this.checked = !this.checked;\n emit(this, 'kt-change', { checked: this.checked });\n }\n\n override render(): TemplateResult {\n return html`<button\n part=\"base\"\n type=\"button\"\n role=\"switch\"\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-label=${this.label \|\| nothing}\n aria-labelledby=${this.label ? nothing : 'label'}\n ?disabled=${this.inactive}\n @click=${this.toggle}\n >\n <span part=\"track\" class=\"track\">\n <span part=\"thumb\" class=\"thumb\"></span>\n </span>\n </button>\n <span id=\"label\" class=\"label\" @click=${this.toggle}><slot></slot></span>`;\n }\n}\n\ndefineElement('kt-toggle', KtToggle);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-toggle': KtToggle;\n }\n}\n"],"names":["KtToggle","KtElement","css","attachFormInternals","changed","setFormValue","disabled","state","options","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 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-E-tfJpGQ.js";
-import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as b } from "../../../chunks/index-DSSLJirw.js";
+import { K as p, d as u } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as h } from "../../../chunks/events-r51msXNf.js";
+import { s as b } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
 var v = Object.defineProperty, m = (o, t, e, a) => {
   for (var r = void 0, i = o.length - 1, l; i >= 0; i--)

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

@@ -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-E-tfJpGQ.js";
-import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as h } from "../../../chunks/index-DSSLJirw.js";
+import { K as d, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as p } from "../../../chunks/events-r51msXNf.js";
+import { s as h } from "../../../chunks/index-STEEvEP7.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 CHANGED Viewed

@@ -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-E-tfJpGQ.js";
+import { K as h, d as g } from "../../../chunks/kt-element-Djx2JcGl.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.d.ts CHANGED Viewed

@@ -47,6 +47,10 @@ export declare class KtSegmentedControl extends KtElement {
     size: KtSegmentedSize;
     orientation: 'horizontal' | 'vertical';
     disabled: boolean;
+    /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */
+    private formDisabled;
+    /** Whether the control is off, by its own `disabled` or by its form. */
+    private get inactive();
     /** Accessible name for the group. */
     label: string;
     name: string;
@@ -54,6 +58,11 @@ export declare class KtSegmentedControl extends KtElement {
     connectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
     formResetCallback(): void;
+    /**
+     * Called by the platform when the control's disabled state changes — its
+     * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+     */
+    formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: string): void;
     private get selectedIndex();
     private choose;

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

@@ -1,20 +1,20 @@
 import { css as b, nothing as c, html as p } from "lit";
-import { queryAll as v, property as n } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-import { K as f, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as x, s as y, b as k } from "../../../chunks/form-control-CxjBTt1c.js";
-import { s as $ } from "../../../chunks/index-DSSLJirw.js";
+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 { 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 "../../core/kt-icon/kt-icon.js";
-var w = Object.defineProperty, s = (u, t, i, o) => {
-  for (var e = void 0, r = u.length - 1, l; r >= 0; r--)
-    (l = u[r]) && (e = l(t, i, e) || e);
-  return e && w(t, i, e), e;
+var I = Object.defineProperty, s = (h, t, i, o) => {
+  for (var e = void 0, r = h.length - 1, l; r >= 0; r--)
+    (l = h[r]) && (e = l(t, i, e) || e);
+  return e && I(t, i, e), e;
 };
-const I = { small: 16, medium: 20, large: 24 };
+const S = { small: 16, medium: 20, large: 24 };
 class a extends f {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultValue = null, this.options = [], this.value = null, this.size = "medium", this.orientation = "horizontal", this.disabled = !1, this.label = "", this.name = "", this.required = !1;
+    super(...arguments), this.internals = null, this.defaultValue = null, this.options = [], this.value = null, this.size = "medium", this.orientation = "horizontal", this.disabled = !1, this.formDisabled = !1, this.label = "", this.name = "", this.required = !1;
   }
   static {
     this.formAssociated = !0;
@@ -50,7 +50,7 @@ class a extends f {
         width: fit-content;
       }
-      :host([disabled]) .track {
+      :host(:disabled) .track {
         opacity: 0.5;
         pointer-events: none;
       }
@@ -66,6 +66,10 @@ class a extends f {
         padding: 0 12px;
         color: var(--text-muted);
         font: var(--font-normal-regular);
+        /* Segments share the width equally from a basis of zero, so in a
+           container that shrinks to fit they would split a label over two
+           lines of a fixed-height button. */
+        white-space: nowrap;
         background-color: transparent;
         border: none;
         border-radius: calc(var(--border-radius) - 4px);
@@ -131,19 +135,30 @@ class a extends f {
     `
     ];
   }
+  /** Whether the control is off, by its own `disabled` or by its form. */
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= x(this), this.defaultValue = this.value;
+    super.connectedCallback(), this.internals ??= y(this), this.defaultValue = this.value;
   }
   willUpdate(t) {
     if (t.has("value") || t.has("required") || this.stringsChanged(t)) {
-      y(this.internals, this.value === null ? null : String(this.value));
+      k(this.internals, this.value === null ? null : String(this.value));
       const i = this.required && this.value === null;
-      k(this.internals, { valueMissing: i }, i ? $().selectOption : "");
+      w(this.internals, { valueMissing: i }, i ? $().selectOption : "");
     }
   }
   formResetCallback() {
     this.value = this.defaultValue;
   }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
   formStateRestoreCallback(t) {
     this.value = this.options.find((i) => String(i.value) === t)?.value ?? t;
   }
@@ -151,7 +166,7 @@ class a extends f {
     return this.options.findIndex((t) => t.value === this.value);
   }
   choose(t) {
-    this.disabled || t.disabled || this.value === t.value || (this.value = t.value, m(this, "kt-change", { value: t.value, option: t }));
+    this.inactive || t.disabled || this.value === t.value || (this.value = t.value, x(this, "kt-change", { value: t.value, option: t }));
   }
   /**
    * Radio-group semantics: the arrows move *and* select, wrapping at the ends
@@ -185,7 +200,7 @@ class a extends f {
     const t = this.selectedIndex, i = t >= 0 ? t : this.options.findIndex((o) => !o.disabled);
     return p`<div
       part="base"
-      class=${h({
+      class=${u({
       track: !0,
       [this.size]: !0,
       vertical: this.orientation === "vertical"
@@ -193,7 +208,7 @@ class a extends f {
       role="radiogroup"
       aria-label=${this.label || c}
       aria-orientation=${this.orientation}
-      aria-disabled=${this.disabled ? "true" : c}
+      aria-disabled=${this.inactive ? "true" : c}
       @keydown=${this.onKeyDown}
     >
       ${this.options.map((o, e) => {
@@ -202,7 +217,7 @@ class a extends f {
           part="option"
           type="button"
           role="radio"
-          class=${h({
+          class=${u({
         option: !0,
         [this.size]: !0,
         selected: r,
@@ -211,10 +226,10 @@ class a extends f {
           aria-checked=${r ? "true" : "false"}
           aria-label=${d ? o.icon ?? "" : c}
           tabindex=${e === i ? 0 : -1}
-          ?disabled=${this.disabled || o.disabled}
+          ?disabled=${this.inactive || o.disabled}
           @click=${() => this.choose(o)}
         >
-          ${o.icon ? p`<kt-icon name=${o.icon} size=${I[this.size]}></kt-icon>` : c}
+          ${o.icon ? p`<kt-icon name=${o.icon} size=${S[this.size]}></kt-icon>` : c}
           ${d ? c : p`<span class="text">${l}</span>`}
         </button>`;
     })}
@@ -239,6 +254,9 @@ s([
 s([
   n({ type: Boolean, reflect: !0 })
 ], a.prototype, "disabled");
+s([
+  m()
+], a.prototype, "formDisabled");
 s([
   n({ type: String })
 ], a.prototype, "label");

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-segmented-control.js","sources":["../../../../src/components/navigation/kt-segmented-control/kt-segmented-control.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtSegmentedSize = 'small' \| 'medium' \| 'large';\n\nexport interface KtSegmentedOption {\n readonly value: string \| number;\n readonly label?: string;\n readonly icon?: string;\n readonly disabled?: boolean;\n}\n\nconst ICON_SIZE: Record<KtSegmentedSize, number> = { small: 16, medium: 20, large: 24 };\n\n/*\n A small set of mutually exclusive choices, shown as one inset track with the\n * selected segment raised out of it.\n \n Use it for two to five options that all fit on screen — a view switch, a date\n * range. Past that, `<kt-select>`.\n \n Implemented as a radio group: one tab stop for the whole control, arrows to\n * move between segments. That is what a keyboard user expects here, and it\n * keeps a five-option control from adding five tab stops to the page.\n \n @element kt-segmented-control\n \n @csspart base - The track.\n * @csspart option - A segment.\n \n @fires kt-change - A segment was chosen. `detail: { value, option }`.\n \n @example\n * ```js\n * control.options = [\n * { value: 'day', label: 'Day' },\n * { value: 'week', label: 'Week' },\n * { value: 'month', label: 'Month' },\n * ];\n * control.value = 'week';\n * ```\n /\nexport class KtSegmentedControl extends KtElement {\n static readonly formAssociated = true;\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-block;\n }\n\n .track {\n display: inline-flex;\n box-sizing: border-box;\n gap: 4px;\n padding: 4px;\n background-color: var(--color-dark-14);\n border-radius: var(--border-radius);\n }\n\n .track.small {\n gap: 3px;\n padding: 3px;\n }\n .track.large {\n gap: 5px;\n padding: 5px;\n }\n\n .track.vertical {\n flex-direction: column;\n width: fit-content;\n }\n\n :host([disabled]) .track {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .option {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n gap: var(--gap-button);\n height: var(--button-height-small);\n padding: 0 12px;\n color: var(--text-muted);\n font: var(--font-normal-regular);\n background-color: transparent;\n border: none;\n border-radius: calc(var(--border-radius) - 4px);\n cursor: pointer;\n transition:\n background-color var(--duration-normal) var(--easing-standard),\n color var(--duration-normal) var(--easing-standard);\n }\n\n .option:hover:not(:disabled) {\n background-color: var(--color-dark-18);\n }\n .option:active:not(:disabled) {\n background-color: var(--surface-card);\n }\n\n .option.selected {\n color: var(--text-body);\n background-color: var(--surface-raised);\n }\n .option.selected:hover:not(:disabled) {\n background-color: var(--surface-hover);\n }\n\n .option:disabled {\n color: var(--text-disabled);\n background-color: transparent;\n pointer-events: none;\n }\n\n .option:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: -2px;\n }\n\n .option.small {\n height: 24px;\n gap: 6px;\n padding: 0 8px;\n font: var(--font-normal-small);\n }\n .option.large {\n height: var(--button-height);\n padding: 0 16px;\n font: var(--font-normal-medium);\n }\n\n .option.icon-only {\n width: var(--button-height-small);\n padding: 0;\n }\n .option.icon-only.small {\n width: 24px;\n }\n .option.icon-only.large {\n width: var(--button-height);\n }\n\n .text {\n flex: 1;\n text-align: center;\n }\n `,\n ];\n\n @queryAll('.option')\n private segments!: NodeListOf<HTMLButtonElement>;\n\n private internals: UsableInternals \| null = null;\n private defaultValue: string \| number \| null = null;\n\n @property({ attribute: false })\n options: readonly KtSegmentedOption[] = [];\n\n @property({ type: String })\n value: string \| number \| null = null;\n\n @property({ type: String, reflect: true })\n size: KtSegmentedSize = 'medium';\n\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Accessible name for the group. /\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.internals ??= attachFormInternals(this);\n this.defaultValue = this.value;\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('value') \|\| changed.has('required') \|\| this.stringsChanged(changed)) {\n setFormValue(this.internals, this.value === null ? null : String(this.value));\n\n const missing = this.required && this.value === null;\n setValidity(this.internals, { valueMissing: missing }, missing ? strings().selectOption : '');\n }\n }\n\n formResetCallback(): void {\n this.value = this.defaultValue;\n }\n\n formStateRestoreCallback(state: string): void {\n // The form stores a string; hand back the option's own value, which may be\n // a number.\n this.value = this.options.find((option) => String(option.value) === state)?.value ?? state;\n }\n\n private get selectedIndex(): number {\n return this.options.findIndex((option) => option.value === this.value);\n }\n\n private choose(option: KtSegmentedOption): void {\n if (this.disabled \|\| option.disabled \|\| this.value === option.value) return;\n this.value = option.value;\n emit(this, 'kt-change', { value: option.value, option });\n }\n\n /\n Radio-group semantics: the arrows move and select, wrapping at the ends\n * and skipping disabled segments.\n /\n private onKeyDown(event: KeyboardEvent): void {\n const forward = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n const back = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n let target: number \| undefined;\n if (event.key === forward) target = this.step(1);\n else if (event.key === back) target = this.step(-1);\n else if (event.key === 'Home') target = this.options.findIndex((o) => !o.disabled);\n else if (event.key === 'End')\n target = this.options.length - 1 - [...this.options].reverse().findIndex((o) => !o.disabled);\n else return;\n\n event.preventDefault();\n if (target === undefined \|\| target < 0) return;\n\n const option = this.options[target];\n if (!option) return;\n\n const index = target;\n this.choose(option);\n void this.updateComplete.then(() => this.segments[index]?.focus());\n }\n\n private step(direction: 1 \| -1): number \| undefined {\n const count = this.options.length;\n if (count === 0) return undefined;\n\n const from = this.selectedIndex < 0 ? (direction === 1 ? -1 : 0) : this.selectedIndex;\n for (let offset = 1; offset <= count; offset += 1) {\n const index = (((from + direction offset) % count) + count) % count;\n if (!this.options[index]?.disabled) return index;\n }\n return undefined;\n }\n\n override render(): TemplateResult {\n const selectedIndex = this.selectedIndex;\n // One tab stop for the whole group: the selected segment holds it, or the\n // first selectable one when nothing is chosen yet.\n const tabStop = selectedIndex >= 0 ? selectedIndex : this.options.findIndex((o) => !o.disabled);\n\n return html`<div\n part=\"base\"\n class=${classMap({\n track: true,\n [this.size]: true,\n vertical: this.orientation === 'vertical',\n })}\n role=\"radiogroup\"\n aria-label=${this.label \|\| nothing}\n aria-orientation=${this.orientation}\n aria-disabled=${this.disabled ? 'true' : nothing}\n @keydown=${this.onKeyDown}\n >\n ${this.options.map((option, index) => {\n const selected = option.value === this.value;\n const text = option.label ?? '';\n const iconOnly = Boolean(option.icon) && text === '';\n\n return html`<button\n part=\"option\"\n type=\"button\"\n role=\"radio\"\n class=${classMap({\n option: true,\n [this.size]: true,\n selected,\n 'icon-only': iconOnly,\n })}\n aria-checked=${selected ? 'true' : 'false'}\n aria-label=${iconOnly ? (option.icon ?? '') : nothing}\n tabindex=${index === tabStop ? 0 : -1}\n ?disabled=${this.disabled \|\| option.disabled}\n @click=${() => this.choose(option)}\n >\n ${\n option.icon\n ? html`<kt-icon name=${option.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing\n }\n ${iconOnly ? nothing : html`<span class=\"text\">${text}</span>`}\n </button>`;\n })}\n </div>`;\n }\n}\n\ndefineElement('kt-segmented-control', KtSegmentedControl);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-segmented-control': KtSegmentedControl;\n }\n}\n"],"names":["ICON_SIZE","KtSegmentedControl","KtElement","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","state","option","emit","event","forward","back","target","o","index","direction","count","from","offset","selectedIndex","tabStop","html","classMap","nothing","selected","text","iconOnly","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-segmented-control.js","sources":["../../../../src/components/navigation/kt-segmented-control/kt-segmented-control.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtSegmentedSize = 'small' \| 'medium' \| 'large';\n\nexport interface KtSegmentedOption {\n readonly value: string \| number;\n readonly label?: string;\n readonly icon?: string;\n readonly disabled?: boolean;\n}\n\nconst ICON_SIZE: Record<KtSegmentedSize, number> = { small: 16, medium: 20, large: 24 };\n\n/*\n A small set of mutually exclusive choices, shown as one inset track with the\n * selected segment raised out of it.\n \n Use it for two to five options that all fit on screen — a view switch, a date\n * range. Past that, `<kt-select>`.\n \n Implemented as a radio group: one tab stop for the whole control, arrows to\n * move between segments. That is what a keyboard user expects here, and it\n * keeps a five-option control from adding five tab stops to the page.\n \n @element kt-segmented-control\n \n @csspart base - The track.\n * @csspart option - A segment.\n \n @fires kt-change - A segment was chosen. `detail: { value, option }`.\n \n @example\n * ```js\n * control.options = [\n * { value: 'day', label: 'Day' },\n * { value: 'week', label: 'Week' },\n * { value: 'month', label: 'Month' },\n * ];\n * control.value = 'week';\n * ```\n /\nexport class KtSegmentedControl extends KtElement {\n static readonly formAssociated = true;\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-block;\n }\n\n .track {\n display: inline-flex;\n box-sizing: border-box;\n gap: 4px;\n padding: 4px;\n background-color: var(--color-dark-14);\n border-radius: var(--border-radius);\n }\n\n .track.small {\n gap: 3px;\n padding: 3px;\n }\n .track.large {\n gap: 5px;\n padding: 5px;\n }\n\n .track.vertical {\n flex-direction: column;\n width: fit-content;\n }\n\n :host(:disabled) .track {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .option {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n gap: var(--gap-button);\n height: var(--button-height-small);\n padding: 0 12px;\n color: var(--text-muted);\n font: var(--font-normal-regular);\n / Segments share the width equally from a basis of zero, so in a\n container that shrinks to fit they would split a label over two\n lines of a fixed-height button. /\n white-space: nowrap;\n background-color: transparent;\n border: none;\n border-radius: calc(var(--border-radius) - 4px);\n cursor: pointer;\n transition:\n background-color var(--duration-normal) var(--easing-standard),\n color var(--duration-normal) var(--easing-standard);\n }\n\n .option:hover:not(:disabled) {\n background-color: var(--color-dark-18);\n }\n .option:active:not(:disabled) {\n background-color: var(--surface-card);\n }\n\n .option.selected {\n color: var(--text-body);\n background-color: var(--surface-raised);\n }\n .option.selected:hover:not(:disabled) {\n background-color: var(--surface-hover);\n }\n\n .option:disabled {\n color: var(--text-disabled);\n background-color: transparent;\n pointer-events: none;\n }\n\n .option:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: -2px;\n }\n\n .option.small {\n height: 24px;\n gap: 6px;\n padding: 0 8px;\n font: var(--font-normal-small);\n }\n .option.large {\n height: var(--button-height);\n padding: 0 16px;\n font: var(--font-normal-medium);\n }\n\n .option.icon-only {\n width: var(--button-height-small);\n padding: 0;\n }\n .option.icon-only.small {\n width: 24px;\n }\n .option.icon-only.large {\n width: var(--button-height);\n }\n\n .text {\n flex: 1;\n text-align: center;\n }\n `,\n ];\n\n @queryAll('.option')\n private segments!: NodeListOf<HTMLButtonElement>;\n\n private internals: UsableInternals \| null = null;\n private defaultValue: string \| number \| null = null;\n\n @property({ attribute: false })\n options: readonly KtSegmentedOption[] = [];\n\n @property({ type: String })\n value: string \| number \| null = null;\n\n @property({ type: String, reflect: true })\n size: KtSegmentedSize = 'medium';\n\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\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 /* Accessible name for the group. /\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.internals ??= attachFormInternals(this);\n this.defaultValue = this.value;\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('value') \|\| changed.has('required') \|\| this.stringsChanged(changed)) {\n setFormValue(this.internals, this.value === null ? null : String(this.value));\n\n const missing = this.required && this.value === null;\n setValidity(this.internals, { valueMissing: missing }, missing ? strings().selectOption : '');\n }\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): void {\n // The form stores a string; hand back the option's own value, which may be\n // a number.\n this.value = this.options.find((option) => String(option.value) === state)?.value ?? state;\n }\n\n private get selectedIndex(): number {\n return this.options.findIndex((option) => option.value === this.value);\n }\n\n private choose(option: KtSegmentedOption): void {\n if (this.inactive \|\| option.disabled \|\| this.value === option.value) return;\n this.value = option.value;\n emit(this, 'kt-change', { value: option.value, option });\n }\n\n /\n Radio-group semantics: the arrows move and select, wrapping at the ends\n * and skipping disabled segments.\n /\n private onKeyDown(event: KeyboardEvent): void {\n const forward = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n const back = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n let target: number \| undefined;\n if (event.key === forward) target = this.step(1);\n else if (event.key === back) target = this.step(-1);\n else if (event.key === 'Home') target = this.options.findIndex((o) => !o.disabled);\n else if (event.key === 'End')\n target = this.options.length - 1 - [...this.options].reverse().findIndex((o) => !o.disabled);\n else return;\n\n event.preventDefault();\n if (target === undefined \|\| target < 0) return;\n\n const option = this.options[target];\n if (!option) return;\n\n const index = target;\n this.choose(option);\n void this.updateComplete.then(() => this.segments[index]?.focus());\n }\n\n private step(direction: 1 \| -1): number \| undefined {\n const count = this.options.length;\n if (count === 0) return undefined;\n\n const from = this.selectedIndex < 0 ? (direction === 1 ? -1 : 0) : this.selectedIndex;\n for (let offset = 1; offset <= count; offset += 1) {\n const index = (((from + direction offset) % count) + count) % count;\n if (!this.options[index]?.disabled) return index;\n }\n return undefined;\n }\n\n override render(): TemplateResult {\n const selectedIndex = this.selectedIndex;\n // One tab stop for the whole group: the selected segment holds it, or the\n // first selectable one when nothing is chosen yet.\n const tabStop = selectedIndex >= 0 ? selectedIndex : this.options.findIndex((o) => !o.disabled);\n\n return html`<div\n part=\"base\"\n class=${classMap({\n track: true,\n [this.size]: true,\n vertical: this.orientation === 'vertical',\n })}\n role=\"radiogroup\"\n aria-label=${this.label \|\| nothing}\n aria-orientation=${this.orientation}\n aria-disabled=${this.inactive ? 'true' : nothing}\n @keydown=${this.onKeyDown}\n >\n ${this.options.map((option, index) => {\n const selected = option.value === this.value;\n const text = option.label ?? '';\n const iconOnly = Boolean(option.icon) && text === '';\n\n return html`<button\n part=\"option\"\n type=\"button\"\n role=\"radio\"\n class=${classMap({\n option: true,\n [this.size]: true,\n selected,\n 'icon-only': iconOnly,\n })}\n aria-checked=${selected ? 'true' : 'false'}\n aria-label=${iconOnly ? (option.icon ?? '') : nothing}\n tabindex=${index === tabStop ? 0 : -1}\n ?disabled=${this.inactive \|\| option.disabled}\n @click=${() => this.choose(option)}\n >\n ${\n option.icon\n ? html`<kt-icon name=${option.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing\n }\n ${iconOnly ? nothing : html`<span class=\"text\">${text}</span>`}\n </button>`;\n })}\n </div>`;\n }\n}\n\ndefineElement('kt-segmented-control', KtSegmentedControl);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-segmented-control': KtSegmentedControl;\n }\n}\n"],"names":["ICON_SIZE","KtSegmentedControl","KtElement","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","option","emit","event","forward","back","target","o","index","direction","count","from","offset","selectedIndex","tabStop","html","classMap","nothing","selected","text","iconOnly","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { css as y, html as a, nothing as n } from "lit";
 import { property as c, state as x } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { styleMap as $ } from "lit/directives/style-map.js";
-import { K as b, d as k } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as w } from "../../../chunks/index-DSSLJirw.js";
+import { K as b, d as k } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as g } from "../../../chunks/events-r51msXNf.js";
+import { s as w } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-badge/kt-badge.js";
 var A = Object.defineProperty, d = (p, e, t, o) => {

package/dist/components/navigation/kt-tabs/kt-tabs.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { css as u, html as l, nothing as p } from "lit";
 import { queryAll as h, property as n } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import { K as c, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
+import { K as c, d as v } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as m } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
 var x = Object.defineProperty, i = (d, e, t, r) => {

package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { css as p, html as c, nothing as n } from "lit";
 import { property as o } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { K as u, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as v } from "../../../chunks/events-Bjl5Zmmq.js";
+import { K as u, d as g } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as v } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 var m = Object.defineProperty, r = (l, e, i, s) => {
   for (var a = void 0, d = l.length - 1, h; d >= 0; d--)

package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js CHANGED Viewed

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

package/dist/components/overlays/kt-collapsible/kt-collapsible.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as d, nothing as m, html as c } from "lit";
 import { property as n } from "lit/decorators.js";
-import { K as p, d as u } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
+import { K as p, d as u } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as f } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 var h = Object.defineProperty, i = (a, o, t, y) => {
   for (var e = void 0, s = a.length - 1, l; s >= 0; s--)

package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js CHANGED Viewed

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

package/dist/components/overlays/kt-dropdown/kt-dropdown.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import { type KtOption } from '#internal/listbox';
 export type KtDropdownPlacement = 'bottom' | 'top';
@@ -32,6 +32,7 @@ export declare class KtDropdown extends KtElement {
     private open;
     /** Where the panel actually landed, after checking the room available. */
     private placement;
+    private floating;
     /** Menu rows. Leave empty and slot into `panel` for custom content. */
     options: readonly KtOption[];
     /** Marks one row as current. */
@@ -47,13 +48,14 @@ export declare class KtDropdown extends KtElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
-     * Flips the panel above the trigger when there is not enough room below,
-     * preferring whichever side has more space if neither fits.
+     * The outside click and Escape a panel reacts to — only while it is
+     * open. A page of closed menus should not run a handler per menu on every
+     * click and keystroke.
      */
-    private reposition;
+    private listen;
     private onDocumentPointerDown;
     private onDocumentKeyDown;
-    updated(): void;
+    updated(changed: PropertyValues): void;
     /**
      * Puts the popup state on the slotted trigger — the element that takes focus,
      * so the one a screen reader announces. A `<kt-button>` gets it through its