npm - kanto-ds - Versions diffs - 1.0.0 → 1.1.0 - Mend

kanto-ds 1.0.0 → 1.1.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 (113) hide show

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

@@ -1,17 +1,17 @@
 import { css as h, html as d, nothing as i } from "lit";
-import { property as a } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { property as e } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { K as u, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
 import "../kt-icon/kt-icon.js";
-var g = Object.defineProperty, e = (l, r, o, y) => {
+var g = Object.defineProperty, a = (l, t, o, y) => {
   for (var n = void 0, c = l.length - 1, s; c >= 0; c--)
-    (s = l[c]) && (n = s(r, o, n) || n);
-  return n && g(r, o, n), n;
+    (s = l[c]) && (n = s(t, o, n) || n);
+  return n && g(t, o, n), n;
 };
-const p = { small: 16, medium: 20, large: 24 };
-class t extends u {
+const b = { small: 16, medium: 20, large: 24 };
+class r extends u {
   constructor() {
-    super(...arguments), this.variant = "primary", this.size = "medium", this.disabled = !1, this.type = "button", this.icon = "", this.iconPosition = "left", this.label = "", this.fullWidth = !1, this.name = "", this.value = "";
+    super(...arguments), this.variant = "primary", this.size = "medium", this.disabled = !1, this.type = "button", this.icon = "", this.iconPosition = "left", this.label = "", this.popup = void 0, this.expanded = void 0, this.fullWidth = !1, this.name = "", this.value = "";
   }
   static {
     this.styles = [
@@ -71,7 +71,7 @@ class t extends u {
       }
       .secondary {
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         background-color: var(--color-primary-soft);
       }
       .secondary:hover {
@@ -82,7 +82,7 @@ class t extends u {
       }
       .secondary-no-bg {
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         background: none;
       }
       .secondary-no-bg:hover {
@@ -104,7 +104,7 @@ class t extends u {
       }
       .danger {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
         background-color: var(--color-danger-soft);
       }
       .danger:hover {
@@ -116,14 +116,14 @@ class t extends u {
       .delete {
         color: var(--color-white);
-        background-color: var(--color-navigation-icon-close);
+        background-color: var(--color-danger-solid);
       }
       .delete:hover {
-        background-color: var(--color-danger-base);
+        background-color: var(--color-danger-solid-hover);
       }
       .warning {
-        color: var(--color-warning-base);
+        color: var(--color-warning-text);
         background-color: var(--color-warning-soft);
       }
       .warning:hover {
@@ -131,7 +131,7 @@ class t extends u {
       }
       .info {
-        color: var(--color-info-base);
+        color: var(--color-info-text);
         background-color: var(--color-info-soft);
       }
       .info:hover {
@@ -139,7 +139,7 @@ class t extends u {
       }
       .success {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
         background-color: var(--color-success-soft);
       }
       .success:hover {
@@ -149,7 +149,7 @@ class t extends u {
       .text {
         height: auto;
         padding: 0;
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         background: none;
       }
       .text:active {
@@ -186,8 +186,8 @@ class t extends u {
     ];
   }
   /** Moves focus to the button. */
-  focus(r) {
-    this.shadowRoot?.querySelector("button")?.focus(r);
+  focus(t) {
+    this.shadowRoot?.querySelector("button")?.focus(t);
   }
   blur() {
     this.shadowRoot?.querySelector("button")?.blur();
@@ -202,30 +202,32 @@ class t extends u {
    * `name`/`value` into the submission the way an author expects.
    */
   submitEnclosingForm() {
-    const r = this.closest("form");
-    if (!r) return;
+    const t = this.closest("form");
+    if (!t) return;
     const o = document.createElement("button");
-    o.type = this.type, o.hidden = !0, this.name && (o.name = this.name), this.value && (o.value = this.value), r.append(o), o.click(), o.remove();
+    o.type = this.type, o.hidden = !0, this.name && (o.name = this.name), this.value && (o.value = this.value), t.append(o), o.click(), o.remove();
   }
-  onClick(r) {
+  onClick(t) {
     if (this.disabled) {
-      r.preventDefault(), r.stopPropagation();
+      t.preventDefault(), t.stopPropagation();
       return;
     }
     this.type !== "button" && this.submitEnclosingForm();
   }
   render() {
-    const r = !!this.icon && !this.hasLabelText, o = this.icon ? d`<kt-icon part="icon" name=${this.icon} size=${p[this.size]}></kt-icon>` : i;
+    const t = !!this.icon && !this.hasLabelText, o = this.icon ? d`<kt-icon part="icon" name=${this.icon} size=${b[this.size]}></kt-icon>` : i;
     return d`<button
       part="button"
-      class=${v({
+      class=${p({
       [this.variant]: !0,
       [this.size]: !0,
-      "icon-only": r
+      "icon-only": t
     })}
       type=${this.type}
       ?disabled=${this.disabled}
       aria-label=${this.label || i}
+      aria-haspopup=${this.popup ?? i}
+      aria-expanded=${this.expanded === void 0 ? i : String(this.expanded)}
       @click=${this.onClick}
     >
       ${this.iconPosition === "left" ? o : i}
@@ -234,38 +236,44 @@ class t extends u {
     </button>`;
   }
 }
-e([
-  a({ type: String, reflect: !0 })
-], t.prototype, "variant");
-e([
-  a({ type: String, reflect: !0 })
-], t.prototype, "size");
-e([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-e([
-  a({ type: String })
-], t.prototype, "type");
-e([
-  a({ type: String })
-], t.prototype, "icon");
-e([
-  a({ type: String, attribute: "icon-position" })
-], t.prototype, "iconPosition");
-e([
-  a({ type: String })
-], t.prototype, "label");
-e([
-  a({ type: Boolean, reflect: !0, attribute: "full-width" })
-], t.prototype, "fullWidth");
-e([
-  a({ type: String })
-], t.prototype, "name");
-e([
-  a({ type: String })
-], t.prototype, "value");
-b("kt-button", t);
+a([
+  e({ type: String, reflect: !0 })
+], r.prototype, "variant");
+a([
+  e({ type: String, reflect: !0 })
+], r.prototype, "size");
+a([
+  e({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+a([
+  e({ type: String })
+], r.prototype, "type");
+a([
+  e({ type: String })
+], r.prototype, "icon");
+a([
+  e({ type: String, attribute: "icon-position" })
+], r.prototype, "iconPosition");
+a([
+  e({ type: String })
+], r.prototype, "label");
+a([
+  e({ attribute: !1 })
+], r.prototype, "popup");
+a([
+  e({ attribute: !1 })
+], r.prototype, "expanded");
+a([
+  e({ type: Boolean, reflect: !0, attribute: "full-width" })
+], r.prototype, "fullWidth");
+a([
+  e({ type: String })
+], r.prototype, "name");
+a([
+  e({ type: String })
+], r.prototype, "value");
+v("kt-button", r);
 export {
-  t as KtButton
+  r as KtButton
 };
 //# sourceMappingURL=kt-button.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-button.js","sources":["../../../../src/components/core/kt-button/kt-button.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../kt-icon/kt-icon.js';\n\nexport type KtButtonVariant =\n \| 'primary'\n \| 'secondary'\n \| 'secondary-no-bg'\n \| 'dark'\n \| 'danger'\n \| 'delete'\n \| 'warning'\n \| 'info'\n \| 'success'\n \| 'text';\n\nexport type KtButtonSize = 'small' \| 'medium' \| 'large';\nexport type KtButtonType = 'button' \| 'submit' \| 'reset';\n\n/** Icon size per button size, so the glyph stays optically balanced. /\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/\n The Kanto action button.\n \n Ten variants; `primary` for the one action a screen is about, `secondary`\n * (a soft indigo tint) for everything supporting it. The semantic variants —\n * `danger`, `warning`, `info`, `success` — are tinted fills with coloured\n * text; `delete` is the only solid red, reserved for irreversible actions.\n \n Setting `icon` with no slotted text produces a square icon-only button,\n * which then requires a `label`.\n \n @element kt-button\n \n @slot - The button label.\n \n @csspart button - The native `<button>`.\n * @csspart icon - The icon, when `icon` is set.\n \n @example\n * ```html\n * <kt-button icon=\"plus\">New entity</kt-button>\n * <kt-button variant=\"secondary\" icon=\"refresh-cw\">Refresh</kt-button>\n * <kt-button variant=\"danger\">Delete</kt-button>\n * ```\n /\nexport class KtButton extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n }\n\n :host([full-width]) {\n display: flex;\n width: 100%;\n }\n\n button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--button-height);\n padding: 0 var(--button-padding-x);\n gap: var(--gap-button);\n border: none;\n border-radius: var(--border-radius);\n font: var(--font-normal-regular);\n cursor: pointer;\n transition:\n background-color var(--duration-instant),\n color var(--duration-instant);\n }\n\n / === SIZES === /\n .small {\n height: var(--button-height-small);\n padding: 0 8px;\n font: var(--font-normal-small);\n }\n\n .large {\n height: var(--button-height-large);\n padding: 0 calc(var(--button-padding-x) + 8px);\n font: var(--font-normal-medium);\n }\n\n / === VARIANTS ===\n Press returns to the base colour; Kanto has no scale or shrink. /\n .primary {\n color: var(--color-white);\n background-color: var(--color-primary-base);\n }\n .primary:hover {\n background-color: var(--color-primary-hover);\n }\n .primary:active {\n background-color: var(--color-primary-base);\n }\n\n .secondary {\n color: var(--color-primary-base);\n background-color: var(--color-primary-soft);\n }\n .secondary:hover {\n background-color: var(--color-secondary-hover);\n }\n .secondary:active {\n background-color: var(--color-primary-soft);\n }\n\n .secondary-no-bg {\n color: var(--color-primary-base);\n background: none;\n }\n .secondary-no-bg:hover {\n background-color: var(--color-secondary-hover);\n }\n .secondary-no-bg:active {\n background-color: var(--color-dark-14);\n }\n\n .dark {\n color: var(--color-text-400);\n background-color: var(--color-dark-20);\n }\n .dark:hover {\n background-color: var(--color-dark-22);\n }\n .dark:active {\n background-color: var(--color-dark-20);\n }\n\n .danger {\n color: var(--color-danger-base);\n background-color: var(--color-danger-soft);\n }\n .danger:hover {\n background-color: var(--color-danger-hover);\n }\n .danger:active {\n background-color: var(--color-danger-soft);\n }\n\n .delete {\n color: var(--color-white);\n background-color: var(--color-navigation-icon-close);\n }\n .delete:hover {\n background-color: var(--color-danger-base);\n }\n\n .warning {\n color: var(--color-warning-base);\n background-color: var(--color-warning-soft);\n }\n .warning:hover {\n background-color: var(--color-warning-hover);\n }\n\n .info {\n color: var(--color-info-base);\n background-color: var(--color-info-soft);\n }\n .info:hover {\n background-color: var(--color-info-hover);\n }\n\n .success {\n color: var(--color-success-base);\n background-color: var(--color-success-soft);\n }\n .success:hover {\n background-color: var(--color-success-hover);\n }\n\n .text {\n height: auto;\n padding: 0;\n color: var(--color-primary-base);\n background: none;\n }\n .text:active {\n background-color: var(--color-dark-14);\n }\n\n / === ICON-ONLY === /\n .icon-only {\n width: var(--button-height);\n padding: 0;\n }\n .icon-only.small {\n width: var(--button-height-small);\n }\n .icon-only.large {\n width: var(--button-height-large);\n }\n\n / === DISABLED === /\n button:disabled {\n color: var(--text-disabled);\n background-color: var(--color-dark-14);\n cursor: not-allowed;\n }\n button:disabled:hover {\n background-color: var(--color-dark-14);\n }\n\n button:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n }\n `,\n ];\n\n /* Visual variant. /\n @property({ type: String, reflect: true })\n variant: KtButtonVariant = 'primary';\n\n /* Height: 32 / 40 / 48px at the desktop scale. /\n @property({ type: String, reflect: true })\n size: KtButtonSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Native button behaviour. `submit` and `reset` act on the enclosing form. /\n @property({ type: String })\n type: KtButtonType = 'button';\n\n /* Lucide icon name, kebab-case. /\n @property({ type: String })\n icon = '';\n\n /* Which side of the label the icon sits on. /\n @property({ type: String, attribute: 'icon-position' })\n iconPosition: 'left' \| 'right' = 'left';\n\n /* Accessible name. Required for an icon-only button. /\n @property({ type: String })\n label = '';\n\n /* Stretches the button to the width of its container. /\n @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n fullWidth = false;\n\n /* Submitted with the form, as on a native button. /\n @property({ type: String })\n name = '';\n\n /* @see name /\n @property({ type: String })\n value = '';\n\n /* Moves focus to the button. /\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector('button')?.focus(options);\n }\n\n override blur(): void {\n this.shadowRoot?.querySelector('button')?.blur();\n }\n\n private get hasLabelText(): boolean {\n return this.textContent !== null && this.textContent.trim().length > 0;\n }\n\n /\n A button inside a shadow root is invisible to the enclosing form, so\n * `type=\"submit\"` would do nothing. Click a throwaway native button instead:\n * that runs constraint validation, fires a real `submit` event, and carries\n * `name`/`value` into the submission the way an author expects.\n */\n private submitEnclosingForm(): void {\n const form = this.closest('form');\n if (!form) return;\n\n const proxy = document.createElement('button');\n proxy.type = this.type;\n proxy.hidden = true;\n if (this.name) proxy.name = this.name;\n if (this.value) proxy.value = this.value;\n\n form.append(proxy);\n proxy.click();\n proxy.remove();\n }\n\n private onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n if (this.type !== 'button') this.submitEnclosingForm();\n }\n\n override render(): TemplateResult {\n const iconOnly = Boolean(this.icon) && !this.hasLabelText;\n const icon = this.icon\n ? html`<kt-icon part=\"icon\" name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing;\n\n return html`<button\n part=\"button\"\n class=${classMap({\n [this.variant]: true,\n [this.size]: true,\n 'icon-only': iconOnly,\n })}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${this.label \|\| nothing}\n @click=${this.onClick}\n >\n ${this.iconPosition === 'left' ? icon : nothing}\n <slot></slot>\n ${this.iconPosition === 'right' ? icon : nothing}\n </button>`;\n }\n}\n\ndefineElement('kt-button', KtButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-button': KtButton;\n }\n}\n"],"names":["ICON_SIZE","KtButton","KtElement","css","options","form","proxy","event","iconOnly","icon","html","nothing","classMap","__decorateClass","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-button.js","sources":["../../../../src/components/core/kt-button/kt-button.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../kt-icon/kt-icon.js';\n\nexport type KtButtonVariant =\n \| 'primary'\n \| 'secondary'\n \| 'secondary-no-bg'\n \| 'dark'\n \| 'danger'\n \| 'delete'\n \| 'warning'\n \| 'info'\n \| 'success'\n \| 'text';\n\nexport type KtButtonSize = 'small' \| 'medium' \| 'large';\nexport type KtButtonType = 'button' \| 'submit' \| 'reset';\n\n/** Icon size per button size, so the glyph stays optically balanced. /\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/\n The Kanto action button.\n \n Ten variants; `primary` for the one action a screen is about, `secondary`\n * (a soft indigo tint) for everything supporting it. The semantic variants —\n * `danger`, `warning`, `info`, `success` — are tinted fills with coloured\n * text; `delete` is the only solid red, reserved for irreversible actions.\n \n Setting `icon` with no slotted text produces a square icon-only button,\n * which then requires a `label`.\n \n @element kt-button\n \n @slot - The button label.\n \n @csspart button - The native `<button>`.\n * @csspart icon - The icon, when `icon` is set.\n \n @example\n * ```html\n * <kt-button icon=\"plus\">New entity</kt-button>\n * <kt-button variant=\"secondary\" icon=\"refresh-cw\">Refresh</kt-button>\n * <kt-button variant=\"danger\">Delete</kt-button>\n * ```\n /\nexport class KtButton extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n }\n\n :host([full-width]) {\n display: flex;\n width: 100%;\n }\n\n button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--button-height);\n padding: 0 var(--button-padding-x);\n gap: var(--gap-button);\n border: none;\n border-radius: var(--border-radius);\n font: var(--font-normal-regular);\n cursor: pointer;\n transition:\n background-color var(--duration-instant),\n color var(--duration-instant);\n }\n\n / === SIZES === /\n .small {\n height: var(--button-height-small);\n padding: 0 8px;\n font: var(--font-normal-small);\n }\n\n .large {\n height: var(--button-height-large);\n padding: 0 calc(var(--button-padding-x) + 8px);\n font: var(--font-normal-medium);\n }\n\n / === VARIANTS ===\n Press returns to the base colour; Kanto has no scale or shrink. /\n .primary {\n color: var(--color-white);\n background-color: var(--color-primary-base);\n }\n .primary:hover {\n background-color: var(--color-primary-hover);\n }\n .primary:active {\n background-color: var(--color-primary-base);\n }\n\n .secondary {\n color: var(--color-primary-text);\n background-color: var(--color-primary-soft);\n }\n .secondary:hover {\n background-color: var(--color-secondary-hover);\n }\n .secondary:active {\n background-color: var(--color-primary-soft);\n }\n\n .secondary-no-bg {\n color: var(--color-primary-text);\n background: none;\n }\n .secondary-no-bg:hover {\n background-color: var(--color-secondary-hover);\n }\n .secondary-no-bg:active {\n background-color: var(--color-dark-14);\n }\n\n .dark {\n color: var(--color-text-400);\n background-color: var(--color-dark-20);\n }\n .dark:hover {\n background-color: var(--color-dark-22);\n }\n .dark:active {\n background-color: var(--color-dark-20);\n }\n\n .danger {\n color: var(--color-danger-text);\n background-color: var(--color-danger-soft);\n }\n .danger:hover {\n background-color: var(--color-danger-hover);\n }\n .danger:active {\n background-color: var(--color-danger-soft);\n }\n\n .delete {\n color: var(--color-white);\n background-color: var(--color-danger-solid);\n }\n .delete:hover {\n background-color: var(--color-danger-solid-hover);\n }\n\n .warning {\n color: var(--color-warning-text);\n background-color: var(--color-warning-soft);\n }\n .warning:hover {\n background-color: var(--color-warning-hover);\n }\n\n .info {\n color: var(--color-info-text);\n background-color: var(--color-info-soft);\n }\n .info:hover {\n background-color: var(--color-info-hover);\n }\n\n .success {\n color: var(--color-success-text);\n background-color: var(--color-success-soft);\n }\n .success:hover {\n background-color: var(--color-success-hover);\n }\n\n .text {\n height: auto;\n padding: 0;\n color: var(--color-primary-text);\n background: none;\n }\n .text:active {\n background-color: var(--color-dark-14);\n }\n\n / === ICON-ONLY === /\n .icon-only {\n width: var(--button-height);\n padding: 0;\n }\n .icon-only.small {\n width: var(--button-height-small);\n }\n .icon-only.large {\n width: var(--button-height-large);\n }\n\n / === DISABLED === /\n button:disabled {\n color: var(--text-disabled);\n background-color: var(--color-dark-14);\n cursor: not-allowed;\n }\n button:disabled:hover {\n background-color: var(--color-dark-14);\n }\n\n button:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n }\n `,\n ];\n\n /* Visual variant. /\n @property({ type: String, reflect: true })\n variant: KtButtonVariant = 'primary';\n\n /* Height: 32 / 40 / 48px at the desktop scale. /\n @property({ type: String, reflect: true })\n size: KtButtonSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Native button behaviour. `submit` and `reset` act on the enclosing form. /\n @property({ type: String })\n type: KtButtonType = 'button';\n\n /* Lucide icon name, kebab-case. /\n @property({ type: String })\n icon = '';\n\n /* Which side of the label the icon sits on. /\n @property({ type: String, attribute: 'icon-position' })\n iconPosition: 'left' \| 'right' = 'left';\n\n /* Accessible name. Required for an icon-only button. /\n @property({ type: String })\n label = '';\n\n /\n The kind of popup this button opens, as `aria-haspopup` on the inner\n * button. Set by `<kt-dropdown>` on its trigger; rarely by hand.\n /\n @property({ attribute: false })\n popup: 'menu' \| 'listbox' \| 'dialog' \| undefined = undefined;\n\n /* Whether the popup or region this button controls is open, as `aria-expanded`. /\n @property({ attribute: false })\n expanded: boolean \| undefined = undefined;\n\n /* Stretches the button to the width of its container. /\n @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n fullWidth = false;\n\n /* Submitted with the form, as on a native button. /\n @property({ type: String })\n name = '';\n\n /* @see name /\n @property({ type: String })\n value = '';\n\n /* Moves focus to the button. /\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector('button')?.focus(options);\n }\n\n override blur(): void {\n this.shadowRoot?.querySelector('button')?.blur();\n }\n\n private get hasLabelText(): boolean {\n return this.textContent !== null && this.textContent.trim().length > 0;\n }\n\n /\n A button inside a shadow root is invisible to the enclosing form, so\n * `type=\"submit\"` would do nothing. Click a throwaway native button instead:\n * that runs constraint validation, fires a real `submit` event, and carries\n * `name`/`value` into the submission the way an author expects.\n */\n private submitEnclosingForm(): void {\n const form = this.closest('form');\n if (!form) return;\n\n const proxy = document.createElement('button');\n proxy.type = this.type;\n proxy.hidden = true;\n if (this.name) proxy.name = this.name;\n if (this.value) proxy.value = this.value;\n\n form.append(proxy);\n proxy.click();\n proxy.remove();\n }\n\n private onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n if (this.type !== 'button') this.submitEnclosingForm();\n }\n\n override render(): TemplateResult {\n const iconOnly = Boolean(this.icon) && !this.hasLabelText;\n const icon = this.icon\n ? html`<kt-icon part=\"icon\" name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n : nothing;\n\n return html`<button\n part=\"button\"\n class=${classMap({\n [this.variant]: true,\n [this.size]: true,\n 'icon-only': iconOnly,\n })}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${this.label \|\| nothing}\n aria-haspopup=${this.popup ?? nothing}\n aria-expanded=${this.expanded === undefined ? nothing : String(this.expanded)}\n @click=${this.onClick}\n >\n ${this.iconPosition === 'left' ? icon : nothing}\n <slot></slot>\n ${this.iconPosition === 'right' ? icon : nothing}\n </button>`;\n }\n}\n\ndefineElement('kt-button', KtButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-button': KtButton;\n }\n}\n"],"names":["ICON_SIZE","KtButton","KtElement","css","options","form","proxy","event","iconOnly","icon","html","nothing","classMap","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { css as f, nothing as r, html as d } from "lit";
 import { state as g, property as a } from "lit/decorators.js";
 import { classMap as n } from "lit/directives/class-map.js";
 import { styleMap as u } from "lit/directives/style-map.js";
-import { K as m, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as m, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as b } from "../../../chunks/events-Bjl5Zmmq.js";
 import { h as p } from "../../../chunks/slots-BPbIdxAJ.js";
 var y = Object.defineProperty, i = (s, e, c, k) => {

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

@@ -1,12 +1,12 @@
-import { css as b, nothing as i, html as s } from "lit";
-import { state as u, property as d } from "lit/decorators.js";
-import { K as l, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+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 { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../kt-icon/kt-icon.js";
-var y = Object.defineProperty, r = (c, o, p, f) => {
+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 && y(o, p, e), e;
+  return e && m(o, p, e), e;
 };
 const t = class h extends l {
   constructor() {
@@ -15,7 +15,7 @@ const t = class h extends l {
   static {
     this.styles = [
       l.styles,
-      b`
+      u`
       :host {
         display: block;
       }
@@ -37,7 +37,7 @@ const t = class h extends l {
       }
       .language {
-        color: var(--color-text-500);
+        color: var(--text-muted);
         font: var(--font-normal-small);
         letter-spacing: 1px;
         text-transform: uppercase;
@@ -70,7 +70,7 @@ const t = class h extends l {
       }
       .copied {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
       }
       pre {
@@ -136,7 +136,7 @@ const t = class h extends l {
   }
 };
 r([
-  u()
+  b()
 ], t.prototype, "copied");
 r([
   d({ type: String })
@@ -147,9 +147,9 @@ r([
 r([
   d({ type: String })
 ], t.prototype, "label");
-let m = t;
-v("kt-code", m);
+let y = t;
+v("kt-code", y);
 export {
-  m as KtCode
+  y 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(--~~color-~~text-~~500~~);\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-~~base~~);\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 '../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;"}

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-CcMLO5e8.js";
-import { g as v } from "../../../chunks/registry-X4LS9J5K.js";
+import { K as m, d as u } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { g as v } from "../../../chunks/defaults-DKzFsNbv.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,10 +1,10 @@
-import { css as c, html as o } from "lit";
+import { css as c, html as i } from "lit";
 import { property as p } from "lit/decorators.js";
-import { K as l, d as f } from "../../../chunks/kt-element-CcMLO5e8.js";
-var m = Object.defineProperty, d = (a, t, e, y) => {
-  for (var r = void 0, s = a.length - 1, n; s >= 0; s--)
-    (n = a[s]) && (r = n(t, e, r) || r);
-  return r && m(t, e, r), r;
+import { K as l, d as m } from "../../../chunks/kt-element-B_jjQDhg.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);
+  return r && f(t, e, r), r;
 };
 const b = {
   mod: "⌘",
@@ -29,7 +29,7 @@ const b = {
   escape: "Esc",
   backspace: "Backspace"
 };
-class i extends l {
+class n extends l {
   constructor() {
     super(...arguments), this.keys = "", this.platform = "auto";
   }
@@ -51,7 +51,7 @@ class i extends l {
         min-width: 20px;
         height: 20px;
         padding: 0 5px;
-        color: var(--color-text-500);
+        color: var(--text-muted);
         font: var(--font-normal-small);
         font-family: var(--font-family-body);
         background: var(--surface-card);
@@ -71,19 +71,19 @@ class i extends l {
   }
   render() {
     const t = this.labels;
-    return o`<span part="base" style="display:contents">
-      ${t.length > 0 ? t.map((e) => o`<kbd part="key">${e}</kbd>`) : o`<kbd part="key"><slot></slot></kbd>`}
+    return i`<span part="base" style="display:contents">
+      ${t.length > 0 ? t.map((e) => i`<kbd part="key">${e}</kbd>`) : i`<kbd part="key"><slot></slot></kbd>`}
     </span>`;
   }
 }
 d([
   p({ type: String })
-], i.prototype, "keys");
+], n.prototype, "keys");
 d([
   p({ type: String })
-], i.prototype, "platform");
-f("kt-kbd", i);
+], n.prototype, "platform");
+m("kt-kbd", n);
 export {
-  i as KtKbd
+  n as KtKbd
 };
 //# sourceMappingURL=kt-kbd.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-kbd.js","sources":["../../../../src/components/core/kt-kbd/kt-kbd.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/*\n Symbols people actually recognise, per platform.\n \n `mod` is the one to reach for: it means \"the primary shortcut modifier\",\n * which is Command on a Mac and Control everywhere else. `meta` stays honest —\n * on Windows the Meta key really is the Windows key, and printing \"Ctrl\" for it\n * would send the reader to the wrong key.\n /\nconst MAC: Record<string, string> = {\n mod: '⌘',\n meta: '⌘',\n cmd: '⌘',\n ctrl: '⌃',\n alt: '⌥',\n option: '⌥',\n shift: '⇧',\n enter: '↵',\n escape: 'esc',\n backspace: '⌫',\n};\n\nconst OTHER: Record<string, string> = {\n mod: 'Ctrl',\n meta: 'Win',\n cmd: 'Ctrl',\n ctrl: 'Ctrl',\n alt: 'Alt',\n option: 'Alt',\n shift: 'Shift',\n enter: 'Enter',\n escape: 'Esc',\n backspace: 'Backspace',\n};\n\n/\n A keyboard shortcut.\n \n Renders per platform: `⌘ K` on a Mac, `Ctrl K` elsewhere. A shortcut printed\n * with the wrong modifier is worse than none — the reader tries it, it does not\n * work, and they stop trusting the hints.\n \n @element kt-kbd\n \n @slot - The key, when `keys` is not used.\n \n @csspart base - The wrapper.\n * @csspart key - One key.\n \n @example\n * ```html\n * <kt-kbd keys=\"meta k\"></kt-kbd>\n * <kt-kbd>/</kt-kbd>\n * ```\n /\nexport class KtKbd extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n vertical-align: middle;\n }\n\n kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 5px;\n color: var(--~~color-~~text-~~500~~);\n font: var(--font-normal-small);\n font-family: var(--font-family-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: 5px;\n }\n `,\n ];\n\n /* Space-separated keys: `meta k`, `ctrl shift p`. /\n @property({ type: String })\n keys = '';\n\n /* Forces a platform instead of sniffing the current one. /\n @property({ type: String })\n platform: 'auto' \| 'mac' \| 'other' = 'auto';\n\n private get isMac(): boolean {\n if (this.platform !== 'auto') return this.platform === 'mac';\n if (typeof navigator === 'undefined') return false;\n return /mac\|iphone\|ipad/i.test(navigator.platform \|\| navigator.userAgent);\n }\n\n /* The keys as they will be shown. Exposed so tests and docs can read them. */\n get labels(): string[] {\n const table = this.isMac ? MAC : OTHER;\n return this.keys\n .split(/\\s+/)\n .filter(Boolean)\n .map((key) => table[key.toLowerCase()] ?? key.toUpperCase());\n }\n\n override render(): TemplateResult {\n const labels = this.labels;\n\n return html`<span part=\"base\" style=\"display:contents\">\n ${\n labels.length > 0\n ? labels.map((label) => html`<kbd part=\"key\">${label}</kbd>`)\n : html`<kbd part=\"key\"><slot></slot></kbd>`\n }\n </span>`;\n }\n}\n\ndefineElement('kt-kbd', KtKbd);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-kbd': KtKbd;\n }\n}\n"],"names":["MAC","OTHER","KtKbd","KtElement","css","table","key","labels","html","label","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAYA,MAAMA,IAA8B;AAAA,EAClC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb,GAEMC,IAAgC;AAAA,EACpC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb;AAsBO,MAAMC,UAAcC,EAAU;AAAA,EAA9B,cAAA;AAAA,UAAA,GAAA,SAAA,GA8BL,KAAA,OAAO,IAIP,KAAA,WAAqC;AAAA,EAAA;AAAA,EAjCrC,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,IAAA;AAAA,EAuBF;AAAA,EAUA,IAAY,QAAiB;AAC3B,WAAI,KAAK,aAAa,SAAe,KAAK,aAAa,QACnD,OAAO,YAAc,MAAoB,KACtC,mBAAmB,KAAK,UAAU,YAAY,UAAU,SAAS;AAAA,EAC1E;AAAA;AAAA,EAGA,IAAI,SAAmB;AACrB,UAAMC,IAAQ,KAAK,QAAQL,IAAMC;AACjC,WAAO,KAAK,KACT,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACK,MAAQD,EAAMC,EAAI,YAAA,CAAa,KAAKA,EAAI,aAAa;AAAA,EAC/D;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAS,KAAK;AAEpB,WAAOC;AAAA,QAEHD,EAAO,SAAS,IACZA,EAAO,IAAI,CAACE,MAAUD,oBAAuBC,CAAK,QAAQ,IAC1DD,sCACN;AAAA;AAAA,EAEJ;AACF;AAhCEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfT,EA8BX,WAAA,MAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCfT,EAkCX,WAAA,UAAA;AA8BFU,EAAc,UAAUV,CAAK;"}
1	+ {"version":3,"file":"kt-kbd.js","sources":["../../../../src/components/core/kt-kbd/kt-kbd.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/*\n Symbols people actually recognise, per platform.\n \n `mod` is the one to reach for: it means \"the primary shortcut modifier\",\n * which is Command on a Mac and Control everywhere else. `meta` stays honest —\n * on Windows the Meta key really is the Windows key, and printing \"Ctrl\" for it\n * would send the reader to the wrong key.\n /\nconst MAC: Record<string, string> = {\n mod: '⌘',\n meta: '⌘',\n cmd: '⌘',\n ctrl: '⌃',\n alt: '⌥',\n option: '⌥',\n shift: '⇧',\n enter: '↵',\n escape: 'esc',\n backspace: '⌫',\n};\n\nconst OTHER: Record<string, string> = {\n mod: 'Ctrl',\n meta: 'Win',\n cmd: 'Ctrl',\n ctrl: 'Ctrl',\n alt: 'Alt',\n option: 'Alt',\n shift: 'Shift',\n enter: 'Enter',\n escape: 'Esc',\n backspace: 'Backspace',\n};\n\n/\n A keyboard shortcut.\n \n Renders per platform: `⌘ K` on a Mac, `Ctrl K` elsewhere. A shortcut printed\n * with the wrong modifier is worse than none — the reader tries it, it does not\n * work, and they stop trusting the hints.\n \n @element kt-kbd\n \n @slot - The key, when `keys` is not used.\n \n @csspart base - The wrapper.\n * @csspart key - One key.\n \n @example\n * ```html\n * <kt-kbd keys=\"meta k\"></kt-kbd>\n * <kt-kbd>/</kt-kbd>\n * ```\n /\nexport class KtKbd extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n vertical-align: middle;\n }\n\n kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 5px;\n color: var(--text-muted);\n font: var(--font-normal-small);\n font-family: var(--font-family-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: 5px;\n }\n `,\n ];\n\n /* Space-separated keys: `meta k`, `ctrl shift p`. /\n @property({ type: String })\n keys = '';\n\n /* Forces a platform instead of sniffing the current one. /\n @property({ type: String })\n platform: 'auto' \| 'mac' \| 'other' = 'auto';\n\n private get isMac(): boolean {\n if (this.platform !== 'auto') return this.platform === 'mac';\n if (typeof navigator === 'undefined') return false;\n return /mac\|iphone\|ipad/i.test(navigator.platform \|\| navigator.userAgent);\n }\n\n /* The keys as they will be shown. Exposed so tests and docs can read them. */\n get labels(): string[] {\n const table = this.isMac ? MAC : OTHER;\n return this.keys\n .split(/\\s+/)\n .filter(Boolean)\n .map((key) => table[key.toLowerCase()] ?? key.toUpperCase());\n }\n\n override render(): TemplateResult {\n const labels = this.labels;\n\n return html`<span part=\"base\" style=\"display:contents\">\n ${\n labels.length > 0\n ? labels.map((label) => html`<kbd part=\"key\">${label}</kbd>`)\n : html`<kbd part=\"key\"><slot></slot></kbd>`\n }\n </span>`;\n }\n}\n\ndefineElement('kt-kbd', KtKbd);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-kbd': KtKbd;\n }\n}\n"],"names":["MAC","OTHER","KtKbd","KtElement","css","table","key","labels","html","label","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAYA,MAAMA,IAA8B;AAAA,EAClC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb,GAEMC,IAAgC;AAAA,EACpC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb;AAsBO,MAAMC,UAAcC,EAAU;AAAA,EAA9B,cAAA;AAAA,UAAA,GAAA,SAAA,GA8BL,KAAA,OAAO,IAIP,KAAA,WAAqC;AAAA,EAAA;AAAA,EAjCrC,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,IAAA;AAAA,EAuBF;AAAA,EAUA,IAAY,QAAiB;AAC3B,WAAI,KAAK,aAAa,SAAe,KAAK,aAAa,QACnD,OAAO,YAAc,MAAoB,KACtC,mBAAmB,KAAK,UAAU,YAAY,UAAU,SAAS;AAAA,EAC1E;AAAA;AAAA,EAGA,IAAI,SAAmB;AACrB,UAAMC,IAAQ,KAAK,QAAQL,IAAMC;AACjC,WAAO,KAAK,KACT,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACK,MAAQD,EAAMC,EAAI,YAAA,CAAa,KAAKA,EAAI,aAAa;AAAA,EAC/D;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAS,KAAK;AAEpB,WAAOC;AAAA,QAEHD,EAAO,SAAS,IACZA,EAAO,IAAI,CAACE,MAAUD,oBAAuBC,CAAK,QAAQ,IAC1DD,sCACN;AAAA;AAAA,EAEJ;AACF;AAhCEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfT,EA8BX,WAAA,MAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCfT,EAkCX,WAAA,UAAA;AA8BFU,EAAc,UAAUV,CAAK;"}

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

@@ -0,0 +1,112 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import { type KtOption } from '#internal/listbox';
+import type { KtButtonSize, KtButtonVariant } from '../kt-button/kt-button.js';
+import type { KtDropdownPlacement } from '../../overlays/kt-dropdown/kt-dropdown.js';
+import '../kt-button/kt-button.js';
+import '../kt-icon/kt-icon.js';
+import '../../overlays/kt-dropdown/kt-dropdown.js';
+/** A row of the menu. `danger` tints it, for the one action to think twice about. */
+export interface KtSplitButtonItem extends KtOption {
+    readonly icon?: string;
+    readonly variant?: 'default' | 'danger';
+}
+/**
+ * One button carrying a menu of related actions.
+ *
+ * The body runs the action a user wants nine times out of ten and emits a
+ * plain `click`; the caret opens the rest. Reach for it when the alternatives
+ * are variations on the same action — "Save and close", "Save a copy" — and
+ * for an unrelated set of actions use `<kt-dropdown>` instead, which has no
+ * default action to promote.
+ *
+ * A caret press never reads as a `click` on the host, so a single `click`
+ * listener means the primary action and nothing else.
+ *
+ * @element kt-split-button
+ *
+ * @slot - The primary action's label.
+ *
+ * @csspart action - The primary `<kt-button>`.
+ * @csspart caret - The `<kt-button>` that opens the menu.
+ * @csspart menu - The list of rows.
+ * @csspart item - A menu row.
+ *
+ * @fires kt-select - A menu row was chosen. `detail: { value, item }`.
+ * @fires kt-open - The menu opened.
+ * @fires kt-close - The menu closed.
+ *
+ * @example
+ * ```html
+ * <kt-split-button>Save</kt-split-button>
+ * ```
+ * ```js
+ * el.items = [
+ *   { id: 'close', label: 'Save and close' },
+ *   { id: 'discard', label: 'Discard', variant: 'danger' },
+ * ];
+ * el.addEventListener('kt-select', (e) => run(e.detail.value));
+ * ```
+ */
+export declare class KtSplitButton extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private dropdown?;
+    private caret?;
+    /** The row the roving tabindex currently sits on. */
+    private activeIndex;
+    /** The menu rows. */
+    items: readonly KtSplitButtonItem[];
+    /** Visual variant, forwarded to both segments. */
+    variant: KtButtonVariant;
+    /** Height, forwarded to both segments. */
+    size: KtButtonSize;
+    disabled: boolean;
+    /** Lucide icon name for the primary segment. */
+    icon: string;
+    /** Accessible name of the caret, which has no text of its own. */
+    menuLabel: string;
+    /** Where to put the menu when there is room on both sides. */
+    preferredPlacement: KtDropdownPlacement;
+    emptyText: string;
+    /** Whether the menu is showing. */
+    get isOpen(): boolean;
+    /** Opens the menu. */
+    show(): void;
+    /** Closes it. */
+    hide(): void;
+    /** Either. */
+    toggle(): void;
+    /** Moves focus to the primary segment. */
+    focus(options?: FocusOptions): void;
+    private row;
+    /** Lands the roving tabindex on `index` and takes focus there. */
+    private moveTo;
+    private onOpen;
+    /**
+     * Returns focus to the caret, but only when it was inside the menu — an
+     * outside click already moved it somewhere the user chose, and pulling it
+     * back here would undo that.
+     */
+    private onClose;
+    private onMenuKeyDown;
+    private choose;
+    /**
+     * A click anywhere in the menu stops here. It originates inside this
+     * element's shadow root, so without this it would surface on the host as a
+     * `click` and be mistaken for the primary action.
+     */
+    private containClick;
+    /**
+     * The caret drives the panel itself rather than leaning on the click
+     * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here
+     * keeps the press off the host, and leaving it to bubble would toggle twice.
+     */
+    private onCaretClick;
+    private renderItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-split-button': KtSplitButton;
+    }
+}