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/README.md CHANGED Viewed

@@ -103,8 +103,8 @@ import 'kanto-ds/components/core/kt-button'; // just this one
 ## Icons
 `<kt-icon>` resolves [Lucide](https://lucide.dev) icons by name at render time,
-which means the set cannot be tree-shaken. So Kanto ships only the seventeen its
-own elements draw. Register what your application uses:
+which means the set cannot be tree-shaken. So Kanto ships only the 22 its own
+elements draw. Register what your application uses:
 ```js
 import { Rocket, Wallet } from 'lucide';
@@ -128,6 +128,24 @@ input — no hidden mirror inputs, no manual wiring.
 </form>
 ```
+## Editor support
+The package ships a [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/)
+— every element's attributes, properties, events, slots and CSS parts — and
+editor data generated from it, so plain HTML gets completion and hover docs:
+- **WebStorm / JetBrains** read `web-types.json` from the package on their own.
+- **VS Code** needs pointing at it once, in `.vscode/settings.json`:
+  ```json
+  {
+    "html.customData": ["./node_modules/kanto-ds/dist/vscode.html-custom-data.json"],
+    "css.customData": ["./node_modules/kanto-ds/dist/vscode.css-custom-data.json"]
+  }
+  ```
+- **Storybook** and API-docs generators take `kanto-ds/custom-elements.json`.
 ## Accessibility
 Not a phase at the end; it is why several of these components exist in this

package/dist/chunks/form-control-CxjBTt1c.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-control-CxjBTt1c.js","sources":["../../src/internal/form-control.ts"],"sourcesContent":["/*\n Form participation for Kanto's input elements.\n \n A control inside a shadow root is invisible to the form around it. The\n * platform's answer is `ElementInternals`: the element declares\n * `static formAssociated = true`, calls `attachInternals()` and pushes its\n * value in with `setFormValue`, which makes it a first-class form control —\n * serialised into `FormData`, reset by `form.reset()`, validated by\n * `form.checkValidity()`.\n \n Every browser Kanto targets supports this. Test environments do not: neither\n * happy-dom nor jsdom implements it, and jsdom stubs `attachInternals` with an\n * object that has no `setFormValue`. So each call is guarded, and an element\n * still works — minus form serialisation — where the API is missing.\n /\n\n/* An `ElementInternals` implementation complete enough to be worth calling. /\nexport type UsableInternals = ElementInternals;\n\nexport function attachFormInternals(host: HTMLElement): UsableInternals \| null {\n if (typeof host.attachInternals !== 'function') return null;\n\n const internals = host.attachInternals();\n if (typeof internals.setFormValue !== 'function') return null;\n\n return internals;\n}\n\n/* Pushes the control's current value into the enclosing form, if there is one. /\nexport function setFormValue(internals: UsableInternals \| null, value: string \| null): void {\n internals?.setFormValue(value);\n}\n\n/\n Mirrors a control's validity onto the host element.\n \n `anchor` is the element a browser scrolls to and anchors the native bubble\n * against when the form is submitted invalid.\n */\nexport function setValidity(\n internals: UsableInternals \| null,\n flags: ValidityStateFlags,\n message: string,\n anchor?: HTMLElement,\n): void {\n if (!internals \|\| typeof internals.setValidity !== 'function') return;\n if (Object.values(flags).some(Boolean)) internals.setValidity(flags, message, anchor);\n else internals.setValidity({});\n}\n"],"names":["attachFormInternals","host","internals","setFormValue","value","setValidity","flags","message","anchor"],"mappings":"AAmBO,SAASA,EAAoBC,GAA2C;AAC7E,MAAI,OAAOA,EAAK,mBAAoB,WAAY,QAAO;AAEvD,QAAMC,IAAYD,EAAK,gBAAA;AACvB,SAAI,OAAOC,EAAU,gBAAiB,aAAmB,OAElDA;AACT;~~AAGO~~,SAASC,~~EAAaD~~,~~GAAmCE~~,~~GAA4B~~;~~AAC1F~~,EAAAF,GAAW,aAAaE,CAAK;AAC/B;AAQO,SAASC,EACdH,GACAI,GACAC,GACAC,GACM;AACN,EAAI,CAACN,KAAa,OAAOA,EAAU,eAAgB,eAC/C,OAAO,OAAOI,CAAK,EAAE,KAAK,OAAO,IAAGJ,EAAU,YAAYI,GAAOC,GAASC,CAAM,IAC/EN,EAAU,YAAY,EAAE;AAC/B;"}
1	+ {"version":3,"file":"form-control-CxjBTt1c.js","sources":["../../src/internal/form-control.ts"],"sourcesContent":["/*\n Form participation for Kanto's input elements.\n \n A control inside a shadow root is invisible to the form around it. The\n * platform's answer is `ElementInternals`: the element declares\n * `static formAssociated = true`, calls `attachInternals()` and pushes its\n * value in with `setFormValue`, which makes it a first-class form control —\n * serialised into `FormData`, reset by `form.reset()`, validated by\n * `form.checkValidity()`.\n \n Every browser Kanto targets supports this. Test environments do not: neither\n * happy-dom nor jsdom implements it, and jsdom stubs `attachInternals` with an\n * object that has no `setFormValue`. So each call is guarded, and an element\n * still works — minus form serialisation — where the API is missing.\n /\n\n/* An `ElementInternals` implementation complete enough to be worth calling. /\nexport type UsableInternals = ElementInternals;\n\nexport function attachFormInternals(host: HTMLElement): UsableInternals \| null {\n if (typeof host.attachInternals !== 'function') return null;\n\n const internals = host.attachInternals();\n if (typeof internals.setFormValue !== 'function') return null;\n\n return internals;\n}\n\n/\n Pushes the control's current value into the enclosing form, if there is one.\n \n A `FormData` submits each of its entries as they are named in it — which is\n * how one control contributes several files under one name.\n /\nexport function setFormValue(\n internals: UsableInternals \| null,\n value: string \| FormData \| null,\n): void {\n internals?.setFormValue(value);\n}\n\n/\n Mirrors a control's validity onto the host element.\n \n `anchor` is the element a browser scrolls to and anchors the native bubble\n * against when the form is submitted invalid.\n */\nexport function setValidity(\n internals: UsableInternals \| null,\n flags: ValidityStateFlags,\n message: string,\n anchor?: HTMLElement,\n): void {\n if (!internals \|\| typeof internals.setValidity !== 'function') return;\n if (Object.values(flags).some(Boolean)) internals.setValidity(flags, message, anchor);\n else internals.setValidity({});\n}\n"],"names":["attachFormInternals","host","internals","setFormValue","value","setValidity","flags","message","anchor"],"mappings":"AAmBO,SAASA,EAAoBC,GAA2C;AAC7E,MAAI,OAAOA,EAAK,mBAAoB,WAAY,QAAO;AAEvD,QAAMC,IAAYD,EAAK,gBAAA;AACvB,SAAI,OAAOC,EAAU,gBAAiB,aAAmB,OAElDA;AACT;AAQO,SAASC,EACdD,GACAE,GACM;AACN,EAAAF,GAAW,aAAaE,CAAK;AAC/B;AAQO,SAASC,EACdH,GACAI,GACAC,GACAC,GACM;AACN,EAAI,CAACN,KAAa,OAAOA,EAAU,eAAgB,eAC/C,OAAO,OAAOI,CAAK,EAAE,KAAK,OAAO,IAAGJ,EAAU,YAAYI,GAAOC,GAASC,CAAM,IAC/EN,EAAU,YAAY,EAAE;AAC/B;"}

package/dist/chunks/kt-element-B_jjQDhg.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { LitElement as i, css as s } from "lit";
+class o extends i {
+  static {
+    this.styles = s`
+    :host {
+      box-sizing: border-box;
+    }
+    :host([hidden]) {
+      display: none !important;
+    }
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+    /* Read by assistive technology, never drawn. */
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  `;
+  }
+}
+function d(e, t) {
+  customElements.get(e) || customElements.define(e, t);
+}
+export {
+  o as K,
+  d
+};
+//# sourceMappingURL=kt-element-B_jjQDhg.js.map

package/dist/chunks/kt-element-B_jjQDhg.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"kt-element-B_jjQDhg.js","sources":["../../src/internal/kt-element.ts"],"sourcesContent":["import { LitElement, css, type CSSResultGroup } from 'lit';\n\n/**\n * Base class for every Kanto element.\n *\n * It exists for two reasons. First, `box-sizing: border-box` does not cross a\n * shadow boundary, so each root has to re-establish it. Second, `[hidden]`\n * loses to a `:host { display: flex }` rule inside the shadow root, and every\n * element in this system sets its own display — without the override here,\n * hiding a Kanto element from the outside silently does nothing.\n */\nexport class KtElement extends LitElement {\n static override styles: CSSResultGroup = css`\n :host {\n box-sizing: border-box;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: inherit;\n }\n\n /* Read by assistive technology, never drawn. */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n }\n `;\n}\n\n/**\n * Registers a custom element, tolerating a repeat call.\n *\n * A design system gets loaded twice more often than you would like — two\n * versions in one dependency tree, a dev-server hot reload, a micro-frontend\n * mounting a second copy. `customElements.define` throws on a duplicate tag\n * and would take the whole page down with it.\n */\nexport function defineElement(tag: string, ctor: CustomElementConstructor): void {\n if (customElements.get(tag)) return;\n customElements.define(tag, ctor);\n}\n"],"names":["KtElement","LitElement","css","defineElement","tag","ctor"],"mappings":";AAWO,MAAMA,UAAkBC,EAAW;AAAA,EACxC,OAAA;AAAA,SAAgB,SAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAyB3C;AAUO,SAASC,EAAcC,GAAaC,GAAsC;AAC/E,EAAI,eAAe,IAAID,CAAG,KAC1B,eAAe,OAAOA,GAAKC,CAAI;AACjC;"}

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

@@ -1,25 +1,25 @@
 import { css as p, nothing as f, html as n } from "lit";
 import { state as v, property as o } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
-import { K as u, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as d, d as g } from "../../../chunks/kt-element-B_jjQDhg.js";
 import "../kt-icon/kt-icon.js";
 var m = Object.defineProperty, s = (a, e, t, b) => {
   for (var i = void 0, l = a.length - 1, h; l >= 0; l--)
     (h = a[l]) && (i = h(e, t, i) || i);
   return i && m(e, t, i), i;
 };
-const d = Array.from({ length: 8 }, (a, e) => `var(--chart-series-${e + 1})`);
+const u = Array.from({ length: 8 }, (a, e) => `var(--chart-series-${e + 1})`);
 function y(a) {
   const t = (a.includes("@") ? a.split("@")[0] ?? "" : a).split(/[\s._-]+/).filter(Boolean);
   return t.length === 0 ? "" : t.length === 1 ? (t[0] ?? "").slice(0, 2).toUpperCase() : `${t[0][0]}${t[t.length - 1][0]}`.toUpperCase();
 }
-class r extends u {
+class r extends d {
   constructor() {
     super(...arguments), this.failed = !1, this.name = "", this.src = "", this.size = "medium", this.square = !1, this.color = "";
   }
   static {
     this.styles = [
-      u.styles,
+      d.styles,
       p`
       :host {
         display: inline-flex;
@@ -48,7 +48,10 @@ class r extends u {
         width: var(--kt-avatar-size);
         height: var(--kt-avatar-size);
         overflow: hidden;
-        color: var(--kt-avatar-hue, var(--text-muted));
+        /* The hue alone is too faint on its own 12% tint. Pulled towards the
+           body text — lighter in dark, darker in light — it keeps its identity
+           and clears 4.5:1 for all eight hues in both themes. */
+        color: color-mix(in srgb, var(--kt-avatar-hue, var(--text-muted)) 45%, var(--text-body));
         font: 600 calc(var(--kt-avatar-size) * 0.36) / 1 var(--font-family-body);
         background: color-mix(in srgb, var(--kt-avatar-hue, transparent) 12%, transparent);
         border-radius: var(--radius-full);
@@ -104,7 +107,7 @@ class r extends u {
     if (this.color) return this.color;
     let e = 0;
     for (const t of this.name) e += t.charCodeAt(0);
-    return d[e % d.length];
+    return u[e % u.length];
   }
   render() {
     const e = y(this.name), t = !!this.src && !this.failed;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-avatar.js","sources":["../../../../src/components/core/kt-avatar/kt-avatar.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } 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 KtAvatarSize = 'small' \| 'medium' \| 'large';\nexport type KtAvatarStatus = 'online' \| 'away' \| 'busy' \| 'offline';\n\n/*\n Deterministic hue per name, so a person keeps their colour everywhere.\n \n From the chart palette, not the semantic one: status colours are reserved,\n * and a person filled with `--color-danger-base` reads as an error rather than\n * as a person. These eight are the same slots a chart uses, in the same fixed\n * order, so an avatar never impersonates a state.\n /\nconst HUES = Array.from({ length: 8 }, (_, i) => `var(--chart-series-${i + 1})`);\n\n/* \"Benjamin Canac\" → \"BC\", \"emma.davis@example.com\" → \"ED\". /\nexport function initialsOf(name: string): string {\n const cleaned = name.includes('@') ? (name.split('@')[0] ?? '') : name;\n const parts = cleaned.split(/[\\s._-]+/).filter(Boolean);\n\n if (parts.length === 0) return '';\n if (parts.length === 1) return (parts[0] ?? '').slice(0, 2).toUpperCase();\n return `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase();\n}\n\n/\n A person or an organisation, as a picture or as their initials.\n \n The fallback is not decoration: most rows in most products have no photo, so\n * the initials path is the one that renders. It picks a colour from the name,\n * which means the same person is the same colour on every screen and the eye\n * can use it.\n \n @element kt-avatar\n \n @csspart base - The avatar circle.\n * @csspart image - The `<img>`, when `src` is set and loads.\n \n @example\n * ```html\n * <kt-avatar name=\"Benjamin Canac\"></kt-avatar>\n * <kt-avatar name=\"Emma Davis\" src=\"/emma.jpg\" status=\"online\"></kt-avatar>\n * ```\n /\nexport class KtAvatar extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n --kt-avatar-size: 32px;\n }\n\n :host([size='small']) {\n --kt-avatar-size: 24px;\n }\n :host([size='large']) {\n --kt-avatar-size: 48px;\n }\n\n / The identity hue is worn exactly the way every other tinted thing in\n Kanto wears one: the colour at 12% behind, the colour itself as the\n ink, and no border — the same pair as a secondary button, a danger\n button or a badge tone. A saturated fill with white initials is a\n different system's idea, and beside those it looks like one. /\n .avatar {\n position: relative;\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--kt-avatar-size);\n height: var(--kt-avatar-size);\n overflow: hidden;\n color: var(--kt-avatar-hue, var(--text-muted));\n font: 600 calc(var(--kt-avatar-size) 0.36) / 1 var(--font-family-body);\n background: color-mix(in srgb, var(--kt-avatar-hue, transparent) 12%, transparent);\n border-radius: var(--radius-full);\n user-select: none;\n }\n\n /* No hue to tint with, and a photograph that fills the circle anyway. /\n .avatar.has-image,\n .avatar.anonymous {\n background: var(--surface-raised);\n }\n\n :host([square]) .avatar {\n border-radius: var(--border-radius);\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n / The dot sits outside the clipped circle, so it needs its own box. /\n .status {\n position: absolute;\n right: 0;\n bottom: 0;\n width: calc(var(--kt-avatar-size) 0.28);\n height: calc(var(--kt-avatar-size) * 0.28);\n border: 2px solid var(--surface-page);\n border-radius: var(--radius-full);\n }\n\n .online {\n background: var(--color-success-base);\n }\n .away {\n background: var(--color-warning-base);\n }\n .busy {\n background: var(--color-danger-base);\n }\n .offline {\n background: var(--color-text-500);\n }\n `,\n ];\n\n @state()\n private failed = false;\n\n /** The person's name. Drives the initials, the colour and the label. /\n @property({ type: String })\n name = '';\n\n /* Photo. Falls back to initials if it is missing or fails to load. /\n @property({ type: String })\n src = '';\n\n @property({ type: String, reflect: true })\n size: KtAvatarSize = 'medium';\n\n /* Rounds to the card radius instead of a circle — for organisations. /\n @property({ type: Boolean, reflect: true })\n square = false;\n\n /* Presence dot. Omit for none. /\n @property({ type: String, reflect: true })\n status?: KtAvatarStatus;\n\n /* Overrides the colour picked from the name. */\n @property({ type: String })\n color = '';\n\n override willUpdate(changed: Map<string, unknown>): void {\n // A new source deserves a fresh attempt; without this a single failure\n // would stick for the element's lifetime.\n if (changed.has('src')) this.failed = false;\n }\n\n private get hue(): string {\n if (this.color) return this.color;\n\n let sum = 0;\n for (const char of this.name) sum += char.charCodeAt(0);\n return HUES[sum % HUES.length]!;\n }\n\n override render(): TemplateResult {\n const initials = initialsOf(this.name);\n const showImage = Boolean(this.src) && !this.failed;\n\n return html`<span\n part=\"base\"\n class=${classMap({ avatar: true, 'has-image': showImage, anonymous: !this.name })}\n style=${showImage ? '' : `--kt-avatar-hue:${this.hue}`}\n role=\"img\"\n aria-label=${this.name \|\| 'Avatar'}\n >\n ${\n showImage\n ? html`<img\n part=\"image\"\n src=${this.src}\n alt=\"\"\n @error=${() => {\n this.failed = true;\n }}\n />`\n : initials \|\| html`<kt-icon name=\"user\" size=\"16\"></kt-icon>`\n }\n ${\n this.status\n ? html`<span class=${classMap({ status: true, [this.status]: true })}></span>`\n : nothing\n }\n </span>`;\n }\n}\n\ndefineElement('kt-avatar', KtAvatar);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-avatar': KtAvatar;\n }\n}\n"],"names":["HUES","_","i","initialsOf","name","parts","KtAvatar","KtElement","css","changed","sum","char","initials","showImage","html","classMap","nothing","__decorateClass","state","property","defineElement"],"mappings":";;;;;;;;;;AAiBA,MAAMA,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAA,GAAK,CAACC,GAAGC,MAAM,sBAAsBA,IAAI,CAAC,GAAG;AAGxE,SAASC,EAAWC,GAAsB;AAE/C,QAAMC,KADUD,EAAK,SAAS,GAAG,IAAKA,EAAK,MAAM,GAAG,EAAE,CAAC,KAAK,KAAMA,GAC5C,MAAM,UAAU,EAAE,OAAO,OAAO;AAEtD,SAAIC,EAAM,WAAW,IAAU,KAC3BA,EAAM,WAAW,KAAWA,EAAM,CAAC,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,YAAA,IACrD,GAAGA,EAAM,CAAC,EAAG,CAAC,CAAC,GAAGA,EAAMA,EAAM,SAAS,CAAC,EAAG,CAAC,CAAC,GAAG,YAAA;AACzD;AAqBO,MAAMC,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,~~GAiFL~~,KAAQ,SAAS,IAIjB,KAAA,OAAO,IAIP,KAAA,MAAM,IAGN,KAAA,OAAqB,UAIrB,KAAA,SAAS,IAQT,KAAA,QAAQ;AAAA,EAAA;AAAA,~~EAvGR~~,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,EA4BS,WAAWC,GAAqC;AAGvD,IAAIA,EAAQ,IAAI,KAAK,WAAQ,SAAS;AAAA,EACxC;AAAA,EAEA,IAAY,MAAc;AACxB,QAAI,KAAK,MAAO,QAAO,KAAK;AAE5B,QAAIC,IAAM;AACV,eAAWC,KAAQ,KAAK,KAAM,CAAAD,KAAOC,EAAK,WAAW,CAAC;AACtD,WAAOX,EAAKU,IAAMV,EAAK,MAAM;AAAA,EAC/B;AAAA,EAES,SAAyB;AAChC,UAAMY,IAAWT,EAAW,KAAK,IAAI,GAC/BU,IAAY,EAAQ,KAAK,OAAQ,CAAC,KAAK;AAE7C,WAAOC;AAAA;AAAA,cAEGC,EAAS,EAAE,QAAQ,IAAM,aAAaF,GAAW,WAAW,CAAC,KAAK,MAAM,CAAC;AAAA,cACzEA,IAAY,KAAK,mBAAmB,KAAK,GAAG,EAAE;AAAA;AAAA,mBAEzC,KAAK,QAAQ,QAAQ;AAAA;AAAA,QAGhCA,IACIC;AAAA;AAAA,oBAEQ,KAAK,GAAG;AAAA;AAAA,uBAEL,MAAM;AACb,WAAK,SAAS;AAAA,IAChB,CAAC;AAAA,kBAEHF,KAAYE,4CAClB;AAAA,QAEE,KAAK,SACDA,gBAAmBC,EAAS,EAAE,QAAQ,IAAM,CAAC,KAAK,MAAM,GAAG,GAAA,CAAM,CAAC,aAClEC,CACN;AAAA;AAAA,EAEJ;AACF;AArEUC,EAAA;AAAA,EADPC,EAAA;AAAM,~~GAhFIZ~~,~~EAiFH~~,WAAA,QAAA;AAIRW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GApFfb~~,~~EAqFX~~,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAxFfb~~,~~EAyFX~~,WAAA,KAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,~~GA3F9Bb~~,~~EA4FX~~,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/F/Bb,~~EAgGX~~,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,~~GAnG9Bb~~,~~EAoGX~~,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAvGfb~~,~~EAwGX~~,WAAA,OAAA;AAgDFc,EAAc,aAAad,CAAQ;"}
1	+ {"version":3,"file":"kt-avatar.js","sources":["../../../../src/components/core/kt-avatar/kt-avatar.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } 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 KtAvatarSize = 'small' \| 'medium' \| 'large';\nexport type KtAvatarStatus = 'online' \| 'away' \| 'busy' \| 'offline';\n\n/*\n Deterministic hue per name, so a person keeps their colour everywhere.\n \n From the chart palette, not the semantic one: status colours are reserved,\n * and a person filled with `--color-danger-base` reads as an error rather than\n * as a person. These eight are the same slots a chart uses, in the same fixed\n * order, so an avatar never impersonates a state.\n /\nconst HUES = Array.from({ length: 8 }, (_, i) => `var(--chart-series-${i + 1})`);\n\n/* \"Benjamin Canac\" → \"BC\", \"emma.davis@example.com\" → \"ED\". /\nexport function initialsOf(name: string): string {\n const cleaned = name.includes('@') ? (name.split('@')[0] ?? '') : name;\n const parts = cleaned.split(/[\\s._-]+/).filter(Boolean);\n\n if (parts.length === 0) return '';\n if (parts.length === 1) return (parts[0] ?? '').slice(0, 2).toUpperCase();\n return `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase();\n}\n\n/\n A person or an organisation, as a picture or as their initials.\n \n The fallback is not decoration: most rows in most products have no photo, so\n * the initials path is the one that renders. It picks a colour from the name,\n * which means the same person is the same colour on every screen and the eye\n * can use it.\n \n @element kt-avatar\n \n @csspart base - The avatar circle.\n * @csspart image - The `<img>`, when `src` is set and loads.\n \n @example\n * ```html\n * <kt-avatar name=\"Benjamin Canac\"></kt-avatar>\n * <kt-avatar name=\"Emma Davis\" src=\"/emma.jpg\" status=\"online\"></kt-avatar>\n * ```\n /\nexport class KtAvatar extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n --kt-avatar-size: 32px;\n }\n\n :host([size='small']) {\n --kt-avatar-size: 24px;\n }\n :host([size='large']) {\n --kt-avatar-size: 48px;\n }\n\n / The identity hue is worn exactly the way every other tinted thing in\n Kanto wears one: the colour at 12% behind, the colour itself as the\n ink, and no border — the same pair as a secondary button, a danger\n button or a badge tone. A saturated fill with white initials is a\n different system's idea, and beside those it looks like one. /\n .avatar {\n position: relative;\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--kt-avatar-size);\n height: var(--kt-avatar-size);\n overflow: hidden;\n / The hue alone is too faint on its own 12% tint. Pulled towards the\n body text — lighter in dark, darker in light — it keeps its identity\n and clears 4.5:1 for all eight hues in both themes. /\n color: color-mix(in srgb, var(--kt-avatar-hue, var(--text-muted)) 45%, var(--text-body));\n font: 600 calc(var(--kt-avatar-size) 0.36) / 1 var(--font-family-body);\n background: color-mix(in srgb, var(--kt-avatar-hue, transparent) 12%, transparent);\n border-radius: var(--radius-full);\n user-select: none;\n }\n\n /* No hue to tint with, and a photograph that fills the circle anyway. /\n .avatar.has-image,\n .avatar.anonymous {\n background: var(--surface-raised);\n }\n\n :host([square]) .avatar {\n border-radius: var(--border-radius);\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n / The dot sits outside the clipped circle, so it needs its own box. /\n .status {\n position: absolute;\n right: 0;\n bottom: 0;\n width: calc(var(--kt-avatar-size) 0.28);\n height: calc(var(--kt-avatar-size) * 0.28);\n border: 2px solid var(--surface-page);\n border-radius: var(--radius-full);\n }\n\n .online {\n background: var(--color-success-base);\n }\n .away {\n background: var(--color-warning-base);\n }\n .busy {\n background: var(--color-danger-base);\n }\n .offline {\n background: var(--color-text-500);\n }\n `,\n ];\n\n @state()\n private failed = false;\n\n /** The person's name. Drives the initials, the colour and the label. /\n @property({ type: String })\n name = '';\n\n /* Photo. Falls back to initials if it is missing or fails to load. /\n @property({ type: String })\n src = '';\n\n @property({ type: String, reflect: true })\n size: KtAvatarSize = 'medium';\n\n /* Rounds to the card radius instead of a circle — for organisations. /\n @property({ type: Boolean, reflect: true })\n square = false;\n\n /* Presence dot. Omit for none. /\n @property({ type: String, reflect: true })\n status?: KtAvatarStatus;\n\n /* Overrides the colour picked from the name. */\n @property({ type: String })\n color = '';\n\n override willUpdate(changed: Map<string, unknown>): void {\n // A new source deserves a fresh attempt; without this a single failure\n // would stick for the element's lifetime.\n if (changed.has('src')) this.failed = false;\n }\n\n private get hue(): string {\n if (this.color) return this.color;\n\n let sum = 0;\n for (const char of this.name) sum += char.charCodeAt(0);\n return HUES[sum % HUES.length]!;\n }\n\n override render(): TemplateResult {\n const initials = initialsOf(this.name);\n const showImage = Boolean(this.src) && !this.failed;\n\n return html`<span\n part=\"base\"\n class=${classMap({ avatar: true, 'has-image': showImage, anonymous: !this.name })}\n style=${showImage ? '' : `--kt-avatar-hue:${this.hue}`}\n role=\"img\"\n aria-label=${this.name \|\| 'Avatar'}\n >\n ${\n showImage\n ? html`<img\n part=\"image\"\n src=${this.src}\n alt=\"\"\n @error=${() => {\n this.failed = true;\n }}\n />`\n : initials \|\| html`<kt-icon name=\"user\" size=\"16\"></kt-icon>`\n }\n ${\n this.status\n ? html`<span class=${classMap({ status: true, [this.status]: true })}></span>`\n : nothing\n }\n </span>`;\n }\n}\n\ndefineElement('kt-avatar', KtAvatar);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-avatar': KtAvatar;\n }\n}\n"],"names":["HUES","_","i","initialsOf","name","parts","KtAvatar","KtElement","css","changed","sum","char","initials","showImage","html","classMap","nothing","__decorateClass","state","property","defineElement"],"mappings":";;;;;;;;;;AAiBA,MAAMA,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAA,GAAK,CAACC,GAAGC,MAAM,sBAAsBA,IAAI,CAAC,GAAG;AAGxE,SAASC,EAAWC,GAAsB;AAE/C,QAAMC,KADUD,EAAK,SAAS,GAAG,IAAKA,EAAK,MAAM,GAAG,EAAE,CAAC,KAAK,KAAMA,GAC5C,MAAM,UAAU,EAAE,OAAO,OAAO;AAEtD,SAAIC,EAAM,WAAW,IAAU,KAC3BA,EAAM,WAAW,KAAWA,EAAM,CAAC,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,YAAA,IACrD,GAAGA,EAAM,CAAC,EAAG,CAAC,CAAC,GAAGA,EAAMA,EAAM,SAAS,CAAC,EAAG,CAAC,CAAC,GAAG,YAAA;AACzD;AAqBO,MAAMC,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAoFL,KAAQ,SAAS,IAIjB,KAAA,OAAO,IAIP,KAAA,MAAM,IAGN,KAAA,OAAqB,UAIrB,KAAA,SAAS,IAQT,KAAA,QAAQ;AAAA,EAAA;AAAA,EA1GR,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,IAAA;AAAA,EA8EF;AAAA,EA4BS,WAAWC,GAAqC;AAGvD,IAAIA,EAAQ,IAAI,KAAK,WAAQ,SAAS;AAAA,EACxC;AAAA,EAEA,IAAY,MAAc;AACxB,QAAI,KAAK,MAAO,QAAO,KAAK;AAE5B,QAAIC,IAAM;AACV,eAAWC,KAAQ,KAAK,KAAM,CAAAD,KAAOC,EAAK,WAAW,CAAC;AACtD,WAAOX,EAAKU,IAAMV,EAAK,MAAM;AAAA,EAC/B;AAAA,EAES,SAAyB;AAChC,UAAMY,IAAWT,EAAW,KAAK,IAAI,GAC/BU,IAAY,EAAQ,KAAK,OAAQ,CAAC,KAAK;AAE7C,WAAOC;AAAA;AAAA,cAEGC,EAAS,EAAE,QAAQ,IAAM,aAAaF,GAAW,WAAW,CAAC,KAAK,MAAM,CAAC;AAAA,cACzEA,IAAY,KAAK,mBAAmB,KAAK,GAAG,EAAE;AAAA;AAAA,mBAEzC,KAAK,QAAQ,QAAQ;AAAA;AAAA,QAGhCA,IACIC;AAAA;AAAA,oBAEQ,KAAK,GAAG;AAAA;AAAA,uBAEL,MAAM;AACb,WAAK,SAAS;AAAA,IAChB,CAAC;AAAA,kBAEHF,KAAYE,4CAClB;AAAA,QAEE,KAAK,SACDA,gBAAmBC,EAAS,EAAE,QAAQ,IAAM,CAAC,KAAK,MAAM,GAAG,GAAA,CAAM,CAAC,aAClEC,CACN;AAAA;AAAA,EAEJ;AACF;AArEUC,EAAA;AAAA,EADPC,EAAA;AAAM,GAnFIZ,EAoFH,WAAA,QAAA;AAIRW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvFfb,EAwFX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Ffb,EA4FX,WAAA,KAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9F9Bb,EA+FX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlG/Bb,EAmGX,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAtG9Bb,EAuGX,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Gfb,EA2GX,WAAA,OAAA;AAgDFc,EAAc,aAAad,CAAQ;"}

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

@@ -1,13 +1,13 @@
-import { css as u, nothing as n, html as l } from "lit";
+import { css as h, nothing as n, html as l } from "lit";
 import { property as e } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
+import { classMap as b } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as p, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
-import { e as b } from "../../../chunks/events-Bjl5Zmmq.js";
+import { K as p, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../kt-icon/kt-icon.js";
-var g = Object.defineProperty, t = (s, r, i, f) => {
-  for (var a = void 0, c = s.length - 1, d; c >= 0; c--)
-    (d = s[c]) && (a = d(r, i, a) || a);
+var g = Object.defineProperty, t = (c, r, i, f) => {
+  for (var a = void 0, s = c.length - 1, d; s >= 0; s--)
+    (d = c[s]) && (a = d(r, i, a) || a);
   return a && g(r, i, a), a;
 };
 class o extends p {
@@ -17,11 +17,11 @@ class o extends p {
   static {
     this.styles = [
       p.styles,
-      u`
+      h`
       :host {
         display: inline-flex;
         vertical-align: middle;
-        --kt-badge-color: var(--color-primary-hover);
+        --kt-badge-color: var(--color-primary-text);
       }
       .badge {
@@ -92,27 +92,27 @@ class o extends p {
          colour itself as the ink. The border follows on the bordered shapes
          and is simply absent on the count shape. */
       .primary {
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         background-color: var(--color-primary-soft);
         border-color: var(--color-primary-base);
       }
       .success {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
         background-color: var(--color-success-soft);
         border-color: var(--color-success-base);
       }
       .warning {
-        color: var(--color-warning-base);
+        color: var(--color-warning-text);
         background-color: var(--color-warning-soft);
         border-color: var(--color-warning-base);
       }
       .danger {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
         background-color: var(--color-danger-soft);
         border-color: var(--color-danger-base);
       }
       .info {
-        color: var(--color-info-base);
+        color: var(--color-info-text);
         background-color: var(--color-info-soft);
         border-color: var(--color-info-base);
       }
@@ -178,19 +178,19 @@ class o extends p {
     return Number.isFinite(i) && i > this.max ? `${this.max}+` : r;
   }
   activate() {
-    this.clickable && b(this, "kt-badge-click");
+    this.clickable && u(this, "kt-badge-click");
   }
   onKeyDown(r) {
     this.clickable && (r.key !== "Enter" && r.key !== " " || (r.preventDefault(), this.activate()));
   }
   onRemove(r) {
-    r.stopPropagation(), b(this, "kt-remove");
+    r.stopPropagation(), u(this, "kt-remove");
   }
   render() {
     const r = this.error ? "danger" : this.tone;
     return l`<span
       part="base"
-      class=${h({
+      class=${b({
       badge: !0,
       [this.variant]: !0,
       [r]: r !== "neutral",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-badge.js","sources":["../../../../src/components/core/kt-badge/kt-badge.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 { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../kt-icon/kt-icon.js';\n\nexport type KtBadgeVariant = 'tag' \| 'code' \| 'category' \| 'count';\nexport type KtBadgeTone = 'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info';\nexport type KtBadgeSize = 'small' \| 'medium';\n\n/*\n A compact label: a pill `tag`, a monospaced `code` token, a `category`\n * tinted with a colour of your choosing, or a `count`.\n \n Two independent axes, because they answer different questions. `variant` is\n * the shape — what kind of thing this is. `tone` is the colour — what\n * it means. A tag can be neutral or dangerous; so can a count. Folding them\n * into one list would give you nine variants and no way to say \"a tag, but\n * this one is a warning\".\n \n `count` is the exception that carries no border, because a number pinned to\n * a nav item is not a label with an outline — it is a mark on the thing it\n * counts.\n \n @element kt-badge\n \n @slot - The text. Falls back to the `label` attribute.\n \n @csspart base - The container.\n * @csspart remove - The remove button, when `removable`.\n \n @cssproperty --kt-badge-color - Category hue. The fill is this colour at 20%.\n \n @fires kt-badge-click - A `clickable` badge was activated. Cancelable.\n * @fires kt-remove - The remove button was pressed. Cancelable: cancel it and\n * remove the badge yourself once the server agrees.\n \n @example\n * ```html\n * <kt-badge>Design systems</kt-badge>\n * <kt-badge tone=\"success\">Active</kt-badge>\n * <kt-badge variant=\"code\">--surface-card</kt-badge>\n * <kt-badge variant=\"category\" color=\"#3987e5\">Infrastructure</kt-badge>\n * <kt-badge variant=\"count\" tone=\"danger\" max=\"99\">128</kt-badge>\n * <kt-badge icon=\"user\" removable>Assigned to me</kt-badge>\n * ```\n /\nexport class KtBadge extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n --kt-badge-color: var(--color-primary-hover);\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: var(--gap-element);\n width: fit-content;\n margin: 0;\n padding: var(--padding-chip);\n color: var(--text-body);\n font: var(--font-normal-regular);\n background-color: var(--color-dark-20);\n border: var(--border-width) solid var(--color-text-600);\n border-radius: var(--radius-input);\n white-space: normal;\n }\n\n .small {\n padding: 2px 8px;\n font: var(--font-normal-small);\n }\n\n / === TAG === /\n .tag {\n border-radius: var(--radius-pill);\n }\n\n / === CODE ===\n Uses the semantic code surface rather than a ramp step: --color-dark-8\n is the darkest surface in the dark theme and pure white in the light\n one, which made this badge white-on-white. /\n .code {\n color: var(--text-code);\n font: var(--font-code-regular);\n background-color: var(--surface-code);\n border-color: var(--border-code);\n }\n\n / === CATEGORY ===\n color-mix keeps the 20% fill honest for any colour notation the host\n hands us; concatenating a \"33\" onto a hex string produces garbage\n for rgb() and named colours. /\n .category {\n color: var(--kt-badge-color);\n background-color: color-mix(in srgb, var(--kt-badge-color) 20%, transparent);\n border-color: var(--kt-badge-color);\n }\n\n / === COUNT ===\n No border: a number pinned to a nav item is a mark on the thing it\n counts, not a label with an outline of its own. /\n .count {\n min-width: 20px;\n padding: 2px 6px;\n justify-content: center;\n color: var(--text-muted);\n font: var(--font-normal-small);\n font-variant-numeric: tabular-nums;\n line-height: 1.4;\n white-space: nowrap;\n background: var(--surface-raised);\n border: none;\n border-radius: var(--radius-pill);\n }\n\n / === TONES ===\n The system's tinted pair everywhere: the colour at 12% behind, the\n colour itself as the ink. The border follows on the bordered shapes\n and is simply absent on the count shape. /\n .primary {\n color: var(--color-primary-base);\n background-color: var(--color-primary-soft);\n border-color: var(--color-primary-base);\n }\n .success {\n color: var(--color-success-base);\n background-color: var(--color-success-soft);\n border-color: var(--color-success-base);\n }\n .warning {\n color: var(--color-warning-base);\n background-color: var(--color-warning-soft);\n border-color: var(--color-warning-base);\n }\n .danger {\n color: var(--color-danger-base);\n background-color: var(--color-danger-soft);\n border-color: var(--color-danger-base);\n }\n .info {\n color: var(--color-info-base);\n background-color: var(--color-info-soft);\n border-color: var(--color-info-base);\n }\n\n .count.primary,\n .count.success,\n .count.warning,\n .count.danger,\n .count.info {\n border: none;\n }\n\n / === CLICKABLE === /\n .clickable {\n cursor: pointer;\n }\n .clickable:hover {\n outline: var(--outline-width) solid var(--text-muted);\n }\n .clickable:active {\n color: var(--color-white);\n background-color: var(--color-primary-base);\n border-color: transparent;\n }\n .clickable:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n }\n\n .remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-right: -4px;\n padding: 0;\n color: inherit;\n background: none;\n border: none;\n border-radius: var(--radius-pill);\n cursor: pointer;\n opacity: 0.65;\n }\n\n .remove:hover {\n opacity: 1;\n }\n\n .remove:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 1px;\n }\n\n kt-icon {\n flex: none;\n }\n `,\n ];\n\n /* The shape: what kind of thing this is. /\n @property({ type: String, reflect: true })\n variant: KtBadgeVariant = 'tag';\n\n /* The colour: what it means. Independent of `variant`. /\n @property({ type: String, reflect: true })\n tone: KtBadgeTone = 'neutral';\n\n @property({ type: String, reflect: true })\n size: KtBadgeSize = 'medium';\n\n /* Badge text. The default slot wins when both are present. /\n @property({ type: String })\n label = '';\n\n /* Category hue: any CSS colour. The fill is this colour at 20%. /\n @property({ type: String })\n color = '';\n\n /* Lucide icon name, before the text. /\n @property({ type: String })\n icon = '';\n\n @property({ type: Boolean, reflect: true })\n clickable = false;\n\n /* Adds a remove button. Fires a cancelable `kt-remove`. /\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /\n Caps a numeric label: `max=\"99\"` shows `99+`.\n * Ignored when the content is not a number.\n /\n @property({ type: Number })\n max?: number;\n\n /* Shorthand for `tone=\"danger\"`, kept from the field components. */\n @property({ type: Boolean, reflect: true })\n error = false;\n\n private get display(): string {\n const raw = this.label \|\| (this.textContent ?? '').trim();\n if (this.max === undefined) return raw;\n\n const n = Number(raw);\n return Number.isFinite(n) && n > this.max ? `${this.max}+` : raw;\n }\n\n private activate(): void {\n if (this.clickable) emit(this, 'kt-badge-click');\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.clickable) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n this.activate();\n }\n\n private onRemove(event: Event): void {\n // Otherwise a removable clickable badge reports both at once.\n event.stopPropagation();\n emit(this, 'kt-remove');\n }\n\n override render(): TemplateResult {\n const tone = this.error ? 'danger' : this.tone;\n\n return html`<span\n part=\"base\"\n class=${classMap({\n badge: true,\n [this.variant]: true,\n [tone]: tone !== 'neutral',\n small: this.size === 'small',\n clickable: this.clickable,\n })}\n style=${styleMap(this.color ? { '--kt-badge-color': this.color } : {})}\n role=${this.clickable ? 'button' : nothing}\n tabindex=${this.clickable ? 0 : nothing}\n @click=${this.activate}\n @keydown=${this.onKeyDown}\n >\n ${this.icon ? html`<kt-icon name=${this.icon} size=\"14\"></kt-icon>` : nothing}\n ${this.max === undefined ? html`<slot>${this.label}</slot>` : this.display}\n ${\n this.removable\n ? html`<button\n part=\"remove\"\n type=\"button\"\n class=\"remove\"\n aria-label=${`Remove ${this.display \|\| 'this'}`}\n @click=${this.onRemove}\n >\n <kt-icon name=\"x\" size=\"12\"></kt-icon>\n </button>`\n : nothing\n }\n </span>`;\n }\n}\n\ndefineElement('kt-badge', KtBadge);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-badge': KtBadge;\n }\n}\n"],"names":["KtBadge","KtElement","css","raw","n","emit","event","tone","html","classMap","styleMap","nothing","__decorateClass","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-badge.js","sources":["../../../../src/components/core/kt-badge/kt-badge.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 { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../kt-icon/kt-icon.js';\n\nexport type KtBadgeVariant = 'tag' \| 'code' \| 'category' \| 'count';\nexport type KtBadgeTone = 'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info';\nexport type KtBadgeSize = 'small' \| 'medium';\n\n/*\n A compact label: a pill `tag`, a monospaced `code` token, a `category`\n * tinted with a colour of your choosing, or a `count`.\n \n Two independent axes, because they answer different questions. `variant` is\n * the shape — what kind of thing this is. `tone` is the colour — what\n * it means. A tag can be neutral or dangerous; so can a count. Folding them\n * into one list would give you nine variants and no way to say \"a tag, but\n * this one is a warning\".\n \n `count` is the exception that carries no border, because a number pinned to\n * a nav item is not a label with an outline — it is a mark on the thing it\n * counts.\n \n @element kt-badge\n \n @slot - The text. Falls back to the `label` attribute.\n \n @csspart base - The container.\n * @csspart remove - The remove button, when `removable`.\n \n @cssproperty --kt-badge-color - Category hue. The fill is this colour at 20%.\n \n @fires kt-badge-click - A `clickable` badge was activated. Cancelable.\n * @fires kt-remove - The remove button was pressed. Cancelable: cancel it and\n * remove the badge yourself once the server agrees.\n \n @example\n * ```html\n * <kt-badge>Design systems</kt-badge>\n * <kt-badge tone=\"success\">Active</kt-badge>\n * <kt-badge variant=\"code\">--surface-card</kt-badge>\n * <kt-badge variant=\"category\" color=\"#3987e5\">Infrastructure</kt-badge>\n * <kt-badge variant=\"count\" tone=\"danger\" max=\"99\">128</kt-badge>\n * <kt-badge icon=\"user\" removable>Assigned to me</kt-badge>\n * ```\n /\nexport class KtBadge extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n --kt-badge-color: var(--color-primary-text);\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: var(--gap-element);\n width: fit-content;\n margin: 0;\n padding: var(--padding-chip);\n color: var(--text-body);\n font: var(--font-normal-regular);\n background-color: var(--color-dark-20);\n border: var(--border-width) solid var(--color-text-600);\n border-radius: var(--radius-input);\n white-space: normal;\n }\n\n .small {\n padding: 2px 8px;\n font: var(--font-normal-small);\n }\n\n / === TAG === /\n .tag {\n border-radius: var(--radius-pill);\n }\n\n / === CODE ===\n Uses the semantic code surface rather than a ramp step: --color-dark-8\n is the darkest surface in the dark theme and pure white in the light\n one, which made this badge white-on-white. /\n .code {\n color: var(--text-code);\n font: var(--font-code-regular);\n background-color: var(--surface-code);\n border-color: var(--border-code);\n }\n\n / === CATEGORY ===\n color-mix keeps the 20% fill honest for any colour notation the host\n hands us; concatenating a \"33\" onto a hex string produces garbage\n for rgb() and named colours. /\n .category {\n color: var(--kt-badge-color);\n background-color: color-mix(in srgb, var(--kt-badge-color) 20%, transparent);\n border-color: var(--kt-badge-color);\n }\n\n / === COUNT ===\n No border: a number pinned to a nav item is a mark on the thing it\n counts, not a label with an outline of its own. /\n .count {\n min-width: 20px;\n padding: 2px 6px;\n justify-content: center;\n color: var(--text-muted);\n font: var(--font-normal-small);\n font-variant-numeric: tabular-nums;\n line-height: 1.4;\n white-space: nowrap;\n background: var(--surface-raised);\n border: none;\n border-radius: var(--radius-pill);\n }\n\n / === TONES ===\n The system's tinted pair everywhere: the colour at 12% behind, the\n colour itself as the ink. The border follows on the bordered shapes\n and is simply absent on the count shape. /\n .primary {\n color: var(--color-primary-text);\n background-color: var(--color-primary-soft);\n border-color: var(--color-primary-base);\n }\n .success {\n color: var(--color-success-text);\n background-color: var(--color-success-soft);\n border-color: var(--color-success-base);\n }\n .warning {\n color: var(--color-warning-text);\n background-color: var(--color-warning-soft);\n border-color: var(--color-warning-base);\n }\n .danger {\n color: var(--color-danger-text);\n background-color: var(--color-danger-soft);\n border-color: var(--color-danger-base);\n }\n .info {\n color: var(--color-info-text);\n background-color: var(--color-info-soft);\n border-color: var(--color-info-base);\n }\n\n .count.primary,\n .count.success,\n .count.warning,\n .count.danger,\n .count.info {\n border: none;\n }\n\n / === CLICKABLE === /\n .clickable {\n cursor: pointer;\n }\n .clickable:hover {\n outline: var(--outline-width) solid var(--text-muted);\n }\n .clickable:active {\n color: var(--color-white);\n background-color: var(--color-primary-base);\n border-color: transparent;\n }\n .clickable:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n }\n\n .remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-right: -4px;\n padding: 0;\n color: inherit;\n background: none;\n border: none;\n border-radius: var(--radius-pill);\n cursor: pointer;\n opacity: 0.65;\n }\n\n .remove:hover {\n opacity: 1;\n }\n\n .remove:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 1px;\n }\n\n kt-icon {\n flex: none;\n }\n `,\n ];\n\n /* The shape: what kind of thing this is. /\n @property({ type: String, reflect: true })\n variant: KtBadgeVariant = 'tag';\n\n /* The colour: what it means. Independent of `variant`. /\n @property({ type: String, reflect: true })\n tone: KtBadgeTone = 'neutral';\n\n @property({ type: String, reflect: true })\n size: KtBadgeSize = 'medium';\n\n /* Badge text. The default slot wins when both are present. /\n @property({ type: String })\n label = '';\n\n /* Category hue: any CSS colour. The fill is this colour at 20%. /\n @property({ type: String })\n color = '';\n\n /* Lucide icon name, before the text. /\n @property({ type: String })\n icon = '';\n\n @property({ type: Boolean, reflect: true })\n clickable = false;\n\n /* Adds a remove button. Fires a cancelable `kt-remove`. /\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /\n Caps a numeric label: `max=\"99\"` shows `99+`.\n * Ignored when the content is not a number.\n /\n @property({ type: Number })\n max?: number;\n\n /* Shorthand for `tone=\"danger\"`, kept from the field components. */\n @property({ type: Boolean, reflect: true })\n error = false;\n\n private get display(): string {\n const raw = this.label \|\| (this.textContent ?? '').trim();\n if (this.max === undefined) return raw;\n\n const n = Number(raw);\n return Number.isFinite(n) && n > this.max ? `${this.max}+` : raw;\n }\n\n private activate(): void {\n if (this.clickable) emit(this, 'kt-badge-click');\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.clickable) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n this.activate();\n }\n\n private onRemove(event: Event): void {\n // Otherwise a removable clickable badge reports both at once.\n event.stopPropagation();\n emit(this, 'kt-remove');\n }\n\n override render(): TemplateResult {\n const tone = this.error ? 'danger' : this.tone;\n\n return html`<span\n part=\"base\"\n class=${classMap({\n badge: true,\n [this.variant]: true,\n [tone]: tone !== 'neutral',\n small: this.size === 'small',\n clickable: this.clickable,\n })}\n style=${styleMap(this.color ? { '--kt-badge-color': this.color } : {})}\n role=${this.clickable ? 'button' : nothing}\n tabindex=${this.clickable ? 0 : nothing}\n @click=${this.activate}\n @keydown=${this.onKeyDown}\n >\n ${this.icon ? html`<kt-icon name=${this.icon} size=\"14\"></kt-icon>` : nothing}\n ${this.max === undefined ? html`<slot>${this.label}</slot>` : this.display}\n ${\n this.removable\n ? html`<button\n part=\"remove\"\n type=\"button\"\n class=\"remove\"\n aria-label=${`Remove ${this.display \|\| 'this'}`}\n @click=${this.onRemove}\n >\n <kt-icon name=\"x\" size=\"12\"></kt-icon>\n </button>`\n : nothing\n }\n </span>`;\n }\n}\n\ndefineElement('kt-badge', KtBadge);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-badge': KtBadge;\n }\n}\n"],"names":["KtBadge","KtElement","css","raw","n","emit","event","tone","html","classMap","styleMap","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;;AAiDO,MAAMA,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GA+JL,KAAA,UAA0B,OAI1B,KAAA,OAAoB,WAGpB,KAAA,OAAoB,UAIpB,KAAA,QAAQ,IAIR,KAAA,QAAQ,IAIR,KAAA,OAAO,IAGP,KAAA,YAAY,IAIZ,KAAA,YAAY,IAWZ,KAAA,QAAQ;AAAA,EAAA;AAAA,EAnMR,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,IAAA;AAAA,EAwJF;AAAA,EA2CA,IAAY,UAAkB;AAC5B,UAAMC,IAAM,KAAK,UAAU,KAAK,eAAe,IAAI,KAAA;AACnD,QAAI,KAAK,QAAQ,OAAW,QAAOA;AAEnC,UAAMC,IAAI,OAAOD,CAAG;AACpB,WAAO,OAAO,SAASC,CAAC,KAAKA,IAAI,KAAK,MAAM,GAAG,KAAK,GAAG,MAAMD;AAAA,EAC/D;AAAA,EAEQ,WAAiB;AACvB,IAAI,KAAK,aAAWE,EAAK,MAAM,gBAAgB;AAAA,EACjD;AAAA,EAEQ,UAAUC,GAA4B;AAC5C,IAAK,KAAK,cACNA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAC3CA,EAAM,eAAA,GACN,KAAK,SAAA;AAAA,EACP;AAAA,EAEQ,SAASA,GAAoB;AAEnC,IAAAA,EAAM,gBAAA,GACND,EAAK,MAAM,WAAW;AAAA,EACxB;AAAA,EAES,SAAyB;AAChC,UAAME,IAAO,KAAK,QAAQ,WAAW,KAAK;AAE1C,WAAOC;AAAA;AAAA,cAEGC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,CAACF,CAAI,GAAGA,MAAS;AAAA,MACjB,OAAO,KAAK,SAAS;AAAA,MACrB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA,cACMG,EAAS,KAAK,QAAQ,EAAE,oBAAoB,KAAK,MAAA,IAAU,EAAE,CAAC;AAAA,aAC/D,KAAK,YAAY,WAAWC,CAAO;AAAA,iBAC/B,KAAK,YAAY,IAAIA,CAAO;AAAA,eAC9B,KAAK,QAAQ;AAAA,iBACX,KAAK,SAAS;AAAA;AAAA,QAEvB,KAAK,OAAOH,kBAAqB,KAAK,IAAI,0BAA0BG,CAAO;AAAA,QAC3E,KAAK,QAAQ,SAAYH,UAAa,KAAK,KAAK,YAAY,KAAK,OAAO;AAAA,QAExE,KAAK,YACDA;AAAA;AAAA;AAAA;AAAA,2BAIe,UAAU,KAAK,WAAW,MAAM,EAAE;AAAA,uBACtC,KAAK,QAAQ;AAAA;AAAA;AAAA,yBAIxBG,CACN;AAAA;AAAA,EAEJ;AACF;AAnGEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9J9Bb,EA+JX,WAAA,SAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlK9Bb,EAmKX,WAAA,MAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArK9Bb,EAsKX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzKfb,EA0KX,WAAA,OAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Kfb,EA8KX,WAAA,OAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjLfb,EAkLX,WAAA,MAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApL/Bb,EAqLX,WAAA,WAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxL/Bb,EAyLX,WAAA,WAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Lfb,EAgMX,WAAA,KAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnM/Bb,EAoMX,WAAA,OAAA;AAgEFc,EAAc,YAAYd,CAAO;"}

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

@@ -44,6 +44,13 @@ export declare class KtButton extends KtElement {
     iconPosition: 'left' | 'right';
     /** Accessible name. Required for an icon-only button. */
     label: string;
+    /**
+     * The kind of popup this button opens, as `aria-haspopup` on the inner
+     * button. Set by `<kt-dropdown>` on its trigger; rarely by hand.
+     */
+    popup: 'menu' | 'listbox' | 'dialog' | undefined;
+    /** Whether the popup or region this button controls is open, as `aria-expanded`. */
+    expanded: boolean | undefined;
     /** Stretches the button to the width of its container. */
     fullWidth: boolean;
     /** Submitted with the form, as on a native button. */

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

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