npm - kanto-ds - Versions diffs - 1.5.2 → 1.6.0 - Mend

kanto-ds 1.5.2 → 1.6.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 (125) hide show

package/dist/components/feedback/kt-alert/kt-alert.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { css as v, nothing as s, html as e } from "lit";
 import { property as t } from "lit/decorators.js";
-import { K as p, d as g } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as p, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as h } from "../../../chunks/events-r51msXNf.js";
-import { s as f } from "../../../chunks/index-STEEvEP7.js";
+import { s as f } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
 var u = Object.defineProperty, a = (n, i, c, b) => {
-  for (var r = void 0, l = n.length - 1, d; l >= 0; l--)
-    (d = n[l]) && (r = d(i, c, r) || r);
-  return r && u(i, c, r), r;
+  for (var o = void 0, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (o = d(i, c, o) || o);
+  return o && u(i, c, o), o;
 };
 const m = {
   info: "info",
@@ -16,7 +16,7 @@ const m = {
   danger: "circle-alert",
   neutral: "info"
 };
-class o extends p {
+class r extends p {
   constructor() {
     super(...arguments), this.variant = "info", this.heading = "", this.description = "", this.dismissible = !1, this.noIcon = !1, this.icon = "";
   }
@@ -116,7 +116,7 @@ class o extends p {
         color: currentcolor;
         background: none;
         border: none;
-        border-radius: 4px;
+        border-radius: calc(4px * var(--radius-scale, 1));
         cursor: pointer;
         opacity: 0.7;
       }
@@ -158,24 +158,24 @@ class o extends p {
 }
 a([
   t({ type: String, reflect: !0 })
-], o.prototype, "variant");
+], r.prototype, "variant");
 a([
   t({ type: String })
-], o.prototype, "heading");
+], r.prototype, "heading");
 a([
   t({ type: String })
-], o.prototype, "description");
+], r.prototype, "description");
 a([
   t({ type: Boolean })
-], o.prototype, "dismissible");
+], r.prototype, "dismissible");
 a([
   t({ type: Boolean, attribute: "no-icon" })
-], o.prototype, "noIcon");
+], r.prototype, "noIcon");
 a([
   t({ type: String })
-], o.prototype, "icon");
-g("kt-alert", o);
+], r.prototype, "icon");
+g("kt-alert", r);
 export {
-  o as KtAlert
+  r as KtAlert
 };
 //# sourceMappingURL=kt-alert.js.map

package/dist/components/feedback/kt-alert/kt-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n info: 'info',\n success: 'circle-check',\n warning: 'triangle-alert',\n danger: 'circle-alert',\n neutral: 'info',\n};\n\n/*\n A message that stays on the page.\n \n Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n \n @element kt-alert\n \n @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n \n @csspart base - The alert.\n * @csspart close - The dismiss button.\n \n @fires kt-close - The dismiss button was pressed.\n \n @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n * description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n /\nexport class KtAlert extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--gap-form);\n padding: var(--padding-form);\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: var(--border-radius);\n }\n\n / A tinted fill plus a matching border, rather than a coloured bar: the\n whole block should read as the message's temperature. /\n :host([variant='info']) .alert {\n background: var(--color-info-soft);\n border-color: var(--color-info-base);\n }\n :host([variant='success']) .alert {\n background: var(--color-success-soft);\n border-color: var(--color-success-base);\n }\n :host([variant='warning']) .alert {\n background: var(--color-warning-soft);\n border-color: var(--color-warning-base);\n }\n :host([variant='danger']) .alert {\n background: var(--color-danger-soft);\n border-color: var(--color-danger-base);\n }\n\n .icon {\n display: flex;\n flex: none;\n padding-top: 1px;\n }\n\n :host([variant='info']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='danger']) .icon {\n color: var(--color-danger-text);\n }\n :host([variant='neutral']) .icon {\n color: var(--text-muted);\n }\n\n .content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--gap-element);\n min-width: 0;\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n color: var(--text-muted);\n font: var(--font-normal-regular);\n }\n\n .actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-button);\n margin-top: 4px;\n }\n\n .actions:not(:has()) {\n display: none;\n }\n\n .close {\n display: flex;\n flex: none;\n align-items: center;\n padding: 2px;\n color: currentcolor;\n background: none;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0.7;\n }\n\n .close:hover {\n opacity: 1;\n }\n\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n `,\n ];\n\n @property({ type: String, reflect: true })\n variant: KtAlertVariant = 'info';\n\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n /** Adds a dismiss button. Removing the alert is the caller's job. /\n @property({ type: Boolean })\n dismissible = false;\n\n /* Hides the leading icon. /\n @property({ type: Boolean, attribute: 'no-icon' })\n noIcon = false;\n\n /* Overrides the icon the variant would pick. */\n @property({ type: String })\n icon = '';\n\n override render(): TemplateResult {\n // Danger interrupts; the rest wait their turn.\n const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n ${\n this.noIcon\n ? nothing\n : html`<span class=\"icon\">\n <kt-icon name=${this.icon \|\| ICONS[this.variant]} size=\"20\"></kt-icon>\n </span>`\n }\n\n <div class=\"content\">\n ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n <slot></slot>\n <div class=\"actions\"><slot name=\"actions\"></slot></div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=${strings().dismiss}\n @click=${() => emit(this, 'kt-close')}\n >\n <kt-icon name=\"x\" size=\"16\"></kt-icon>\n </button>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-alert': KtAlert;\n }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","strings","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AASA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,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,IAAA;AAAA,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA,2BAGeE,EAAA,EAAU,OAAO;AAAA,uBACrB,MAAMC,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCF,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BT,EAgHX,WAAA,SAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfT,EAmHX,WAAA,SAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfT,EAsHX,WAAA,aAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBT,EA0HX,WAAA,aAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCT,EA8HX,WAAA,QAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfT,EAkIX,WAAA,MAAA;AAsCFU,EAAc,YAAYV,CAAO;"}
1	+ {"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n info: 'info',\n success: 'circle-check',\n warning: 'triangle-alert',\n danger: 'circle-alert',\n neutral: 'info',\n};\n\n/*\n A message that stays on the page.\n \n Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n \n @element kt-alert\n \n @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n \n @csspart base - The alert.\n * @csspart close - The dismiss button.\n \n @fires kt-close - The dismiss button was pressed.\n \n @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n * description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n /\nexport class KtAlert extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--gap-form);\n padding: var(--padding-form);\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: var(--border-radius);\n }\n\n / A tinted fill plus a matching border, rather than a coloured bar: the\n whole block should read as the message's temperature. /\n :host([variant='info']) .alert {\n background: var(--color-info-soft);\n border-color: var(--color-info-base);\n }\n :host([variant='success']) .alert {\n background: var(--color-success-soft);\n border-color: var(--color-success-base);\n }\n :host([variant='warning']) .alert {\n background: var(--color-warning-soft);\n border-color: var(--color-warning-base);\n }\n :host([variant='danger']) .alert {\n background: var(--color-danger-soft);\n border-color: var(--color-danger-base);\n }\n\n .icon {\n display: flex;\n flex: none;\n padding-top: 1px;\n }\n\n :host([variant='info']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='danger']) .icon {\n color: var(--color-danger-text);\n }\n :host([variant='neutral']) .icon {\n color: var(--text-muted);\n }\n\n .content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--gap-element);\n min-width: 0;\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n color: var(--text-muted);\n font: var(--font-normal-regular);\n }\n\n .actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-button);\n margin-top: 4px;\n }\n\n .actions:not(:has()) {\n display: none;\n }\n\n .close {\n display: flex;\n flex: none;\n align-items: center;\n padding: 2px;\n color: currentcolor;\n background: none;\n border: none;\n border-radius: calc(4px * var(--radius-scale, 1));\n cursor: pointer;\n opacity: 0.7;\n }\n\n .close:hover {\n opacity: 1;\n }\n\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n `,\n ];\n\n @property({ type: String, reflect: true })\n variant: KtAlertVariant = 'info';\n\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n /** Adds a dismiss button. Removing the alert is the caller's job. /\n @property({ type: Boolean })\n dismissible = false;\n\n /* Hides the leading icon. /\n @property({ type: Boolean, attribute: 'no-icon' })\n noIcon = false;\n\n /* Overrides the icon the variant would pick. */\n @property({ type: String })\n icon = '';\n\n override render(): TemplateResult {\n // Danger interrupts; the rest wait their turn.\n const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n ${\n this.noIcon\n ? nothing\n : html`<span class=\"icon\">\n <kt-icon name=${this.icon \|\| ICONS[this.variant]} size=\"20\"></kt-icon>\n </span>`\n }\n\n <div class=\"content\">\n ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n <slot></slot>\n <div class=\"actions\"><slot name=\"actions\"></slot></div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=${strings().dismiss}\n @click=${() => emit(this, 'kt-close')}\n >\n <kt-icon name=\"x\" size=\"16\"></kt-icon>\n </button>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-alert': KtAlert;\n }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","strings","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AASA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,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,IAAA;AAAA,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA,2BAGeE,EAAA,EAAU,OAAO;AAAA,uBACrB,MAAMC,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCF,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BT,EAgHX,WAAA,SAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfT,EAmHX,WAAA,SAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfT,EAsHX,WAAA,aAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBT,EA0HX,WAAA,aAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCT,EA8HX,WAAA,QAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfT,EAkIX,WAAA,MAAA;AAsCFU,EAAc,YAAYV,CAAO;"}

package/dist/components/feedback/kt-empty-state/kt-empty-state.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as h, nothing as r, html as i } from "lit";
 import { property as n } from "lit/decorators.js";
-import { K as d, d as m } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as d, d as m } from "../../../chunks/kt-element-T0VbIBNp.js";
 import "../../core/kt-icon/kt-icon.js";
 var g = Object.defineProperty, o = (s, p, c, f) => {
   for (var t = void 0, a = s.length - 1, l; a >= 0; a--)

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { css as v, nothing as p, html as o } from "lit";
 import { property as t } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as u, d as b } from "../../../chunks/kt-element-T0VbIBNp.js";
 var f = Object.defineProperty, r = (n, e, i, c) => {
   for (var s = void 0, l = n.length - 1, h; l >= 0; l--)
     (h = n[l]) && (s = h(e, i, s) || s);

package/dist/components/feedback/kt-skeleton/kt-skeleton.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { css as c, html as d } from "lit";
+import { css as u, html as c } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
-var y = Object.defineProperty, a = (n, i, t, p) => {
-  for (var e = void 0, o = n.length - 1, l; o >= 0; o--)
-    (l = n[o]) && (e = l(i, t, e) || e);
+import { K as d, d as f } from "../../../chunks/kt-element-T0VbIBNp.js";
+var y = Object.defineProperty, a = (n, i, t, l) => {
+  for (var e = void 0, o = n.length - 1, p; o >= 0; o--)
+    (p = n[o]) && (e = p(i, t, e) || e);
   return e && y(i, t, e), e;
 };
 const v = {
@@ -13,14 +13,14 @@ const v = {
   rect: "80px",
   circle: "40px"
 };
-class r extends u {
+class r extends d {
   constructor() {
     super(...arguments), this.variant = "text", this.width = "", this.height = "", this.count = 1, this.animated = !0;
   }
   static {
     this.styles = [
-      u.styles,
-      c`
+      d.styles,
+      u`
       :host {
         display: block;
       }
@@ -38,7 +38,7 @@ class r extends u {
       }
       .text {
-        border-radius: 4px;
+        border-radius: calc(4px * var(--radius-scale, 1));
       }
       .circle {
@@ -68,8 +68,8 @@ class r extends u {
     ];
   }
   line(i, t) {
-    const p = t && this.count > 1 && this.variant === "text";
-    return d`<span
+    const l = t && this.count > 1 && this.variant === "text";
+    return c`<span
       part="line"
       class=${h({
       line: !0,
@@ -77,14 +77,14 @@ class r extends u {
       pulse: this.animated
     })}
       style=${m({
-      width: p ? "60%" : this.width || (this.variant === "circle" ? "40px" : "100%"),
+      width: l ? "60%" : this.width || (this.variant === "circle" ? "40px" : "100%"),
       height: this.height || v[this.variant]
     })}
       data-index=${i}
     ></span>`;
   }
   render() {
-    return this.count <= 1 ? this.line(0, !1) : d`<span class="group">
+    return this.count <= 1 ? this.line(0, !1) : c`<span class="group">
       ${Array.from(
       { length: this.count },
       (i, t) => this.line(t, t === this.count - 1)

package/dist/components/feedback/kt-skeleton/kt-skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-skeleton.js","sources":["../../../../src/components/feedback/kt-skeleton/kt-skeleton.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport type KtSkeletonVariant = 'text' \| 'rect' \| 'circle';\n\n/** Default height per variant, when none is given. /\nconst HEIGHT: Record<KtSkeletonVariant, string> = {\n text: '14px',\n rect: '80px',\n circle: '40px',\n};\n\n/\n A loading placeholder, pulsing between two steps of the surface ramp.\n \n With `count` above one, the last line is drawn short — the shape a paragraph\n * actually has, which is what makes a skeleton read as text rather than as\n * stacked bars.\n \n The whole thing is `aria-hidden`: it is a picture of content that is not\n * there yet. Announce loading state on the region that owns it, with\n * `aria-busy`.\n \n @element kt-skeleton\n \n @csspart line - One placeholder line.\n \n @example\n * ```html\n * <kt-skeleton count=\"3\"></kt-skeleton>\n * <kt-skeleton variant=\"circle\" width=\"48px\" height=\"48px\"></kt-skeleton>\n * ```\n /\nexport class KtSkeleton extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .line {\n display: block;\n background: var(--surface-raised);\n border-radius: var(--border-radius);\n }\n\n .text {\n border-radius: 4px;\n }\n\n .circle {\n border-radius: var(--radius-full);\n }\n\n .pulse {\n animation: kt-skeleton-pulse 1.4s var(--easing-standard) infinite;\n }\n\n @keyframes kt-skeleton-pulse {\n 0%,\n 100% {\n background: var(--surface-raised);\n }\n 50% {\n background: var(--surface-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .pulse {\n animation: none;\n }\n }\n `,\n ];\n\n @property({ type: String, reflect: true })\n variant: KtSkeletonVariant = 'text';\n\n /* Any CSS length. Defaults to the full width, or 40px for a circle. /\n @property({ type: String })\n width = '';\n\n /* Any CSS length. Defaults to the variant's natural height. /\n @property({ type: String })\n height = '';\n\n /* How many lines to draw. Above one, the last is shortened. */\n @property({ type: Number })\n count = 1;\n\n @property({ type: Boolean })\n animated = true;\n\n private line(index: number, last: boolean): TemplateResult {\n const shortened = last && this.count > 1 && this.variant === 'text';\n\n return html`<span\n part=\"line\"\n class=${classMap({\n line: true,\n [this.variant]: true,\n pulse: this.animated,\n })}\n style=${styleMap({\n width: shortened ? '60%' : this.width \|\| (this.variant === 'circle' ? '40px' : '100%'),\n height: this.height \|\| HEIGHT[this.variant],\n })}\n data-index=${index}\n ></span>`;\n }\n\n override render(): TemplateResult {\n if (this.count <= 1) return this.line(0, false);\n\n return html`<span class=\"group\">\n ${Array.from({ length: this.count }, (_, index) =>\n this.line(index, index === this.count - 1),\n )}\n </span>`;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // A skeleton is a picture of absent content: there is nothing here to\n // announce, and reading out a dozen empty boxes is worse than silence.\n this.setAttribute('aria-hidden', 'true');\n }\n}\n\ndefineElement('kt-skeleton', KtSkeleton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-skeleton': KtSkeleton;\n }\n}\n"],"names":["HEIGHT","KtSkeleton","KtElement","css","index","last","shortened","html","classMap","styleMap","_","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AASA,MAAMA,IAA4C;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;AAuBO,MAAMC,UAAmBC,EAAU;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmDL,KAAA,UAA6B,QAI7B,KAAA,QAAQ,IAIR,KAAA,SAAS,IAIT,KAAA,QAAQ,GAGR,KAAA,WAAW;AAAA,EAAA;AAAA,EAjEX,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,IAAA;AAAA,EA6CF;AAAA,EAoBQ,KAAKC,GAAeC,GAA+B;AACzD,UAAMC,IAAYD,KAAQ,KAAK,QAAQ,KAAK,KAAK,YAAY;AAE7D,WAAOE;AAAA;AAAA,cAEGC,EAAS;AAAA,MACf,MAAM;AAAA,MACN,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,OAAO,KAAK;AAAA,IAAA,CACb,CAAC;AAAA,cACMC,EAAS;AAAA,MACf,OAAOH,IAAY,QAAQ,KAAK,UAAU,KAAK,YAAY,WAAW,SAAS;AAAA,MAC/E,QAAQ,KAAK,UAAUN,EAAO,KAAK,OAAO;AAAA,IAAA,CAC3C,CAAC;AAAA,mBACWI,CAAK;AAAA;AAAA,EAEtB;AAAA,EAES,SAAyB;AAChC,WAAI,KAAK,SAAS,IAAU,KAAK,KAAK,GAAG,EAAK,IAEvCG;AAAA,QACH,MAAM;AAAA,MAAK,EAAE,QAAQ,KAAK,MAAA;AAAA,MAAS,CAACG,GAAGN,MACvC,KAAK,KAAKA,GAAOA,MAAU,KAAK,QAAQ,CAAC;AAAA,IAAA,CAC1C;AAAA;AAAA,EAEL;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GAGN,KAAK,aAAa,eAAe,MAAM;AAAA,EACzC;AACF;AAnDEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlD9BX,EAmDX,WAAA,SAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtDfX,EAuDX,WAAA,OAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1DfX,EA2DX,WAAA,QAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9DfX,EA+DX,WAAA,OAAA;AAGAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjEhBX,EAkEX,WAAA,UAAA;AAsCFY,EAAc,eAAeZ,CAAU;"}
1	+ {"version":3,"file":"kt-skeleton.js","sources":["../../../../src/components/feedback/kt-skeleton/kt-skeleton.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport type KtSkeletonVariant = 'text' \| 'rect' \| 'circle';\n\n/** Default height per variant, when none is given. /\nconst HEIGHT: Record<KtSkeletonVariant, string> = {\n text: '14px',\n rect: '80px',\n circle: '40px',\n};\n\n/\n A loading placeholder, pulsing between two steps of the surface ramp.\n \n With `count` above one, the last line is drawn short — the shape a paragraph\n * actually has, which is what makes a skeleton read as text rather than as\n * stacked bars.\n \n The whole thing is `aria-hidden`: it is a picture of content that is not\n * there yet. Announce loading state on the region that owns it, with\n * `aria-busy`.\n \n @element kt-skeleton\n \n @csspart line - One placeholder line.\n \n @example\n * ```html\n * <kt-skeleton count=\"3\"></kt-skeleton>\n * <kt-skeleton variant=\"circle\" width=\"48px\" height=\"48px\"></kt-skeleton>\n * ```\n /\nexport class KtSkeleton extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .line {\n display: block;\n background: var(--surface-raised);\n border-radius: var(--border-radius);\n }\n\n .text {\n border-radius: calc(4px var(--radius-scale, 1));\n }\n\n .circle {\n border-radius: var(--radius-full);\n }\n\n .pulse {\n animation: kt-skeleton-pulse 1.4s var(--easing-standard) infinite;\n }\n\n @keyframes kt-skeleton-pulse {\n 0%,\n 100% {\n background: var(--surface-raised);\n }\n 50% {\n background: var(--surface-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .pulse {\n animation: none;\n }\n }\n `,\n ];\n\n @property({ type: String, reflect: true })\n variant: KtSkeletonVariant = 'text';\n\n /** Any CSS length. Defaults to the full width, or 40px for a circle. /\n @property({ type: String })\n width = '';\n\n /* Any CSS length. Defaults to the variant's natural height. /\n @property({ type: String })\n height = '';\n\n /* How many lines to draw. Above one, the last is shortened. */\n @property({ type: Number })\n count = 1;\n\n @property({ type: Boolean })\n animated = true;\n\n private line(index: number, last: boolean): TemplateResult {\n const shortened = last && this.count > 1 && this.variant === 'text';\n\n return html`<span\n part=\"line\"\n class=${classMap({\n line: true,\n [this.variant]: true,\n pulse: this.animated,\n })}\n style=${styleMap({\n width: shortened ? '60%' : this.width \|\| (this.variant === 'circle' ? '40px' : '100%'),\n height: this.height \|\| HEIGHT[this.variant],\n })}\n data-index=${index}\n ></span>`;\n }\n\n override render(): TemplateResult {\n if (this.count <= 1) return this.line(0, false);\n\n return html`<span class=\"group\">\n ${Array.from({ length: this.count }, (_, index) =>\n this.line(index, index === this.count - 1),\n )}\n </span>`;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // A skeleton is a picture of absent content: there is nothing here to\n // announce, and reading out a dozen empty boxes is worse than silence.\n this.setAttribute('aria-hidden', 'true');\n }\n}\n\ndefineElement('kt-skeleton', KtSkeleton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-skeleton': KtSkeleton;\n }\n}\n"],"names":["HEIGHT","KtSkeleton","KtElement","css","index","last","shortened","html","classMap","styleMap","_","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AASA,MAAMA,IAA4C;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;AAuBO,MAAMC,UAAmBC,EAAU;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmDL,KAAA,UAA6B,QAI7B,KAAA,QAAQ,IAIR,KAAA,SAAS,IAIT,KAAA,QAAQ,GAGR,KAAA,WAAW;AAAA,EAAA;AAAA,EAjEX,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,IAAA;AAAA,EA6CF;AAAA,EAoBQ,KAAKC,GAAeC,GAA+B;AACzD,UAAMC,IAAYD,KAAQ,KAAK,QAAQ,KAAK,KAAK,YAAY;AAE7D,WAAOE;AAAA;AAAA,cAEGC,EAAS;AAAA,MACf,MAAM;AAAA,MACN,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,OAAO,KAAK;AAAA,IAAA,CACb,CAAC;AAAA,cACMC,EAAS;AAAA,MACf,OAAOH,IAAY,QAAQ,KAAK,UAAU,KAAK,YAAY,WAAW,SAAS;AAAA,MAC/E,QAAQ,KAAK,UAAUN,EAAO,KAAK,OAAO;AAAA,IAAA,CAC3C,CAAC;AAAA,mBACWI,CAAK;AAAA;AAAA,EAEtB;AAAA,EAES,SAAyB;AAChC,WAAI,KAAK,SAAS,IAAU,KAAK,KAAK,GAAG,EAAK,IAEvCG;AAAA,QACH,MAAM;AAAA,MAAK,EAAE,QAAQ,KAAK,MAAA;AAAA,MAAS,CAACG,GAAGN,MACvC,KAAK,KAAKA,GAAOA,MAAU,KAAK,QAAQ,CAAC;AAAA,IAAA,CAC1C;AAAA;AAAA,EAEL;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GAGN,KAAK,aAAa,eAAe,MAAM;AAAA,EACzC;AACF;AAnDEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlD9BX,EAmDX,WAAA,SAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtDfX,EAuDX,WAAA,OAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1DfX,EA2DX,WAAA,QAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9DfX,EA+DX,WAAA,OAAA;AAGAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjEhBX,EAkEX,WAAA,UAAA;AAsCFY,EAAc,eAAeZ,CAAU;"}

package/dist/components/feedback/kt-toast/kt-toast.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { css as v, nothing as n, html as a } from "lit";
 import { state as u, property as s } from "lit/decorators.js";
-import { K as p, d as m } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as p, d as m } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as b } from "../../../chunks/events-r51msXNf.js";
-import { s as h } from "../../../chunks/index-STEEvEP7.js";
+import { s as h } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../kt-progress-bar/kt-progress-bar.js";
 var f = Object.defineProperty, o = (c, i, e, w) => {
@@ -144,7 +144,7 @@ class r extends p {
         color: currentcolor;
         background: transparent;
         border: none;
-        border-radius: 4px;
+        border-radius: calc(4px * var(--radius-scale, 1));
         cursor: pointer;
       }
       .close:focus-visible {

package/dist/components/feedback/kt-toast/kt-toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' \| 'information' \| 'warning' \| 'error';\n\ninterface VariantMeta {\n readonly icon: string;\n readonly progress: 'success' \| 'info' \| 'warning' \| 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n success: { icon: 'circle-check', progress: 'success' },\n information: { icon: 'info', progress: 'info' },\n warning: { icon: 'triangle-alert', progress: 'warning' },\n error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. /\nconst TICK_MS = 50;\n\n/\n A transient notification.\n \n The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n \n @element kt-toast\n \n @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n \n @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n * dismiss button. `<kt-toast-container>` listens for this.\n /\nexport class KtToast extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .toast {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--gap-form);\n max-width: 480px;\n padding: var(--padding-form);\n overflow: hidden;\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid color-mix(in srgb, var(--color-white) 10%, transparent);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-toast);\n backdrop-filter: blur(10px);\n }\n\n / A wash of the variant's hue over the card surface, rather than a\n solid fill: the text stays on a neutral background and keeps its\n contrast. /\n :host([variant='success']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-success-base) 25%, transparent),\n color-mix(in srgb, var(--color-success-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n :host([variant='information']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-info-base) 25%, transparent),\n color-mix(in srgb, var(--color-info-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n :host([variant='warning']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-warning-base) 25%, transparent),\n color-mix(in srgb, var(--color-warning-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n :host([variant='error']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-danger-base) 25%, transparent),\n color-mix(in srgb, var(--color-danger-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n\n :host([variant='success']) .heading {\n color: var(--color-success-text);\n }\n :host([variant='information']) .heading {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .heading {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .heading {\n color: var(--color-danger-text);\n }\n\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='information']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .icon {\n color: var(--color-danger-text);\n }\n\n .body {\n display: flex;\n align-items: center;\n gap: var(--gap-form);\n }\n\n .icon {\n display: flex;\n align-items: center;\n }\n\n .content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--gap-element);\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n font: var(--font-normal-regular);\n }\n\n .close {\n display: flex;\n align-items: center;\n padding: 4px;\n color: currentcolor;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n\n .countdown {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n `,\n ];\n\n private timer: ReturnType<typeof setInterval> \| undefined;\n\n @state()\n private remaining = 0;\n\n @property({ type: String, reflect: true })\n variant: KtToastVariant = 'information';\n\n /\n The toast's title.\n \n Named `heading` because every element already has a `title`, and shadowing\n * it would turn the toast into its own tooltip.\n /\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: Boolean })\n dismissible = false;\n\n /\n Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n * keeps the toast until something removes it.\n /\n @property({ type: Number })\n duration = 0;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.startCountdown();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.stopCountdown();\n }\n\n private startCountdown(): void {\n this.stopCountdown();\n if (this.duration <= 0) return;\n\n this.remaining = this.duration;\n this.tick();\n }\n\n /* Runs the countdown from whatever `remaining` currently is. /\n private tick(): void {\n this.timer = setInterval(() => {\n this.remaining -= TICK_MS;\n if (this.remaining > 0) return;\n\n this.stopCountdown();\n this.close();\n }, TICK_MS);\n }\n\n private stopCountdown(): void {\n if (this.timer !== undefined) clearInterval(this.timer);\n this.timer = undefined;\n }\n\n /* Pauses the countdown. The container calls this while the pointer is over the stack. /\n pause(): void {\n if (this.timer !== undefined) this.stopCountdown();\n }\n\n /* Resumes a paused countdown from where it stopped. /\n resume(): void {\n if (this.duration <= 0 \|\| this.timer !== undefined \|\| this.remaining <= 0) return;\n this.tick();\n }\n\n /* Asks to be removed. The container is what actually removes it. */\n close(): void {\n this.stopCountdown();\n emit(this, 'kt-toast-close');\n }\n\n override render(): TemplateResult {\n const meta = META[this.variant];\n const showCountdown = this.duration > 0;\n\n return html`<div\n part=\"base\"\n class=\"toast\"\n role=${this.variant === 'error' ? 'alert' : 'status'}\n aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n >\n <div class=\"body\">\n <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n <div class=\"content\">\n ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n </div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=${strings().close}\n @click=${this.close}\n >\n <kt-icon name=\"x\" size=\"18\"></kt-icon>\n </button>`\n : nothing\n }\n ${\n showCountdown\n ? html`<div class=\"countdown\">\n <kt-progress-bar\n size=\"small\"\n variant=${meta.progress}\n striped\n animated\n .value=${this.remaining}\n .max=${this.duration}\n label=${strings().timeRemaining}\n ></kt-progress-bar>\n </div>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-toast': KtToast;\n }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","strings","__decorateClass","state","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' \| 'information' \| 'warning' \| 'error';\n\ninterface VariantMeta {\n readonly icon: string;\n readonly progress: 'success' \| 'info' \| 'warning' \| 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n success: { icon: 'circle-check', progress: 'success' },\n information: { icon: 'info', progress: 'info' },\n warning: { icon: 'triangle-alert', progress: 'warning' },\n error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. /\nconst TICK_MS = 50;\n\n/\n A transient notification.\n \n The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n \n @element kt-toast\n \n @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n \n @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n * dismiss button. `<kt-toast-container>` listens for this.\n /\nexport class KtToast extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .toast {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--gap-form);\n max-width: 480px;\n padding: var(--padding-form);\n overflow: hidden;\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid color-mix(in srgb, var(--color-white) 10%, transparent);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-toast);\n backdrop-filter: blur(10px);\n }\n\n / A wash of the variant's hue over the card surface, rather than a\n solid fill: the text stays on a neutral background and keeps its\n contrast. /\n :host([variant='success']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-success-base) 25%, transparent),\n color-mix(in srgb, var(--color-success-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n :host([variant='information']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-info-base) 25%, transparent),\n color-mix(in srgb, var(--color-info-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n :host([variant='warning']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-warning-base) 25%, transparent),\n color-mix(in srgb, var(--color-warning-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n :host([variant='error']) .toast {\n background:\n linear-gradient(\n 135deg,\n color-mix(in srgb, var(--color-danger-base) 25%, transparent),\n color-mix(in srgb, var(--color-danger-base) 15%, transparent)\n ),\n var(--surface-card);\n }\n\n :host([variant='success']) .heading {\n color: var(--color-success-text);\n }\n :host([variant='information']) .heading {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .heading {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .heading {\n color: var(--color-danger-text);\n }\n\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='information']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .icon {\n color: var(--color-danger-text);\n }\n\n .body {\n display: flex;\n align-items: center;\n gap: var(--gap-form);\n }\n\n .icon {\n display: flex;\n align-items: center;\n }\n\n .content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--gap-element);\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n font: var(--font-normal-regular);\n }\n\n .close {\n display: flex;\n align-items: center;\n padding: 4px;\n color: currentcolor;\n background: transparent;\n border: none;\n border-radius: calc(4px var(--radius-scale, 1));\n cursor: pointer;\n }\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n\n .countdown {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n `,\n ];\n\n private timer: ReturnType<typeof setInterval> \| undefined;\n\n @state()\n private remaining = 0;\n\n @property({ type: String, reflect: true })\n variant: KtToastVariant = 'information';\n\n /*\n The toast's title.\n \n Named `heading` because every element already has a `title`, and shadowing\n * it would turn the toast into its own tooltip.\n /\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: Boolean })\n dismissible = false;\n\n /\n Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n * keeps the toast until something removes it.\n /\n @property({ type: Number })\n duration = 0;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.startCountdown();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.stopCountdown();\n }\n\n private startCountdown(): void {\n this.stopCountdown();\n if (this.duration <= 0) return;\n\n this.remaining = this.duration;\n this.tick();\n }\n\n /* Runs the countdown from whatever `remaining` currently is. /\n private tick(): void {\n this.timer = setInterval(() => {\n this.remaining -= TICK_MS;\n if (this.remaining > 0) return;\n\n this.stopCountdown();\n this.close();\n }, TICK_MS);\n }\n\n private stopCountdown(): void {\n if (this.timer !== undefined) clearInterval(this.timer);\n this.timer = undefined;\n }\n\n /* Pauses the countdown. The container calls this while the pointer is over the stack. /\n pause(): void {\n if (this.timer !== undefined) this.stopCountdown();\n }\n\n /* Resumes a paused countdown from where it stopped. /\n resume(): void {\n if (this.duration <= 0 \|\| this.timer !== undefined \|\| this.remaining <= 0) return;\n this.tick();\n }\n\n /* Asks to be removed. The container is what actually removes it. */\n close(): void {\n this.stopCountdown();\n emit(this, 'kt-toast-close');\n }\n\n override render(): TemplateResult {\n const meta = META[this.variant];\n const showCountdown = this.duration > 0;\n\n return html`<div\n part=\"base\"\n class=\"toast\"\n role=${this.variant === 'error' ? 'alert' : 'status'}\n aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n >\n <div class=\"body\">\n <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n <div class=\"content\">\n ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n </div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=${strings().close}\n @click=${this.close}\n >\n <kt-icon name=\"x\" size=\"18\"></kt-icon>\n </button>`\n : nothing\n }\n ${\n showCountdown\n ? html`<div class=\"countdown\">\n <kt-progress-bar\n size=\"small\"\n variant=${meta.progress}\n striped\n animated\n .value=${this.remaining}\n .max=${this.duration}\n label=${strings().timeRemaining}\n ></kt-progress-bar>\n </div>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-toast': KtToast;\n }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","strings","__decorateClass","state","property","defineElement"],"mappings":"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"}

package/dist/components/feedback/kt-toast-container/kt-toast-container.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as c, html as m } from "lit";
 import { property as p } from "lit/decorators.js";
-import { K as l, d } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as l, d } from "../../../chunks/kt-element-T0VbIBNp.js";
 import "../kt-toast/kt-toast.js";
 var f = Object.defineProperty, h = (i, t, e, n) => {
   for (var s = void 0, o = i.length - 1, a; o >= 0; o--)

package/dist/components/feedback/kt-tooltip/kt-tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as h, html as c } from "lit";
 import { state as b, query as u, property as n } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { K as l, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as l, d as f } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { u as m } from "../../../chunks/events-r51msXNf.js";
 import { p as w } from "../../../chunks/position-Cx_ZH5zh.js";
 var y = Object.defineProperty, o = (r, e, s, d) => {

package/dist/components/forms/kt-calendar/kt-calendar.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import '../../core/kt-icon/kt-icon.js';
-export type KtCalendarView = 'day' | 'month' | 'year';
+/** The grid of days, or the panel of years and months the title opens. */
+export type KtCalendarView = 'day' | 'month';
 /**
  * A month calendar to pick a day or a period from, shown in the page.
  *
@@ -9,14 +10,15 @@ export type KtCalendarView = 'day' | 'month' | 'year';
  * calendar is the interface rather than a way to fill a field: a booking
  * page, a dashboard's date filter, a planning view.
  *
- * The header's month and year are buttons. The month opens a grid of the
- * twelve months, the year a grid of twelve years, so reaching a date years
- * away takes three clicks rather than paging month by month.
+ * The title — "September 2026" — opens one panel: a scrolling list of years
+ * beside the twelve months of the one chosen. A year is a click or four typed
+ * digits away, then its month a second click, whatever the distance.
  *
  * Keyboard, in the day grid (the WAI-ARIA date grid pattern): arrows by day
  * and week, Home/End to the week's ends, Page Up/Down by month and with Shift
- * by year, Enter to choose. In the month and year grids: arrows, Page Up/Down
- * by year or by twelve years, Enter to choose, Escape back to the days.
+ * by year, Enter to choose. In the year list: arrows, Page Up/Down by ten,
+ * Home/End, or type the year; Enter or Tab on to the months. In the months:
+ * arrows, Enter to choose. Escape returns to the days.
  *
  * @element kt-calendar
  *
@@ -35,6 +37,11 @@ export declare class KtCalendar extends KtElement {
     static styles: import("lit").CSSResultGroup[];
     private readonly liveId;
     private focusCell;
+    /** Set when the year list should scroll its year into view, and focus it. */
+    private focusYear;
+    /** Digits typed into the year list, and when the last one came. */
+    private typed;
+    private typedAt;
     /** Set while the calendar writes its own value, which should not move it. */
     private committing;
     private view;
@@ -57,11 +64,19 @@ export declare class KtCalendar extends KtElement {
      * page's `lang`, then the browser's language.
      */
     locale: string;
+    /** How many months the day view shows side by side: 1, or 2 for a period. */
+    months: 1 | 2;
     /** Accessible name of the calendar. Defaults to the strings registry. */
     label: string;
     connectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
     updated(): void;
+    /**
+     * Keeps the chosen year in sight in its list — centred when the panel
+     * opens — and focuses it when asked. The list scrolls itself; the page
+     * never does.
+     */
+    private revealYear;
     /** Focuses the grid's current cell — the chosen day, or today. */
     focus(): void;
     private get resolvedLocale();
@@ -72,20 +87,31 @@ export declare class KtCalendar extends KtElement {
     /** A month or a year is unavailable only when every day of it is. */
     private isSpanOutOfBounds;
     private format;
-    /** Moves the tab stop, and the day view with it when it leaves the month. */
+    private get monthSpan();
+    /**
+     * Moves the tab stop, and the day view with it only when the date leaves
+     * the months on screen — moving across two months does not page.
+     */
     private jumpTo;
+    /** The header's arrows: the whole view, and the tab stop with it, by a month. */
+    private page;
     private setView;
+    /** The years the list offers: the bounds, or a span around today. */
+    private get yearRange();
     private chooseDay;
     private commit;
     private chooseMonth;
+    /** Shows a year's months, staying in the panel. */
     private chooseYear;
+    private onYearKeyDown;
     private onDayKeyDown;
-    /** Months and years share one model: a list of cells, three to a row. */
+    /** The months, three to a row; crossing a year end moves the year list too. */
     private onPickerKeyDown;
     private renderHeader;
     private renderDay;
     private renderDays;
-    /** The month or year grid: twelve cells, three to a row. */
+    private renderMonth;
+    /** The panel the title opens: the years, and the twelve months of one. */
     private renderPicker;
     render(): TemplateResult;
 }

package/dist/components/forms/kt-calendar/kt-calendar.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/class-map.js";
-import "../../../chunks/kt-element-Djx2JcGl.js";
+import "../../../chunks/kt-element-T0VbIBNp.js";
 import "../../../chunks/events-r51msXNf.js";
 import "../../../chunks/locale-C5xLkGx5.js";
-import "../../../chunks/index-STEEvEP7.js";
-import { K as f } from "../../../chunks/kt-calendar-B_hFdD9V.js";
+import "../../../chunks/index-TWJzttLX.js";
+import { K as f } from "../../../chunks/kt-calendar-CtwOby1R.js";
 import "../../core/kt-icon/kt-icon.js";
 export {
   f as KtCalendar

package/dist/components/forms/kt-checkbox/kt-checkbox.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { css as p, nothing as a, html as c } from "lit";
 import { query as b, property as i, state as u } from "lit/decorators.js";
 import { live as m } from "lit/directives/live.js";
-import { K as d, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { K as d, d as f } from "../../../chunks/kt-element-T0VbIBNp.js";
 import { e as k } from "../../../chunks/events-r51msXNf.js";
 import { a as v, s as g, b as y } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as x } from "../../../chunks/index-STEEvEP7.js";
+import { s as x } from "../../../chunks/index-TWJzttLX.js";
 import "../../core/kt-icon/kt-icon.js";
 var C = Object.defineProperty, r = (l, e, o, $) => {
   for (var s = void 0, n = l.length - 1, h; n >= 0; n--)

package/dist/components/forms/kt-date-input/kt-date-input.d.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { KtSegmentedField, type FieldItem, type Segment } from '#internal/segmented-field';
+import '../kt-calendar/kt-calendar.js';
+import '../../core/kt-icon/kt-icon.js';
+import '../../feedback/kt-tooltip/kt-tooltip.js';
+/**
+ * A date typed into its parts: day, month and year, each its own segment.
+ *
+ * The segments come in the order the reader's language writes a date —
+ * `25/09/2026` in London, `09/25/2026` in New York, `25.09.2026` in Berlin —
+ * and the focus moves on as each fills, so a date is eight keystrokes. The
+ * arrows step a segment, a day never past its month's end. The value is ISO
+ * 8601, `2026-09-25`, and `null` until the date is complete.
+ *
+ * With `calendar`, a button at the end opens a `<kt-calendar>` to pick from.
+ *
+ * @element kt-date-input
+ *
+ * @csspart field - The field.
+ * @csspart segment - A day, month or year segment.
+ * @csspart trigger - The calendar button, with `calendar`.
+ * @csspart panel - The calendar popup, with `calendar`.
+ *
+ * @fires kt-change - The date became complete, changed, or stopped being one.
+ *   `detail: { value }` — the ISO date or `null`.
+ *
+ * @example
+ * ```html
+ * <kt-date-input label="Date of birth" name="born" max="2026-12-31"></kt-date-input>
+ * <kt-date-input label="Due date" calendar value="2026-09-25"></kt-date-input>
+ * ```
+ */
+export declare class KtDateInput extends KtSegmentedField {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    /** Adds a button that opens a calendar to pick the date from. */
+    calendar: boolean;
+    private open;
+    private placement;
+    private calendarElement?;
+    private readonly panelId;
+    private floating;
+    protected items(): FieldItem[];
+    protected fill(value: string | null): Record<string, string>;
+    protected read(texts: Record<string, string>): {
+        value: string | null;
+        error: string;
+    };
+    /** A year left at two digits is written out: 98 is 1998, 30 is 2030. */
+    protected completeOnBlur(segment: Segment, text: string): string | null;
+    protected requiredMessage(): string;
+    protected get expanded(): boolean;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private onDocumentPointerDown;
+    private toggleCalendar;
+    private close;
+    private onCalendarChange;
+    private onPanelKeyDown;
+    protected renderAfter(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-date-input': KtDateInput;
+    }
+}