kanto-ds 1.7.0 → 1.9.0

package/dist/index.js.map

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAW,CAACC,MAAc;AAC9B,QAAMC,IAAID,IAAI;AACd,SAAOC,KAAK,UAAUA,IAAI,UAAUA,IAAI,SAAS,UAAU;AAC7D,GACMC,IAAa,CAACF,MAClB,OAAOA,KAAK,WAAY,QAAQA,IAAI,QAAQA,MAAM,IAAI,OAAO;AAE/D,SAASG,EAAQ,CAACC,GAAGC,GAAGC,CAAC,GAAiB;AACxC,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAI,CAACL,GAAGC,GAAGC,CAAC,EAAE,IAAIP,CAAQ,GAClCW,IAAI,KAAK,KAAK,eAAeH,IAAI,eAAeC,IAAI,eAAeC,CAAC,GACpEE,IAAI,KAAK,KAAK,eAAeJ,IAAI,eAAeC,IAAI,eAAeC,CAAC,GACpEG,IAAI,KAAK,KAAK,eAAeL,IAAI,eAAeC,IAAI,eAAeC,CAAC,GACpEI,IAAI,eAAeH,IAAI,cAAcC,IAAI,eAAeC,GACxDE,IAAI,eAAeJ,IAAI,cAAcC,IAAI,eAAeC,GACxDG,IAAK,eAAeL,IAAI,eAAeC,IAAI,cAAcC;AAC/D,SAAO,CAACC,GAAG,KAAK,MAAMC,GAAGC,CAAE,IAAK,KAAK,MAAMA,GAAID,CAAC,IAAI,MAAO,KAAK,KAAK,OAAO,GAAG;AACjF;AAGA,SAASE,EAAU,CAACH,GAAGI,GAAGC,CAAC,GAAiB;AAC1C,QAAMJ,IAAIG,IAAI,KAAK,IAAKC,IAAI,KAAK,KAAM,GAAG,GACpCZ,IAAIW,IAAI,KAAK,IAAKC,IAAI,KAAK,KAAM,GAAG,GACpCR,KAAKG,IAAI,eAAeC,IAAI,eAAeR,MAAM,GACjDK,KAAKE,IAAI,eAAeC,IAAI,eAAeR,MAAM,GACjDM,KAAKC,IAAI,eAAeC,IAAI,cAAcR,MAAM;AACtD,SAAO;AAAA,IACLJ,EAAW,eAAeQ,IAAI,eAAeC,IAAI,eAAeC,CAAC;AAAA,IACjEV,EAAW,gBAAgBQ,IAAI,eAAeC,IAAI,eAAeC,CAAC;AAAA,IAClEV,EAAW,gBAAgBQ,IAAI,eAAeC,IAAI,cAAcC,CAAC;AAAA,EAAA;AAErE;AAEA,MAAMO,IAAU,CAACC,MAAeA,EAAI,MAAM,CAACpB,MAAMA,KAAK,QAAQA,KAAK,KAAK;AAGxE,SAASqB,EAAUR,GAAWK,GAAWI,GAAuB;AAC9D,MAAIH,EAAQH,EAAU,CAACH,GAAGS,GAAOJ,CAAC,CAAC,CAAC,EAAG,QAAOI;AAC9C,MAAIC,IAAM,GACNC,IAAOF;AACX,WAASG,IAAI,GAAGA,IAAI,IAAIA,KAAK,GAAG;AAC9B,UAAMC,KAAOH,IAAMC,KAAQ;AAC3B,IAAIL,EAAQH,EAAU,CAACH,GAAGa,GAAKR,CAAC,CAAC,CAAC,IAAGK,IAAMG,IACtCF,IAAOE;AAAA,EACd;AACA,SAAOH;AACT;AAEA,MAAMI,IAAW,CAACP,MAChBA,EAAI,IAAI,CAACpB,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAC,CAAC,CAAC,CAAC;AAE1D,SAAS4B,EAAUR,GAAoB;AACrC,QAAM,CAAChB,GAAGC,GAAGC,CAAC,IAAIc,EAAI,IAAIrB,CAAQ;AAClC,SAAO,SAASK,IAAI,SAASC,IAAI,SAASC;AAC5C;AAGO,SAASuB,EAAcf,GAAUR,GAAkB;AACxD,QAAM,CAACkB,GAAMD,CAAG,IAAI,CAACK,EAAUd,CAAC,GAAGc,EAAUtB,CAAC,CAAC,EAAE,KAAK,CAACwB,GAAGC,MAAMA,IAAID,CAAC;AACrE,UAAQN,IAAO,SAASD,IAAM;AAChC;AAGA,MAAMS,IAAO,CAACC,GAAYC,GAAeC,MACvCF,EAAI,IAAI,CAACjC,GAAGyB,MAAMzB,IAAIkC,IAAQC,EAAOV,CAAC,KAAM,IAAIS,EAAM,GAElDE,IAAM,CAAChB,MACX,IAAIO,EAASP,CAAG,EACb,IAAI,CAACpB,MAAMA,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAC1C,KAAK,EAAE,CAAC;AAGN,SAASqC,EAAWC,GAAsB;AAC/C,QAAMC,IAAOD,EAAM,KAAA,EAAO,YAAA;AAC1B,MAAIE,IAAQ,+BAA+B,KAAKD,CAAI;AACpD,MAAIC,GAAO;AACT,UAAMC,IAASD,EAAM,CAAC,EAAG,WAAW,IAAI,CAAC,GAAGA,EAAM,CAAC,CAAE,EAAE,IAAI,CAACE,MAAMA,IAAIA,CAAC,EAAE,KAAK,EAAE,IAAIF,EAAM,CAAC;AAC3F,WAAO,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAACf,MAAM,SAASgB,EAAO,MAAMhB,GAAGA,IAAI,CAAC,GAAG,EAAE,CAAC;AAAA,EAClE;AAKA,MAJAe,IACE,2FAA2F;AAAA,IACzFD;AAAA,EAAA,GAEAC,GAAO;AACT,UAAMpB,IAAMoB,EAAM,MAAM,GAAG,CAAC,EAAE,IAAI,MAAM;AACxC,QAAIpB,EAAI,MAAM,CAACpB,MAAMA,KAAK,GAAG,EAAG,QAAOoB;AAAA,EACzC;AAKA,MAJAoB,IACE,+FAA+F;AAAA,IAC7FD;AAAA,EAAA,GAEAC,GAAO;AACT,UAAM3B,IAAI,OAAO2B,EAAM,CAAC,CAAC,KAAKA,EAAM,CAAC,IAAI,MAAM,IACzCtB,IAAI,OAAOsB,EAAM,CAAC,CAAC;AACzB,QAAI3B,KAAK,EAAG,QAAOc,EAASX,EAAU,CAACH,GAAGQ,EAAUR,GAAGK,GAAG,OAAOsB,EAAM,CAAC,CAAC,CAAC,GAAGtB,CAAC,CAAC,CAAC;AAAA,EAClF;AACA,QAAM,IAAI,UAAU,iCAAiCoB,CAAK,mCAAmC;AAC/F;AAqBO,MAAMK,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,eAAe;AACjB,GAGaC,IAAsE;AAAA,EACjF,EAAE,IAAI,UAAU,OAAO,UAAU,OAAO,UAAA;AAAA,EACxC,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,UAAA;AAAA,EACpC,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,UAAA;AAAA,EACpC,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,UAAA;AAAA,EACtC,EAAE,IAAI,UAAU,OAAO,UAAU,OAAO,UAAA;AAAA,EACxC,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,UAAA;AAAA,EACpC,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,UAAA;AACxC,GAGMC,IAAqB,CAAC,QAAQ,OAAO,IAAI,GACzCC,IAAyB;AAAA,EAC7B,CAAC,GAAG,GAAG,CAAC;AAAA,EACR,CAAC,QAAQ,OAAQ,GAAG;AACtB,GACMC,IAAoB,CAAC,KAAK,KAAK,GAAG,GAElCC,IAAS;AAGR,SAASC,EAAcC,GAAgC;AAC5D,QAAM,CAACC,GAAKC,GAAKC,CAAG,IAAIlD,EAAQkC,EAAWa,CAAK,CAAC,GAC3CI,IAAMF,IAAM,OAAS,IAAIC,GACzBE,IAAgB,KAAK,MAAM,KAAK,IAAI,GAAGH,IAAM,IAAI,IAAI,GAAG,IAAI,KAC5DI,IAAK,CAAC3C,MAAqBG,EAAU,CAACH,GAAGQ,EAAUR,GAAGyC,GAAKF,CAAG,GAAGE,CAAG,CAAC,GACrEG,IAAS,CAAC,CAAC5C,GAAGI,GAAGyC,CAAM,MAAoB1C,EAAU,CAACH,GAAGI,IAAIsC,GAAeD,IAAMI,CAAM,CAAC;AAG/F,MAAIC,IAAQ,KAAK,IAAIR,GAAK,IAAI;AAC9B,SAAOQ,IAAQ,KAAK9B,EAAckB,GAAYS,EAAGG,CAAK,CAAC,IAAIX,IAAQ,CAAAW,KAAS;AAC5E,QAAMC,IAAOJ,EAAGG,CAAK,GAKfE,IAAQ,CAACxD,MAAa,CAACA,GAAG2B,EAAK4B,GAAM,MAAMvD,CAAC,GAAG2B,EAAK4B,GAAM,MAAMvD,CAAC,CAAC,GAClEyD,IAAcD,EAAMJ,EAAOZ,CAAW,CAAC;AAC7C,MAAIkB,IAAQ;AACZ,SAAOA,IAAQ,KAAKD,EAAY,KAAK,CAACzD,MAAMwB,EAAc2B,EAAGO,CAAK,GAAG1D,CAAC,IAAI2C,CAAM;AAC9E,IAAAe,KAAS;AAIX,QAAMC,IAAelB,EAAc,IAAIW,CAAM,EAAE,QAAQI,CAAK;AAC5D,MAAII,IAAS;AACb,SAAOA,IAAS,KAAKD,EAAa,KAAK,CAAC3D,MAAMwB,EAAc2B,EAAGS,CAAM,GAAG5D,CAAC,IAAI2C,CAAM;AACjF,IAAAiB,KAAU;AAGZ,QAAM,CAAC7D,GAAGC,GAAGC,CAAC,IAAIqB,EAASiC,CAAI;AAC/B,SAAO;AAAA,IACL,MAAMxB,EAAIwB,CAAI;AAAA,IACd,OAAOxB,EAAIoB,EAAG,KAAK,IAAI,GAAGG,IAAQ,KAAK,CAAC,CAAC;AAAA,IACzC,UAAUvB,EAAIoB,EAAGO,CAAK,CAAC;AAAA,IACvB,WAAW3B,EAAIoB,EAAGS,CAAM,CAAC;AAAA,IACzB,MAAM,QAAQ7D,CAAC,KAAKC,CAAC,KAAKC,CAAC;AAAA,IAC3B,YAAY,KAAK,MAAMgD,IAAM,EAAE,IAAI;AAAA,IACnC,eAAAC;AAAA,EAAA;AAEJ;AAGO,SAASW,EAAiBC,GAAkD;AACjF,SAAO;AAAA,IACL,iBAAiBA,EAAQ;AAAA,IACzB,kBAAkBA,EAAQ;AAAA,IAC1B,sBAAsBA,EAAQ;AAAA,IAC9B,uBAAuBA,EAAQ;AAAA,IAC/B,iBAAiBA,EAAQ;AAAA,IACzB,iBAAiB,OAAOA,EAAQ,UAAU;AAAA,IAC1C,oBAAoB,OAAOA,EAAQ,aAAa;AAAA,EAAA;AAEpD;AAEA,MAAMC,IAAS,OAAO,KAAKF,EAAiBvB,CAAiB,CAAC;AAUvD,SAAS0B,EACdnB,GACAoB,IAAoB,SAAS,iBACvB;AACN,MAAIpB,MAAU,MAAM;AAClB,eAAWqB,KAAQH,EAAQ,CAAAE,EAAK,MAAM,eAAeC,CAAI;AACzD,IAAID,EAAK,QAAQ,WAAc,YAAU,OAAOA,EAAK,QAAQ;AAC7D;AAAA,EACF;AACA,aAAW,CAACC,GAAMC,CAAK,KAAK,OAAO,QAAQN,EAAiBjB,EAAcC,CAAK,CAAC,CAAC;AAC/E,IAAAoB,EAAK,MAAM,YAAYC,GAAMC,CAAK;AAIpC,EAAAF,EAAK,QAAQ,WAAc;AAC7B;ACpNO,MAAMG,IAA0C;AAAA,EACrD,EAAE,IAAI,QAAQ,OAAO,OAAA;AAAA,EACrB,EAAE,IAAI,SAAS,OAAO,QAAA;AAAA,EACtB,EAAE,IAAI,QAAQ,OAAO,OAAA;AACvB,GAGaC,IAAwE;AAAA,EACnF,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,kCAAA;AAAA,EACvC;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,iCAAA;AAAA,EACvC,EAAE,IAAI,QAAQ,OAAO,iBAAiB,QAAQ,yCAAA;AAAA,EAC9C,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,iCAAA;AACzC,GAEaC,IAA0C;AAAA,EACrD,EAAE,IAAI,SAAS,OAAO,QAAA;AAAA,EACtB,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,SAAS,OAAO,QAAA;AACxB,GAEaC,IAA+C;AAAA,EAC1D,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,eAAe,OAAO,cAAA;AAC9B,GAEaC,IAAiD;AAAA,EAC5D,EAAE,IAAI,SAAS,OAAO,QAAA;AAAA,EACtB,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,SAAS,OAAO,QAAA;AACxB,GAEaC,IAAgD;AAAA,EAC3D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AACZ,GAGMC,IAAU;AAAA,EACd,OAAON;AAAA,EACP,MAAMC;AAAA,EACN,QAAQC;AAAA,EACR,SAASC;AAAA,EACT,UAAUC;AACZ,GAEMG,IAAO,OAAO,KAAKD,CAAO,GAE1BE,IAAM,CAACC,MAAeH,EAAQG,CAAG,EAAE,IAAI,CAACC,MAAWA,EAAO,EAAY;AAOrE,SAASC,EACdC,GACAf,IAAoB,SAAS,iBACvB;AACN,aAAWY,KAAOF,GAAM;AACtB,UAAMR,IAAQa,EAAWH,CAAG;AAC5B,QAAIV,MAAU,UAAa,CAACS,EAAIC,CAAG,EAAE,SAASV,CAAK;AACjD,YAAM,IAAI,UAAU,WAAWU,CAAG,KAAKV,CAAK,kBAAkBS,EAAIC,CAAG,EAAE,KAAK,IAAI,CAAC,GAAG;AAAA,EAExF;AACA,QAAMI,IAAS1C,EAAW,KAAK,CAAC2C,MAAWA,EAAO,OAAOF,EAAW,MAAM;AAC1E,EAAIA,EAAW,WAAW,UAAa,CAACC,KAAQjD,EAAWgD,EAAW,MAAM;AAK5E,QAAMG,IAAOlB,MAAS,SAAS,iBACzBmB,IAAS,CAACP,GAAuBV,MACrCA,MAAUM,EAAsBI,CAAG,MAAMM,KAAQN,MAAQ;AAE3D,aAAWA,KAAOF,GAAM;AACtB,UAAMR,IAAQa,EAAWH,CAAG;AAC5B,IAAIV,MAAU,WACViB,EAAOP,GAAKV,CAAK,IAAG,OAAOF,EAAK,QAAQY,CAAG,IAC1CZ,EAAK,QAAQY,CAAG,IAAIV;AAAA,EAC3B;AACA,EAAIa,EAAW,WAAW,WACtBC,KACFjB,EAAU,MAAMC,CAAI,GAChBmB,EAAO,UAAUH,EAAO,EAAE,IAAG,OAAOhB,EAAK,QAAQ,SAChDA,EAAK,QAAQ,SAAYgB,EAAO,OAErC,OAAOhB,EAAK,QAAQ,QACpBD,EAAUgB,EAAW,QAAQf,CAAI;AAErC;AAGO,SAASoB,EACdpB,IAAoB,SAAS,iBACL;AACxB,QAAMqB,IAAO,EAAE,GAAGb,EAAA;AAClB,aAAWI,KAAOF,GAAM;AACtB,UAAMR,IAAQF,EAAK,QAAQY,CAAG;AAC9B,IAAIV,MAAU,UAAaS,EAAIC,CAAG,EAAE,SAASV,CAAK,MAAGmB,EAAKT,CAAG,IAAIV;AAAA,EACnE;AACA,QAAMoB,IAAStB,EAAK,MAAM,iBAAiB,eAAe,EAAE,KAAA,GACtDgB,IAAShB,EAAK,QAAQ;AAC5B,SAAIsB,MAAa,SAASA,IACjBN,KAAU1C,EAAW,KAAK,CAAC2C,MAAWA,EAAO,OAAOD,CAAM,MAAGK,EAAK,SAASL,IAC7EK;AACT;"}
+{"version":3,"file":"index.js","sources":["../src/theme/appearance.ts"],"sourcesContent":["/**\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":["KT_THEMES","KT_FONTS","KT_RADII","KT_DENSITIES","KT_TEXT_SIZES","KT_DEFAULT_APPEARANCE","CHOICES","KEYS","ids","key","choice","setAppearance","appearance","root","value","preset","KT_ACCENTS","accent","parseColor","page","clears","setAccent","readAppearance","read","custom"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAMA,IAA0C;AAAA,EACrD,EAAE,IAAI,QAAQ,OAAO,OAAA;AAAA,EACrB,EAAE,IAAI,SAAS,OAAO,QAAA;AAAA,EACtB,EAAE,IAAI,QAAQ,OAAO,OAAA;AACvB,GAGaC,IAAwE;AAAA,EACnF,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,kCAAA;AAAA,EACvC;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,iCAAA;AAAA,EACvC,EAAE,IAAI,QAAQ,OAAO,iBAAiB,QAAQ,yCAAA;AAAA,EAC9C,EAAE,IAAI,SAAS,OAAO,SAAS,QAAQ,iCAAA;AACzC,GAEaC,IAA0C;AAAA,EACrD,EAAE,IAAI,SAAS,OAAO,QAAA;AAAA,EACtB,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,SAAS,OAAO,QAAA;AACxB,GAEaC,IAA+C;AAAA,EAC1D,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,eAAe,OAAO,cAAA;AAC9B,GAEaC,IAAiD;AAAA,EAC5D,EAAE,IAAI,SAAS,OAAO,QAAA;AAAA,EACtB,EAAE,IAAI,WAAW,OAAO,UAAA;AAAA,EACxB,EAAE,IAAI,SAAS,OAAO,QAAA;AACxB,GAEaC,IAAgD;AAAA,EAC3D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AACZ,GAGMC,IAAU;AAAA,EACd,OAAON;AAAA,EACP,MAAMC;AAAA,EACN,QAAQC;AAAA,EACR,SAASC;AAAA,EACT,UAAUC;AACZ,GAEMG,IAAO,OAAO,KAAKD,CAAO,GAE1BE,IAAM,CAACC,MAAeH,EAAQG,CAAG,EAAE,IAAI,CAACC,MAAWA,EAAO,EAAY;AAOrE,SAASC,EACdC,GACAC,IAAoB,SAAS,iBACvB;AACN,aAAWJ,KAAOF,GAAM;AACtB,UAAMO,IAAQF,EAAWH,CAAG;AAC5B,QAAIK,MAAU,UAAa,CAACN,EAAIC,CAAG,EAAE,SAASK,CAAK;AACjD,YAAM,IAAI,UAAU,WAAWL,CAAG,KAAKK,CAAK,kBAAkBN,EAAIC,CAAG,EAAE,KAAK,IAAI,CAAC,GAAG;AAAA,EAExF;AACA,QAAMM,IAASC,EAAW,KAAK,CAACC,MAAWA,EAAO,OAAOL,EAAW,MAAM;AAC1E,EAAIA,EAAW,WAAW,UAAa,CAACG,KAAQG,EAAWN,EAAW,MAAM;AAK5E,QAAMO,IAAON,MAAS,SAAS,iBACzBO,IAAS,CAACX,GAAuBK,MACrCA,MAAUT,EAAsBI,CAAG,MAAMU,KAAQV,MAAQ;AAE3D,aAAWA,KAAOF,GAAM;AACtB,UAAMO,IAAQF,EAAWH,CAAG;AAC5B,IAAIK,MAAU,WACVM,EAAOX,GAAKK,CAAK,IAAG,OAAOD,EAAK,QAAQJ,CAAG,IAC1CI,EAAK,QAAQJ,CAAG,IAAIK;AAAA,EAC3B;AACA,EAAIF,EAAW,WAAW,WACtBG,KACFM,EAAU,MAAMR,CAAI,GAChBO,EAAO,UAAUL,EAAO,EAAE,IAAG,OAAOF,EAAK,QAAQ,SAChDA,EAAK,QAAQ,SAAYE,EAAO,OAErC,OAAOF,EAAK,QAAQ,QACpBQ,EAAUT,EAAW,QAAQC,CAAI;AAErC;AAGO,SAASS,EACdT,IAAoB,SAAS,iBACL;AACxB,QAAMU,IAAO,EAAE,GAAGlB,EAAA;AAClB,aAAWI,KAAOF,GAAM;AACtB,UAAMO,IAAQD,EAAK,QAAQJ,CAAG;AAC9B,IAAIK,MAAU,UAAaN,EAAIC,CAAG,EAAE,SAASK,CAAK,MAAGS,EAAKd,CAAG,IAAIK;AAAA,EACnE;AACA,QAAMU,IAASX,EAAK,MAAM,iBAAiB,eAAe,EAAE,KAAA,GACtDE,IAASF,EAAK,QAAQ;AAC5B,SAAIW,MAAa,SAASA,IACjBT,KAAUC,EAAW,KAAK,CAACC,MAAWA,EAAO,OAAOF,CAAM,MAAGQ,EAAK,SAASR,IAC7EQ;AACT;"}

package/dist/internal/block.d.ts

@@ -0,0 +1,23 @@
+import { nothing, type TemplateResult } from 'lit';
+/**
+ * What the page blocks share: the room around a section, and the head over
+ * its content — a heading and a lead, centred or at the start.
+ *
+ * A block's heading level is the page's to set (`heading-level`); its items'
+ * headings sit one level under it.
+ */
+export declare const blockStyles: import("lit").CSSResult;
+export declare function blockId(prefix: string): string;
+/** The head over a block: its heading and lead, when it has them. */
+export declare function blockHead({ title, lead, level, id, }: {
+    title: string;
+    lead: string;
+    level: number;
+    id: string;
+}): TemplateResult | typeof nothing;
+/**
+ * A date for people — "Sep 14, 2026" — in `locale`, the page's language when
+ * empty. A date alone, `2026-09-14`, is read as that day where the reader is,
+ * not as midnight in London.
+ */
+export declare function formatDate(iso: string, locale?: string): string;

package/dist/internal/command-search.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The search behind `<kt-command-palette>`: which commands a query keeps, and
+ * in what order.
+ *
+ * Every word typed must appear — in the label, a keyword or the group — in
+ * any order, ignoring case and accents. What matches ranks by how it matches:
+ * a label that starts with the query, then a label word that does, then a
+ * match inside the label, then a keyword or the group. Ties keep the order
+ * given, which is the order the application chose.
+ */
+export interface KtCommand {
+    readonly id: string;
+    readonly label: string;
+    /** Heading the command is listed under. */
+    readonly group?: string;
+    /** A Lucide icon name. */
+    readonly icon?: string;
+    /** Other words it answers to: "client" for New customer. */
+    readonly keywords?: readonly string[];
+    /** Keys shown beside it, as `<kt-kbd keys>` takes them: "mod n". */
+    readonly shortcut?: string;
+    readonly disabled?: boolean;
+}
+/** Lowercase, without accents: "Préférences" reads "preferences". */
+export declare function fold(text: string): string;
+/** The commands `query` keeps, best first. An empty query keeps them all, in order. */
+export declare function rankCommands(commands: readonly KtCommand[], query: string): KtCommand[];

package/dist/internal/heading.d.ts

@@ -0,0 +1,8 @@
+import { type TemplateResult } from 'lit';
+/**
+ * A heading at the level a page needs. A block or a footer cannot know where
+ * it sits in the page's outline, so its heading level is the page's to set;
+ * this draws that level, kept between 1 and 6, `fallback` when it is not a
+ * number.
+ */
+export declare function heading(level: number, text: string | TemplateResult, className?: string, fallback?: number): TemplateResult;

package/dist/internal/indicator.d.ts

@@ -0,0 +1,34 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * One mark that slides to whichever item is selected — a tab's underline, a
+ * segmented control's surface — rather than one per item that blinks from
+ * the old to the new.
+ *
+ * It measures the selected item against its container and writes the box to
+ * the container as `--kt-indicator-x`, `-y`, `-width` and `-height`. The
+ * container's `data-indicator` says where things stand: absent while nothing
+ * is selected, `placed` once the mark is under the item, `ready` a frame
+ * later. A component transitions the mark only when `ready`, so a page opens
+ * with the mark in place, not sliding in from the corner.
+ *
+ * It slides only when the selection moves to another item. When the same item
+ * changes size — the brand font replacing the fallback, a label rewritten —
+ * the mark follows at once: growing towards its item would read as a glitch.
+ */
+export interface IndicatorOptions {
+    readonly container: () => HTMLElement | null | undefined;
+    readonly selected: () => HTMLElement | null | undefined;
+}
+export declare class IndicatorController implements ReactiveController {
+    private readonly options;
+    private observer;
+    private observed;
+    private frame;
+    private placed;
+    constructor(host: ReactiveControllerHost, options: IndicatorOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private place;
+    private observe;
+}

package/dist/internal/motion.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Motion read from the theme. The duration tokens are where reduced motion is
+ * honoured — they are all zero under `prefers-reduced-motion: reduce` — so
+ * script-driven animations read them instead of carrying their own numbers,
+ * and are skipped outright when they come back zero.
+ */
+/** A CSS time — `0.2s`, `160ms` — in milliseconds; zero when it is not one. */
+export declare function parseTime(value: string): number;
+/** A duration token's value at `element`, in milliseconds. */
+export declare function durationOf(element: Element, token: `--duration-${string}`): number;
+/** The theme's standard easing at `element`, for the Web Animations API. */
+export declare function easingOf(element: Element): string;
+/**
+ * Plays `keyframes` on `element` for as long as the duration token says,
+ * with the theme's easing, under `id` so tests and callers can find it.
+ * Cancels an earlier run with the same id, so a quick second change starts
+ * afresh. Null — and nothing played — when the token is zero or the browser
+ * has no Web Animations.
+ */
+export declare function play(element: Element, keyframes: Keyframe[], token: `--duration-${string}`, id: string, options?: {
+    /** Overrides the theme's easing — `linear` when the keyframes carry their own. */
+    readonly easing?: string;
+    /** Multiplies the token's duration, for a motion with several legs. */
+    readonly scale?: number;
+}): Animation | null;

package/dist/internal/numbers.d.ts

@@ -0,0 +1,2 @@
+/** How many decimals `n` is written with: 0.25 has two, 1e-7 seven. */
+export declare function decimalsOf(n: number): number;

package/dist/internal/strings.d.ts

@@ -101,6 +101,20 @@ export interface KtStrings {
     /** A required time left empty, and one outside min and max. */
     timeRequired: string;
     timeOutOfRange: string;
+    commandPalette: string;
+    commandPlaceholder: string;
+    commandHintMove: string;
+    commandHintRun: string;
+    commandHintClose: string;
+    sliderMinimum: string;
+    sliderMaximum: string;
+    stepComplete: string;
+    stepCurrent: string;
+    stepUpcoming: string;
+    stepError: string;
+    numberRequired: string;
+    decrease: string;
+    increase: string;
     /** A phone number typed with the prefix only dialled from inside the country. */
     phoneTrunkPrefix: (prefix: string) => string;
     openMenu: string;
@@ -133,6 +147,28 @@ export interface KtStrings {
     cancel: string;
     details: string;
     avatar: string;
+    /** The prompt input's send button. */
+    send: string;
+    /** The prompt input's field, when it is given no label. */
+    message: string;
+    /** Said while a chat message is being thought out, before its first word. */
+    thinking: string;
+    /** The app shell's side area. */
+    sidebar: string;
+    /** An avatar group's sum of the people it does not show. */
+    moreCount: (count: number) => string;
+    /** One box of a one-time code, by its place. */
+    otpCharacter: (place: number, length: number) => string;
+    /** A required one-time code, not yet whole. */
+    otpRequired: string;
+    /** The colour picker's free colour, beside its swatches. */
+    customColour: string;
+    /** The colour picker's hex field. */
+    hexColour: string;
+    /** A tour's place: "Step 2 of 4". */
+    stepOf: (step: number, total: number) => string;
+    /** A tour's last button. */
+    done: string;
 }
 export declare const defaultStrings: Readonly<KtStrings>;
 /** The strings in effect. Elements read them at render time. */

package/dist/react/index.d.ts

@@ -1,5 +1,12 @@
 import { type EventName } from '@lit/react';
 import type { KtOption } from '../internal/listbox.js';
+import type { KtCommand } from '../internal/command-search.js';
+import type { KtUserMenuItem } from '../components/navigation/kt-user-menu/kt-user-menu.js';
+import type { KtTreeItem } from '../components/data/kt-tree/kt-tree.js';
+import type { KtAuthMode, KtAuthSubmitDetail } from '../components/blocks/kt-auth-form/kt-auth-form.js';
+import type { KtSubscribeDetail } from '../components/blocks/kt-newsletter/kt-newsletter.js';
+import type { KtBilling } from '../components/blocks/kt-pricing-table/kt-pricing-table.js';
+import type { KtPromptSubmitDetail } from '../components/forms/kt-prompt-input/kt-prompt-input.js';
 import { KtAvatar as KtAvatarElement } from '../components/core/kt-avatar/kt-avatar.js';
 import { KtBadge as KtBadgeElement } from '../components/core/kt-badge/kt-badge.js';
 import { KtButton as KtButtonElement } from '../components/core/kt-button/kt-button.js';
@@ -20,6 +27,9 @@ import { KtMultiSelect as KtMultiSelectElement } from '../components/forms/kt-mu
 import { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';
 import { KtRadio as KtRadioElement, KtRadioGroup as KtRadioGroupElement } from '../components/forms/kt-radio-group/kt-radio-group.js';
 import { KtSelect as KtSelectElement } from '../components/forms/kt-select/kt-select.js';
+import { KtSteps as KtStepsElement } from '../components/navigation/kt-steps/kt-steps.js';
+import { KtNumberInput as KtNumberInputElement } from '../components/forms/kt-number-input/kt-number-input.js';
+import { KtSlider as KtSliderElement } from '../components/forms/kt-slider/kt-slider.js';
 import { KtTextarea as KtTextareaElement } from '../components/forms/kt-textarea/kt-textarea.js';
 import { KtTimeInput as KtTimeInputElement } from '../components/forms/kt-time-input/kt-time-input.js';
 import { KtToggle as KtToggleElement } from '../components/forms/kt-toggle/kt-toggle.js';
@@ -29,6 +39,7 @@ import { KtSegmentedControl as KtSegmentedControlElement } from '../components/n
 import { KtSubMenuNavigation as KtSubMenuNavigationElement } from '../components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';
 import { KtTabs as KtTabsElement } from '../components/navigation/kt-tabs/kt-tabs.js';
 import { KtHeader as KtHeaderElement } from '../components/navigation/kt-header/kt-header.js';
+import { KtFooter as KtFooterElement } from '../components/navigation/kt-footer/kt-footer.js';
 import { KtToggleButton as KtToggleButtonElement } from '../components/navigation/kt-toggle-button/kt-toggle-button.js';
 import { KtToggleButtonGroup as KtToggleButtonGroupElement } from '../components/navigation/kt-toggle-button-group/kt-toggle-button-group.js';
 import { KtAlert as KtAlertElement } from '../components/feedback/kt-alert/kt-alert.js';
@@ -41,6 +52,7 @@ import { KtTooltip as KtTooltipElement } from '../components/feedback/kt-tooltip
 import { KtCollapsible as KtCollapsibleElement } from '../components/overlays/kt-collapsible/kt-collapsible.js';
 import { KtConfirmDialog as KtConfirmDialogElement } from '../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';
 import { KtDropdown as KtDropdownElement } from '../components/overlays/kt-dropdown/kt-dropdown.js';
+import { KtCommandPalette as KtCommandPaletteElement } from '../components/overlays/kt-command-palette/kt-command-palette.js';
 import { KtModal as KtModalElement } from '../components/overlays/kt-modal/kt-modal.js';
 import { KtSidePanel as KtSidePanelElement } from '../components/overlays/kt-side-panel/kt-side-panel.js';
 import { KtChart as KtChartElement } from '../components/data/kt-chart/kt-chart.js';
@@ -48,6 +60,32 @@ import { KtMeter as KtMeterElement } from '../components/data/kt-meter/kt-meter.
 import { KtPagination as KtPaginationElement } from '../components/data/kt-pagination/kt-pagination.js';
 import { KtStat as KtStatElement } from '../components/data/kt-stat/kt-stat.js';
 import { KtTable as KtTableElement } from '../components/data/kt-table/kt-table.js';
+import { KtPromptInput as KtPromptInputElement } from '../components/forms/kt-prompt-input/kt-prompt-input.js';
+import { KtChatMessage as KtChatMessageElement } from '../components/data/kt-chat-message/kt-chat-message.js';
+import { KtAppShell as KtAppShellElement } from '../components/navigation/kt-app-shell/kt-app-shell.js';
+import { KtDescriptionList as KtDescriptionListElement } from '../components/data/kt-description-list/kt-description-list.js';
+import { KtAvatarGroup as KtAvatarGroupElement } from '../components/core/kt-avatar-group/kt-avatar-group.js';
+import { KtCopyButton as KtCopyButtonElement } from '../components/core/kt-copy-button/kt-copy-button.js';
+import { KtOtpInput as KtOtpInputElement } from '../components/forms/kt-otp-input/kt-otp-input.js';
+import { KtAccordion as KtAccordionElement } from '../components/overlays/kt-accordion/kt-accordion.js';
+import { KtUserMenu as KtUserMenuElement } from '../components/navigation/kt-user-menu/kt-user-menu.js';
+import { KtTree as KtTreeElement } from '../components/data/kt-tree/kt-tree.js';
+import { KtColorPicker as KtColorPickerElement } from '../components/forms/kt-color-picker/kt-color-picker.js';
+import { KtTour as KtTourElement } from '../components/overlays/kt-tour/kt-tour.js';
+import { KtAuthForm as KtAuthFormElement } from '../components/blocks/kt-auth-form/kt-auth-form.js';
+import { KtErrorPage as KtErrorPageElement } from '../components/blocks/kt-error-page/kt-error-page.js';
+import { KtHero as KtHeroElement } from '../components/blocks/kt-hero/kt-hero.js';
+import { KtFeatureGrid as KtFeatureGridElement } from '../components/blocks/kt-feature-grid/kt-feature-grid.js';
+import { KtCta as KtCtaElement } from '../components/blocks/kt-cta/kt-cta.js';
+import { KtPricingTable as KtPricingTableElement } from '../components/blocks/kt-pricing-table/kt-pricing-table.js';
+import { KtTestimonials as KtTestimonialsElement } from '../components/blocks/kt-testimonials/kt-testimonials.js';
+import { KtLogoCloud as KtLogoCloudElement } from '../components/blocks/kt-logo-cloud/kt-logo-cloud.js';
+import { KtFaq as KtFaqElement } from '../components/blocks/kt-faq/kt-faq.js';
+import { KtPostGrid as KtPostGridElement } from '../components/blocks/kt-post-grid/kt-post-grid.js';
+import { KtBlogPost as KtBlogPostElement } from '../components/blocks/kt-blog-post/kt-blog-post.js';
+import { KtNewsletter as KtNewsletterElement } from '../components/blocks/kt-newsletter/kt-newsletter.js';
+import { KtSettingsSection as KtSettingsSectionElement } from '../components/blocks/kt-settings-section/kt-settings-section.js';
+import { KtEmptyPage as KtEmptyPageElement } from '../components/blocks/kt-empty-page/kt-empty-page.js';
 import { KtTimeline as KtTimelineElement, KtTimelineItem as KtTimelineItemElement } from '../components/data/kt-timeline/kt-timeline.js';
 /** Narrows an event name to the detail its element actually dispatches. */
 type Kt<T> = EventName<CustomEvent<T>>;
@@ -88,6 +126,24 @@ export declare const KtInput: import("@lit/react").ReactWebComponent<KtInputElem
         dialCode: string;
     }>;
 }>;
+export declare const KtSteps: import("@lit/react").ReactWebComponent<KtStepsElement, {
+    onKtChange: Kt<{
+        id: string;
+    }>;
+}>;
+export declare const KtNumberInput: import("@lit/react").ReactWebComponent<KtNumberInputElement, {
+    onKtChange: Kt<{
+        value: number | null;
+    }>;
+}>;
+export declare const KtSlider: import("@lit/react").ReactWebComponent<KtSliderElement, {
+    onKtInput: Kt<{
+        value: string;
+    }>;
+    onKtChange: Kt<{
+        value: string;
+    }>;
+}>;
 export declare const KtTextarea: import("@lit/react").ReactWebComponent<KtTextareaElement, {
     onKtInput: Kt<{
         value: string;
@@ -183,6 +239,7 @@ export declare const KtTabs: import("@lit/react").ReactWebComponent<KtTabsElemen
         value: string | number;
     }>;
 }>;
+export declare const KtFooter: import("@lit/react").ReactWebComponent<KtFooterElement, {}>;
 export declare const KtHeader: import("@lit/react").ReactWebComponent<KtHeaderElement, {
     onKtMenuToggle: Kt<{
         open: boolean;
@@ -222,6 +279,14 @@ export declare const KtDropdown: import("@lit/react").ReactWebComponent<KtDropdo
     onKtOpen: Kt<never>;
     onKtClose: Kt<never>;
 }>;
+export declare const KtCommandPalette: import("@lit/react").ReactWebComponent<KtCommandPaletteElement, {
+    onKtSelect: Kt<{
+        id: string;
+        command: KtCommand;
+    }>;
+    onKtOpen: Kt<never>;
+    onKtClose: Kt<never>;
+}>;
 export declare const KtModal: import("@lit/react").ReactWebComponent<KtModalElement, {
     onKtClose: Kt<never>;
 }>;
@@ -267,3 +332,103 @@ export { toaster } from '../components/feedback/kt-toast-container/toaster.js';
 export declare const KtStat: import("@lit/react").ReactWebComponent<KtStatElement, {}>;
 export declare const KtTimeline: import("@lit/react").ReactWebComponent<KtTimelineElement, {}>;
 export declare const KtTimelineItem: import("@lit/react").ReactWebComponent<KtTimelineItemElement, {}>;
+export declare const KtPromptInput: import("@lit/react").ReactWebComponent<KtPromptInputElement, {
+    onKtInput: Kt<{
+        value: string;
+    }>;
+    onKtSubmit: Kt<KtPromptSubmitDetail>;
+}>;
+export declare const KtChatMessage: import("@lit/react").ReactWebComponent<KtChatMessageElement, {}>;
+export declare const KtAppShell: import("@lit/react").ReactWebComponent<KtAppShellElement, {
+    onKtSidebarToggle: Kt<{
+        open: boolean;
+    }>;
+}>;
+export declare const KtDescriptionList: import("@lit/react").ReactWebComponent<KtDescriptionListElement, {}>;
+export declare const KtAvatarGroup: import("@lit/react").ReactWebComponent<KtAvatarGroupElement, {}>;
+export declare const KtCopyButton: import("@lit/react").ReactWebComponent<KtCopyButtonElement, {
+    onKtCopy: Kt<{
+        value: string;
+    }>;
+}>;
+export declare const KtOtpInput: import("@lit/react").ReactWebComponent<KtOtpInputElement, {
+    onKtChange: Kt<{
+        value: string;
+    }>;
+    onKtComplete: Kt<{
+        value: string;
+    }>;
+}>;
+export declare const KtAccordion: import("@lit/react").ReactWebComponent<KtAccordionElement, {
+    onKtChange: Kt<{
+        open: number[];
+    }>;
+}>;
+export declare const KtUserMenu: import("@lit/react").ReactWebComponent<KtUserMenuElement, {
+    onKtSelect: Kt<{
+        id: string;
+        item: KtUserMenuItem;
+    }>;
+    onKtOpen: Kt<never>;
+    onKtClose: Kt<never>;
+}>;
+export declare const KtTree: import("@lit/react").ReactWebComponent<KtTreeElement, {
+    onKtSelect: Kt<{
+        id: string;
+        item: KtTreeItem;
+    }>;
+    onKtToggle: Kt<{
+        id: string;
+        expanded: boolean;
+    }>;
+}>;
+export declare const KtColorPicker: import("@lit/react").ReactWebComponent<KtColorPickerElement, {
+    onKtChange: Kt<{
+        value: string;
+    }>;
+}>;
+export declare const KtTour: import("@lit/react").ReactWebComponent<KtTourElement, {
+    onKtStep: Kt<{
+        index: number;
+    }>;
+    onKtFinish: Kt<never>;
+    onKtClose: Kt<never>;
+}>;
+export declare const KtAuthForm: import("@lit/react").ReactWebComponent<KtAuthFormElement, {
+    onKtSubmit: Kt<KtAuthSubmitDetail>;
+    onKtMode: Kt<{
+        mode: KtAuthMode;
+    }>;
+    onKtProvider: Kt<{
+        id: string;
+    }>;
+}>;
+export declare const KtErrorPage: import("@lit/react").ReactWebComponent<KtErrorPageElement, {
+    onKtRetry: Kt<never>;
+}>;
+export declare const KtHero: import("@lit/react").ReactWebComponent<KtHeroElement, {}>;
+export declare const KtFeatureGrid: import("@lit/react").ReactWebComponent<KtFeatureGridElement, {}>;
+export declare const KtCta: import("@lit/react").ReactWebComponent<KtCtaElement, {}>;
+export declare const KtPricingTable: import("@lit/react").ReactWebComponent<KtPricingTableElement, {
+    onKtBilling: Kt<{
+        billing: KtBilling;
+    }>;
+    onKtPlan: Kt<{
+        id: string;
+        billing: KtBilling;
+    }>;
+}>;
+export declare const KtTestimonials: import("@lit/react").ReactWebComponent<KtTestimonialsElement, {}>;
+export declare const KtLogoCloud: import("@lit/react").ReactWebComponent<KtLogoCloudElement, {}>;
+export declare const KtFaq: import("@lit/react").ReactWebComponent<KtFaqElement, {}>;
+export declare const KtPostGrid: import("@lit/react").ReactWebComponent<KtPostGridElement, {}>;
+export declare const KtBlogPost: import("@lit/react").ReactWebComponent<KtBlogPostElement, {}>;
+export declare const KtNewsletter: import("@lit/react").ReactWebComponent<KtNewsletterElement, {
+    onKtSubscribe: Kt<KtSubscribeDetail>;
+}>;
+export declare const KtSettingsSection: import("@lit/react").ReactWebComponent<KtSettingsSectionElement, {}>;
+export declare const KtEmptyPage: import("@lit/react").ReactWebComponent<KtEmptyPageElement, {
+    onKtStep: Kt<{
+        id: string;
+    }>;
+}>;