@celestia-island/hikari 0.55.327 → 0.55.328

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.327",
+  "version": "0.55.328",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/DemoApp.tsx

@@ -620,11 +620,11 @@ export default defineComponent({
           <h2>HTimeline</h2>
           <HTimeline steps={timelineSteps} currentKey="v2" />
           <h3>Narrow host → auto window (prev / current / next, edges fade)</h3>
-          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:8px">
+          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:var(--radius-md, 8px)">
             <HTimeline steps={wizardSteps} currentKey="vendor" />
           </div>
           <h3>collapse="always" at the first step</h3>
-          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:8px">
+          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:var(--radius-md, 8px)">
             <HTimeline steps={wizardSteps} currentKey="type" collapse="always" />
           </div>
         </section>
@@ -658,7 +658,7 @@ export default defineComponent({
 
         <section>
           <h2>HZoomToolbar / HMinimap</h2>
-          <div style="position:relative;height:200px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,0.35)">
+          <div style="position:relative;height:200px;border-radius:var(--radius-md, 8px);overflow:hidden;background:rgba(0,0,0,0.35)">
             <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;opacity:0.5">
               Host surface — zoom {zoomState.value.zoom.toFixed(2)}x, pan ({Math.round(zoomState.value.panX)}, {Math.round(zoomState.value.panY)})
             </div>

package/src/components/HkAffixPicker.scss

@@ -21,7 +21,7 @@
   padding-block: 4px;
   padding-inline: 9px 11px;
   border: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-md, 8px);
   background: transparent;
   color: rgb(var(--color-text));
   cursor: pointer;
@@ -196,7 +196,7 @@
   height: 1.5rem;
   padding: 0;
   border: 0;
-  border-radius: var(--radius-full, 999px);
+  border-radius: var(--radius-full, 9999px);
   background: transparent;
   color: var(--hi-icon-button-icon-color, rgb(var(--color-muted)));
   cursor: pointer;

package/src/components/HkBreadcrumb.scss

@@ -341,7 +341,7 @@
   .hk-breadcrumb-item {
     background: var(--hi-card-bg);
     padding: 0.375rem 0.875rem;
-    border-radius: 999px;
+    border-radius: var(--radius-full);
     border: 1px solid var(--hi-color-border);
 
     &:not(:last-child):hover {

package/src/components/HkButton.scss

@@ -11,7 +11,7 @@
   font-weight: 600;
   line-height: 1;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md, 8px);
   cursor: pointer;
   /* Longhand on purpose: the former comma-separated shorthand
    * `transition: background-color, ..., filter var(--duration-normal) ...`

package/src/components/HkCard.scss

@@ -10,7 +10,7 @@
   background: color-mix(in srgb, rgb(var(--color-surface)) 70%, transparent);
   @include backdrop-filter(blur(var(--blur-md)));
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg, 12px);
   box-shadow: var(--shadow-elevated);
 }
 

package/src/components/HkCardList.scss

@@ -105,7 +105,7 @@
     top: 50%;
     transform: translateY(-50%);
     padding: 0.125rem;
-    border-radius: var(--radius-sm, 0.375rem);
+    border-radius: var(--radius-sm, 4px);
     background: rgb(var(--color-surface, 255 255 255));
     box-shadow: 0 2px 10px rgb(var(--color-border, 100 100 100) / 22%);
     opacity: 0;
@@ -137,7 +137,7 @@
   height: 1.625rem;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: var(--radius-xs, 0.25rem);
+  border-radius: var(--radius-md, 8px);
   background: transparent;
   color: rgb(var(--color-muted, 108 108 108));
   cursor: pointer;

package/src/components/HkCheckbox.scss

@@ -6,6 +6,12 @@
 
 .hk-checkbox {
   display: inline-flex;
+  /* Fallback anatomy: centering the box against the label block is what every
+   * engine and every host saw before first-line anchoring, and it needs no
+   * `:has()` support. A labeled control on a `:has()`-capable engine is
+   * handled by the first-line rules below, which move the BOX (`align-self`)
+   * and leave this line alone; a label-less control keeps it on every
+   * engine. */
   align-items: center;
   /* When the control sits INLINE among text (not in a host flex row), the
    * default `vertical-align: baseline` parks the inline-flex's bottom edge
@@ -28,6 +34,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* The first-line offset below reads the box's width as its BORDER-BOX
+   * height, so the sheet declares the sizing itself instead of inheriting it
+   * from the host reset: a consumer importing this sheet without a global
+   * `border-box` would otherwise inflate the box by its 1px border and land
+   * the offset 1px low. */
+  box-sizing: border-box;
   width: 1.125rem;
   height: 1.125rem;
   border-radius: var(--radius-sm, 4px);
@@ -57,6 +69,201 @@
   }
 }
 
+/* ---------- first-line anchoring ---------- */
+
+/* A labeled control pins its box to the MIDDLE OF THE LABEL'S FIRST LINE BOX
+ * instead of the middle of the whole label block. `center` rode the block, so
+ * a two- or three-line option floated the box between the lines — hosts
+ * re-aligned the row themselves, and the `flex-start` override they reached
+ * for parked the box on the line's top edge — 1.5px above the middle of the
+ * line box it belongs to at the default step (reported as the label text
+ * sitting ~2px low).
+ *
+ * The anatomy rides the BOX, not the row: `align-self: flex-start` on the
+ * item plus one offset per size step. `align-self` on the item outranks any
+ * `align-items` on the container — whatever specificity, whatever order,
+ * whatever sheet — so nothing outside this component can flip the row back
+ * while the offset stays paid. A row-level `align-items: flex-start` would not
+ * be safe that way: any later sheet naming the control (a comma list, an
+ * attribute spelling, a `label` type selector, `!important`) could undo it
+ * while the per-part guards still saw a clean sheet. The row itself keeps
+ * `align-items: center` on every engine.
+ *
+ * Three rules cooperate — the md rule carries `align-self` and the base offset,
+ * the sm/lg rules add only their own offsets. Every one of them carries the
+ * gate, and exactly one offset is IN EFFECT per row: an sm/lg box matches the
+ * md rule too, and the size rule that follows it wins on source order (all
+ * three are (0,4,0)). The anatomy is
+ * atomic — every selector contains `:has()`, so an engine without it drops
+ * each rule whole and the box falls through to the `align-items: center`
+ * fallback in the root rule: the previous PLACEMENT, never the bare top-edge
+ * state. The box rule's own `box-sizing` is the one carrier outside the gate
+ * (it must hold on every engine), so a consumer with no global reset renders
+ * that box 2px smaller — the sizing note above spells it out.
+ *
+ * One line box is `line-height` tall (HkLabel pins 1.5), so on a one-line
+ * label each offset lands the box exactly where `center` did (single-line
+ * rows keep their pixels at all three steps), and on a wrapped label it
+ * keeps the box on line one.
+ *
+ * That last part rests on the label's FIRST line box being exactly `1.5 ×
+ * font-size` tall. A descendant with a larger inline box — a 24px span
+ * inside the label, an icon taller than the text — makes that line taller
+ * and leaves the box `(firstLineBox − 21) / 2` px HIGH, so the text reads
+ * that far low. What sets the error is the resulting LINE, not the height of
+ * the intruder: a 16×26 icon with `vertical-align: middle` gives the 26px
+ * line this table assumes (2.500px), while the same icon baseline-aligned
+ * drags its own box and the font's descender into the line and makes it 32px
+ * (5.500px). Only the declared typography is pinned; content that outgrows it
+ * moves the target, and by how much follows from the line it lands in, so a
+ * replaced element that ignores the baseline can push it further than either
+ * figure — calculate, do not assume a fixed amount.
+ *
+ * Line-box HEIGHT is only one of the THREE channels that move the first line,
+ * and the formula above covers only that one. A block child that INHERITS the
+ * label's typography (`<p>`, `<div>`) leaves the 21px line height untouched and
+ * changes only its OFFSET: it takes its own top margin and displaces the line
+ * DOWN, so a host's `p { margin-block-start: 8px }` leaves a 21px line sitting
+ * 8px lower — the height formula reads 0.000 while the box is 8.000px high —
+ * and a plain `<p>` with no host CSS whatsoever is already 14.000px out (the
+ * UA's `1em` margin-block-start).
+ *
+ * An element that brings its OWN typography is the two-channel case, and a
+ * heading is the one to remember: `<h1>` carries UA `font-size: 2em`, so its
+ * line is 42px — the height channel alone reads 10.500 — AND it carries a
+ * `0.67em` block-start margin (18.76px requested, 18.75 used after the
+ * LayoutUnit snap), which pushes that taller line down; measured together the
+ * label reads 10.500 + 18.750 = 29.250px low. A heading in a label is a typography
+ * decision before it is an anchoring one.
+ *
+ * The third channel is the label's own box. Both parts are pinned to the row's
+ * flex line, so the label's border-box top starts exactly where the box's MARGIN
+ * box does (the box's own border box is `offset` lower) —
+ * and anything the label adds ABOVE its text (`padding-block-start`, a
+ * block-start `border`) pushes the text down inside that border box while the
+ * box stays at the line start. `padding-block-start: 8px` on `.hk-label` is
+ * therefore the same 8.000px error as a block child's top margin, and it is
+ * invisible to `LABEL_BLOCK_CONTENT`, which watches rules on DESCENDANTS (a
+ * block tag as the label's child) rather than rules on the label itself.
+ * HkLabel ships no padding and no border, so this one is a host-authorship
+ * hazard, not a live offset.
+ *
+ * One shape the anchoring does not promise: a size modifier on an ANCESTOR
+ * wrapper instead of on the control. The box sizes are ancestor-scoped
+ * (`.hk-checkbox-sm &` compiles to `.hk-checkbox-sm .hk-checkbox-box`) and so
+ * are the offsets (`…:has(.hk-label:not(:empty)) .hk-checkbox-box` matches a
+ * wrapper too), but the LABEL's typography follows the control — HkLabel's
+ * `size` prop — so a wrapper makes the box and the line disagree instead of
+ * stepping both: `.hk-checkbox-lg` around a default control is a 22px box with
+ * the lg 1px offset on the md 21px line (+1.500px), the sm wrapper is a 14px box
+ * with the sm 2px offset on that same 21px line (−1.500px), and an lg wrapper
+ * around an sm control puts a 22px box 1px onto an 18px line (+3.000px). The
+ * radio adds a second asymmetry: its sizes key on `[data-size=…]` on ANY
+ * ancestor while its offsets need the attribute on `.hk-radio` itself, so an
+ * ancestor `data-size="lg"` gives a 22px box with the md 1.5px offset. Both
+ * renderers put the modifier on the control itself; that is the only spelling
+ * the sheet promises, and the only one the geometry was measured on.
+ *
+ * Nothing in this sheet can neutralise any of the three channels, because the
+ * offset lands the box on the line and the line itself moved; the fix is to
+ * treat the label's slot as text. The styles contract test pairs the block-child
+ * channel with `LABEL_BLOCK_CONTENT`, which reports an UNSCOPED host rule that
+ * declares one of those first-line movers on a block tag (`p { … }`). A SCOPED
+ * one (`.panel p { … }`, `.hk-markdown p`) is not reported even though a wrapper
+ * with that class can hold the label — a recorded limit, not an oversight: the
+ * shipped `.hk-icon svg` / `.hk-markdown p` families are host-internal styling,
+ * and the contract test records what lifting the restriction would cost (73
+ * rows to 279 for the replaced channel alone) — see the `elementOnlyMovers`
+ * comment there.
+ *
+ * The gate needs both halves: `:has(.hk-label)` proves a label element is
+ * there, `:not(:empty)` proves it carries content. A label-less control
+ * (selection column, a bare box next to a host's own caption) has no line box
+ * to ride and keeps its old LAYOUT — centered on its own row, no margin — and
+ * so does an empty-but-present label
+ * shell (`<HkCheckbox>{''}</HkCheckbox>` renders `span.hk-label` with nothing
+ * inside; the Rust side emits no label at all for that input, and the gate
+ * keeps both renderers on the same anatomy). "Layout", not bytes: the box
+ * rule now declares its own `box-sizing: border-box` (see below), so a
+ * consumer with no global reset renders that box 2px smaller than before —
+ * which is the reset the sheet used to borrow from the host. A whitespace-only label is the
+ * one shape the gate cannot see through: it is non-empty for the selector yet
+ * generates no line box once the label is blockified as a flex item, so it
+ * takes the 1.5px offset (md) onto a zero-height line: the control is 1.5px
+ * taller than the empty shell (18px → 19.5px) and its box sits 1.5px lower.
+ * A zero-width space (U+200B) is the marker to reach for when a row must be
+ * visibly empty: unlike a plain space it measures 0.00 against `center`.
+ *
+ * Hosts must DELETE their own `align-items` override on `.hk-checkbox` /
+ * `.hk-radio`: the box no longer reads the row's alignment, so a kept
+ * `flex-start` is inert where the gate applies (it parks the box on the same
+ * line edge) and a `center` is inert too — the offset is what moves the box.
+ * On an engine without `:has()` neither of them is inert: that is the tier the
+ * `center` fallback exists for, and a host that needs the old top-edge look
+ * there should scope its override with `@supports not selector(:has(*))`.
+ * Two host styles become DEAD rather than harmful, and both are worth knowing
+ * about: a `margin-*` nudge on `.hk-checkbox-box` loses to the offset declared
+ * here at equal importance (the gated rule outranks it, so the nudge does not
+ * render — an `!important` nudge still wins, and measured +2.500px), and a
+ * host that stacked the control (`flex-direction: column` on the row) changes
+ * the AXIS this pin acts on rather than losing a vertical centring: in a column
+ * `align-self` is the INLINE axis, so nothing here is pinned to the top — the
+ * box's start edge goes to the column's (measured 106 → 0 on a 230px column)
+ * while the vertical metric is unchanged at every step. `align-self: center` on
+ * the parts restores that horizontal position only if it outranks the gated
+ * rule (an id or `!important`: the natural `.hk-checkbox .hk-checkbox-box` at
+ * (0,2,0) loses to (0,4,0)), and the stacked control is 1.5px taller than it
+ * was (68.00 → 69.50) because the box now carries the offset. Neither shape
+ * exists in this package; they
+ * matter to a consumer only if it restyled the parts itself.
+ *
+ * The label's own line-height is what this rides, and its font size sets the
+ * term, so a host that restyles EITHER on `.hk-label` has to restyle this pair
+ * too — the styles contract test pins the coefficient against HkLabel.scss and
+ * each box term against the size modifiers above.
+ *
+ * HkSwitch is deliberately not part of this. Its md track is 24px, taller than
+ * the 21px line box, so a first-line anchor would need a negative offset and
+ * would hang the track outside the row; its rows stay block-centred. The two
+ * box controls are the ones whose text reads as a paragraph. */
+.hk-checkbox:has(.hk-label:not(:empty)) .hk-checkbox-box {
+  /* The item, not the row: immune to a host's or a sibling sheet's
+   * `align-items` on `.hk-checkbox` (or on the `label` element). */
+  align-self: flex-start;
+  margin-block-start: calc((1.5 * var(--text-base, 0.875rem) - 1.125rem) / 2);
+}
+
+.hk-checkbox-sm:has(.hk-label:not(:empty)) .hk-checkbox-box {
+  margin-block-start: calc((1.5 * var(--text-xs, 0.75rem) - 0.875rem) / 2);
+}
+
+.hk-checkbox-lg:has(.hk-label:not(:empty)) .hk-checkbox-box {
+  margin-block-start: calc((1.5 * var(--text-md, 1rem) - 1.375rem) / 2);
+}
+
+/* Both PARTS are pinned, not the row. Pinning only the box inverts the
+ * anchoring the moment the control is TALLER than its own content — a grid
+ * cell or a flex row that stretches the item (a two-column option grid that
+ * pairs a one-line option with a four-line one; `min-height` on the control
+ * does the same): the box sits at the top of the stretched control while the
+ * label stays centred by the row's `align-items`, measured 42.0px apart at a
+ * 105px control and 13.5px at 48px, against 0.000 before this component
+ * anchored anything. With the label pinned as well the pair moves together
+ * and the offset still lands on line one at every control height (0.000 at
+ * 48/60/105px, sm and lg included).
+ *
+ * Keeping BOTH alignment declarations on the items — never `align-items` on
+ * the row — is also what keeps a host's `align-items` unable to flip the
+ * anatomy: a row-level `flex-start` here would be undone by any later sheet
+ * naming the control while the offset still applied (a host's
+ * `align-items: center !important` measured +0.750px against the item pins
+ * and broke the row-level variant). The visible cost: a control a host
+ * stretches now renders its text at the TOP of the control instead of
+ * centred. */
+.hk-checkbox:has(.hk-label:not(:empty)) .hk-label {
+  align-self: flex-start;
+}
+
 /* Press feedback (house parity: HkSwitch thumb squish). */
 .hk-checkbox:not([data-disabled]):active .hk-checkbox-box {
   scale: 0.9;

package/src/components/HkColorPicker.scss

@@ -38,7 +38,7 @@
   gap: 4px;
   padding: 4px 6px;
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md, 8px);
   background: none;
   cursor: pointer;
   outline: none;

package/src/components/HkCornerBadge.scss

@@ -105,7 +105,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-full, 999px);
+  border-radius: var(--radius-full, 9999px);
   background: var(--hk-badge-bg);
   color: var(--hk-badge-text);
   border: 1px solid var(--hk-badge-border);

package/src/components/HkDatePicker.scss

@@ -24,7 +24,7 @@
   padding: var(--space-8, 8px) var(--space-12, 12px);
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   color: rgb(var(--color-text));
   font-family: inherit;
   font-size: var(--text-sm, 0.875rem);
@@ -108,7 +108,7 @@
   padding: 0;
   border: 0;
   background: transparent;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   color: var(--hi-icon-button-icon-color, var(--hi-color-muted));
   cursor: pointer;
   opacity: 0;
@@ -189,7 +189,7 @@
   border: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   color: var(--hi-color-muted);
   cursor: pointer;
   display: inline-flex;
@@ -238,7 +238,7 @@
   color: inherit;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
@@ -285,7 +285,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   /* Fixed height keeps the six-row day grid — and therefore the shared
    * stage height — independent of the panel width, so drilling between
    * views never changes the popup's size (enlarged on touch). */

package/src/components/HkDateTag.scss

@@ -10,7 +10,7 @@
   flex-direction: row;
   align-items: baseline;
   padding: var(--space-2, 2px) var(--space-10, 0.625rem);
-  border-radius: var(--radius-full, 999px);
+  border-radius: var(--radius-full, 9999px);
   background: rgb(var(--color-text) / 6%);
   white-space: nowrap;
   /* One size for the whole pill: segments AND separators inherit it,

package/src/components/HkDateTimePicker.scss

@@ -60,7 +60,7 @@
   color: inherit;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
@@ -81,7 +81,7 @@
   border: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   color: var(--hi-color-muted);
   cursor: pointer;
   display: inline-flex;
@@ -123,7 +123,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   /* Fixed height keeps the six-row day grid — and therefore the shared
    * stage height — independent of the picker width, so drilling between
    * views never changes the picker's size (enlarged on touch). */
@@ -233,7 +233,7 @@
   justify-content: center;
   color: var(--hi-color-muted);
   cursor: pointer;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   transition: color var(--duration-fast, 0.15s) ease, background var(--duration-fast, 0.15s) ease;
 
   &:hover {
@@ -267,7 +267,7 @@
   appearance: none;
   background: transparent;
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   padding: var(--space-4, 4px) var(--space-10, 10px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
@@ -301,7 +301,7 @@
   padding: var(--space-4, 4px) var(--space-10, 10px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   color: color-mix(in srgb, var(--hi-color-text-secondary) 70%, transparent);
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
@@ -379,7 +379,7 @@
   background: var(--hi-color-primary);
   color: rgb(var(--color-on-solid-text, 255 255 255));
   border: 0;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   padding: var(--space-6, 6px) var(--space-14, 14px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
@@ -401,7 +401,7 @@
   padding: var(--space-8, 8px) var(--space-12, 12px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-md, 8px);
   color: var(--hi-color-text-primary);
   font-family: inherit;
   font-size: var(--text-sm, 0.875rem);

package/src/components/HkDrawer.scss

@@ -51,7 +51,7 @@
   bottom: 0;
   left: 0;
   border-right: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
-  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
+  border-radius: 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0;
 }
 
 .hk-drawer-right {
@@ -59,7 +59,7 @@
   bottom: 0;
   right: 0;
   border-left: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
-  border-radius: var(--radius-md, 0.5rem) 0 0 var(--radius-md, 0.5rem);
+  border-radius: var(--radius-lg, 0.75rem) 0 0 var(--radius-lg, 0.75rem);
 }
 
 .hk-drawer-top {
@@ -67,7 +67,7 @@
   left: 0;
   right: 0;
   border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
-  border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
+  border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
 }
 
 .hk-drawer-bottom {
@@ -75,7 +75,7 @@
   left: 0;
   right: 0;
   border-top: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
-  border-radius: var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0 0;
+  border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
 }
 
 .hk-drawer-left-enter-active,

package/src/components/HkErrorLanding.scss

@@ -44,7 +44,7 @@
   width: min(440px, 100%);
   background: rgb(var(--hel-surface));
   border: 1px solid rgb(var(--hel-border) / 70%);
-  border-radius: var(--radius-xl, 20px);
+  border-radius: var(--radius-xl, 16px);
   box-shadow: var(--shadow-lg, 0 18px 48px rgb(0 0 0 / 8%));
   padding: 2.25rem var(--space-28, 1.75rem) var(--space-28, 1.75rem);
   text-align: center;
@@ -230,7 +230,7 @@
   height: max(9rem, 20vh);
   height: max(9rem, 20dvh);
   border: 1px solid rgb(var(--hel-border) / 70%);
-  border-radius: var(--radius-md, 10px);
+  border-radius: var(--radius-md, 8px);
   background: rgb(var(--hel-muted) / 4%);
 }
 

package/src/components/HkFileField.scss

@@ -24,7 +24,7 @@
   min-height: 2.5rem;
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md, 8px);
   transition:
     border-color var(--duration-normal) var(--ease-standard),
     background-color var(--duration-normal) var(--ease-standard);

package/src/components/HkFilePickerField.scss

@@ -21,7 +21,7 @@
   min-height: 2.5rem;
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md, 8px);
   transition:
     border-color var(--duration-normal) var(--ease-standard),
     background-color var(--duration-normal) var(--ease-standard);

package/src/components/HkFilterPanel.scss

@@ -160,7 +160,7 @@
   min-height: 2rem;
   padding: 0 var(--space-8, 0.5rem);
   border: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-md, 8px);
   background: transparent;
   color: rgb(var(--color-muted, var(--color-text-secondary)));
   font-family: inherit;

package/src/components/HkIconButtonGroup.scss

@@ -190,7 +190,7 @@
   bottom: calc(var(--space-1, 0.25rem) / 2);
   width: 0.5rem;
   height: 0.5rem;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   pointer-events: none;
 }
 

package/src/components/HkIconButtonVars.scss

@@ -34,7 +34,7 @@
   // 2. Border Radius System
   // ------
 
-  --hi-icon-button-radius: var(--radius-sm, 4px);
+  --hi-icon-button-radius: var(--radius-md, 8px);
 
   // ------
   // 3. Animation System

package/src/components/HkInput.scss

@@ -32,7 +32,7 @@
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md, 8px);
   overflow: hidden;
   /* Longhand on purpose: the comma shorthand attached the duration to the
    * LAST property only, so hover border-color and the focus-within

package/src/components/HkLoadingVeil.scss

@@ -28,7 +28,7 @@
   align-items: center;
   gap: 12px;
   padding: 24px 32px;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: rgb(var(--color-surface, 255 255 255) / 0.85);
   box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
 }

package/src/components/HkLogWindow.scss

@@ -25,7 +25,7 @@
 .s-log-tab {
   padding: var(--space-4, 0.25rem) var(--space-10, 0.625rem);
   border: 1px solid transparent;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-md, 8px);
   background: transparent;
   color: rgb(var(--color-muted));
   font-size: var(--text-xs, 0.75rem);
@@ -71,7 +71,7 @@
   width: 1.75rem;
   height: 1.75rem;
   border: 1px solid var(--border-faint, rgb(var(--color-border) / 12%));
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-md, 8px);
   background: rgb(var(--color-surface));
   color: rgb(var(--color-muted));
   cursor: pointer;

package/src/components/HkMarkdownRenderer.scss

@@ -48,7 +48,7 @@
   font-size: 0.85em;
   background: var(--hi-color-bg-subtle, #21262d);
   padding: 0.15em 0.35em;
-  border-radius: 3px;
+  border-radius: var(--radius-sm, 4px);
 }
 
 /* Track host for the code block's horizontal overlay rail — emitted in

package/src/components/HkModal.scss

@@ -132,7 +132,7 @@
   background: var(--hk-modal-bg, var(--hi-color-surface, rgba(255,255,255,0.95)));
   @include backdrop-filter(var(--hk-modal-blur, none));
   border: 1px solid var(--hk-modal-border-color, var(--hi-color-border, rgba(100,100,100,0.08)));
-  border-radius: var(--hk-modal-radius, var(--radius-lg, 12px));
+  border-radius: var(--hk-modal-radius, var(--radius-xl, 16px));
   box-shadow:
     0 16px 48px rgba(0, 0, 0, 0.2),
     0 0 0 1px rgba(255, 255, 255, 0.05) inset;
@@ -583,8 +583,8 @@
       --hk-modal-bg-mobile,
       var(--hk-modal-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)))
     );
-    border-radius: var(--hk-modal-radius, var(--radius-lg, 12px))
-                   var(--hk-modal-radius, var(--radius-lg, 12px))
+    border-radius: var(--hk-modal-radius, var(--radius-xl, 16px))
+                   var(--hk-modal-radius, var(--radius-xl, 16px))
                    0 0;
     border-left: 0;
     border-right: 0;