@celestia-island/hikari 0.55.240 → 0.55.242

package/package.json

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

package/src/components/HkAboutModal.scss

@@ -1,5 +1,6 @@
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 .s-about-modal {
   position: relative;
@@ -64,7 +65,7 @@
   width: 3.75rem;
   height: 3.75rem;
   object-fit: contain;
-  user-select: none;
+  @include user-select(none);
 }
 
 .s-about-modal-logo {

package/src/components/HkAlert.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-alert {
   display: flex;
   align-items: flex-start;
@@ -96,8 +98,7 @@
   /* Alert body = the same copy-this-error-detail content class as the
    * toast message and message-box text (L2 selection policy re-enables,
    * 2026-10-29); the title above stays chrome. */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   margin: 0;
   line-height: 1.5;
   color: color-mix(in srgb, var(--hi-color-text-secondary, #666666) 85%, transparent);

package/src/components/HkAvatar.scss

@@ -2,6 +2,8 @@
 // Hikari Avatar Component
 // ------
 
+@use "../styles/polyfill" as *;
+
 .hk-avatar {
   display: inline-flex;
   align-items: center;
@@ -44,7 +46,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  user-select: none;
+  @include user-select(none);
   font-weight: 600;
 }
 

package/src/components/HkBadge.scss

@@ -9,6 +9,7 @@
 
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 .hk-badge {
   --hk-badge-text: inherit;
@@ -30,8 +31,7 @@
   /* Tags are labels, not prose: dragging across a row of pills must never
      start a text selection (the workspace tag contract makes HkCopyBadge
      the copy path instead). */
-  user-select: none;
-  -webkit-user-select: none;
+  @include user-select(none);
 }
 
 /* ---------- size ---------- */

package/src/components/HkBlockingToast.scss

@@ -6,6 +6,8 @@
 // with a button row appended. Pointer events pass through the column
 // and re-enable on the per-card slot, exactly like toasts.
 
+@use "../styles/polyfill" as *;
+
 .hk-blocking-toast-container {
   position: fixed;
   top: 4rem;
@@ -38,7 +40,7 @@
   font-size: var(--text-base, 0.875rem);
   line-height: 1.4;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(12px);
+  @include backdrop-filter(blur(12px));
 }
 
 .hk-blocking-toast-icon {
@@ -61,14 +63,12 @@
   /* Content, not chrome — copy-worthy detail under the L2 selection
    * policy (2026-10-29): the card shell denies, these two text blocks
    * select again. */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   font-weight: 700;
 }
 
 .hk-blocking-toast-message {
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 5;
@@ -163,7 +163,7 @@
 .hk-blocking-toast-actions .hk-btn-secondary {
   background: transparent;
   border-color: color-mix(in srgb, currentColor 45%, transparent);
-  backdrop-filter: none;
+  @include backdrop-filter(none);
   color: inherit;
 }
 

package/src/components/HkBoard.scss

@@ -3,6 +3,8 @@
 // this file only styles the layers (grid, world, edges, node shells,
 // minimap dock).
 
+@use "../styles/polyfill" as *;
+
 .hk-board {
   position: relative;
   width: 100%;
@@ -12,7 +14,7 @@
   background: rgb(var(--color-surface));
   // gestures own the surface: no native scroll/selection interference
   touch-action: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-board-grid {

package/src/components/HkBoard3D.scss

@@ -2,6 +2,8 @@
 // The renderer owns the pixels; this file only styles the layers (canvas,
 // CSS2D labels, overlay slot, fallback note, minimap dock).
 
+@use "../styles/polyfill" as *;
+
 .hk-board3d {
   position: relative;
   width: 100%;
@@ -12,7 +14,7 @@
   // Gestures own the surface: no native scroll/selection interference
   // (HkBoard precedent).
   touch-action: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-board3d-canvas {

package/src/components/HkBreadcrumb.scss

@@ -1,6 +1,7 @@
 @use "./menu-item" as mi;
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 // ------
 // Hikari Breadcrumb Component
@@ -218,7 +219,7 @@
     border-radius: vars.$hikari-radius-fine-md;
     border: 1px solid var(--hi-color-border);
     background: var(--hi-surface);
-    backdrop-filter: blur(4px);
+    @include backdrop-filter(blur(4px));
     box-shadow:
       0 8px 16px var(--hi-black-30, rgba(0, 0, 0, 0.3)),
       0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;

package/src/components/HkButton.scss

@@ -1,4 +1,5 @@
 @use "../tokens";
+@use "../styles/polyfill" as *;
 
 /* HkButton */
 .hk-btn {
@@ -22,7 +23,7 @@
   transition-duration: var(--duration-normal);
   transition-timing-function: var(--ease-standard);
   white-space: nowrap;
-  user-select: none;
+  @include user-select(none);
   outline: none;
   position: relative;
 }
@@ -328,7 +329,7 @@
   background: rgb(var(--color-surface));
   color: rgb(var(--color-text));
   border-color: rgb(var(--color-border) / 20%);
-  backdrop-filter: blur(var(--blur-sm));
+  @include backdrop-filter(blur(var(--blur-sm)));
 }
 
 /* background stays the base surface — the hover declaration only restated

package/src/components/HkCard.scss

@@ -1,4 +1,5 @@
 @use "../tokens";
+@use "../styles/polyfill" as *;
 
 /* HkCard — canonical surface card. Hover emphasis is border-color only
    (the base elevation shadow is already at its resting value). No
@@ -7,7 +8,7 @@
   display: block;
   overflow: hidden;
   background: color-mix(in srgb, rgb(var(--color-surface)) 70%, transparent);
-  backdrop-filter: blur(var(--blur-md));
+  @include backdrop-filter(blur(var(--blur-md)));
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-elevated);

package/src/components/HkCheckbox.scss

@@ -2,6 +2,8 @@
  * HkCheckbox / HkRadio — unified selection control.
  */
 
+@use "../styles/polyfill" as *;
+
 .hk-checkbox {
   display: inline-flex;
   align-items: center;
@@ -12,7 +14,7 @@
   vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-checkbox[data-disabled] {

package/src/components/HkColorPicker.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-color-picker {
   display: inline-flex;
   min-width: 0;
@@ -88,7 +90,7 @@
 .hk-color-picker-panel {
   padding: var(--space-12);
   background: rgb(var(--color-surface));
-  backdrop-filter: blur(var(--blur-lg));
+  @include backdrop-filter(blur(var(--blur-lg)));
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-modal);
@@ -134,7 +136,7 @@
   flex: 1;
   height: 14px;
   touch-action: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-color-picker-slider-track {
@@ -245,7 +247,7 @@
   font-size: var(--text-xs);
   font-weight: 600;
   color: rgb(var(--color-muted));
-  user-select: none;
+  @include user-select(none);
   pointer-events: none;
   line-height: 1;
 }

package/src/components/HkConfirmDialog.scss

@@ -6,6 +6,8 @@
 // buttons share the row equally (no right-clustering of tiny sm buttons),
 // and on touch-width viewports they grow to the 44px thumb standard.
 
+@use "../styles/polyfill" as *;
+
 .hk-confirm-dialog {
   display: flex;
   flex-direction: column;
@@ -17,8 +19,7 @@
 .hk-confirm-dialog-message {
   /* Dialog message = copy-worthy content, same class as the message-box
    * text (L2 selection policy re-enables, 2026-10-29). */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   margin: 0;
   color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
   font-size: var(--text-sm, 0.8125rem);

package/src/components/HkCopyBadge.test.tsx

@@ -201,7 +201,7 @@ describe("HkCopyBadge", () => {
     // inherits the no-selection rule, copyable or not.
     const here = dirname(fileURLToPath(import.meta.url));
     const scss = readFileSync(join(here, "HkBadge.scss"), "utf-8");
-    expect(scss).toMatch(/user-select:\s*none/);
+    expect(scss).toMatch(/@include user-select\(\s*none\s*\)/);
   });
 
   it("lands consumer class on the badge element, not the tooltip wrapper", () => {

package/src/components/HkCrossfade.test.tsx

@@ -139,6 +139,54 @@ describe("HkCrossfade — DOM contract", () => {
     expect(list[1]!.classList.contains("hk-crossfade-enter-from")).toBe(true);
   });
 
+  it("marks the leaving copy INERT for the dissolve (a11y: dead content)", async () => {
+    // pointer-events: none only stops the mouse — the frozen copy must
+    // also leave the tab order and the accessibility tree, or a screen
+    // reader walks a second, stale copy (duplicate landmarks/roles; in
+    // the rail swap it is a whole second sidebar). A cancelled leave has
+    // to restore the item (see the next case).
+    vi.useFakeTimers();
+    freezeRaf();
+    const { container, set } = mountCrossfade();
+    await set("b");
+    await vi.advanceTimersByTimeAsync(200);
+
+    const list = items(container);
+    expect(list[0]!.hasAttribute("inert"), "the leaving copy is inert").toBe(true);
+    expect(list[0]!.getAttribute("aria-hidden")).toBe("true");
+    expect(list[1]!.hasAttribute("inert"), "the live copy stays interactive").toBe(false);
+    expect(list[1]!.hasAttribute("aria-hidden")).toBe(false);
+  });
+
+  it("a flip-back never leaves a LIVE copy inert (Vue removes the leaving node)", async () => {
+    // Pins the behavior the inert contract relies on: on a keyed
+    // flip-back Vue cancels the in-flight leave of the old element
+    // through its internal callback (no element argument -> routed to
+    // afterLeave, which REMOVES it) and re-enters the key as a FRESH
+    // element. So no live copy can carry inert; if Vue ever changed that
+    // shape (a reused, re-entered element), this test is the tripwire.
+    vi.useFakeTimers();
+    freezeRaf();
+    const { container, set } = mountCrossfade();
+    await set("b");
+    await vi.advanceTimersByTimeAsync(100);
+    const oldA = items(container).find((el) => el.dataset.crossfadeKey === "a")!;
+    expect(oldA.hasAttribute("inert")).toBe(true);
+
+    await set("a");
+    await vi.advanceTimersByTimeAsync(100);
+
+    // The inert old node is gone (not left mounted), and every live node
+    // for the key renders un-inert.
+    expect(oldA.isConnected, "the inert leaving node is removed").toBe(false);
+    const live = items(container).filter((el) => el.dataset.crossfadeKey === "a");
+    expect(live.length).toBeGreaterThan(0);
+    for (const el of live) {
+      expect(el.hasAttribute("inert"), "a live copy must never be inert").toBe(false);
+      expect(el.getAttribute("aria-hidden")).toBeNull();
+    }
+  });
+
   it("watchdog completes a stalled swap: sweeps frozen classes, drops the stale item", async () => {
     vi.useFakeTimers();
     freezeRaf();

package/src/components/HkCrossfade.tsx

@@ -40,7 +40,16 @@ const REPORT_MS = CROSSFADE_WATCHDOG_MS;
  *   opacity ahead of the outgoing one's decay and stops the composite from
  *   dipping toward the background mid-swap.
  * - The leaving item drops pointer events: it is dead content and must not
- *   intercept clicks while it dissolves under the incoming one.
+ *   intercept clicks while it dissolves under the incoming one. It is also
+ *   marked `inert` + `aria-hidden` for the dissolve (2026-10-31): a frozen
+ *   copy must leave the TAB ORDER and the accessibility tree too, or a
+ *   screen reader walks a stale duplicate (in the rail swap it is a whole
+ *   second sidebar). TRADE-OFF: a control focused in the leaving item is
+ *   blurred by the browser the moment the attribute lands, `--duration`
+ *   earlier than the unmount would have; hosts that care move focus FIRST
+ *   (the rail kit's closePeek does exactly that). happy-dom applies no
+ *   inert focus fixup, so that browser behavior is intentionally not
+ *   covered by this suite.
  * - `appear` dissolves the initially rendered item in; off by default —
  *   first paint should never animate (view shells, restored state).
  * - `disabled` renders the active item bare (synchronous swap, no watchdog):
@@ -115,6 +124,25 @@ export default defineComponent({
       if (pending === 0) report.cancel();
     };
 
+    /** Mark a leaving item inert (out of the tab order and the a11y tree)
+     *  for the dissolve. Attribute-based (not the `inert` IDL property) so
+     *  the DOM contract is observable in tests and SSR-less hosts alike.
+     *  The restore is defence: on a keyed flip-back Vue removes the
+     *  leaving node and re-enters a FRESH element (its internal
+     *  cancel-callback runs with no argument and routes to afterLeave), so
+     *  nothing live is ever left inert by that route — but any shape that
+     *  DOES cancel a leave must not keep a live copy inert. */
+    function setLeavingInert(el: Element | null | undefined, on: boolean): void {
+      if (!el) return;
+      if (on) {
+        el.setAttribute("inert", "");
+        el.setAttribute("aria-hidden", "true");
+        return;
+      }
+      el.removeAttribute("inert");
+      el.removeAttribute("aria-hidden");
+    }
+
     // ── Swap-stall watchdog ──────────────────────────────────────────
     /** Budget for one arm: the base sweep window plus the choreographed
      *  enter hold — a delayed enter is mid-flight, not stalled, when the
@@ -211,9 +239,23 @@ export default defineComponent({
             onBeforeEnter={() => { armReport(); armWatchdog(); }}
             onAfterEnter={settleReport}
             onEnterCancelled={settleReport}
-            onBeforeLeave={() => { armReport(); armWatchdog(); }}
+            onBeforeLeave={(el: Element) => {
+              // DEAD CONTENT for the dissolve: drop it from the tab order
+              // AND the accessibility tree. pointer-events: none (the
+              // leave rule) only stops the mouse — a frozen copy otherwise
+              // stays reachable by Tab and by a screen reader's virtual
+              // cursor for the whole dissolve, and in the rail swap it is
+              // a second full sidebar (duplicate landmark/roles, stale
+              // controls) while the live one dissolves in.
+              setLeavingInert(el, true);
+              armReport();
+              armWatchdog();
+            }}
             onAfterLeave={settleReport}
-            onLeaveCancelled={settleReport}
+            onLeaveCancelled={(el: Element) => {
+              setLeavingInert(el, false);
+              settleReport();
+            }}
           >
             {item()}
           </Transition>

package/src/components/HkDatePicker.scss

@@ -3,6 +3,7 @@
  * Uses the shared --hi-* design tokens. */
 
 @use "./HkPickerPane" as picker-pane;
+@use "../styles/polyfill" as *;
 
 .hk-dp {
   display: block;
@@ -40,7 +41,7 @@
   align-items: center;
   gap: var(--space-6, 6px);
   cursor: pointer;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-dp:not(.is-disabled) .hk-dp-trigger:hover,
@@ -139,7 +140,7 @@
   flex-direction: column;
   gap: var(--space-8, 8px);
   min-width: 17.5rem;
-  user-select: none;
+  @include user-select(none);
   color: var(--hi-color-text-primary);
 }
 

package/src/components/HkDateTimePicker.scss

@@ -3,12 +3,13 @@
  * stage and the direction-aware view transition live in HkPickerPane.scss. */
 
 @use "./HkPickerPane" as picker-pane;
+@use "../styles/polyfill" as *;
 
 .hk-dtp {
   display: flex;
   flex-direction: column;
   gap: var(--space-8, 8px);
-  user-select: none;
+  @include user-select(none);
   /* Fill the host (inline sheets/dialogs) instead of collapsing to the
    * grid's min-content width — a bottom-sheet calendar should use the
    * space it is given, not shrink to a cramped block. */

package/src/components/HkDiffViewer.scss

@@ -4,6 +4,7 @@
 // by the consumer's scroll container).
 
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 .hk-diff-viewer {
   border: 1px solid var(--hi-color-border, #646464);
@@ -57,11 +58,11 @@
   text-align: end;
   color: var(--hi-color-text-tertiary, #8b949e);
   opacity: 0.75;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-diff-viewer__sign {
-  user-select: none;
+  @include user-select(none);
   text-align: center;
   font-weight: 600;
 }
@@ -69,8 +70,7 @@
 .hk-diff-viewer__code {
   /* The diff body is content (review text users copy into replies);
    * the line-number gutter above and the sign column stay denied. */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   padding-inline-end: 1ch;
   min-width: 0;
 }
@@ -93,7 +93,7 @@
   font: inherit;
   text-align: start;
   cursor: pointer;
-  user-select: none;
+  @include user-select(none);
 
   &:hover {
     color: var(--hi-color-text-primary, #1e1e1e);
@@ -153,7 +153,7 @@
   color: var(--hi-color-text-tertiary, #8b949e);
   font: inherit;
   cursor: pointer;
-  user-select: none;
+  @include user-select(none);
 
   &:hover:not(:disabled) {
     background: rgb(var(--color-primary) / 10%);

package/src/components/HkDockBar.scss

@@ -5,6 +5,8 @@
  * together.
  */
 
+@use "../styles/polyfill" as *;
+
 .hk-dock-bar {
   /* Transparent anchor box — never intercepts canvas gestures around
    * the docked surface. */
@@ -137,12 +139,12 @@
 
 /* Glass surface (default) — blur the page canvas behind the dock. */
 .hk-dock-bar[data-surface="glass"] .hk-dock-bar-surface {
-  backdrop-filter: blur(var(--blur-lg));
+  @include backdrop-filter(blur(var(--blur-lg)));
 }
 
 /* Solid surface — no blur, for moving 3D canvases (per-frame backdrop
  * re-sampling over a live WebGL scene is expensive; the surface must
  * stay opaque anyway for contrast over the scene). */
 .hk-dock-bar[data-surface="solid"] .hk-dock-bar-surface {
-  backdrop-filter: none;
+  @include backdrop-filter(none);
 }

package/src/components/HkDockBar.test.tsx

@@ -198,6 +198,6 @@ describe("HkDockBar anchor geometry contract", () => {
       /\.hk-dock-bar\[data-surface="solid"\] \.hk-dock-bar-surface\s*\{[^}]*\}/,
     )?.[0];
     expect(solid, "solid surface rule must exist").toBeTruthy();
-    expect(solid).toContain("backdrop-filter: none");
+    expect(solid).toContain("@include backdrop-filter(none)");
   });
 });

package/src/components/HkDraggableGrid.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-draggable-grid {
   display: flex;
   flex-direction: column;
@@ -33,8 +35,7 @@
     border-color 150ms ease,
     background 150ms ease,
     box-shadow 150ms ease;
-  user-select: none;
-  -webkit-user-select: none;
+  @include user-select(none);
   transform-origin: center;
 
   &:hover {
@@ -131,7 +132,7 @@
     0 2px 6px rgb(0 0 0 / 18%);
   border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-elevated, #161b22);
-  backdrop-filter: blur(2px);
+  @include backdrop-filter(blur(2px));
   pointer-events: none;
   /* Drag ghost: above page chrome (--z-sidebar 900) but below every
      popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)

package/src/components/HkDraggableList.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-draggable-list {
   display: flex;
   flex-direction: column;
@@ -18,8 +20,7 @@
     opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
     border-color 150ms ease,
     background 150ms ease;
-  user-select: none;
-  -webkit-user-select: none;
+  @include user-select(none);
 
   &:hover {
     border-color: var(--hi-color-text-tertiary, #8b949e);
@@ -139,7 +140,7 @@
     0 2px 6px rgb(0 0 0 / 18%);
   border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-elevated, #161b22);
-  backdrop-filter: blur(2px);
+  @include backdrop-filter(blur(2px));
   pointer-events: none;
   /* Drag ghost: above page chrome (--z-sidebar 900) but below every
      popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)

package/src/components/HkDrawer.scss

@@ -1,4 +1,5 @@
 @use "./scrim-fade" as sf;
+@use "../styles/polyfill" as *;
 
 .hk-drawer-overlay {
   /* Overlay-root contract: #hk-overlay-root fences pointer events
@@ -8,7 +9,7 @@
   position: fixed;
   inset: 0;
   background: var(--hk-drawer-overlay-bg, rgba(0, 0, 0, 0.45));
-  backdrop-filter: var(--hk-drawer-overlay-blur, blur(6px));
+  @include backdrop-filter(var(--hk-drawer-overlay-blur, blur(6px)));
 }
 
 // Overlay enter/leave — fade-only classes from the shared window-layer
@@ -33,7 +34,7 @@
   // lag shows as patchy flicker along the moving edge. The mobile
   // guard below turns it off ≤767px; hosts restore a finish per
   // surface with --hk-drawer-blur / --hk-drawer-blur-mobile.
-  backdrop-filter: var(--hk-drawer-blur, blur(12px));
+  @include backdrop-filter(var(--hk-drawer-blur, blur(12px)));
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
   outline: none;
   // Scope layout/style invalidation to the drawer subtree — the page
@@ -226,11 +227,11 @@
   // family guard as the modal/select sheets, 2026-09-15 chest report).
   // The scrim's dim alone reads correctly there.
   .hk-drawer-overlay {
-    backdrop-filter: var(--hk-drawer-overlay-blur-mobile, none);
+    @include backdrop-filter(var(--hk-drawer-overlay-blur-mobile, none));
   }
 
   .hk-drawer-panel {
-    backdrop-filter: var(--hk-drawer-blur-mobile, none);
+    @include backdrop-filter(var(--hk-drawer-blur-mobile, none));
   }
 
   .hk-drawer-bottom {

package/src/components/HkEmptyState.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-empty-state {
   display: flex;
   flex-direction: column;
@@ -13,7 +15,7 @@
    every in-card empty state into a nested placeholder layer. */
 .hk-empty-state--boxed {
   background: var(--hk-empty-bg, var(--hi-color-surface, rgba(255,255,255,0.95)));
-  backdrop-filter: blur(var(--blur-sm, 8px));
+  @include backdrop-filter(blur(var(--blur-sm, 8px)));
   border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   border-radius: var(--radius-md, 0.5rem);
 }