@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkNumberInput.scss

@@ -1,5 +1,5 @@
 /* Field caption, mirroring .hk-input-label in HkInput.scss (the number
-   input carries its own copy so it does not depend on HInput's stylesheet
+   input carries its own copy so it does not depend on HkInput's stylesheet
    being loaded too). */
 .hk-input-label {
   display: block;
@@ -25,7 +25,7 @@
   align-items: center;
   background: var(--hi-color-surface);
   border: 1px solid var(--hi-color-border);
-  border-radius: var(--hi-radius-md, 6px);
+  border-radius: var(--hi-radius-md, 8px);
   overflow: hidden;
   transition:
     background-color var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
@@ -53,9 +53,10 @@
   outline: none;
   color: var(--hi-color-text-primary);
   font-family: inherit;
-  font-size: 0.875rem;
+  /* Font size / horizontal padding come from the per-size blocks below —
+     the size class is always on the wrapper (HkNumberInput.tsx), so the
+     md block is the single source for those metrics. */
   line-height: 1.5;
-  padding: 0 0.75rem;
 
   &::placeholder {
     color: var(--hi-color-muted);
@@ -83,11 +84,11 @@
 }
 
 .hk-number-input-prefix {
-  padding-left: 0.75rem;
+  padding-inline-start: var(--space-12, 0.75rem);
 }
 
 .hk-number-input-suffix {
-  padding-right: 0.5rem;
+  padding-inline-end: var(--space-8, 0.5rem);
 }
 
 .hk-number-input-steppers {
@@ -98,14 +99,17 @@
      against the real box height and the divider spans it fully —
      content-sized centering left a floating ~28px stack in a 36px box. */
   align-self: stretch;
-  border-left: 1px solid var(--hi-color-border);
+  /* Inline-start so the divider faces the field/suffix side in both
+     LTR and RTL (the flex row flips under direction: rtl). */
+  border-inline-start: 1px solid var(--hi-color-border);
 }
 
 .hk-number-input-step {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
+  /* Width comes from the per-size blocks below (the size class is always
+     on the wrapper); height stays here as the size-independent half. */
   height: 50%;
   padding: 0;
   background: transparent;
@@ -135,18 +139,18 @@
 /* --- Size variants --- */
 
 .hk-number-input-sm .hk-number-input-field {
-  font-size: 0.75rem;
-  padding: 0 0.5rem;
-  height: 1.75rem;
+  font-size: var(--text-xs, 0.75rem);
+  padding: 0 var(--space-8, 0.5rem);
+  height: var(--space-28, 1.75rem);
 }
 
 .hk-number-input-sm .hk-number-input-prefix,
 .hk-number-input-sm .hk-number-input-suffix {
-  font-size: 0.75rem;
+  font-size: var(--text-xs, 0.75rem);
 }
 
 .hk-number-input-sm .hk-number-input-step {
-  width: 1.25rem;
+  width: var(--space-20, 1.25rem);
 }
 
 .hk-number-input-sm .hk-number-input-step svg {
@@ -155,33 +159,33 @@
 }
 
 .hk-number-input-md .hk-number-input-field {
-  font-size: 0.875rem;
-  padding: 0 0.75rem;
+  font-size: var(--text-base, 0.875rem);
+  padding: 0 var(--space-12, 0.75rem);
   height: 2.25rem;
 }
 
 .hk-number-input-md .hk-number-input-prefix,
 .hk-number-input-md .hk-number-input-suffix {
-  font-size: 0.875rem;
+  font-size: var(--text-base, 0.875rem);
 }
 
 .hk-number-input-md .hk-number-input-step {
-  width: 1.5rem;
+  width: var(--space-24, 1.5rem);
 }
 
 .hk-number-input-lg .hk-number-input-field {
-  font-size: 1rem;
-  padding: 0 1rem;
+  font-size: var(--text-md, 1rem);
+  padding: 0 var(--space-16, 1rem);
   height: 2.75rem;
 }
 
 .hk-number-input-lg .hk-number-input-prefix,
 .hk-number-input-lg .hk-number-input-suffix {
-  font-size: 1rem;
+  font-size: var(--text-md, 1rem);
 }
 
 .hk-number-input-lg .hk-number-input-step {
-  width: 1.75rem;
+  width: var(--space-28, 1.75rem);
 }
 
 .hk-number-input-lg .hk-number-input-step svg {

package/src/components/HkPageHeader.scss

@@ -33,8 +33,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--space-28, 1.75rem);
+  height: var(--space-28, 1.75rem);
   flex-shrink: 0;
   border-radius: var(--radius-sm, 6px);
   background: rgb(var(--color-primary) / 10%);
@@ -59,8 +59,9 @@
   align-items: center;
   gap: var(--space-8, 0.5rem);
   flex-shrink: 0;
-  /* Align the tool row with the title baseline; wrapped rows (narrow
-     screens) fall back to stretch alignment via flex-wrap. */
+  /* Align the tool row with the title baseline; align-items: flex-end
+     applies per wrapped line too, and this 2px nudge optically matches
+     the title's descender space. */
   padding-block-end: var(--space-2, 0.125rem);
 }
 
@@ -73,7 +74,7 @@
   }
 
   .hk-page-header-icon {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: var(--space-24, 1.5rem);
+    height: var(--space-24, 1.5rem);
   }
 }

package/src/components/HkPasswordInput.scss

@@ -16,7 +16,7 @@
 }
 
 .hk-pwd-required {
-  margin-left: 0.125rem;
+  margin-inline-start: var(--space-2);
   color: var(--hi-color-danger, #f85149);
 }
 
@@ -25,7 +25,7 @@
   display: flex;
   align-items: center;
   min-height: 2.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: var(--space-8) var(--space-12);
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
   border-radius: 6px;
@@ -51,7 +51,7 @@
 
 .hk-pwd-box[data-error][data-focused] {
   border-color: var(--hi-color-danger, #f85149);
-  box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.15);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-danger, #f85149) 15%, transparent);
 }
 
 .hk-pwd-box[data-disabled] {
@@ -101,12 +101,15 @@
   cursor: pointer;
 }
 
-.hk-pwd-box:focus-within .hk-pwd-lock,
-.hk-pwd-box[data-focused] .hk-pwd-lock {
-  color: var(--hi-color-primary, #58a6ff);
+/* Hover feedback for the hold-to-reveal control, mirroring the blur
+ * hint's hover; suppressed while revealing (press restores full
+ * primary) and while disabled (reveal is unreachable). */
+.hk-pwd-box:not([data-disabled]) .hk-pwd-lock-filled:hover:not([data-revealing]) {
+  color: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 75%, transparent);
 }
 
-.hk-pwd-lock[data-revealing] {
+.hk-pwd-box:focus-within .hk-pwd-lock,
+.hk-pwd-box[data-focused] .hk-pwd-lock {
   color: var(--hi-color-primary, #58a6ff);
 }
 
@@ -128,7 +131,7 @@
   justify-content: center;
   z-index: 1;
   user-select: none;
-  font-size: 0.875rem;
+  font-size: var(--text-base);
   color: var(--hi-color-primary, rgba(88, 166, 255, 0.7));
   animation: hk-pwd-breathe 3s ease-in-out infinite;
   /* Default overflow strategy: hard-cut with an ellipsis (the marquee
@@ -150,6 +153,17 @@
   50% { opacity: 0.7; }
 }
 
+/* Reduced motion: stop the infinite breathe pulse. The global switch
+ * (`html[data-css-animations="0"]`) pauses it too when the host wired
+ * it; the media block covers hosts that never did. */
+@media (prefers-reduced-motion: reduce) {
+  .hk-pwd-placeholder,
+  .hk-pwd-blur-hint,
+  .hk-pwd-select-hint {
+    animation: none;
+  }
+}
+
 .hk-pwd-blur-hint {
   position: absolute;
   inset: 0;
@@ -158,7 +172,7 @@
   justify-content: center;
   z-index: 1;
   user-select: none;
-  font-size: 0.875rem;
+  font-size: var(--text-base);
   font-style: italic;
   color: var(--hi-color-text-secondary, #666);
   cursor: pointer;
@@ -182,7 +196,7 @@
   justify-content: center;
   z-index: 1;
   user-select: none;
-  font-size: 0.875rem;
+  font-size: var(--text-base);
   font-style: italic;
   color: var(--hi-color-text-secondary, #666);
   pointer-events: none;
@@ -199,7 +213,7 @@
   pointer-events: none;
   user-select: none;
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   letter-spacing: 0.04em;
   color: var(--hi-color-text-primary, #333);
 }
@@ -220,7 +234,7 @@
 
 .hk-pwd-strength {
   position: absolute;
-  right: 0.75rem;
+  inset-inline-end: var(--space-12);
   top: 50%;
   transform: translateY(-50%);
   width: 0.55rem;
@@ -235,29 +249,25 @@
 
 .hk-pwd-strength[data-level="weak"] {
   background: var(--hi-color-danger, #f85149);
-  box-shadow: 0 0 6px rgba(248, 81, 73, 0.6);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-danger, #f85149) 60%, transparent);
 }
 
 .hk-pwd-strength[data-level="fair"] {
   background: var(--hi-color-warning, #d29922);
-  box-shadow: 0 0 6px rgba(210, 153, 34, 0.6);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-warning, #d29922) 60%, transparent);
 }
 
 .hk-pwd-strength[data-level="strong"] {
   background: var(--hi-color-success, #3fb950);
-  box-shadow: 0 0 6px rgba(63, 185, 80, 0.6);
-}
-
-.hk-pwd-hints {
-  min-height: 0;
+  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-success, #3fb950) 60%, transparent);
 }
 
 .hk-pwd-hint {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
+  gap: var(--space-4);
+  margin-top: var(--space-4);
+  font-size: var(--text-xs);
 }
 
 .hk-pwd-hint[data-variant="caps"] {
@@ -268,25 +278,15 @@
   color: var(--hi-color-danger, #f85149);
 }
 
-.hk-pwd-hint-enter-active,
-.hk-pwd-hint-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.hk-pwd-hint-enter-from,
-.hk-pwd-hint-leave-to {
-  opacity: 0;
-}
-
 .hk-pwd-error {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
+  margin-top: var(--space-4);
+  font-size: var(--text-xs);
   color: var(--hi-color-danger, #f85149);
 }
 
 .hk-pwd-hint-text {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
+  margin-top: var(--space-4);
+  font-size: var(--text-xs);
   color: var(--hi-color-text-secondary, #666);
 }
 

package/src/components/HkPhaseTransition.scss

@@ -20,6 +20,22 @@
   transform: translateY(-8px);
 }
 
+/* Reduced motion: keep the opacity cross-fade, drop the translateY
+ * slide. The global animation switch (`html[data-css-animations="0"]`)
+ * disables these transitions too when the host wired it; the media
+ * block covers hosts that never did. */
+@media (prefers-reduced-motion: reduce) {
+  .hk-phase-enter-active,
+  .hk-phase-leave-active {
+    transition: opacity var(--hi-duration-fast, 0.15s) ease;
+  }
+
+  .hk-phase-enter-from,
+  .hk-phase-leave-to {
+    transform: none;
+  }
+}
+
 .hk-phase-content {
   width: 100%;
 }

package/src/components/HkPhoneInput.scss

@@ -9,13 +9,11 @@
  * handling live there). A button so it is focusable and AT-reachable;
  * mousedown is suppressed in the shared picker so clicking it never
  * steals focus from the number field. */
-.hk-phone-chip {
-  max-width: 11rem;
-}
-
+/* Width cap comes from the shared .hk-affix-chip base (max-width: 11rem);
+ * this class stays a tsx/test hook for hosts to layer overrides on. */
 .hk-phone-chip-dial {
   font-weight: 600;
-  font-size: var(--text-sm, 14px);
+  font-size: var(--text-sm, 0.8125rem);
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
@@ -24,3 +22,10 @@
   flex: none;
   color: rgb(var(--color-muted));
 }
+
+/* Open disclosure state (aria-expanded sits on the chip button): flip the
+ * caret like the shared default chip does (HkAffixPicker.scss). Instant
+ * swap — no transition, so no reduced-motion entry is needed. */
+.hk-phone-chip[aria-expanded="true"] .hk-phone-chip-caret {
+  transform: rotate(180deg);
+}

package/src/components/HkPickerPane.scss

@@ -44,7 +44,8 @@
 .hk-dp-stage,
 .hk-dtp-stage {
   position: relative;
-  height: calc(var(--hk-picker-header) + var(--hk-picker-wd) + 6 * var(--hk-picker-cell) + 10px);
+  height: calc(var(--hk-picker-header) + var(--hk-picker-wd) + 6 * var(--hk-picker-cell) +
+    5 * var(--space-2, 2px));
 }
 
 .hk-dp-pane,
@@ -72,22 +73,48 @@
 
 .hk-dp-stage[data-dir="fwd"] > .hk-picker-pane-enter-active,
 .hk-dtp-stage[data-dir="fwd"] > .hk-picker-pane-enter-active {
-  animation: hk-picker-pane-fwd-in var(--hi-duration-normal, 0.18s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-fwd-in var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-dp-stage[data-dir="fwd"] > .hk-picker-pane-leave-active,
 .hk-dtp-stage[data-dir="fwd"] > .hk-picker-pane-leave-active {
-  animation: hk-picker-pane-fwd-out var(--hi-duration-normal, 0.18s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-fwd-out var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-dp-stage[data-dir="back"] > .hk-picker-pane-enter-active,
 .hk-dtp-stage[data-dir="back"] > .hk-picker-pane-enter-active {
-  animation: hk-picker-pane-back-in var(--hi-duration-normal, 0.18s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-back-in var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-dp-stage[data-dir="back"] > .hk-picker-pane-leave-active,
 .hk-dtp-stage[data-dir="back"] > .hk-picker-pane-leave-active {
-  animation: hk-picker-pane-back-out var(--hi-duration-normal, 0.18s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-back-out var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* RTL: reading direction flips, so a forward drill flows left→right —
+ * swap the fwd/back keyframes (HkListTransition/HkBlockingToast
+ * [dir="rtl"] form; same registered keyframes, mirrored direction).
+ * Only the name is overridden: duration and easing carry over from the
+ * rules above, and the reduced-motion / data-css-animations guards below
+ * still win with !important. */
+[dir="rtl"] .hk-dp-stage[data-dir="fwd"] > .hk-picker-pane-enter-active,
+[dir="rtl"] .hk-dtp-stage[data-dir="fwd"] > .hk-picker-pane-enter-active {
+  animation-name: hk-picker-pane-back-in;
+}
+
+[dir="rtl"] .hk-dp-stage[data-dir="fwd"] > .hk-picker-pane-leave-active,
+[dir="rtl"] .hk-dtp-stage[data-dir="fwd"] > .hk-picker-pane-leave-active {
+  animation-name: hk-picker-pane-back-out;
+}
+
+[dir="rtl"] .hk-dp-stage[data-dir="back"] > .hk-picker-pane-enter-active,
+[dir="rtl"] .hk-dtp-stage[data-dir="back"] > .hk-picker-pane-enter-active {
+  animation-name: hk-picker-pane-fwd-in;
+}
+
+[dir="rtl"] .hk-dp-stage[data-dir="back"] > .hk-picker-pane-leave-active,
+[dir="rtl"] .hk-dtp-stage[data-dir="back"] > .hk-picker-pane-leave-active {
+  animation-name: hk-picker-pane-fwd-out;
 }
 
 /* The leaving pane overlays the fixed stage so the entering pane can take

package/src/components/HkPlaceholderMarquee.scss

@@ -58,7 +58,11 @@
   }
 
   &__copy {
-    padding-right: 24px;
+    // Trailing cushion between copies. Kept as a px literal (not a token)
+    // on purpose: it must equal COPY_SPACING = 24 in the tsx overflow math
+    // at every root font size. Logical axis so the cushion trails the
+    // reading direction under RTL hosts.
+    padding-inline-end: 24px;
   }
 
   // Hidden probe mode (text fits): visibility keeps the element laid out —
@@ -74,8 +78,9 @@
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    // white-space stays local (ellipsis-trio idiom); text-align: center
+    // was dropped — the root already centers and hosts may re-align it.
     white-space: nowrap;
-    text-align: center;
   }
 }
 

package/src/components/HkPlaceholderMarquee.test.ts

@@ -84,6 +84,33 @@ afterEach(() => {
   }
 });
 
+describe("HkPlaceholderMarquee scale-aware measurement", () => {
+  it("converts the copy's drawn width into the host's own units before looping", async () => {
+    // The copy is measured where it is DRAWN while the host it is compared
+    // with (`clientWidth`) is laid out. Inside a scaled or zoomed root the two
+    // differ by the factor the space is drawn at: the raw rect would make the
+    // loop overshoot by (k-1) of a copy per cycle and report overflow for
+    // copies that fit k times over.
+    const { container } = mountMarquee({ text: "a very long placeholder that overflows".repeat(4) });
+    const host = container.querySelector(".hk-placeholder-marquee") as HTMLElement;
+    const copy = container.querySelector(".hk-placeholder-marquee__copy") as HTMLElement;
+    Object.defineProperty(host, "clientWidth", { configurable: true, get: () => 200 });
+    // The host is drawn twice the size it is laid out at: 800 drawn px are
+    // 400 of its own, while the copy really advances 500 of them.
+    Object.defineProperty(host, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ width: 400, left: 0, top: 0, right: 400, bottom: 40, height: 40, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(host, "offsetWidth", { configurable: true, get: () => 200 });
+    vi.spyOn(copy, "getBoundingClientRect").mockReturnValue({ width: 1000 } as DOMRect);
+    marqueeExposed(container)?.measure?.();
+    await nextTick();
+
+    const strip = container.querySelector(".hk-placeholder-marquee__strip") as HTMLElement;
+    expect(strip.style.getPropertyValue("--hk-marquee-shift"), "1000 drawn = 500 of the host's own").toBe("-500px");
+  });
+});
+
 describe("HkPlaceholderMarquee", () => {
   it("stays a hidden single-copy probe while the text fits", () => {
     const { container } = mountMarquee({ text: "用户名" });

package/src/components/HkPlaceholderMarquee.tsx

@@ -1,4 +1,5 @@
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, type PropType } from "vue";
+import { drawnScale } from "../composables/layoutGeometry";
 
 /**
  * Overflow strategy for a placeholder that does not fit its input.
@@ -64,12 +65,19 @@ export const HkPlaceholderMarquee = defineComponent({
       // copy spacing as trailing padding). Reading the first copy element —
       // instead of stripWidth / 3 — stays correct in the fitting case,
       // where the strip holds a single copy, and through overflow flips,
-      // where the copy count changes under the same strip. The fractional
-      // bounding-rect width keeps the CSS loop shift bit-exact with the
-      // laid-out advance — an integer-rounded width would show a ≤0.5px
-      // seam at every wrap (the copy rides the animated strip, so the
-      // width itself is never affected by the strip's transform).
-      const copyWidth = copy.getBoundingClientRect().width;
+      // where the copy count changes under the same strip. The width is read
+      // where the copy is DRAWN and converted into the host's own units,
+      // because that is the space the CSS loop shift and `clientWidth` live
+      // in: inside a scaled or zoomed root the raw rect is k times the
+      // advance, so the loop would overshoot by (k-1) per cycle and the
+      // overflow test would fire on copies that fit k times over. The
+      // conversion keeps the fractional width that makes the shift
+      // bit-exact — an integer-rounded width would show a ≤0.5px seam at
+      // every wrap (the copy rides the animated strip, so the width itself
+      // is never affected by the strip's transform).
+      const space = drawnScale(host);
+      const factor = space.x > 0 ? space.x : 1;
+      const copyWidth = copy.getBoundingClientRect().width / factor;
       loopWidth.value = copyWidth;
       overflowing.value = copyWidth - COPY_SPACING > host.clientWidth;
       emit("overflowChange", overflowing.value);

package/src/components/HkPopover.scss

@@ -68,7 +68,7 @@
   border: 1px solid rgb(var(--color-border) / 20%);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-dropdown);
-  padding: var(--space-4, 12px);
+  padding: var(--space-4, 0.25rem);
 }
 
 /* Locale picker menu items — unified menu-item spec (./_menu-item.scss). */
@@ -76,10 +76,6 @@
   @include mi.item;
 }
 
-.hk-popup-menu-item[data-active]:hover {
-  background: var(--c-primary-dim, rgb(var(--color-primary) / 10%));
-}
-
 .hk-locale-submenu {
   min-width: 140px;
   padding: var(--space-6);
@@ -125,6 +121,9 @@
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
+  // The panel is a programmatic focus surface (tabindex="-1", focused on
+  // sheet open) — suppress the UA focus ring like .hk-modal-content.
+  outline: none;
   max-height: min(
     72vh,
     calc(
@@ -203,8 +202,11 @@
   display: flex;
   align-items: center;
   gap: var(--space-8, 0.5rem);
-  padding: 0 var(--space-8, 0.5rem) var(--space-8, 0.5rem)
-    var(--hk-sheet-title-inset, var(--space-12, 0.75rem));
+  // Logical longhand (was physical `0 x y title-inset`): the title inset is
+  // the inline START edge so RTL mirrors it with the mirrored title/close.
+  padding-block: 0 var(--space-8, 0.5rem);
+  padding-inline: var(--hk-sheet-title-inset, var(--space-12, 0.75rem))
+    var(--space-8, 0.5rem);
 }
 
 .hk-popover-sheet-title {
@@ -220,7 +222,7 @@
   font-size: var(--text-base, 0.875rem);
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: rgb(var(--color-muted, 140 140 140));
+  color: rgb(var(--color-muted, 108 108 108));
   user-select: none;
   -webkit-user-select: none;
 }
@@ -228,8 +230,9 @@
 .hk-popover-sheet-close {
   // Legacy placement hook — the chrome lives on the shared .hk-icon-button
   // / .hk-window-close rules (window-close.scss) since the unified-close
-  // wave. Only the right-edge pinning stays here.
-  margin-left: auto;
+  // wave. Only the trailing-edge pinning stays here (logical, so the close
+  // mirrors to the left in RTL like HkInput/HkTagInput's auto inline start).
+  margin-inline-start: auto;
 }
 
 .hk-popover-sheet-enter-active {
@@ -257,6 +260,11 @@
 @include sf.scrim-fade("hk-popover-scrim");
 
 @media (prefers-reduced-motion: reduce) {
+  // Pop transitions included: the anchored panel's translateY+scale pop is
+  // the same non-trivial motion the sheet slide already silences here
+  // (house pattern: HkExpansionPanel.scss / HkAffixPicker.scss guards).
+  .hk-popover-enter-active,
+  .hk-popover-leave-active,
   .hk-popover-sheet-enter-active,
   .hk-popover-sheet-leave-active {
     transition: none;