@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkPopupSelect.scss

@@ -20,7 +20,7 @@
 }
 
 .hk-popup-select-required {
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
   color: rgb(var(--color-error));
 }
 
@@ -28,7 +28,10 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
+  // Logical longhand: the wide end inset clears the arrow on the inline END
+  // edge, so an RTL locale mirrors both the padding and the arrow with it.
+  padding: var(--space-8) var(--space-12);
+  padding-inline-end: var(--space-32);
   min-height: 2.5rem;
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   
@@ -41,7 +44,13 @@
   text-align: center;
   cursor: pointer;
   outline: none;
-  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
+  /* Longhand on purpose: the former comma-separated shorthand declared one
+   * transition per property where only `filter` carried the duration — the
+   * rest animated at 0s so hover/focus snapped (HkButton.scss precedent). */
+  transition-property: background-color, border-color, color, box-shadow,
+    opacity, transform, filter;
+  transition-duration: var(--duration-normal);
+  transition-timing-function: var(--ease-standard);
   position: relative;
 }
 
@@ -49,6 +58,11 @@
   border-color: var(--c-primary-strong);
 }
 
+// Press feedback (house pattern: HkButton.scss :active brightness dip).
+.hk-popup-select-trigger:active:not(:disabled):not([data-disabled]) {
+  filter: brightness(0.95);
+}
+
 .hk-popup-select-trigger:focus,
 .hk-popup-select-trigger[data-state="open"] {
   border-color: rgb(var(--color-focused-border));
@@ -80,10 +94,9 @@
 
 .hk-popup-select-arrow {
   position: absolute;
-  right: 0.75rem;
+  inset-inline-end: var(--space-12);
   color: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
   pointer-events: none;
-  flex-shrink: 0;
   transition: transform var(--duration-normal) ease;
 }
 
@@ -115,8 +128,8 @@
   @include mi.item;
 }
 
-/* Highlight face yields to checked/active (see HkSelect.scss). */
-.hk-popup-select-item:hover:not([data-checked]):not([data-active]),
+/* Keyboard highlight face yields to checked/active; the hover face comes
+ * from mi.item's own guarded :hover (identical values, higher specificity). */
 .hk-popup-select-item[data-highlighted]:not([data-checked]):not([data-active]) {
   background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
   border-color: var(--c-primary-medium, rgb(var(--color-primary) / 25%));
@@ -137,3 +150,11 @@
 // lit a second nested scrollbar inside the same window. The desktop
 // popout keeps its 240px content cap + viewport scroll, where the
 // viewport bar is the popup's only scrollbar.
+
+// Chevron flip is a transform animation — house reduced-motion guard
+// (HkExpansionPanel.scss silences its chevron the same way).
+@media (prefers-reduced-motion: reduce) {
+  .hk-popup-select-arrow {
+    transition: none;
+  }
+}

package/src/components/HkProgressBar.scss

@@ -31,10 +31,12 @@
 .hk-progress-bar-secondary {
   position: absolute;
   top: 0;
-  left: 0;
+  // Logical: anchors to the inline start like the in-flow fill, so an RTL
+  // track keeps the secondary bar on the same side as the fill.
+  inset-inline-start: 0;
   height: 100%;
   border-radius: var(--radius-full);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width var(--duration-normal) var(--ease-standard);
   opacity: 0.3;
 
   &-loading {
@@ -54,7 +56,7 @@
   position: relative;
   height: 100%;
   border-radius: var(--radius-full);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width var(--duration-normal) var(--ease-standard);
 
   &-loading {
     background: rgb(var(--color-primary));
@@ -105,18 +107,38 @@
   // No per-block rounding — flush multi-color blocks would otherwise show
   // hairlines at the seams.
   border-radius: 0;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width var(--duration-normal) var(--ease-standard);
   background: rgb(var(--color-primary));
 }
 
+// Keyframes animate the logical inset so the sweep mirrors in RTL together
+// with the fill/secondary anchoring (LTR-identical).
 @keyframes hk-progress-indeterminate {
   0% {
-    left: -40%;
+    inset-inline-start: -40%;
   }
   60% {
-    left: 100%;
+    inset-inline-start: 100%;
   }
   100% {
-    left: 100%;
+    inset-inline-start: 100%;
+  }
+}
+
+// House pattern (HkExpansionPanel.scss / HkAffixPicker.scss guards): the
+// infinite indeterminate sweep must not run under reduced motion; the bar
+// rests as a static 40% block at the inline start, like the done/error
+// variants rest at full width.
+@media (prefers-reduced-motion: reduce) {
+  .hk-progress-bar-indeterminate {
+    animation: none;
+  }
+
+  // Width is a size animation — progress steps snap instead of animating
+  // (house guard: HkTokenUsagePanel's bar fill).
+  .hk-progress-bar-fill,
+  .hk-progress-bar-secondary,
+  .hk-progress-bar-seg {
+    transition: none;
   }
 }

package/src/components/HkProgressDialog.scss

@@ -9,9 +9,11 @@
 
 .s-progress-dialog-log {
   border-radius: 0.375rem;
+  /* 6% black wash, not the border token: --hi-color-border resolves to a
+     15% tint that would visibly darken the log panel. */
   background: rgba(0, 0, 0, 0.06);
-  padding: 0.5rem;
+  padding: var(--space-8, 0.5rem);
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
-  font-size: 0.75rem;
+  font-size: var(--text-xs, 0.75rem);
   line-height: 1.5;
 }

package/src/components/HkProgressRing.scss

@@ -9,34 +9,27 @@
 .hk-progress-ring-svg {
   width: 100%;
   height: 100%;
-  transform: rotate(0deg);
 }
 
 .hk-progress-ring-track {
   stroke: var(--hk-progress-ring-track, var(--hi-color-border, rgba(0, 0, 0, 0.12)));
-  transition: stroke 0.3s ease;
+  transition: stroke var(--duration-normal) var(--ease-standard);
 }
 
-.hk-progress-ring-fill {
+// Segmented-mode arcs: segments without an explicit `color` fall back to
+// the theme primary (same default as the single-value fill).
+.hk-progress-ring-fill,
+.hk-progress-ring-seg {
   stroke: var(--hi-color-primary, #58a6ff);
   transition:
-    stroke-dashoffset 0.3s ease,
-    stroke 0.3s ease;
+    stroke-dashoffset var(--duration-normal) var(--ease-standard),
+    stroke var(--duration-normal) var(--ease-standard);
 }
 
 .hk-progress-ring-success .hk-progress-ring-fill {
   stroke: var(--hi-color-success, #3fb950);
 }
 
-// Segmented-mode arcs: segments without an explicit `color` fall back to
-// the theme primary (same default as the single-value fill).
-.hk-progress-ring-seg {
-  stroke: var(--hi-color-primary, #58a6ff);
-  transition:
-    stroke-dashoffset 0.3s ease,
-    stroke 0.3s ease;
-}
-
 .hk-progress-ring-exception .hk-progress-ring-fill {
   stroke: var(--hi-color-danger, #f85149);
 }

package/src/components/HkProtocolModal.scss

@@ -2,6 +2,3 @@
  * content and the HkModal body scroller is THE scrollbar. The old
  * `bodyHeight`-driven nested scroll region (with its own overlay chrome)
  * was removed as dead API — no consumer in the family ever passed it. */
-.s-protocol-modal {
-  position: relative;
-}

package/src/components/HkQrCode.scss

@@ -16,8 +16,8 @@
 }
 
 .hk-qr-label {
-  font-size: var(--text-2xs, 0.75rem);
+  font-size: var(--text-2xs, 0.625rem);
   line-height: 1.4;
-  color: rgb(var(--color-muted, 120 113 108));
+  color: rgb(var(--color-muted, 108 108 108));
   text-align: center;
 }

package/src/components/HkRadio.scss

@@ -1,6 +1,6 @@
 .hk-radio-group {
   display: flex;
-  gap: 1rem;
+  gap: var(--space-16, 1rem);
 
   &-horizontal {
     flex-direction: row;
@@ -12,18 +12,18 @@
   }
 
   &-sm {
-    gap: 0.5rem;
+    gap: var(--space-8, 0.5rem);
   }
 
   &-lg {
-    gap: 1.25rem;
+    gap: var(--space-20, 1.25rem);
   }
 }
 
 .hk-radio {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
 
@@ -43,8 +43,8 @@
   border: 1px solid var(--hi-color-border);
   background: var(--hi-color-surface);
   transition:
-    border-color 0.3s ease,
-    background 0.3s ease;
+    border-color var(--hi-duration-normal, 0.3s) ease,
+    background var(--hi-duration-normal, 0.3s) ease;
   flex-shrink: 0;
   position: relative;
 
@@ -83,6 +83,15 @@
   pointer-events: none;
 }
 
+/* Keyboard focus: the native input is visually hidden, so draw the house
+   double ring (HkButton/HkCheckbox pattern) on the box via :has();
+   :focus-visible keeps mouse clicks ring-free. */
+.hk-radio-box:has(.hk-radio-input:focus-visible) {
+  box-shadow:
+    0 0 0 2px var(--hi-color-surface, rgba(255, 255, 255, 0.95)),
+    0 0 0 4px var(--hi-color-primary, #ff6b9d);
+}
+
 /* --- Dot --- */
 
 .hk-radio-dot {

package/src/components/HkRichInput.scss

@@ -27,11 +27,25 @@
   background: rgb(var(--color-surface) / 0.5);
   cursor: pointer;
   overflow: hidden;
+  transition:
+    border-color var(--duration-short, 0.15s) ease,
+    background var(--duration-short, 0.15s) ease;
 
   &[data-variant="media"] {
     width: 72px;
     height: 48px;
   }
+
+  /* Clickable tile (previewAttachment) with no hover/press affordance;
+   * color/background only, so no reduced-motion guard is needed. */
+  &:hover {
+    border-color: rgb(var(--color-primary) / 45%);
+    background: rgb(var(--color-surface) / 0.8);
+  }
+
+  &:active {
+    background: rgb(var(--color-surface) / 0.9);
+  }
 }
 
 .s-rich-input-attachment-thumb {
@@ -47,22 +61,21 @@
   }
 }
 
-.s-rich-input-attachment-play {
+.s-rich-input-attachment-play,
+.s-rich-input-attachment-progress {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.s-rich-input-attachment-play {
   color: #fff;
   background: rgb(0 0 0 / 25%);
 }
 
 .s-rich-input-attachment-progress {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background: rgb(0 0 0 / 30%);
 }
 
@@ -90,12 +103,13 @@
 .s-rich-input-attachment-remove {
   position: absolute;
   top: 2px;
-  right: 2px;
+  inset-inline-end: 2px;
   opacity: 0;
   transition: opacity var(--duration-short, 0.15s) ease;
 }
 
-.s-rich-input-attachment:hover .s-rich-input-attachment-remove {
+.s-rich-input-attachment:hover .s-rich-input-attachment-remove,
+.s-rich-input-attachment:focus-within .s-rich-input-attachment-remove {
   opacity: 1;
 }
 
@@ -125,17 +139,19 @@
     border-color: rgb(var(--color-primary));
   }
 
-  .s-rich-input-textarea {
+  /* The `s-rich-input-textarea` class passed to HInput never reaches the
+   * DOM (inheritAttrs:false + filteredAttrs strip class), so strip the
+   * embedded input's chrome on its real carrier (.hk-input-box) instead.
+   * The :focus-within twin outranks HkInput's own focus ring regardless
+   * of stylesheet order. */
+  .hk-input-box,
+  .hk-input-box:focus-within {
     border: none;
     box-shadow: none;
     background: transparent;
   }
 }
 
-.s-rich-input-textarea {
-  width: 100%;
-}
-
 /* ── Tools row ──────────────────────────────────────────────────── */
 .s-rich-input-tools {
   display: flex;

package/src/components/HkRollingNumber.scss

@@ -3,15 +3,13 @@
   font-variant-numeric: tabular-nums;
   line-height: 1;
 
-  [data-el="char"] {
-    display: inline-block;
-  }
+  /* char/slot/digit are all flex items (root and roll are flex
+     containers), so their display blockifies and vertical-align never
+     applies — no explicit display/vertical-align declarations. */
 
   [data-el="slot"] {
-    display: inline-block;
     position: relative;
     overflow: hidden;
-    vertical-align: baseline;
     height: 1em;
   }
 
@@ -22,7 +20,6 @@
   }
 
   [data-el="digit"] {
-    display: block;
     height: 1em;
   }
 }
@@ -35,3 +32,14 @@
     transform: translateY(-1em);
   }
 }
+
+/* Reduced motion: stop the digit roll. The global switch
+ * (`html[data-css-animations="0"]`) pauses it too when the host wired
+ * it; the media block covers hosts that never did. Safe: the component
+ * arms a cron fallback that force-commits the final digit whenever
+ * `animationend` never fires. */
+@media (prefers-reduced-motion: reduce) {
+  .hk-rolling-number [data-el="roll"] {
+    animation: none;
+  }
+}

package/src/components/HkScrollContainer.scss

@@ -45,7 +45,7 @@
    content fade. The fade size custom property is declared on the
    root so consumers can override it from the container element. */
 .hk-scroll-container[data-fade="true"] {
-  --hk-scroll-fade-size: 24px;
+  --hk-scroll-fade-size: var(--space-24);
 }
 
 .hk-scroll-container[data-fade="true"][data-h-overflow="end"] > .hk-scroll-container-viewport {
@@ -58,6 +58,18 @@
   mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
 }
 
+/* RTL: the horizontal scroll start/end edges swap sides, so the
+ * directional fades flip (the "both" mask is end-symmetric — no flip). */
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"] > .hk-scroll-container-viewport {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
+  mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
+}
+
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"] > .hk-scroll-container-viewport {
+  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
+  mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
+}
+
 .hk-scroll-container[data-fade="true"][data-h-overflow="both"] > .hk-scroll-container-viewport {
   -webkit-mask-image: linear-gradient(
     to right,
@@ -90,18 +102,18 @@
 
 .hk-scroll-container-autotag {
   position: absolute;
-  right: 0.625rem;
-  bottom: 0.625rem;
+  right: var(--space-10);
+  bottom: var(--space-10);
   z-index: 6;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
-  padding: 2px 8px;
-  font-size: 0.625rem;
+  padding: var(--space-2) var(--space-8);
+  font-size: var(--text-2xs);
   letter-spacing: 0.04em;
-  color: var(--hi-color-muted);
-  background: color-mix(in srgb, var(--hi-color-surface) 78%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border) 12%, transparent);
+  color: var(--hi-color-muted, #666);
+  background: color-mix(in srgb, var(--hi-color-surface, rgba(255, 255, 255, 0.95)) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.08)) 12%, transparent);
   border-radius: var(--hi-radius-full, 9999px);
   backdrop-filter: blur(4px);
   opacity: 0.85;

package/src/components/HkSearchInput.scss

@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding-left: 0.75rem;
+  padding-inline-start: var(--space-12);
   color: var(--hi-color-muted);
 
   svg {
@@ -47,9 +47,9 @@
   outline: none;
   color: var(--hi-color-text-primary);
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--text-base);
   line-height: 1.5;
-  padding: 0 0.5rem;
+  padding: 0 var(--space-8);
 
   &::placeholder {
     color: var(--hi-color-muted);
@@ -68,12 +68,11 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 1.75rem;
+  width: var(--space-28);
   height: 100%;
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: 0;
   color: var(--hi-color-muted);
   cursor: pointer;
   transition:
@@ -89,17 +88,21 @@
     background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
     color: var(--hi-color-text-primary);
   }
+
+  &:active {
+    background: color-mix(in srgb, var(--hi-color-surface) 80%, transparent);
+  }
 }
 
 /* --- Size variants --- */
 
 .hk-search-input-sm .hk-search-input-field {
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   height: 1.75rem;
 }
 
 .hk-search-input-sm .hk-search-input-icon {
-  padding-left: 0.5rem;
+  padding-inline-start: var(--space-8);
 
   svg {
     width: 14px;
@@ -108,17 +111,16 @@
 }
 
 .hk-search-input-md .hk-search-input-field {
-  font-size: 0.875rem;
   height: 2.25rem;
 }
 
 .hk-search-input-lg .hk-search-input-field {
-  font-size: 1rem;
+  font-size: var(--text-md);
   height: 2.75rem;
 }
 
 .hk-search-input-lg .hk-search-input-icon {
-  padding-left: 1rem;
+  padding-inline-start: var(--space-16);
 
   svg {
     width: 18px;

package/src/components/HkSecretRevealModal.scss

@@ -38,18 +38,28 @@
   gap: var(--space-6, 0.375rem);
   padding: var(--space-6, 0.375rem) var(--space-12, 0.75rem);
   border: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-sm, 4px);
   background: rgb(var(--color-primary));
   color: rgb(var(--color-on-solid-text, 255 255 255));
   font-size: var(--text-sm, 0.8125rem);
   font-weight: 600;
   cursor: pointer;
+  transition: filter 200ms ease;
 }
 
 .s-secret-modal-copy:hover {
   filter: brightness(1.1);
 }
 
+.s-secret-modal-copy:active {
+  filter: brightness(0.92);
+}
+
+.s-secret-modal-copy:focus-visible {
+  box-shadow:
+    0 0 0 2px rgb(var(--color-surface)),
+    0 0 0 4px rgb(var(--color-primary));
+}
 
 .s-secret-modal-copy:disabled {
   opacity: 0.5;