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

kanto-ds 1.2.0 → 1.4.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 (116) hide show

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 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 } from '#internal/events';\nimport { optionLabel, type KtOption } from '#internal/listbox';\n\nexport type KtDropdownPlacement = 'bottom' \| 'top';\nexport type KtDropdownAlign = 'start' \| 'end';\n\n/** Panel height plus the 6px offset, used to decide whether it fits below. /\nconst PANEL_SPACE = 224 + 6;\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 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 .panel {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--z-dropdown);\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 top: auto;\n bottom: calc(100% + 6px);\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 right: 0;\n left: auto;\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 /* 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 = 'No results';\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 document.addEventListener('pointerdown', this.onDocumentPointerDown);\n document.addEventListener('keydown', this.onDocumentKeyDown);\n window.addEventListener('resize', this.reposition);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n document.removeEventListener('keydown', this.onDocumentKeyDown);\n window.removeEventListener('resize', this.reposition);\n }\n\n /\n Flips the panel above the trigger when there is not enough room below,\n * preferring whichever side has more space if neither fits.\n /\n private reposition = (): void => {\n const anchor = this.triggerWrapper ?? this;\n const rect = anchor.getBoundingClientRect();\n const below = window.innerHeight - rect.bottom;\n const above = rect.top;\n\n this.placement =\n this.preferredPlacement === 'top'\n ? above >= PANEL_SPACE \|\| above >= below\n ? 'top'\n : 'bottom'\n : below >= PANEL_SPACE \|\| below >= above\n ? 'bottom'\n : 'top';\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 override updated(): void {\n this.syncTrigger();\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.reposition();\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 class=${classMap({\n panel: 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}</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":["PANEL_SPACE","KtDropdown","KtElement","rect","below","above","event","trigger","customMenu","popup","isPopupTrigger","css","emit","option","html","classMap","nothing","optionLabel","__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 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 } from '#internal/events';\nimport { optionLabel, type KtOption } from '#internal/listbox';\nimport { strings } from '#internal/strings';\n\nexport type KtDropdownPlacement = 'bottom' \| 'top';\nexport type KtDropdownAlign = 'start' \| 'end';\n\n/** Panel height plus the 6px offset, used to decide whether it fits below. /\nconst PANEL_SPACE = 224 + 6;\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 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 .panel {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--z-dropdown);\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 top: auto;\n bottom: calc(100% + 6px);\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 right: 0;\n left: auto;\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 /* 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 document.addEventListener('pointerdown', this.onDocumentPointerDown);\n document.addEventListener('keydown', this.onDocumentKeyDown);\n window.addEventListener('resize', this.reposition);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n document.removeEventListener('keydown', this.onDocumentKeyDown);\n window.removeEventListener('resize', this.reposition);\n }\n\n /\n Flips the panel above the trigger when there is not enough room below,\n * preferring whichever side has more space if neither fits.\n /\n private reposition = (): void => {\n const anchor = this.triggerWrapper ?? this;\n const rect = anchor.getBoundingClientRect();\n const below = window.innerHeight - rect.bottom;\n const above = rect.top;\n\n this.placement =\n this.preferredPlacement === 'top'\n ? above >= PANEL_SPACE \|\| above >= below\n ? 'top'\n : 'bottom'\n : below >= PANEL_SPACE \|\| below >= above\n ? 'bottom'\n : 'top';\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 override updated(): void {\n this.syncTrigger();\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.reposition();\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 class=${classMap({\n panel: 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":["PANEL_SPACE","KtDropdown","KtElement","rect","below","above","event","trigger","customMenu","popup","isPopupTrigger","css","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,14 +1,15 @@
 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-B_jjQDhg.js";
+import { K as c, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as u } from "../../../chunks/events-Bjl5Zmmq.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-DSSLJirw.js";
 import "../../core/kt-button/kt-button.js";
-var x = Object.defineProperty, e = (l, t, d, k) => {
+var k = Object.defineProperty, e = (l, t, d, w) => {
   for (var a = void 0, n = l.length - 1, p; n >= 0; n--)
     (p = l[n]) && (a = p(t, d, a) || a);
-  return a && x(t, d, a), a;
+  return a && k(t, d, a), a;
 };
 class o extends c {
   constructor() {
@@ -168,7 +169,7 @@ class o extends c {
                       variant="secondary-no-bg"
                       size="small"
                       icon="x"
-                      label="Close"
+                      label=${x().close}
                       @click=${this.requestClose}
                     ></kt-button>`}
             </div>` : r}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-modal.js","sources":["../../../../src/components/overlays/kt-modal/kt-modal.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { hasAssignedContent } from '#internal/slots';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport '../../core/kt-button/kt-button.js';\n\nexport type KtModalSize = 'small' \| 'medium' \| 'large' \| 'full';\n\n/*\n A centred dialog for anything that is not a yes/no question.\n \n `<kt-confirm-dialog>` asks one thing and offers two answers. This one holds\n * content — a compose window, a command palette, a picker — and lets you put\n * whatever you like in the footer.\n \n Built on the native `<dialog>`, so the top layer, focus containment, page\n * inertness and Escape all come from the platform rather than from a focus trap\n * that leaks.\n \n @element kt-modal\n \n @slot - The body.\n * @slot header - Replaces the `heading` attribute.\n * @slot footer - Actions. Hidden when empty.\n \n @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n * @csspart footer - The action row.\n \n @fires kt-close - Dismissal requested. Cancelable, for an unsaved-changes guard.\n \n @example\n * ```html\n * <kt-modal open heading=\"Compose\">\n * <kt-textarea rows=\"6\"></kt-textarea>\n * <kt-button slot=\"footer\" type=\"submit\">Send</kt-button>\n * </kt-modal>\n * ```\n /\nexport class KtModal extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: contents;\n }\n\n / Closed by default — see kt-confirm-dialog.ts's identical comment: an unconditional \\`display: flex\\` here left a never-opened dialog occupying its centred box (\\`opacity: 0\\`, but still in flow and hit-testable), silently eating clicks meant for whatever sat underneath it on the page. /\n dialog {\n display: none;\n flex-direction: column;\n gap: var(--gap-modal);\n box-sizing: border-box;\n width: 560px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 96px);\n padding: var(--padding-modal);\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: var(--radius-modal);\n opacity: 0;\n transform: translateY(8px);\n transition:\n transform var(--duration-normal) var(--easing-standard),\n opacity var(--duration-normal) var(--easing-standard),\n overlay var(--duration-normal) allow-discrete,\n display var(--duration-normal) allow-discrete;\n }\n\n :host([size='small']) dialog {\n width: 400px;\n }\n :host([size='large']) dialog {\n width: 760px;\n }\n :host([size='full']) dialog {\n width: calc(100vw - 48px);\n height: calc(100vh - 96px);\n }\n\n dialog[open] {\n display: flex;\n opacity: 1;\n transform: translateY(0);\n }\n\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: translateY(8px);\n }\n }\n\n dialog::backdrop {\n background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n }\n\n .header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--gap-card);\n }\n\n .titles {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n }\n\n h2 {\n margin: 0;\n color: var(--text-body);\n font: var(--font-title-h6);\n }\n\n .description {\n margin: 0;\n color: var(--text-muted);\n font: var(--font-normal-regular);\n }\n\n .body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n scrollbar-width: thin;\n }\n\n .footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--gap-button);\n }\n\n .footer.empty {\n display: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog {\n transition: none;\n }\n }\n `,\n ];\n\n @query('dialog')\n private dialog!: HTMLDialogElement;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: String, reflect: true })\n size: KtModalSize = 'medium';\n\n /* Hides the close button. Escape still works — a modal you cannot leave is a trap. /\n @property({ type: Boolean, attribute: 'no-close-button' })\n noCloseButton = false;\n\n /* Stops a backdrop click from dismissing. /\n @property({ type: Boolean, attribute: 'no-backdrop-close' })\n noBackdropClose = false;\n\n private hasFooter = false;\n\n override updated(changed: PropertyValues<this>): void {\n if (changed.has('open')) {\n if (this.open) openModal(this.dialog);\n else closeDialog(this.dialog);\n }\n this.readFooter();\n }\n\n private readFooter(): void {\n const next = hasAssignedContent(\n this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n );\n if (next === this.hasFooter) return;\n this.hasFooter = next;\n this.requestUpdate();\n }\n\n /* Asks to close. A cancelled `kt-close` keeps the modal open. */\n requestClose(): void {\n const proceed = emit(this, 'kt-close');\n if (proceed.defaultPrevented) {\n if (!this.dialog.open) openModal(this.dialog);\n return;\n }\n this.open = false;\n }\n\n private onDialogClose(): void {\n if (this.open) this.requestClose();\n }\n\n private onDialogClick(event: MouseEvent): void {\n if (this.noBackdropClose) return;\n if (isBackdropClick(this.dialog, event)) this.requestClose();\n }\n\n override render(): TemplateResult {\n const hasHeader = Boolean(this.heading) \|\| Boolean(this.description);\n\n return html`<dialog\n part=\"dialog\"\n aria-label=${this.heading \|\| nothing}\n @close=${this.onDialogClose}\n @click=${this.onDialogClick}\n >\n ${\n hasHeader \|\| !this.noCloseButton\n ? html`<div part=\"header\" class=\"header\">\n <div class=\"titles\">\n <slot name=\"header\">\n ${this.heading ? html`<h2>${this.heading}</h2>` : nothing}\n </slot>\n ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n </div>\n ${\n this.noCloseButton\n ? nothing\n : html`<kt-button\n variant=\"secondary-no-bg\"\n size=\"small\"\n icon=\"x\"\n label=\"Close\"\n @click=${this.requestClose}\n ></kt-button>`\n }\n </div>`\n : nothing\n }\n\n <div part=\"body\" class=\"body\"><slot></slot></div>\n\n <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n <slot name=\"footer\" @slotchange=${this.readFooter}></slot>\n </div>\n </dialog>`;\n }\n}\n\ndefineElement('kt-modal', KtModal);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-modal': KtModal;\n }\n}\n"],"names":["KtModal","KtElement","css","changed","openModal","closeDialog","next","hasAssignedContent","emit","event","isBackdropClick","hasHeader","html","nothing","__decorateClass","query","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-modal.js","sources":["../../../../src/components/overlays/kt-modal/kt-modal.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { hasAssignedContent } from '#internal/slots';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-button/kt-button.js';\n\nexport type KtModalSize = 'small' \| 'medium' \| 'large' \| 'full';\n\n/*\n A centred dialog for anything that is not a yes/no question.\n \n `<kt-confirm-dialog>` asks one thing and offers two answers. This one holds\n * content — a compose window, a command palette, a picker — and lets you put\n * whatever you like in the footer.\n \n Built on the native `<dialog>`, so the top layer, focus containment, page\n * inertness and Escape all come from the platform rather than from a focus trap\n * that leaks.\n \n @element kt-modal\n \n @slot - The body.\n * @slot header - Replaces the `heading` attribute.\n * @slot footer - Actions. Hidden when empty.\n \n @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n * @csspart footer - The action row.\n \n @fires kt-close - Dismissal requested. Cancelable, for an unsaved-changes guard.\n \n @example\n * ```html\n * <kt-modal open heading=\"Compose\">\n * <kt-textarea rows=\"6\"></kt-textarea>\n * <kt-button slot=\"footer\" type=\"submit\">Send</kt-button>\n * </kt-modal>\n * ```\n /\nexport class KtModal extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: contents;\n }\n\n / Closed by default — see kt-confirm-dialog.ts's identical comment: an unconditional \\`display: flex\\` here left a never-opened dialog occupying its centred box (\\`opacity: 0\\`, but still in flow and hit-testable), silently eating clicks meant for whatever sat underneath it on the page. /\n dialog {\n display: none;\n flex-direction: column;\n gap: var(--gap-modal);\n box-sizing: border-box;\n width: 560px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 96px);\n padding: var(--padding-modal);\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: var(--radius-modal);\n opacity: 0;\n transform: translateY(8px);\n transition:\n transform var(--duration-normal) var(--easing-standard),\n opacity var(--duration-normal) var(--easing-standard),\n overlay var(--duration-normal) allow-discrete,\n display var(--duration-normal) allow-discrete;\n }\n\n :host([size='small']) dialog {\n width: 400px;\n }\n :host([size='large']) dialog {\n width: 760px;\n }\n :host([size='full']) dialog {\n width: calc(100vw - 48px);\n height: calc(100vh - 96px);\n }\n\n dialog[open] {\n display: flex;\n opacity: 1;\n transform: translateY(0);\n }\n\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: translateY(8px);\n }\n }\n\n dialog::backdrop {\n background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n }\n\n .header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--gap-card);\n }\n\n .titles {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n }\n\n h2 {\n margin: 0;\n color: var(--text-body);\n font: var(--font-title-h6);\n }\n\n .description {\n margin: 0;\n color: var(--text-muted);\n font: var(--font-normal-regular);\n }\n\n .body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n scrollbar-width: thin;\n }\n\n .footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--gap-button);\n }\n\n .footer.empty {\n display: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog {\n transition: none;\n }\n }\n `,\n ];\n\n @query('dialog')\n private dialog!: HTMLDialogElement;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: String, reflect: true })\n size: KtModalSize = 'medium';\n\n /* Hides the close button. Escape still works — a modal you cannot leave is a trap. /\n @property({ type: Boolean, attribute: 'no-close-button' })\n noCloseButton = false;\n\n /* Stops a backdrop click from dismissing. /\n @property({ type: Boolean, attribute: 'no-backdrop-close' })\n noBackdropClose = false;\n\n private hasFooter = false;\n\n override updated(changed: PropertyValues<this>): void {\n if (changed.has('open')) {\n if (this.open) openModal(this.dialog);\n else closeDialog(this.dialog);\n }\n this.readFooter();\n }\n\n private readFooter(): void {\n const next = hasAssignedContent(\n this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n );\n if (next === this.hasFooter) return;\n this.hasFooter = next;\n this.requestUpdate();\n }\n\n /* Asks to close. A cancelled `kt-close` keeps the modal open. */\n requestClose(): void {\n const proceed = emit(this, 'kt-close');\n if (proceed.defaultPrevented) {\n if (!this.dialog.open) openModal(this.dialog);\n return;\n }\n this.open = false;\n }\n\n private onDialogClose(): void {\n if (this.open) this.requestClose();\n }\n\n private onDialogClick(event: MouseEvent): void {\n if (this.noBackdropClose) return;\n if (isBackdropClick(this.dialog, event)) this.requestClose();\n }\n\n override render(): TemplateResult {\n const hasHeader = Boolean(this.heading) \|\| Boolean(this.description);\n\n return html`<dialog\n part=\"dialog\"\n aria-label=${this.heading \|\| nothing}\n @close=${this.onDialogClose}\n @click=${this.onDialogClick}\n >\n ${\n hasHeader \|\| !this.noCloseButton\n ? html`<div part=\"header\" class=\"header\">\n <div class=\"titles\">\n <slot name=\"header\">\n ${this.heading ? html`<h2>${this.heading}</h2>` : nothing}\n </slot>\n ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n </div>\n ${\n this.noCloseButton\n ? nothing\n : html`<kt-button\n variant=\"secondary-no-bg\"\n size=\"small\"\n icon=\"x\"\n label=${strings().close}\n @click=${this.requestClose}\n ></kt-button>`\n }\n </div>`\n : nothing\n }\n\n <div part=\"body\" class=\"body\"><slot></slot></div>\n\n <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n <slot name=\"footer\" @slotchange=${this.readFooter}></slot>\n </div>\n </dialog>`;\n }\n}\n\ndefineElement('kt-modal', KtModal);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-modal': KtModal;\n }\n}\n"],"names":["KtModal","KtElement","css","changed","openModal","closeDialog","next","hasAssignedContent","emit","event","isBackdropClick","hasHeader","html","nothing","strings","__decorateClass","query","property","defineElement"],"mappings":"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"}

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

@@ -33,7 +33,7 @@ export declare class KtSidePanel extends KtElement {
     private dialog;
     open: boolean;
     /** Small uppercase label above the heading — "Details", "Editing". */
-    eyebrow: string;
+    eyebrow: string | undefined;
     heading: string;
     /** Suppresses dismissal by backdrop click. Escape still works, by design. */
     noBackdropClose: boolean;

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

@@ -1,22 +1,23 @@
-import { css as g, nothing as d, html as p } from "lit";
-import { query as f, property as a } from "lit/decorators.js";
-import { K as c, d as m } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
-import { o as h, c as v, i as b } from "../../../chunks/dialog-CPIfFIlF.js";
+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-E-tfJpGQ.js";
+import { e as v } from "../../../chunks/events-Bjl5Zmmq.js";
+import { o as g, c as b, i as y } from "../../../chunks/dialog-CPIfFIlF.js";
+import { s as l } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-button/kt-button.js";
-var y = Object.defineProperty, r = (i, e, l, x) => {
-  for (var o = void 0, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (o = n(e, l, o) || o);
-  return o && y(e, l, o), o;
+var x = Object.defineProperty, r = (i, e, n, k) => {
+  for (var o = void 0, s = i.length - 1, d; s >= 0; s--)
+    (d = i[s]) && (o = d(e, n, o) || o);
+  return o && x(e, n, o), o;
 };
-class t extends c {
+class t extends h {
   constructor() {
-    super(...arguments), this.open = !1, this.eyebrow = "Details", this.heading = "", this.noBackdropClose = !1;
+    super(...arguments), this.open = !1, this.eyebrow = void 0, this.heading = "", this.noBackdropClose = !1;
   }
   static {
     this.styles = [
-      c.styles,
-      g`
+      h.styles,
+      f`
       :host {
         display: contents;
       }
@@ -111,12 +112,12 @@ class t extends c {
     ];
   }
   updated(e) {
-    e.has("open") && (this.open ? h(this.dialog) : v(this.dialog));
+    e.has("open") && (this.open ? g(this.dialog) : b(this.dialog));
   }
   /** Asks to close. A cancelled `kt-close` keeps the panel open. */
   requestClose() {
-    if (u(this, "kt-close").defaultPrevented) {
-      this.dialog.open || h(this.dialog);
+    if (v(this, "kt-close").defaultPrevented) {
+      this.dialog.open || g(this.dialog);
       return;
     }
     this.open = !1;
@@ -126,25 +127,25 @@ class t extends c {
     this.open && this.requestClose();
   }
   onDialogClick(e) {
-    this.noBackdropClose || b(this.dialog, e) && this.requestClose();
+    this.noBackdropClose || y(this.dialog, e) && this.requestClose();
   }
   render() {
-    return p`<dialog
+    return c`<dialog
       part="dialog"
-      aria-label=${this.heading || d}
+      aria-label=${this.heading || p}
       @close=${this.onDialogClose}
       @click=${this.onDialogClick}
     >
       <div part="header" class="header">
         <div class="titles">
-          ${this.eyebrow ? p`<div class="eyebrow">${this.eyebrow}</div>` : d}
+          ${this.eyebrow ?? l().details ? c`<div class="eyebrow">${this.eyebrow ?? l().details}</div>` : p}
           <h2>${this.heading}</h2>
         </div>
         <kt-button
           variant="secondary"
           size="small"
           icon="x"
-          label="Close"
+          label=${l().close}
           @click=${this.requestClose}
         ></kt-button>
       </div>
@@ -157,7 +158,7 @@ class t extends c {
   }
 }
 r([
-  f("dialog")
+  m("dialog")
 ], t.prototype, "dialog");
 r([
   a({ type: Boolean, reflect: !0 })
@@ -171,7 +172,7 @@ r([
 r([
   a({ type: Boolean, attribute: "no-backdrop-close" })
 ], t.prototype, "noBackdropClose");
-m("kt-side-panel", t);
+u("kt-side-panel", t);
 export {
   t as KtSidePanel
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-side-panel.js","sources":["../../../../src/components/overlays/kt-side-panel/kt-side-panel.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport '../../core/kt-button/kt-button.js';\n\n/*\n A drawer that slides in from the right, for viewing or editing one record\n * without leaving the list behind it.\n \n Built on the native `<dialog>`: the panel lands in the top layer, focus is\n * trapped inside it, the page behind goes inert, and Escape closes it — none of\n * which the fixed-position div this replaces did.\n \n @element kt-side-panel\n \n @slot - The panel body.\n * @slot footer - Pinned below the body.\n \n @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n \n @fires kt-close - The panel was dismissed. Cancelable: cancel it to keep the\n * panel open, for an unsaved-changes prompt.\n \n @example\n * ```html\n * <kt-side-panel open eyebrow=\"Details\" heading=\"Entity 4812\">\n * <p>…</p>\n * </kt-side-panel>\n * ```\n /\nexport class KtSidePanel extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: contents;\n }\n\n dialog {\n position: fixed;\n top: 0;\n right: 0;\n left: auto;\n display: flex;\n flex-direction: column;\n gap: var(--gap-drag-drop);\n box-sizing: border-box;\n width: 308px;\n max-width: 100%;\n height: 100vh;\n max-height: 100vh;\n margin: 0;\n padding: var(--padding-card);\n overflow: hidden;\n color: var(--text-body);\n background-color: var(--surface-card);\n border: none;\n transform: translateX(100%);\n transition:\n transform var(--duration-normal) var(--easing-standard),\n overlay var(--duration-normal) allow-discrete,\n display var(--duration-normal) allow-discrete;\n }\n\n dialog[open] {\n transform: translateX(0);\n }\n\n / The panel starts off-screen on open, so the slide runs the first time\n too rather than only on close. /\n @starting-style {\n dialog[open] {\n transform: translateX(100%);\n }\n }\n\n dialog::backdrop {\n background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n }\n\n .header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: space-between;\n gap: var(--gap-drag-drop);\n }\n\n .titles {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .eyebrow {\n color: var(--text-muted);\n font: var(--font-normal-small);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n h2 {\n margin: 0;\n color: var(--text-body);\n font: var(--font-title-h6);\n }\n\n .divider {\n width: 100%;\n margin: 0;\n border: 0;\n border-bottom: var(--border-width) solid var(--border-subtle);\n }\n\n .body {\n flex: 1 1 auto;\n overflow: auto;\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog {\n transition: none;\n }\n }\n `,\n ];\n\n @query('dialog')\n private dialog!: HTMLDialogElement;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /* Small uppercase label above the heading — \"Details\", \"Editing\". /\n @property({ type: String })\n eyebrow = ~~'Details'~~;\n\n @property({ type: String })\n heading = '';\n\n /* Suppresses dismissal by backdrop click. Escape still works, by design. /\n @property({ type: Boolean, attribute: 'no-backdrop-close' })\n noBackdropClose = false;\n\n override updated(changed: PropertyValues<this>): void {\n if (!changed.has('open')) return;\n if (this.open) openModal(this.dialog);\n else closeDialog(this.dialog);\n }\n\n /* Asks to close. A cancelled `kt-close` keeps the panel open. /\n requestClose(): void {\n const proceed = emit(this, 'kt-close');\n if (proceed.defaultPrevented) {\n // The dialog may already have closed itself — Escape does that natively.\n if (!this.dialog.open) openModal(this.dialog);\n return;\n }\n this.open = false;\n }\n\n /* Escape and the native close both land here. */\n private onDialogClose(): void {\n if (this.open) this.requestClose();\n }\n\n private onDialogClick(event: MouseEvent): void {\n if (this.noBackdropClose) return;\n if (isBackdropClick(this.dialog, event)) this.requestClose();\n }\n\n override render(): TemplateResult {\n return html`<dialog\n part=\"dialog\"\n aria-label=${this.heading \|\| nothing}\n @close=${this.onDialogClose}\n @click=${this.onDialogClick}\n >\n <div part=\"header\" class=\"header\">\n <div class=\"titles\">\n ${this.eyebrow ? html`<div class=\"eyebrow\">${this.eyebrow}</div>` : nothing}\n <h2>${this.heading}</h2>\n </div>\n <kt-button\n variant=\"secondary\"\n size=\"small\"\n icon=\"x\"\n label~~=\"Close~~\"\n @click=${this.requestClose}\n ></kt-button>\n </div>\n\n <hr class=\"divider\" />\n\n <div part=\"body\" class=\"body\"><slot></slot></div>\n <slot name=\"footer\"></slot>\n </dialog>`;\n }\n}\n\ndefineElement('kt-side-panel', KtSidePanel);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-side-panel': KtSidePanel;\n }\n}\n"],"names":["KtSidePanel","KtElement","css","changed","openModal","closeDialog","emit","event","isBackdropClick","html","nothing","__decorateClass","query","property","defineElement"],"mappings":"~~;;;;;;;;;;;AAkCO~~,MAAMA,UAAoBC,EAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqGL,KAAA,OAAO,IAIP,KAAA,~~UAAU~~,~~WAGV~~,KAAA,UAAU,IAIV,KAAA,kBAAkB;AAAA,EAAA;AAAA,EA/GlB,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;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA4FF;AAAA,EAmBS,QAAQC,GAAqC;AACpD,IAAKA,EAAQ,IAAI,MAAM,MACnB,KAAK,OAAMC,EAAU,KAAK,MAAM,IAC/BC,EAAY,KAAK,MAAM;AAAA,EAC9B;AAAA;AAAA,EAGA,eAAqB;AAEnB,QADgBC,EAAK,MAAM,UAAU,EACzB,kBAAkB;AAE5B,MAAK,KAAK,OAAO,QAAMF,EAAU,KAAK,MAAM;AAC5C;AAAA,IACF;AACA,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,IAAI,KAAK,QAAM,KAAK,aAAA;AAAA,EACtB;AAAA,EAEQ,cAAcG,GAAyB;AAC7C,IAAI,KAAK,mBACLC,EAAgB,KAAK,QAAQD,CAAK,UAAQ,aAAA;AAAA,EAChD;AAAA,EAES,SAAyB;AAChC,WAAOE;AAAA;AAAA,mBAEQ,KAAK,WAAWC,CAAO;AAAA,eAC3B,KAAK,aAAa;AAAA,eAClB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,~~YAIrB~~,KAAK,~~UAAUD~~,yBAA4B,KAAK,OAAO,~~WAAWC~~,CAAO;AAAA,~~gBACrE~~,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~mBAOT~~,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlC;AACF;AAtEUC,EAAA;AAAA,EADPC,EAAM,QAAQ;AAAA,~~GAjGJZ~~,EAkGH,WAAA,QAAA;~~AAGRW~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApG/Bb,EAqGX,WAAA,MAAA;~~AAIAW~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAxGfb~~,EAyGX,WAAA,SAAA;~~AAGAW~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GA3Gfb~~,EA4GX,WAAA,SAAA;~~AAIAW~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB;AAAA,GA/~~GhDb~~,EAgHX,WAAA,iBAAA;~~AA0DFc~~,EAAc,~~iBAAiBd~~,CAAW;"}
1	+ {"version":3,"file":"kt-side-panel.js","sources":["../../../../src/components/overlays/kt-side-panel/kt-side-panel.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-button/kt-button.js';\n\n/*\n A drawer that slides in from the right, for viewing or editing one record\n * without leaving the list behind it.\n \n Built on the native `<dialog>`: the panel lands in the top layer, focus is\n * trapped inside it, the page behind goes inert, and Escape closes it — none of\n * which the fixed-position div this replaces did.\n \n @element kt-side-panel\n \n @slot - The panel body.\n * @slot footer - Pinned below the body.\n \n @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n \n @fires kt-close - The panel was dismissed. Cancelable: cancel it to keep the\n * panel open, for an unsaved-changes prompt.\n \n @example\n * ```html\n * <kt-side-panel open eyebrow=\"Details\" heading=\"Entity 4812\">\n * <p>…</p>\n * </kt-side-panel>\n * ```\n /\nexport class KtSidePanel extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: contents;\n }\n\n dialog {\n position: fixed;\n top: 0;\n right: 0;\n left: auto;\n display: flex;\n flex-direction: column;\n gap: var(--gap-drag-drop);\n box-sizing: border-box;\n width: 308px;\n max-width: 100%;\n height: 100vh;\n max-height: 100vh;\n margin: 0;\n padding: var(--padding-card);\n overflow: hidden;\n color: var(--text-body);\n background-color: var(--surface-card);\n border: none;\n transform: translateX(100%);\n transition:\n transform var(--duration-normal) var(--easing-standard),\n overlay var(--duration-normal) allow-discrete,\n display var(--duration-normal) allow-discrete;\n }\n\n dialog[open] {\n transform: translateX(0);\n }\n\n / The panel starts off-screen on open, so the slide runs the first time\n too rather than only on close. /\n @starting-style {\n dialog[open] {\n transform: translateX(100%);\n }\n }\n\n dialog::backdrop {\n background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n }\n\n .header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: space-between;\n gap: var(--gap-drag-drop);\n }\n\n .titles {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .eyebrow {\n color: var(--text-muted);\n font: var(--font-normal-small);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n h2 {\n margin: 0;\n color: var(--text-body);\n font: var(--font-title-h6);\n }\n\n .divider {\n width: 100%;\n margin: 0;\n border: 0;\n border-bottom: var(--border-width) solid var(--border-subtle);\n }\n\n .body {\n flex: 1 1 auto;\n overflow: auto;\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog {\n transition: none;\n }\n }\n `,\n ];\n\n @query('dialog')\n private dialog!: HTMLDialogElement;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /* Small uppercase label above the heading — \"Details\", \"Editing\". /\n @property({ type: String })\n eyebrow: string \| undefined = undefined;\n\n @property({ type: String })\n heading = '';\n\n /* Suppresses dismissal by backdrop click. Escape still works, by design. /\n @property({ type: Boolean, attribute: 'no-backdrop-close' })\n noBackdropClose = false;\n\n override updated(changed: PropertyValues<this>): void {\n if (!changed.has('open')) return;\n if (this.open) openModal(this.dialog);\n else closeDialog(this.dialog);\n }\n\n /* Asks to close. A cancelled `kt-close` keeps the panel open. /\n requestClose(): void {\n const proceed = emit(this, 'kt-close');\n if (proceed.defaultPrevented) {\n // The dialog may already have closed itself — Escape does that natively.\n if (!this.dialog.open) openModal(this.dialog);\n return;\n }\n this.open = false;\n }\n\n /* Escape and the native close both land here. */\n private onDialogClose(): void {\n if (this.open) this.requestClose();\n }\n\n private onDialogClick(event: MouseEvent): void {\n if (this.noBackdropClose) return;\n if (isBackdropClick(this.dialog, event)) this.requestClose();\n }\n\n override render(): TemplateResult {\n return html`<dialog\n part=\"dialog\"\n aria-label=${this.heading \|\| nothing}\n @close=${this.onDialogClose}\n @click=${this.onDialogClick}\n >\n <div part=\"header\" class=\"header\">\n <div class=\"titles\">\n ${(this.eyebrow ?? strings().details) ? html`<div class=\"eyebrow\">${this.eyebrow ?? strings().details}</div>` : nothing}\n <h2>${this.heading}</h2>\n </div>\n <kt-button\n variant=\"secondary\"\n size=\"small\"\n icon=\"x\"\n label=${strings().close}\n @click=${this.requestClose}\n ></kt-button>\n </div>\n\n <hr class=\"divider\" />\n\n <div part=\"body\" class=\"body\"><slot></slot></div>\n <slot name=\"footer\"></slot>\n </dialog>`;\n }\n}\n\ndefineElement('kt-side-panel', KtSidePanel);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-side-panel': KtSidePanel;\n }\n}\n"],"names":["KtSidePanel","KtElement","css","changed","openModal","closeDialog","emit","event","isBackdropClick","html","nothing","strings","__decorateClass","query","property","defineElement"],"mappings":";;;;;;;;;;;;AAmCO,MAAMA,UAAoBC,EAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqGL,KAAA,OAAO,IAIP,KAAA,UAA8B,QAG9B,KAAA,UAAU,IAIV,KAAA,kBAAkB;AAAA,EAAA;AAAA,EA/GlB,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;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA4FF;AAAA,EAmBS,QAAQC,GAAqC;AACpD,IAAKA,EAAQ,IAAI,MAAM,MACnB,KAAK,OAAMC,EAAU,KAAK,MAAM,IAC/BC,EAAY,KAAK,MAAM;AAAA,EAC9B;AAAA;AAAA,EAGA,eAAqB;AAEnB,QADgBC,EAAK,MAAM,UAAU,EACzB,kBAAkB;AAE5B,MAAK,KAAK,OAAO,QAAMF,EAAU,KAAK,MAAM;AAC5C;AAAA,IACF;AACA,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,IAAI,KAAK,QAAM,KAAK,aAAA;AAAA,EACtB;AAAA,EAEQ,cAAcG,GAAyB;AAC7C,IAAI,KAAK,mBACLC,EAAgB,KAAK,QAAQD,CAAK,UAAQ,aAAA;AAAA,EAChD;AAAA,EAES,SAAyB;AAChC,WAAOE;AAAA;AAAA,mBAEQ,KAAK,WAAWC,CAAO;AAAA,eAC3B,KAAK,aAAa;AAAA,eAClB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,YAIpB,KAAK,WAAWC,EAAA,EAAU,UAAWF,yBAA4B,KAAK,WAAWE,EAAA,EAAU,OAAO,WAAWD,CAAO;AAAA,gBACjH,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMVC,EAAA,EAAU,KAAK;AAAA,mBACd,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlC;AACF;AAtEUC,EAAA;AAAA,EADPC,EAAM,QAAQ;AAAA,GAjGJb,EAkGH,WAAA,QAAA;AAGRY,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApG/Bd,EAqGX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxGfd,EAyGX,WAAA,SAAA;AAGAY,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Gfd,EA4GX,WAAA,SAAA;AAIAY,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB;AAAA,GA/GhDd,EAgHX,WAAA,iBAAA;AA0DFe,EAAc,iBAAiBf,CAAW;"}