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

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

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-mdd5cXZX.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-fzPIgxe2.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;"}

package/dist/custom-elements.json CHANGED Viewed

@@ -1572,9 +1572,9 @@
               "kind": "field",
               "name": "menuLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'More actions'",
+              "default": "undefined",
               "description": "Accessible name of the caret, which has no text of its own.",
               "attribute": "menu-label"
             },
@@ -1592,9 +1592,9 @@
               "kind": "field",
               "name": "emptyText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No actions'",
+              "default": "undefined",
               "attribute": "empty-text"
             },
             {
@@ -1842,9 +1842,9 @@
             {
               "name": "menu-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'More actions'",
+              "default": "undefined",
               "description": "Accessible name of the caret, which has no text of its own.",
               "fieldName": "menuLabel"
             },
@@ -1860,9 +1860,9 @@
             {
               "name": "empty-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No actions'",
+              "default": "undefined",
               "fieldName": "emptyText"
             }
           ],
@@ -2579,9 +2579,9 @@
               "kind": "field",
               "name": "centerLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Total'",
+              "default": "undefined",
               "description": "Names the total in the middle of a doughnut.",
               "attribute": "center-label"
             },
@@ -2589,9 +2589,9 @@
               "kind": "field",
               "name": "totalLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Total'",
+              "default": "undefined",
               "description": "Names the sum in a stacked chart's tooltip and table.",
               "attribute": "total-label"
             },
@@ -2982,18 +2982,18 @@
             {
               "name": "center-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Total'",
+              "default": "undefined",
               "description": "Names the total in the middle of a doughnut.",
               "fieldName": "centerLabel"
             },
             {
               "name": "total-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Total'",
+              "default": "undefined",
               "description": "Names the sum in a stacked chart's tooltip and table.",
               "fieldName": "totalLabel"
             },
@@ -3889,9 +3889,9 @@
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Pagination'",
+              "default": "undefined",
               "attribute": "label"
             },
             {
@@ -3940,9 +3940,9 @@
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Pagination'",
+              "default": "undefined",
               "fieldName": "label"
             }
           ],
@@ -4327,18 +4327,18 @@
               "kind": "field",
               "name": "emptyText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No data to display'",
+              "default": "undefined",
               "attribute": "empty-text"
             },
             {
               "kind": "field",
               "name": "loadingText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Loading…'",
+              "default": "undefined",
               "attribute": "loading-text"
             },
             {
@@ -4597,17 +4597,17 @@
             {
               "name": "empty-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No data to display'",
+              "default": "undefined",
               "fieldName": "emptyText"
             },
             {
               "name": "loading-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Loading…'",
+              "default": "undefined",
               "fieldName": "loadingText"
             },
             {
@@ -6134,9 +6134,9 @@
               "kind": "field",
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Drag and drop or'",
+              "default": "undefined",
               "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
               "attribute": "heading"
             },
@@ -6144,9 +6144,9 @@
               "kind": "field",
               "name": "linkText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'browse your files'",
+              "default": "undefined",
               "description": "The clickable-looking part of the prompt.",
               "attribute": "link-text"
             },
@@ -6408,18 +6408,18 @@
             {
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Drag and drop or'",
+              "default": "undefined",
               "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
               "fieldName": "heading"
             },
             {
               "name": "link-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'browse your files'",
+              "default": "undefined",
               "description": "The clickable-looking part of the prompt.",
               "fieldName": "linkText"
             },
@@ -7556,9 +7556,9 @@
               "kind": "field",
               "name": "emptyText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No options available'",
+              "default": "undefined",
               "attribute": "empty-text"
             },
             {
@@ -7819,9 +7819,9 @@
             {
               "name": "empty-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No options available'",
+              "default": "undefined",
               "fieldName": "emptyText"
             }
           ],
@@ -8062,9 +8062,9 @@
               "kind": "field",
               "name": "placeholder",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Select'",
+              "default": "undefined",
               "attribute": "placeholder"
             },
             {
@@ -8141,9 +8141,9 @@
               "kind": "field",
               "name": "emptyText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No options available'",
+              "default": "undefined",
               "description": "Shown when `options` is empty.",
               "attribute": "empty-text"
             },
@@ -8327,9 +8327,9 @@
             {
               "name": "placeholder",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Select'",
+              "default": "undefined",
               "fieldName": "placeholder"
             },
             {
@@ -8394,9 +8394,9 @@
             {
               "name": "empty-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No options available'",
+              "default": "undefined",
               "description": "Shown when `options` is empty.",
               "fieldName": "emptyText"
             }
@@ -9094,9 +9094,9 @@
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Breadcrumb'",
+              "default": "undefined",
               "description": "Accessible name for the navigation landmark.",
               "attribute": "label"
             },
@@ -9141,9 +9141,9 @@
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Breadcrumb'",
+              "default": "undefined",
               "description": "Accessible name for the navigation landmark.",
               "fieldName": "label"
             }
@@ -9844,9 +9844,9 @@
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Secondary navigation'",
+              "default": "undefined",
               "attribute": "label"
             },
             {
@@ -10075,9 +10075,9 @@
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Secondary navigation'",
+              "default": "undefined",
               "fieldName": "label"
             },
             {
@@ -10898,9 +10898,9 @@
               "kind": "field",
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Are you sure?'",
+              "default": "undefined",
               "attribute": "heading"
             },
             {
@@ -10916,18 +10916,18 @@
               "kind": "field",
               "name": "confirmLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Confirm'",
+              "default": "undefined",
               "attribute": "confirm-label"
             },
             {
               "kind": "field",
               "name": "cancelLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Cancel'",
+              "default": "undefined",
               "attribute": "cancel-label"
             },
             {
@@ -11013,9 +11013,9 @@
             {
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Are you sure?'",
+              "default": "undefined",
               "fieldName": "heading"
             },
             {
@@ -11029,17 +11029,17 @@
             {
               "name": "confirm-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Confirm'",
+              "default": "undefined",
               "fieldName": "confirmLabel"
             },
             {
               "name": "cancel-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Cancel'",
+              "default": "undefined",
               "fieldName": "cancelLabel"
             },
             {
@@ -11201,9 +11201,9 @@
               "kind": "field",
               "name": "emptyText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No results'",
+              "default": "undefined",
               "attribute": "empty-text"
             },
             {
@@ -11339,9 +11339,9 @@
             {
               "name": "empty-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No results'",
+              "default": "undefined",
               "fieldName": "emptyText"
             }
           ],
@@ -11661,9 +11661,9 @@
               "kind": "field",
               "name": "eyebrow",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Details'",
+              "default": "undefined",
               "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
               "attribute": "eyebrow"
             },
@@ -11744,9 +11744,9 @@
             {
               "name": "eyebrow",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Details'",
+              "default": "undefined",
               "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
               "fieldName": "eyebrow"
             },