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

kanto-ds 1.5.2 → 1.6.0

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 (125) hide show

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-Djx2JcGl.js";
+import { K as b, d as k } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as g } from "../../../chunks/events-r51msXNf.js";
-import { s as w } from "../../../chunks/index-STEEvEP7.js";
+import { s as w } from "../../../chunks/index-TWJzttLX.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,7 +1,7 @@
 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-Djx2JcGl.js";
+import { K as c, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
@@ -76,7 +76,7 @@ class o extends c {
       .tab:focus-visible {
         outline: var(--outline-width) solid var(--color-primary-base);
         outline-offset: 2px;
-        border-radius: 4px;
+        border-radius: calc(4px * var(--radius-scale, 1));
       }
       .loading {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-tabs.js","sources":["../../../../src/components/navigation/kt-tabs/kt-tabs.ts"],"sourcesContent":["import { css, html, nothing, 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 '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport interface KtTab {\n readonly value: string \| number;\n readonly label?: string;\n /** Lucide icon name, kebab-case. /\n readonly icon?: string;\n readonly disabled?: boolean;\n /* id of the element this tab controls, for `aria-controls`. /\n readonly panel?: string;\n}\n\n/\n An underlined tab bar.\n \n Against `<kt-segmented-control>`: a segmented control picks a value — a\n * date range, a unit — and sits inside a form or a toolbar. Tabs switch which\n * region of the page you are looking at, and read as part of the page\n * structure rather than as a control on it. The shapes say so: an inset track\n * with a raised pill, versus a rule with one segment underlined.\n \n Like the segmented control, this only manages selection. Swapping the panel\n * is the consumer's business.\n \n @element kt-tabs\n \n @csspart base - The tablist.\n * @csspart tab - One tab.\n \n @fires kt-change - A tab was selected. `detail: { value, tab }`.\n \n @example\n * ```js\n * tabs.tabs = [\n * { value: 'usage', label: 'Usage' },\n * { value: 'api', label: 'API', icon: 'code' },\n * ];\n * ```\n /\nexport class KtTabs extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .tablist {\n display: flex;\n gap: var(--gap-drag-drop);\n border-bottom: var(--border-width) solid var(--border-subtle);\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .tablist::-webkit-scrollbar {\n display: none;\n }\n\n :host([disabled]) .tablist {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n / The -1px pulls the active underline over the container's rule so the\n two read as one line rather than two stacked ones. /\n margin-bottom: calc(var(--border-width) -1);\n padding: 10px 2px;\n color: var(--text-muted);\n font: var(--font-normal-medium);\n white-space: nowrap;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n transition:\n color var(--duration-instant),\n border-color var(--duration-instant);\n }\n\n .tab:hover:not(:disabled) {\n color: var(--text-body);\n }\n\n .tab.selected {\n color: var(--text-body);\n border-bottom-color: var(--color-primary-base);\n }\n\n .tab:disabled {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n\n .tab:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n .loading {\n display: flex;\n gap: var(--gap-drag-drop);\n padding: 10px 0;\n }\n `,\n ];\n\n @queryAll('.tab')\n private tabElements!: NodeListOf<HTMLButtonElement>;\n\n /** The tabs to show. A property: this is data. /\n @property({ attribute: false })\n tabs: readonly KtTab[] = [];\n\n /* The selected tab's value. /\n @property({ type: String })\n value: string \| number \| null = null;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Renders placeholder tabs instead of the real ones. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /* Accessible name for the tablist. /\n @property({ type: String })\n label = '';\n\n private get selectedIndex(): number {\n return this.tabs.findIndex((tab) => tab.value === this.value);\n }\n\n private select(tab: KtTab): void {\n if (tab.disabled \|\| this.value === tab.value) return;\n this.value = tab.value;\n emit(this, 'kt-change', { value: tab.value, tab });\n }\n\n /* Moves to the next selectable tab in `direction`, wrapping at both ends. /\n private step(direction: 1 \| -1): number \| undefined {\n const count = this.tabs.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.tabs[index]?.disabled) return index;\n }\n return undefined;\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n let target: number \| undefined;\n\n if (event.key === 'ArrowRight') target = this.step(1);\n else if (event.key === 'ArrowLeft') target = this.step(-1);\n else if (event.key === 'Home') target = this.tabs.findIndex((tab) => !tab.disabled);\n else if (event.key === 'End')\n target = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((tab) => !tab.disabled);\n else return;\n\n event.preventDefault();\n if (target === undefined \|\| target < 0) return;\n\n const tab = this.tabs[target];\n if (!tab) return;\n\n const index = target;\n this.select(tab);\n void this.updateComplete.then(() => this.tabElements[index]?.focus());\n }\n\n override render(): TemplateResult {\n if (this.loading) {\n return html`<div class=\"loading\" aria-hidden=\"true\">\n ${[0, 1, 2].map(() => html`<kt-skeleton variant=\"rect\" width=\"64px\" height=\"22px\"></kt-skeleton>`)}\n </div>`;\n }\n\n const selectedIndex = this.selectedIndex;\n // One tab stop for the whole bar, as a tablist should have.\n const tabStop = selectedIndex >= 0 ? selectedIndex : this.tabs.findIndex((t) => !t.disabled);\n\n return html`<div\n part=\"base\"\n class=\"tablist\"\n role=\"tablist\"\n aria-label=${this.label \|\| nothing}\n @keydown=${this.onKeyDown}\n >\n ${this.tabs.map((tab, index) => {\n const selected = tab.value === this.value;\n\n return html`<button\n part=\"tab\"\n type=\"button\"\n role=\"tab\"\n class=${classMap({ tab: true, selected })}\n aria-selected=${selected ? 'true' : 'false'}\n aria-controls=${tab.panel ?? nothing}\n tabindex=${index === tabStop ? 0 : -1}\n ?disabled=${this.disabled \|\| tab.disabled}\n @click=${() => this.select(tab)}\n >\n ${tab.icon ? html`<kt-icon name=${tab.icon} size=\"16\"></kt-icon>` : nothing}\n ${tab.label ?? String(tab.value)}\n </button>`;\n })}\n </div>`;\n }\n}\n\ndefineElement('kt-tabs', KtTabs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-tabs': KtTabs;\n }\n}\n"],"names":["KtTabs","KtElement","css","tab","emit","direction","count","from","offset","index","event","target","html","selectedIndex","tabStop","t","nothing","selected","classMap","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-tabs.js","sources":["../../../../src/components/navigation/kt-tabs/kt-tabs.ts"],"sourcesContent":["import { css, html, nothing, 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 '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport interface KtTab {\n readonly value: string \| number;\n readonly label?: string;\n /** Lucide icon name, kebab-case. /\n readonly icon?: string;\n readonly disabled?: boolean;\n /* id of the element this tab controls, for `aria-controls`. /\n readonly panel?: string;\n}\n\n/\n An underlined tab bar.\n \n Against `<kt-segmented-control>`: a segmented control picks a value — a\n * date range, a unit — and sits inside a form or a toolbar. Tabs switch which\n * region of the page you are looking at, and read as part of the page\n * structure rather than as a control on it. The shapes say so: an inset track\n * with a raised pill, versus a rule with one segment underlined.\n \n Like the segmented control, this only manages selection. Swapping the panel\n * is the consumer's business.\n \n @element kt-tabs\n \n @csspart base - The tablist.\n * @csspart tab - One tab.\n \n @fires kt-change - A tab was selected. `detail: { value, tab }`.\n \n @example\n * ```js\n * tabs.tabs = [\n * { value: 'usage', label: 'Usage' },\n * { value: 'api', label: 'API', icon: 'code' },\n * ];\n * ```\n /\nexport class KtTabs extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .tablist {\n display: flex;\n gap: var(--gap-drag-drop);\n border-bottom: var(--border-width) solid var(--border-subtle);\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .tablist::-webkit-scrollbar {\n display: none;\n }\n\n :host([disabled]) .tablist {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n / The -1px pulls the active underline over the container's rule so the\n two read as one line rather than two stacked ones. /\n margin-bottom: calc(var(--border-width) -1);\n padding: 10px 2px;\n color: var(--text-muted);\n font: var(--font-normal-medium);\n white-space: nowrap;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n transition:\n color var(--duration-instant),\n border-color var(--duration-instant);\n }\n\n .tab:hover:not(:disabled) {\n color: var(--text-body);\n }\n\n .tab.selected {\n color: var(--text-body);\n border-bottom-color: var(--color-primary-base);\n }\n\n .tab:disabled {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n\n .tab:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: calc(4px * var(--radius-scale, 1));\n }\n\n .loading {\n display: flex;\n gap: var(--gap-drag-drop);\n padding: 10px 0;\n }\n `,\n ];\n\n @queryAll('.tab')\n private tabElements!: NodeListOf<HTMLButtonElement>;\n\n /** The tabs to show. A property: this is data. /\n @property({ attribute: false })\n tabs: readonly KtTab[] = [];\n\n /* The selected tab's value. /\n @property({ type: String })\n value: string \| number \| null = null;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Renders placeholder tabs instead of the real ones. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /* Accessible name for the tablist. /\n @property({ type: String })\n label = '';\n\n private get selectedIndex(): number {\n return this.tabs.findIndex((tab) => tab.value === this.value);\n }\n\n private select(tab: KtTab): void {\n if (tab.disabled \|\| this.value === tab.value) return;\n this.value = tab.value;\n emit(this, 'kt-change', { value: tab.value, tab });\n }\n\n /* Moves to the next selectable tab in `direction`, wrapping at both ends. /\n private step(direction: 1 \| -1): number \| undefined {\n const count = this.tabs.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.tabs[index]?.disabled) return index;\n }\n return undefined;\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n let target: number \| undefined;\n\n if (event.key === 'ArrowRight') target = this.step(1);\n else if (event.key === 'ArrowLeft') target = this.step(-1);\n else if (event.key === 'Home') target = this.tabs.findIndex((tab) => !tab.disabled);\n else if (event.key === 'End')\n target = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((tab) => !tab.disabled);\n else return;\n\n event.preventDefault();\n if (target === undefined \|\| target < 0) return;\n\n const tab = this.tabs[target];\n if (!tab) return;\n\n const index = target;\n this.select(tab);\n void this.updateComplete.then(() => this.tabElements[index]?.focus());\n }\n\n override render(): TemplateResult {\n if (this.loading) {\n return html`<div class=\"loading\" aria-hidden=\"true\">\n ${[0, 1, 2].map(() => html`<kt-skeleton variant=\"rect\" width=\"64px\" height=\"22px\"></kt-skeleton>`)}\n </div>`;\n }\n\n const selectedIndex = this.selectedIndex;\n // One tab stop for the whole bar, as a tablist should have.\n const tabStop = selectedIndex >= 0 ? selectedIndex : this.tabs.findIndex((t) => !t.disabled);\n\n return html`<div\n part=\"base\"\n class=\"tablist\"\n role=\"tablist\"\n aria-label=${this.label \|\| nothing}\n @keydown=${this.onKeyDown}\n >\n ${this.tabs.map((tab, index) => {\n const selected = tab.value === this.value;\n\n return html`<button\n part=\"tab\"\n type=\"button\"\n role=\"tab\"\n class=${classMap({ tab: true, selected })}\n aria-selected=${selected ? 'true' : 'false'}\n aria-controls=${tab.panel ?? nothing}\n tabindex=${index === tabStop ? 0 : -1}\n ?disabled=${this.disabled \|\| tab.disabled}\n @click=${() => this.select(tab)}\n >\n ${tab.icon ? html`<kt-icon name=${tab.icon} size=\"16\"></kt-icon>` : nothing}\n ${tab.label ?? String(tab.value)}\n </button>`;\n })}\n </div>`;\n }\n}\n\ndefineElement('kt-tabs', KtTabs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-tabs': KtTabs;\n }\n}\n"],"names":["KtTabs","KtElement","css","tab","emit","direction","count","from","offset","index","event","target","html","selectedIndex","tabStop","t","nothing","selected","classMap","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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-Djx2JcGl.js";
+import { K as u, d as g } from "../../../chunks/kt-element-T0VbIBNp.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) => {

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-Djx2JcGl.js";
+import { K as d, d as b } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as p } from "../../../chunks/events-r51msXNf.js";
-import { s as v } from "../../../chunks/index-STEEvEP7.js";
+import { s as v } from "../../../chunks/index-TWJzttLX.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,9 +1,9 @@
 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-Djx2JcGl.js";
+import { K as p, d as u } from "../../../chunks/kt-element-T0VbIBNp.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) => {
+var h = Object.defineProperty, i = (a, o, t, v) => {
   for (var e = void 0, s = a.length - 1, l; s >= 0; s--)
     (l = a[s]) && (e = l(o, t, e) || e);
   return e && h(o, t, e), e;
@@ -51,7 +51,7 @@ class r extends p {
       summary:focus-visible {
         outline: var(--outline-width) solid var(--color-primary-base);
         outline-offset: 2px;
-        border-radius: 4px;
+        border-radius: calc(4px * var(--radius-scale, 1));
       }
       .chevron {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-collapsible.js","sources":["../../../../src/components/overlays/kt-collapsible/kt-collapsible.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 '../../core/kt-icon/kt-icon.js';\n\n/*\n A section that folds away.\n \n Built on `<details>`, which means it works before the JavaScript loads,\n * survives find-in-page — the browser opens a closed section to reveal a match —\n * and needs no ARIA of its own.\n \n @element kt-collapsible\n \n @slot - The contents.\n * @slot summary - Replaces the `heading` attribute.\n \n @csspart base - The `<details>`.\n * @csspart summary - The clickable row.\n * @csspart content - The revealed panel.\n \n @fires kt-toggle - Opened or closed. `detail: { open }`.\n \n @example\n * ```html\n * <kt-collapsible heading=\"Notifications\" open>\n * <kt-toggle checked>Email me about mentions</kt-toggle>\n * </kt-collapsible>\n * ```\n /\nexport class KtCollapsible extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n details {\n border-bottom: var(--border-width) solid var(--border-subtle);\n }\n\n :host([plain]) details {\n border-bottom: none;\n }\n\n summary {\n display: flex;\n align-items: center;\n gap: var(--gap-button);\n padding: 12px 0;\n color: var(--text-body);\n font: var(--font-normal-medium);\n cursor: pointer;\n list-style: none;\n }\n\n / The default marker is a triangle nobody asked for. /\n summary::-webkit-details-marker {\n display: none;\n }\n\n summary:hover {\n color: var(--text-body);\n }\n\n summary:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n .chevron {\n display: inline-flex;\n flex: none;\n color: var(--text-muted);\n transition: transform var(--duration-fast) var(--easing-standard);\n }\n\n details[open] .chevron {\n transform: rotate(90deg);\n }\n\n .label {\n flex: 1;\n min-width: 0;\n }\n\n .content {\n padding: 0 0 16px;\n color: var(--text-muted);\n }\n `,\n ];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n heading = '';\n\n /* Drops the bottom rule, for a collapsible that is not part of a list. */\n @property({ type: Boolean, reflect: true })\n plain = false;\n\n private onToggle(event: Event): void {\n const details = event.target as HTMLDetailsElement;\n if (details.open === this.open) return;\n\n this.open = details.open;\n emit(this, 'kt-toggle', { open: this.open });\n }\n\n override render(): TemplateResult {\n return html`<details part=\"base\" ?open=${this.open} @toggle=${this.onToggle}>\n <summary part=\"summary\">\n <span class=\"chevron\"><kt-icon name=\"chevron-right\" size=\"16\"></kt-icon></span>\n <span class=\"label\"><slot name=\"summary\">${this.heading \|\| nothing}</slot></span>\n </summary>\n <div part=\"content\" class=\"content\"><slot></slot></div>\n </details>`;\n }\n}\n\ndefineElement('kt-collapsible', KtCollapsible);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-collapsible': KtCollapsible;\n }\n}\n"],"names":["KtCollapsible","KtElement","css","event","details","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AA+BO,MAAMA,UAAsBC,EAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkEL,KAAA,OAAO,IAGP,KAAA,UAAU,IAIV,KAAA,QAAQ;AAAA,EAAA;AAAA,EAxER,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,IAAA;AAAA,EA4DF;AAAA,EAYQ,SAASC,GAAoB;AACnC,UAAMC,IAAUD,EAAM;AACtB,IAAIC,EAAQ,SAAS,KAAK,SAE1B,KAAK,OAAOA,EAAQ,MACpBC,EAAK,MAAM,aAAa,EAAE,MAAM,KAAK,MAAM;AAAA,EAC7C;AAAA,EAES,SAAyB;AAChC,WAAOC,+BAAkC,KAAK,IAAI,YAAY,KAAK,QAAQ;AAAA;AAAA;AAAA,mDAG5B,KAAK,WAAWC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIxE;AACF;AA1BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjE/BT,EAkEX,WAAA,MAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApEfT,EAqEX,WAAA,SAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxE/BT,EAyEX,WAAA,OAAA;AAqBFU,EAAc,kBAAkBV,CAAa;"}
1	+ {"version":3,"file":"kt-collapsible.js","sources":["../../../../src/components/overlays/kt-collapsible/kt-collapsible.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 '../../core/kt-icon/kt-icon.js';\n\n/*\n A section that folds away.\n \n Built on `<details>`, which means it works before the JavaScript loads,\n * survives find-in-page — the browser opens a closed section to reveal a match —\n * and needs no ARIA of its own.\n \n @element kt-collapsible\n \n @slot - The contents.\n * @slot summary - Replaces the `heading` attribute.\n \n @csspart base - The `<details>`.\n * @csspart summary - The clickable row.\n * @csspart content - The revealed panel.\n \n @fires kt-toggle - Opened or closed. `detail: { open }`.\n \n @example\n * ```html\n * <kt-collapsible heading=\"Notifications\" open>\n * <kt-toggle checked>Email me about mentions</kt-toggle>\n * </kt-collapsible>\n * ```\n /\nexport class KtCollapsible extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n details {\n border-bottom: var(--border-width) solid var(--border-subtle);\n }\n\n :host([plain]) details {\n border-bottom: none;\n }\n\n summary {\n display: flex;\n align-items: center;\n gap: var(--gap-button);\n padding: 12px 0;\n color: var(--text-body);\n font: var(--font-normal-medium);\n cursor: pointer;\n list-style: none;\n }\n\n / The default marker is a triangle nobody asked for. /\n summary::-webkit-details-marker {\n display: none;\n }\n\n summary:hover {\n color: var(--text-body);\n }\n\n summary:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: calc(4px var(--radius-scale, 1));\n }\n\n .chevron {\n display: inline-flex;\n flex: none;\n color: var(--text-muted);\n transition: transform var(--duration-fast) var(--easing-standard);\n }\n\n details[open] .chevron {\n transform: rotate(90deg);\n }\n\n .label {\n flex: 1;\n min-width: 0;\n }\n\n .content {\n padding: 0 0 16px;\n color: var(--text-muted);\n }\n `,\n ];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n heading = '';\n\n /** Drops the bottom rule, for a collapsible that is not part of a list. */\n @property({ type: Boolean, reflect: true })\n plain = false;\n\n private onToggle(event: Event): void {\n const details = event.target as HTMLDetailsElement;\n if (details.open === this.open) return;\n\n this.open = details.open;\n emit(this, 'kt-toggle', { open: this.open });\n }\n\n override render(): TemplateResult {\n return html`<details part=\"base\" ?open=${this.open} @toggle=${this.onToggle}>\n <summary part=\"summary\">\n <span class=\"chevron\"><kt-icon name=\"chevron-right\" size=\"16\"></kt-icon></span>\n <span class=\"label\"><slot name=\"summary\">${this.heading \|\| nothing}</slot></span>\n </summary>\n <div part=\"content\" class=\"content\"><slot></slot></div>\n </details>`;\n }\n}\n\ndefineElement('kt-collapsible', KtCollapsible);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-collapsible': KtCollapsible;\n }\n}\n"],"names":["KtCollapsible","KtElement","css","event","details","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AA+BO,MAAMA,UAAsBC,EAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkEL,KAAA,OAAO,IAGP,KAAA,UAAU,IAIV,KAAA,QAAQ;AAAA,EAAA;AAAA,EAxER,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,IAAA;AAAA,EA4DF;AAAA,EAYQ,SAASC,GAAoB;AACnC,UAAMC,IAAUD,EAAM;AACtB,IAAIC,EAAQ,SAAS,KAAK,SAE1B,KAAK,OAAOA,EAAQ,MACpBC,EAAK,MAAM,aAAa,EAAE,MAAM,KAAK,MAAM;AAAA,EAC7C;AAAA,EAES,SAAyB;AAChC,WAAOC,+BAAkC,KAAK,IAAI,YAAY,KAAK,QAAQ;AAAA;AAAA;AAAA,mDAG5B,KAAK,WAAWC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIxE;AACF;AA1BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjE/BT,EAkEX,WAAA,MAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApEfT,EAqEX,WAAA,SAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxE/BT,EAyEX,WAAA,OAAA;AAqBFU,EAAc,kBAAkBV,CAAa;"}

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-Djx2JcGl.js";
+import { K as g, d as y } from "../../../chunks/kt-element-T0VbIBNp.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-STEEvEP7.js";
+import { s as r } from "../../../chunks/index-TWJzttLX.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.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { css as y, nothing as v, html as p } from "lit";
+import { css as v, nothing as y, html as p } from "lit";
 import { query as h, state as f, property as n } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { K as c, d as b } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as c, d as b } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { t as m, e as d } from "../../../chunks/events-r51msXNf.js";
-import { o as x } from "../../../chunks/listbox-llcUu_V-.js";
-import { F as w, f as k } from "../../../chunks/floating-B7_Dahpn.js";
-import { s as $ } from "../../../chunks/index-STEEvEP7.js";
-var P = Object.defineProperty, i = (r, t, s, a) => {
-  for (var o = void 0, l = r.length - 1, g; l >= 0; l--)
-    (g = r[l]) && (o = g(t, s, o) || o);
+import { o as x } from "../../../chunks/listbox-LsUEyGhQ.js";
+import { F as w, f as k } from "../../../chunks/floating-B33g-M_1.js";
+import { s as $ } from "../../../chunks/index-TWJzttLX.js";
+var P = Object.defineProperty, r = (i, t, s, a) => {
+  for (var o = void 0, l = i.length - 1, g; l >= 0; l--)
+    (g = i[l]) && (o = g(t, s, o) || o);
   return o && P(t, s, o), o;
 };
 class e extends c {
@@ -40,7 +40,7 @@ class e extends c {
     this.styles = [
       c.styles,
       k,
-      y`
+      v`
       :host {
         position: relative;
         display: inline-block;
@@ -63,7 +63,7 @@ class e extends c {
         max-height: 224px;
         margin: 0;
         padding: var(--padding-expand);
-        background: var(--surface-raised);
+        background: var(--surface-popover);
         border-radius: var(--radius-input);
         transform: translateY(-6px);
         transform-origin: top left;
@@ -203,7 +203,7 @@ class e extends c {
         disabled: !!t.disabled
       })}
                       role="menuitem"
-                      aria-disabled=${t.disabled ? "true" : v}
+                      aria-disabled=${t.disabled ? "true" : y}
                       @click=${() => this.choose(t)}
                     >
                       ${x(t)}
@@ -215,41 +215,41 @@ class e extends c {
       </div>`;
   }
 }
-i([
+r([
   h(".trigger")
 ], e.prototype, "triggerWrapper");
-i([
+r([
   h('slot[name="trigger"]')
 ], e.prototype, "triggerSlot");
-i([
+r([
   h('slot[name="panel"]')
 ], e.prototype, "panelSlot");
-i([
+r([
   f()
 ], e.prototype, "open");
-i([
+r([
   f()
 ], e.prototype, "placement");
-i([
+r([
   n({ attribute: !1 })
 ], e.prototype, "options");
-i([
+r([
   n({ type: String })
 ], e.prototype, "value");
-i([
+r([
   n({ type: String, attribute: "preferred-placement" })
 ], e.prototype, "preferredPlacement");
-i([
+r([
   n({ type: String, reflect: !0 })
 ], e.prototype, "align");
-i([
+r([
   n({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
-i([
+r([
   n({ type: String, attribute: "empty-text" })
 ], e.prototype, "emptyText");
-function S(r) {
-  return "popup" in r && "expanded" in r;
+function S(i) {
+  return "popup" in i && "expanded" in i;
 }
 b("kt-dropdown", e);
 export {

package/dist/components/overlays/kt-dropdown/kt-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-dropdown.js","sources":["../../../../src/components/overlays/kt-dropdown/kt-dropdown.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, toggleListener } from '#internal/events';\nimport { optionLabel, type KtOption } from '#internal/listbox';\nimport { FloatingController, floatingStyles } from '#internal/floating';\nimport { strings } from '#internal/strings';\n\nexport type KtDropdownPlacement = 'bottom' \| 'top';\nexport type KtDropdownAlign = 'start' \| 'end';\n\n/*\n A panel anchored to a trigger.\n \n The generic overlay: pass `options` for a menu, or slot anything into\n * `panel` for arbitrary content. For choosing a value in a form, reach for\n * `<kt-select>` or `<kt-input-menu>` instead — they carry the listbox\n * semantics this one deliberately does not assume.\n \n @element kt-dropdown\n \n @slot trigger - What opens the panel.\n * @slot panel - Panel contents, when `options` is not used.\n \n @csspart trigger - The trigger wrapper.\n * @csspart panel - The floating panel.\n * @csspart option - A menu row.\n \n @fires kt-select - A menu row was chosen. `detail: { value, option }`.\n * @fires kt-open - The panel opened.\n * @fires kt-close - The panel closed.\n /\nexport class KtDropdown extends KtElement {\n static override styles = [\n KtElement.styles,\n floatingStyles,\n css`\n :host {\n position: relative;\n display: inline-block;\n }\n\n .trigger {\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n\n :host([disabled]) .trigger {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n / Placed from the trigger by FloatingController. /\n .panel {\n box-sizing: border-box;\n width: 224px;\n max-height: 224px;\n margin: 0;\n padding: var(--padding-expand);\n background: var(--surface-raised);\n border-radius: var(--radius-input);\n transform: translateY(-6px);\n transform-origin: top left;\n visibility: hidden;\n opacity: 0;\n transition:\n opacity var(--duration-normal) var(--easing-standard),\n transform var(--duration-normal) var(--easing-standard);\n }\n\n .panel.top {\n transform: translateY(6px);\n transform-origin: bottom left;\n }\n\n / Hangs the panel off the trigger's right edge, for a trigger that sits\n at the right of what it belongs to — the caret of a split button. /\n .panel.end {\n transform-origin: top right;\n }\n\n .panel.end.top {\n transform-origin: bottom right;\n }\n\n .panel.open {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n .list {\n display: flex;\n flex-direction: column;\n gap: var(--gap-element);\n max-height: 208px;\n margin: 0;\n padding: 0;\n overflow: auto;\n list-style: none;\n scrollbar-width: thin;\n }\n\n .option {\n padding: var(--padding-expand-item);\n color: var(--text-muted);\n font: var(--font-normal-regular);\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n .option:hover {\n background: var(--surface-hover);\n }\n\n .option.selected {\n color: var(--text-body);\n font-weight: 600;\n background: var(--color-dark-23);\n }\n\n .option.disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .empty {\n padding: var(--padding-expand-item);\n color: var(--text-muted);\n font: var(--font-normal-small);\n cursor: default;\n }\n `,\n ];\n\n @query('.trigger')\n private triggerWrapper!: HTMLElement;\n\n @query('slot[name=\"trigger\"]')\n private triggerSlot?: HTMLSlotElement;\n\n @query('slot[name=\"panel\"]')\n private panelSlot?: HTMLSlotElement;\n\n @state()\n private open = false;\n\n /* Where the panel actually landed, after checking the room available. /\n @state()\n private placement: KtDropdownPlacement = 'bottom';\n\n private floating = new FloatingController(this, {\n panel: () => this.shadowRoot?.querySelector<HTMLElement>('.panel'),\n anchor: () => this.triggerWrapper,\n side: () => this.preferredPlacement,\n align: () => this.align,\n onPlace: (side) => {\n this.placement = side === 'top' ? 'top' : 'bottom';\n },\n });\n\n /* Menu rows. Leave empty and slot into `panel` for custom content. /\n @property({ attribute: false })\n options: readonly KtOption[] = [];\n\n /* Marks one row as current. /\n @property({ type: String })\n value: string \| number \| null = null;\n\n /* Where to put the panel when there is room on both sides. /\n @property({ type: String, attribute: 'preferred-placement' })\n preferredPlacement: KtDropdownPlacement = 'bottom';\n\n /* Which edge of the trigger the panel lines up with. /\n @property({ type: String, reflect: true })\n align: KtDropdownAlign = 'start';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String, attribute: 'empty-text' })\n emptyText: string \| undefined = undefined;\n\n /* Whether the panel is showing. /\n get isOpen(): boolean {\n return this.open;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Back on the document if it was reconnected while open.\n this.listen(this.open);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.listen(false);\n }\n\n /\n The outside click and Escape a panel reacts to — only while it is\n * open. A page of closed menus should not run a handler per menu on every\n * click and keystroke.\n /\n private listen(on: boolean): void {\n toggleListener(on, document, 'pointerdown', this.onDocumentPointerDown);\n toggleListener(on, document, 'keydown', this.onDocumentKeyDown as EventListener);\n }\n\n private onDocumentPointerDown = (event: Event): void => {\n if (event.composedPath().includes(this)) return;\n this.hide();\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape') this.hide();\n };\n\n // Untyped: `open` is private, so not among the keys PropertyValues<this> knows.\n override updated(changed: PropertyValues): void {\n this.syncTrigger();\n if (changed.has('open')) this.listen(this.open);\n this.floating.sync(this.open);\n }\n\n /\n Puts the popup state on the slotted trigger — the element that takes focus,\n * so the one a screen reader announces. A `<kt-button>` gets it through its\n * properties and passes it to its inner button; anything else as attributes.\n \n Only a menu is announced as one: the built-in list of options, or a\n * slotted panel that says `role=\"menu\"` itself. A panel of free content is a\n * disclosure — `aria-expanded` alone.\n /\n private syncTrigger = (): void => {\n const trigger = this.triggerSlot?.assignedElements()[0];\n if (!trigger) return;\n\n const customMenu = this.panelSlot?.assignedElements()[0]?.getAttribute('role') === 'menu';\n const popup = this.options.length > 0 \|\| customMenu ? 'menu' : undefined;\n if (isPopupTrigger(trigger)) {\n trigger.popup = popup;\n trigger.expanded = this.open;\n return;\n }\n if (popup) trigger.setAttribute('aria-haspopup', popup);\n else trigger.removeAttribute('aria-haspopup');\n trigger.setAttribute('aria-expanded', String(this.open));\n };\n\n /* Opens the panel. /\n show(): void {\n if (this.disabled \|\| this.open) return;\n this.open = true;\n emit(this, 'kt-open');\n }\n\n /* Closes the panel. /\n hide(): void {\n if (!this.open) return;\n this.open = false;\n emit(this, 'kt-close');\n }\n\n /* Opens or closes it. /\n toggle(): void {\n if (this.open) this.hide();\n else this.show();\n }\n\n private choose(option: KtOption): void {\n if (option.disabled) return;\n this.value = option.id;\n this.hide();\n emit(this, 'kt-select', { value: option.id, option });\n }\n\n override render(): TemplateResult {\n return html`<div part=\"trigger\" class=\"trigger\" @click=${this.toggle}>\n <slot name=\"trigger\" @slotchange=${this.syncTrigger}></slot>\n </div>\n\n <div\n part=\"panel\"\n popover=\"manual\"\n class=${classMap({\n panel: true,\n floating: true,\n open: this.open,\n top: this.placement === 'top',\n end: this.align === 'end',\n })}\n role=${this.options.length > 0 ? 'menu' : 'group'}\n aria-hidden=${this.open ? 'false' : 'true'}\n >\n ${\n this.options.length > 0\n ? html`<ul class=\"list\">\n ${this.options.map(\n (option) =>\n html`<li\n part=\"option\"\n class=${classMap({\n option: true,\n selected: option.id === this.value,\n disabled: Boolean(option.disabled),\n })}\n role=\"menuitem\"\n aria-disabled=${option.disabled ? 'true' : nothing}\n @click=${() => this.choose(option)}\n >\n ${optionLabel(option)}\n </li>`,\n )}\n </ul>`\n : html`<slot name=\"panel\">\n <div class=\"empty\">${this.emptyText ?? strings().noResults}</div>\n </slot>`\n }\n </div>`;\n }\n}\n\n/* A trigger that takes its popup state as properties, like `<kt-button>`. */\ninterface PopupTrigger extends Element {\n popup: 'menu' \| undefined;\n expanded: boolean \| undefined;\n}\n\nfunction isPopupTrigger(element: Element): element is PopupTrigger {\n return 'popup' in element && 'expanded' in element;\n}\n\ndefineElement('kt-dropdown', KtDropdown);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-dropdown': KtDropdown;\n }\n}\n"],"names":["KtDropdown","KtElement","FloatingController","side","event","trigger","customMenu","popup","isPopupTrigger","floatingStyles","css","on","toggleListener","changed","emit","option","html","classMap","nothing","optionLabel","strings","__decorateClass","query","state","property","element","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-dropdown.js","sources":["../../../../src/components/overlays/kt-dropdown/kt-dropdown.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, toggleListener } from '#internal/events';\nimport { optionLabel, type KtOption } from '#internal/listbox';\nimport { FloatingController, floatingStyles } from '#internal/floating';\nimport { strings } from '#internal/strings';\n\nexport type KtDropdownPlacement = 'bottom' \| 'top';\nexport type KtDropdownAlign = 'start' \| 'end';\n\n/*\n A panel anchored to a trigger.\n \n The generic overlay: pass `options` for a menu, or slot anything into\n * `panel` for arbitrary content. For choosing a value in a form, reach for\n * `<kt-select>` or `<kt-input-menu>` instead — they carry the listbox\n * semantics this one deliberately does not assume.\n \n @element kt-dropdown\n \n @slot trigger - What opens the panel.\n * @slot panel - Panel contents, when `options` is not used.\n \n @csspart trigger - The trigger wrapper.\n * @csspart panel - The floating panel.\n * @csspart option - A menu row.\n \n @fires kt-select - A menu row was chosen. `detail: { value, option }`.\n * @fires kt-open - The panel opened.\n * @fires kt-close - The panel closed.\n /\nexport class KtDropdown extends KtElement {\n static override styles = [\n KtElement.styles,\n floatingStyles,\n css`\n :host {\n position: relative;\n display: inline-block;\n }\n\n .trigger {\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n\n :host([disabled]) .trigger {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n / Placed from the trigger by FloatingController. /\n .panel {\n box-sizing: border-box;\n width: 224px;\n max-height: 224px;\n margin: 0;\n padding: var(--padding-expand);\n background: var(--surface-popover);\n border-radius: var(--radius-input);\n transform: translateY(-6px);\n transform-origin: top left;\n visibility: hidden;\n opacity: 0;\n transition:\n opacity var(--duration-normal) var(--easing-standard),\n transform var(--duration-normal) var(--easing-standard);\n }\n\n .panel.top {\n transform: translateY(6px);\n transform-origin: bottom left;\n }\n\n / Hangs the panel off the trigger's right edge, for a trigger that sits\n at the right of what it belongs to — the caret of a split button. /\n .panel.end {\n transform-origin: top right;\n }\n\n .panel.end.top {\n transform-origin: bottom right;\n }\n\n .panel.open {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n .list {\n display: flex;\n flex-direction: column;\n gap: var(--gap-element);\n max-height: 208px;\n margin: 0;\n padding: 0;\n overflow: auto;\n list-style: none;\n scrollbar-width: thin;\n }\n\n .option {\n padding: var(--padding-expand-item);\n color: var(--text-muted);\n font: var(--font-normal-regular);\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n .option:hover {\n background: var(--surface-hover);\n }\n\n .option.selected {\n color: var(--text-body);\n font-weight: 600;\n background: var(--color-dark-23);\n }\n\n .option.disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .empty {\n padding: var(--padding-expand-item);\n color: var(--text-muted);\n font: var(--font-normal-small);\n cursor: default;\n }\n `,\n ];\n\n @query('.trigger')\n private triggerWrapper!: HTMLElement;\n\n @query('slot[name=\"trigger\"]')\n private triggerSlot?: HTMLSlotElement;\n\n @query('slot[name=\"panel\"]')\n private panelSlot?: HTMLSlotElement;\n\n @state()\n private open = false;\n\n /* Where the panel actually landed, after checking the room available. /\n @state()\n private placement: KtDropdownPlacement = 'bottom';\n\n private floating = new FloatingController(this, {\n panel: () => this.shadowRoot?.querySelector<HTMLElement>('.panel'),\n anchor: () => this.triggerWrapper,\n side: () => this.preferredPlacement,\n align: () => this.align,\n onPlace: (side) => {\n this.placement = side === 'top' ? 'top' : 'bottom';\n },\n });\n\n /* Menu rows. Leave empty and slot into `panel` for custom content. /\n @property({ attribute: false })\n options: readonly KtOption[] = [];\n\n /* Marks one row as current. /\n @property({ type: String })\n value: string \| number \| null = null;\n\n /* Where to put the panel when there is room on both sides. /\n @property({ type: String, attribute: 'preferred-placement' })\n preferredPlacement: KtDropdownPlacement = 'bottom';\n\n /* Which edge of the trigger the panel lines up with. /\n @property({ type: String, reflect: true })\n align: KtDropdownAlign = 'start';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String, attribute: 'empty-text' })\n emptyText: string \| undefined = undefined;\n\n /* Whether the panel is showing. /\n get isOpen(): boolean {\n return this.open;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Back on the document if it was reconnected while open.\n this.listen(this.open);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.listen(false);\n }\n\n /\n The outside click and Escape a panel reacts to — only while it is\n * open. A page of closed menus should not run a handler per menu on every\n * click and keystroke.\n /\n private listen(on: boolean): void {\n toggleListener(on, document, 'pointerdown', this.onDocumentPointerDown);\n toggleListener(on, document, 'keydown', this.onDocumentKeyDown as EventListener);\n }\n\n private onDocumentPointerDown = (event: Event): void => {\n if (event.composedPath().includes(this)) return;\n this.hide();\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape') this.hide();\n };\n\n // Untyped: `open` is private, so not among the keys PropertyValues<this> knows.\n override updated(changed: PropertyValues): void {\n this.syncTrigger();\n if (changed.has('open')) this.listen(this.open);\n this.floating.sync(this.open);\n }\n\n /\n Puts the popup state on the slotted trigger — the element that takes focus,\n * so the one a screen reader announces. A `<kt-button>` gets it through its\n * properties and passes it to its inner button; anything else as attributes.\n \n Only a menu is announced as one: the built-in list of options, or a\n * slotted panel that says `role=\"menu\"` itself. A panel of free content is a\n * disclosure — `aria-expanded` alone.\n /\n private syncTrigger = (): void => {\n const trigger = this.triggerSlot?.assignedElements()[0];\n if (!trigger) return;\n\n const customMenu = this.panelSlot?.assignedElements()[0]?.getAttribute('role') === 'menu';\n const popup = this.options.length > 0 \|\| customMenu ? 'menu' : undefined;\n if (isPopupTrigger(trigger)) {\n trigger.popup = popup;\n trigger.expanded = this.open;\n return;\n }\n if (popup) trigger.setAttribute('aria-haspopup', popup);\n else trigger.removeAttribute('aria-haspopup');\n trigger.setAttribute('aria-expanded', String(this.open));\n };\n\n /* Opens the panel. /\n show(): void {\n if (this.disabled \|\| this.open) return;\n this.open = true;\n emit(this, 'kt-open');\n }\n\n /* Closes the panel. /\n hide(): void {\n if (!this.open) return;\n this.open = false;\n emit(this, 'kt-close');\n }\n\n /* Opens or closes it. /\n toggle(): void {\n if (this.open) this.hide();\n else this.show();\n }\n\n private choose(option: KtOption): void {\n if (option.disabled) return;\n this.value = option.id;\n this.hide();\n emit(this, 'kt-select', { value: option.id, option });\n }\n\n override render(): TemplateResult {\n return html`<div part=\"trigger\" class=\"trigger\" @click=${this.toggle}>\n <slot name=\"trigger\" @slotchange=${this.syncTrigger}></slot>\n </div>\n\n <div\n part=\"panel\"\n popover=\"manual\"\n class=${classMap({\n panel: true,\n floating: true,\n open: this.open,\n top: this.placement === 'top',\n end: this.align === 'end',\n })}\n role=${this.options.length > 0 ? 'menu' : 'group'}\n aria-hidden=${this.open ? 'false' : 'true'}\n >\n ${\n this.options.length > 0\n ? html`<ul class=\"list\">\n ${this.options.map(\n (option) =>\n html`<li\n part=\"option\"\n class=${classMap({\n option: true,\n selected: option.id === this.value,\n disabled: Boolean(option.disabled),\n })}\n role=\"menuitem\"\n aria-disabled=${option.disabled ? 'true' : nothing}\n @click=${() => this.choose(option)}\n >\n ${optionLabel(option)}\n </li>`,\n )}\n </ul>`\n : html`<slot name=\"panel\">\n <div class=\"empty\">${this.emptyText ?? strings().noResults}</div>\n </slot>`\n }\n </div>`;\n }\n}\n\n/* A trigger that takes its popup state as properties, like `<kt-button>`. */\ninterface PopupTrigger extends Element {\n popup: 'menu' \| undefined;\n expanded: boolean \| undefined;\n}\n\nfunction isPopupTrigger(element: Element): element is PopupTrigger {\n return 'popup' in element && 'expanded' in element;\n}\n\ndefineElement('kt-dropdown', KtDropdown);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-dropdown': KtDropdown;\n }\n}\n"],"names":["KtDropdown","KtElement","FloatingController","side","event","trigger","customMenu","popup","isPopupTrigger","floatingStyles","css","on","toggleListener","changed","emit","option","html","classMap","nothing","optionLabel","strings","__decorateClass","query","state","property","element","defineElement"],"mappings":"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"}

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

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

package/dist/components/overlays/kt-side-panel/kt-side-panel.js CHANGED Viewed

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