@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkMarkdownRenderer.scss

@@ -2,7 +2,7 @@
 @use "./hikari-vars" as vars;
 
 .hk-markdown {
-  font-size: 0.875rem;
+  font-size: var(--text-base);
   line-height: 1.7;
   color: var(--hi-color-text-primary, #c9d1d9);
   position: relative;
@@ -31,7 +31,7 @@
 .hk-markdown ul,
 .hk-markdown ol {
   margin: 0.5em 0;
-  padding-left: 1.5em;
+  padding-inline-start: 1.5em;
 }
 
 .hk-markdown li {
@@ -59,13 +59,11 @@
   position: relative;
   margin: 0.75em 0;
   padding: 1em;
-  border-radius: 4px;
-  font-size: 0.8125rem;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
   line-height: 1.5;
-  user-select: none;
-  cursor: pointer;
   overflow-x: auto;
-  background: var(--hi-color-bg-subtle, #0d1117);
+  background: var(--hi-color-bg-subtle, #21262d);
 
   /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
      hidden, never styled. */
@@ -83,7 +81,7 @@
 .hk-md-code-lang {
   position: absolute;
   top: 0.25em;
-  right: 0.5em;
+  inset-inline-end: 0.5em;
   font-size: 0.625em;
   color: var(--hi-color-text-tertiary, #8b949e);
   opacity: 0.6;
@@ -97,7 +95,7 @@
   margin: 0;
   padding: 0.5rem 0;
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   line-height: 1.6;
   color: var(--hi-color-text-primary, #c9d1d9);
   white-space: pre-wrap;
@@ -107,7 +105,7 @@
 .hk-markdown blockquote {
   margin: 0.75em 0;
   padding: 0.5em 1em;
-  border-left: 3px solid var(--hi-color-text-tertiary, #8b949e);
+  border-inline-start: 3px solid var(--hi-color-text-tertiary, #8b949e);
   color: var(--hi-color-text-secondary, #8b949e);
 }
 
@@ -121,7 +119,7 @@
 .hk-markdown td {
   padding: 0.5em 0.75em;
   border: 1px solid var(--hi-color-border, #30363d);
-  text-align: left;
+  text-align: start;
 }
 
 .hk-markdown th {
@@ -138,6 +136,14 @@
   text-decoration: underline;
 }
 
+/* Rendered GFM links are real anchors — keyboard-focusable, so they need
+   the house :focus-visible ring (HkFab/HkContextRing pattern). Ring uses
+   the same contract var as the link ink so it matches in every theme. */
+.hk-markdown a:focus-visible {
+  outline: 2px solid var(--hi-color-primary, #58a6ff);
+  outline-offset: 2px;
+}
+
 .hk-markdown hr {
   border: none;
   border-top: 1px solid var(--hi-color-border, #30363d);
@@ -146,7 +152,7 @@
 
 .hk-markdown img {
   max-width: 100%;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .hk-markdown-overlay {
@@ -155,7 +161,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--hi-color-surface) 70%, transparent);
+  background: color-mix(in srgb, var(--hi-color-surface, #fff) 70%, transparent);
   backdrop-filter: blur(4px);
   z-index: 10;
 }

package/src/components/HkMediaControlBar.scss

@@ -10,11 +10,9 @@
 }
 
 .hk-media-btn.hk-btn {
-  min-width: 28px;
-  height: 28px;
+  min-width: var(--space-28);
+  height: var(--space-28);
   padding: 0 var(--space-6);
-  font-size: var(--text-xs);
-  font-weight: 600;
 }
 
 .hk-media-play.hk-btn {

package/src/components/HkMediaSlider.scss

@@ -20,7 +20,6 @@
 .hk-media-slider-buffered {
   position: absolute;
   inset: 0 auto 0 0;
-  height: 100%;
   border-radius: var(--radius-sm);
   background: rgb(var(--color-muted) / 40%);
 }
@@ -28,7 +27,6 @@
 .hk-media-slider-fill {
   position: absolute;
   inset: 0 auto 0 0;
-  height: 100%;
   border-radius: var(--radius-sm);
   background: rgb(var(--color-primary));
 }

package/src/components/HkMenu.scss

@@ -59,12 +59,6 @@
   min-width: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .hk-menu-row {
-    transition: none;
-  }
-}
-
 /* ── sidebar variant ────────────────────────────────────────────── */
 /* Inline vertical nav list — always rendered, no popover machinery.
  * Rows share the unified menu-item spec's grammar (metrics + states),
@@ -81,19 +75,11 @@
 
 .hk-menu-sidebar-row {
   @include mi.item;
-
-  .hk-menu-label {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }
 
-.hk-menu-sidebar-row .hk-menu-item-icon {
-  @include mi.icon;
-}
+/* Label and icon grammar comes from the shared .hk-menu-label /
+ * .hk-menu-item-icon rules above — sidebar rows carry those classes, so
+ * no sidebar-scoped copies are needed. */
 
 .hk-menu-sidebar-group {
   display: flex;
@@ -109,6 +95,19 @@
   transform: rotate(90deg);
 }
 
+/* RTL mirrors the expand chevron: the tsx always renders a right-pointing
+ * glyph, which reads backwards on the flipped axis (HkBreadcrumb
+ * precedent — scaleX mirrors paint only). An open group composes the
+ * same +90° turn after the mirror, so the open glyph points down in
+ * both directions. */
+[dir="rtl"] .hk-menu-more {
+  transform: scaleX(-1);
+}
+
+[dir="rtl"] .hk-menu-sidebar-group[data-open] .hk-menu-sidebar-group-toggle .hk-menu-more {
+  transform: scaleX(-1) rotate(90deg);
+}
+
 .hk-menu-sidebar-children {
   display: flex;
   flex-direction: column;
@@ -117,17 +116,30 @@
 }
 
 .hk-menu-sidebar-badge {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   height: 18px;
   padding: 0 var(--space-4, 4px);
-  border-radius: 999px;
-  background: rgb(var(--color-error, 240 70 80));
+  border-radius: var(--radius-full, 9999px);
+  background: rgb(var(--color-error, 247 118 142));
   color: #fff;
   font-size: var(--text-2xs, 10px);
   font-weight: 700;
   line-height: 1;
 }
+
+/* Reduced motion resets live AFTER the rules they guard so `transition: none`
+ * wins the cascade (the chevron's (0,2,0) transform transition used to be
+ * declared later in source order, leaving this guard dead for it). Sidebar
+ * rows carry the same mi.item color fades as .hk-menu-row, so they reset
+ * too. */
+@media (prefers-reduced-motion: reduce) {
+  .hk-menu-row,
+  .hk-menu-sidebar-row,
+  .hk-menu-sidebar-group-toggle .hk-menu-more {
+    transition: none;
+  }
+}

package/src/components/HkMenuIdentityItem.scss

@@ -15,7 +15,7 @@
 .hk-menu-identity-item__avatar {
   width: 36px;
   height: 36px;
-  border-radius: 9999px;
+  border-radius: var(--radius-full, 9999px);
   overflow: hidden;
   flex-shrink: 0;
   display: flex;
@@ -42,7 +42,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  gap: 2px;
+  gap: var(--space-2, 2px);
 }
 
 .hk-menu-identity-item__name {
@@ -66,5 +66,5 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2, 2px);
-  margin-top: 2px;
+  margin-top: var(--space-2, 2px);
 }

package/src/components/HkMinimap.scss

@@ -1,14 +1,19 @@
 .hk-minimap {
   position: absolute;
-  bottom: 12px;
-  right: 12px;
+  bottom: var(--space-12);
+  // Corner overlay anchor mirrors in RTL like the sibling HkZoomToolbar
+  // (inset-inline-end: 8px there).
+  inset-inline-end: var(--space-12);
   z-index: 50;
   width: 160px;
   background: rgb(var(--color-surface) / 0.82);
   border: 1px solid var(--border-faint);
   border-radius: var(--radius-sm);
   backdrop-filter: blur(var(--blur-md));
-  cursor: pointer;
+  // The root is a drag-to-pan surface (no click action): grab cursor, and
+  // the drag state tints the border like hover escalates it (HkBoard's
+  // draggable grab/grabbing precedent).
+  cursor: grab;
   overflow: hidden;
   pointer-events: auto;
   /* The minimap owns its own drag gestures — the surrounding pannable
@@ -22,6 +27,7 @@
 
   &[data-dragging] {
     cursor: grabbing;
+    border-color: rgb(var(--color-primary) / 0.5);
   }
 }
 
@@ -38,7 +44,6 @@
   gap: 2px;
   padding: 3px 8px;
   border-top: 1px solid var(--border-faint);
-  pointer-events: auto;
 }
 
 // Toolbar-only form (no overview map): shrink-wrap the card around the
@@ -62,21 +67,31 @@
   background: transparent;
   color: rgb(var(--color-text));
   cursor: pointer;
-  transition: background 0.1s ease, color 0.1s ease;
+  transition:
+    background var(--hi-duration-fast, 0.15s) ease,
+    color var(--hi-duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled) {
     background: rgb(var(--color-primary) / 0.1);
     color: rgb(var(--color-primary));
   }
 
+  &:active:not(:disabled) {
+    background: rgb(var(--color-primary) / 0.18);
+  }
+
   &:disabled {
     color: rgb(var(--color-muted) / 40%);
     cursor: not-allowed;
   }
-}
 
-.hk-mm-zoom-reset-btn svg {
-  stroke-width: 2px;
+  // Keyboard focus ring drawn INSIDE the border box: the card clips
+  // (overflow: hidden) and the bar pads only 3px vertically, so an outer
+  // ring would be shaved per-side (HkSelectionGrid precedent).
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
+  }
 }
 
 .hk-mm-zoom-label {

package/src/components/HkModal.scss

@@ -146,9 +146,9 @@
 }
 
 // Compact lead content (e.g. a context ring) rendered before the title.
-// The title's auto right margin overrides the space-between distribution,
-// so the lead + title cluster sits on the left and the close button stays
-// on the right edge.
+// The title's auto inline-end margin overrides the space-between
+// distribution, so the lead + title cluster sits at inline-start and the
+// close button stays pinned at inline-end (mirrors correctly in RTL).
 .hk-modal-header-lead {
   display: flex;
   align-items: center;
@@ -159,7 +159,7 @@
   gap: var(--hk-modal-header-lead-gap, 0.75rem);
 
   .hk-modal-title {
-    margin-right: auto;
+    margin-inline-end: auto;
   }
 }
 
@@ -250,22 +250,24 @@
 // .hk-scroll-container-autotag.
 .hk-modal-autofollow-tag {
   position: absolute;
-  right: 0.75rem;
-  bottom: 0.625rem;
+  /* Physical right on purpose: this tag and .hk-scroll-container-autotag
+     are visual twins pinned beside the physical corner FAB model — both
+     must anchor the same side in every direction. */
+  right: var(--space-12, 0.75rem);
+  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;
-  transition: opacity var(--hi-duration-fast, 0.15s) ease;
 }
 
 // Jump-back FAB (HkFab root) — floats above scroll content while follow
@@ -286,7 +288,7 @@
     var(--hk-modal-divider-color, var(--hi-color-border, rgba(0, 0, 0, 0.06)));
   display: flex;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--space-8);
   flex-shrink: 0;
 
   // Conditional footer slots (phases without actions, close transitions)
@@ -314,8 +316,9 @@
 // ------
 @media (max-width: 767px) {
   .hk-modal-content {
+    // !important beats the inline maxWidth (width prop); base width: 100%
+    // already applies at every viewport, so only the cap is re-asserted.
     max-width: 100% !important;
-    width: 100%;
     // Bottom-docked, content-hugging: `top: auto` lets the sheet size
     // itself from its content instead of stretching from the top inset
     // down to the bottom gap (2026-08-30 user report: the node-detail
@@ -371,12 +374,6 @@
     transform: translateY(100%);
   }
 
-  // Keep children pinned (same reason as desktop) — height stays auto.
-  .hk-modal-content-enter-active > *,
-  .hk-modal-content-leave-active > * {
-    flex: 0 0 auto;
-  }
-
   .hk-modal-header {
     padding: 0.875rem 1rem;
   }

package/src/components/HkModalBreadcrumb.scss

@@ -8,29 +8,32 @@
   z-index: var(--hk-breadcrumb-z, 2500);
   display: flex;
   align-items: center;
-  gap: var(--hi-space-4, 0.5rem);
-  padding: var(--hi-space-6, 0.75rem) var(--hi-space-16, 2rem);
+  // --space-N contract tokens are N px across the library (HkTable,
+  // HkAlert, HkDrawer); keep fallbacks on that scale so hosts defining the
+  // family don't collapse this strip (8px→4px gap, 32px→16px padding).
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-12, 0.75rem) var(--space-32, 2rem);
   background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
   border: 1px solid var(--hk-breadcrumb-border, rgba(0, 0, 0, 0.06));
   border-radius: var(--hi-radius-md, 0.5rem);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(var(--blur-md));
   pointer-events: none;
   user-select: none;
-  animation: hk-modal-breadcrumb-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-modal-breadcrumb-in var(--duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-modal-breadcrumb-crumb {
   display: inline-flex;
   align-items: center;
-  gap: var(--hi-space-4, 0.5rem);
+  gap: var(--space-8, 0.5rem);
 }
 
 .hk-modal-breadcrumb-item {
   display: inline-flex;
   align-items: center;
   line-height: 1.4;
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   color: var(--hi-color-text-secondary, #666);
   white-space: nowrap;
@@ -46,6 +49,14 @@
   flex-shrink: 0;
 }
 
+// RTL mirrors the chevron: the tsx always renders a right-pointing glyph,
+// which reads backwards on the flipped axis (HkBreadcrumb.scss precedent —
+// there the class wraps the svg, here the class IS the svg, so the mirror
+// lands on the element itself; static transform, no motion to guard).
+[dir="rtl"] .hk-modal-breadcrumb-sep {
+  transform: scaleX(-1);
+}
+
 @keyframes hk-modal-breadcrumb-in {
   from {
     opacity: 0;
@@ -56,3 +67,11 @@
     transform: translate(-50%, -50%);
   }
 }
+
+// House reduced-motion guard (HkExpansionPanel / HkTooltip pattern): the
+// entrance is a transform slide — drop it, keep the strip visible instantly.
+@media (prefers-reduced-motion: reduce) {
+  .hk-modal-breadcrumb {
+    animation: none;
+  }
+}

package/src/components/HkModelTag.scss

@@ -13,21 +13,31 @@
   min-width: 0;
 }
 
-// Number segment: keeps its left rounding, square right edge at the seam.
+// Number segment: keeps its inline-start rounding, square inline-end
+// edge at the seam. Logical corners so the joined geometry survives an
+// RTL flip (the flex row mirrors, and physical left/right radii would
+// land on the wrong sides).
 // (The extra .hk-badge term out-specifies hikari's own
 // `.hk-badge[data-pill="false"]` radius so import order cannot flip it.)
 .s-model-tag-group .hk-badge.s-model-tag-num {
-  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
-  border-right: none;
+  border-start-start-radius: var(--radius-sm, 4px);
+  border-end-start-radius: var(--radius-sm, 4px);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end: none;
   flex-shrink: 0;
 }
 
-// Name segment: square left edge at the seam — its own left border IS the
-// divider line (darkened a notch so the seam reads clearly against both
-// badge fills). Must be allowed to shrink so the text can ellipsize.
+// Name segment: square inline-start edge at the seam — its own
+// inline-start border IS the divider line (darkened a notch so the seam
+// reads clearly against both badge fills). Must be allowed to shrink so
+// the text can ellipsize.
 .s-model-tag-group .hk-badge.s-model-tag-name {
-  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-  border-left-color: rgb(var(--color-muted) / 35%);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-sm, 4px);
+  border-end-end-radius: var(--radius-sm, 4px);
+  border-inline-start-color: rgb(var(--color-muted) / 35%);
   min-width: 0;
   overflow: hidden;
 }
@@ -35,7 +45,7 @@
 // No `#tag` segment (bare model id): the name badge stands alone and
 // keeps the full badge radius — the divider/seam styling never shows.
 .s-model-tag-group .hk-badge.s-model-tag-name:only-child {
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-sm, 4px);
 }
 
 .s-model-tag-name-text {
@@ -80,7 +90,7 @@
 .s-model-card-stats {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 2px var(--space-10, 0.625rem);
+  gap: var(--space-2, 0.125rem) var(--space-10, 0.625rem);
   align-items: baseline;
 }
 
@@ -90,7 +100,7 @@
 }
 
 .s-model-card-col2 {
-  text-align: right;
+  text-align: end;
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
   font-variant-numeric: tabular-nums;
 }
@@ -114,8 +124,8 @@
 .s-model-card-cap {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px var(--space-6, 0.375rem);
+  gap: var(--space-4, 0.25rem);
+  padding: var(--space-2, 0.125rem) var(--space-6, 0.375rem);
   border-radius: var(--radius-sm, 4px);
   background: rgb(var(--color-primary) / 10%);
   color: rgb(var(--color-primary));

package/src/components/HkNavItem.scss

@@ -24,7 +24,7 @@
   background: none;
   border: 1px solid transparent;
   width: 100%;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition:
     background-color var(--hi-duration-fast, 0.15s) ease,
@@ -57,21 +57,16 @@
     opacity: 0.4;
     pointer-events: none;
   }
-}
-
-.hk-nav-item-button {
-  cursor: pointer;
 
+  /* Focus ring drawn inside the border box (offset -2px, the
+     HkSelectionGrid precedent): child rows sit inside the
+     overflow:hidden .hk-nav-item-children container, whose edges shave
+     the top/bottom legs of an outer ring. Every row — button and link
+     variants alike — carries .hk-nav-item, so one (0,2,0) rule covers
+     them all. */
   &:focus-visible {
     outline: 2px solid var(--hi-color-primary);
-    outline-offset: 2px;
-  }
-}
-
-.hk-nav-item-link {
-  &:focus-visible {
-    outline: 2px solid var(--hi-color-primary);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -85,6 +80,18 @@
   text-overflow: ellipsis;
 }
 
+/* Child-row badge (tsx emits it bare): a small push-to-end pill so it
+   never competes with the ellipsizing label for space. Auto inline-start
+   margin is the house push-to-end pattern and survives the RTL flip. */
+.hk-nav-item-badge {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  padding: 0 var(--space-6, 0.375rem);
+  border-radius: var(--radius-sm, 4px);
+  background: color-mix(in srgb, var(--hi-color-muted) 12%, transparent);
+  font-size: var(--text-2xs, 0.625rem);
+}
+
 .hk-nav-item-arrow {
   transition: transform 0.2s;
 }
@@ -94,6 +101,12 @@
 }
 
 .hk-nav-item-children {
-  padding-left: 1rem;
+  padding-inline-start: var(--space-16, 1rem);
   overflow: hidden;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-nav-item-arrow {
+    transition: none;
+  }
+}