kanto-ds 1.0.0

package/dist/chunks/listbox-CUXYn_3S.js

@@ -0,0 +1,101 @@
+import { css as i } from "lit";
+function o(t) {
+  return t.label ?? String(t.id);
+}
+function l(t, e) {
+  const r = e.trim().toLowerCase();
+  return r ? t.filter((n) => o(n).toLowerCase().includes(r)) : t;
+}
+function s(t, e, r) {
+  if (t.length === 0) return -1;
+  for (let n = 1; n <= t.length; n += 1) {
+    const a = (e + r * n + t.length * n) % t.length;
+    if (!t[a]?.disabled) return a;
+  }
+  return -1;
+}
+function p(t) {
+  return t.findIndex((e) => !e.disabled);
+}
+function u(t) {
+  for (let e = t.length - 1; e >= 0; e -= 1)
+    if (!t[e]?.disabled) return e;
+  return -1;
+}
+const f = i`
+  .popup {
+    position: absolute;
+    top: calc(var(--field-height, var(--button-height)) + 6px);
+    left: 0;
+    z-index: var(--z-dropdown);
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-element);
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 300px;
+    margin: 0;
+    padding: var(--padding-expand);
+    overflow: auto;
+    list-style: none;
+    background: var(--color-dark-20);
+    border-radius: var(--radius-input);
+    scrollbar-width: thin;
+
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-6px) scaleY(0.98);
+    transform-origin: top left;
+    pointer-events: none;
+    transition:
+      opacity var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-standard);
+  }
+
+  .popup.open {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    pointer-events: auto;
+  }
+
+  .option {
+    padding: var(--padding-expand-item);
+    color: var(--text-muted);
+    font: var(--font-input);
+    border-radius: var(--radius-input);
+    cursor: pointer;
+  }
+
+  .option:hover,
+  .option.active {
+    background: var(--color-dark-22);
+  }
+
+  .option.selected {
+    color: var(--text-body);
+    font-weight: 600;
+    background: var(--color-dark-23);
+  }
+
+  .option.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .empty {
+    padding: var(--padding-expand-item);
+    color: var(--text-muted);
+    font: var(--font-normal-small);
+    pointer-events: none;
+  }
+`;
+export {
+  p as a,
+  u as b,
+  l as f,
+  f as l,
+  s as n,
+  o
+};
+//# sourceMappingURL=listbox-CUXYn_3S.js.map

package/dist/chunks/listbox-CUXYn_3S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-CUXYn_3S.js","sources":["../../src/internal/listbox.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared pieces of the two option-list controls, `<kt-select>` and\n * `<kt-input-menu>`.\n *\n * They differ in how an option is chosen — pick from a list, or filter by\n * typing — but the popup, the option rows and the keyboard model are the same,\n * and having them drift apart is how a design system stops looking like one.\n */\n\nexport interface KtOption {\n  readonly id: string | number;\n  readonly label?: string;\n  readonly disabled?: boolean;\n}\n\n/** The text to display for an option: its label, or its id as a fallback. */\nexport function optionLabel(option: KtOption): string {\n  return option.label ?? String(option.id);\n}\n\n/** Case-insensitive substring match on the visible label. */\nexport function filterOptions(options: readonly KtOption[], query: string): readonly KtOption[] {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return options;\n  return options.filter((option) => optionLabel(option).toLowerCase().includes(needle));\n}\n\n/**\n * The next selectable index in `direction`, skipping disabled options and\n * wrapping at both ends. Returns -1 when every option is disabled, so a caller\n * never lands the active descendant on something that cannot be chosen.\n */\nexport function nextEnabledIndex(\n  options: readonly KtOption[],\n  from: number,\n  direction: 1 | -1,\n): number {\n  if (options.length === 0) return -1;\n\n  for (let step = 1; step <= options.length; step += 1) {\n    const index = (from + direction * step + options.length * step) % options.length;\n    if (!options[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/** The first selectable index, for opening a list with nothing selected. */\nexport function firstEnabledIndex(options: readonly KtOption[]): number {\n  return options.findIndex((option) => !option.disabled);\n}\n\n/** The last selectable index, for End. */\nexport function lastEnabledIndex(options: readonly KtOption[]): number {\n  for (let index = options.length - 1; index >= 0; index -= 1) {\n    if (!options[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/**\n * The popup and option-row styles.\n *\n * The panel animates through opacity and transform while staying in the layout\n * as `visibility: hidden`, rather than being added and removed: a popup that\n * unmounts cannot animate out, and one that only sets `display: none` cannot\n * animate at all.\n */\nexport const listboxStyles = css`\n  .popup {\n    position: absolute;\n    top: calc(var(--field-height, var(--button-height)) + 6px);\n    left: 0;\n    z-index: var(--z-dropdown);\n    display: flex;\n    flex-direction: column;\n    gap: var(--gap-element);\n    box-sizing: border-box;\n    width: 100%;\n    max-height: 300px;\n    margin: 0;\n    padding: var(--padding-expand);\n    overflow: auto;\n    list-style: none;\n    background: var(--color-dark-20);\n    border-radius: var(--radius-input);\n    scrollbar-width: thin;\n\n    visibility: hidden;\n    opacity: 0;\n    transform: translateY(-6px) scaleY(0.98);\n    transform-origin: top left;\n    pointer-events: none;\n    transition:\n      opacity var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-standard);\n  }\n\n  .popup.open {\n    visibility: visible;\n    opacity: 1;\n    transform: translateY(0) scaleY(1);\n    pointer-events: auto;\n  }\n\n  .option {\n    padding: var(--padding-expand-item);\n    color: var(--text-muted);\n    font: var(--font-input);\n    border-radius: var(--radius-input);\n    cursor: pointer;\n  }\n\n  .option:hover,\n  .option.active {\n    background: var(--color-dark-22);\n  }\n\n  .option.selected {\n    color: var(--text-body);\n    font-weight: 600;\n    background: var(--color-dark-23);\n  }\n\n  .option.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .empty {\n    padding: var(--padding-expand-item);\n    color: var(--text-muted);\n    font: var(--font-normal-small);\n    pointer-events: none;\n  }\n`;\n"],"names":["optionLabel","option","filterOptions","options","query","needle","nextEnabledIndex","from","direction","step","index","firstEnabledIndex","lastEnabledIndex","listboxStyles","css"],"mappings":";AAkBO,SAASA,EAAYC,GAA0B;AACpD,SAAOA,EAAO,SAAS,OAAOA,EAAO,EAAE;AACzC;AAGO,SAASC,EAAcC,GAA8BC,GAAoC;AAC9F,QAAMC,IAASD,EAAM,KAAA,EAAO,YAAA;AAC5B,SAAKC,IACEF,EAAQ,OAAO,CAACF,MAAWD,EAAYC,CAAM,EAAE,YAAA,EAAc,SAASI,CAAM,CAAC,IADhEF;AAEtB;AAOO,SAASG,EACdH,GACAI,GACAC,GACQ;AACR,MAAIL,EAAQ,WAAW,EAAG,QAAO;AAEjC,WAASM,IAAO,GAAGA,KAAQN,EAAQ,QAAQM,KAAQ,GAAG;AACpD,UAAMC,KAASH,IAAOC,IAAYC,IAAON,EAAQ,SAASM,KAAQN,EAAQ;AAC1E,QAAI,CAACA,EAAQO,CAAK,GAAG,SAAU,QAAOA;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAASC,EAAkBR,GAAsC;AACtE,SAAOA,EAAQ,UAAU,CAACF,MAAW,CAACA,EAAO,QAAQ;AACvD;AAGO,SAASW,EAAiBT,GAAsC;AACrE,WAASO,IAAQP,EAAQ,SAAS,GAAGO,KAAS,GAAGA,KAAS;AACxD,QAAI,CAACP,EAAQO,CAAK,GAAG,SAAU,QAAOA;AAExC,SAAO;AACT;AAUO,MAAMG,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/chunks/registry-X4LS9J5K.js

@@ -0,0 +1,30 @@
+const t = /* @__PURE__ */ new Map();
+function o(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 s(e, r) {
+  t.set(o(e), r);
+}
+function c(e) {
+  for (const [r, n] of Object.entries(e))
+    a(n) && s(r, n);
+}
+function i(e) {
+  return t.get(o(e));
+}
+function g() {
+  return [...t.keys()].sort();
+}
+function a(e) {
+  return Array.isArray(e) && e.every(
+    (r) => Array.isArray(r) && typeof r[0] == "string" && typeof r[1] == "object" && r[1] !== null
+  );
+}
+export {
+  c as a,
+  g as b,
+  i as g,
+  s as r,
+  o as t
+};
+//# sourceMappingURL=registry-X4LS9J5K.js.map

package/dist/chunks/registry-X4LS9J5K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-X4LS9J5K.js","sources":["../../src/icons/registry.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"],"names":["registry","toKebabCase","name","registerIcon","node","registerIcons","icons","isIconNode","getIcon","registeredIcons","value","child"],"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;"}

package/dist/chunks/slots-BPbIdxAJ.js

@@ -0,0 +1,7 @@
+function n(e) {
+  return e ? e.assignedElements({ flatten: !0 }).length > 0 ? !0 : e.assignedNodes({ flatten: !0 }).some((t) => t.nodeType === Node.TEXT_NODE && (t.textContent ?? "").trim() !== "") : !1;
+}
+export {
+  n as h
+};
+//# sourceMappingURL=slots-BPbIdxAJ.js.map

package/dist/chunks/slots-BPbIdxAJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots-BPbIdxAJ.js","sources":["../../src/internal/slots.ts"],"sourcesContent":["/**\n * Knowing whether a slot actually received anything.\n *\n * CSS cannot answer this. A wrapper around `<slot>` always has one element\n * child — the slot itself — so `:has(*)` matches whether or not anything was\n * assigned, and `:empty` looks at the slot's *fallback* children rather than\n * its assigned nodes. Both read as working and neither does.\n */\n\n/** True when the slot has assigned elements, or non-whitespace assigned text. */\nexport function hasAssignedContent(slot: HTMLSlotElement | null | undefined): boolean {\n  if (!slot) return false;\n  if (slot.assignedElements({ flatten: true }).length > 0) return true;\n\n  return slot\n    .assignedNodes({ flatten: true })\n    .some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');\n}\n"],"names":["hasAssignedContent","slot","node"],"mappings":"AAUO,SAASA,EAAmBC,GAAmD;AACpF,SAAKA,IACDA,EAAK,iBAAiB,EAAE,SAAS,IAAM,EAAE,SAAS,IAAU,KAEzDA,EACJ,cAAc,EAAE,SAAS,GAAA,CAAM,EAC/B,KAAK,CAACC,MAASA,EAAK,aAAa,KAAK,cAAcA,EAAK,eAAe,IAAI,KAAA,MAAW,EAAE,IAL1E;AAMpB;"}

package/dist/chunks/toaster-PmdKSV5x.js

@@ -0,0 +1,40 @@
+import { KtToastContainer as r } from "../components/feedback/kt-toast-container/kt-toast-container.js";
+class o {
+  constructor() {
+    this.position = "bottom-right";
+  }
+  /** The container in use, created on first call. */
+  getContainer() {
+    if (this.container?.isConnected) return this.container;
+    const t = document.querySelector("kt-toast-container");
+    if (t)
+      return this.container = t, t;
+    const n = new r();
+    return n.position = this.position, document.body.append(n), this.container = n, n;
+  }
+  show(t) {
+    return this.getContainer().show(t);
+  }
+  success(t, n = {}) {
+    return this.show({ duration: 4e3, ...n, variant: "success", heading: t });
+  }
+  info(t, n = {}) {
+    return this.show({ duration: 4e3, ...n, variant: "information", heading: t });
+  }
+  warning(t, n = {}) {
+    return this.show({ duration: 6e3, ...n, variant: "warning", heading: t });
+  }
+  /** Errors do not dismiss themselves: the user has to see this one. */
+  error(t, n = {}) {
+    return this.show({ duration: 0, ...n, variant: "error", heading: t });
+  }
+  /** Clears the stack. */
+  clear() {
+    this.container?.clear();
+  }
+}
+const s = new o();
+export {
+  s as t
+};
+//# sourceMappingURL=toaster-PmdKSV5x.js.map

package/dist/chunks/toaster-PmdKSV5x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster-PmdKSV5x.js","sources":["../../src/components/feedback/kt-toast-container/toaster.ts"],"sourcesContent":["import {\n  KtToastContainer,\n  type KtToastOptions,\n  type KtToastPosition,\n} from '../kt-toast-container/kt-toast-container.js';\nimport type { KtToast } from '../kt-toast/kt-toast.js';\nimport '../kt-toast-container/kt-toast-container.js';\n\n/**\n * The imperative way to raise a toast, for the many places where reaching a\n * container element is inconvenient — an interceptor, a store, a catch block.\n *\n * It lazily creates one `<kt-toast-container>` on `<body>` and reuses it.\n *\n * ```js\n * import { toaster } from 'kanto-ds';\n *\n * toaster.success('Entity created');\n * toaster.error('Could not save', { description: 'Try again in a moment.' });\n * ```\n *\n * Prefer placing a `<kt-toast-container>` in your own markup when you care\n * where in the DOM it lives — inside a dialog, or scoped to one region.\n */\nclass Toaster {\n  private container: KtToastContainer | undefined;\n\n  /** Where the auto-created container sits. Changing it moves the stack. */\n  position: KtToastPosition = 'bottom-right';\n\n  /** The container in use, created on first call. */\n  getContainer(): KtToastContainer {\n    if (this.container?.isConnected) return this.container;\n\n    const existing = document.querySelector('kt-toast-container');\n    if (existing) {\n      this.container = existing;\n      return existing;\n    }\n\n    const created = new KtToastContainer();\n    created.position = this.position;\n    document.body.append(created);\n    this.container = created;\n    return created;\n  }\n\n  show(options: KtToastOptions): KtToast {\n    return this.getContainer().show(options);\n  }\n\n  success(heading: string, options: Omit<KtToastOptions, 'variant' | 'heading'> = {}): KtToast {\n    return this.show({ duration: 4000, ...options, variant: 'success', heading });\n  }\n\n  info(heading: string, options: Omit<KtToastOptions, 'variant' | 'heading'> = {}): KtToast {\n    return this.show({ duration: 4000, ...options, variant: 'information', heading });\n  }\n\n  warning(heading: string, options: Omit<KtToastOptions, 'variant' | 'heading'> = {}): KtToast {\n    return this.show({ duration: 6000, ...options, variant: 'warning', heading });\n  }\n\n  /** Errors do not dismiss themselves: the user has to see this one. */\n  error(heading: string, options: Omit<KtToastOptions, 'variant' | 'heading'> = {}): KtToast {\n    return this.show({ duration: 0, ...options, variant: 'error', heading });\n  }\n\n  /** Clears the stack. */\n  clear(): void {\n    this.container?.clear();\n  }\n}\n\n/** The shared toaster. */\nexport const toaster = new Toaster();\n"],"names":["Toaster","existing","created","KtToastContainer","options","heading","toaster"],"mappings":";AAwBA,MAAMA,EAAQ;AAAA,EAAd,cAAA;AAIE,SAAA,WAA4B;AAAA,EAAA;AAAA;AAAA,EAG5B,eAAiC;AAC/B,QAAI,KAAK,WAAW,YAAa,QAAO,KAAK;AAE7C,UAAMC,IAAW,SAAS,cAAc,oBAAoB;AAC5D,QAAIA;AACF,kBAAK,YAAYA,GACVA;AAGT,UAAMC,IAAU,IAAIC,EAAA;AACpB,WAAAD,EAAQ,WAAW,KAAK,UACxB,SAAS,KAAK,OAAOA,CAAO,GAC5B,KAAK,YAAYA,GACVA;AAAA,EACT;AAAA,EAEA,KAAKE,GAAkC;AACrC,WAAO,KAAK,eAAe,KAAKA,CAAO;AAAA,EACzC;AAAA,EAEA,QAAQC,GAAiBD,IAAuD,IAAa;AAC3F,WAAO,KAAK,KAAK,EAAE,UAAU,KAAM,GAAGA,GAAS,SAAS,WAAW,SAAAC,GAAS;AAAA,EAC9E;AAAA,EAEA,KAAKA,GAAiBD,IAAuD,IAAa;AACxF,WAAO,KAAK,KAAK,EAAE,UAAU,KAAM,GAAGA,GAAS,SAAS,eAAe,SAAAC,GAAS;AAAA,EAClF;AAAA,EAEA,QAAQA,GAAiBD,IAAuD,IAAa;AAC3F,WAAO,KAAK,KAAK,EAAE,UAAU,KAAM,GAAGA,GAAS,SAAS,WAAW,SAAAC,GAAS;AAAA,EAC9E;AAAA;AAAA,EAGA,MAAMA,GAAiBD,IAAuD,IAAa;AACzF,WAAO,KAAK,KAAK,EAAE,UAAU,GAAG,GAAGA,GAAS,SAAS,SAAS,SAAAC,GAAS;AAAA,EACzE;AAAA;AAAA,EAGA,QAAc;AACZ,SAAK,WAAW,MAAA;AAAA,EAClB;AACF;AAGO,MAAMC,IAAU,IAAIN,EAAA;"}

package/dist/components/core/kt-avatar/kt-avatar.d.ts

@@ -0,0 +1,49 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../kt-icon/kt-icon.js';
+export type KtAvatarSize = 'small' | 'medium' | 'large';
+export type KtAvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+/** "Benjamin Canac" → "BC", "emma.davis@example.com" → "ED". */
+export declare function initialsOf(name: string): string;
+/**
+ * A person or an organisation, as a picture or as their initials.
+ *
+ * The fallback is not decoration: most rows in most products have no photo, so
+ * the initials path is the one that renders. It picks a colour from the name,
+ * which means the same person is the same colour on every screen and the eye
+ * can use it.
+ *
+ * @element kt-avatar
+ *
+ * @csspart base - The avatar circle.
+ * @csspart image - The `<img>`, when `src` is set and loads.
+ *
+ * @example
+ * ```html
+ * <kt-avatar name="Benjamin Canac"></kt-avatar>
+ * <kt-avatar name="Emma Davis" src="/emma.jpg" status="online"></kt-avatar>
+ * ```
+ */
+export declare class KtAvatar extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private failed;
+    /** The person's name. Drives the initials, the colour and the label. */
+    name: string;
+    /** Photo. Falls back to initials if it is missing or fails to load. */
+    src: string;
+    size: KtAvatarSize;
+    /** Rounds to the card radius instead of a circle — for organisations. */
+    square: boolean;
+    /** Presence dot. Omit for none. */
+    status?: KtAvatarStatus;
+    /** Overrides the colour picked from the name. */
+    color: string;
+    willUpdate(changed: Map<string, unknown>): void;
+    private get hue();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-avatar': KtAvatar;
+    }
+}

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

@@ -0,0 +1,156 @@
+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 "../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})`);
+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 {
+  constructor() {
+    super(...arguments), this.failed = !1, this.name = "", this.src = "", this.size = "medium", this.square = !1, this.color = "";
+  }
+  static {
+    this.styles = [
+      u.styles,
+      p`
+      :host {
+        display: inline-flex;
+        --kt-avatar-size: 32px;
+      }
+
+      :host([size='small']) {
+        --kt-avatar-size: 24px;
+      }
+      :host([size='large']) {
+        --kt-avatar-size: 48px;
+      }
+
+      /* The identity hue is worn exactly the way every other tinted thing in
+         Kanto wears one: the colour at 12% behind, the colour itself as the
+         ink, and no border — the same pair as a secondary button, a danger
+         button or a badge tone. A saturated fill with white initials is a
+         different system's idea, and beside those it looks like one. */
+      .avatar {
+        position: relative;
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: var(--kt-avatar-size);
+        height: var(--kt-avatar-size);
+        overflow: hidden;
+        color: var(--kt-avatar-hue, var(--text-muted));
+        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);
+        user-select: none;
+      }
+
+      /* No hue to tint with, and a photograph that fills the circle anyway. */
+      .avatar.has-image,
+      .avatar.anonymous {
+        background: var(--surface-raised);
+      }
+
+      :host([square]) .avatar {
+        border-radius: var(--border-radius);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* The dot sits outside the clipped circle, so it needs its own box. */
+      .status {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: calc(var(--kt-avatar-size) * 0.28);
+        height: calc(var(--kt-avatar-size) * 0.28);
+        border: 2px solid var(--surface-page);
+        border-radius: var(--radius-full);
+      }
+
+      .online {
+        background: var(--color-success-base);
+      }
+      .away {
+        background: var(--color-warning-base);
+      }
+      .busy {
+        background: var(--color-danger-base);
+      }
+      .offline {
+        background: var(--color-text-500);
+      }
+    `
+    ];
+  }
+  willUpdate(e) {
+    e.has("src") && (this.failed = !1);
+  }
+  get hue() {
+    if (this.color) return this.color;
+    let e = 0;
+    for (const t of this.name) e += t.charCodeAt(0);
+    return d[e % d.length];
+  }
+  render() {
+    const e = y(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"}
+    >
+      ${t ? n`<img
+              part="image"
+              src=${this.src}
+              alt=""
+              @error=${() => {
+      this.failed = !0;
+    }}
+            />` : e || n`<kt-icon name="user" size="16"></kt-icon>`}
+      ${this.status ? n`<span class=${c({ status: !0, [this.status]: !0 })}></span>` : f}
+    </span>`;
+  }
+}
+s([
+  v()
+], r.prototype, "failed");
+s([
+  o({ type: String })
+], r.prototype, "name");
+s([
+  o({ type: String })
+], r.prototype, "src");
+s([
+  o({ type: String, reflect: !0 })
+], r.prototype, "size");
+s([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "square");
+s([
+  o({ type: String, reflect: !0 })
+], r.prototype, "status");
+s([
+  o({ type: String })
+], r.prototype, "color");
+g("kt-avatar", r);
+export {
+  r as KtAvatar,
+  y as initialsOf
+};
+//# sourceMappingURL=kt-avatar.js.map

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

@@ -0,0 +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":"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"}

package/dist/components/core/kt-badge/kt-badge.d.ts

@@ -0,0 +1,77 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../kt-icon/kt-icon.js';
+export type KtBadgeVariant = 'tag' | 'code' | 'category' | 'count';
+export type KtBadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type KtBadgeSize = 'small' | 'medium';
+/**
+ * A compact label: a pill `tag`, a monospaced `code` token, a `category`
+ * tinted with a colour of your choosing, or a `count`.
+ *
+ * Two independent axes, because they answer different questions. `variant` is
+ * the **shape** — what kind of thing this is. `tone` is the **colour** — what
+ * it means. A tag can be neutral or dangerous; so can a count. Folding them
+ * into one list would give you nine variants and no way to say "a tag, but
+ * this one is a warning".
+ *
+ * `count` is the exception that carries no border, because a number pinned to
+ * a nav item is not a label with an outline — it is a mark on the thing it
+ * counts.
+ *
+ * @element kt-badge
+ *
+ * @slot - The text. Falls back to the `label` attribute.
+ *
+ * @csspart base - The container.
+ * @csspart remove - The remove button, when `removable`.
+ *
+ * @cssproperty --kt-badge-color - Category hue. The fill is this colour at 20%.
+ *
+ * @fires kt-badge-click - A `clickable` badge was activated. Cancelable.
+ * @fires kt-remove - The remove button was pressed. Cancelable: cancel it and
+ *   remove the badge yourself once the server agrees.
+ *
+ * @example
+ * ```html
+ * <kt-badge>Design systems</kt-badge>
+ * <kt-badge tone="success">Active</kt-badge>
+ * <kt-badge variant="code">--surface-card</kt-badge>
+ * <kt-badge variant="category" color="#3987e5">Infrastructure</kt-badge>
+ * <kt-badge variant="count" tone="danger" max="99">128</kt-badge>
+ * <kt-badge icon="user" removable>Assigned to me</kt-badge>
+ * ```
+ */
+export declare class KtBadge extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The shape: what kind of thing this is. */
+    variant: KtBadgeVariant;
+    /** The colour: what it means. Independent of `variant`. */
+    tone: KtBadgeTone;
+    size: KtBadgeSize;
+    /** Badge text. The default slot wins when both are present. */
+    label: string;
+    /** Category hue: any CSS colour. The fill is this colour at 20%. */
+    color: string;
+    /** Lucide icon name, before the text. */
+    icon: string;
+    clickable: boolean;
+    /** Adds a remove button. Fires a cancelable `kt-remove`. */
+    removable: boolean;
+    /**
+     * Caps a numeric label: `max="99"` shows `99+`.
+     * Ignored when the content is not a number.
+     */
+    max?: number;
+    /** Shorthand for `tone="danger"`, kept from the field components. */
+    error: boolean;
+    private get display();
+    private activate;
+    private onKeyDown;
+    private onRemove;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-badge': KtBadge;
+    }
+}