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/core/kt-code/kt-code.js CHANGED Viewed

@@ -1,21 +1,22 @@
-import { css as u, nothing as i, html as s } from "lit";
-import { state as b, property as d } from "lit/decorators.js";
-import { K as l, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { css as b, nothing as s, html as d } from "lit";
+import { state as m, property as c } from "lit/decorators.js";
+import { K as h, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import { s as r } from "../../../chunks/index-DSSLJirw.js";
 import "../kt-icon/kt-icon.js";
-var m = Object.defineProperty, r = (c, o, p, f) => {
-  for (var e = void 0, a = c.length - 1, n; a >= 0; a--)
-    (n = c[a]) && (e = n(o, p, e) || e);
-  return e && m(o, p, e), e;
+var y = Object.defineProperty, a = (p, o, n, x) => {
+  for (var e = void 0, i = p.length - 1, l; i >= 0; i--)
+    (l = p[i]) && (e = l(o, n, e) || e);
+  return e && y(o, n, e), e;
 };
-const t = class h extends l {
+const t = class u extends h {
   constructor() {
     super(...arguments), this.copied = !1, this.language = "", this.copy = !1, this.label = "";
   }
   static {
     this.styles = [
-      l.styles,
-      u`
+      h.styles,
+      b`
       :host {
         display: block;
       }
@@ -106,50 +107,50 @@ const t = class h extends l {
     try {
       await navigator.clipboard.writeText(this.code), this.copied = !0, this.copiedTimer !== void 0 && clearTimeout(this.copiedTimer), this.copiedTimer = setTimeout(() => {
         this.copied = !1;
-      }, h.COPIED_MS);
+      }, u.COPIED_MS);
     } catch {
     }
     g(this, "kt-copy", { code: this.code });
   }
   render() {
     const o = !!this.language || this.copy;
-    return s`<div part="base" class=${o ? "base" : "base bare"}>
-      ${o ? s`<div part="header" class="header">
+    return d`<div part="base" class=${o ? "base" : "base bare"}>
+      ${o ? d`<div part="header" class="header">
               <span class="language">${this.language}</span>
-              ${this.copy ? s`<button
+              ${this.copy ? d`<button
                       type="button"
                       class=${this.copied ? "copy copied" : "copy"}
-                      aria-label=${this.copied ? "Copied" : "Copy code"}
+                      aria-label=${this.copied ? r().copied : r().copyCode}
                       @click=${this.copyToClipboard}
                     >
                       <kt-icon name=${this.copied ? "check" : "copy"} size="14"></kt-icon>
-                      ${this.copied ? "Copied" : "Copy"}
-                    </button>` : i}
-            </div>` : i}
+                      ${this.copied ? r().copied : r().copy}
+                    </button>` : s}
+            </div>` : s}
       <pre
         part="pre"
         tabindex="0"
-        aria-label=${this.label || i}
+        aria-label=${this.label || s}
       ><code><slot></slot></code></pre>
     </div>`;
   }
 };
-r([
-  b()
+a([
+  m()
 ], t.prototype, "copied");
-r([
-  d({ type: String })
+a([
+  c({ type: String })
 ], t.prototype, "language");
-r([
-  d({ type: Boolean })
+a([
+  c({ type: Boolean })
 ], t.prototype, "copy");
-r([
-  d({ type: String })
+a([
+  c({ type: String })
 ], t.prototype, "label");
-let y = t;
-v("kt-code", y);
+let f = t;
+v("kt-code", f);
 export {
-  y as KtCode
+  f as KtCode
 };
 //# sourceMappingURL=kt-code.js.map

package/dist/components/core/kt-code/kt-code.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-code.js","sources":["../../../../src/components/core/kt-code/kt-code.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../kt-icon/kt-icon.js';\n\n/*\n A block of code on a recessed surface, with its language and a copy button.\n \n The element owns the chrome — surface, label, scrolling, copy — and nothing\n * else. Highlighting is the caller's: slot in whatever markup a highlighter\n * produced, or plain text for none. A design system that bundled a syntax\n * highlighter would be picking your bundle size and your language set for you.\n \n ```html\n * <kt-code language=\"js\">const total = items.length;</kt-code>\n \n <kt-code language=\"ts\" copy>\n * <span class=\"hljs-keyword\">const</span> total = items.length;\n * </kt-code>\n * ```\n \n For a token or an identifier inside a sentence, reach for\n * `<kt-badge variant=\"code\">` instead — this is for blocks.\n \n @element kt-code\n \n @slot - The code. Plain text, or a highlighter's markup.\n \n @csspart base - The container.\n * @csspart header - The language row.\n * @csspart pre - The scrolling `<pre>`.\n \n @fires kt-copy - The copy button was pressed. `detail: { code }`.\n /\nexport class KtCode extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .base {\n overflow: hidden;\n background: var(--surface-code);\n border: var(--border-width) solid var(--border-code);\n border-radius: var(--border-radius);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--gap-button);\n padding: 6px 8px 6px 14px;\n border-bottom: var(--border-width) solid var(--border-code);\n }\n\n .language {\n color: var(--text-muted);\n font: var(--font-normal-small);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .copy {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n color: var(--text-muted);\n font: var(--font-normal-small);\n background: transparent;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition:\n color var(--duration-instant),\n background-color var(--duration-instant);\n }\n\n .copy:hover {\n color: var(--text-body);\n background: var(--surface-raised);\n }\n\n .copy:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 1px;\n }\n\n .copied {\n color: var(--color-success-text);\n }\n\n pre {\n margin: 0;\n padding: 14px;\n overflow-x: auto;\n scrollbar-width: thin;\n }\n\n code {\n font: var(--font-code-regular);\n color: var(--text-code);\n }\n\n / A block with no header should not leave a stray rule behind. /\n .bare pre {\n padding-top: 14px;\n }\n `,\n ];\n\n /* How long the copy button stays in its confirmed state. /\n private static readonly COPIED_MS = 1600;\n\n private copiedTimer: ReturnType<typeof setTimeout> \| undefined;\n\n @state()\n private copied = false;\n\n /* Language label, shown uppercase. Purely informative. /\n @property({ type: String })\n language = '';\n\n /* Shows the copy button. /\n @property({ type: Boolean })\n copy = false;\n\n /* Accessible name for the block, when the language alone is not enough. /\n @property({ type: String })\n label = '';\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.copiedTimer !== undefined) clearTimeout(this.copiedTimer);\n }\n\n /* The code as plain text, whatever markup it is wrapped in. */\n get code(): string {\n return (this.textContent ?? '').replace(/^\\n+\|\\n+$/g, '');\n }\n\n private async copyToClipboard(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.code);\n this.copied = true;\n\n if (this.copiedTimer !== undefined) clearTimeout(this.copiedTimer);\n this.copiedTimer = setTimeout(() => {\n this.copied = false;\n }, KtCode.COPIED_MS);\n } catch {\n // Denied permission, or an insecure origin. Nothing useful to show, and\n // failing loudly over a convenience button helps no one.\n }\n emit(this, 'kt-copy', { code: this.code });\n }\n\n override render(): TemplateResult {\n const hasHeader = Boolean(this.language) \|\| this.copy;\n\n return html`<div part=\"base\" class=${hasHeader ? 'base' : 'base bare'}>\n ${\n hasHeader\n ? html`<div part=\"header\" class=\"header\">\n <span class=\"language\">${this.language}</span>\n ${\n this.copy\n ? html`<button\n type=\"button\"\n class=${this.copied ? 'copy copied' : 'copy'}\n aria-label=${this.copied ? ~~'Copied'~~ : ~~'Copy code'~~}\n @click=${this.copyToClipboard}\n >\n <kt-icon name=${this.copied ? 'check' : 'copy'} size=\"14\"></kt-icon>\n ${this.copied ? ~~'Copied'~~ : ~~'Copy'~~}\n </button>`\n : nothing\n }\n </div>`\n : nothing\n }\n\n <pre\n part=\"pre\"\n tabindex=\"0\"\n aria-label=${this.label \|\| nothing}\n ><code><slot></slot></code></pre>\n </div>`;\n }\n}\n\ndefineElement('kt-code', KtCode);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-code': KtCode;\n }\n}\n"],"names":["_KtCode","KtElement","css","emit","hasHeader","html","nothing","__decorateClass","state","property","KtCode","defineElement"],"mappings":"~~;;;;;;;;;;AAmCO~~,MAAMA,IAAN,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAsFL,KAAQ,SAAS,IAIjB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,QAAQ;AAAA,EAAA;AAAA,EAjGR,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,IAAA;AAAA,EA2EF;AAAA,EAGA,OAAA;AAAA,SAAwB,YAAY;AAAA,EAAA;AAAA,EAmB3B,uBAA6B;AACpC,UAAM,qBAAA,GACF,KAAK,gBAAgB,UAAW,aAAa,KAAK,WAAW;AAAA,EACnE;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,YAAQ,KAAK,eAAe,IAAI,QAAQ,cAAc,EAAE;AAAA,EAC1D;AAAA,EAEA,MAAc,kBAAiC;AAC7C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,KAAK,IAAI,GAC7C,KAAK,SAAS,IAEV,KAAK,gBAAgB,UAAW,aAAa,KAAK,WAAW,GACjE,KAAK,cAAc,WAAW,MAAM;AAClC,aAAK,SAAS;AAAA,MAChB,GAAGF,EAAO,SAAS;AAAA,IACrB,QAAQ;AAAA,IAGR;AACA,IAAAG,EAAK,MAAM,WAAW,EAAE,MAAM,KAAK,MAAM;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAY,EAAQ,KAAK,YAAa,KAAK;AAEjD,WAAOC,2BAA8BD,IAAY,SAAS,WAAW;AAAA,QAEjEA,IACIC;AAAA,uCAC2B,KAAK,QAAQ;AAAA,gBAEpC,KAAK,OACDA;AAAA;AAAA,8BAEU,KAAK,SAAS,gBAAgB,MAAM;AAAA,mCAC/B,KAAK,~~SAAS~~,~~WAAW~~,~~WAAW~~;AAAA,+~~BACxC~~,KAAK,eAAe;AAAA;AAAA,sCAEb,KAAK,SAAS,UAAU,MAAM;AAAA,wBAC5C,KAAK,~~SAAS~~,~~WAAW~~,~~MAAM~~;AAAA,~~iCAEnCC~~,CACN;AAAA,sBAEFA,CACN;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKe,KAAK,SAASA,CAAO;AAAA;AAAA;AAAA,EAGxC;AACF;AAxEUC,EAAA;AAAA,EADPC,EAAA;AAAM,~~GArFIR~~,EAsFH,WAAA,QAAA;~~AAIRO~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAzFfT~~,EA0FX,WAAA,UAAA;~~AAIAO~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,~~GA7FhBT~~,EA8FX,WAAA,MAAA;~~AAIAO~~,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAjGfT~~,EAkGX,WAAA,OAAA;AAlGK,~~IAAMU~~,~~IAANV~~;~~AAgKPW~~,EAAc,WAAWD,CAAM;"}
1	+ {"version":3,"file":"kt-code.js","sources":["../../../../src/components/core/kt-code/kt-code.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../kt-icon/kt-icon.js';\n\n/*\n A block of code on a recessed surface, with its language and a copy button.\n \n The element owns the chrome — surface, label, scrolling, copy — and nothing\n * else. Highlighting is the caller's: slot in whatever markup a highlighter\n * produced, or plain text for none. A design system that bundled a syntax\n * highlighter would be picking your bundle size and your language set for you.\n \n ```html\n * <kt-code language=\"js\">const total = items.length;</kt-code>\n \n <kt-code language=\"ts\" copy>\n * <span class=\"hljs-keyword\">const</span> total = items.length;\n * </kt-code>\n * ```\n \n For a token or an identifier inside a sentence, reach for\n * `<kt-badge variant=\"code\">` instead — this is for blocks.\n \n @element kt-code\n \n @slot - The code. Plain text, or a highlighter's markup.\n \n @csspart base - The container.\n * @csspart header - The language row.\n * @csspart pre - The scrolling `<pre>`.\n \n @fires kt-copy - The copy button was pressed. `detail: { code }`.\n /\nexport class KtCode extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .base {\n overflow: hidden;\n background: var(--surface-code);\n border: var(--border-width) solid var(--border-code);\n border-radius: var(--border-radius);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--gap-button);\n padding: 6px 8px 6px 14px;\n border-bottom: var(--border-width) solid var(--border-code);\n }\n\n .language {\n color: var(--text-muted);\n font: var(--font-normal-small);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .copy {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n color: var(--text-muted);\n font: var(--font-normal-small);\n background: transparent;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition:\n color var(--duration-instant),\n background-color var(--duration-instant);\n }\n\n .copy:hover {\n color: var(--text-body);\n background: var(--surface-raised);\n }\n\n .copy:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 1px;\n }\n\n .copied {\n color: var(--color-success-text);\n }\n\n pre {\n margin: 0;\n padding: 14px;\n overflow-x: auto;\n scrollbar-width: thin;\n }\n\n code {\n font: var(--font-code-regular);\n color: var(--text-code);\n }\n\n / A block with no header should not leave a stray rule behind. /\n .bare pre {\n padding-top: 14px;\n }\n `,\n ];\n\n /* How long the copy button stays in its confirmed state. /\n private static readonly COPIED_MS = 1600;\n\n private copiedTimer: ReturnType<typeof setTimeout> \| undefined;\n\n @state()\n private copied = false;\n\n /* Language label, shown uppercase. Purely informative. /\n @property({ type: String })\n language = '';\n\n /* Shows the copy button. /\n @property({ type: Boolean })\n copy = false;\n\n /* Accessible name for the block, when the language alone is not enough. /\n @property({ type: String })\n label = '';\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.copiedTimer !== undefined) clearTimeout(this.copiedTimer);\n }\n\n /* The code as plain text, whatever markup it is wrapped in. */\n get code(): string {\n return (this.textContent ?? '').replace(/^\\n+\|\\n+$/g, '');\n }\n\n private async copyToClipboard(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.code);\n this.copied = true;\n\n if (this.copiedTimer !== undefined) clearTimeout(this.copiedTimer);\n this.copiedTimer = setTimeout(() => {\n this.copied = false;\n }, KtCode.COPIED_MS);\n } catch {\n // Denied permission, or an insecure origin. Nothing useful to show, and\n // failing loudly over a convenience button helps no one.\n }\n emit(this, 'kt-copy', { code: this.code });\n }\n\n override render(): TemplateResult {\n const hasHeader = Boolean(this.language) \|\| this.copy;\n\n return html`<div part=\"base\" class=${hasHeader ? 'base' : 'base bare'}>\n ${\n hasHeader\n ? html`<div part=\"header\" class=\"header\">\n <span class=\"language\">${this.language}</span>\n ${\n this.copy\n ? html`<button\n type=\"button\"\n class=${this.copied ? 'copy copied' : 'copy'}\n aria-label=${this.copied ? strings().copied : strings().copyCode}\n @click=${this.copyToClipboard}\n >\n <kt-icon name=${this.copied ? 'check' : 'copy'} size=\"14\"></kt-icon>\n ${this.copied ? strings().copied : strings().copy}\n </button>`\n : nothing\n }\n </div>`\n : nothing\n }\n\n <pre\n part=\"pre\"\n tabindex=\"0\"\n aria-label=${this.label \|\| nothing}\n ><code><slot></slot></code></pre>\n </div>`;\n }\n}\n\ndefineElement('kt-code', KtCode);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-code': KtCode;\n }\n}\n"],"names":["_KtCode","KtElement","css","emit","hasHeader","html","strings","nothing","__decorateClass","state","property","KtCode","defineElement"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,IAAN,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAsFL,KAAQ,SAAS,IAIjB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,QAAQ;AAAA,EAAA;AAAA,EAjGR,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,IAAA;AAAA,EA2EF;AAAA,EAGA,OAAA;AAAA,SAAwB,YAAY;AAAA,EAAA;AAAA,EAmB3B,uBAA6B;AACpC,UAAM,qBAAA,GACF,KAAK,gBAAgB,UAAW,aAAa,KAAK,WAAW;AAAA,EACnE;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,YAAQ,KAAK,eAAe,IAAI,QAAQ,cAAc,EAAE;AAAA,EAC1D;AAAA,EAEA,MAAc,kBAAiC;AAC7C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,KAAK,IAAI,GAC7C,KAAK,SAAS,IAEV,KAAK,gBAAgB,UAAW,aAAa,KAAK,WAAW,GACjE,KAAK,cAAc,WAAW,MAAM;AAClC,aAAK,SAAS;AAAA,MAChB,GAAGF,EAAO,SAAS;AAAA,IACrB,QAAQ;AAAA,IAGR;AACA,IAAAG,EAAK,MAAM,WAAW,EAAE,MAAM,KAAK,MAAM;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAY,EAAQ,KAAK,YAAa,KAAK;AAEjD,WAAOC,2BAA8BD,IAAY,SAAS,WAAW;AAAA,QAEjEA,IACIC;AAAA,uCAC2B,KAAK,QAAQ;AAAA,gBAEpC,KAAK,OACDA;AAAA;AAAA,8BAEU,KAAK,SAAS,gBAAgB,MAAM;AAAA,mCAC/B,KAAK,SAASC,EAAA,EAAU,SAASA,EAAA,EAAU,QAAQ;AAAA,+BACvD,KAAK,eAAe;AAAA;AAAA,sCAEb,KAAK,SAAS,UAAU,MAAM;AAAA,wBAC5C,KAAK,SAASA,EAAA,EAAU,SAASA,EAAA,EAAU,IAAI;AAAA,iCAEnDC,CACN;AAAA,sBAEFA,CACN;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKe,KAAK,SAASA,CAAO;AAAA;AAAA;AAAA,EAGxC;AACF;AAxEUC,EAAA;AAAA,EADPC,EAAA;AAAM,GArFIT,EAsFH,WAAA,QAAA;AAIRQ,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzFfV,EA0FX,WAAA,UAAA;AAIAQ,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA7FhBV,EA8FX,WAAA,MAAA;AAIAQ,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjGfV,EAkGX,WAAA,OAAA;AAlGK,IAAMW,IAANX;AAgKPY,EAAc,WAAWD,CAAM;"}

package/dist/components/core/kt-icon/kt-icon.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as f, html as c, nothing as l } from "lit";
 import { property as n } from "lit/decorators.js";
-import { K as m, d as u } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { g as v } from "../../../chunks/defaults-DKzFsNbv.js";
+import { K as m, d as u } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { g as v } from "../../../chunks/defaults-BwgjMcww.js";
 var w = Object.defineProperty, o = (i, e, r, h) => {
   for (var t = void 0, a = i.length - 1, d; a >= 0; a--)
     (d = i[a]) && (t = d(e, r, t) || t);

package/dist/components/core/kt-kbd/kt-kbd.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as c, html as i } from "lit";
 import { property as p } from "lit/decorators.js";
-import { K as l, d as m } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as l, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var f = Object.defineProperty, d = (a, t, e, u) => {
   for (var r = void 0, s = a.length - 1, o; s >= 0; s--)
     (o = a[s]) && (r = o(t, e, r) || r);

package/dist/components/core/kt-split-button/kt-split-button.d.ts CHANGED Viewed

@@ -64,10 +64,10 @@ export declare class KtSplitButton extends KtElement {
     /** Lucide icon name for the primary segment. */
     icon: string;
     /** Accessible name of the caret, which has no text of its own. */
-    menuLabel: string;
+    menuLabel: string | undefined;
     /** Where to put the menu when there is room on both sides. */
     preferredPlacement: KtDropdownPlacement;
-    emptyText: string;
+    emptyText: string | undefined;
     /** Whether the menu is showing. */
     get isOpen(): boolean;
     /** Opens the menu. */

package/dist/components/core/kt-split-button/kt-split-button.js CHANGED Viewed

@@ -1,21 +1,22 @@
-import { css as f, nothing as c, html as a } from "lit";
-import { query as b, state as g, property as o } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { K as h, d as w } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as x } from "../../../chunks/events-Bjl5Zmmq.js";
-import { f as m, o as k, l as $, n as u } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { css as g, nothing as p, html as a } from "lit";
+import { query as f, state as y, property as o } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { K as h, d as x } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { e as k } from "../../../chunks/events-Bjl5Zmmq.js";
+import { f as m, o as $, l as I, n as u } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { s as v } from "../../../chunks/index-DSSLJirw.js";
 import "../kt-button/kt-button.js";
 import "../kt-icon/kt-icon.js";
 import "../../overlays/kt-dropdown/kt-dropdown.js";
-var I = Object.defineProperty, i = (n, t, r, l) => {
-  for (var s = void 0, d = n.length - 1, p; d >= 0; d--)
-    (p = n[d]) && (s = p(t, r, s) || s);
-  return s && I(t, r, s), s;
+var C = Object.defineProperty, i = (n, t, r, l) => {
+  for (var s = void 0, d = n.length - 1, c; d >= 0; d--)
+    (c = n[d]) && (s = c(t, r, s) || s);
+  return s && C(t, r, s), s;
 };
-const v = { small: 16, medium: 20, large: 24 };
+const b = { small: 16, medium: 20, large: 24 };
 class e extends h {
   constructor() {
-    super(...arguments), this.activeIndex = -1, this.items = [], this.variant = "primary", this.size = "medium", this.disabled = !1, this.icon = "", this.menuLabel = "More actions", this.preferredPlacement = "bottom", this.emptyText = "No actions", this.onOpen = () => {
+    super(...arguments), this.activeIndex = -1, this.items = [], this.variant = "primary", this.size = "medium", this.disabled = !1, this.icon = "", this.menuLabel = void 0, this.preferredPlacement = "bottom", this.emptyText = void 0, this.onOpen = () => {
       this.moveTo(m(this.items));
     }, this.onClose = () => {
       const t = this.shadowRoot?.activeElement;
@@ -25,7 +26,7 @@ class e extends h {
         ArrowDown: () => u(this.items, this.activeIndex, 1),
         ArrowUp: () => u(this.items, this.activeIndex, -1),
         Home: () => m(this.items),
-        End: () => $(this.items)
+        End: () => I(this.items)
       }[t.key];
       l && (t.preventDefault(), this.moveTo(l()));
     };
@@ -33,7 +34,7 @@ class e extends h {
   static {
     this.styles = [
       h.styles,
-      f`
+      g`
       :host {
         display: inline-flex;
         vertical-align: middle;
@@ -147,7 +148,7 @@ class e extends h {
     t < 0 || (this.activeIndex = t, await this.updateComplete, this.row(t)?.focus());
   }
   choose(t) {
-    t.disabled || (this.hide(), x(this, "kt-select", { value: t.id, item: t }));
+    t.disabled || (this.hide(), k(this, "kt-select", { value: t.id, item: t }));
   }
   /**
    * A click anywhere in the menu stops here. It originates inside this
@@ -168,15 +169,15 @@ class e extends h {
   renderItem(t, r) {
     return a`<button
       part="item"
-      class=${y({ item: !0, danger: t.variant === "danger" })}
+      class=${w({ item: !0, danger: t.variant === "danger" })}
       type="button"
       role="menuitem"
       tabindex=${r === this.activeIndex ? 0 : -1}
-      aria-disabled=${t.disabled ? "true" : c}
+      aria-disabled=${t.disabled ? "true" : p}
       @click=${() => this.choose(t)}
     >
-      ${t.icon ? a`<kt-icon name=${t.icon} size=${v[this.size]}></kt-icon>` : c}
-      ${k(t)}
+      ${t.icon ? a`<kt-icon name=${t.icon} size=${b[this.size]}></kt-icon>` : p}
+      ${$(t)}
     </button>`;
   }
   render() {
@@ -191,7 +192,7 @@ class e extends h {
         size=${this.size}
         ?disabled=${this.disabled}
       >
-        ${this.icon ? a`<kt-icon name=${this.icon} size=${v[this.size]}></kt-icon>` : c}
+        ${this.icon ? a`<kt-icon name=${this.icon} size=${b[this.size]}></kt-icon>` : p}
         <slot></slot>
       </kt-button>
@@ -210,26 +211,26 @@ class e extends h {
           variant=${this.variant}
           size=${this.size}
           icon="chevron-down"
-          label=${this.menuLabel}
+          label=${this.menuLabel ?? v().moreActions}
           ?disabled=${this.disabled}
           @click=${this.onCaretClick}
         ></kt-button>
         <div slot="panel" part="menu" class="menu" role="menu" @keydown=${this.onMenuKeyDown}>
-          ${this.items.length > 0 ? this.items.map((t, r) => this.renderItem(t, r)) : a`<div class="empty">${this.emptyText}</div>`}
+          ${this.items.length > 0 ? this.items.map((t, r) => this.renderItem(t, r)) : a`<div class="empty">${this.emptyText ?? v().noActions}</div>`}
         </div>
       </kt-dropdown>
     </div>`;
   }
 }
 i([
-  b("kt-dropdown")
+  f("kt-dropdown")
 ], e.prototype, "dropdown");
 i([
-  b(".caret")
+  f(".caret")
 ], e.prototype, "caret");
 i([
-  g()
+  y()
 ], e.prototype, "activeIndex");
 i([
   o({ attribute: !1 })
@@ -255,7 +256,7 @@ i([
 i([
   o({ type: String, attribute: "empty-text" })
 ], e.prototype, "emptyText");
-w("kt-split-button", e);
+x("kt-split-button", e);
 export {
   e as KtSplitButton
 };

package/dist/components/core/kt-split-button/kt-split-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-split-button.js","sources":["../../../../src/components/core/kt-split-button/kt-split-button.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 {\n firstEnabledIndex,\n lastEnabledIndex,\n nextEnabledIndex,\n optionLabel,\n type KtOption,\n} from '#internal/listbox';\nimport type { KtButtonSize, KtButtonVariant } from '../kt-button/kt-button.js';\nimport type { KtDropdown, KtDropdownPlacement } from '../../overlays/kt-dropdown/kt-dropdown.js';\nimport '../kt-button/kt-button.js';\nimport '../kt-icon/kt-icon.js';\nimport '../../overlays/kt-dropdown/kt-dropdown.js';\n\n/** A row of the menu. `danger` tints it, for the one action to think twice about. /\nexport interface KtSplitButtonItem extends KtOption {\n readonly icon?: string;\n readonly variant?: 'default' \| 'danger';\n}\n\n/* Icon size per button size, matching `<kt-button>`. /\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/\n One button carrying a menu of related actions.\n \n The body runs the action a user wants nine times out of ten and emits a\n * plain `click`; the caret opens the rest. Reach for it when the alternatives\n * are variations on the same action — \"Save and close\", \"Save a copy\" — and\n * for an unrelated set of actions use `<kt-dropdown>` instead, which has no\n * default action to promote.\n \n A caret press never reads as a `click` on the host, so a single `click`\n * listener means the primary action and nothing else.\n \n @element kt-split-button\n \n @slot - The primary action's label.\n \n @csspart action - The primary `<kt-button>`.\n * @csspart caret - The `<kt-button>` that opens the menu.\n * @csspart menu - The list of rows.\n * @csspart item - A menu row.\n \n @fires kt-select - A menu row was chosen. `detail: { value, item }`.\n * @fires kt-open - The menu opened.\n * @fires kt-close - The menu closed.\n \n @example\n * ```html\n * <kt-split-button>Save</kt-split-button>\n * ```\n * ```js\n * el.items = [\n * { id: 'close', label: 'Save and close' },\n * { id: 'discard', label: 'Discard', variant: 'danger' },\n * ];\n * el.addEventListener('kt-select', (e) => run(e.detail.value));\n * ```\n /\nexport class KtSplitButton extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n }\n\n / A hairline of the page showing through is the seam between the two\n segments — the same trick the rest of the system uses for elevation,\n where a border would have been. /\n .split {\n display: inline-flex;\n align-items: stretch;\n gap: var(--border-width);\n }\n\n .action::part(button) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .caret::part(button) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n gap: var(--gap-element);\n max-height: 208px;\n overflow: auto;\n scrollbar-width: thin;\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--gap-button);\n width: 100%;\n padding: var(--padding-expand-item);\n color: var(--text-muted);\n font: var(--font-normal-regular);\n text-align: left;\n background: none;\n border: none;\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n\n .item:hover {\n color: var(--text-body);\n background: var(--surface-hover);\n }\n\n / Inset, so the ring is never clipped by the panel it scrolls inside. /\n .item:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: calc(-1 var(--outline-width));\n }\n\n .item.danger {\n color: var(--color-danger-text);\n }\n .item.danger:hover {\n color: var(--color-danger-text);\n background: var(--color-danger-soft);\n }\n\n .item[aria-disabled='true'] {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n .item[aria-disabled='true']:hover {\n color: var(--text-disabled);\n background: 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('kt-dropdown')\n private dropdown?: KtDropdown;\n\n @query('.caret')\n private caret?: HTMLElement & { focus(): void };\n\n /** The row the roving tabindex currently sits on. /\n @state()\n private activeIndex = -1;\n\n /* The menu rows. /\n @property({ attribute: false })\n items: readonly KtSplitButtonItem[] = [];\n\n /* Visual variant, forwarded to both segments. /\n @property({ type: String, reflect: true })\n variant: KtButtonVariant = 'primary';\n\n /* Height, forwarded to both segments. /\n @property({ type: String, reflect: true })\n size: KtButtonSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Lucide icon name for the primary segment. /\n @property({ type: String })\n icon = '';\n\n /* Accessible name of the caret, which has no text of its own. /\n @property({ type: String, attribute: 'menu-label' })\n menuLabel = 'More actions';\n\n /* Where to put the menu when there is room on both sides. /\n @property({ type: String, attribute: 'preferred-placement' })\n preferredPlacement: KtDropdownPlacement = 'bottom';\n\n @property({ type: String, attribute: 'empty-text' })\n emptyText = 'No actions';\n\n /* Whether the menu is showing. /\n get isOpen(): boolean {\n return this.dropdown?.isOpen ?? false;\n }\n\n /* Opens the menu. /\n show(): void {\n this.dropdown?.show();\n }\n\n /* Closes it. /\n hide(): void {\n this.dropdown?.hide();\n }\n\n /* Either. /\n toggle(): void {\n this.dropdown?.toggle();\n }\n\n /* Moves focus to the primary segment. /\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector<HTMLElement>('.action')?.focus(options);\n }\n\n private row(index: number): HTMLElement \| null {\n return this.shadowRoot?.querySelectorAll<HTMLElement>('.item')[index] ?? null;\n }\n\n /* Lands the roving tabindex on `index` and takes focus there. /\n private async moveTo(index: number): Promise<void> {\n if (index < 0) return;\n this.activeIndex = index;\n await this.updateComplete;\n this.row(index)?.focus();\n }\n\n private onOpen = (): void => {\n void this.moveTo(firstEnabledIndex(this.items));\n };\n\n /\n Returns focus to the caret, but only when it was inside the menu — an\n * outside click already moved it somewhere the user chose, and pulling it\n * back here would undo that.\n /\n private onClose = (): void => {\n const active = this.shadowRoot?.activeElement;\n this.activeIndex = -1;\n if (active instanceof HTMLElement && active.classList.contains('item')) this.caret?.focus();\n };\n\n private onMenuKeyDown = (event: KeyboardEvent): void => {\n const moves: Record<string, () => number> = {\n ArrowDown: () => nextEnabledIndex(this.items, this.activeIndex, 1),\n ArrowUp: () => nextEnabledIndex(this.items, this.activeIndex, -1),\n Home: () => firstEnabledIndex(this.items),\n End: () => lastEnabledIndex(this.items),\n };\n\n const move = moves[event.key];\n if (!move) return;\n\n event.preventDefault();\n void this.moveTo(move());\n };\n\n private choose(item: KtSplitButtonItem): void {\n if (item.disabled) return;\n this.hide();\n emit(this, 'kt-select', { value: item.id, item });\n }\n\n /\n A click anywhere in the menu stops here. It originates inside this\n * element's shadow root, so without this it would surface on the host as a\n * `click` and be mistaken for the primary action.\n /\n private containClick(event: Event): void {\n event.stopPropagation();\n }\n\n /\n The caret drives the panel itself rather than leaning on the click\n * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here\n * keeps the press off the host, and leaving it to bubble would toggle twice.\n */\n private onCaretClick(event: Event): void {\n event.stopPropagation();\n this.toggle();\n }\n\n private renderItem(item: KtSplitButtonItem, index: number): TemplateResult {\n return html`<button\n part=\"item\"\n class=${classMap({ item: true, danger: item.variant === 'danger' })}\n type=\"button\"\n role=\"menuitem\"\n tabindex=${index === this.activeIndex ? 0 : -1}\n aria-disabled=${item.disabled ? 'true' : nothing}\n @click=${() => this.choose(item)}\n >\n ${\n item.icon\n ? html`<kt-icon name=${item.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing\n }\n ${optionLabel(item)}\n </button>`;\n }\n\n override render(): TemplateResult {\n return html`<div class=\"split\">\n <!-- The icon is slotted rather than passed as \\`icon\\`: <kt-button> reads\n its own text content to decide whether it is icon-only, and a <slot>\n has none, so setting \\`icon\\` here would collapse it to a square. -->\n <kt-button\n part=\"action\"\n class=\"action\"\n variant=${this.variant}\n size=${this.size}\n ?disabled=${this.disabled}\n >\n ${\n this.icon\n ? html`<kt-icon name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing\n }\n <slot></slot>\n </kt-button>\n\n <kt-dropdown\n align=\"end\"\n preferred-placement=${this.preferredPlacement}\n ?disabled=${this.disabled}\n @click=${this.containClick}\n @kt-open=${this.onOpen}\n @kt-close=${this.onClose}\n >\n <kt-button\n slot=\"trigger\"\n part=\"caret\"\n class=\"caret\"\n variant=${this.variant}\n size=${this.size}\n icon=\"chevron-down\"\n label=${this.menuLabel}\n ?disabled=${this.disabled}\n @click=${this.onCaretClick}\n ></kt-button>\n\n <div slot=\"panel\" part=\"menu\" class=\"menu\" role=\"menu\" @keydown=${this.onMenuKeyDown}>\n ${\n this.items.length > 0\n ? this.items.map((item, index) => this.renderItem(item, index))\n : html`<div class=\"empty\">${this.emptyText}</div>`\n }\n </div>\n </kt-dropdown>\n </div>`;\n }\n}\n\ndefineElement('kt-split-button', KtSplitButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-split-button': KtSplitButton;\n }\n}\n"],"names":["ICON_SIZE","KtSplitButton","KtElement","firstEnabledIndex","active","event","move","nextEnabledIndex","lastEnabledIndex","css","options","index","item","emit","html","classMap","nothing","optionLabel","__decorateClass","query","state","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-split-button.js","sources":["../../../../src/components/core/kt-split-button/kt-split-button.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 {\n firstEnabledIndex,\n lastEnabledIndex,\n nextEnabledIndex,\n optionLabel,\n type KtOption,\n} from '#internal/listbox';\nimport { strings } from '#internal/strings';\nimport type { KtButtonSize, KtButtonVariant } from '../kt-button/kt-button.js';\nimport type { KtDropdown, KtDropdownPlacement } from '../../overlays/kt-dropdown/kt-dropdown.js';\nimport '../kt-button/kt-button.js';\nimport '../kt-icon/kt-icon.js';\nimport '../../overlays/kt-dropdown/kt-dropdown.js';\n\n/** A row of the menu. `danger` tints it, for the one action to think twice about. /\nexport interface KtSplitButtonItem extends KtOption {\n readonly icon?: string;\n readonly variant?: 'default' \| 'danger';\n}\n\n/* Icon size per button size, matching `<kt-button>`. /\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/\n One button carrying a menu of related actions.\n \n The body runs the action a user wants nine times out of ten and emits a\n * plain `click`; the caret opens the rest. Reach for it when the alternatives\n * are variations on the same action — \"Save and close\", \"Save a copy\" — and\n * for an unrelated set of actions use `<kt-dropdown>` instead, which has no\n * default action to promote.\n \n A caret press never reads as a `click` on the host, so a single `click`\n * listener means the primary action and nothing else.\n \n @element kt-split-button\n \n @slot - The primary action's label.\n \n @csspart action - The primary `<kt-button>`.\n * @csspart caret - The `<kt-button>` that opens the menu.\n * @csspart menu - The list of rows.\n * @csspart item - A menu row.\n \n @fires kt-select - A menu row was chosen. `detail: { value, item }`.\n * @fires kt-open - The menu opened.\n * @fires kt-close - The menu closed.\n \n @example\n * ```html\n * <kt-split-button>Save</kt-split-button>\n * ```\n * ```js\n * el.items = [\n * { id: 'close', label: 'Save and close' },\n * { id: 'discard', label: 'Discard', variant: 'danger' },\n * ];\n * el.addEventListener('kt-select', (e) => run(e.detail.value));\n * ```\n /\nexport class KtSplitButton extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n }\n\n / A hairline of the page showing through is the seam between the two\n segments — the same trick the rest of the system uses for elevation,\n where a border would have been. /\n .split {\n display: inline-flex;\n align-items: stretch;\n gap: var(--border-width);\n }\n\n .action::part(button) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .caret::part(button) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n gap: var(--gap-element);\n max-height: 208px;\n overflow: auto;\n scrollbar-width: thin;\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--gap-button);\n width: 100%;\n padding: var(--padding-expand-item);\n color: var(--text-muted);\n font: var(--font-normal-regular);\n text-align: left;\n background: none;\n border: none;\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n\n .item:hover {\n color: var(--text-body);\n background: var(--surface-hover);\n }\n\n / Inset, so the ring is never clipped by the panel it scrolls inside. /\n .item:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: calc(-1 var(--outline-width));\n }\n\n .item.danger {\n color: var(--color-danger-text);\n }\n .item.danger:hover {\n color: var(--color-danger-text);\n background: var(--color-danger-soft);\n }\n\n .item[aria-disabled='true'] {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n .item[aria-disabled='true']:hover {\n color: var(--text-disabled);\n background: 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('kt-dropdown')\n private dropdown?: KtDropdown;\n\n @query('.caret')\n private caret?: HTMLElement & { focus(): void };\n\n /** The row the roving tabindex currently sits on. /\n @state()\n private activeIndex = -1;\n\n /* The menu rows. /\n @property({ attribute: false })\n items: readonly KtSplitButtonItem[] = [];\n\n /* Visual variant, forwarded to both segments. /\n @property({ type: String, reflect: true })\n variant: KtButtonVariant = 'primary';\n\n /* Height, forwarded to both segments. /\n @property({ type: String, reflect: true })\n size: KtButtonSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Lucide icon name for the primary segment. /\n @property({ type: String })\n icon = '';\n\n /* Accessible name of the caret, which has no text of its own. /\n @property({ type: String, attribute: 'menu-label' })\n menuLabel: string \| undefined = undefined;\n\n /* Where to put the menu when there is room on both sides. /\n @property({ type: String, attribute: 'preferred-placement' })\n preferredPlacement: KtDropdownPlacement = 'bottom';\n\n @property({ type: String, attribute: 'empty-text' })\n emptyText: string \| undefined = undefined;\n\n /* Whether the menu is showing. /\n get isOpen(): boolean {\n return this.dropdown?.isOpen ?? false;\n }\n\n /* Opens the menu. /\n show(): void {\n this.dropdown?.show();\n }\n\n /* Closes it. /\n hide(): void {\n this.dropdown?.hide();\n }\n\n /* Either. /\n toggle(): void {\n this.dropdown?.toggle();\n }\n\n /* Moves focus to the primary segment. /\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector<HTMLElement>('.action')?.focus(options);\n }\n\n private row(index: number): HTMLElement \| null {\n return this.shadowRoot?.querySelectorAll<HTMLElement>('.item')[index] ?? null;\n }\n\n /* Lands the roving tabindex on `index` and takes focus there. /\n private async moveTo(index: number): Promise<void> {\n if (index < 0) return;\n this.activeIndex = index;\n await this.updateComplete;\n this.row(index)?.focus();\n }\n\n private onOpen = (): void => {\n void this.moveTo(firstEnabledIndex(this.items));\n };\n\n /\n Returns focus to the caret, but only when it was inside the menu — an\n * outside click already moved it somewhere the user chose, and pulling it\n * back here would undo that.\n /\n private onClose = (): void => {\n const active = this.shadowRoot?.activeElement;\n this.activeIndex = -1;\n if (active instanceof HTMLElement && active.classList.contains('item')) this.caret?.focus();\n };\n\n private onMenuKeyDown = (event: KeyboardEvent): void => {\n const moves: Record<string, () => number> = {\n ArrowDown: () => nextEnabledIndex(this.items, this.activeIndex, 1),\n ArrowUp: () => nextEnabledIndex(this.items, this.activeIndex, -1),\n Home: () => firstEnabledIndex(this.items),\n End: () => lastEnabledIndex(this.items),\n };\n\n const move = moves[event.key];\n if (!move) return;\n\n event.preventDefault();\n void this.moveTo(move());\n };\n\n private choose(item: KtSplitButtonItem): void {\n if (item.disabled) return;\n this.hide();\n emit(this, 'kt-select', { value: item.id, item });\n }\n\n /\n A click anywhere in the menu stops here. It originates inside this\n * element's shadow root, so without this it would surface on the host as a\n * `click` and be mistaken for the primary action.\n /\n private containClick(event: Event): void {\n event.stopPropagation();\n }\n\n /\n The caret drives the panel itself rather than leaning on the click\n * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here\n * keeps the press off the host, and leaving it to bubble would toggle twice.\n */\n private onCaretClick(event: Event): void {\n event.stopPropagation();\n this.toggle();\n }\n\n private renderItem(item: KtSplitButtonItem, index: number): TemplateResult {\n return html`<button\n part=\"item\"\n class=${classMap({ item: true, danger: item.variant === 'danger' })}\n type=\"button\"\n role=\"menuitem\"\n tabindex=${index === this.activeIndex ? 0 : -1}\n aria-disabled=${item.disabled ? 'true' : nothing}\n @click=${() => this.choose(item)}\n >\n ${\n item.icon\n ? html`<kt-icon name=${item.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing\n }\n ${optionLabel(item)}\n </button>`;\n }\n\n override render(): TemplateResult {\n return html`<div class=\"split\">\n <!-- The icon is slotted rather than passed as \\`icon\\`: <kt-button> reads\n its own text content to decide whether it is icon-only, and a <slot>\n has none, so setting \\`icon\\` here would collapse it to a square. -->\n <kt-button\n part=\"action\"\n class=\"action\"\n variant=${this.variant}\n size=${this.size}\n ?disabled=${this.disabled}\n >\n ${\n this.icon\n ? html`<kt-icon name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing\n }\n <slot></slot>\n </kt-button>\n\n <kt-dropdown\n align=\"end\"\n preferred-placement=${this.preferredPlacement}\n ?disabled=${this.disabled}\n @click=${this.containClick}\n @kt-open=${this.onOpen}\n @kt-close=${this.onClose}\n >\n <kt-button\n slot=\"trigger\"\n part=\"caret\"\n class=\"caret\"\n variant=${this.variant}\n size=${this.size}\n icon=\"chevron-down\"\n label=${this.menuLabel ?? strings().moreActions}\n ?disabled=${this.disabled}\n @click=${this.onCaretClick}\n ></kt-button>\n\n <div slot=\"panel\" part=\"menu\" class=\"menu\" role=\"menu\" @keydown=${this.onMenuKeyDown}>\n ${\n this.items.length > 0\n ? this.items.map((item, index) => this.renderItem(item, index))\n : html`<div class=\"empty\">${this.emptyText ?? strings().noActions}</div>`\n }\n </div>\n </kt-dropdown>\n </div>`;\n }\n}\n\ndefineElement('kt-split-button', KtSplitButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-split-button': KtSplitButton;\n }\n}\n"],"names":["ICON_SIZE","KtSplitButton","KtElement","firstEnabledIndex","active","event","move","nextEnabledIndex","lastEnabledIndex","css","options","index","item","emit","html","classMap","nothing","optionLabel","strings","__decorateClass","query","state","property","defineElement"],"mappings":"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"}

package/dist/components/data/kt-chart/kt-chart.d.ts CHANGED Viewed

@@ -87,9 +87,9 @@ export declare class KtChart extends KtElement {
     /** Pins the top of the value axis. */
     max: number | null;
     /** Names the total in the middle of a doughnut. */
-    centerLabel: string;
+    centerLabel: string | undefined;
     /** Names the sum in a stacked chart's tooltip and table. */
-    totalLabel: string;
+    totalLabel: string | undefined;
     /** Accessible name. Say what the chart shows. */
     label: string;
     connectedCallback(): void;