@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkButton.scss

@@ -133,7 +133,10 @@
   }
 }
 
-.hk-btn-primary:hover:not(:disabled) {
+/* :not(:focus-visible) keeps the keyboard double ring winning while a
+   focused button is under the cursor — this hover rule's (0,3,0)
+   box-shadow would otherwise beat the (0,2,0) :focus-visible ring. */
+.hk-btn-primary:hover:not(:disabled):not(:focus-visible) {
   filter: brightness(1.1);
   box-shadow: var(--shadow-button);
 }
@@ -151,11 +154,16 @@
   backdrop-filter: blur(var(--blur-sm));
 }
 
+/* background stays the base surface — the hover declaration only restated
+   it; hover emphasis comes from the border-color change below. */
 .hk-btn-secondary:hover:not(:disabled) {
-  background: rgb(var(--color-surface));
   border-color: var(--c-primary-strong);
 }
 
+.hk-btn-secondary:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+
 /* ---- Outline ---- */
 
 .hk-btn-outline {
@@ -169,6 +177,10 @@
   border-color: rgb(var(--color-primary));
 }
 
+.hk-btn-outline:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+
 /* ---- Ghost ---- */
 
 .hk-btn-ghost {
@@ -181,6 +193,10 @@
   background: var(--c-primary-light);
 }
 
+.hk-btn-ghost:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+
 /* ---- Danger ---- */
 
 .hk-btn-danger {
@@ -188,11 +204,15 @@
   color: rgb(var(--color-on-solid));
 }
 
-.hk-btn-danger:hover:not(:disabled) {
+.hk-btn-danger:hover:not(:disabled):not(:focus-visible) {
   filter: brightness(1.1);
   box-shadow: var(--shadow-button-danger);
 }
 
+.hk-btn-danger:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+
 /* ---- Block ---- */
 
 .hk-btn-block {
@@ -201,6 +221,9 @@
 
 /* ---- Loading ---- */
 
+/* pointer-events: none is deliberate, not dead: the tsx already forces
+   `disabled` while loading (HkButton.tsx), so this only suppresses the
+   :disabled not-allowed cursor — a busy spinner reads busy, not broken. */
 .hk-btn-loading {
   pointer-events: none;
 }

package/src/components/HkCaptchaWidget.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--space-8, 0.5rem);
-  min-height: 4rem;
+  min-height: var(--space-64, 4rem);
 }
 
 .s-captcha-widget-loading {
@@ -19,9 +19,8 @@
 
 .s-captcha-widget-placeholder {
   justify-content: center;
-  min-height: 4rem;
   padding: var(--space-16, 1rem);
-  border: 1px dashed var(--border-faint, rgb(var(--color-border) / 15%));
+  border: 1px dashed var(--border-faint, rgb(var(--color-border) / 10%));
   border-radius: var(--radius-md, 8px);
   color: rgb(var(--color-muted));
   font-size: var(--text-xs, 0.75rem);

package/src/components/HkCard.scss

@@ -1,8 +1,8 @@
 @use "../tokens";
 
-/* HkCard — canonical surface card. Hover effect mirrors the node card:
-   only box-shadow and border-color animate. No transforms, so the card
-   never displaces its neighbors or triggers layout reflow. */
+/* HkCard — canonical surface card. Hover emphasis is border-color only
+   (the base elevation shadow is already at its resting value). No
+   transforms, so the card never displaces neighbors or reflows layout. */
 .hk-card {
   display: block;
   overflow: hidden;
@@ -15,16 +15,22 @@
 
 .hk-card-hoverable {
   cursor: pointer;
-  transition:
-    box-shadow var(--duration-normal) ease,
-    border-color var(--duration-normal) ease;
+  transition: border-color var(--duration-normal) ease;
 }
 
 .hk-card-hoverable:hover {
-  box-shadow: var(--shadow-elevated);
   border-color: var(--c-primary-intense);
 }
 
+.hk-card-hoverable:active {
+  border-color: rgb(var(--color-primary) / 45%);
+}
+
+.hk-card-hoverable:focus-visible {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 2px;
+}
+
 .hk-card-header {
   padding: var(--space-12) var(--space-16);
   border-bottom: 1px solid var(--border-faint);
@@ -45,5 +51,5 @@
 
 .hk-card-footer {
   padding: var(--space-12) var(--space-16);
-  border-top: 1px solid rgb(var(--color-border) / 10%);
+  border-top: 1px solid var(--border-faint);
 }

package/src/components/HkCheckbox.scss

@@ -5,7 +5,7 @@
 .hk-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: var(--hi-space-8, 0.5rem);
+  gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
 }
@@ -23,7 +23,7 @@
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
-  border-radius: var(--hi-radius-xs, 4px);
+  border-radius: var(--hi-radius-sm, 4px);
   border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
   background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
   transition:
@@ -40,7 +40,6 @@
 .hk-checkbox-box[data-checked] {
   background: var(--hi-color-primary, #ff6b9d);
   border-color: var(--hi-color-primary, #ff6b9d);
-  color: rgb(var(--color-on-solid-text, 255 255 255));
 }
 
 .hk-checkbox-box[data-indeterminate] {
@@ -48,12 +47,6 @@
   border-color: var(--hi-color-primary, #ff6b9d);
 }
 
-.hk-checkbox:hover .hk-checkbox-box[data-checked],
-.hk-checkbox[data-animating] .hk-checkbox-box[data-checked] {
-  background: var(--hi-color-primary, #ff6b9d);
-  border-color: var(--hi-color-primary, #ff6b9d);
-}
-
 /* ---------- input ---------- */
 
 .hk-checkbox-input {
@@ -64,6 +57,15 @@
   pointer-events: none;
 }
 
+/* Keyboard focus: the native input is visually hidden, so draw the house
+   double ring (HkButton/HkTable pattern) on the box via :has();
+   :focus-visible keeps mouse toggles ring-free. */
+.hk-checkbox-box:has(.hk-checkbox-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);
+}
+
 /* ---------- markers ---------- */
 
 .hk-checkbox-icon {

package/src/components/HkColorPicker.scss

@@ -10,7 +10,6 @@
 .hk-color-picker[data-layout="row"] {
   .hk-color-picker-swatch-btn {
     flex-direction: row;
-    align-items: center;
     gap: var(--space-8);
     width: 100%;
   }
@@ -26,14 +25,10 @@
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: left;
+    text-align: start;
   }
 }
 
-.hk-color-picker-trigger {
-  outline: none;
-}
-
 .hk-color-picker-swatch-btn {
   display: inline-flex;
   flex-direction: column;
@@ -47,6 +42,14 @@
   outline: none;
 }
 
+/* The trigger button removes the outline; restore a keyboard indicator
+   with the house double ring (HkButton pattern). */
+.hk-color-picker-swatch-btn:focus-visible {
+  box-shadow:
+    0 0 0 2px rgb(var(--color-surface)),
+    0 0 0 4px rgb(var(--color-primary));
+}
+
 .hk-color-picker-swatch {
   width: 24px;
   height: 24px;
@@ -134,7 +137,6 @@
   min-width: 60px;
   height: 10px;
   border-radius: var(--radius-full);
-  display: block;
   overflow: hidden;
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
   // Explicit on the hit targets too (not only the container): touch-action
@@ -173,12 +175,24 @@
   &:active { cursor: grabbing; }
 }
 
+/* Thumb hover scale is a transform micro-interaction; drop the scale and
+   the transform transition for reduced-motion users (house pattern). */
+@media (prefers-reduced-motion: reduce) {
+  .hk-color-picker-slider-thumb {
+    transition: none;
+  }
+
+  .hk-color-picker-slider-thumb:hover {
+    transform: translate(-50%, -50%);
+  }
+}
+
 .hk-color-picker-slider-value {
   font-size: var(--text-2xs);
   font-weight: 500;
   color: rgb(var(--color-muted));
   width: 26px;
-  text-align: right;
+  text-align: end;
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
 }

package/src/components/HkContextRing.scss

@@ -10,6 +10,11 @@
   cursor: pointer;
   border-radius: var(--radius-full, 999px);
   -webkit-tap-highlight-color: transparent;
+  transition: background-color 200ms ease;
+
+  &:hover {
+    background: rgb(var(--color-text) / 6%);
+  }
 
   &:focus-visible {
     outline: 2px solid rgb(var(--color-primary));
@@ -79,7 +84,7 @@
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 2px;
+  gap: var(--space-2, 0.125rem);
 }
 
 .hk-ctx-legend-row {
@@ -93,9 +98,8 @@
 .hk-ctx-legend-swatch {
   width: 8px;
   height: 8px;
-  border-radius: 2px;
+  border-radius: var(--radius-xs, 2px);
   align-self: center;
-  flex-shrink: 0;
 }
 
 .hk-ctx-legend-label {
@@ -112,7 +116,7 @@
 .hk-ctx-legend-pct {
   color: rgb(var(--color-muted));
   font-variant-numeric: tabular-nums;
-  text-align: right;
+  text-align: end;
   min-width: 3ch;
 }
 

package/src/components/HkCookieConsent.scss

@@ -1,8 +1,8 @@
 .s-cookie-consent {
   display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 0.625rem;
+  gap: var(--space-4, 0.25rem);
+  font-size: var(--text-2xs, 0.625rem);
   color: rgb(var(--color-muted));
 }
 
@@ -11,8 +11,17 @@
   border: none;
   color: rgb(var(--color-primary));
   cursor: pointer;
-  font-size: 0.625rem;
+  font-size: var(--text-2xs, 0.625rem);
   font-weight: 600;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: 2px;
+  }
 }
 
 .s-cookie-consent-icon {

package/src/components/HkDatePicker.scss

@@ -13,33 +13,40 @@
   opacity: 0.5;
 }
 
-/* ── Trigger ─────────────────────────────────────────────────── */
-
-.hk-dp-trigger {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--hi-space-6, 6px);
+/* ── Trigger / native input ──────────────────────────────────── */
+/* The custom trigger and the native <input type="date"> carry
+ * byte-identical field chrome, so those declarations live in one group. */
+.hk-dp-trigger,
+.hk-dp-native {
   width: 100%;
   min-height: 2.5rem;
-  padding: var(--hi-space-8, 8px) var(--hi-space-12, 12px);
+  padding: var(--space-8, 8px) var(--space-12, 12px);
   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: var(--hi-radius-sm, 4px);
   color: rgb(var(--color-text));
   font-family: inherit;
-  font-size: var(--hi-text-sm, 0.875rem);
+  font-size: var(--text-sm, 0.875rem);
   line-height: 1.5;
-  cursor: pointer;
-  user-select: none;
   transition:
     background-color var(--hi-duration-fast, 0.15s) ease,
     border-color var(--hi-duration-fast, 0.15s) ease,
     box-shadow var(--hi-duration-fast, 0.15s) ease;
 }
 
+.hk-dp-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 6px);
+  cursor: pointer;
+  user-select: none;
+}
+
 .hk-dp:not(.is-disabled) .hk-dp-trigger:hover,
-.hk-dp-trigger:focus-visible {
+.hk-dp:not(.is-disabled) .hk-dp-native:hover,
+.hk-dp-trigger:focus-visible,
+.hk-dp-native:focus-visible {
   border-color: rgb(var(--color-focused-border));
 }
 
@@ -53,8 +60,9 @@
   }
 }
 
-/* Focus ring + open state live on the trigger itself. */
-.hk-dp-trigger:focus-visible {
+/* Focus ring + open state live on the field itself. */
+.hk-dp-trigger:focus-visible,
+.hk-dp-native:focus-visible {
   outline: none;
   box-shadow: var(--shadow-focus);
   background: rgb(var(--color-surface));
@@ -67,8 +75,8 @@
 
 .hk-dp-trigger-sm {
   min-height: 2rem;
-  padding: var(--hi-space-4, 4px) var(--hi-space-10, 10px);
-  font-size: var(--hi-text-xs, 0.75rem);
+  padding: var(--space-4, 4px) var(--space-10, 10px);
+  font-size: var(--text-xs, 0.75rem);
 }
 
 .hk-dp-value {
@@ -102,7 +110,6 @@
 
   .hk-dp-trigger:hover &,
   .hk-dp-trigger:focus &,
-  .hk-dp-trigger:focus-visible &,
   .hk-dp-clear:focus-visible {
     opacity: 1;
   }
@@ -124,13 +131,13 @@
 /* ── Calendar panel ──────────────────────────────────────────── */
 
 .hk-dp-popover.hk-popover-panel {
-  padding: var(--hi-space-10, 10px) var(--hi-space-12, 12px) var(--hi-space-8, 8px);
+  padding: var(--space-10, 10px) var(--space-12, 12px) var(--space-8, 8px);
 }
 
 .hk-dp-panel {
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-8, 8px);
+  gap: var(--space-8, 8px);
   min-width: 17.5rem;
   user-select: none;
   color: var(--hi-color-text-primary);
@@ -152,10 +159,7 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  gap: var(--hi-space-4, 4px);
-}
-
-.hk-dp-header {
+  gap: var(--space-4, 4px);
   /* Fixed height keeps the header row — and therefore the shared stage
    * height — identical in every view and locale (enlarged on touch). */
   height: var(--hk-picker-header);
@@ -164,7 +168,7 @@
 .hk-dp-header-side {
   display: flex;
   align-items: center;
-  gap: var(--hi-space-2, 2px);
+  gap: var(--space-2, 2px);
   min-width: 0;
 }
 
@@ -192,6 +196,10 @@
     color: var(--hi-color-text-primary);
   }
 
+  &:active:not(:disabled) {
+    filter: brightness(0.95);
+  }
+
   &:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent);
     outline-offset: 1px;
@@ -204,22 +212,21 @@
 }
 
 .hk-dp-title {
-  font-size: var(--hi-text-sm, 0.875rem);
+  font-size: var(--text-sm, 0.875rem);
   font-weight: 600;
   color: var(--hi-color-text-primary);
   font-variant-numeric: tabular-nums;
-  text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--hi-space-4, 4px);
+  gap: var(--space-4, 4px);
 }
 
 .hk-dp-title-btn {
   appearance: none;
   background: transparent;
   border: 0;
-  padding: var(--hi-space-2, 2px) var(--hi-space-4, 4px);
+  padding: var(--space-2, 2px) var(--space-4, 4px);
   font: inherit;
   font-weight: 600;
   color: inherit;
@@ -233,6 +240,10 @@
     color: var(--hi-color-primary);
   }
 
+  &:active:not(:disabled) {
+    filter: brightness(0.95);
+  }
+
   &:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent);
     outline-offset: 1px;
@@ -243,7 +254,7 @@
 .hk-dp-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
+  gap: var(--space-2, 2px);
 }
 
 /* Month/year pick grids sit in the same fixed stage as the day grid and
@@ -254,7 +265,7 @@
 
 .hk-dp-wd {
   text-align: center;
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   color: var(--hi-color-muted);
   height: var(--hk-picker-wd);
@@ -278,7 +289,7 @@
   justify-content: center;
   color: color-mix(in srgb, var(--hi-color-text-secondary) 70%, transparent);
   cursor: pointer;
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
   transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
 
@@ -287,6 +298,10 @@
     color: var(--hi-color-text-primary);
   }
 
+  &:active:not(:disabled) {
+    filter: brightness(0.95);
+  }
+
   &:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent);
     outline-offset: -1px;
@@ -299,10 +314,6 @@
   &.is-disabled {
     cursor: default;
     opacity: 0.25;
-
-    &:hover {
-      background: transparent;
-    }
   }
 
   &.is-today:not(.is-selected) {
@@ -315,10 +326,6 @@
     background: var(--hi-color-primary);
     color: rgb(var(--color-on-solid-text, 255 255 255));
     font-weight: 600;
-
-    &:hover {
-      background: var(--hi-color-primary);
-    }
   }
 }
 
@@ -331,41 +338,18 @@
 .hk-dp-footer {
   display: flex;
   justify-content: center;
-  padding-top: var(--hi-space-6, 6px);
+  padding-top: var(--space-6, 6px);
   border-top: 1px solid color-mix(in srgb, var(--hi-color-border) 10%, transparent);
 }
 
 /* ── Native mobile input ─────────────────────────────────────── */
+/* Unique native-input bits only; the shared field chrome comes from the
+ * .hk-dp-trigger / .hk-dp-native group at the top of the file. */
 
 .hk-dp-native {
   display: block;
-  width: 100%;
-  min-height: 2.5rem;
   box-sizing: border-box;
-  padding: var(--hi-space-8, 8px) var(--hi-space-12, 12px);
-  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: var(--hi-radius-sm, 4px);
-  color: rgb(var(--color-text));
-  font-family: inherit;
-  font-size: var(--hi-text-sm, 0.875rem);
-  line-height: 1.5;
   font-variant-numeric: tabular-nums;
-  transition:
-    background-color var(--hi-duration-fast, 0.15s) ease,
-    border-color var(--hi-duration-fast, 0.15s) ease,
-    box-shadow var(--hi-duration-fast, 0.15s) ease;
-}
-
-.hk-dp:not(.is-disabled) .hk-dp-native:hover,
-.hk-dp-native:focus-visible {
-  border-color: rgb(var(--color-focused-border));
-}
-
-.hk-dp-native:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-  background: rgb(var(--color-surface));
 }
 
 .hk-dp.is-disabled .hk-dp-native {