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

kanto-ds 1.0.1 → 1.2.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 (90) hide show

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":";;;;;;;;;;AAsBA,MAAMA,IAA0C,EAAE,OAAO,IAAI,QAAQ,IAAI,OAAO,GAAA;AA2BzE,MAAMC,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8KL,KAAA,UAA2B,WAI3B,KAAA,OAAqB,UAGrB,KAAA,WAAW,IAIX,KAAA,OAAqB,UAIrB,KAAA,OAAO,IAIP,KAAA,eAAiC,QAIjC,KAAA,QAAQ,IAOR,KAAA,QAAmD,QAInD,KAAA,WAAgC,QAIhC,KAAA,YAAY,IAIZ,KAAA,OAAO,IAIP,KAAA,QAAQ;AAAA,EAAA;AAAA,EA3NR,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,EAuKF;AAAA;AAAA,EAqDS,MAAMC,GAA8B;AAC3C,SAAK,YAAY,cAAc,QAAQ,GAAG,MAAMA,CAAO;AAAA,EACzD;AAAA,EAES,OAAa;AACpB,SAAK,YAAY,cAAc,QAAQ,GAAG,KAAA;AAAA,EAC5C;AAAA,EAEA,IAAY,eAAwB;AAClC,WAAO,KAAK,gBAAgB,QAAQ,KAAK,YAAY,KAAA,EAAO,SAAS;AAAA,EACvE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,sBAA4B;AAClC,UAAMC,IAAO,KAAK,QAAQ,MAAM;AAChC,QAAI,CAACA,EAAM;AAEX,UAAMC,IAAQ,SAAS,cAAc,QAAQ;AAC7C,IAAAA,EAAM,OAAO,KAAK,MAClBA,EAAM,SAAS,IACX,KAAK,SAAMA,EAAM,OAAO,KAAK,OAC7B,KAAK,UAAOA,EAAM,QAAQ,KAAK,QAEnCD,EAAK,OAAOC,CAAK,GACjBA,EAAM,MAAA,GACNA,EAAM,OAAA;AAAA,EACR;AAAA,EAEQ,QAAQC,GAAyB;AACvC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA;AACN;AAAA,IACF;AACA,IAAI,KAAK,SAAS,YAAU,KAAK,oBAAA;AAAA,EACnC;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAW,EAAQ,KAAK,QAAS,CAAC,KAAK,cACvCC,IAAO,KAAK,OACdC,8BAAiC,KAAK,IAAI,SAASV,EAAU,KAAK,IAAI,CAAC,gBACvEW;AAEJ,WAAOD;AAAA;AAAA,cAEGE,EAAS;AAAA,MACf,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,aAAaJ;AAAA,IAAA,CACd,CAAC;AAAA,aACK,KAAK,IAAI;AAAA,kBACJ,KAAK,QAAQ;AAAA,mBACZ,KAAK,SAASG,CAAO;AAAA,sBAClB,KAAK,SAASA,CAAO;AAAA,sBACrB,KAAK,aAAa,SAAYA,IAAU,OAAO,KAAK,QAAQ,CAAC;AAAA,eACpE,KAAK,OAAO;AAAA;AAAA,QAEnB,KAAK,iBAAiB,SAASF,IAAOE,CAAO;AAAA;AAAA,QAE7C,KAAK,iBAAiB,UAAUF,IAAOE,CAAO;AAAA;AAAA,EAEpD;AACF;AApHEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7K9Bb,EA8KX,WAAA,SAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjL9Bb,EAkLX,WAAA,MAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApL/Bb,EAqLX,WAAA,UAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxLfb,EAyLX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Lfb,EA6LX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAhM3Cb,EAiMX,WAAA,cAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApMfb,EAqMX,WAAA,OAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA3MnBb,EA4MX,WAAA,OAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA/MnBb,EAgNX,WAAA,UAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,cAAc;AAAA,GAnNxDb,EAoNX,WAAA,WAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvNfb,EAwNX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Nfb,EA4NX,WAAA,OAAA;AAwEFc,EAAc,aAAad,CAAQ;"}

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,6 +1,6 @@
 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 { 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--)

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.js CHANGED Viewed

@@ -1,7 +1,7 @@
 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-CcMLO5e8.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 "../kt-button/kt-button.js";
@@ -94,10 +94,10 @@ class e extends h {
       }
       .item.danger {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
       .item.danger:hover {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
         background: var(--color-danger-soft);
       }

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-base);\n }\n .item.danger:hover {\n color: var(--color-danger-base);\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 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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"}

package/dist/components/data/kt-chart/kt-chart.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { svg as b, nothing as A, css as gt, html as G } from "lit";
 import { query as vt, state as tt, property as B } from "lit/decorators.js";
 import { classMap as kt } from "lit/directives/class-map.js";
-import { K as rt, d as wt } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as rt, d as wt } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { u as Mt, e as nt } from "../../../chunks/events-Bjl5Zmmq.js";
 function At(s) {
   const t = Math.floor(Math.log10(s)), e = s / 10 ** t;

package/dist/components/data/kt-meter/kt-meter.js CHANGED Viewed

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

package/dist/components/data/kt-pagination/kt-pagination.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as g, html as h } from "lit";
 import { property as o } from "lit/decorators.js";
-import { K as l, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as l, d as m } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../../core/kt-button/kt-button.js";
 var u = Object.defineProperty, n = (r, a, t, d) => {

package/dist/components/data/kt-stat/kt-stat.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { css as h, nothing as l, html as r } from "lit";
 import { property as e } from "lit/decorators.js";
-import { K as c, d as f } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as c, d as f } from "../../../chunks/kt-element-B_jjQDhg.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-badge/kt-badge.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
-var v = Object.defineProperty, a = (s, n, p, u) => {
+var u = Object.defineProperty, a = (s, n, p, v) => {
   for (var i = void 0, o = s.length - 1, d; o >= 0; o--)
     (d = s[o]) && (i = d(n, p, i) || i);
-  return i && v(n, p, i), i;
+  return i && u(n, p, i), i;
 };
 class t extends c {
   constructor() {
@@ -43,13 +43,13 @@ class t extends c {
         justify-content: center;
         width: 34px;
         height: 34px;
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         background: var(--color-primary-soft);
         border-radius: var(--radius-full);
       }
       .label {
-        color: var(--color-text-500);
+        color: var(--text-muted);
         font: var(--font-title-overline);
         letter-spacing: var(--letter-spacing-overline);
         text-transform: uppercase;

package/dist/components/data/kt-stat/kt-stat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-stat.js","sources":["../../../../src/components/data/kt-stat/kt-stat.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../core/kt-badge/kt-badge.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport type KtStatTrend = 'up' \| 'down' \| 'flat';\n\n/*\n One headline figure: a label, a value, and how it moved.\n \n Worth its own element because every dashboard rebuilds this tile, and every\n * rebuild makes the same two mistakes — the delta coloured by sign rather than\n * by meaning, and the label competing with the number.\n \n The colour comes from `trend`, not from the sign. Falling costs are good\n * news; rising churn is not. Pass `trend` to say which, and `inverted` when\n * down is the direction you want.\n \n @element kt-stat\n \n @slot - Extra content under the value — a sparkline, a caption.\n \n @csspart base - The tile.\n * @csspart value - The figure.\n \n @example\n * ```html\n * <kt-stat label=\"Revenue\" value=\"$292,342\" delta=\"-3%\" trend=\"down\"></kt-stat>\n * <kt-stat label=\"Customers\" value=\"712\" delta=\"+12%\" trend=\"up\" icon=\"users\"></kt-stat>\n * ```\n /\nexport class KtStat extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .stat {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: var(--padding-card);\n }\n\n .head {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n / A tinted disc rather than a bare glyph: at this size an icon on its\n own reads as noise beside the figure. /\n .icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n color: var(--color-primary-~~base~~);\n background: var(--color-primary-soft);\n border-radius: var(--radius-full);\n }\n\n .label {\n color: var(--~~color-~~text-~~500~~);\n font: var(--font-title-overline);\n letter-spacing: var(--letter-spacing-overline);\n text-transform: uppercase;\n }\n\n .figure {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n }\n\n .value {\n color: var(--text-body);\n font: var(--font-title-h1);\n font-variant-numeric: tabular-nums;\n line-height: 1.1;\n }\n\n :host([size='small']) .value {\n font: var(--font-title-h4);\n }\n\n .caption {\n color: var(--text-muted);\n font: var(--font-normal-small);\n }\n `,\n ];\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n value = '';\n\n /* The movement, shown as a badge: `+12%`, `-3%`, `+2`. /\n @property({ type: String })\n delta = '';\n\n /\n What the movement means. Drives the badge colour.\n * `flat` — and the default — stay neutral.\n /\n @property({ type: String, reflect: true })\n trend: KtStatTrend = 'flat';\n\n /\n Down is the good direction here — churn, cost, latency.\n * Swaps which trend reads as success.\n /\n @property({ type: Boolean })\n inverted = false;\n\n /* Lucide icon name, kebab-case. /\n @property({ type: String })\n icon = '';\n\n /* Small print under the figure — \"vs last month\". */\n @property({ type: String })\n caption = '';\n\n @property({ type: String, reflect: true })\n size: 'small' \| 'medium' = 'medium';\n\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n private get deltaVariant(): 'success' \| 'danger' \| 'neutral' {\n if (this.trend === 'flat') return 'neutral';\n const good = this.inverted ? 'down' : 'up';\n return this.trend === good ? 'success' : 'danger';\n }\n\n override render(): TemplateResult {\n return html`<div part=\"base\" class=\"stat\">\n <div class=\"head\">\n ${\n this.icon\n ? html`<span class=\"icon\"><kt-icon name=${this.icon} size=\"18\"></kt-icon></span>`\n : nothing\n }\n <span class=\"label\">${this.label}</span>\n </div>\n\n ${\n this.loading\n ? html`<kt-skeleton variant=\"rect\" height=\"38px\" width=\"60%\"></kt-skeleton>`\n : html`<div class=\"figure\">\n <span part=\"value\" class=\"value\">${this.value}</span>\n ${\n this.delta\n ? html`<kt-badge variant=\"count\" tone=${this.deltaVariant}\n >${this.delta}</kt-badge\n >`\n : nothing\n }\n </div>`\n }\n ${this.caption ? html`<span class=\"caption\">${this.caption}</span>` : nothing}\n <slot></slot>\n </div>`;\n }\n}\n\ndefineElement('kt-stat', KtStat);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-stat': KtStat;\n }\n}\n"],"names":["KtStat","KtElement","css","good","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAiCO,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAoEL,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAIR,KAAA,QAAQ,IAOR,KAAA,QAAqB,QAOrB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,UAAU,IAGV,KAAA,OAA2B,UAG3B,KAAA,UAAU;AAAA,EAAA;AAAA,EAtGV,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,IAAA;AAAA,EA8DF;AAAA,EAwCA,IAAY,eAAiD;AAC3D,QAAI,KAAK,UAAU,OAAQ,QAAO;AAClC,UAAMC,IAAO,KAAK,WAAW,SAAS;AACtC,WAAO,KAAK,UAAUA,IAAO,YAAY;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA,UAGD,KAAK,OACDA,qCAAwC,KAAK,IAAI,iCACjDC,CACN;AAAA,8BACsB,KAAK,KAAK;AAAA;AAAA;AAAA,QAIhC,KAAK,UACDD,0EACAA;AAAA,iDACqC,KAAK,KAAK;AAAA,gBAE3C,KAAK,QACDA,mCAAsC,KAAK,YAAY;AAAA,yBAClD,KAAK,KAAK;AAAA,yBAEfC,CACN;AAAA,mBAER;AAAA,QACE,KAAK,UAAUD,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA;AAAA;AAAA,EAGjF;AACF;AAxEEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfP,EAoEX,WAAA,OAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfP,EAuEX,WAAA,OAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxFhBP,EAyFX,WAAA,UAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5FfP,EA6FX,WAAA,MAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhGfP,EAiGX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnG9BP,EAoGX,WAAA,MAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BP,EAuGX,WAAA,SAAA;AAuCFQ,EAAc,WAAWR,CAAM;"}
1	+ {"version":3,"file":"kt-stat.js","sources":["../../../../src/components/data/kt-stat/kt-stat.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../core/kt-badge/kt-badge.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport type KtStatTrend = 'up' \| 'down' \| 'flat';\n\n/*\n One headline figure: a label, a value, and how it moved.\n \n Worth its own element because every dashboard rebuilds this tile, and every\n * rebuild makes the same two mistakes — the delta coloured by sign rather than\n * by meaning, and the label competing with the number.\n \n The colour comes from `trend`, not from the sign. Falling costs are good\n * news; rising churn is not. Pass `trend` to say which, and `inverted` when\n * down is the direction you want.\n \n @element kt-stat\n \n @slot - Extra content under the value — a sparkline, a caption.\n \n @csspart base - The tile.\n * @csspart value - The figure.\n \n @example\n * ```html\n * <kt-stat label=\"Revenue\" value=\"$292,342\" delta=\"-3%\" trend=\"down\"></kt-stat>\n * <kt-stat label=\"Customers\" value=\"712\" delta=\"+12%\" trend=\"up\" icon=\"users\"></kt-stat>\n * ```\n /\nexport class KtStat extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .stat {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: var(--padding-card);\n }\n\n .head {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n / A tinted disc rather than a bare glyph: at this size an icon on its\n own reads as noise beside the figure. /\n .icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n color: var(--color-primary-text);\n background: var(--color-primary-soft);\n border-radius: var(--radius-full);\n }\n\n .label {\n color: var(--text-muted);\n font: var(--font-title-overline);\n letter-spacing: var(--letter-spacing-overline);\n text-transform: uppercase;\n }\n\n .figure {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n }\n\n .value {\n color: var(--text-body);\n font: var(--font-title-h1);\n font-variant-numeric: tabular-nums;\n line-height: 1.1;\n }\n\n :host([size='small']) .value {\n font: var(--font-title-h4);\n }\n\n .caption {\n color: var(--text-muted);\n font: var(--font-normal-small);\n }\n `,\n ];\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n value = '';\n\n /* The movement, shown as a badge: `+12%`, `-3%`, `+2`. /\n @property({ type: String })\n delta = '';\n\n /\n What the movement means. Drives the badge colour.\n * `flat` — and the default — stay neutral.\n /\n @property({ type: String, reflect: true })\n trend: KtStatTrend = 'flat';\n\n /\n Down is the good direction here — churn, cost, latency.\n * Swaps which trend reads as success.\n /\n @property({ type: Boolean })\n inverted = false;\n\n /* Lucide icon name, kebab-case. /\n @property({ type: String })\n icon = '';\n\n /* Small print under the figure — \"vs last month\". */\n @property({ type: String })\n caption = '';\n\n @property({ type: String, reflect: true })\n size: 'small' \| 'medium' = 'medium';\n\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n private get deltaVariant(): 'success' \| 'danger' \| 'neutral' {\n if (this.trend === 'flat') return 'neutral';\n const good = this.inverted ? 'down' : 'up';\n return this.trend === good ? 'success' : 'danger';\n }\n\n override render(): TemplateResult {\n return html`<div part=\"base\" class=\"stat\">\n <div class=\"head\">\n ${\n this.icon\n ? html`<span class=\"icon\"><kt-icon name=${this.icon} size=\"18\"></kt-icon></span>`\n : nothing\n }\n <span class=\"label\">${this.label}</span>\n </div>\n\n ${\n this.loading\n ? html`<kt-skeleton variant=\"rect\" height=\"38px\" width=\"60%\"></kt-skeleton>`\n : html`<div class=\"figure\">\n <span part=\"value\" class=\"value\">${this.value}</span>\n ${\n this.delta\n ? html`<kt-badge variant=\"count\" tone=${this.deltaVariant}\n >${this.delta}</kt-badge\n >`\n : nothing\n }\n </div>`\n }\n ${this.caption ? html`<span class=\"caption\">${this.caption}</span>` : nothing}\n <slot></slot>\n </div>`;\n }\n}\n\ndefineElement('kt-stat', KtStat);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-stat': KtStat;\n }\n}\n"],"names":["KtStat","KtElement","css","good","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAiCO,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAoEL,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAIR,KAAA,QAAQ,IAOR,KAAA,QAAqB,QAOrB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,UAAU,IAGV,KAAA,OAA2B,UAG3B,KAAA,UAAU;AAAA,EAAA;AAAA,EAtGV,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,IAAA;AAAA,EA8DF;AAAA,EAwCA,IAAY,eAAiD;AAC3D,QAAI,KAAK,UAAU,OAAQ,QAAO;AAClC,UAAMC,IAAO,KAAK,WAAW,SAAS;AACtC,WAAO,KAAK,UAAUA,IAAO,YAAY;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA,UAGD,KAAK,OACDA,qCAAwC,KAAK,IAAI,iCACjDC,CACN;AAAA,8BACsB,KAAK,KAAK;AAAA;AAAA;AAAA,QAIhC,KAAK,UACDD,0EACAA;AAAA,iDACqC,KAAK,KAAK;AAAA,gBAE3C,KAAK,QACDA,mCAAsC,KAAK,YAAY;AAAA,yBAClD,KAAK,KAAK;AAAA,yBAEfC,CACN;AAAA,mBAER;AAAA,QACE,KAAK,UAAUD,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA;AAAA;AAAA,EAGjF;AACF;AAxEEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfP,EAoEX,WAAA,OAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfP,EAuEX,WAAA,OAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxFhBP,EAyFX,WAAA,UAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5FfP,EA6FX,WAAA,MAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhGfP,EAiGX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnG9BP,EAoGX,WAAA,MAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BP,EAuGX,WAAA,SAAA;AAuCFQ,EAAc,WAAWR,CAAM;"}

package/dist/components/data/kt-table/kt-table.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { css as x, html as d, nothing as h } from "lit";
 import { state as k, property as n } from "lit/decorators.js";
 import { classMap as S } from "lit/directives/class-map.js";
 import { styleMap as b } from "lit/directives/style-map.js";
-import { K as f, d as $ } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as f, d as $ } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../kt-pagination/kt-pagination.js";
 var v = Object.defineProperty, a = (o, t, e, s) => {
@@ -88,7 +88,7 @@ class r extends f {
       }
       .indicator {
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         font-size: 10px;
       }