kanto-ds 1.5.2 → 1.6.0

package/dist/index.d.ts

@@ -23,19 +23,23 @@ export { KtCheckbox } from './components/forms/kt-checkbox/kt-checkbox.js';
 export type { KtCheckboxSize } from './components/forms/kt-checkbox/kt-checkbox.js';
 export { KtCalendar } from './components/forms/kt-calendar/kt-calendar.js';
 export type { KtCalendarView } from './components/forms/kt-calendar/kt-calendar.js';
+export { KtDateInput } from './components/forms/kt-date-input/kt-date-input.js';
 export { KtDatePicker } from './components/forms/kt-date-picker/kt-date-picker.js';
-export type { KtDatePickerSize } from './components/forms/kt-date-picker/kt-date-picker.js';
+export type { KtDatePickerSize, KtDatePreset, } from './components/forms/kt-date-picker/kt-date-picker.js';
 export { KtDragDrop } from './components/forms/kt-drag-drop/kt-drag-drop.js';
 export { KtForm } from './components/forms/kt-form/kt-form.js';
 export { KtInput } from './components/forms/kt-input/kt-input.js';
 export type { KtInputSize } from './components/forms/kt-input/kt-input.js';
 export { KtInputMenu } from './components/forms/kt-input-menu/kt-input-menu.js';
+export { KtMultiSelect, type KtMultiSelectValue, } from './components/forms/kt-multi-select/kt-multi-select.js';
 export { KtLabelInput } from './components/forms/kt-label-input/kt-label-input.js';
 export { KtRadio, KtRadioGroup } from './components/forms/kt-radio-group/kt-radio-group.js';
 export type { KtRadioGroupOrientation } from './components/forms/kt-radio-group/kt-radio-group.js';
 export { KtSelect } from './components/forms/kt-select/kt-select.js';
 export type { KtSelectSize } from './components/forms/kt-select/kt-select.js';
 export { KtTextarea } from './components/forms/kt-textarea/kt-textarea.js';
+export { KtTimeInput } from './components/forms/kt-time-input/kt-time-input.js';
+export type { KtHourCycle } from './components/forms/kt-time-input/kt-time-input.js';
 export { KtToggle } from './components/forms/kt-toggle/kt-toggle.js';
 export type { KtToggleSize } from './components/forms/kt-toggle/kt-toggle.js';
 export { KtBreadcrumb } from './components/navigation/kt-breadcrumb/kt-breadcrumb.js';
@@ -89,4 +93,8 @@ export type { KtCountry } from './internal/countries.js';
 export { getIcon, registerIcon, registerIcons, registeredIcons } from './icons/registry.js';
 export type { IconNode } from './icons/registry.js';
 export { defaultStrings, resetStrings, setStrings, strings as getStrings, type KtStrings, } from './internal/strings.js';
+export { accentPalette, accentProperties, contrastRatio, KT_ACCENTS, KT_DEFAULT_ACCENT, parseColor, setAccent, } from './theme/accent.js';
+export type { KtAccentPalette, KtRgb } from './theme/accent.js';
+export { KT_DEFAULT_APPEARANCE, KT_DENSITIES, KT_FONTS, KT_RADII, KT_TEXT_SIZES, KT_THEMES, readAppearance, setAppearance, } from './theme/appearance.js';
+export type { KtAppearance, KtDensity, KtFont, KtRadius, KtTextSize, KtTheme, } from './theme/appearance.js';
 export { KtElement, defineElement } from './internal/kt-element.js';

package/dist/index.js

@@ -1,112 +1,319 @@
-import { KtAvatar as r } from "./components/core/kt-avatar/kt-avatar.js";
-import { KtBadge as p } from "./components/core/kt-badge/kt-badge.js";
-import { KtButton as f } from "./components/core/kt-button/kt-button.js";
-import { KtSplitButton as K } from "./components/core/kt-split-button/kt-split-button.js";
-import { KtCard as n } from "./components/core/kt-card/kt-card.js";
-import { KtCode as i } from "./components/core/kt-code/kt-code.js";
-import { KtIcon as l } from "./components/core/kt-icon/kt-icon.js";
-import { KtKbd as u } from "./components/core/kt-kbd/kt-kbd.js";
-import { KtCheckbox as T } from "./components/forms/kt-checkbox/kt-checkbox.js";
-import { K as c } from "./chunks/kt-calendar-B_hFdD9V.js";
-import { KtDatePicker as I } from "./components/forms/kt-date-picker/kt-date-picker.js";
-import { KtDragDrop as D } from "./components/forms/kt-drag-drop/kt-drag-drop.js";
-import { KtForm as M } from "./components/forms/kt-form/kt-form.js";
-import { KtInput as E } from "./components/forms/kt-input/kt-input.js";
-import { KtInputMenu as v } from "./components/forms/kt-input-menu/kt-input-menu.js";
-import { KtLabelInput as G } from "./components/forms/kt-label-input/kt-label-input.js";
-import { KtRadio as R, KtRadioGroup as w } from "./components/forms/kt-radio-group/kt-radio-group.js";
-import { KtSelect as F } from "./components/forms/kt-select/kt-select.js";
-import { KtTextarea as N } from "./components/forms/kt-textarea/kt-textarea.js";
-import { KtToggle as q } from "./components/forms/kt-toggle/kt-toggle.js";
-import { KtBreadcrumb as J } from "./components/navigation/kt-breadcrumb/kt-breadcrumb.js";
-import { KtPageHeader as Q } from "./components/navigation/kt-page-header/kt-page-header.js";
-import { KtSegmentedControl as V } from "./components/navigation/kt-segmented-control/kt-segmented-control.js";
-import { KtSubMenuNavigation as X } from "./components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js";
-import { KtTabs as Z } from "./components/navigation/kt-tabs/kt-tabs.js";
-import { KtHeader as $ } from "./components/navigation/kt-header/kt-header.js";
-import { KtToggleButton as ot } from "./components/navigation/kt-toggle-button/kt-toggle-button.js";
-import { KtToggleButtonGroup as et } from "./components/navigation/kt-toggle-button-group/kt-toggle-button-group.js";
-import { KtAlert as mt } from "./components/feedback/kt-alert/kt-alert.js";
-import { KtEmptyState as xt } from "./components/feedback/kt-empty-state/kt-empty-state.js";
-import { KtProgressBar as at } from "./components/feedback/kt-progress-bar/kt-progress-bar.js";
-import { KtSkeleton as st } from "./components/feedback/kt-skeleton/kt-skeleton.js";
-import { KtToast as gt } from "./components/feedback/kt-toast/kt-toast.js";
-import { KtToastContainer as dt } from "./components/feedback/kt-toast-container/kt-toast-container.js";
-import { t as St } from "./chunks/toaster-PmdKSV5x.js";
-import { KtTooltip as bt } from "./components/feedback/kt-tooltip/kt-tooltip.js";
-import { KtCollapsible as Ct } from "./components/overlays/kt-collapsible/kt-collapsible.js";
-import { KtConfirmDialog as Bt } from "./components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
-import { KtDropdown as Pt } from "./components/overlays/kt-dropdown/kt-dropdown.js";
-import { KtModal as kt } from "./components/overlays/kt-modal/kt-modal.js";
-import { KtSidePanel as ht } from "./components/overlays/kt-side-panel/kt-side-panel.js";
-import { KtChart as At } from "./components/data/kt-chart/kt-chart.js";
-import { KtMeter as Ht } from "./components/data/kt-meter/kt-meter.js";
-import { KtPagination as wt } from "./components/data/kt-pagination/kt-pagination.js";
-import { KtStat as Ft } from "./components/data/kt-stat/kt-stat.js";
-import { KtTable as Nt } from "./components/data/kt-table/kt-table.js";
-import { KtTimeline as qt, KtTimelineItem as zt } from "./components/data/kt-timeline/kt-timeline.js";
-import { g as Ot, r as Qt, a as Ut, b as Vt } from "./chunks/defaults-CFrjqae2.js";
-import { d as Xt, s as Yt, r as Zt, a as _t } from "./chunks/index-STEEvEP7.js";
-import { K as to, d as oo } from "./chunks/kt-element-Djx2JcGl.js";
+import { KtAvatar as ot } from "./components/core/kt-avatar/kt-avatar.js";
+import { KtBadge as nt } from "./components/core/kt-badge/kt-badge.js";
+import { KtButton as st } from "./components/core/kt-button/kt-button.js";
+import { KtSplitButton as lt } from "./components/core/kt-split-button/kt-split-button.js";
+import { KtCard as mt } from "./components/core/kt-card/kt-card.js";
+import { KtCode as dt } from "./components/core/kt-code/kt-code.js";
+import { KtIcon as pt } from "./components/core/kt-icon/kt-icon.js";
+import { KtKbd as bt } from "./components/core/kt-kbd/kt-kbd.js";
+import { KtCheckbox as ht } from "./components/forms/kt-checkbox/kt-checkbox.js";
+import { K as Tt } from "./chunks/kt-calendar-CtwOby1R.js";
+import { KtDateInput as yt } from "./components/forms/kt-date-input/kt-date-input.js";
+import { KtDatePicker as Mt } from "./components/forms/kt-date-picker/kt-date-picker.js";
+import { KtDragDrop as kt } from "./components/forms/kt-drag-drop/kt-drag-drop.js";
+import { KtForm as vt } from "./components/forms/kt-form/kt-form.js";
+import { KtInput as Pt } from "./components/forms/kt-input/kt-input.js";
+import { KtInputMenu as At } from "./components/forms/kt-input-menu/kt-input-menu.js";
+import { KtMultiSelect as Nt } from "./components/forms/kt-multi-select/kt-multi-select.js";
+import { KtLabelInput as Gt } from "./components/forms/kt-label-input/kt-label-input.js";
+import { KtRadio as Bt, KtRadioGroup as $t } from "./components/forms/kt-radio-group/kt-radio-group.js";
+import { KtSelect as Ht } from "./components/forms/kt-select/kt-select.js";
+import { KtTextarea as jt } from "./components/forms/kt-textarea/kt-textarea.js";
+import { KtTimeInput as zt } from "./components/forms/kt-time-input/kt-time-input.js";
+import { KtToggle as Xt } from "./components/forms/kt-toggle/kt-toggle.js";
+import { KtBreadcrumb as Yt } from "./components/navigation/kt-breadcrumb/kt-breadcrumb.js";
+import { KtPageHeader as qt } from "./components/navigation/kt-page-header/kt-page-header.js";
+import { KtSegmentedControl as Qt } from "./components/navigation/kt-segmented-control/kt-segmented-control.js";
+import { KtSubMenuNavigation as ee } from "./components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js";
+import { KtTabs as re } from "./components/navigation/kt-tabs/kt-tabs.js";
+import { KtHeader as ae } from "./components/navigation/kt-header/kt-header.js";
+import { KtToggleButton as ce } from "./components/navigation/kt-toggle-button/kt-toggle-button.js";
+import { KtToggleButtonGroup as ie } from "./components/navigation/kt-toggle-button-group/kt-toggle-button-group.js";
+import { KtAlert as fe } from "./components/feedback/kt-alert/kt-alert.js";
+import { KtEmptyState as ue } from "./components/feedback/kt-empty-state/kt-empty-state.js";
+import { KtProgressBar as xe } from "./components/feedback/kt-progress-bar/kt-progress-bar.js";
+import { KtSkeleton as Ke } from "./components/feedback/kt-skeleton/kt-skeleton.js";
+import { KtToast as ge } from "./components/feedback/kt-toast/kt-toast.js";
+import { KtToastContainer as Se } from "./components/feedback/kt-toast-container/kt-toast-container.js";
+import { t as Ie } from "./chunks/toaster-PmdKSV5x.js";
+import { KtTooltip as Ee } from "./components/feedback/kt-tooltip/kt-tooltip.js";
+import { KtCollapsible as Ce } from "./components/overlays/kt-collapsible/kt-collapsible.js";
+import { KtConfirmDialog as De } from "./components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
+import { KtDropdown as we } from "./components/overlays/kt-dropdown/kt-dropdown.js";
+import { KtModal as Le } from "./components/overlays/kt-modal/kt-modal.js";
+import { KtSidePanel as _e } from "./components/overlays/kt-side-panel/kt-side-panel.js";
+import { KtChart as Re } from "./components/data/kt-chart/kt-chart.js";
+import { KtMeter as $e } from "./components/data/kt-meter/kt-meter.js";
+import { KtPagination as He } from "./components/data/kt-pagination/kt-pagination.js";
+import { KtStat as je } from "./components/data/kt-stat/kt-stat.js";
+import { KtTable as ze } from "./components/data/kt-table/kt-table.js";
+import { KtTimeline as Xe, KtTimelineItem as We } from "./components/data/kt-timeline/kt-timeline.js";
+import { g as Ze, r as qe, a as Je, b as Qe } from "./chunks/defaults-CFrjqae2.js";
+import { d as eo, s as oo, r as ro, a as no } from "./chunks/index-TWJzttLX.js";
+import { K as so, d as co } from "./chunks/kt-element-T0VbIBNp.js";
+const C = (t) => {
+  const e = t / 255;
+  return e <= 0.04045 ? e / 12.92 : ((e + 0.055) / 1.055) ** 2.4;
+}, K = (t) => 255 * (t <= 31308e-7 ? 12.92 * t : 1.055 * t ** (1 / 2.4) - 0.055);
+function O([t, e, o]) {
+  const [n, r, a] = [t, e, o].map(C), s = Math.cbrt(0.4122214708 * n + 0.5363325363 * r + 0.0514459929 * a), l = Math.cbrt(0.2119034982 * n + 0.6806995451 * r + 0.1073969566 * a), i = Math.cbrt(0.0883024619 * n + 0.2817188376 * r + 0.6299787005 * a), m = 0.2104542553 * s + 0.793617785 * l - 0.0040720468 * i, f = 1.9779984951 * s - 2.428592205 * l + 0.4505937099 * i, u = 0.0259040371 * s + 0.7827717662 * l - 0.808675766 * i;
+  return [m, Math.hypot(f, u), (Math.atan2(u, f) * 180 / Math.PI + 360) % 360];
+}
+function d([t, e, o]) {
+  const n = e * Math.cos(o * Math.PI / 180), r = e * Math.sin(o * Math.PI / 180), a = (t + 0.3963377774 * n + 0.2158037573 * r) ** 3, s = (t - 0.1055613458 * n - 0.0638541728 * r) ** 3, l = (t - 0.0894841775 * n - 1.291485548 * r) ** 3;
+  return [
+    K(4.0767416621 * a - 3.3077115913 * s + 0.2309699292 * l),
+    K(-1.2684380046 * a + 2.6097574011 * s - 0.3413193965 * l),
+    K(-0.0041960863 * a - 0.7034186147 * s + 1.707614701 * l)
+  ];
+}
+const I = (t) => t.every((e) => e >= -0.5 && e <= 255.5);
+function v(t, e, o) {
+  if (I(d([t, o, e]))) return o;
+  let n = 0, r = o;
+  for (let a = 0; a < 24; a += 1) {
+    const s = (n + r) / 2;
+    I(d([t, s, e])) ? n = s : r = s;
+  }
+  return n;
+}
+const y = (t) => t.map((e) => Math.min(255, Math.max(0, Math.round(e))));
+function M(t) {
+  const [e, o, n] = t.map(C);
+  return 0.2126 * e + 0.7152 * o + 0.0722 * n;
+}
+function h(t, e) {
+  const [o, n] = [M(t), M(e)].sort((r, a) => a - r);
+  return (o + 0.05) / (n + 0.05);
+}
+const E = (t, e, o) => t.map((n, r) => n * e + o[r] * (1 - e)), b = (t) => `#${y(t).map((e) => e.toString(16).padStart(2, "0")).join("")}`;
+function D(t) {
+  const e = t.trim().toLowerCase();
+  let o = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(e);
+  if (o) {
+    const n = o[1].length === 3 ? [...o[1]].map((r) => r + r).join("") : o[1];
+    return [0, 2, 4].map((r) => parseInt(n.slice(r, r + 2), 16));
+  }
+  if (o = /^rgba?\(\s*(\d*\.?\d+)[\s,]+(\d*\.?\d+)[\s,]+(\d*\.?\d+)(?:\s*[,/]\s*\d*\.?\d+%?)?\s*\)$/.exec(
+    e
+  ), o) {
+    const n = o.slice(1, 4).map(Number);
+    if (n.every((r) => r <= 255)) return n;
+  }
+  if (o = /^oklch\(\s*(\d*\.?\d+)(%?)\s+(\d*\.?\d+)\s+(\d*\.?\d+)(?:deg)?\s*(?:\/\s*\d*\.?\d+%?\s*)?\)$/.exec(
+    e
+  ), o) {
+    const n = Number(o[1]) / (o[2] ? 100 : 1), r = Number(o[4]);
+    if (n <= 1) return y(d([n, v(n, r, Number(o[3])), r]));
+  }
+  throw new TypeError(`Not a colour Kanto can read: "${t}". Use #rrggbb, rgb() or oklch().`);
+}
+const H = {
+  base: "#5f5dea",
+  hover: "#5856e0",
+  textDark: "#8e97ff",
+  textLight: "#4f30ef",
+  wash: "rgba(111, 116, 246, 0.16)",
+  neutralHue: 278,
+  neutralChroma: 1
+}, P = [
+  { id: "violet", label: "Violet", color: "#5f5dea" },
+  { id: "blue", label: "Blue", color: "#1f6feb" },
+  { id: "teal", label: "Teal", color: "#0d9488" },
+  { id: "green", label: "Green", color: "#16a34a" },
+  { id: "orange", label: "Orange", color: "#ea580c" },
+  { id: "pink", label: "Pink", color: "#db2777" },
+  { id: "slate", label: "Slate", color: "#64748b" }
+], U = [0.3074, 0.018, 16.5], j = [
+  [1, 0, 0],
+  [0.9023, 81e-4, 8.2]
+], F = [244, 244, 245], g = 4.6;
+function z(t) {
+  const [e, o, n] = O(D(t)), r = o < 5e-4 ? 0 : n, a = Math.round(Math.min(1, o / 0.08) * 100) / 100, s = (c) => d([c, v(c, r, o), r]), l = ([c, B, $]) => d([c, B * a, r + $]);
+  let i = Math.min(e, 0.72);
+  for (; i > 0 && h(F, s(i)) < g; ) i -= 25e-4;
+  const m = s(i), f = (c) => [c, E(m, 0.12, c), E(m, 0.16, c)], u = f(l(U));
+  let p = 0.45;
+  for (; p < 1 && u.some((c) => h(s(p), c) < g); )
+    p += 25e-4;
+  const N = j.map(l).flatMap(f);
+  let x = 0.7;
+  for (; x > 0 && N.some((c) => h(s(x), c) < g); )
+    x -= 25e-4;
+  const [_, G, R] = y(m);
+  return {
+    base: b(m),
+    hover: b(s(Math.max(0, i - 0.025))),
+    textDark: b(s(p)),
+    textLight: b(s(x)),
+    wash: `rgba(${_}, ${G}, ${R}, 0.16)`,
+    neutralHue: Math.round(r * 10) / 10,
+    neutralChroma: a
+  };
+}
+function w(t) {
+  return {
+    "--accent-base": t.base,
+    "--accent-hover": t.hover,
+    "--accent-text-dark": t.textDark,
+    "--accent-text-light": t.textLight,
+    "--accent-wash": t.wash,
+    "--neutral-hue": String(t.neutralHue),
+    "--neutral-chroma": String(t.neutralChroma)
+  };
+}
+const V = Object.keys(w(H));
+function k(t, e = document.documentElement) {
+  if (t === null) {
+    for (const o of V) e.style.removeProperty(o);
+    e.dataset.accent === "custom" && delete e.dataset.accent;
+    return;
+  }
+  for (const [o, n] of Object.entries(w(z(t))))
+    e.style.setProperty(o, n);
+  e.dataset.accent ??= "custom";
+}
+const X = [
+  { id: "dark", label: "Dark" },
+  { id: "light", label: "Light" },
+  { id: "auto", label: "Auto" }
+], W = [
+  { id: "kanto", label: "Kanto", family: "'Mulish', system-ui, sans-serif" },
+  {
+    id: "system",
+    label: "System",
+    family: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+  },
+  { id: "inter", label: "Inter", family: "'Inter', system-ui, sans-serif" },
+  { id: "plex", label: "IBM Plex Sans", family: "'IBM Plex Sans', system-ui, sans-serif" },
+  { id: "geist", label: "Geist", family: "'Geist', system-ui, sans-serif" }
+], Y = [
+  { id: "sharp", label: "Sharp" },
+  { id: "default", label: "Default" },
+  { id: "round", label: "Round" }
+], Z = [
+  { id: "compact", label: "Compact" },
+  { id: "default", label: "Default" },
+  { id: "comfortable", label: "Comfortable" }
+], q = [
+  { id: "small", label: "Small" },
+  { id: "default", label: "Default" },
+  { id: "large", label: "Large" }
+], A = {
+  theme: "dark",
+  accent: "violet",
+  font: "kanto",
+  radius: "default",
+  density: "default",
+  textSize: "default"
+}, L = {
+  theme: X,
+  font: W,
+  radius: Y,
+  density: Z,
+  textSize: q
+}, T = Object.keys(L), S = (t) => L[t].map((e) => e.id);
+function J(t, e = document.documentElement) {
+  for (const a of T) {
+    const s = t[a];
+    if (s !== void 0 && !S(a).includes(s))
+      throw new TypeError(`Unknown ${a} "${s}". Use one of: ${S(a).join(", ")}.`);
+  }
+  const o = P.find((a) => a.id === t.accent);
+  t.accent !== void 0 && !o && D(t.accent);
+  const n = e === document.documentElement, r = (a, s) => s === A[a] && (n || a === "theme");
+  for (const a of T) {
+    const s = t[a];
+    s !== void 0 && (r(a, s) ? delete e.dataset[a] : e.dataset[a] = s);
+  }
+  t.accent !== void 0 && (o ? (k(null, e), r("accent", o.id) ? delete e.dataset.accent : e.dataset.accent = o.id) : (delete e.dataset.accent, k(t.accent, e)));
+}
+function Q(t = document.documentElement) {
+  const e = { ...A };
+  for (const r of T) {
+    const a = t.dataset[r];
+    a !== void 0 && S(r).includes(a) && (e[r] = a);
+  }
+  const o = t.style.getPropertyValue("--accent-base").trim(), n = t.dataset.accent;
+  return o ? e.accent = o : n && P.some((r) => r.id === n) && (e.accent = n), e;
+}
 export {
-  mt as KtAlert,
-  r as KtAvatar,
-  p as KtBadge,
-  J as KtBreadcrumb,
-  f as KtButton,
-  c as KtCalendar,
-  n as KtCard,
-  At as KtChart,
-  T as KtCheckbox,
-  i as KtCode,
-  Ct as KtCollapsible,
-  Bt as KtConfirmDialog,
-  I as KtDatePicker,
-  D as KtDragDrop,
-  Pt as KtDropdown,
-  to as KtElement,
-  xt as KtEmptyState,
-  M as KtForm,
-  $ as KtHeader,
-  l as KtIcon,
-  E as KtInput,
-  v as KtInputMenu,
-  u as KtKbd,
-  G as KtLabelInput,
-  Ht as KtMeter,
-  kt as KtModal,
-  Q as KtPageHeader,
-  wt as KtPagination,
-  at as KtProgressBar,
-  R as KtRadio,
-  w as KtRadioGroup,
-  V as KtSegmentedControl,
-  F as KtSelect,
-  ht as KtSidePanel,
-  st as KtSkeleton,
-  K as KtSplitButton,
-  Ft as KtStat,
-  X as KtSubMenuNavigation,
-  Nt as KtTable,
-  Z as KtTabs,
-  N as KtTextarea,
-  qt as KtTimeline,
-  zt as KtTimelineItem,
-  gt as KtToast,
-  dt as KtToastContainer,
-  q as KtToggle,
-  ot as KtToggleButton,
-  et as KtToggleButtonGroup,
-  bt as KtTooltip,
-  Xt as defaultStrings,
-  oo as defineElement,
-  Ot as getIcon,
-  Yt as getStrings,
-  Qt as registerIcon,
-  Ut as registerIcons,
-  Vt as registeredIcons,
-  Zt as resetStrings,
-  _t as setStrings,
-  St as toaster
+  P as KT_ACCENTS,
+  H as KT_DEFAULT_ACCENT,
+  A as KT_DEFAULT_APPEARANCE,
+  Z as KT_DENSITIES,
+  W as KT_FONTS,
+  Y as KT_RADII,
+  q as KT_TEXT_SIZES,
+  X as KT_THEMES,
+  fe as KtAlert,
+  ot as KtAvatar,
+  nt as KtBadge,
+  Yt as KtBreadcrumb,
+  st as KtButton,
+  Tt as KtCalendar,
+  mt as KtCard,
+  Re as KtChart,
+  ht as KtCheckbox,
+  dt as KtCode,
+  Ce as KtCollapsible,
+  De as KtConfirmDialog,
+  yt as KtDateInput,
+  Mt as KtDatePicker,
+  kt as KtDragDrop,
+  we as KtDropdown,
+  so as KtElement,
+  ue as KtEmptyState,
+  vt as KtForm,
+  ae as KtHeader,
+  pt as KtIcon,
+  Pt as KtInput,
+  At as KtInputMenu,
+  bt as KtKbd,
+  Gt as KtLabelInput,
+  $e as KtMeter,
+  Le as KtModal,
+  Nt as KtMultiSelect,
+  qt as KtPageHeader,
+  He as KtPagination,
+  xe as KtProgressBar,
+  Bt as KtRadio,
+  $t as KtRadioGroup,
+  Qt as KtSegmentedControl,
+  Ht as KtSelect,
+  _e as KtSidePanel,
+  Ke as KtSkeleton,
+  lt as KtSplitButton,
+  je as KtStat,
+  ee as KtSubMenuNavigation,
+  ze as KtTable,
+  re as KtTabs,
+  jt as KtTextarea,
+  zt as KtTimeInput,
+  Xe as KtTimeline,
+  We as KtTimelineItem,
+  ge as KtToast,
+  Se as KtToastContainer,
+  Xt as KtToggle,
+  ce as KtToggleButton,
+  ie as KtToggleButtonGroup,
+  Ee as KtTooltip,
+  z as accentPalette,
+  w as accentProperties,
+  h as contrastRatio,
+  eo as defaultStrings,
+  co as defineElement,
+  Ze as getIcon,
+  oo as getStrings,
+  D as parseColor,
+  Q as readAppearance,
+  qe as registerIcon,
+  Je as registerIcons,
+  Qe as registeredIcons,
+  ro as resetStrings,
+  k as setAccent,
+  J as setAppearance,
+  no as setStrings,
+  Ie as toaster
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/theme/accent.ts","../src/theme/appearance.ts"],"sourcesContent":["/**\n * The accent colour: one colour in, every input the token layer reads out,\n * each at the contrast Kanto promises.\n *\n * Self-contained on purpose — no imports — so `scripts/generate-accents.js`\n * runs it straight from source under Node.\n */\n\n/** An sRGB colour, each channel 0–255. */\nexport type KtRgb = readonly [number, number, number];\ntype Oklch = readonly [number, number, number]; // L 0–1, C, H in degrees\n\nconst toLinear = (c: number) => {\n  const v = c / 255;\n  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n};\nconst fromLinear = (c: number) =>\n  255 * (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);\n\nfunction toOklch([r, g, b]: KtRgb): Oklch {\n  const [R, G, B] = [r, g, b].map(toLinear) as [number, number, number];\n  const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B);\n  const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B);\n  const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B);\n  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;\n  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;\n  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;\n  return [L, Math.hypot(a, bb), ((Math.atan2(bb, a) * 180) / Math.PI + 360) % 360];\n}\n\n/** Unclamped: a channel outside 0–255 means the colour is outside sRGB. */\nfunction fromOklch([L, C, H]: Oklch): KtRgb {\n  const a = C * Math.cos((H * Math.PI) / 180);\n  const b = C * Math.sin((H * Math.PI) / 180);\n  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;\n  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;\n  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;\n  return [\n    fromLinear(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),\n    fromLinear(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),\n    fromLinear(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),\n  ];\n}\n\nconst inGamut = (rgb: KtRgb) => rgb.every((c) => c >= -0.5 && c <= 255.5);\n\n/** The most chroma sRGB holds at this lightness and hue, up to `limit`. */\nfunction fitChroma(L: number, H: number, limit: number): number {\n  if (inGamut(fromOklch([L, limit, H]))) return limit;\n  let low = 0;\n  let high = limit;\n  for (let i = 0; i < 24; i += 1) {\n    const mid = (low + high) / 2;\n    if (inGamut(fromOklch([L, mid, H]))) low = mid;\n    else high = mid;\n  }\n  return low;\n}\n\nconst round255 = (rgb: KtRgb): KtRgb =>\n  rgb.map((c) => Math.min(255, Math.max(0, Math.round(c)))) as unknown as KtRgb;\n\nfunction luminance(rgb: KtRgb): number {\n  const [r, g, b] = rgb.map(toLinear) as [number, number, number];\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\n/** The WCAG contrast ratio of two colours. */\nexport function contrastRatio(a: KtRgb, b: KtRgb): number {\n  const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];\n  return (high + 0.05) / (low + 0.05);\n}\n\n/** `top` at `alpha` over `bottom`, blended in sRGB as browsers paint it. */\nconst over = (top: KtRgb, alpha: number, bottom: KtRgb): KtRgb =>\n  top.map((c, i) => c * alpha + bottom[i]! * (1 - alpha)) as unknown as KtRgb;\n\nconst hex = (rgb: KtRgb) =>\n  `#${round255(rgb)\n    .map((c) => c.toString(16).padStart(2, '0'))\n    .join('')}`;\n\n/** Reads `#rgb`, `#rrggbb`, `rgb()`/`rgba()` and `oklch()`; throws on anything else. */\nexport function parseColor(input: string): KtRgb {\n  const text = input.trim().toLowerCase();\n  let match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(text);\n  if (match) {\n    const digits = match[1]!.length === 3 ? [...match[1]!].map((d) => d + d).join('') : match[1]!;\n    return [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16)) as unknown as KtRgb;\n  }\n  match =\n    /^rgba?\\(\\s*(\\d*\\.?\\d+)[\\s,]+(\\d*\\.?\\d+)[\\s,]+(\\d*\\.?\\d+)(?:\\s*[,/]\\s*\\d*\\.?\\d+%?)?\\s*\\)$/.exec(\n      text,\n    );\n  if (match) {\n    const rgb = match.slice(1, 4).map(Number) as unknown as KtRgb;\n    if (rgb.every((c) => c <= 255)) return rgb;\n  }\n  match =\n    /^oklch\\(\\s*(\\d*\\.?\\d+)(%?)\\s+(\\d*\\.?\\d+)\\s+(\\d*\\.?\\d+)(?:deg)?\\s*(?:\\/\\s*\\d*\\.?\\d+%?\\s*)?\\)$/.exec(\n      text,\n    );\n  if (match) {\n    const L = Number(match[1]) / (match[2] ? 100 : 1);\n    const H = Number(match[4]);\n    if (L <= 1) return round255(fromOklch([L, fitChroma(L, H, Number(match[3])), H]));\n  }\n  throw new TypeError(`Not a colour Kanto can read: \"${input}\". Use #rrggbb, rgb() or oklch().`);\n}\n\n/** What the token layer reads for an accent. */\nexport interface KtAccentPalette {\n  /** Solid fill; carries white text at 4.5:1 or more. */\n  readonly base: string;\n  /** Fill on hover, a step darker. */\n  readonly hover: string;\n  /** The accent as text or an icon in the dark theme. */\n  readonly textDark: string;\n  /** The accent as text or an icon in the light theme. */\n  readonly textLight: string;\n  /** The translucent wash behind secondary buttons on hover: the fill at 16%. */\n  readonly wash: string;\n  /** The hue, in degrees, the neutral ramp is tinted with. */\n  readonly neutralHue: number;\n  /** How much of the ramp's tint to keep: 0 for a grey accent, 1 for a vivid one. */\n  readonly neutralChroma: number;\n}\n\n/** The violet Kanto ships, as literal values: what the tokens fall back to. */\nexport const KT_DEFAULT_ACCENT: KtAccentPalette = {\n  base: '#5f5dea',\n  hover: '#5856e0',\n  textDark: '#8e97ff',\n  textLight: '#4f30ef',\n  wash: 'rgba(111, 116, 246, 0.16)',\n  neutralHue: 278,\n  neutralChroma: 1,\n};\n\n/** The presets `accents.css` carries, each from a reference colour. */\nexport const KT_ACCENTS: readonly { id: string; label: string; color: string }[] = [\n  { id: 'violet', label: 'Violet', color: '#5f5dea' },\n  { id: 'blue', label: 'Blue', color: '#1f6feb' },\n  { id: 'teal', label: 'Teal', color: '#0d9488' },\n  { id: 'green', label: 'Green', color: '#16a34a' },\n  { id: 'orange', label: 'Orange', color: '#ea580c' },\n  { id: 'pink', label: 'Pink', color: '#db2777' },\n  { id: 'slate', label: 'Slate', color: '#64748b' },\n];\n\n/** The neutral steps text reads on, as [L, C, hue offset] — `--color-dark-20` per theme. */\nconst DARK_GROUND: Oklch = [0.3074, 0.018, 16.5];\nconst LIGHT_GROUNDS: Oklch[] = [\n  [1, 0, 0],\n  [0.9023, 0.0081, 8.2],\n];\nconst WHITE_TEXT: KtRgb = [244, 244, 245];\n/** 4.5:1, with room for the rounding to hex and the browser's own. */\nconst TARGET = 4.6;\n\n/** Every token input for `color`, solved in OKLCH for the contrast Kanto promises. */\nexport function accentPalette(color: string): KtAccentPalette {\n  const [inL, inC, inH] = toOklch(parseColor(color));\n  const hue = inC < 0.0005 ? 0 : inH;\n  const neutralChroma = Math.round(Math.min(1, inC / 0.08) * 100) / 100;\n  const at = (L: number): KtRgb => fromOklch([L, fitChroma(L, hue, inC), hue]);\n  const ground = ([L, C, offset]: Oklch): KtRgb => fromOklch([L, C * neutralChroma, hue + offset]);\n\n  // The lightest fill, at or below the colour's own lightness, that white reads on.\n  let baseL = Math.min(inL, 0.72);\n  while (baseL > 0 && contrastRatio(WHITE_TEXT, at(baseL)) < TARGET) baseL -= 0.0025;\n  const base = at(baseL);\n\n  // Dark theme text: the darkest step that reads, which keeps the most colour.\n  // Accent text sits on the surfaces, on its own 12% tint and on the 16%\n  // wash behind a hovered secondary button.\n  const tints = (g: KtRgb) => [g, over(base, 0.12, g), over(base, 0.16, g)];\n  const darkGrounds = tints(ground(DARK_GROUND));\n  let darkL = 0.45;\n  while (darkL < 1 && darkGrounds.some((g) => contrastRatio(at(darkL), g) < TARGET)) {\n    darkL += 0.0025;\n  }\n\n  // Light theme text: the lightest step that reads.\n  const lightGrounds = LIGHT_GROUNDS.map(ground).flatMap(tints);\n  let lightL = 0.7;\n  while (lightL > 0 && lightGrounds.some((g) => contrastRatio(at(lightL), g) < TARGET)) {\n    lightL -= 0.0025;\n  }\n\n  const [r, g, b] = round255(base);\n  return {\n    base: hex(base),\n    hover: hex(at(Math.max(0, baseL - 0.025))),\n    textDark: hex(at(darkL)),\n    textLight: hex(at(lightL)),\n    wash: `rgba(${r}, ${g}, ${b}, 0.16)`,\n    neutralHue: Math.round(hue * 10) / 10,\n    neutralChroma,\n  };\n}\n\n/** The custom properties a palette sets — what `accents.css` and `setAccent` write. */\nexport function accentProperties(palette: KtAccentPalette): Record<string, string> {\n  return {\n    '--accent-base': palette.base,\n    '--accent-hover': palette.hover,\n    '--accent-text-dark': palette.textDark,\n    '--accent-text-light': palette.textLight,\n    '--accent-wash': palette.wash,\n    '--neutral-hue': String(palette.neutralHue),\n    '--neutral-chroma': String(palette.neutralChroma),\n  };\n}\n\nconst INPUTS = Object.keys(accentProperties(KT_DEFAULT_ACCENT));\n\n/**\n * Themes `root` — the page by default — with any colour; `null` takes it off,\n * back to the `data-accent` preset or the default.\n *\n * The inputs go on as inline custom properties. The element also needs a\n * `data-accent` attribute for the token layer to re-read them there: a preset\n * already on it is kept, otherwise it gets `data-accent=\"custom\"`.\n */\nexport function setAccent(\n  color: string | null,\n  root: HTMLElement = document.documentElement,\n): void {\n  if (color === null) {\n    for (const name of INPUTS) root.style.removeProperty(name);\n    if (root.dataset['accent'] === 'custom') delete root.dataset['accent'];\n    return;\n  }\n  for (const [name, value] of Object.entries(accentProperties(accentPalette(color)))) {\n    root.style.setProperty(name, value);\n  }\n  // A preset already there stays: the inline inputs win over it, and it is\n  // what setAccent(null) goes back to.\n  root.dataset['accent'] ??= 'custom';\n}\n","/**\n * The appearance: theme, accent, font, corners, density and text size, as\n * the data attributes the token layer reads.\n */\nimport { KT_ACCENTS, parseColor, setAccent } from './accent.js';\n\nexport type KtTheme = 'dark' | 'light' | 'auto';\nexport type KtFont = 'kanto' | 'system' | 'inter' | 'plex' | 'geist';\nexport type KtRadius = 'sharp' | 'default' | 'round';\nexport type KtDensity = 'compact' | 'default' | 'comfortable';\nexport type KtTextSize = 'small' | 'default' | 'large';\n\n/** Every setting is optional: setAppearance changes only those given. */\nexport interface KtAppearance {\n  theme?: KtTheme;\n  /** A preset id from `KT_ACCENTS`, or any colour `setAccent` reads. */\n  accent?: string;\n  font?: KtFont;\n  radius?: KtRadius;\n  density?: KtDensity;\n  textSize?: KtTextSize;\n}\n\ninterface KtChoice<T extends string> {\n  readonly id: T;\n  readonly label: string;\n}\n\nexport const KT_THEMES: readonly KtChoice<KtTheme>[] = [\n  { id: 'dark', label: 'Dark' },\n  { id: 'light', label: 'Light' },\n  { id: 'auto', label: 'Auto' },\n];\n\n/** The fonts, each with the stack it sets — for showing a name in its face. */\nexport const KT_FONTS: readonly (KtChoice<KtFont> & { readonly family: string })[] = [\n  { id: 'kanto', label: 'Kanto', family: \"'Mulish', system-ui, sans-serif\" },\n  {\n    id: 'system',\n    label: 'System',\n    family: \"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif\",\n  },\n  { id: 'inter', label: 'Inter', family: \"'Inter', system-ui, sans-serif\" },\n  { id: 'plex', label: 'IBM Plex Sans', family: \"'IBM Plex Sans', system-ui, sans-serif\" },\n  { id: 'geist', label: 'Geist', family: \"'Geist', system-ui, sans-serif\" },\n];\n\nexport const KT_RADII: readonly KtChoice<KtRadius>[] = [\n  { id: 'sharp', label: 'Sharp' },\n  { id: 'default', label: 'Default' },\n  { id: 'round', label: 'Round' },\n];\n\nexport const KT_DENSITIES: readonly KtChoice<KtDensity>[] = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'default', label: 'Default' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport const KT_TEXT_SIZES: readonly KtChoice<KtTextSize>[] = [\n  { id: 'small', label: 'Small' },\n  { id: 'default', label: 'Default' },\n  { id: 'large', label: 'Large' },\n];\n\nexport const KT_DEFAULT_APPEARANCE: Required<KtAppearance> = {\n  theme: 'dark',\n  accent: 'violet',\n  font: 'kanto',\n  radius: 'default',\n  density: 'default',\n  textSize: 'default',\n};\n\n/** Each attribute-backed setting, by its `dataset` key (`textSize` is `data-text-size`). */\nconst CHOICES = {\n  theme: KT_THEMES,\n  font: KT_FONTS,\n  radius: KT_RADII,\n  density: KT_DENSITIES,\n  textSize: KT_TEXT_SIZES,\n} as const;\ntype Keyed = keyof typeof CHOICES;\nconst KEYS = Object.keys(CHOICES) as Keyed[];\n\nconst ids = (key: Keyed) => CHOICES[key].map((choice) => choice.id as string);\n\n/**\n * Applies `appearance` to `root` — the page by default. A setting at its\n * default removes its attribute. Everything is checked first, so an unknown\n * value throws a TypeError with nothing changed.\n */\nexport function setAppearance(\n  appearance: KtAppearance,\n  root: HTMLElement = document.documentElement,\n): void {\n  for (const key of KEYS) {\n    const value = appearance[key];\n    if (value !== undefined && !ids(key).includes(value)) {\n      throw new TypeError(`Unknown ${key} \"${value}\". Use one of: ${ids(key).join(', ')}.`);\n    }\n  }\n  const preset = KT_ACCENTS.find((accent) => accent.id === appearance.accent);\n  if (appearance.accent !== undefined && !preset) parseColor(appearance.accent);\n\n  // On the page a default is no attribute at all. On a container it is\n  // written out, so the container can go back to it inside a page that\n  // changed it — except the dark theme, which Kanto only has at the root.\n  const page = root === document.documentElement;\n  const clears = (key: Keyed | 'accent', value: string) =>\n    value === KT_DEFAULT_APPEARANCE[key] && (page || key === 'theme');\n\n  for (const key of KEYS) {\n    const value = appearance[key];\n    if (value === undefined) continue;\n    if (clears(key, value)) delete root.dataset[key];\n    else root.dataset[key] = value;\n  }\n  if (appearance.accent === undefined) return;\n  if (preset) {\n    setAccent(null, root);\n    if (clears('accent', preset.id)) delete root.dataset['accent'];\n    else root.dataset['accent'] = preset.id;\n  } else {\n    delete root.dataset['accent'];\n    setAccent(appearance.accent, root);\n  }\n}\n\n/** The appearance `root` shows: its attributes, with defaults for the rest. */\nexport function readAppearance(\n  root: HTMLElement = document.documentElement,\n): Required<KtAppearance> {\n  const read = { ...KT_DEFAULT_APPEARANCE } as Record<keyof KtAppearance, string>;\n  for (const key of KEYS) {\n    const value = root.dataset[key];\n    if (value !== undefined && ids(key).includes(value)) read[key] = value;\n  }\n  const custom = root.style.getPropertyValue('--accent-base').trim();\n  const preset = root.dataset['accent'];\n  if (custom) read.accent = custom;\n  else if (preset && KT_ACCENTS.some((accent) => accent.id === preset)) read.accent = preset;\n  return read as Required<KtAppearance>;\n}\n"],"names":["toLinear","c","v","fromLinear","toOklch","r","g","b","R","G","B","l","m","s","L","a","bb","fromOklch","C","H","inGamut","rgb","fitChroma","limit","low","high","i","mid","round255","luminance","contrastRatio","x","y","over","top","alpha","bottom","hex","parseColor","input","text","match","digits","d","KT_DEFAULT_ACCENT","KT_ACCENTS","DARK_GROUND","LIGHT_GROUNDS","WHITE_TEXT","TARGET","accentPalette","color","inL","inC","inH","hue","neutralChroma","at","ground","offset","baseL","base","tints","darkGrounds","darkL","lightGrounds","lightL","accentProperties","palette","INPUTS","setAccent","root","name","value","KT_THEMES","KT_FONTS","KT_RADII","KT_DENSITIES","KT_TEXT_SIZES","KT_DEFAULT_APPEARANCE","CHOICES","KEYS","ids","key","choice","setAppearance","appearance","preset","accent","page","clears","readAppearance","read","custom"],"mappings":"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"}

package/dist/internal/floating.d.ts

@@ -35,6 +35,8 @@ export declare class FloatingController implements ReactiveController {
     private readonly options;
     private open;
     private frame;
+    /** Places the panel again when its size changes — content drawn after it opened. */
+    private resizeObserver;
     constructor(host: ReactiveControllerHost, options: FloatingOptions);
     /**
      * Call from the host's `updated()` with whether the panel is open. While it
@@ -42,6 +44,7 @@ export declare class FloatingController implements ReactiveController {
      * its size.
      */
     sync(open: boolean): void;
+    private unobserve;
     hostDisconnected(): void;
     private follow;
     private place;