@misoto22/design 0.7.0 → 0.9.0

package/dist/lib/color.js

@@ -0,0 +1,189 @@
+const clamp = (n, min = 0, max = 1) => Math.max(min, Math.min(max, n));
+const wrapHue = (h) => (h % 360 + 360) % 360;
+const multiply = (m, v) => m.map((row) => row.reduce((n, x, i) => n + x * (v[i] ?? 0), 0));
+const linearize = (v) => Math.abs(v) <= 0.04045 ? v / 12.92 : Math.sign(v) * ((Math.abs(v) + 0.055) / 1.055) ** 2.4;
+const encode = (v) => Math.abs(v) <= 31308e-7 ? 12.92 * v : Math.sign(v) * (1.055 * Math.abs(v) ** (1 / 2.4) - 0.055);
+const RGB_XYZ = [
+  [0.4123907993, 0.3575843394, 0.1804807884],
+  [0.2126390059, 0.7151686788, 0.0721923154],
+  [0.0193308187, 0.1191947798, 0.9505321522]
+];
+const P3_XYZ = [
+  [0.4865709486, 0.2656676932, 0.1982172852],
+  [0.2289745641, 0.6917385218, 0.0792869141],
+  [0, 0.0451133819, 1.0439443689]
+];
+const XYZ_RGB = [
+  [3.2409699419, -1.5373831776, -0.4986107603],
+  [-0.9692436363, 1.8759675015, 0.0415550574],
+  [0.0556300797, -0.2039769589, 1.0569715142]
+];
+const XYZ_P3 = [
+  [2.4934969119, -0.9313836179, -0.4027107845],
+  [-0.8294889696, 1.7626640603, 0.0236246858],
+  [0.0358458302, -0.0761723893, 0.956884524]
+];
+const XYZ_LMS = [
+  [0.819022438, 0.3619062601, -0.1288737815],
+  [0.0329836539, 0.9292868616, 0.0361446664],
+  [0.0481771894, 0.2642395318, 0.6335478285]
+];
+const LMS_XYZ = [
+  [1.2268798734, -0.5578149966, 0.2813910502],
+  [-0.0405757626, 1.1122868294, -0.0717110667],
+  [-0.0763729497, -0.421493324, 1.5869240244]
+];
+function rgbToColor(rgb, a = 1, space = "srgb") {
+  const xyz = multiply(space === "p3" ? P3_XYZ : RGB_XYZ, rgb.map(linearize));
+  const [l, m, s] = multiply(XYZ_LMS, xyz).map(Math.cbrt);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  const grey = c < 1e-7;
+  return {
+    l: clamp(L),
+    c: grey ? 0 : c,
+    h: grey ? 0 : wrapHue(Math.atan2(B, A) * 180 / Math.PI),
+    a: clamp(a)
+  };
+}
+function colorToRgb(color, space = "srgb") {
+  const a = color.c * Math.cos(color.h * Math.PI / 180);
+  const b = color.c * Math.sin(color.h * Math.PI / 180);
+  const lms = [
+    (color.l + 0.3963377774 * a + 0.2158037573 * b) ** 3,
+    (color.l - 0.1055613458 * a - 0.0638541728 * b) ** 3,
+    (color.l - 0.0894841775 * a - 1.291485548 * b) ** 3
+  ];
+  return multiply(space === "p3" ? XYZ_P3 : XYZ_RGB, multiply(LMS_XYZ, lms)).map(encode);
+}
+function inGamut(color, space = "srgb") {
+  return colorToRgb(color, space).every((n) => n >= -1e-5 && n <= 1.00001);
+}
+function fitGamut(color, space = "srgb") {
+  if (inGamut(color, space)) return color;
+  let lo = 0;
+  let hi = color.c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (inGamut({ ...color, c: mid }, space)) lo = mid;
+    else hi = mid;
+  }
+  return { ...color, c: lo };
+}
+function maxChroma(l, h, space = "srgb") {
+  if (l <= 0 || l >= 1) return 0;
+  return fitGamut({ l, c: 0.5, h, a: 1 }, space).c;
+}
+function colorFormat(value) {
+  const text = value.trim();
+  if (/^oklch\(/i.test(text)) return "oklch";
+  if (/^color\(display-p3\s/i.test(text)) return "p3";
+  return "hex";
+}
+const round = (v, digits = 4) => Number(v.toFixed(digits));
+function formatColor(color, format) {
+  const alpha = color.a < 1 ? ` / ${round(color.a)}` : "";
+  if (format === "oklch") {
+    return `oklch(${round(color.l)} ${round(color.c)} ${round(color.h, 2)}${alpha})`;
+  }
+  const space = format === "p3" ? "p3" : "srgb";
+  const rgb = colorToRgb(fitGamut(color, space), space);
+  if (format === "p3") {
+    return `color(display-p3 ${rgb.map((n) => round(clamp(n), 5)).join(" ")}${alpha})`;
+  }
+  const bytes = rgb.map((n) => Math.round(clamp(n) * 255));
+  if (color.a < 1) bytes.push(Math.round(color.a * 255));
+  return `#${bytes.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(%|deg|grad|rad|turn)?$/i;
+function number(value, percentScale = 1, hue = false) {
+  const match = NUMBER.exec(value);
+  if (!match) return null;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n)) return null;
+  const unit = match[1]?.toLowerCase();
+  if (hue) {
+    if (unit === "rad") return n * 180 / Math.PI;
+    if (unit === "turn") return n * 360;
+    if (unit === "grad") return n * 0.9;
+    return !unit || unit === "deg" ? n : null;
+  }
+  if (unit === "%") return n * percentScale / 100;
+  return unit ? null : n;
+}
+function parseColor(value) {
+  const text = value.trim().toLowerCase();
+  if (text === "transparent") return { l: 0, c: 0, h: 0, a: 0 };
+  if (/^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.test(text)) {
+    const short = text.slice(1);
+    const hex = short.length <= 4 ? [...short].map((c) => c + c).join("") : short;
+    const bytes = (hex.match(/../g) ?? []).map((c) => parseInt(c, 16) / 255);
+    return rgbToColor(bytes.slice(0, 3), bytes[3] ?? 1);
+  }
+  const match = /^(oklch|rgb|rgba|hsl|hsla|color)\(([^()]*)\)$/.exec(text);
+  if (!match) return null;
+  const kind = match[1] ?? "";
+  let body = (match[2] ?? "").trim();
+  const p3 = kind === "color";
+  if (p3) {
+    if (!body.startsWith("display-p3 ")) return null;
+    body = body.slice(11).trim();
+  }
+  const legacy = body.includes(",");
+  if (legacy && (p3 || kind === "oklch" || body.includes("/"))) return null;
+  const parts = legacy ? body.split(",").map((x) => x.trim()) : body.split(/\s*\/\s*/);
+  if (!legacy && parts.length > 2) return null;
+  const channels = legacy ? parts.slice(0, 3) : (parts[0] ?? "").split(/\s+/);
+  if (channels.length !== 3) return null;
+  if (legacy && parts.length !== 3 && parts.length !== 4) return null;
+  if (legacy && kind.startsWith("rgb") && channels.some((c) => c.endsWith("%")) && !channels.every((c) => c.endsWith("%"))) {
+    return null;
+  }
+  const alphaText = legacy ? parts[3] : parts[1];
+  const alpha = alphaText === void 0 ? 1 : number(alphaText);
+  if (alpha === null) return null;
+  if (kind === "oklch") {
+    const l = number(channels[0] ?? "");
+    const c = number(channels[1] ?? "", 0.4);
+    const h = number(channels[2] ?? "", 1, true);
+    if (l === null || c === null || h === null) return null;
+    return { l: clamp(l), c: Math.max(0, c), h: wrapHue(h), a: clamp(alpha) };
+  }
+  if (kind.startsWith("hsl")) {
+    const h = number(channels[0] ?? "", 1, true);
+    const s = number(channels[1] ?? "");
+    const l = number(channels[2] ?? "");
+    if (h === null || s === null || l === null) return null;
+    if (!channels[1]?.endsWith("%") || !channels[2]?.endsWith("%")) return null;
+    const sat = clamp(s);
+    const light = clamp(l);
+    const amount = sat * Math.min(light, 1 - light);
+    const channel = (n) => {
+      const k = (n + wrapHue(h) / 30) % 12;
+      return light - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    return rgbToColor([channel(0), channel(8), channel(4)], alpha);
+  }
+  const values = channels.map((c) => number(c, p3 ? 1 : 255));
+  if (values.some((n) => n === null)) return null;
+  return rgbToColor(
+    values.map((n) => p3 ? n ?? 0 : clamp((n ?? 0) / 255)),
+    alpha,
+    p3 ? "p3" : "srgb"
+  );
+}
+export {
+  clamp,
+  colorFormat,
+  colorToRgb,
+  fitGamut,
+  formatColor,
+  inGamut,
+  maxChroma,
+  parseColor,
+  rgbToColor,
+  wrapHue
+};
+//# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/color.ts"],"sourcesContent":["/**\n * CSS colour maths, with no dependency and no DOM.\n *\n * Adapted from DialKit (https://github.com/joshpuckett/dialkit), MIT licensed:\n *\n *   Copyright (c) 2026 Josh Puckett\n *\n *   Permission is hereby granted, free of charge, to any person obtaining a\n *   copy of this software and associated documentation files (the \"Software\"),\n *   to deal in the Software without restriction, including without limitation\n *   the rights to use, copy, modify, merge, publish, distribute, sublicense,\n *   and/or sell copies of the Software, and to permit persons to whom the\n *   Software is furnished to do so, subject to the following conditions:\n *\n *   The above copyright notice and this permission notice shall be included in\n *   all copies or substantial portions of the Software.\n *\n * The working space is OKLCH, and that is the substantive choice here rather\n * than an implementation detail. A picker built on HSV hands a reader two\n * colours at the same \"lightness\" where one of them is visibly darker, because\n * HSV's lightness is a property of the numbers rather than of the eye. Every\n * decision in `ColorPicker` — where the handle sits, what the hue strip looks\n * like at this lightness, which colours are reachable at all — depends on a\n * space that is perceptually uniform, and OKLCH is the one CSS ships.\n *\n * The matrices are the CSS Color 4 reference implementation's, D65.\n * https://www.w3.org/TR/css-color-4/#color-conversion-code\n */\n\n/** A colour in OKLCH: lightness 0–1, chroma, hue in degrees, alpha 0–1. */\nexport interface Color {\n  l: number\n  c: number\n  h: number\n  a: number\n}\n\n/** The notations this module reads and writes. */\nexport type ColorFormat = 'hex' | 'oklch' | 'p3'\n\n/** The two RGB gamuts a colour can be fitted to. */\nexport type ColorSpace = 'srgb' | 'p3'\n\ntype Triple = [number, number, number]\n\nexport const clamp = (n: number, min = 0, max = 1) => Math.max(min, Math.min(max, n))\n\nexport const wrapHue = (h: number) => ((h % 360) + 360) % 360\n\nconst multiply = (m: number[][], v: Triple): Triple =>\n  m.map((row) => row.reduce((n, x, i) => n + x * (v[i] ?? 0), 0)) as Triple\n\n/** sRGB transfer function, undone. Signed, so an out-of-gamut channel survives. */\nconst linearize = (v: number) =>\n  Math.abs(v) <= 0.04045 ? v / 12.92 : Math.sign(v) * ((Math.abs(v) + 0.055) / 1.055) ** 2.4\n\nconst encode = (v: number) =>\n  Math.abs(v) <= 0.0031308 ? 12.92 * v : Math.sign(v) * (1.055 * Math.abs(v) ** (1 / 2.4) - 0.055)\n\nconst RGB_XYZ = [\n  [0.4123907993, 0.3575843394, 0.1804807884],\n  [0.2126390059, 0.7151686788, 0.0721923154],\n  [0.0193308187, 0.1191947798, 0.9505321522],\n]\nconst P3_XYZ = [\n  [0.4865709486, 0.2656676932, 0.1982172852],\n  [0.2289745641, 0.6917385218, 0.0792869141],\n  [0, 0.0451133819, 1.0439443689],\n]\nconst XYZ_RGB = [\n  [3.2409699419, -1.5373831776, -0.4986107603],\n  [-0.9692436363, 1.8759675015, 0.0415550574],\n  [0.0556300797, -0.2039769589, 1.0569715142],\n]\nconst XYZ_P3 = [\n  [2.4934969119, -0.9313836179, -0.4027107845],\n  [-0.8294889696, 1.7626640603, 0.0236246858],\n  [0.0358458302, -0.0761723893, 0.956884524],\n]\nconst XYZ_LMS = [\n  [0.819022438, 0.3619062601, -0.1288737815],\n  [0.0329836539, 0.9292868616, 0.0361446664],\n  [0.0481771894, 0.2642395318, 0.6335478285],\n]\nconst LMS_XYZ = [\n  [1.2268798734, -0.5578149966, 0.2813910502],\n  [-0.0405757626, 1.1122868294, -0.0717110667],\n  [-0.0763729497, -0.421493324, 1.5869240244],\n]\n\n/** Gamma-encoded RGB in 0–1 to OKLCH. */\nexport function rgbToColor(rgb: Triple, a = 1, space: ColorSpace = 'srgb'): Color {\n  const xyz = multiply(space === 'p3' ? P3_XYZ : RGB_XYZ, rgb.map(linearize) as Triple)\n  const [l, m, s] = multiply(XYZ_LMS, xyz).map(Math.cbrt) as Triple\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 B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s\n  const c = Math.hypot(A, B)\n  // Below the threshold the hue is the angle of rounding error, not a hue. Left\n  // in, a slider dragged to pure white would spin the strip through 360°.\n  const grey = c < 1e-7\n  return {\n    l: clamp(L),\n    c: grey ? 0 : c,\n    h: grey ? 0 : wrapHue((Math.atan2(B, A) * 180) / Math.PI),\n    a: clamp(a),\n  }\n}\n\n/** OKLCH to gamma-encoded RGB in 0–1. May fall outside it — see `fitGamut`. */\nexport function colorToRgb(color: Color, space: ColorSpace = 'srgb'): Triple {\n  const a = color.c * Math.cos((color.h * Math.PI) / 180)\n  const b = color.c * Math.sin((color.h * Math.PI) / 180)\n  const lms: Triple = [\n    (color.l + 0.3963377774 * a + 0.2158037573 * b) ** 3,\n    (color.l - 0.1055613458 * a - 0.0638541728 * b) ** 3,\n    (color.l - 0.0894841775 * a - 1.291485548 * b) ** 3,\n  ]\n  return multiply(space === 'p3' ? XYZ_P3 : XYZ_RGB, multiply(LMS_XYZ, lms)).map(encode) as Triple\n}\n\nexport function inGamut(color: Color, space: ColorSpace = 'srgb'): boolean {\n  return colorToRgb(color, space).every((n) => n >= -0.00001 && n <= 1.00001)\n}\n\n/**\n * Brings a colour inside a gamut by giving up CHROMA, and nothing else.\n *\n * The naive fix is to clip each channel at 0 and 1, which changes the hue and\n * the lightness together — a vivid blue clipped that way comes back purple and\n * darker. Bisecting on chroma keeps both, so what a reader loses is only the\n * saturation the display could never have shown them.\n */\nexport function fitGamut(color: Color, space: ColorSpace = 'srgb'): Color {\n  if (inGamut(color, space)) return color\n  let lo = 0\n  let hi = color.c\n  // Twenty halvings of a chroma under 0.5 lands well inside a 24-bit step.\n  for (let i = 0; i < 20; i++) {\n    const mid = (lo + hi) / 2\n    if (inGamut({ ...color, c: mid }, space)) lo = mid\n    else hi = mid\n  }\n  return { ...color, c: lo }\n}\n\n/** The most chroma a gamut holds at this lightness and hue — the plane's edge. */\nexport function maxChroma(l: number, h: number, space: ColorSpace = 'srgb'): number {\n  if (l <= 0 || l >= 1) return 0\n  return fitGamut({ l, c: 0.5, h, a: 1 }, space).c\n}\n\n/** Which notation a string is written in. Anything unrecognised reads as hex. */\nexport function colorFormat(value: string): ColorFormat {\n  const text = value.trim()\n  if (/^oklch\\(/i.test(text)) return 'oklch'\n  if (/^color\\(display-p3\\s/i.test(text)) return 'p3'\n  return 'hex'\n}\n\nconst round = (v: number, digits = 4) => Number(v.toFixed(digits))\n\n/**\n * A colour as a CSS string.\n *\n * Hex and Display P3 are bounded output spaces, so the colour is fitted on the\n * way out; OKLCH is not, and writing an out-of-gamut OKLCH is legitimate — the\n * browser fits it to whatever the display actually has.\n */\nexport function formatColor(color: Color, format: ColorFormat): string {\n  const alpha = color.a < 1 ? ` / ${round(color.a)}` : ''\n  if (format === 'oklch') {\n    return `oklch(${round(color.l)} ${round(color.c)} ${round(color.h, 2)}${alpha})`\n  }\n  const space: ColorSpace = format === 'p3' ? 'p3' : 'srgb'\n  const rgb = colorToRgb(fitGamut(color, space), space)\n  if (format === 'p3') {\n    return `color(display-p3 ${rgb.map((n) => round(clamp(n), 5)).join(' ')}${alpha})`\n  }\n  const bytes = rgb.map((n) => Math.round(clamp(n) * 255))\n  if (color.a < 1) bytes.push(Math.round(color.a * 255))\n  return `#${bytes.map((n) => n.toString(16).padStart(2, '0')).join('')}`\n}\n\nconst NUMBER = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?(%|deg|grad|rad|turn)?$/i\n\n/** One CSS numeric token, in the unit its channel allows. */\nfunction number(value: string, percentScale = 1, hue = false): number | null {\n  const match = NUMBER.exec(value)\n  if (!match) return null\n  const n = parseFloat(value)\n  if (!Number.isFinite(n)) return null\n  const unit = match[1]?.toLowerCase()\n  if (hue) {\n    if (unit === 'rad') return (n * 180) / Math.PI\n    if (unit === 'turn') return n * 360\n    if (unit === 'grad') return n * 0.9\n    return !unit || unit === 'deg' ? n : null\n  }\n  if (unit === '%') return (n * percentScale) / 100\n  return unit ? null : n\n}\n\n/**\n * An absolute CSS colour as OKLCH, or `null` when the string is not one.\n *\n * Hex, `rgb()`, `hsl()`, `oklch()` and `color(display-p3 …)`, in both the\n * comma and the space syntax. Named colours are deliberately absent: resolving\n * them needs a table of a hundred and forty-eight entries or a DOM, and a\n * picker that accepts \"rebeccapurple\" but not \"papayawhip\" is worse than one\n * that accepts neither.\n */\nexport function parseColor(value: string): Color | null {\n  const text = value.trim().toLowerCase()\n  if (text === 'transparent') return { l: 0, c: 0, h: 0, a: 0 }\n\n  if (/^#(?:[\\da-f]{3,4}|[\\da-f]{6}|[\\da-f]{8})$/.test(text)) {\n    const short = text.slice(1)\n    const hex = short.length <= 4 ? [...short].map((c) => c + c).join('') : short\n    const bytes = (hex.match(/../g) ?? []).map((c) => parseInt(c, 16) / 255)\n    return rgbToColor(bytes.slice(0, 3) as Triple, bytes[3] ?? 1)\n  }\n\n  const match = /^(oklch|rgb|rgba|hsl|hsla|color)\\(([^()]*)\\)$/.exec(text)\n  if (!match) return null\n  const kind = match[1] ?? ''\n  let body = (match[2] ?? '').trim()\n\n  const p3 = kind === 'color'\n  if (p3) {\n    if (!body.startsWith('display-p3 ')) return null\n    body = body.slice(11).trim()\n  }\n\n  // The comma syntax is the legacy one, and it never applied to `oklch()` or\n  // `color()`; mixing it with the modern `/` alpha is not a colour either.\n  const legacy = body.includes(',')\n  if (legacy && (p3 || kind === 'oklch' || body.includes('/'))) return null\n\n  const parts = legacy ? body.split(',').map((x) => x.trim()) : body.split(/\\s*\\/\\s*/)\n  if (!legacy && parts.length > 2) return null\n  const channels = legacy ? parts.slice(0, 3) : (parts[0] ?? '').split(/\\s+/)\n  if (channels.length !== 3) return null\n  if (legacy && parts.length !== 3 && parts.length !== 4) return null\n  // Legacy rgb() is all percentages or all numbers, never a mixture.\n  if (\n    legacy &&\n    kind.startsWith('rgb') &&\n    channels.some((c) => c.endsWith('%')) &&\n    !channels.every((c) => c.endsWith('%'))\n  ) {\n    return null\n  }\n\n  const alphaText = legacy ? parts[3] : parts[1]\n  const alpha = alphaText === undefined ? 1 : number(alphaText)\n  if (alpha === null) return null\n\n  if (kind === 'oklch') {\n    const l = number(channels[0] ?? '')\n    // 100% chroma is 0.4 by the specification, not 1.\n    const c = number(channels[1] ?? '', 0.4)\n    const h = number(channels[2] ?? '', 1, true)\n    if (l === null || c === null || h === null) return null\n    return { l: clamp(l), c: Math.max(0, c), h: wrapHue(h), a: clamp(alpha) }\n  }\n\n  if (kind.startsWith('hsl')) {\n    const h = number(channels[0] ?? '', 1, true)\n    const s = number(channels[1] ?? '')\n    const l = number(channels[2] ?? '')\n    if (h === null || s === null || l === null) return null\n    if (!channels[1]?.endsWith('%') || !channels[2]?.endsWith('%')) return null\n    const sat = clamp(s)\n    const light = clamp(l)\n    const amount = sat * Math.min(light, 1 - light)\n    const channel = (n: number) => {\n      const k = (n + wrapHue(h) / 30) % 12\n      return light - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1))\n    }\n    return rgbToColor([channel(0), channel(8), channel(4)], alpha)\n  }\n\n  const values = channels.map((c) => number(c, p3 ? 1 : 255))\n  if (values.some((n) => n === null)) return null\n  return rgbToColor(\n    values.map((n) => (p3 ? (n ?? 0) : clamp((n ?? 0) / 255))) as Triple,\n    alpha,\n    p3 ? 'p3' : 'srgb',\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/lib/numeric.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The three things a numeric control has to do to a typed number, in one place.
+ *
+ * `Slider` and `NumberField` both take a number from a keyboard and both have
+ * to reconcile it with `min`, `max` and `step`. Written twice they drift, and
+ * they drift in the direction nobody tests: a slider that snaps 0.1 + 0.2 to
+ * `0.30000000000000004` and a field beside it that prints `0.3`.
+ *
+ * The step base is `min`, not zero, because that is what the HTML step
+ * algorithm uses — a range from 5 to 100 stepping by 10 lands on 15, not on 10.
+ */
+/**
+ * Decimal places implied by a step.
+ *
+ * Snapping is arithmetic on binary floats, so a value that should be exactly
+ * one step from the last one usually is not. Rounding the result to the step's
+ * own precision is what stops that reaching a readout — and the step's own
+ * precision is the most a caller can have meant.
+ */
+declare function decimalsForStep(step: number): number;
+/** Rounds to the nearest step from `min`, at the step's own precision. */
+declare function snapToStep(value: number, step: number, min?: number): number;
+/** Holds a value inside a range. An inverted range yields its own lower bound. */
+declare function clampToRange(value: number, min: number, max: number): number;
+/**
+ * A typed string as a number, or `null` when it is not one yet.
+ *
+ * `null` rather than `NaN` because the caller has to tell "not a number" from
+ * "not finished being typed" and act the same way on both: leave the committed
+ * value alone. `Number('')` is `0`, which is the trap this exists for — an
+ * emptied box would otherwise commit zero on every keystroke that cleared it.
+ */
+declare function parseNumber(text: string): number | null;
+
+export { clampToRange, decimalsForStep, parseNumber, snapToStep };

package/dist/lib/numeric.js

@@ -0,0 +1,29 @@
+function decimalsForStep(step) {
+  if (!Number.isFinite(step) || step <= 0) return 0;
+  const text = String(step);
+  const exponential = /e-(\d+)$/i.exec(text);
+  if (exponential) return Number(exponential[1]);
+  return text.split(".")[1]?.length ?? 0;
+}
+function snapToStep(value, step, min = 0) {
+  if (!Number.isFinite(step) || step <= 0) return value;
+  const base = Number.isFinite(min) ? min : 0;
+  const snapped = base + Math.round((value - base) / step) * step;
+  return Number(snapped.toFixed(decimalsForStep(step)));
+}
+function clampToRange(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function parseNumber(text) {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  const value = Number(trimmed);
+  return Number.isFinite(value) ? value : null;
+}
+export {
+  clampToRange,
+  decimalsForStep,
+  parseNumber,
+  snapToStep
+};
+//# sourceMappingURL=numeric.js.map

package/dist/lib/numeric.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/numeric.ts"],"sourcesContent":["/**\n * The three things a numeric control has to do to a typed number, in one place.\n *\n * `Slider` and `NumberField` both take a number from a keyboard and both have\n * to reconcile it with `min`, `max` and `step`. Written twice they drift, and\n * they drift in the direction nobody tests: a slider that snaps 0.1 + 0.2 to\n * `0.30000000000000004` and a field beside it that prints `0.3`.\n *\n * The step base is `min`, not zero, because that is what the HTML step\n * algorithm uses — a range from 5 to 100 stepping by 10 lands on 15, not on 10.\n */\n\n/**\n * Decimal places implied by a step.\n *\n * Snapping is arithmetic on binary floats, so a value that should be exactly\n * one step from the last one usually is not. Rounding the result to the step's\n * own precision is what stops that reaching a readout — and the step's own\n * precision is the most a caller can have meant.\n */\nexport function decimalsForStep(step: number): number {\n  if (!Number.isFinite(step) || step <= 0) return 0\n  const text = String(step)\n  // Exponential notation carries its precision in the exponent, and `1e-7` has\n  // no '.' to split on — `String(0.0000001)` is exactly that.\n  const exponential = /e-(\\d+)$/i.exec(text)\n  if (exponential) return Number(exponential[1])\n  return text.split('.')[1]?.length ?? 0\n}\n\n/** Rounds to the nearest step from `min`, at the step's own precision. */\nexport function snapToStep(value: number, step: number, min = 0): number {\n  if (!Number.isFinite(step) || step <= 0) return value\n  const base = Number.isFinite(min) ? min : 0\n  const snapped = base + Math.round((value - base) / step) * step\n  return Number(snapped.toFixed(decimalsForStep(step)))\n}\n\n/** Holds a value inside a range. An inverted range yields its own lower bound. */\nexport function clampToRange(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * A typed string as a number, or `null` when it is not one yet.\n *\n * `null` rather than `NaN` because the caller has to tell \"not a number\" from\n * \"not finished being typed\" and act the same way on both: leave the committed\n * value alone. `Number('')` is `0`, which is the trap this exists for — an\n * emptied box would otherwise commit zero on every keystroke that cleared it.\n */\nexport function parseNumber(text: string): number | null {\n  const trimmed = text.trim()\n  if (trimmed === '') return null\n  const value = Number(trimmed)\n  return Number.isFinite(value) ? value : null\n}\n"],"mappings":"AAoBO,SAAS,gBAAgB,MAAsB;AACpD,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,EAAG,QAAO;AAChD,QAAM,OAAO,OAAO,IAAI;AAGxB,QAAM,cAAc,YAAY,KAAK,IAAI;AACzC,MAAI,YAAa,QAAO,OAAO,YAAY,CAAC,CAAC;AAC7C,SAAO,KAAK,MAAM,GAAG,EAAE,CAAC,GAAG,UAAU;AACvC;AAGO,SAAS,WAAW,OAAe,MAAc,MAAM,GAAW;AACvE,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,EAAG,QAAO;AAChD,QAAM,OAAO,OAAO,SAAS,GAAG,IAAI,MAAM;AAC1C,QAAM,UAAU,OAAO,KAAK,OAAO,QAAQ,QAAQ,IAAI,IAAI;AAC3D,SAAO,OAAO,QAAQ,QAAQ,gBAAgB,IAAI,CAAC,CAAC;AACtD;AAGO,SAAS,aAAa,OAAe,KAAa,KAAqB;AAC5E,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAUO,SAAS,YAAY,MAA6B;AACvD,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,QAAQ,OAAO,OAAO;AAC5B,SAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;","names":[]}

package/dist/lib/overlay-container.d.ts

@@ -7,8 +7,8 @@ interface OverlayContainerProps {
     children: ReactNode;
 }
 /**
- * Redirects every overlay in the subtree — popover, select, menu, tooltip — into
- * a given element instead of `document.body`.
+ * Redirects every overlay in the subtree — popover, select, menu, tooltip,
+ * dialog, sheet — into a given element instead of `document.body`.
  *
  * Two problems, one cause. An overlay portalled to the body is positioned
  * against the VIEWPORT, so inside a bounded frame (a documentation example, a
@@ -20,7 +20,11 @@ interface OverlayContainerProps {
  * inherits what the frame declares, and collides with the frame's edges.
  *
  * The container must be positioned (`relative` is enough) for the panel to be
- * placed against it rather than against the nearest positioned ancestor.
+ * placed against it rather than against the nearest positioned ancestor. The
+ * modal surfaces need it for a second reason: they place themselves with
+ * `position: fixed`, which resolves against the VIEWPORT whatever element they
+ * are portalled into, so a named container switches them to `absolute` — and
+ * an unpositioned container would then hand them the wrong box.
  *
  * @example
  * const [frame, setFrame] = useState<HTMLElement | null>(null)
@@ -31,7 +35,13 @@ interface OverlayContainerProps {
 declare function OverlayContainer({ container, children }: OverlayContainerProps): react.JSX.Element;
 /**
  * The element overlays in this subtree should render into, or `null` for the
- * document body. Every portal in the library reads this.
+ * document body.
+ *
+ * Every portal in the library reads this. That sentence was false for a
+ * release: `Dialog` and `Sheet` rendered the Radix portal with no container and
+ * never called this hook, and their props derive from `Content`, which has no
+ * `container` — so a caller could not pass one either, and every modal example
+ * on the documentation site escaped the preview card it was drawn in.
  */
 declare function useOverlayContainer(): HTMLElement | null;
 

package/dist/lib/overlay-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/overlay-container.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nconst OverlayContainerContext = createContext<HTMLElement | null>(null)\n\nexport interface OverlayContainerProps {\n  /** The element overlays should render into. `null` restores the default. */\n  container: HTMLElement | null\n  children: ReactNode\n}\n\n/**\n * Redirects every overlay in the subtree — popover, select, menu, tooltip — into\n * a given element instead of `document.body`.\n *\n * Two problems, one cause. An overlay portalled to the body is positioned\n * against the VIEWPORT, so inside a bounded frame (a documentation example, a\n * device preview, a canvas) it flips and shifts against edges the reader cannot\n * see, and lands outside the box it belongs to. It also leaves the subtree, so\n * `dir=\"rtl\"` and `data-density` set on that frame stop reaching it.\n *\n * Naming the container fixes both: the panel renders inside the frame,\n * inherits what the frame declares, and collides with the frame's edges.\n *\n * The container must be positioned (`relative` is enough) for the panel to be\n * placed against it rather than against the nearest positioned ancestor.\n *\n * @example\n * const [frame, setFrame] = useState<HTMLElement | null>(null)\n * <div ref={setFrame} className=\"relative\" data-density=\"compact\">\n *   <OverlayContainer container={frame}>{children}</OverlayContainer>\n * </div>\n */\nexport function OverlayContainer({ container, children }: OverlayContainerProps) {\n  return <OverlayContainerContext value={container}>{children}</OverlayContainerContext>\n}\n\n/**\n * The element overlays in this subtree should render into, or `null` for the\n * document body. Every portal in the library reads this.\n */\nexport function useOverlayContainer(): HTMLElement | null {\n  return useContext(OverlayContainerContext)\n}\n"],"mappings":";AAoCS;AAlCT,SAAS,eAAe,kBAAkB;AAG1C,MAAM,0BAA0B,cAAkC,IAAI;AA8B/D,SAAS,iBAAiB,EAAE,WAAW,SAAS,GAA0B;AAC/E,SAAO,oBAAC,2BAAwB,OAAO,WAAY,UAAS;AAC9D;AAMO,SAAS,sBAA0C;AACxD,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}
+{"version":3,"sources":["../../src/lib/overlay-container.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nconst OverlayContainerContext = createContext<HTMLElement | null>(null)\n\nexport interface OverlayContainerProps {\n  /** The element overlays should render into. `null` restores the default. */\n  container: HTMLElement | null\n  children: ReactNode\n}\n\n/**\n * Redirects every overlay in the subtree — popover, select, menu, tooltip,\n * dialog, sheet — into a given element instead of `document.body`.\n *\n * Two problems, one cause. An overlay portalled to the body is positioned\n * against the VIEWPORT, so inside a bounded frame (a documentation example, a\n * device preview, a canvas) it flips and shifts against edges the reader cannot\n * see, and lands outside the box it belongs to. It also leaves the subtree, so\n * `dir=\"rtl\"` and `data-density` set on that frame stop reaching it.\n *\n * Naming the container fixes both: the panel renders inside the frame,\n * inherits what the frame declares, and collides with the frame's edges.\n *\n * The container must be positioned (`relative` is enough) for the panel to be\n * placed against it rather than against the nearest positioned ancestor. The\n * modal surfaces need it for a second reason: they place themselves with\n * `position: fixed`, which resolves against the VIEWPORT whatever element they\n * are portalled into, so a named container switches them to `absolute` — and\n * an unpositioned container would then hand them the wrong box.\n *\n * @example\n * const [frame, setFrame] = useState<HTMLElement | null>(null)\n * <div ref={setFrame} className=\"relative\" data-density=\"compact\">\n *   <OverlayContainer container={frame}>{children}</OverlayContainer>\n * </div>\n */\nexport function OverlayContainer({ container, children }: OverlayContainerProps) {\n  return <OverlayContainerContext value={container}>{children}</OverlayContainerContext>\n}\n\n/**\n * The element overlays in this subtree should render into, or `null` for the\n * document body.\n *\n * Every portal in the library reads this. That sentence was false for a\n * release: `Dialog` and `Sheet` rendered the Radix portal with no container and\n * never called this hook, and their props derive from `Content`, which has no\n * `container` — so a caller could not pass one either, and every modal example\n * on the documentation site escaped the preview card it was drawn in.\n */\nexport function useOverlayContainer(): HTMLElement | null {\n  return useContext(OverlayContainerContext)\n}\n"],"mappings":";AAwCS;AAtCT,SAAS,eAAe,kBAAkB;AAG1C,MAAM,0BAA0B,cAAkC,IAAI;AAkC/D,SAAS,iBAAiB,EAAE,WAAW,SAAS,GAA0B;AAC/E,SAAO,oBAAC,2BAAwB,OAAO,WAAY,UAAS;AAC9D;AAYO,SAAS,sBAA0C;AACxD,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}

package/dist/lib/warn.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Development warnings, written for the reader most likely to hit them.
+ *
+ * The skill in this package documents a handful of ways to misuse a component
+ * that fail SILENTLY — a `Field` whose child is a wrapper wires no label, an
+ * icon-only `Button` with no accessible name renders perfectly and is invisible
+ * to a screen reader. Documentation is the wrong place for those on its own: it
+ * only helps a reader who went looking, and the whole problem is that nothing
+ * told them to look.
+ *
+ * So the component says it, at the moment it happens. The shape follows what an
+ * agent needs to repair its own call without asking anyone: a stable `code` it
+ * can branch on, the `field` that caused it, an imperative one-line `fix`, and
+ * where to get the rest. A message that only says "invalid props" makes an
+ * agent guess, and it guesses by trying things.
+ *
+ * Three constraints this has to keep:
+ *
+ * - **Dev only.** Every call site is behind `process.env.NODE_ENV`, which the
+ *   consumer's bundler replaces and then drops. Nothing here reaches a
+ *   production bundle.
+ * - **Once per problem.** React renders twice in StrictMode and again on every
+ *   state change; a warning printed each time is noise that trains people to
+ *   ignore it.
+ * - **Never throws.** A warning that breaks the render is worse than the bug it
+ *   describes, and this runs during render.
+ */
+/**
+ * True outside a production build, and false when nothing said either way.
+ *
+ * Every bundler replaces `process.env.NODE_ENV` with a literal, which folds
+ * this to `false` and lets the guarded calls below be dropped entirely. Off is
+ * the right default for the case where nothing replaced it: a warning that
+ * reaches a user's console is worse than one an author never sees.
+ */
+declare const DEV: boolean;
+interface Warning {
+    /** Stable identifier. Never reused for a different cause. */
+    code: string;
+    /** What went wrong, in one declarative sentence. */
+    problem: string;
+    /** The prop or child that caused it. */
+    field: string;
+    /** Imperative, and self-sufficient — assume nobody opens the docs. */
+    fix: string;
+    /** The component to ask about. */
+    component: string;
+}
+/**
+ * Print one warning, once.
+ *
+ * Guarded at the call site too, so a production bundle drops the whole
+ * expression rather than the branch inside it.
+ */
+declare function warn({ code, problem, field, fix, component }: Warning): void;
+/** Test seam: the dedupe is global state, and a suite needs it reset. */
+declare function resetWarnings(): void;
+/**
+ * Warn when a prop that is required for accessibility holds nothing usable.
+ *
+ * `Table.caption`, `Progress.label` and their siblings are required in the type
+ * precisely because forgetting them ships a control nobody can use without
+ * sight — and an empty string satisfies the type while satisfying nothing else.
+ * That is exactly the shape a model produces when it knows a prop is mandatory
+ * and has nothing to put in it.
+ *
+ * Not applied to `Avatar.alt`. An empty `alt` is the correct, deliberate markup
+ * for a decorative image, so warning on it would be a false positive on a
+ * pattern the platform endorses.
+ */
+declare function warnBlankName(component: string, field: string, value: unknown, announces: string): void;
+
+export { DEV, resetWarnings, warn, warnBlankName };

package/dist/lib/warn.js

@@ -0,0 +1,38 @@
+const DEV = typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";
+const seen = /* @__PURE__ */ new Set();
+function warn({ code, problem, field, fix, component }) {
+  if (!DEV) return;
+  const key = `${code}:${field}`;
+  if (seen.has(key)) return;
+  seen.add(key);
+  console.warn(
+    [
+      `[@misoto22/design] ${code}`,
+      `  ${problem}`,
+      `  field: ${field}`,
+      `  fix:   ${fix}`,
+      `  docs:  npx misoto22-design docs ${component}`
+    ].join("\n")
+  );
+}
+function resetWarnings() {
+  seen.clear();
+}
+function warnBlankName(component, field, value, announces) {
+  if (!DEV) return;
+  if (typeof value !== "string" || value.trim() !== "") return;
+  warn({
+    code: "REQUIRED_NAME_BLANK",
+    problem: `${component}.${field} is an empty string, so ${announces}. The type is satisfied; nothing else is.`,
+    field: `${component}.${field}`,
+    fix: `Give ${field} the words a person would need to understand this without seeing it.`,
+    component
+  });
+}
+export {
+  DEV,
+  resetWarnings,
+  warn,
+  warnBlankName
+};
+//# sourceMappingURL=warn.js.map

package/dist/lib/warn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/warn.ts"],"sourcesContent":["/**\n * Development warnings, written for the reader most likely to hit them.\n *\n * The skill in this package documents a handful of ways to misuse a component\n * that fail SILENTLY — a `Field` whose child is a wrapper wires no label, an\n * icon-only `Button` with no accessible name renders perfectly and is invisible\n * to a screen reader. Documentation is the wrong place for those on its own: it\n * only helps a reader who went looking, and the whole problem is that nothing\n * told them to look.\n *\n * So the component says it, at the moment it happens. The shape follows what an\n * agent needs to repair its own call without asking anyone: a stable `code` it\n * can branch on, the `field` that caused it, an imperative one-line `fix`, and\n * where to get the rest. A message that only says \"invalid props\" makes an\n * agent guess, and it guesses by trying things.\n *\n * Three constraints this has to keep:\n *\n * - **Dev only.** Every call site is behind `process.env.NODE_ENV`, which the\n *   consumer's bundler replaces and then drops. Nothing here reaches a\n *   production bundle.\n * - **Once per problem.** React renders twice in StrictMode and again on every\n *   state change; a warning printed each time is noise that trains people to\n *   ignore it.\n * - **Never throws.** A warning that breaks the render is worse than the bug it\n *   describes, and this runs during render.\n */\n\n/**\n * `process.env.NODE_ENV`, without pulling Node's types into a browser library.\n *\n * Declared module-locally rather than in a `.d.ts`: an ambient `process` there\n * would travel into the emitted declarations and collide with a consumer's own\n * Node types. The `typeof` guard is what makes it safe in a bundle that never\n * defines it.\n */\ndeclare const process: { env?: { NODE_ENV?: string } } | undefined\n\n/**\n * True outside a production build, and false when nothing said either way.\n *\n * Every bundler replaces `process.env.NODE_ENV` with a literal, which folds\n * this to `false` and lets the guarded calls below be dropped entirely. Off is\n * the right default for the case where nothing replaced it: a warning that\n * reaches a user's console is worse than one an author never sees.\n */\nexport const DEV =\n  typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production'\n\n/** Warnings already printed, keyed by code + detail, so a re-render is quiet. */\nconst seen = new Set<string>()\n\ninterface Warning {\n  /** Stable identifier. Never reused for a different cause. */\n  code: string\n  /** What went wrong, in one declarative sentence. */\n  problem: string\n  /** The prop or child that caused it. */\n  field: string\n  /** Imperative, and self-sufficient — assume nobody opens the docs. */\n  fix: string\n  /** The component to ask about. */\n  component: string\n}\n\n/**\n * Print one warning, once.\n *\n * Guarded at the call site too, so a production bundle drops the whole\n * expression rather than the branch inside it.\n */\nexport function warn({ code, problem, field, fix, component }: Warning): void {\n  if (!DEV) return\n\n  const key = `${code}:${field}`\n  if (seen.has(key)) return\n  seen.add(key)\n\n  console.warn(\n    [\n      `[@misoto22/design] ${code}`,\n      `  ${problem}`,\n      `  field: ${field}`,\n      `  fix:   ${fix}`,\n      `  docs:  npx misoto22-design docs ${component}`,\n    ].join('\\n'),\n  )\n}\n\n/** Test seam: the dedupe is global state, and a suite needs it reset. */\nexport function resetWarnings(): void {\n  seen.clear()\n}\n\n/**\n * Warn when a prop that is required for accessibility holds nothing usable.\n *\n * `Table.caption`, `Progress.label` and their siblings are required in the type\n * precisely because forgetting them ships a control nobody can use without\n * sight — and an empty string satisfies the type while satisfying nothing else.\n * That is exactly the shape a model produces when it knows a prop is mandatory\n * and has nothing to put in it.\n *\n * Not applied to `Avatar.alt`. An empty `alt` is the correct, deliberate markup\n * for a decorative image, so warning on it would be a false positive on a\n * pattern the platform endorses.\n */\nexport function warnBlankName(\n  component: string,\n  field: string,\n  value: unknown,\n  announces: string,\n): void {\n  if (!DEV) return\n  if (typeof value !== 'string' || value.trim() !== '') return\n\n  warn({\n    code: 'REQUIRED_NAME_BLANK',\n    problem: `${component}.${field} is an empty string, so ${announces}. The type is satisfied; nothing else is.`,\n    field: `${component}.${field}`,\n    fix: `Give ${field} the words a person would need to understand this without seeing it.`,\n    component,\n  })\n}\n"],"mappings":"AA8CO,MAAM,MACX,OAAO,YAAY,eAAe,SAAS,KAAK,aAAa;AAG/D,MAAM,OAAO,oBAAI,IAAY;AAqBtB,SAAS,KAAK,EAAE,MAAM,SAAS,OAAO,KAAK,UAAU,GAAkB;AAC5E,MAAI,CAAC,IAAK;AAEV,QAAM,MAAM,GAAG,IAAI,IAAI,KAAK;AAC5B,MAAI,KAAK,IAAI,GAAG,EAAG;AACnB,OAAK,IAAI,GAAG;AAEZ,UAAQ;AAAA,IACN;AAAA,MACE,sBAAsB,IAAI;AAAA,MAC1B,KAAK,OAAO;AAAA,MACZ,YAAY,KAAK;AAAA,MACjB,YAAY,GAAG;AAAA,MACf,qCAAqC,SAAS;AAAA,IAChD,EAAE,KAAK,IAAI;AAAA,EACb;AACF;AAGO,SAAS,gBAAsB;AACpC,OAAK,MAAM;AACb;AAeO,SAAS,cACd,WACA,OACA,OACA,WACM;AACN,MAAI,CAAC,IAAK;AACV,MAAI,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM,GAAI;AAEtD,OAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS,GAAG,SAAS,IAAI,KAAK,2BAA2B,SAAS;AAAA,IAClE,OAAO,GAAG,SAAS,IAAI,KAAK;AAAA,IAC5B,KAAK,QAAQ,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/semantic.css

@@ -105,14 +105,21 @@
      Law 2 — a box-shadow is never blurred. The system has no elevation ramp;
      depth is a hard offset in ink, applied per component. These three resolve
      to nothing on purpose, so a component ported from a shadowed system stays
-     flat instead of drawing a blur the White Reset does not have. Reach for
-     --lift instead, which is the offset idiom expressed once. */
+     flat instead of drawing a blur the White Reset does not have. --lift below
+     is the sanctioned offset idiom for anything that must read as raised. */
   --shadow-color: transparent;
   --shadow-sm: none;
   --shadow: none;
   --shadow-lg: none;
-  /* The one depth cue the system does have: a hard 3px ink offset, no blur.
-     Used by a plate that must read as sitting above the page. */
+  /* The one depth cue the system does have: a hard 3px ink offset, no blur,
+     in the accent rather than a grey because --shadow-offset points at --clay.
+
+     PUBLISHED, NOT CONSUMED. No component in this package sets either one —
+     there is not a single shadow-(--lift) in src/. What the library actually
+     separates with is a hairline, a change of ground, and the reversal that
+     Card variant="plate" reaches for. These two exist so a consumer building a
+     raised plate of their own has the system's answer instead of inventing a
+     blur; do not read them as describing what the library does. */
   --lift: 3px 3px 0 0 var(--shadow-offset);
   --lift-sm: 2px 2px 0 0 var(--shadow-offset);
 
@@ -126,8 +133,12 @@
   --overlay: var(--scrim);
   --disabled-opacity: 0.5;
 
-  /* ─── Stacking ─── five component-facing names onto the seven ranks. ───── */
-  --z-dropdown: var(--z-drawer);
+  /* ─── Stacking ─── two component-facing names onto the seven ranks. ──────
+     The other five ranks are read by their own names; only these two had a
+     component-facing spelling that outlived the rank it pointed at.
+     --z-dropdown pointed at --z-drawer, 100, which put every anchored panel
+     under the modal at 210 that opened it. */
+  --z-dropdown: var(--z-anchored);
   --z-overlay: var(--z-scrim);
 
   /* ─── Diagrams ───────────────────────────────────────────────────────────