@celestia-island/hikari 0.55.270 → 0.55.271

package/package.json

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

package/src/components/HkDonutChart.test.tsx

@@ -45,6 +45,22 @@ describe("HkDonutChart", () => {
     ]);
   });
 
+  it("gives the ring svg intrinsic dimensions from the size prop", () => {
+    // Without width/height attributes the svg has no intrinsic size and
+    // collapses to 0x0 inside the block-level ring-wrap (wowsp measured a
+    // 0x0 getBoundingClientRect on the consuming page before this fix).
+    const byDefault = mount(<HkDonutChart entries={ENTRIES} />);
+    const defaultSvg = byDefault.querySelector("svg.hk-donut__ring");
+    expect(defaultSvg?.getAttribute("width")).toBe("150");
+    expect(defaultSvg?.getAttribute("height")).toBe("150");
+
+    const custom = mount(<HkDonutChart entries={ENTRIES} size={96} />);
+    const customSvg = custom.querySelector("svg.hk-donut__ring");
+    expect(customSvg?.getAttribute("width")).toBe("96");
+    expect(customSvg?.getAttribute("height")).toBe("96");
+    expect(customSvg?.getAttribute("viewBox")).toBe("0 0 96 96");
+  });
+
   it("defaults hints to label · value · percent", () => {
     const el = mount(<HkDonutChart entries={ENTRIES} />);
     const first = el.querySelector(".hk-donut__slice");

package/src/components/HkDonutChart.tsx

@@ -46,7 +46,7 @@ export default defineComponent({
   props: {
     /** The slices' source rows; pass count-desc for the wowsp look. */
     entries: { type: Array as PropType<HkDonutEntry[]>, required: true },
-    /** Square ring size (px). */
+    /** Square ring size (px) — the SVG's intrinsic width/height and viewBox. */
     size: { type: Number, default: 150 },
     /** Legend rows per column. */
     legendRows: { type: Number, default: LEGEND_ROWS_PER_COLUMN },
@@ -102,7 +102,12 @@ export default defineComponent({
       return (
         <div class="hk-donut" role="img" aria-label={aria.value}>
           <div class="hk-donut__ring-wrap">
-            <svg class="hk-donut__ring" viewBox={`0 0 ${props.size} ${props.size}`}>
+            <svg
+              class="hk-donut__ring"
+              width={props.size}
+              height={props.size}
+              viewBox={`0 0 ${props.size} ${props.size}`}
+            >
               {slices.value.map((s) => (
                 <path
                   key={s.key}

package/src/components/HkSidebarRail.scss

@@ -86,18 +86,23 @@
    * half must be able to paint. Content clipping lives in
    * .hk-sidebar-rail-clip (inside the panel). */
   overflow: visible;
+  /* The sidebar z band (900 — above content, below floating panels),
+   * carried PERMANENTLY, not only while a peek is open (2026-11-02 user
+   * screenshot, wowsp): the straddling toggle hangs over the content
+   * column in every state, and its own z-index cannot save it — any
+   * stacking context the PANEL carries in a host (wowsp's glass
+   * backdrop-filter, a transform/opacity dress) demotes the toggle's
+   * local z into that panel, and the overhanging half then loses to
+   * plain positioned content painted later in tree order. The HOST is
+   * the elevation boundary: with the band here the whole rail subtree
+   * paints atomically above the content column no matter what contexts
+   * exist inside it, so a peek overlay, the pinned expand and the idle
+   * toggle all share one rule. */
+  z-index: var(--hk-z-sidebar, 900);
   /* The layout animation the PIN window deliberately keeps. */
   transition: width var(--duration-normal, 0.3s) ease;
 }
 
-/* A peek is an OVERLAY: the host rises to the sidebar z band (900 — above
- * content, below floating panels) so the full-width panel paints over the
- * content it temporarily covers. (The host no longer needs to toggle
- * `overflow` here: it never clips.) */
-.hk-sidebar-rail-host[data-peeking] {
-  z-index: var(--hk-z-sidebar, 900);
-}
-
 .hk-sidebar-rail-panel {
   position: absolute;
   /* Logical: the panel docks the INLINE-START edge in either direction —
@@ -191,7 +196,11 @@
 .hk-sidebar-rail-flight {
   position: absolute;
   inset: 0;
-  z-index: 2;
+  /* Local bump (--hk-z-above band): the layer only has to outrank the
+   * z-auto dissolve items it substitutes for — during a flip those items
+   * hold opacity contexts, so everything inside them (scrollbar chrome
+   * included) is trapped below this layer. */
+  z-index: var(--hk-z-above, 1);
   display: block;
   pointer-events: none;
 }
@@ -284,7 +293,14 @@
   inset-inline-end: calc(var(--hk-sidebar-rail-toggle-size, 24px) / -2 - var(--hk-sidebar-rail-border-width, 1px) / 2);
   inset-block-start: 50%;
   translate: 0 -50%;
-  z-index: 2;
+  /* The fab band — a floating circular affordance above the panel's local
+   * chrome. The ranking threat inside the panel is the overlay-scrollbar
+   * TRACK (absolute, z-index: 10 — a stacking context that also contains
+   * the thumb's 2 and the markers' 1, attached beside the sidebar body):
+   * the old raw z-index: 2 ranked BELOW that track, so a scroll or a
+   * marker flash could paint its band over the circle's inner half. The
+   * fab band clears both the track and everything inside it. */
+  z-index: var(--hk-z-fab, 40);
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--duration-fast, 0.15s) ease;

package/src/components/HkSidebarRail.styles.test.ts

@@ -34,7 +34,14 @@ import {
  * 3. The toggle's center rides the border LINE: negative half-size inset
  *    (plus half the border), vertical centering, size token on the host.
  * 4. The host stays the LAYOUT box (position relative, width transition)
- *    and [data-peeking] only raises it to the sidebar z band now.
+ *    and ALWAYS carries the sidebar z band — not only under [data-peeking]
+ *    (2026-11-02 user screenshot, wowsp): the straddling toggle hangs over
+ *    the content column in every state, and a host whose panel carries its
+ *    own stacking context (wowsp's glass backdrop-filter) demotes the
+ *    toggle's local z below plain positioned content, so the band must
+ *    live on the host, the elevation boundary.
+ * 4b. No raw z-index numbers: the toggle rides the fab band, the flight
+ *    layer the local-bump band — both through the scale tokens.
  * 5. Pinning: [data-pinning] kills the panel's and any nested sidebar's
  *    width transitions (the expand must not replay the slide) while the
  *    HOST width transition stays — and the pinned panel keeps the peek
@@ -93,12 +100,19 @@ describe("HkSidebarRail geometry contract", () => {
     expect(host, "the host width transition IS the intended motion").toContain("transition: width");
   });
 
-  it("a peek only raises the host to the sidebar z band now (no clip flip)", () => {
-    const peeking = ruleBody(css, ".hk-sidebar-rail-host[data-peeking]");
-    expect(peeking, "the peeking rule exists").not.toBeNull();
-    expect(peeking).toContain("z-index: var(--hk-z-sidebar, 900)");
-    // The host no longer toggles overflow here — it never clips.
-    expect(peeking).not.toContain("overflow");
+  it("the host carries the sidebar z band ALWAYS (the stacking-trap contract)", () => {
+    // The band lives on the host rule itself, not under [data-peeking]:
+    // the toggle's overhanging half must paint above the content column in
+    // every state, and a host whose panel carries its own stacking context
+    // (wowsp's glass backdrop-filter) demotes the toggle's local z below
+    // plain positioned content painted later in tree order. There is no
+    // bare peeking z rule left to tie the elevation to the peek state.
+    const host = ruleBody(css, ".hk-sidebar-rail-host {") ?? ruleBody(css, ".hk-sidebar-rail-host");
+    expect(host, "the host rule exists").not.toBeNull();
+    expect(host).toContain("z-index: var(--hk-z-sidebar, 900)");
+    expect(css).not.toContain(".hk-sidebar-rail-host[data-peeking] {");
+    // The peek shadow survives on the panel-scoped rules.
+    expect(css).toContain(".hk-sidebar-rail-host[data-peeking] .hk-sidebar-rail-panel");
   });
 
   it("the panel overlays from the inline-start edge, unclipped, and animates its width", () => {
@@ -186,8 +200,12 @@ describe("HkSidebarRail geometry contract", () => {
     // Vertical centering on the edge.
     expect(toggle).toContain("inset-block-start: 50%");
     expect(toggle).toContain("translate: 0 -50%");
-    // Above the panel + content.
-    expect(toggle).toContain("z-index: 2");
+    // Above the panel's local chrome — through the FAB band token, never a
+    // raw number: the overlay-scrollbar thumb rides a raw 2 through
+    // uncontexted ancestors right up to this panel, so the toggle must
+    // strictly outrank it (a tie would be DOM-order roulette).
+    expect(toggle).toContain("z-index: var(--hk-z-fab, 40)");
+    expect(toggle).not.toMatch(/z-index:\s*\d/);
   });
 
   it("the peek casts its shadow toward the content side, mirrored in RTL", () => {
@@ -256,7 +274,9 @@ describe("HkSidebarRail geometry contract", () => {
     expect(layer, "the flight layer rule exists").not.toBeNull();
     expect(layer).toContain("position: absolute");
     expect(layer).toContain("inset: 0");
-    expect(layer).toContain("z-index: 2");
+    // The local-bump band token, never a raw number (see 4b).
+    expect(layer).toContain("z-index: var(--hk-z-above, 1)");
+    expect(layer).not.toMatch(/z-index:\s*\d/);
     expect(layer).toContain("pointer-events: none");
 
     const clone = ruleBody(css, ".hk-sidebar-rail-flight-clone");