@celestia-island/hikari 0.55.240 → 0.55.241

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.240",
+  "version": "0.55.241",
   "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/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);
 }

package/src/components/HkEmptyState.surface.contract.test.ts

@@ -14,9 +14,12 @@ import { fileURLToPath } from "node:url";
 
 const here = dirname(fileURLToPath(import.meta.url));
 
+// `backdrop-filter` is matched without its colon because the blur is
+// authored as `@include backdrop-filter(...)` (styles/polyfill.scss) —
+// the marker must see both the include and any raw declaration.
 const SURFACE_PROPERTIES = [
   "background:",
-  "backdrop-filter:",
+  "backdrop-filter",
   "border:",
   "border-radius:",
 ] as const;
@@ -56,7 +59,7 @@ describe("HkEmptyState surface contract", () => {
       "",
     );
     expect(withoutBoxed).not.toContain("background:");
-    expect(withoutBoxed).not.toContain("backdrop-filter:");
+    expect(withoutBoxed).not.toContain("backdrop-filter");
     expect(withoutBoxed).not.toContain("border: 1px");
     expect(withoutBoxed).not.toContain("border-radius:");
   });

package/src/components/HkErrorLanding.scss

@@ -5,6 +5,8 @@
 // standalone (server error page without hikari theme init) and adapts to
 // host themes (dark mode etc.) when the vars exist.
 
+@use "../styles/polyfill" as *;
+
 .hk-error-landing {
   --hel-background: var(--color-background, 246 247 249);
   --hel-surface: var(--color-surface, 255 255 255);
@@ -205,7 +207,7 @@
   font-weight: 500;
   letter-spacing: 0.02em;
   color: rgb(var(--hel-muted));
-  user-select: none;
+  @include user-select(none);
 }
 
 // Standing-frame details pane: the raw payload keeps a STABLE height —

package/src/components/HkFab.scss

@@ -2,6 +2,9 @@
 // Attribute-driven positioning: data-positioning (absolute|fixed) +
 // data-corner select the anchored insets; --hk-fab-offset-* extends the
 // safe-area-aware base per instance (set from offsetX / offsetY).
+
+@use "../styles/polyfill" as *;
+
 .hk-fab {
   position: absolute;
   z-index: var(--hk-z-fab);
@@ -87,7 +90,7 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   color: var(--hi-color-text-secondary, #666666);
   background: color-mix(in srgb, var(--hi-color-surface, #ffffff) 78%, transparent);
   border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.12)) 25%, transparent);
-  backdrop-filter: blur(var(--blur-xs, 4px)); // chip language shared with autotag pills
+  @include backdrop-filter(blur(var(--blur-xs, 4px))); // chip language shared with autotag pills
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
 
   &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #ffffff) 92%, transparent); }
@@ -134,7 +137,7 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.12)) 25%, transparent);
   border-radius: var(--radius-full, 9999px);
   cursor: pointer;
-  backdrop-filter: blur(var(--blur-xs, 4px));
+  @include backdrop-filter(blur(var(--blur-xs, 4px)));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   opacity: 0;
   transform: scale(0.4);