@krizaka/ui 3.34.0 → 3.36.0

package/dist/blocks.css

@@ -23,6 +23,50 @@
 /* A frame inside a frame (a Section in a TocLayout, a Page in a card) adds no second pair of gutters. */
 .kz-frame .kz-frame { --kz-gutter: 0px; }
 
+/* ─── Paper (Cahier, ADR-004): the notebook under a page or a section ───
+   `data-paper="ruled"` — the French Seyès ruling: a strong line every 32 px (--kz-paper-module), three fine lines between
+   (--kz-paper-line) and the verticals; `data-paper="lines"` — the lines only, for a page to read. `data-margin` — the red
+   margin line on the left, where `.kz-heading-number` (§ 2) and `.kz-margin-note` hang on a wide screen. The ruling is
+   drawn by the element (backgrounds), never by an image: dark (slate) and light (paper) alike. */
+[data-paper="ruled"] {
+  background-image:
+    linear-gradient(to bottom, var(--kz-paper-rule-major) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--kz-paper-rule-minor) 1px, transparent 1px),
+    linear-gradient(to right, var(--kz-paper-rule-minor) 1px, transparent 1px);
+  background-size: 100% var(--kz-paper-module, 32px), 100% var(--kz-paper-line, 8px), var(--kz-paper-module, 32px) 100%;
+}
+[data-paper="lines"] {
+  background-image:
+    linear-gradient(to bottom, var(--kz-paper-rule-major) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--kz-paper-rule-minor) 1px, transparent 1px);
+  background-size: 100% var(--kz-paper-module, 32px), 100% var(--kz-paper-line, 8px);
+}
+[data-margin] { position: relative; --kz-margin-x: max(8px, calc(var(--kz-gutter, 16px) - 12px)); }
+[data-margin]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: var(--kz-margin-x);
+  width: 1.5px;
+  background: var(--kz-paper-rule-margin);
+  opacity: 0.8;
+  pointer-events: none;
+}
+.kz-frame[data-margin] { --kz-margin-x: max(8px, calc(var(--kz-gutter) - 12px)); }
+.kz-heading-number,
+.kz-margin-note {
+  font-family: var(--kz-font-mono);
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--kz-paper-rule-margin);
+}
+.kz-margin-note { color: var(--kz-text-secondary); }
+@media (min-width: 1180px) {
+  .kz-heading { position: relative; }
+  .kz-heading-number { position: absolute; right: calc(100% + 28px); top: 0.55em; white-space: nowrap; }
+  .kz-margin-note { position: absolute; right: calc(100% + 28px); width: 12ch; text-align: right; }
+}
+
 /* Section: the content in the frame, a space above and below; `divider` draws the hairline between two sections (the
    transition), inside the gutters. */
 .kz-section { --kz-section-space: clamp(48px, 7vw, 88px); position: relative; }
@@ -34,17 +78,20 @@
 }
 .kz-section :is(h2, h3)[id] { scroll-margin-top: var(--kz-anchor-offset, 96px); }
 
+/* Cahier (ADR-004, #417): the eyebrow is a note in the margin's voice — the typewriter face, lower case, untracked,
+   inked in the margin red. No more uppercase tracked overline above every heading. */
 .kz-eyebrow {
   margin: 0;
   display: inline-flex;
-  align-items: center;
-  gap: 10px;
+  align-items: baseline;
+  gap: 8px;
   font-family: var(--kz-font-mono);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--kz-hue-text, var(--kz-accent-text));
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--kz-paper-rule-margin, var(--kz-hue-text, var(--kz-accent-text)));
 }
 .kz-label {
   margin: 0;
@@ -52,10 +99,10 @@
   align-items: center;
   gap: 6px;
   font-family: var(--kz-font-mono);
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-size: 12.5px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
   color: var(--kz-text-secondary);
 }
 .kz-heading { margin-bottom: clamp(24px, 3vw, 36px); display: grid; gap: 12px; }
@@ -68,8 +115,8 @@
   max-width: 24ch;
   font-family: var(--kz-font-display);
   font-size: clamp(1.6rem, 3.6vw, 2.3rem);
-  font-weight: 800;
-  letter-spacing: -0.028em;
+  font-weight: 400;
+  letter-spacing: -0.01em;
   line-height: 1.15;
   color: var(--kz-text-primary);
   text-wrap: balance;
@@ -156,8 +203,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   margin: 10px 0 0;
   font-family: var(--kz-font-display);
   font-size: clamp(2rem, 5.4vw, 3.1rem);
-  font-weight: 800;
-  letter-spacing: -0.035em;
+  font-weight: 400;
+  letter-spacing: -0.01em;
   line-height: 1.08;
   color: var(--kz-text-primary);
   text-wrap: balance;
@@ -182,7 +229,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-foundation-base { position: relative; display: grid; min-width: 0; }
 .kz-foundation-base::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 28px; background: var(--kz-rail); }
 .kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: 24px; }
-.kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
+.kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0; text-transform: none; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
 .kz-foundation[data-position="end"] .kz-foundation-base { order: 2; }
 .kz-foundation[data-position="end"] .kz-foundation-group { order: 1; margin-top: 0; margin-bottom: 28px; }
 .kz-foundation[data-position="end"] .kz-foundation-base::after { top: auto; bottom: 100%; }
@@ -256,8 +303,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
    keeps its status and its link on one line. `data-footer="top"` keeps them under the text. */
 .kz-link-card-foot { display: grid; gap: 5px; margin-top: auto; }
 .kz-link-card[data-footer="top"] .kz-link-card-foot { margin-top: 0; }
-.kz-link-card-meta { margin: 0; font-family: var(--kz-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-hue-text, var(--kz-accent-text)); }
-.kz-link-card-title { margin: 0; font-family: var(--kz-font-display); font-size: 16.5px; font-weight: 750; letter-spacing: -0.012em; line-height: 1.3; color: var(--kz-text-primary); }
+.kz-link-card-meta { margin: 0; font-family: var(--kz-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kz-hue-text, var(--kz-accent-text)); }
+.kz-link-card-title { margin: 0; font-family: var(--kz-font-display); font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; color: var(--kz-text-primary); }
 .kz-link-card-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kz-text-secondary); }
 .kz-link-card-extra { margin-top: 6px; }
 .kz-link-card-cta {
@@ -280,7 +327,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-arg .kz-block-icon { width: 40px; height: 40px; }
 .kz-arg-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
 .kz-arg-id { min-width: 0; }
-.kz-arg-title { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--kz-text-primary); }
+.kz-arg-title { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--kz-text-primary); }
 .kz-arg-meta { margin: 3px 0 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .kz-arg-mark { margin-left: auto; align-self: flex-start; margin-top: -6px; margin-right: -4px; flex-shrink: 0; --kz-accent: var(--kz-hue, var(--kz-accent)); }
 .kz-arg-line { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--kz-text-primary); text-wrap: pretty; }
@@ -352,7 +399,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   top: 6px;
   font-family: var(--kz-font-display), Georgia, serif;
   font-size: 44px;
-  font-weight: 800;
+  font-weight: 400;
   line-height: 1;
   color: var(--kz-hue, var(--kz-accent));
 }
@@ -377,15 +424,14 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   font-family: var(--kz-font-mono);
   font-size: 10.5px;
   font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  letter-spacing: 0; text-transform: none;
   color: var(--kz-hue-text, var(--kz-accent-text));
 }
 .kz-quote-bird { flex-shrink: 0; --kz-accent: var(--kz-hue, var(--kz-accent)); }
 .kz-quote[data-variant="callout"] blockquote { padding: 24px 26px 24px 68px; border-radius: 22px 22px 22px 8px; }
 .kz-quote[data-variant="callout"] blockquote::before { left: 18px; top: 12px; font-size: 72px; }
 .kz-quote[data-variant="callout"] blockquote::after { left: 36px; bottom: -8px; width: 14px; height: 14px; }
-.kz-quote[data-variant="callout"] blockquote p { font-family: var(--kz-font-display); font-size: clamp(16px, 2vw, 19px); font-weight: 600; line-height: 1.55; letter-spacing: -0.005em; }
+.kz-quote[data-variant="callout"] blockquote p { font-family: var(--kz-font-display); font-size: clamp(16px, 2vw, 19px); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; }
 .kz-quote[data-variant="callout"] figcaption { gap: 12px; padding-left: 14px; font-size: 11px; }
 @media (max-width: 480px) {
   .kz-quote[data-variant="callout"] blockquote { padding: 50px 20px 20px; }
@@ -400,7 +446,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* ─── DecisionList: one card per decision — what was chosen, large; refused · because · what it costs, side by side ─── */
 .kz-decisions { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
 .kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius: 18px; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
-.kz-decision-n { font-family: var(--kz-font-display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--kz-hue-text, var(--kz-accent-text)); }
+.kz-decision-n { font-family: var(--kz-font-display); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--kz-hue-text, var(--kz-accent-text)); }
 .kz-decision-body { display: grid; gap: 14px; min-width: 0; }
 .kz-decision-part p:not(.kz-label) { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
 .kz-decision-part[data-part="chose"] .kz-label { color: var(--kz-success-text); }
@@ -432,7 +478,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border-bottom: 1px solid var(--kz-border-subtle);
 }
 .kz-code-file { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.kz-code-lang { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-text-primary); background: var(--kz-surface-3); }
+.kz-code-lang { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--kz-text-primary); background: var(--kz-surface-3); }
 .kz-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 1.7; color: var(--kz-text-primary); tab-size: 2; }
 .kz-code pre:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: -2px; }
 /* The code's colours: TanStack Highlight's `th-*` classes on the tokens' text roles (each ≥ 4.5:1 on the code surface,
@@ -463,7 +509,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
 .kz-md > * { margin-block: 0; }
 .kz-md > * + * { margin-top: 0.9em; }
-.kz-md h1, .kz-md h2, .kz-md h3, .kz-md h4, .kz-md h5, .kz-md h6 { font-family: var(--kz-font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
+.kz-md h1, .kz-md h2, .kz-md h3, .kz-md h4, .kz-md h5, .kz-md h6 { font-family: var(--kz-font-display); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
 .kz-md > * + :is(h1, h2, h3) { margin-top: 1.6em; }
 .kz-md h1 { font-size: 1.7em; } .kz-md h2 { font-size: 1.35em; } .kz-md h3 { font-size: 1.15em; } .kz-md h4, .kz-md h5, .kz-md h6 { font-size: 1em; }
 .kz-md a { color: var(--kz-accent-text); text-decoration: underline; text-underline-offset: 3px; }
@@ -553,7 +599,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, var(--kz-border-default));
 }
 .kz-cta-text { min-width: 0; flex: 1 1 320px; }
-.kz-cta-title { margin: 0 0 6px; font-family: var(--kz-font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.015em; color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
+.kz-cta-title { margin: 0 0 6px; font-family: var(--kz-font-display); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
 .kz-cta-body { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.65; color: var(--kz-text-secondary); }
 .kz-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
 
@@ -603,7 +649,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-band { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-block: 1px solid var(--kz-border-subtle); }
 .kz-tpl-band > div { padding: 20px 18px; border-left: 1px solid var(--kz-border-subtle); }
 .kz-tpl-band > div:first-child { border-left: 0; }
-.kz-tpl-band dt { font-family: var(--kz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--kz-text-primary); }
+.kz-tpl-band dt { font-family: var(--kz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); }
 .kz-tpl-band dd { margin: 4px 0 0; font-size: 13px; color: var(--kz-text-secondary); }
 @media (max-width: 560px) { .kz-tpl-band > div { border-left: 0; border-top: 1px solid var(--kz-border-subtle); } .kz-tpl-band > div:first-child { border-top: 0; } }
 
@@ -613,7 +659,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
 .kz-tpl-bento > li[data-size="lg"] { grid-column: span 4; grid-row: span 2; background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 7%, var(--kz-surface-1)); }
 .kz-tpl-bento > li[data-size="md"] { grid-column: span 3; }
-.kz-tpl-bento h3 { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.012em; color: var(--kz-text-primary); }
+.kz-tpl-bento h3 { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); }
 .kz-tpl-bento > li[data-size="lg"] h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
 .kz-tpl-bento p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
 .kz-tpl-bento-visual { margin-top: auto; min-width: 0; }
@@ -625,9 +671,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   background: linear-gradient(var(--kz-hue, var(--kz-accent)), color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 10%, transparent)); }
 .kz-tpl-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
 .kz-tpl-step-n { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px;
-  font-family: var(--kz-font-display); font-size: 16px; font-weight: 800; color: var(--kz-text-primary); background: var(--kz-surface-1);
+  font-family: var(--kz-font-display); font-size: 16px; font-weight: 400; color: var(--kz-text-primary); background: var(--kz-surface-1);
   border: 2px solid var(--kz-hue, var(--kz-accent)); box-shadow: 0 0 0 6px var(--kz-surface-0); }
-.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 400; color: var(--kz-text-primary); }
 .kz-tpl-step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kz-text-secondary); }
 .kz-tpl-step-visual { min-width: 0; }
 .kz-tpl-step:nth-child(even) .kz-tpl-step-visual { order: -1; grid-column: 2; }
@@ -658,7 +704,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   background: linear-gradient(160deg, color-mix(in srgb, var(--kz-accent) 14%, var(--kz-surface-1)), var(--kz-surface-1) 55%);
   border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, var(--kz-border-default)); }
 .kz-tpl-collection-head { display: flex; align-items: center; gap: 10px; }
-.kz-tpl-collection-head a { font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); text-decoration: none; }
+.kz-tpl-collection-head a { font-family: var(--kz-font-display); font-size: 18px; font-weight: 400; color: var(--kz-text-primary); text-decoration: none; }
 .kz-tpl-collection-head a::after { content: ""; position: absolute; inset: 0; z-index: -1; }
 .kz-tpl-collection-head a:focus-visible { outline: none; }
 .kz-tpl-collection:has(.kz-tpl-collection-head a:focus-visible) { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
@@ -691,7 +737,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--kz-border-strong); }
 .kz-tpl-crumbs a { color: inherit; text-decoration: none; }
 .kz-tpl-crumbs a:hover { color: var(--kz-text-primary); }
-.kz-tpl-article-title { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--kz-text-primary); }
+.kz-tpl-article-title { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--kz-text-primary); }
 .kz-tpl-article-lead { margin: 12px 0 0; max-width: 46rem; font-size: 17px; line-height: 1.65; color: var(--kz-text-secondary); }
 .kz-tpl-article-meta { margin-top: 14px; }
 .kz-tpl-prose { max-width: 46rem; font-size: 16px; line-height: 1.75; color: var(--kz-text-secondary); }
@@ -702,7 +748,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-pager a:hover { border-color: var(--kz-accent); }
 .kz-tpl-pager a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
 .kz-tpl-pager a[rel="next"] { grid-column: 2; text-align: right; }
-.kz-tpl-pager small { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-text-secondary); }
+.kz-tpl-pager small { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--kz-text-secondary); }
 
 /* A catalogue: the filters in a sticky column (folded above the results on a phone). */
 .kz-tpl-catalogue { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 32px; align-items: start; }
@@ -730,14 +776,14 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* A long read: chapters with their big numbers, pull quotes in the margin, figures that break out. */
 .kz-tpl-chapters { display: grid; gap: clamp(40px, 7vw, 88px); }
 .kz-tpl-chapter { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 42rem) minmax(0, 1fr); gap: 24px 32px; }
-.kz-tpl-chapter-n { font-family: var(--kz-font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
+.kz-tpl-chapter-n { font-family: var(--kz-font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.01em;
   color: transparent; -webkit-text-stroke: 1.5px var(--kz-hue, var(--kz-accent)); }
-.kz-tpl-chapter h2 { margin: 0 0 14px; font-family: var(--kz-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
+.kz-tpl-chapter h2 { margin: 0 0 14px; font-family: var(--kz-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15;
   color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
 .kz-tpl-chapter-body { font-size: 17px; line-height: 1.8; color: var(--kz-text-secondary); }
 .kz-tpl-chapter-body p { margin: 0 0 1em; }
 .kz-tpl-chapter-aside { align-self: start; padding-top: 8px; }
-.kz-tpl-pull { margin: 0; padding-left: 16px; border-left: 3px solid var(--kz-hue, var(--kz-accent)); font-family: var(--kz-font-display); font-size: 19px; font-weight: 700;
+.kz-tpl-pull { margin: 0; padding-left: 16px; border-left: 3px solid var(--kz-hue, var(--kz-accent)); font-family: var(--kz-font-display); font-size: 19px; font-weight: 400;
   line-height: 1.4; color: var(--kz-text-primary); }
 .kz-tpl-chapter-figure { grid-column: 2 / -1; margin: 8px 0 0; }
 @media (max-width: 1023px) {
@@ -751,10 +797,10 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-log-entry:first-child { border-top: 0; }
 .kz-tpl-log-when { position: sticky; top: var(--kz-anchor-offset, 96px); align-self: start; display: grid; gap: 6px; }
 .kz-tpl-log-when time { font-family: var(--kz-font-mono); font-size: 12.5px; color: var(--kz-text-secondary); }
-.kz-tpl-log-entry :is(h2, h3) { margin: 0 0 10px; font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-log-entry :is(h2, h3) { margin: 0 0 10px; font-family: var(--kz-font-display); font-size: 19px; font-weight: 400; color: var(--kz-text-primary); }
 .kz-tpl-log-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
 .kz-tpl-log-items li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--kz-text-secondary); }
-.kz-tpl-log-kind { font-family: var(--kz-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
+.kz-tpl-log-kind { font-family: var(--kz-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; padding-top: 3px; }
 .kz-tpl-log-kind[data-kind="added"] { color: var(--kz-success-text); }
 .kz-tpl-log-kind[data-kind="changed"] { color: var(--kz-accent-text); }
 .kz-tpl-log-kind[data-kind="fixed"] { color: var(--kz-warning-text); }
@@ -783,7 +829,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-state[data-state="operational"] { border-color: color-mix(in srgb, var(--kz-success) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-success) 7%, var(--kz-surface-1)); }
 .kz-tpl-state[data-state="degraded"] { border-color: color-mix(in srgb, var(--kz-warning) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-warning) 7%, var(--kz-surface-1)); }
 .kz-tpl-state[data-state="outage"] { border-color: color-mix(in srgb, var(--kz-danger) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-danger) 7%, var(--kz-surface-1)); }
-.kz-tpl-state strong { font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-state strong { font-family: var(--kz-font-display); font-size: 19px; font-weight: 400; color: var(--kz-text-primary); }
 .kz-tpl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--kz-text-secondary); }
 [data-state="operational"] > .kz-tpl-dot, .kz-tpl-dot[data-state="operational"] { background: var(--kz-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kz-success) 22%, transparent); }
 [data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
@@ -797,9 +843,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* An error: the code, huge and drawn in outline, the bird beside it, the ways out under it. */
 .kz-tpl-error { display: grid; justify-items: center; gap: 16px; padding-block: calc(var(--kz-hero-top, 120px) - 16px) clamp(48px, 8vw, 96px); text-align: center; }
-.kz-tpl-error .kz-tpl-error-code { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-family: var(--kz-font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 800;
-  line-height: 0.9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--kz-hue, var(--kz-accent)); }
-.kz-tpl-error h1 { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.025em; color: var(--kz-text-primary); }
+.kz-tpl-error .kz-tpl-error-code { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-family: var(--kz-font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 400;
+  line-height: 0.9; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 2px var(--kz-hue, var(--kz-accent)); }
+.kz-tpl-error h1 { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); }
 .kz-tpl-error p:not(.kz-tpl-error-code) { margin: 0; max-width: 34rem; font-size: 16px; line-height: 1.65; color: var(--kz-text-secondary); }
 .kz-tpl-error-search { width: min(100%, 28rem); }
 
@@ -809,8 +855,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border: 1px solid var(--kz-border-default); }
 .kz-tpl-plan[data-featured] { border-color: var(--kz-accent); background: linear-gradient(170deg, color-mix(in srgb, var(--kz-accent) 12%, var(--kz-surface-1)), var(--kz-surface-1) 60%);
   box-shadow: 0 30px 60px -36px var(--kz-accent); }
-.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); }
-.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--kz-text-primary); }
+.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 400; color: var(--kz-text-primary); }
+.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--kz-text-primary); }
 .kz-tpl-price small { display: block; margin-top: 6px; font-family: var(--kz-font-text, inherit); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kz-text-secondary); }
 .kz-tpl-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--kz-text-secondary); }
 .kz-tpl-plan ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
@@ -818,7 +864,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-plan > :last-child { margin-top: auto; }
 .kz-tpl-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
 .kz-tpl-compare th, .kz-tpl-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--kz-border-subtle); color: var(--kz-text-secondary); }
-.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
+.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
 .kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
 .kz-tpl-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-faq { display: grid; gap: 8px; }
@@ -841,3 +887,154 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-plan .kz-tpl-collection-head { justify-content: space-between; }
 .kz-tpl-scroll:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
 .kz-tpl-prose > p, .kz-tpl-prose > ul, .kz-tpl-prose > ol { margin: 0 0 1em; }
+
+/* ─── The Cahier's signature blocks (ADR-004, #417): the specimen tag, the stamp, the bird plate, the anatomy plate,
+   the index, the caption and the footnotes. Paper and ink on the --kz-paper-* roles; nothing blurs, nothing glows. ─── */
+
+/* SpecimenTag — manila, an eyelet, a typed record. `data-mount="hang"`: a string from the wire above. */
+.kz-tag {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 40px 20px 16px;
+  color: var(--kz-paper-tag-ink);
+  background: var(--kz-paper-tag);
+  border: 1px solid var(--kz-paper-tag-edge);
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  corner-shape: bevel;
+  box-shadow: var(--kz-shadow-raised);
+}
+.kz-tag-eyelet {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  margin-left: -7px;
+  border-radius: 9999px;
+  background: var(--kz-surface-0);
+  box-shadow: inset 0 0 0 3px var(--kz-paper-tag-edge);
+}
+.kz-tag[data-mount="hang"] { margin-top: 32px; }
+.kz-tag[data-mount="hang"]::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: -33px;
+  height: 52px;
+  border-left: 1.5px solid var(--kz-text-secondary);
+  opacity: 0.75;
+}
+.kz-tag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
+.kz-tag-code { font-family: var(--kz-font-mono); font-size: 12.5px; font-weight: 700; line-height: 16px; }
+.kz-tag-title { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--kz-font-display); font-weight: 400; font-size: 26px; line-height: 32px; color: inherit; }
+.kz-tag-mark { display: inline-flex; flex-shrink: 0; }
+.kz-tag-mark > svg, .kz-tag-mark > img { width: 32px; height: 32px; }
+.kz-tag-body { font-size: 15px; line-height: 22px; }
+.kz-tag-body > p { margin: 0; }
+.kz-tag-fields { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; font-family: var(--kz-font-mono); font-size: 13px; line-height: 24px; }
+.kz-tag-fields > div { display: contents; }
+.kz-tag-fields dt { opacity: 0.72; }
+.kz-tag-fields dd { margin: 0; font-weight: 700; border-bottom: 1px dashed var(--kz-paper-tag-edge); overflow-wrap: anywhere; }
+.kz-tag-foot { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; border-top: 1px dashed var(--kz-paper-tag-edge); }
+.kz-tag-foot a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
+
+/* Stamp — a rubber stamp: lower case, double-ruled, askew; the tone is its ink. */
+.kz-stamp {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 3px 8px 2px;
+  font-family: var(--kz-font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  white-space: nowrap;
+  color: var(--kz-stamp-ink, var(--kz-text-primary));
+  border: 2px solid currentColor;
+  border-radius: 2px;
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+  transform: rotate(-3deg);
+}
+.kz-stamp[data-tone="ok"] { --kz-stamp-ink: var(--kz-success-text); }
+.kz-stamp[data-tone="wip"] { --kz-stamp-ink: var(--kz-text-secondary); }
+.kz-stamp[data-tone="construction"] { --kz-stamp-ink: var(--kz-paper-rule-margin); }
+.kz-tag .kz-stamp[data-tone="wip"], .kz-tag .kz-stamp[data-tone="neutral"] { --kz-stamp-ink: var(--kz-paper-tag-ink); }
+/* On the manila (or the slate tag), the margin's red is mixed with the tag's ink so a small stamp stays ≥ 4.5:1 (axe). */
+.kz-tag .kz-stamp[data-tone="construction"] { --kz-stamp-ink: color-mix(in oklab, var(--kz-paper-rule-margin) 72%, var(--kz-paper-tag-ink)); }
+
+/* BirdPlate and AnatomyPlate — a sheet of the field guide. */
+.kz-plate, .kz-anatomy {
+  margin: 0;
+  padding: 20px 24px 24px;
+  background: var(--kz-surface-1);
+  border: 1px solid var(--kz-border-default);
+  box-shadow: var(--kz-shadow-md);
+}
+.kz-plate-head, .kz-anatomy-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
+.kz-plate-title { font-family: var(--kz-font-display); font-size: 22px; line-height: 32px; font-weight: 400; color: var(--kz-text-primary); }
+.kz-plate-sub { font-family: var(--kz-font-mono); font-size: 13px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-plate-figures { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 20px; }
+.kz-plate-figure { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
+.kz-plate-bird { width: 112px; height: 112px; }
+.kz-plate-caption { position: relative; margin: 0; padding-top: 22px; max-width: 24ch; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-plate-caption b { display: block; font-weight: 700; color: var(--kz-text-primary); }
+.kz-plate-caption::before { content: ""; position: absolute; top: 2px; left: 50%; height: 16px; border-left: 1px solid var(--kz-text-secondary); }
+.kz-plate-caption::after { content: ""; position: absolute; top: 0; left: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: 9999px; background: var(--kz-paper-rule-margin); }
+.kz-plate[data-layout="single"] .kz-plate-figures { grid-template-columns: 1fr; }
+.kz-plate[data-layout="single"] .kz-plate-figure { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 32px; }
+.kz-plate[data-layout="single"] .kz-plate-bird { width: 168px; height: 168px; }
+.kz-plate[data-layout="single"] .kz-plate-caption { padding: 0 0 0 4px; max-width: 32ch; font-size: 13.5px; line-height: 20px; }
+.kz-plate[data-layout="single"] .kz-plate-caption::before { top: 50%; left: -28px; height: 0; width: 26px; border-left: 0; border-top: 1px solid var(--kz-text-secondary); }
+.kz-plate[data-layout="single"] .kz-plate-caption::after { top: calc(50% - 2.5px); left: -31px; }
+
+.kz-anatomy-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 56px; min-height: 240px; }
+.kz-anatomy-specimen { display: grid; place-items: center; padding: 40px 24px; }
+.kz-anatomy-scale { transform: scale(var(--kz-anatomy-scale, 1.6)); transform-origin: center; }
+.kz-anatomy-parts { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
+.kz-anatomy-part { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-anatomy-part b { font-weight: 700; color: var(--kz-paper-rule-margin); }
+.kz-anatomy-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--kz-paper-rule-margin); border-radius: 9999px; font-family: var(--kz-font-text); font-size: 12px; font-weight: 700; color: var(--kz-paper-rule-margin); }
+.kz-anatomy-parts[data-side="left"] .kz-anatomy-part::after,
+.kz-anatomy-parts[data-side="right"] .kz-anatomy-part::after { content: ""; position: absolute; top: 12px; width: 44px; border-top: 1px solid var(--kz-text-secondary); }
+.kz-anatomy-parts[data-side="left"] .kz-anatomy-part::after { right: -52px; }
+.kz-anatomy-parts[data-side="right"] .kz-anatomy-part::after { left: -52px; }
+@media (max-width: 720px) {
+  .kz-anatomy-stage { grid-template-columns: 1fr; gap: 16px; }
+  .kz-anatomy-specimen { order: -1; padding: 24px 0; }
+  .kz-anatomy-scale { transform: none; }
+  .kz-anatomy-parts { gap: 16px; }
+  .kz-anatomy-parts[data-side] .kz-anatomy-part::after { display: none; }
+  .kz-plate[data-layout="single"] .kz-plate-figure { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
+  .kz-plate[data-layout="single"] .kz-plate-caption { padding-top: 22px; }
+  .kz-plate[data-layout="single"] .kz-plate-caption::before { top: 2px; left: 50%; height: 16px; width: 0; border-top: 0; border-left: 1px solid var(--kz-text-secondary); }
+  .kz-plate[data-layout="single"] .kz-plate-caption::after { top: 0; left: calc(50% - 2.5px); }
+}
+
+/* PageIndex — a book's index: dotted leaders and page numbers; the current entry marked in the margin. */
+.kz-index { font-size: 15px; line-height: 24px; }
+.kz-index-group + .kz-index-group { margin-top: 16px; }
+.kz-index-title { margin: 0 0 4px; font-family: var(--kz-font-mono); font-size: 12.5px; font-weight: 700; line-height: 24px; color: var(--kz-paper-rule-margin); }
+.kz-index ul { margin: 0; padding: 0; list-style: none; }
+.kz-index-entry { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 4px 0; color: var(--kz-text-secondary); text-decoration: none; }
+.kz-index-entry:hover { color: var(--kz-text-primary); }
+.kz-index-entry:focus-visible { outline: var(--kz-ring-width, 2px) solid var(--kz-ring); outline-offset: 2px; }
+.kz-index-label { min-width: 0; }
+.kz-index-leader { flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--kz-text-muted); transform: translateY(-4px); }
+.kz-index-page { font-family: var(--kz-font-mono); font-size: 12.5px; color: var(--kz-text-secondary); font-variant-numeric: tabular-nums; }
+.kz-index-entry[aria-current="page"] { color: var(--kz-text-primary); font-weight: 700; }
+.kz-index-entry[aria-current="page"]::before { content: "→"; position: absolute; left: -20px; color: var(--kz-paper-rule-margin); font-weight: 400; }
+
+/* Caption, footnote refs and the notes — the small print. */
+.kz-caption { display: block; margin: 8px 0 0; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-caption-figure { font-weight: 700; color: var(--kz-text-primary); }
+.kz-fnref { line-height: 0; }
+.kz-fnref a { padding: 0 1px; font-family: var(--kz-font-mono); font-size: 0.72em; font-weight: 700; color: var(--kz-paper-rule-margin); text-decoration: none; }
+.kz-fnref a:hover { text-decoration: underline; }
+.kz-footnotes { margin-top: 24px; padding-top: 12px; font-size: 13.5px; line-height: 20px; color: var(--kz-text-secondary); background: linear-gradient(var(--kz-text-secondary), var(--kz-text-secondary)) top left / 12ch 1px no-repeat; }
+.kz-footnotes ol { margin: 0; padding-left: 1.6em; display: grid; gap: 6px; }
+.kz-footnotes li::marker { font-family: var(--kz-font-mono); color: var(--kz-paper-rule-margin); }
+.kz-fn-back { color: var(--kz-accent-text); text-decoration: none; }

package/dist/checkbox.js

@@ -8,7 +8,7 @@ var checkbox = tv({
   slots: {
     root: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent aria-invalid:border-danger aria-invalid:ring-danger/30",
     indicator: "flex items-center justify-center",
-    label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60"
+    label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70"
   }
 });
 function Check() {

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/checkbox/checkbox.tsx"],"sourcesContent":["// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60\",\n  },\n});\n\nfunction Check() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAkBb,cAsCF,YAtCE;AAhBC,IAAM,WAAW,GAAG;AAAA,EACzB,OAAO;AAAA,IACL,MACE;AAAA,IAKF,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;AAED,SAAS,QAAQ;AACf,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACzJ,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAEJ;AAEA,SAAS,OAAO;AACd,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,YAAW,GACrB;AAEJ;AAWO,SAAS,SAAS,EAAE,SAAS,WAAW,UAAU,GAAG,MAAM,GAAkB;AAClF,QAAM,IAAI,SAAS;AACnB,QAAM,MACJ;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC;AAAA,MAC/D,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAW,EAAE,UAAU,GACjD,gBAAM,YAAY,kBAAkB,oBAAC,QAAK,IAAK,oBAAC,SAAM,GACzD;AAAA;AAAA,EACF;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;","names":[]}
+{"version":3,"sources":["../src/checkbox/checkbox.tsx"],"sourcesContent":["// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n  },\n});\n\nfunction Check() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAkBb,cAsCF,YAtCE;AAhBC,IAAM,WAAW,GAAG;AAAA,EACzB,OAAO;AAAA,IACL,MACE;AAAA,IAKF,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;AAED,SAAS,QAAQ;AACf,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACzJ,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAEJ;AAEA,SAAS,OAAO;AACd,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,YAAW,GACrB;AAEJ;AAWO,SAAS,SAAS,EAAE,SAAS,WAAW,UAAU,GAAG,MAAM,GAAkB;AAClF,QAAM,IAAI,SAAS;AACnB,QAAM,MACJ;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC;AAAA,MAC/D,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAW,EAAE,UAAU,GACjD,gBAAM,YAAY,kBAAkB,oBAAC,QAAK,IAAK,oBAAC,SAAM,GACzD;AAAA;AAAA,EACF;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;","names":[]}

package/dist/chip-row.js

@@ -13,7 +13,7 @@ var chipRow = tv({
     hint: "text-xs text-fg-muted",
     list: "m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]",
     item: "snap-start",
-    badge: "rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-fg-muted"
+    badge: "rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold leading-none text-fg-muted"
   }
 });
 var s = chipRow();

package/dist/chip-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip-row/chip-row.tsx"],"sourcesContent":["// Client (arrow-key focus only). A row of chip links that scrolls sideways with scroll-snap on a phone (the trailing edge\n// fades, no scrollbar) and wraps from `md`: an audience picker, the filters of a page. Each item is a `ChipLink`-style\n// link at least 44 px high; the current one carries `aria-current`. Tab goes through the links; ← → Home End move between them.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { chipVariants } from \"../chip-link\";\n\nexport const chipRow = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-2\",\n    hint: \"text-xs text-fg-muted\",\n    list:\n      \"m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n      \"[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]\",\n    item: \"snap-start\",\n    badge: \"rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-fg-muted\",\n  },\n});\n\nconst s = chipRow();\n\nexport type ChipRowProps = Omit<React.ComponentProps<\"nav\">, \"aria-label\"> & {\n  /** What the links choose among (\"For whom?\"): the row's accessible name, passed translated. */\n  label: string;\n  /** A line under the label that says how to choose; read with the row. */\n  hint?: React.ReactNode;\n};\n\n/** A scroll-snap row of chip links; wraps from `md`. Items: `ChipRow.Item`. */\nfunction ChipRowRoot({ label, hint, className, children, ...props }: ChipRowProps) {\n  const id = React.useId();\n  const list = React.useRef<HTMLUListElement>(null);\n  const move = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const keys = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n    if (!keys.includes(event.key)) return;\n    const links = [...(list.current?.querySelectorAll<HTMLElement>(\"a[href],button:not([disabled])\") ?? [])];\n    const at = links.indexOf(event.target as HTMLElement);\n    if (at < 0) return;\n    const last = links.length - 1;\n    const to = event.key === \"Home\" ? 0 : event.key === \"End\" ? last : Math.min(last, Math.max(0, at + (event.key === \"ArrowRight\" ? 1 : -1)));\n    event.preventDefault();\n    links[to]?.focus();\n    links[to]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  };\n  return (\n    <nav aria-label={label} aria-describedby={hint ? `${id}-hint` : undefined} className={s.root({ className })} {...props}>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      <ul ref={list} className={s.list()} onKeyDown={move}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport type ChipRowItemProps = React.ComponentProps<\"a\"> & {\n  /** The current choice: the accent and `aria-current`. */\n  selected?: boolean;\n  /** What `aria-current` says when selected.\n   * @default \"page\" */\n  current?: \"page\" | \"true\";\n  /** A small tag after the label (\"Soon\"), passed translated. */\n  badge?: React.ReactNode;\n  /** Renders your router's `<Link>` as the chip; put the label and the badge in your link's children yourself. */\n  asChild?: boolean;\n};\n\n/** One link of the row. */\nfunction ChipRowItem({ selected = false, current = \"page\", badge, asChild, className, children, ...props }: ChipRowItemProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <li className={s.item()}>\n      <Comp\n        data-state={selected ? \"on\" : \"off\"}\n        aria-current={selected ? current : undefined}\n        className={chipVariants({ selected, className: [\"min-h-11\", className] })}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {badge ? <span className={s.badge()}>{badge}</span> : null}\n          </>\n        )}\n      </Comp>\n    </li>\n  );\n}\n\nexport const ChipRow = Object.assign(ChipRowRoot, { Item: ChipRowItem });\n"],"mappings":";;;;;AAGA,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB,SAAS,UAAU;AA0Cf,SAuCM,UArCF,KAFJ;AAtCG,IAAM,UAAU,GAAG;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MACE;AAAA,IAEF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAED,IAAM,IAAI,QAAQ;AAUlB,SAAS,YAAY,EAAE,OAAO,MAAM,WAAW,UAAU,GAAG,MAAM,GAAiB;AACjF,QAAM,KAAW,YAAM;AACvB,QAAM,OAAa,aAAyB,IAAI;AAChD,QAAM,OAAO,CAAC,UAAiD;AAC7D,UAAM,OAAO,CAAC,aAAa,cAAc,QAAQ,KAAK;AACtD,QAAI,CAAC,KAAK,SAAS,MAAM,GAAG,EAAG;AAC/B,UAAM,QAAQ,CAAC,GAAI,KAAK,SAAS,iBAA8B,gCAAgC,KAAK,CAAC,CAAE;AACvG,UAAM,KAAK,MAAM,QAAQ,MAAM,MAAqB;AACpD,QAAI,KAAK,EAAG;AACZ,UAAM,OAAO,MAAM,SAAS;AAC5B,UAAM,KAAK,MAAM,QAAQ,SAAS,IAAI,MAAM,QAAQ,QAAQ,OAAO,KAAK,IAAI,MAAM,KAAK,IAAI,GAAG,MAAM,MAAM,QAAQ,eAAe,IAAI,GAAG,CAAC;AACzI,UAAM,eAAe;AACrB,UAAM,EAAE,GAAG,MAAM;AACjB,UAAM,EAAE,GAAG,iBAAiB,EAAE,OAAO,WAAW,QAAQ,UAAU,CAAC;AAAA,EACrE;AACA,SACE,qBAAC,SAAI,cAAY,OAAO,oBAAkB,OAAO,GAAG,EAAE,UAAU,QAAW,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC9G;AAAA,WACC,oBAAC,OAAE,IAAI,GAAG,EAAE,SAAS,WAAW,EAAE,KAAK,GACpC,gBACH,IACE;AAAA,IACJ,oBAAC,QAAG,KAAK,MAAM,WAAW,EAAE,KAAK,GAAG,WAAW,MAC5C,UACH;AAAA,KACF;AAEJ;AAeA,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,QAAQ,OAAO,SAAS,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC5H,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,GACpB;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,WAAW,UAAU;AAAA,MACnC,WAAW,aAAa,EAAE,UAAU,WAAW,CAAC,YAAY,SAAS,EAAE,CAAC;AAAA,MACvE,GAAG;AAAA,MAEH,oBACC,WAEA,iCACG;AAAA;AAAA,QACA,QAAQ,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAU;AAAA,SACxD;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEO,IAAM,UAAU,OAAO,OAAO,aAAa,EAAE,MAAM,YAAY,CAAC;","names":[]}
+{"version":3,"sources":["../src/chip-row/chip-row.tsx"],"sourcesContent":["// Client (arrow-key focus only). A row of chip links that scrolls sideways with scroll-snap on a phone (the trailing edge\n// fades, no scrollbar) and wraps from `md`: an audience picker, the filters of a page. Each item is a `ChipLink`-style\n// link at least 44 px high; the current one carries `aria-current`. Tab goes through the links; ← → Home End move between them.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { chipVariants } from \"../chip-link\";\n\nexport const chipRow = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-2\",\n    hint: \"text-xs text-fg-muted\",\n    list:\n      \"m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n      \"[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]\",\n    item: \"snap-start\",\n    badge: \"rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold leading-none text-fg-muted\",\n  },\n});\n\nconst s = chipRow();\n\nexport type ChipRowProps = Omit<React.ComponentProps<\"nav\">, \"aria-label\"> & {\n  /** What the links choose among (\"For whom?\"): the row's accessible name, passed translated. */\n  label: string;\n  /** A line under the label that says how to choose; read with the row. */\n  hint?: React.ReactNode;\n};\n\n/** A scroll-snap row of chip links; wraps from `md`. Items: `ChipRow.Item`. */\nfunction ChipRowRoot({ label, hint, className, children, ...props }: ChipRowProps) {\n  const id = React.useId();\n  const list = React.useRef<HTMLUListElement>(null);\n  const move = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const keys = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n    if (!keys.includes(event.key)) return;\n    const links = [...(list.current?.querySelectorAll<HTMLElement>(\"a[href],button:not([disabled])\") ?? [])];\n    const at = links.indexOf(event.target as HTMLElement);\n    if (at < 0) return;\n    const last = links.length - 1;\n    const to = event.key === \"Home\" ? 0 : event.key === \"End\" ? last : Math.min(last, Math.max(0, at + (event.key === \"ArrowRight\" ? 1 : -1)));\n    event.preventDefault();\n    links[to]?.focus();\n    links[to]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  };\n  return (\n    <nav aria-label={label} aria-describedby={hint ? `${id}-hint` : undefined} className={s.root({ className })} {...props}>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      <ul ref={list} className={s.list()} onKeyDown={move}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport type ChipRowItemProps = React.ComponentProps<\"a\"> & {\n  /** The current choice: the accent and `aria-current`. */\n  selected?: boolean;\n  /** What `aria-current` says when selected.\n   * @default \"page\" */\n  current?: \"page\" | \"true\";\n  /** A small tag after the label (\"Soon\"), passed translated. */\n  badge?: React.ReactNode;\n  /** Renders your router's `<Link>` as the chip; put the label and the badge in your link's children yourself. */\n  asChild?: boolean;\n};\n\n/** One link of the row. */\nfunction ChipRowItem({ selected = false, current = \"page\", badge, asChild, className, children, ...props }: ChipRowItemProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <li className={s.item()}>\n      <Comp\n        data-state={selected ? \"on\" : \"off\"}\n        aria-current={selected ? current : undefined}\n        className={chipVariants({ selected, className: [\"min-h-11\", className] })}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {badge ? <span className={s.badge()}>{badge}</span> : null}\n          </>\n        )}\n      </Comp>\n    </li>\n  );\n}\n\nexport const ChipRow = Object.assign(ChipRowRoot, { Item: ChipRowItem });\n"],"mappings":";;;;;AAGA,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB,SAAS,UAAU;AA0Cf,SAuCM,UArCF,KAFJ;AAtCG,IAAM,UAAU,GAAG;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MACE;AAAA,IAEF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAED,IAAM,IAAI,QAAQ;AAUlB,SAAS,YAAY,EAAE,OAAO,MAAM,WAAW,UAAU,GAAG,MAAM,GAAiB;AACjF,QAAM,KAAW,YAAM;AACvB,QAAM,OAAa,aAAyB,IAAI;AAChD,QAAM,OAAO,CAAC,UAAiD;AAC7D,UAAM,OAAO,CAAC,aAAa,cAAc,QAAQ,KAAK;AACtD,QAAI,CAAC,KAAK,SAAS,MAAM,GAAG,EAAG;AAC/B,UAAM,QAAQ,CAAC,GAAI,KAAK,SAAS,iBAA8B,gCAAgC,KAAK,CAAC,CAAE;AACvG,UAAM,KAAK,MAAM,QAAQ,MAAM,MAAqB;AACpD,QAAI,KAAK,EAAG;AACZ,UAAM,OAAO,MAAM,SAAS;AAC5B,UAAM,KAAK,MAAM,QAAQ,SAAS,IAAI,MAAM,QAAQ,QAAQ,OAAO,KAAK,IAAI,MAAM,KAAK,IAAI,GAAG,MAAM,MAAM,QAAQ,eAAe,IAAI,GAAG,CAAC;AACzI,UAAM,eAAe;AACrB,UAAM,EAAE,GAAG,MAAM;AACjB,UAAM,EAAE,GAAG,iBAAiB,EAAE,OAAO,WAAW,QAAQ,UAAU,CAAC;AAAA,EACrE;AACA,SACE,qBAAC,SAAI,cAAY,OAAO,oBAAkB,OAAO,GAAG,EAAE,UAAU,QAAW,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC9G;AAAA,WACC,oBAAC,OAAE,IAAI,GAAG,EAAE,SAAS,WAAW,EAAE,KAAK,GACpC,gBACH,IACE;AAAA,IACJ,oBAAC,QAAG,KAAK,MAAM,WAAW,EAAE,KAAK,GAAG,WAAW,MAC5C,UACH;AAAA,KACF;AAEJ;AAeA,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,QAAQ,OAAO,SAAS,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC5H,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,GACpB;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,WAAW,UAAU;AAAA,MACnC,WAAW,aAAa,EAAE,UAAU,WAAW,CAAC,YAAY,SAAS,EAAE,CAAC;AAAA,MACvE,GAAG;AAAA,MAEH,oBACC,WAEA,iCACG;AAAA;AAAA,QACA,QAAQ,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAU;AAAA,SACxD;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEO,IAAM,UAAU,OAAO,OAAO,aAAa,EAAE,MAAM,YAAY,CAAC;","names":[]}

package/dist/{chunk-3S4GHSPZ.js → chunk-63KCDMX2.js}

@@ -7,10 +7,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var languageSwitch = tv({
   slots: {
     root: "relative inline-flex",
-    trigger: "group/language inline-flex h-9 shrink-0 select-none items-center gap-1.5 rounded-full px-2.5 font-mono text-xs font-semibold uppercase tracking-wide text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg aria-expanded:bg-surface-3 aria-expanded:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    trigger: "group/language inline-flex h-9 shrink-0 select-none items-center gap-1.5 rounded-full px-2.5 font-mono text-xs font-semibold text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg aria-expanded:bg-surface-3 aria-expanded:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     glyph: "h-4 w-4 shrink-0",
     panel: "kz-pop absolute right-0 top-full z-50 mt-2 grid min-w-44 max-w-[calc(100vw-2rem)] gap-0.5 rounded-xl border border-border-default bg-surface-1 p-1.5 shadow-lg",
-    heading: "px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    heading: "px-2.5 pb-1 pt-1.5 text-[11px] font-semibold text-fg-secondary",
     item: "flex min-h-9 items-center justify-between gap-6 rounded-lg px-2.5 py-2 text-sm font-medium text-fg no-underline outline-hidden transition-colors hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-accent-soft",
     check: "h-4 w-4 shrink-0 text-fg-accent",
     inline: "inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface-2/60 p-0.5",
@@ -106,4 +106,4 @@ export {
   languageSwitch,
   LanguageSwitch
 };
-//# sourceMappingURL=chunk-3S4GHSPZ.js.map
+//# sourceMappingURL=chunk-63KCDMX2.js.map

package/dist/chunk-63KCDMX2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/language-switch/language-switch.tsx"],"sourcesContent":["// Client (a disclosure). The one language switch of the family: a globe and the current code (FR), opening a short list of\n// the languages by their own names — links with `hreflang` that keep the page. A disclosure, not a Radix menu: the items\n// are navigation, and the bar must not pay for a menu engine (Escape, outside press, focus-out and the arrows are here).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport type { Language } from \"./href\";\n\nexport const languageSwitch = tv({\n  slots: {\n    root: \"relative inline-flex\",\n    trigger:\n      \"group/language inline-flex h-9 shrink-0 select-none items-center gap-1.5 rounded-full px-2.5 font-mono text-xs font-semibold text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg aria-expanded:bg-surface-3 aria-expanded:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    glyph: \"h-4 w-4 shrink-0\",\n    panel:\n      \"kz-pop absolute right-0 top-full z-50 mt-2 grid min-w-44 max-w-[calc(100vw-2rem)] gap-0.5 rounded-xl border border-border-default bg-surface-1 p-1.5 shadow-lg\",\n    heading: \"px-2.5 pb-1 pt-1.5 text-[11px] font-semibold text-fg-secondary\",\n    item:\n      \"flex min-h-9 items-center justify-between gap-6 rounded-lg px-2.5 py-2 text-sm font-medium text-fg no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-accent-soft\",\n    check: \"h-4 w-4 shrink-0 text-fg-accent\",\n    inline: \"inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface-2/60 p-0.5\",\n    inlineLink:\n      \"inline-flex min-h-9 items-center rounded-full px-3 text-sm font-medium text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-surface-3 aria-[current=true]:text-fg\",\n  },\n});\nconst s = languageSwitch();\n\nexport type LanguageSwitchProps = {\n  /** The control's accessible name (“Language”, “Langue”) — passed translated. */\n  label: string;\n  /** The code of the page's language (`fr`). */\n  current: string;\n  /** The languages offered, each with its name in its own language and the address of the same page (`languagesFor`). */\n  languages: readonly Language[];\n  /**\n   * `menu`: a globe and the code, opening a menu (the bar). `inline`: every language in a row (a mobile panel, a settings page).\n   * @default \"menu\"\n   */\n  variant?: \"menu\" | \"inline\";\n  /** Your router's `<Link>` (it receives `href`, `hrefLang`, `lang`). A plain `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** Opens the menu at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the control. */\n  className?: string;\n};\n\nconst Globe = ({ className }: { className?: string }) => (\n  <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <circle cx=\"12\" cy=\"12\" r=\"9\" />\n    <path d=\"M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z\" />\n  </svg>\n);\n\n/**\n * The language switch, the same on every Krizaka site and app: a compact control — a globe and the current code\n * (`FR`) — that opens a menu of the languages named in their own language (Français · English), each a link with\n * `hreflang` to the same page. It shows the language you are in, never the “other” one. `variant=\"inline\"` lays the\n * languages in a row for a phone's panel or a settings page.\n */\nexport function LanguageSwitch({ label, current, languages, variant = \"menu\", linkAs, defaultOpen = false, className }: LanguageSwitchProps) {\n  const Link = linkAs ?? \"a\";\n  const id = React.useId();\n  const [open, setOpen] = React.useState(defaultOpen);\n  const root = React.useRef<HTMLDivElement>(null);\n  const trigger = React.useRef<HTMLButtonElement>(null);\n  const active = languages.find((l) => l.code === current);\n\n  React.useEffect(() => {\n    if (!open) return;\n    // A press outside closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      if (e.target instanceof Node && !root.current?.contains(e.target)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => document.removeEventListener(\"pointerdown\", onPress);\n  }, [open]);\n\n  if (variant === \"inline\") {\n    return (\n      <div role=\"group\" aria-label={label} className={s.inline({ className })}>\n        {languages.map((l) => (\n          <Link key={l.code} href={l.href} hrefLang={l.code} lang={l.code} aria-current={l.code === current ? \"true\" : undefined} className={s.inlineLink()}>\n            {l.name}\n          </Link>\n        ))}\n      </div>\n    );\n  }\n\n  const links = () => [...(root.current?.querySelectorAll<HTMLElement>(\"[data-language]\") ?? [])];\n  const close = (focus: boolean) => {\n    setOpen(false);\n    if (focus) trigger.current?.focus();\n  };\n  return (\n    <div\n      ref={root}\n      className={s.root({ className })}\n      onKeyDown={(e) => {\n        if (e.key === \"Escape\" && open) {\n          e.stopPropagation();\n          close(true);\n        }\n        if (open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Home\" || e.key === \"End\")) {\n          e.preventDefault();\n          const all = links();\n          const at = all.indexOf(document.activeElement as HTMLElement);\n          const next = e.key === \"Home\" ? 0 : e.key === \"End\" ? all.length - 1 : (at + (e.key === \"ArrowDown\" ? 1 : -1) + all.length) % all.length;\n          all[next]?.focus();\n        }\n      }}\n      // Tab out of the switch closes it.\n      onBlur={(e) => {\n        if (open && !root.current?.contains(e.relatedTarget as Node | null)) setOpen(false);\n      }}\n    >\n      <button\n        ref={trigger}\n        type=\"button\"\n        aria-label={active ? `${label}: ${active.name}` : label}\n        aria-expanded={open}\n        aria-controls={id}\n        onClick={() => setOpen(!open)}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\") {\n            e.preventDefault();\n            setOpen(true);\n            requestAnimationFrame(() => (links().find((l) => l.getAttribute(\"aria-current\") === \"true\") ?? links()[0])?.focus());\n          }\n        }}\n        className={s.trigger()}\n      >\n        <Globe className={s.glyph()} />\n        {/* Drawn by CSS: the code is no text of the button, so its name (`Language: English`) never mismatches what is visible. */}\n        <span aria-hidden data-code={current} className=\"after:content-[attr(data-code)]\" />\n      </button>\n      {open && (\n        <div id={id} role=\"group\" aria-label={label} className={s.panel()}>\n          <p aria-hidden className={s.heading()}>\n            {label}\n          </p>\n          {languages.map((l) => (\n            <Link key={l.code} data-language=\"\" href={l.href} hrefLang={l.code} lang={l.code} aria-current={l.code === current ? \"true\" : undefined} className={s.item()}>\n              {l.name}\n              {l.code === current && (\n                <svg viewBox=\"0 0 24 24\" className={s.check()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                  <path d=\"M20 6 9 17l-5-5\" />\n                </svg>\n              )}\n            </Link>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}