kanto-ds 1.2.0 → 1.4.0

package/README.md

@@ -38,7 +38,7 @@ One implementation, every framework. The alternative — a React port, a Vue
 port, an Angular library — is three codebases drifting apart.
 
 The trade is real and worth naming: custom elements need JavaScript to upgrade,
-so they render unstyled-but-present during SSR until the bundle lands. In
+so during SSR they hold their place, hidden, until the bundle lands. In
 return, a component is written once and a fix reaches every consumer at the same
 time.
 
@@ -75,19 +75,37 @@ how an operation says it is still working when the number is not moving.
 section titles. No emoji in product UI — the one exception is the flag in the
 phone-input country picker, which is functional.
 
-Every default string is a property, so a screen can override any of them, and
-an application that needs another language sets them at the call site.
+Every string an element writes itself — empty states, button labels,
+validation messages, and the accessible names only a screen reader hears — comes
+from one registry. An application in another language replaces them once:
+
+```js
+import { setStrings } from 'kanto-ds/strings';
+
+setStrings({
+  clear: 'Effacer',
+  noData: 'Aucune donnée',
+  pageOf: (page, total) => `Page ${page} sur ${total}`,
+});
+```
+
+Anything left out stays in English, and switching at runtime re-renders every
+element. Strings that carry a value are functions, so a translation owns the
+word order. Where an element also takes a string as a property (`emptyText`,
+`placeholder`, `confirmLabel`…), setting it still wins for that one element.
+The full list is `KtStrings` in
+[src/internal/strings.ts](src/internal/strings.ts).
 
 Full details in **[src/tokens/README.md](src/tokens/README.md)**.
 
 ## Components
 
-Forty-two elements. Each has a page beside its source.
+Forty-four elements. Each has a page beside its source.
 
 | Group          | Elements                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Core**       | [button](src/components/core/kt-button/kt-button.md) · [split-button](src/components/core/kt-split-button/kt-split-button.md) · [card](src/components/core/kt-card/kt-card.md) · [code](src/components/core/kt-code/kt-code.md) · [icon](src/components/core/kt-icon/kt-icon.md) · [avatar](src/components/core/kt-avatar/kt-avatar.md) · [badge](src/components/core/kt-badge/kt-badge.md) · [kbd](src/components/core/kt-kbd/kt-kbd.md)                                                                                                                                                                                                                      |
-| **Forms**      | [input](src/components/forms/kt-input/kt-input.md) · [textarea](src/components/forms/kt-textarea/kt-textarea.md) · [label-input](src/components/forms/kt-label-input/kt-label-input.md) · [form](src/components/forms/kt-form/kt-form.md) · [select](src/components/forms/kt-select/kt-select.md) · [input-menu](src/components/forms/kt-input-menu/kt-input-menu.md) · [toggle](src/components/forms/kt-toggle/kt-toggle.md) · [drag-drop](src/components/forms/kt-drag-drop/kt-drag-drop.md)                                                                                                                                                                 |
+| **Forms**      | [input](src/components/forms/kt-input/kt-input.md) · [textarea](src/components/forms/kt-textarea/kt-textarea.md) · [label-input](src/components/forms/kt-label-input/kt-label-input.md) · [form](src/components/forms/kt-form/kt-form.md) · [select](src/components/forms/kt-select/kt-select.md) · [checkbox](src/components/forms/kt-checkbox/kt-checkbox.md) · [radio-group](src/components/forms/kt-radio-group/kt-radio-group.md) · [input-menu](src/components/forms/kt-input-menu/kt-input-menu.md) · [toggle](src/components/forms/kt-toggle/kt-toggle.md) · [drag-drop](src/components/forms/kt-drag-drop/kt-drag-drop.md)                            |
 | **Navigation** | [header](src/components/navigation/kt-header/kt-header.md) · [breadcrumb](src/components/navigation/kt-breadcrumb/kt-breadcrumb.md) · [sub-menu-navigation](src/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.md) · [page-header](src/components/navigation/kt-page-header/kt-page-header.md) · [tabs](src/components/navigation/kt-tabs/kt-tabs.md) · [segmented-control](src/components/navigation/kt-segmented-control/kt-segmented-control.md) · [toggle-button](src/components/navigation/kt-toggle-button/kt-toggle-button.md) · [toggle-button-group](src/components/navigation/kt-toggle-button-group/kt-toggle-button-group.md) |
 | **Feedback**   | [progress-bar](src/components/feedback/kt-progress-bar/kt-progress-bar.md) · [skeleton](src/components/feedback/kt-skeleton/kt-skeleton.md) · [tooltip](src/components/feedback/kt-tooltip/kt-tooltip.md) · [toast](src/components/feedback/kt-toast/kt-toast.md) · [toast-container + toaster](src/components/feedback/kt-toast-container/kt-toast-container.md) · [alert](src/components/feedback/kt-alert/kt-alert.md) · [empty-state](src/components/feedback/kt-empty-state/kt-empty-state.md)                                                                                                                                                            |
 | **Overlays**   | [dropdown](src/components/overlays/kt-dropdown/kt-dropdown.md) · [side-panel](src/components/overlays/kt-side-panel/kt-side-panel.md) · [confirm-dialog](src/components/overlays/kt-confirm-dialog/kt-confirm-dialog.md) · [modal](src/components/overlays/kt-modal/kt-modal.md) · [collapsible](src/components/overlays/kt-collapsible/kt-collapsible.md)                                                                                                                                                                                                                                                                                                     |
@@ -103,7 +121,7 @@ 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 22 its own
+which means the set cannot be tree-shaken. So Kanto ships only the 23 its own
 elements draw. Register what your application uses:
 
 ```js

package/dist/chunks/{defaults-DKzFsNbv.js → defaults-BwgjMcww.js}

@@ -1,14 +1,14 @@
-import { X as s, User as a, TriangleAlert as c, Trash2 as i, Search as f, Menu as g, LoaderCircle as p, Info as u, FileUp as y, File as A, EyeOff as C, Eye as l, Copy as I, CircleCheck as h, CircleAlert as w, ChevronUp as $, ChevronRight as b, ChevronLeft as d, ChevronDown as v, Check as U, ArrowUp as Z, ArrowDown as k } from "lucide";
+import { X as s, User as a, TriangleAlert as c, Trash2 as i, Search as f, Minus as g, Menu as p, LoaderCircle as u, Info as y, FileUp as A, File as C, EyeOff as l, Eye as I, Copy as h, CircleCheck as w, CircleAlert as $, ChevronUp as b, ChevronRight as d, ChevronLeft as v, ChevronDown as U, Check as Z, ArrowUp as k, ArrowDown as m } from "lucide";
 const n = /* @__PURE__ */ new Map();
 function t(e) {
   return e.replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])(\d)/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 }
-function m(e, r) {
+function z(e, r) {
   n.set(t(e), r);
 }
-function z(e) {
+function L(e) {
   for (const [r, o] of Object.entries(e))
-    L(o) && m(r, o);
+    M(o) && z(r, o);
 }
 function E(e) {
   return n.get(t(e));
@@ -16,42 +16,43 @@ function E(e) {
 function F() {
   return [...n.keys()].sort();
 }
-function L(e) {
+function M(e) {
   return Array.isArray(e) && e.every(
     (r) => Array.isArray(r) && typeof r[0] == "string" && typeof r[1] == "object" && r[1] !== null
   );
 }
 const j = {
-  ArrowDown: k,
-  ArrowUp: Z,
-  Check: U,
-  ChevronDown: v,
-  ChevronLeft: d,
-  ChevronRight: b,
-  ChevronUp: $,
-  CircleAlert: w,
-  CircleCheck: h,
-  Copy: I,
-  Eye: l,
-  EyeOff: C,
-  File: A,
-  FileUp: y,
-  Info: u,
-  LoaderCircle: p,
-  Menu: g,
+  ArrowDown: m,
+  ArrowUp: k,
+  Check: Z,
+  ChevronDown: U,
+  ChevronLeft: v,
+  ChevronRight: d,
+  ChevronUp: b,
+  CircleAlert: $,
+  CircleCheck: w,
+  Copy: h,
+  Eye: I,
+  EyeOff: l,
+  File: C,
+  FileUp: A,
+  Info: y,
+  LoaderCircle: u,
+  Menu: p,
+  Minus: g,
   Search: f,
   Trash2: i,
   TriangleAlert: c,
   User: a,
   X: s
 };
-z(j);
+L(j);
 export {
-  z as a,
+  L as a,
   F as b,
   j as d,
   E as g,
-  m as r,
+  z as r,
   t
 };
-//# sourceMappingURL=defaults-DKzFsNbv.js.map
+//# sourceMappingURL=defaults-BwgjMcww.js.map

package/dist/chunks/{defaults-DKzFsNbv.js.map → defaults-BwgjMcww.js.map}

@@ -1 +1 @@
-{"version":3,"file":"defaults-DKzFsNbv.js","sources":["../../src/icons/registry.ts","../../src/icons/defaults.ts"],"sourcesContent":["/**\n * The icon registry.\n *\n * `<kt-icon>` looks icons up by name at render time, which means the set of\n * icons cannot be statically analysed and a bundler cannot tree-shake it. So\n * Kanto does not bundle all two thousand Lucide icons: the elements register\n * the handful they need themselves, and an application registers whatever else\n * it uses.\n *\n *     import { Rocket, Wallet } from 'lucide';\n *     import { registerIcons } from 'kanto-ds/icons';\n *\n *     registerIcons({ Rocket, Wallet });\n *\n * Names are normalised to kebab-case, so `Rocket`, `rocket` and\n * `ChevronDown` / `chevron-down` all resolve.\n */\n\n/** A Lucide icon: a flat list of SVG children, each `[tag, attributes]`. */\nexport type IconNode = [tag: string, attrs: Record<string, string | number | undefined>][];\n\nconst registry = new Map<string, IconNode>();\n\n/**\n * `ChevronDown` → `chevron-down`, `Trash2` → `trash-2`, `AArrowDown` →\n * `a-arrow-down`.\n *\n * The digit boundary matters: Lucide names that icon `trash-2`, so a rule that\n * only splits on case produces `trash2` and the lookup quietly misses.\n */\nexport function toKebabCase(name: string): string {\n  return name\n    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') // acronym run before a word\n    .replace(/([a-zA-Z])(\\d)/g, '$1-$2') // letter before a digit\n    .replace(/([a-z])([A-Z])/g, '$1-$2') // ordinary camel boundary\n    .replace(/[\\s_]+/g, '-')\n    .toLowerCase();\n}\n\n/** Registers a single icon under `name`. */\nexport function registerIcon(name: string, node: IconNode): void {\n  registry.set(toKebabCase(name), node);\n}\n\n/**\n * Registers a map of icons. Accepts a Lucide namespace import directly:\n * every non-icon export (`createElement`, `createIcons`, …) is skipped.\n */\nexport function registerIcons(icons: Record<string, unknown>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    if (isIconNode(node)) registerIcon(name, node);\n  }\n}\n\n/** Returns the icon registered under `name`, or `undefined`. */\nexport function getIcon(name: string): IconNode | undefined {\n  return registry.get(toKebabCase(name));\n}\n\n/** Every registered name, kebab-cased and sorted. Useful for docs and tests. */\nexport function registeredIcons(): string[] {\n  return [...registry.keys()].sort();\n}\n\nfunction isIconNode(value: unknown): value is IconNode {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (child) =>\n        Array.isArray(child) &&\n        typeof child[0] === 'string' &&\n        typeof child[1] === 'object' &&\n        child[1] !== null,\n    )\n  );\n}\n","/**\n * The icons the design system uses in its own elements.\n *\n * Importing any Kanto element pulls this set in — roughly 2 kB of path data,\n * the price of `<kt-select>` being able to draw its own chevron. Application\n * icons are registered separately through `registerIcons`.\n */\nimport {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n} from 'lucide';\n// The sibling registry, not the `kanto-ds` barrel: the barrel pulls in every\n// element, and one of them pulls in this file — a cycle that leaves\n// `registerIcons` undefined by the time the call below runs.\nimport { registerIcons } from './registry.js';\n\n/** Icons referenced by Kanto elements, keyed by their Lucide name. */\nexport const defaultIcons = {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n};\n\nregisterIcons(defaultIcons);\n"],"names":["registry","toKebabCase","name","registerIcon","node","registerIcons","icons","isIconNode","getIcon","registeredIcons","value","child","defaultIcons","ArrowDown","ArrowUp","Check","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","CircleAlert","CircleCheck","Copy","Eye","EyeOff","File","FileUp","Info","LoaderCircle","Menu","Search","Trash2","TriangleAlert","User","X"],"mappings":";AAqBA,MAAMA,wBAAe,IAAA;AASd,SAASC,EAAYC,GAAsB;AAChD,SAAOA,EACJ,QAAQ,yBAAyB,OAAO,EACxC,QAAQ,mBAAmB,OAAO,EAClC,QAAQ,mBAAmB,OAAO,EAClC,QAAQ,WAAW,GAAG,EACtB,YAAA;AACL;AAGO,SAASC,EAAaD,GAAcE,GAAsB;AAC/D,EAAAJ,EAAS,IAAIC,EAAYC,CAAI,GAAGE,CAAI;AACtC;AAMO,SAASC,EAAcC,GAAsC;AAClE,aAAW,CAACJ,GAAME,CAAI,KAAK,OAAO,QAAQE,CAAK;AAC7C,IAAIC,EAAWH,CAAI,KAAGD,EAAaD,GAAME,CAAI;AAEjD;AAGO,SAASI,EAAQN,GAAoC;AAC1D,SAAOF,EAAS,IAAIC,EAAYC,CAAI,CAAC;AACvC;AAGO,SAASO,IAA4B;AAC1C,SAAO,CAAC,GAAGT,EAAS,KAAA,CAAM,EAAE,KAAA;AAC9B;AAEA,SAASO,EAAWG,GAAmC;AACrD,SACE,MAAM,QAAQA,CAAK,KACnBA,EAAM;AAAA,IACJ,CAACC,MACC,MAAM,QAAQA,CAAK,KACnB,OAAOA,EAAM,CAAC,KAAM,YACpB,OAAOA,EAAM,CAAC,KAAM,YACpBA,EAAM,CAAC,MAAM;AAAA,EAAA;AAGrB;ACtCO,MAAMC,IAAe;AAAA,EAC1B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAAC;AACF;AAEA7B,EAAcO,CAAY;"}
+{"version":3,"file":"defaults-BwgjMcww.js","sources":["../../src/icons/registry.ts","../../src/icons/defaults.ts"],"sourcesContent":["/**\n * The icon registry.\n *\n * `<kt-icon>` looks icons up by name at render time, which means the set of\n * icons cannot be statically analysed and a bundler cannot tree-shake it. So\n * Kanto does not bundle all two thousand Lucide icons: the elements register\n * the handful they need themselves, and an application registers whatever else\n * it uses.\n *\n *     import { Rocket, Wallet } from 'lucide';\n *     import { registerIcons } from 'kanto-ds/icons';\n *\n *     registerIcons({ Rocket, Wallet });\n *\n * Names are normalised to kebab-case, so `Rocket`, `rocket` and\n * `ChevronDown` / `chevron-down` all resolve.\n */\n\n/** A Lucide icon: a flat list of SVG children, each `[tag, attributes]`. */\nexport type IconNode = [tag: string, attrs: Record<string, string | number | undefined>][];\n\nconst registry = new Map<string, IconNode>();\n\n/**\n * `ChevronDown` → `chevron-down`, `Trash2` → `trash-2`, `AArrowDown` →\n * `a-arrow-down`.\n *\n * The digit boundary matters: Lucide names that icon `trash-2`, so a rule that\n * only splits on case produces `trash2` and the lookup quietly misses.\n */\nexport function toKebabCase(name: string): string {\n  return name\n    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') // acronym run before a word\n    .replace(/([a-zA-Z])(\\d)/g, '$1-$2') // letter before a digit\n    .replace(/([a-z])([A-Z])/g, '$1-$2') // ordinary camel boundary\n    .replace(/[\\s_]+/g, '-')\n    .toLowerCase();\n}\n\n/** Registers a single icon under `name`. */\nexport function registerIcon(name: string, node: IconNode): void {\n  registry.set(toKebabCase(name), node);\n}\n\n/**\n * Registers a map of icons. Accepts a Lucide namespace import directly:\n * every non-icon export (`createElement`, `createIcons`, …) is skipped.\n */\nexport function registerIcons(icons: Record<string, unknown>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    if (isIconNode(node)) registerIcon(name, node);\n  }\n}\n\n/** Returns the icon registered under `name`, or `undefined`. */\nexport function getIcon(name: string): IconNode | undefined {\n  return registry.get(toKebabCase(name));\n}\n\n/** Every registered name, kebab-cased and sorted. Useful for docs and tests. */\nexport function registeredIcons(): string[] {\n  return [...registry.keys()].sort();\n}\n\nfunction isIconNode(value: unknown): value is IconNode {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (child) =>\n        Array.isArray(child) &&\n        typeof child[0] === 'string' &&\n        typeof child[1] === 'object' &&\n        child[1] !== null,\n    )\n  );\n}\n","/**\n * The icons the design system uses in its own elements.\n *\n * Importing any Kanto element pulls this set in — roughly 2 kB of path data,\n * the price of `<kt-select>` being able to draw its own chevron. Application\n * icons are registered separately through `registerIcons`.\n */\nimport {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Minus,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n} from 'lucide';\n// The sibling registry, not the `kanto-ds` barrel: the barrel pulls in every\n// element, and one of them pulls in this file — a cycle that leaves\n// `registerIcons` undefined by the time the call below runs.\nimport { registerIcons } from './registry.js';\n\n/** Icons referenced by Kanto elements, keyed by their Lucide name. */\nexport const defaultIcons = {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Minus,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n};\n\nregisterIcons(defaultIcons);\n"],"names":["registry","toKebabCase","name","registerIcon","node","registerIcons","icons","isIconNode","getIcon","registeredIcons","value","child","defaultIcons","ArrowDown","ArrowUp","Check","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","CircleAlert","CircleCheck","Copy","Eye","EyeOff","File","FileUp","Info","LoaderCircle","Menu","Minus","Search","Trash2","TriangleAlert","User","X"],"mappings":";AAqBA,MAAMA,wBAAe,IAAA;AASd,SAASC,EAAYC,GAAsB;AAChD,SAAOA,EACJ,QAAQ,yBAAyB,OAAO,EACxC,QAAQ,mBAAmB,OAAO,EAClC,QAAQ,mBAAmB,OAAO,EAClC,QAAQ,WAAW,GAAG,EACtB,YAAA;AACL;AAGO,SAASC,EAAaD,GAAcE,GAAsB;AAC/D,EAAAJ,EAAS,IAAIC,EAAYC,CAAI,GAAGE,CAAI;AACtC;AAMO,SAASC,EAAcC,GAAsC;AAClE,aAAW,CAACJ,GAAME,CAAI,KAAK,OAAO,QAAQE,CAAK;AAC7C,IAAIC,EAAWH,CAAI,KAAGD,EAAaD,GAAME,CAAI;AAEjD;AAGO,SAASI,EAAQN,GAAoC;AAC1D,SAAOF,EAAS,IAAIC,EAAYC,CAAI,CAAC;AACvC;AAGO,SAASO,IAA4B;AAC1C,SAAO,CAAC,GAAGT,EAAS,KAAA,CAAM,EAAE,KAAA;AAC9B;AAEA,SAASO,EAAWG,GAAmC;AACrD,SACE,MAAM,QAAQA,CAAK,KACnBA,EAAM;AAAA,IACJ,CAACC,MACC,MAAM,QAAQA,CAAK,KACnB,OAAOA,EAAM,CAAC,KAAM,YACpB,OAAOA,EAAM,CAAC,KAAM,YACpBA,EAAM,CAAC,MAAM;AAAA,EAAA;AAGrB;ACrCO,MAAMC,IAAe;AAAA,EAC1B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAAC;AACF;AAEA9B,EAAcO,CAAY;"}

package/dist/chunks/index-DSSLJirw.js

@@ -0,0 +1,79 @@
+const i = Object.freeze({
+  clear: "Clear",
+  close: "Close",
+  dismiss: "Dismiss",
+  copy: "Copy",
+  copied: "Copied",
+  copyCode: "Copy code",
+  timeRemaining: "Time remaining",
+  remove: (e) => e ? `Remove ${e}` : "Remove",
+  noOptions: "No options available",
+  noResults: "No results",
+  noActions: "No actions",
+  noData: "No data to display",
+  loading: "Loading…",
+  select: "Select",
+  openList: "Open list",
+  closeList: "Close list",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
+  searchCountry: "Search country or dial code",
+  noCountry: "No country found",
+  countryCode: (e) => `Country code: ${e ?? "none"}`,
+  dragAndDrop: "Drag and drop or",
+  browseFiles: "browse your files",
+  recommendedSize: (e) => `Recommended image size: ${e}`,
+  selectedFiles: "Selected files",
+  required: "This field is required.",
+  selectOption: "Select an option.",
+  selectFile: "Select a file.",
+  checkRequired: "Check this box to continue.",
+  openMenu: "Open menu",
+  closeMenu: "Close menu",
+  breadcrumb: "Breadcrumb",
+  secondaryNavigation: "Secondary navigation",
+  pagination: "Pagination",
+  previous: "Previous",
+  next: "Next",
+  pageOf: (e, o) => `Page ${e} / ${o}`,
+  moreActions: "More actions",
+  options: "Options",
+  formSection: "Form section",
+  selectRow: "Select row",
+  selectAll: "Select all",
+  total: "Total",
+  chartSeries: "Series",
+  chartPoint: "Point",
+  chartSlice: "Slice",
+  chartShare: "Share",
+  chartData: "Chart data",
+  chartValue: "Value",
+  confirmHeading: "Are you sure?",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  details: "Details",
+  avatar: "Avatar"
+});
+let t = { ...i };
+const n = /* @__PURE__ */ new Set();
+function r() {
+  return t;
+}
+function s(e) {
+  t = { ...t, ...e };
+  for (const o of n) o();
+}
+function a() {
+  s(i);
+}
+function c(e) {
+  return n.add(e), () => n.delete(e);
+}
+export {
+  s as a,
+  i as d,
+  c as o,
+  a as r,
+  r as s
+};
+//# sourceMappingURL=index-DSSLJirw.js.map

package/dist/chunks/index-DSSLJirw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DSSLJirw.js","sources":["../../src/internal/strings.ts"],"sourcesContent":["/**\n * Every piece of copy the elements write themselves — empty states, button\n * labels, validation messages, and the accessible names a screen reader\n * announces but nobody sees.\n *\n * English by default. An application in another language replaces them once,\n * at start-up, and every element follows:\n *\n *     import { setStrings } from 'kanto-ds/strings';\n *\n *     setStrings({\n *       clear: 'Effacer',\n *       pageOf: (page, total) => `Page ${page} sur ${total}`,\n *     });\n *\n * Anything left out keeps its English default. A string an element also takes\n * as a property — `emptyText`, `placeholder`, `confirmLabel` — still wins when\n * it is set, so one screen can say something different from the rest.\n *\n * Copy that carries a value is a function, not a template with placeholders:\n * the translation owns the word order, and \"Remove {name}\" does not survive\n * languages that put the object first.\n */\n\nexport interface KtStrings {\n  // --- Shared actions ---\n  /** Clear button in fields. */\n  clear: string;\n  /** Close button on toasts, alerts' dismiss button. */\n  close: string;\n  dismiss: string;\n  /** Copy button on `kt-code`, and its state once copied. */\n  copy: string;\n  copied: string;\n  copyCode: string;\n  /** The countdown bar on a toast that closes itself. */\n  timeRemaining: string;\n  /** Remove button on a badge or a dropped file. */\n  remove: (name: string) => string;\n\n  // --- Empty and loading states ---\n  noOptions: string;\n  noResults: string;\n  noActions: string;\n  noData: string;\n  loading: string;\n\n  // --- Fields ---\n  /** `kt-select` with nothing chosen. */\n  select: string;\n  openList: string;\n  closeList: string;\n  showPassword: string;\n  hidePassword: string;\n  searchCountry: string;\n  noCountry: string;\n  countryCode: (country: string | undefined) => string;\n  dragAndDrop: string;\n  browseFiles: string;\n  recommendedSize: (size: string) => string;\n  selectedFiles: string;\n\n  // --- Validation messages, shown by the browser on submit ---\n  required: string;\n  selectOption: string;\n  selectFile: string;\n  /** A required checkbox left unchecked. */\n  checkRequired: string;\n\n  // --- Navigation ---\n  openMenu: string;\n  closeMenu: string;\n  breadcrumb: string;\n  secondaryNavigation: string;\n  pagination: string;\n  previous: string;\n  next: string;\n  pageOf: (page: number, total: number) => string;\n  moreActions: string;\n\n  // --- Groups and sections ---\n  /** A button or choice group with no label of its own. */\n  options: string;\n  /** A `kt-form` section with no heading. */\n  formSection: string;\n\n  // --- Data ---\n  selectRow: string;\n  selectAll: string;\n  total: string;\n  /** Column headers of the data table every chart renders for assistive tech. */\n  chartSeries: string;\n  chartPoint: string;\n  chartSlice: string;\n  chartShare: string;\n  /** Caption of a chart's data table when the chart has no label. */\n  chartData: string;\n  /** Value column of a single-series chart's data table when the series has no name. */\n  chartValue: string;\n\n  // --- Overlays ---\n  confirmHeading: string;\n  confirm: string;\n  cancel: string;\n  details: string;\n\n  // --- Identity ---\n  avatar: string;\n}\n\nexport const defaultStrings: Readonly<KtStrings> = Object.freeze({\n  clear: 'Clear',\n  close: 'Close',\n  dismiss: 'Dismiss',\n  copy: 'Copy',\n  copied: 'Copied',\n  copyCode: 'Copy code',\n  timeRemaining: 'Time remaining',\n  remove: (name: string) => (name ? `Remove ${name}` : 'Remove'),\n\n  noOptions: 'No options available',\n  noResults: 'No results',\n  noActions: 'No actions',\n  noData: 'No data to display',\n  loading: 'Loading…',\n\n  select: 'Select',\n  openList: 'Open list',\n  closeList: 'Close list',\n  showPassword: 'Show password',\n  hidePassword: 'Hide password',\n  searchCountry: 'Search country or dial code',\n  noCountry: 'No country found',\n  countryCode: (country: string | undefined) => `Country code: ${country ?? 'none'}`,\n  dragAndDrop: 'Drag and drop or',\n  browseFiles: 'browse your files',\n  recommendedSize: (size: string) => `Recommended image size: ${size}`,\n  selectedFiles: 'Selected files',\n\n  required: 'This field is required.',\n  selectOption: 'Select an option.',\n  selectFile: 'Select a file.',\n  checkRequired: 'Check this box to continue.',\n\n  openMenu: 'Open menu',\n  closeMenu: 'Close menu',\n  breadcrumb: 'Breadcrumb',\n  secondaryNavigation: 'Secondary navigation',\n  pagination: 'Pagination',\n  previous: 'Previous',\n  next: 'Next',\n  pageOf: (page: number, total: number) => `Page ${page} / ${total}`,\n  moreActions: 'More actions',\n\n  options: 'Options',\n  formSection: 'Form section',\n\n  selectRow: 'Select row',\n  selectAll: 'Select all',\n  total: 'Total',\n  chartSeries: 'Series',\n  chartPoint: 'Point',\n  chartSlice: 'Slice',\n  chartShare: 'Share',\n  chartData: 'Chart data',\n  chartValue: 'Value',\n\n  confirmHeading: 'Are you sure?',\n  confirm: 'Confirm',\n  cancel: 'Cancel',\n  details: 'Details',\n\n  avatar: 'Avatar',\n});\n\nlet current: KtStrings = { ...defaultStrings };\nconst listeners = new Set<() => void>();\n\n/** The strings in effect. Elements read them at render time. */\nexport function strings(): Readonly<KtStrings> {\n  return current;\n}\n\n/**\n * Replaces some or all of the strings, and re-renders every connected element\n * so the change shows at once — switching language at runtime works.\n */\nexport function setStrings(overrides: Partial<KtStrings>): void {\n  current = { ...current, ...overrides };\n  for (const listener of listeners) listener();\n}\n\n/** Back to the English defaults. */\nexport function resetStrings(): void {\n  setStrings(defaultStrings);\n}\n\n/** Calls `listener` after every `setStrings`. Returns the unsubscribe function. */\nexport function onStringsChange(listener: () => void): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n"],"names":["defaultStrings","name","country","size","page","total","current","listeners","strings","setStrings","overrides","listener","resetStrings","onStringsChange"],"mappings":"AA8GO,MAAMA,IAAsC,OAAO,OAAO;AAAA,EAC/D,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ,CAACC,MAAkBA,IAAO,UAAUA,CAAI,KAAK;AAAA,EAErD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AAAA,EACX,aAAa,CAACC,MAAgC,iBAAiBA,KAAW,MAAM;AAAA,EAChF,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB,CAACC,MAAiB,2BAA2BA,CAAI;AAAA,EAClE,eAAe;AAAA,EAEf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EAEf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ,CAACC,GAAcC,MAAkB,QAAQD,CAAI,MAAMC,CAAK;AAAA,EAChE,aAAa;AAAA,EAEb,SAAS;AAAA,EACT,aAAa;AAAA,EAEb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EAEZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AACV,CAAC;AAED,IAAIC,IAAqB,EAAE,GAAGN,EAAA;AAC9B,MAAMO,wBAAgB,IAAA;AAGf,SAASC,IAA+B;AAC7C,SAAOF;AACT;AAMO,SAASG,EAAWC,GAAqC;AAC9D,EAAAJ,IAAU,EAAE,GAAGA,GAAS,GAAGI,EAAA;AAC3B,aAAWC,KAAYJ,EAAW,CAAAI,EAAA;AACpC;AAGO,SAASC,IAAqB;AACnC,EAAAH,EAAWT,CAAc;AAC3B;AAGO,SAASa,EAAgBF,GAAkC;AAChE,SAAAJ,EAAU,IAAII,CAAQ,GACf,MAAMJ,EAAU,OAAOI,CAAQ;AACxC;"}

package/dist/chunks/kt-element-E-tfJpGQ.js

@@ -0,0 +1,52 @@
+import { LitElement as n, css as i } from "lit";
+import { o } from "./index-DSSLJirw.js";
+const t = "kt-strings";
+class c extends n {
+  static {
+    this.styles = i`
+    :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;
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.unsubscribeStrings = o(
+      () => this.requestUpdate(t, /* @__PURE__ */ Symbol("previous strings"))
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.unsubscribeStrings?.(), this.unsubscribeStrings = void 0;
+  }
+  /** True when this update was triggered by `setStrings`. */
+  stringsChanged(s) {
+    return s.has(t);
+  }
+}
+function d(e, s) {
+  customElements.get(e) || customElements.define(e, s);
+}
+export {
+  c as K,
+  d
+};
+//# sourceMappingURL=kt-element-E-tfJpGQ.js.map

package/dist/chunks/kt-element-E-tfJpGQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-element-E-tfJpGQ.js","sources":["../../src/internal/kt-element.ts"],"sourcesContent":["import { LitElement, css, type CSSResultGroup, type PropertyValues } from 'lit';\nimport { onStringsChange } from './strings.js';\n\n/**\n * The key a `setStrings` call marks in `changedProperties`, so an element can\n * recompute copy it caches outside `render()` — a validation message.\n */\nconst STRINGS_CHANGED = 'kt-strings';\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  private unsubscribeStrings: (() => void) | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Copy comes from the strings registry at render time; follow it when an\n    // application switches language.\n    // A fresh old value, because Lit skips a named update whose value did not\n    // change — and 'kt-strings' is not a property, so it is always undefined.\n    this.unsubscribeStrings = onStringsChange(() =>\n      this.requestUpdate(STRINGS_CHANGED, Symbol('previous strings')),\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.unsubscribeStrings?.();\n    this.unsubscribeStrings = undefined;\n  }\n\n  /** True when this update was triggered by `setStrings`. */\n  protected stringsChanged(changed: PropertyValues): boolean {\n    return changed.has(STRINGS_CHANGED);\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":["STRINGS_CHANGED","KtElement","LitElement","css","onStringsChange","changed","defineElement","tag","ctor"],"mappings":";;AAOA,MAAMA,IAAkB;AAWjB,MAAMC,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;AAAA,EA4BhC,oBAA0B;AACjC,UAAM,kBAAA,GAKN,KAAK,qBAAqBC;AAAA,MAAgB,MACxC,KAAK,cAAcJ,GAAiB,uBAAO,kBAAkB,CAAC;AAAA,IAAA;AAAA,EAElE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,qBAAA,GACL,KAAK,qBAAqB;AAAA,EAC5B;AAAA;AAAA,EAGU,eAAeK,GAAkC;AACzD,WAAOA,EAAQ,IAAIL,CAAe;AAAA,EACpC;AACF;AAUO,SAASM,EAAcC,GAAaC,GAAsC;AAC/E,EAAI,eAAe,IAAID,CAAG,KAC1B,eAAe,OAAOA,GAAKC,CAAI;AACjC;"}

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

@@ -1,15 +1,16 @@
 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 d, d as g } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as d, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { s as m } from "../../../chunks/index-DSSLJirw.js";
 import "../kt-icon/kt-icon.js";
-var m = Object.defineProperty, s = (a, e, t, b) => {
+var y = Object.defineProperty, s = (a, e, t, k) => {
   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;
+  return i && y(e, t, i), i;
 };
 const u = Array.from({ length: 8 }, (a, e) => `var(--chart-series-${e + 1})`);
-function y(a) {
+function b(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();
 }
@@ -110,13 +111,13 @@ class r extends d {
     return u[e % u.length];
   }
   render() {
-    const e = y(this.name), t = !!this.src && !this.failed;
+    const e = b(this.name), t = !!this.src && !this.failed;
     return n`<span
       part="base"
       class=${c({ avatar: !0, "has-image": t, anonymous: !this.name })}
       style=${t ? "" : `--kt-avatar-hue:${this.hue}`}
       role="img"
-      aria-label=${this.name || "Avatar"}
+      aria-label=${this.name || m().avatar}
     >
       ${t ? n`<img
               part="image"
@@ -154,6 +155,6 @@ s([
 g("kt-avatar", r);
 export {
   r as KtAvatar,
-  y as initialsOf
+  b as initialsOf
 };
 //# sourceMappingURL=kt-avatar.js.map

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

@@ -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        /* 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":"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"}
+{"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 { strings } from '#internal/strings';\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 || strings().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","strings","nothing","__decorateClass","state","property","defineElement"],"mappings":"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"}

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

@@ -2,13 +2,14 @@ import { css as h, nothing as n, html as l } from "lit";
 import { property as e } from "lit/decorators.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-B_jjQDhg.js";
+import { K as p, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
+import { s as g } from "../../../chunks/index-DSSLJirw.js";
 import "../kt-icon/kt-icon.js";
-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;
+var f = Object.defineProperty, t = (s, r, i, y) => {
+  for (var a = void 0, c = s.length - 1, d; c >= 0; c--)
+    (d = s[c]) && (a = d(r, i, a) || a);
+  return a && f(r, i, a), a;
 };
 class o extends p {
   constructor() {
@@ -209,7 +210,7 @@ class o extends p {
               part="remove"
               type="button"
               class="remove"
-              aria-label=${`Remove ${this.display || "this"}`}
+              aria-label=${g().remove(this.display || this.textContent?.trim() || "")}
               @click=${this.onRemove}
             >
               <kt-icon name="x" size="12"></kt-icon>

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

@@ -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-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":"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"}
+{"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 { strings } from '#internal/strings';\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=${strings().remove(this.display || this.textContent?.trim() || '')}\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","strings","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { css as h, html as d, nothing as i } from "lit";
 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 { K as u, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import "../kt-icon/kt-icon.js";
 var g = Object.defineProperty, a = (l, t, o, y) => {
   for (var n = void 0, c = l.length - 1, s; c >= 0; c--)

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

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