@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkImageLightbox.scss

@@ -93,8 +93,6 @@
   top: var(--space-12, 0.75rem);
   right: var(--space-12, 0.75rem);
   z-index: 2;
-  background: var(--hi-icon-button-bg);
-  color: var(--hi-icon-button-icon-color);
   backdrop-filter: blur(6px);
 
   &:hover,
@@ -115,9 +113,12 @@
     }
   }
 
+  // Focus ring rides INSIDE the chip (negative offset, HkSelectionGrid
+  // precedent): an outward ring floats over raw imagery and vanishes on
+  // light photos.
   &:focus-visible {
     outline: 2px solid rgb(255 255 255 / 80%);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 

package/src/components/HkImagePreview.scss

@@ -16,15 +16,23 @@
 // Enlarge affordance: the tile acts as a button once the image is up.
 .hk-image-preview.is-zoomable {
   cursor: zoom-in;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 
   &:hover {
-    border-color: var(--hi-color-primary, #ffc0cb);
-    box-shadow: 0 0 0 1px var(--hi-color-primary, #ffc0cb);
+    border-color: var(--hi-color-primary, #58a6ff);
+    // Emphasis drawn INSIDE the border box (HkSelectionGrid precedent):
+    // outer spread rings get shaved per-side by overlapping chrome.
+    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #58a6ff);
+  }
+
+  // Press feedback matching the house button pattern (HkButton variants,
+  // HkSelectionGrid): the tile is role="button" once zoomable.
+  &:active {
+    filter: brightness(0.95);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #ffc0cb);
+    outline: 2px solid var(--hi-color-primary, #58a6ff);
     outline-offset: 2px;
   }
 }
@@ -35,10 +43,10 @@
   width: 100%;
   height: 100%;
   // object-fit comes from the prop (inline style).
-  opacity: 1;
-
   // Hidden while loading so the shimmer shows through; the real pixels
   // fade in on the load event.
+  transition: opacity 0.2s ease;
+
   &.is-pending {
     opacity: 0;
   }
@@ -57,9 +65,9 @@
   justify-content: center;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--hi-color-primary, #ffc0cb) 8%, transparent) 25%,
-    color-mix(in srgb, var(--hi-color-primary, #ffc0cb) 18%, transparent) 50%,
-    color-mix(in srgb, var(--hi-color-primary, #ffc0cb) 8%, transparent) 75%
+    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent) 25%,
+    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 18%, transparent) 50%,
+    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent) 75%
   );
   background-size: 200% 100%;
   animation: hk-image-preview-shimmer 1.5s ease-in-out infinite;

package/src/components/HkImageViewer.scss

@@ -31,3 +31,11 @@
   align-items: center;
   justify-content: center;
 }
+
+// Reduced motion: pan/zoom keeps working, the transform just stops
+// gliding (house pattern — HkExpansionPanel / HkAffixPicker).
+@media (prefers-reduced-motion: reduce) {
+  .hk-image-viewer-img {
+    transition: none;
+  }
+}

package/src/components/HkInput.scss

@@ -18,7 +18,7 @@
 }
 
 .hk-input-required {
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
   color: rgb(var(--color-error));
 }
 
@@ -34,7 +34,12 @@
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
   border-radius: var(--radius-sm);
   overflow: hidden;
-  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
+  /* Longhand on purpose: the comma shorthand attached the duration to the
+   * LAST property only, so hover border-color and the focus-within
+   * background/box-shadow snapped at 0s (HkButton F5, same disease). */
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform, filter;
+  transition-duration: var(--duration-normal);
+  transition-timing-function: var(--ease-standard);
   color: rgb(var(--color-text));
 
   &:hover:not(.hk-input-box-disabled) {
@@ -63,7 +68,6 @@
 }
 
 .hk-input-box[data-autogrow] {
-  display: flex;
   flex-direction: column;
   align-items: stretch;
 }
@@ -140,7 +144,6 @@
 .hk-input-element.hk-input-textarea {
   position: relative;
   inset: unset;
-  width: 100%;
   height: auto;
   flex: 1;
   min-width: 0;
@@ -163,28 +166,6 @@
   resize: none;
 }
 
-.hk-input-box[data-autogrow] {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.hk-input-autogrow {
-  flex: 1;
-  min-height: 0;
-}
-
-.hk-input-textarea[data-autogrow] {
-  position: relative;
-  inset: unset;
-  width: 100%;
-  flex: 0 0 auto;
-  resize: none;
-  overflow: hidden;
-  min-height: 2.5rem;
-  text-align: start;
-}
-
 .hk-input-affix {
   display: flex;
   align-items: center;
@@ -282,10 +263,29 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--color-text-secondary, #888);
+  /* Contract tokens, not the raw app triplets: --color-text-secondary is a
+   * bare "R G B" triplet, so using it directly as a color is invalid at
+   * computed-value time (the rule silently inherits); --color-text-primary
+   * is not defined anywhere. --hi-color-* wrap the triplets in rgb(). */
+  color: var(--hi-color-text-secondary, #888);
   cursor: pointer;
 
   &:hover {
-    color: var(--color-text-primary, #222);
+    color: var(--hi-color-text-primary, #222);
+  }
+
+  // Keyboard parity (house icon-button pattern, HkIconButton): this real
+  // <button> had a hover state only, so keyboard focus was invisible.
+  // Offset 2px is safe here — the toggle rides the box's inline padding,
+  // well inside the box's overflow:hidden clip edge.
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  // Press feedback matching the house button pattern (HkButton variants).
+  &:active {
+    filter: brightness(0.95);
   }
 }

package/src/components/HkJsonTree.scss

@@ -50,7 +50,9 @@
   display: flex;
   align-items: baseline;
   min-height: 1.55em;
-  padding: 0 var(--space-6, 0.375rem);
+  /* Inline paddingLeft (tsx) always overrides the left half; spell out the
+     dead slot so the live right inset is not mistaken for symmetric. */
+  padding: 0 var(--space-6, 0.375rem) 0 0;
   border-radius: var(--radius-xs, 2px);
   cursor: default;
 }
@@ -70,7 +72,7 @@
   width: var(--jt-toggle);
   height: var(--jt-toggle);
   flex-shrink: 0;
-  margin-right: 2px;
+  margin-inline-end: var(--space-2, 0.125rem);
   /* The toggle box has no text baseline of its own — pin it to the line
      top instead of letting it join the row's baseline group with a
      synthesized border-box baseline. */
@@ -115,7 +117,7 @@
 
 .s-jt-colon {
   color: rgb(var(--color-muted));
-  margin-right: 0.35em;
+  margin-inline-end: 0.35em;
 }
 
 .s-jv-null {
@@ -123,21 +125,24 @@
   font-style: italic;
 }
 
+/* Value colors join the shared --code-* family (see tokens.scss) so themes
+   restyle the tree together with HkToolBlock's code blocks; fallbacks keep
+   the One Dark originals. */
 .s-jv-str {
-  color: #98c379;
+  color: var(--code-string, #98c379);
   word-break: break-all;
 }
 
 .s-jv-num {
-  color: #d19a66;
+  color: var(--code-number, #d19a66);
 }
 
 .s-jv-bool {
-  color: #c678dd;
+  color: var(--code-keyword, #c678dd);
 }
 
 .s-jv-str-raw {
-  color: #98c379;
+  color: var(--code-string, #98c379);
   white-space: pre-wrap;
   word-break: break-all;
 }
@@ -146,8 +151,8 @@
   color: rgb(var(--color-muted) / 0.6);
   font-size: var(--text-3xs, 0.5rem);
   font-style: italic;
-  margin-left: 0.75em;
   font-weight: 400;
+  margin-inline-start: 0.75em;
 }
 
 .s-jt-badge {
@@ -162,7 +167,6 @@
 }
 
 .s-jt-badge.is-open {
-  color: rgb(var(--color-muted));
   background: transparent;
   border-color: transparent;
   font-weight: 400;

package/src/components/HkKeywordSearchModal.scss

@@ -1,23 +1,26 @@
 .hk-kw-search {
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-10, 1.25rem);
-  padding: var(--hi-space-4, 0.25rem) 0;
+  /* Token names follow the VALUES this component has always rendered
+   * (the old --hi-space-* names never resolved), not the numerals:
+   * 1.25rem is --space-20, not --space-10. */
+  gap: var(--space-20, 1.25rem);
+  padding: var(--space-4, 0.25rem) 0;
 }
 
 .hk-kw-search-box {
   display: flex;
   align-items: center;
-  gap: var(--hi-space-8, 0.5rem);
-  padding: var(--hi-space-8, 0.5rem) var(--hi-space-10, 0.75rem);
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
   background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
-  border: 1px solid var(--hk-kw-border, rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--hk-kw-border, rgb(var(--color-border) / 8%));
   border-radius: var(--hi-radius-lg, 0.75rem);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 
   &:focus-within {
     border-color: var(--hi-color-primary, #58a6ff);
-    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 12%, transparent);
   }
 }
 
@@ -34,7 +37,7 @@
   border: 0;
   outline: none;
   color: var(--hi-color-text-primary, #333);
-  font-size: 0.875rem;
+  font-size: var(--text-base, 0.875rem);
 }
 
 .hk-kw-search-clear {
@@ -44,12 +47,17 @@
   color: var(--hi-color-text-secondary, #666);
   cursor: pointer;
   display: inline-flex;
-  padding: var(--hi-space-2, 0.125rem);
+  padding: var(--space-2, 0.125rem);
   border-radius: var(--hi-radius-sm, 0.25rem);
 
   &:hover {
     color: var(--hi-color-text-primary, #333);
   }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #58a6ff) 55%, transparent);
+    outline-offset: 2px;
+  }
 }
 
 /* ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the results list is NOT a
@@ -59,17 +67,17 @@
 .hk-kw-search-results {
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-4, 0.25rem);
-  padding: 0 var(--hi-space-2, 0.125rem);
+  gap: var(--space-4, 0.25rem);
+  padding: 0 var(--space-2, 0.125rem);
 }
 
 .hk-kw-search-result {
   appearance: none;
-  text-align: left;
+  text-align: start;
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--hi-radius-sm, 0.25rem);
-  padding: var(--hi-space-8, 0.5rem) var(--hi-space-10, 0.75rem);
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
   cursor: pointer;
   width: 100%;
   color: var(--hi-color-text-primary, #333);
@@ -77,25 +85,28 @@
 
   &:hover {
     background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
-    border-color: rgba(0, 0, 0, 0.06);
+    border-color: rgb(var(--color-border) / 6%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #58a6ff) 55%, transparent);
+    outline-offset: 2px;
   }
 }
 
 .hk-kw-search-empty {
-  padding: var(--hi-space-24, 3rem) var(--hi-space-8, 0.5rem);
+  /* 3rem sits beyond the theme scale (--space-40 ends it); the token
+   * name documents the intent, the fallback keeps the rendered size. */
+  padding: var(--space-48, 3rem) var(--space-8, 0.5rem);
   text-align: center;
-  font-size: 0.875rem;
+  font-size: var(--text-base, 0.875rem);
   color: var(--hi-color-text-secondary, #666);
 }
 
-.hk-kw-search-result-semantic {
-  display: block;
-}
-
 .hk-kw-search-semantic {
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-4, 0.25rem);
+  gap: var(--space-4, 0.25rem);
   min-width: 0;
 }
 
@@ -103,11 +114,11 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: var(--hi-space-8, 0.5rem);
+  gap: var(--space-8, 0.5rem);
 }
 
 .hk-kw-search-semantic-title {
-  font-size: 0.875rem;
+  font-size: var(--text-base, 0.875rem);
   font-weight: 600;
   color: var(--hi-color-text-primary, #333);
   overflow: hidden;
@@ -117,17 +128,17 @@
 
 .hk-kw-search-semantic-score {
   flex-shrink: 0;
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
   color: var(--hi-color-primary, #58a6ff);
-  background: rgba(88, 166, 255, 0.12);
-  padding: 0 var(--hi-space-6, 0.375rem);
+  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 12%, transparent);
+  padding: 0 var(--space-6, 0.375rem);
   border-radius: var(--hi-radius-sm, 0.25rem);
   line-height: 1.5;
 }
 
 .hk-kw-search-semantic-snippet {
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   color: var(--hi-color-text-secondary, #666);
   line-height: 1.5;
   display: -webkit-box;
@@ -139,11 +150,11 @@
 
 .hk-kw-search-semantic-source {
   align-self: flex-start;
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--hi-color-text-secondary, #666);
-  background: rgba(0, 0, 0, 0.04);
-  padding: 0 var(--hi-space-6, 0.375rem);
+  background: rgb(var(--color-border) / 4%);
+  padding: 0 var(--space-6, 0.375rem);
   border-radius: var(--hi-radius-sm, 0.25rem);
 }

package/src/components/HkLabel.scss

@@ -9,16 +9,16 @@
 
 .hk-label {
   display: inline;
-  font-size: var(--hi-text-base, 0.875rem);
+  font-size: var(--text-base, 0.875rem);
   line-height: 1.5;
   color: var(--hi-color-text-primary, #333);
 
   &.hk-label-sm {
-    font-size: var(--hi-text-xs, 0.75rem);
+    font-size: var(--text-xs, 0.75rem);
   }
 
   &.hk-label-lg {
-    font-size: var(--hi-text-md, 1rem);
+    font-size: var(--text-md, 1rem);
   }
 
   a {
@@ -30,5 +30,10 @@
     &:hover {
       text-decoration: underline;
     }
+
+    &:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #58a6ff) 55%, transparent);
+      outline-offset: 2px;
+    }
   }
 }

package/src/components/HkListTransition.scss

@@ -1,4 +1,9 @@
-.hk-list-move {
+/* FLIP move: vue applies `${name}-move` (runtime-dom resolves moveClass
+ * as `${name}-move`), never a bare `.hk-list-move`. pop/slide/fade share
+ * the normal duration; grow/reveal define their staggered bases below. */
+.hk-list-pop-move,
+.hk-list-slide-move,
+.hk-list-fade-move {
   transition: transform var(--hi-duration-normal, 0.3s) ease;
 }
 
@@ -52,6 +57,16 @@
   transform: translateX(12px);
 }
 
+/* RTL: reading direction flips, so slide enters from the right and
+ * exits to the left (HkBreadcrumb/HkBlockingToast [dir="rtl"] form). */
+[dir="rtl"] .hk-list-slide-enter-from {
+  transform: translateX(12px);
+}
+
+[dir="rtl"] .hk-list-slide-leave-to {
+  transform: translateX(-12px);
+}
+
 .hk-list-fade-enter-active {
   transition: opacity var(--hi-duration-normal, 0.3s) ease;
 }

package/src/components/HkLoadMore.scss

@@ -25,6 +25,16 @@
   background: linear-gradient(to left, transparent, rgb(var(--color-muted) / 35%));
 }
 
+/* The flex row flips in RTL, so the hairlines mirror too: transparent
+ * stays on the outer edge, muted towards the central control. */
+[dir="rtl"] .hk-load-more-rule {
+  background: linear-gradient(to left, transparent, rgb(var(--color-muted) / 35%));
+}
+
+[dir="rtl"] .hk-load-more-rule-end {
+  background: linear-gradient(to right, transparent, rgb(var(--color-muted) / 35%));
+}
+
 .hk-load-more-core {
   flex: none;
   display: inline-flex;
@@ -39,7 +49,7 @@
   font-size: var(--text-2xs);
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.04em;
-  color: rgb(var(--color-text-tertiary));
+  transition: opacity 200ms ease;
 }
 
 .hk-load-more[data-state="loading"] .hk-load-more-count {
@@ -49,5 +59,4 @@
 .hk-load-more-end {
   font-size: var(--text-2xs);
   letter-spacing: 0.08em;
-  color: rgb(var(--color-text-tertiary));
 }

package/src/components/HkLocalizedInput.scss

@@ -20,7 +20,6 @@
  * keep focus inside the input. */
 .hk-localized-input-chip {
   padding: 0;
-  border-radius: var(--radius-sm, 999px);
   background: transparent;
   color: rgb(var(--color-muted));
 
@@ -54,26 +53,27 @@
  * The base HkInput box flows affixes as a flex ROW (single-line input
  * absolutely positioned over the box) — but a textarea-type element is
  * in-flow, so the language chip would land BELOW the field. Pin it to
- * the field's top-right corner instead and keep every text line clear
- * of the chip column via the measured affix width. */
+ * the field's top inline-end corner instead and keep every text line
+ * clear of the chip column via the measured affix width. Logical
+ * properties throughout: the pinned chips and the textarea clearance
+ * mirror with the writing direction, matching the base field's
+ * logical padding-inline / margin-inline-start affix layout. */
 .hk-localized-input[data-multiline] {
   .hk-input-affix.hk-input-suffix {
     position: absolute;
-    top: 6px;
-    right: var(--space-8, 8px);
-    margin-inline-start: 0;
+    top: var(--space-6, 6px);
+    inset-inline-end: var(--space-8, 8px);
   }
 
   .hk-input-affix.hk-input-prefix {
     position: absolute;
-    top: 6px;
-    left: var(--space-8, 8px);
-    margin-inline-end: 0;
+    top: var(--space-6, 6px);
+    inset-inline-start: var(--space-8, 8px);
   }
 
   .hk-input-element.hk-input-textarea {
-    padding-right: calc(var(--space-12, 12px) + var(--hk-input-affix-end-w, 0px));
-    padding-left: calc(var(--space-12, 12px) + var(--hk-input-affix-start-w, 0px));
+    padding-inline-end: calc(var(--space-12, 12px) + var(--hk-input-affix-end-w, 0px));
+    padding-inline-start: calc(var(--space-12, 12px) + var(--hk-input-affix-start-w, 0px));
   }
 }
 

package/src/components/HkLogWindow.scss

@@ -29,9 +29,21 @@
   color: rgb(var(--color-muted));
   font-size: var(--text-xs, 0.75rem);
   cursor: pointer;
+  /* Declared here on purpose: these s-log classes intentionally escape
+   * the `button:where(:not([class^="hk-"])…)` element baseline (base.scss),
+   * which currently supplies their transition/focus ring only by accident
+   * of the hk- exclusion — do not lean on it. */
+  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
+    box-shadow 200ms ease, opacity 200ms ease;
 }
 
-.s-log-tab:hover:not([data-active]) {
+.s-log-tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(var(--color-surface)), 0 0 0 4px rgb(var(--color-primary));
+}
+
+.s-log-tab:hover:not([data-active]),
+.s-log-btn:hover:not([data-active]) {
   background: rgb(var(--color-primary) / 12%);
   color: rgb(var(--color-text));
 }
@@ -51,6 +63,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Reset the element-baseline button padding (base.scss button-base
+   * reaches these non-hk buttons): 0.5rem/1rem inside the fixed 1.75rem
+   * border-box collapses the content box and off-centers the icon. */
+  padding: 0;
   width: 1.75rem;
   height: 1.75rem;
   border: 1px solid var(--border-faint, rgb(var(--color-border) / 12%));
@@ -58,11 +74,13 @@
   background: rgb(var(--color-surface));
   color: rgb(var(--color-muted));
   cursor: pointer;
+  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
+    box-shadow 200ms ease, opacity 200ms ease;
 }
 
-.s-log-btn:hover:not([data-active]) {
-  background: rgb(var(--color-primary) / 12%);
-  color: rgb(var(--color-text));
+.s-log-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(var(--color-surface)), 0 0 0 4px rgb(var(--color-primary));
 }
 
 .s-log-btn[data-active] {

package/src/components/HkLogo.scss

@@ -13,6 +13,14 @@ a.hk-logo {
   text-decoration: none;
 }
 
+/* Keyboard parity (HkButton double ring): the anchor variant otherwise
+ * falls back to the rectangular UA outline. The div variant never
+ * matches :focus-visible (not focusable without a tsx tabindex). */
+a.hk-logo:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(var(--color-surface)), 0 0 0 4px rgb(var(--color-primary));
+}
+
 .hk-logo-img {
   display: block;
   border-radius: var(--hi-radius-md, 8px);
@@ -23,14 +31,15 @@ a.hk-logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--hi-color-primary);
+  /* Contract token with hex fallback (house idiom). No radius here: the
+   * only render site is inside .hk-logo, whose matching border-radius +
+   * overflow: hidden already clip this exactly-fitting child. */
+  background: var(--hi-color-primary, #58a6ff);
   color: rgb(var(--color-on-solid-text, 255 255 255));
-  border-radius: var(--hi-radius-md, 8px);
 }
 
 .hk-logo-initial {
   font-weight: 700;
   font-size: 50%;
   line-height: 1;
-  user-select: none;
 }