@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkDateTimePicker.scss

@@ -7,7 +7,7 @@
 .hk-dtp {
   display: flex;
   flex-direction: column;
-  gap: var(--hi-space-8, 8px);
+  gap: var(--space-8, 8px);
   user-select: none;
   /* Fill the host (inline sheets/dialogs) instead of collapsing to the
    * grid's min-content width — a bottom-sheet calendar should use the
@@ -20,10 +20,7 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  gap: var(--hi-space-8, 8px);
-}
-
-.hk-dtp-header {
+  gap: var(--space-8, 8px);
   /* 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);
@@ -32,7 +29,7 @@
 .hk-dtp-header-side {
   display: flex;
   align-items: center;
-  gap: var(--hi-space-2, 2px);
+  gap: var(--space-2, 2px);
   min-width: 0;
 }
 
@@ -41,7 +38,7 @@
 }
 
 .hk-dtp-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;
@@ -49,14 +46,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--hi-space-4, 4px);
+  gap: var(--space-4, 4px);
 }
 
 .hk-dtp-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;
@@ -106,12 +103,12 @@
 .hk-dtp-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
+  gap: var(--space-2, 2px);
 }
 
 .hk-dtp-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);
@@ -135,7 +132,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;
 
@@ -187,7 +184,7 @@
 
 .hk-dtp-cell[data-variant="pick"] {
   height: var(--hk-picker-pick);
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   font-weight: 500;
 }
 
@@ -211,7 +208,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--hi-space-10, 10px);
+  gap: var(--space-10, 10px);
   /* Spacing comes from the .hk-dtp gap (the row sits under the fixed
    * stage in every view); only the separator border remains. */
   border-top: 1px solid color-mix(in srgb, var(--hi-color-border) 10%, transparent);
@@ -242,10 +239,15 @@
     color: var(--hi-color-text-primary);
     background: var(--hi-color-surface);
   }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent);
+    outline-offset: 1px;
+  }
 }
 
 .hk-dtp-step-val {
-  font-size: var(--hi-text-base, 1rem);
+  font-size: var(--text-base, 0.875rem);
   font-variant-numeric: tabular-nums;
   min-width: 1.75rem;
   text-align: center;
@@ -254,29 +256,33 @@
 }
 
 .hk-dtp-time-sep {
-  font-size: var(--hi-text-base, 1rem);
+  font-size: var(--text-base, 0.875rem);
   color: var(--hi-color-muted);
-  padding-top: var(--hi-space-10, 10px);
+  padding-top: var(--space-10, 10px);
 }
 
 .hk-dtp-today {
-  margin-left: var(--hi-space-4, 4px);
+  margin-inline-start: var(--space-4, 4px);
   appearance: none;
   background: transparent;
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
   border-radius: var(--hi-radius-sm, 4px);
-  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);
   font-weight: 600;
   color: var(--hi-color-muted);
   cursor: pointer;
-  align-self: center;
   transition: color var(--hi-duration-fast, 0.15s) ease, border-color var(--hi-duration-fast, 0.15s) ease;
 
   &:hover {
     color: var(--hi-color-text-primary);
     border-color: color-mix(in srgb, var(--hi-color-primary) 50%, transparent);
   }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent);
+    outline-offset: 1px;
+  }
 }
 
 /* ── Popup mode ────────────────────────────────── */
@@ -290,13 +296,13 @@
   appearance: none;
   display: inline-flex;
   align-items: center;
-  gap: var(--hi-space-6, 6px);
-  padding: var(--hi-space-4, 4px) var(--hi-space-10, 10px);
+  gap: var(--space-6, 6px);
+  padding: var(--space-4, 4px) var(--space-10, 10px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
   border-radius: var(--hi-radius-sm, 4px);
   color: color-mix(in srgb, var(--hi-color-text-secondary) 70%, transparent);
-  font-size: var(--hi-text-xs, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
   transition: border-color var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
@@ -306,6 +312,11 @@
     border-color: color-mix(in srgb, var(--hi-color-primary) 50%, transparent);
     color: var(--hi-color-text-primary);
   }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent);
+    outline-offset: 1px;
+  }
 }
 
 .hk-dtp-trigger-icon {
@@ -326,8 +337,14 @@
   transform: rotate(180deg);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .hk-dtp-trigger-chev {
+    transition: none;
+  }
+}
+
 .hk-dtp-popup {
-  padding: var(--hi-space-8, 8px);
+  padding: var(--space-8, 8px);
   min-width: 260px;
 }
 
@@ -351,8 +368,8 @@
 .hk-dtp-popup-foot {
   display: flex;
   justify-content: flex-end;
-  padding: var(--hi-space-8, 8px) var(--hi-space-2, 2px) var(--hi-space-2, 2px);
-  margin-top: var(--hi-space-8, 8px);
+  padding: var(--space-8, 8px) var(--space-2, 2px) var(--space-2, 2px);
+  margin-top: var(--space-8, 8px);
   border-top: 1px solid color-mix(in srgb, var(--hi-color-border) 10%, transparent);
 }
 
@@ -362,8 +379,8 @@
   color: rgb(var(--color-on-solid-text, 255 255 255));
   border: 0;
   border-radius: var(--hi-radius-sm, 4px);
-  padding: var(--hi-space-6, 6px) var(--hi-space-14, 14px);
-  font-size: var(--hi-text-xs, 0.75rem);
+  padding: var(--space-6, 6px) var(--space-14, 14px);
+  font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   cursor: pointer;
   transition: filter var(--hi-duration-fast, 0.15s) ease;
@@ -380,13 +397,13 @@
   width: 100%;
   min-height: 2.5rem;
   box-sizing: border-box;
-  padding: var(--hi-space-8, 8px) var(--hi-space-12, 12px);
+  padding: var(--space-8, 8px) var(--space-12, 12px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
   border-radius: var(--hi-radius-sm, 4px);
   color: var(--hi-color-text-primary);
   font-family: inherit;
-  font-size: var(--hi-text-sm, 0.875rem);
+  font-size: var(--text-sm, 0.875rem);
   font-variant-numeric: tabular-nums;
   line-height: 1.5;
 

package/src/components/HkDivider.scss

@@ -32,23 +32,23 @@
 }
 
 .hk-divider-spacing-xs {
-  --hk-divider-space: var(--hi-space-2, 0.125rem);
+  --hk-divider-space: var(--space-2, 0.125rem);
 }
 
 .hk-divider-spacing-sm {
-  --hk-divider-space: var(--hi-space-4, 0.25rem);
+  --hk-divider-space: var(--space-4, 0.25rem);
 }
 
 .hk-divider-spacing-md {
-  --hk-divider-space: var(--hi-space-6, 0.375rem);
+  --hk-divider-space: var(--space-6, 0.375rem);
 }
 
 .hk-divider-spacing-lg {
-  --hk-divider-space: var(--hi-space-8, 0.5rem);
+  --hk-divider-space: var(--space-8, 0.5rem);
 }
 
 .hk-divider-spacing-xl {
-  --hk-divider-space: var(--hi-space-12, 0.75rem);
+  --hk-divider-space: var(--space-12, 0.75rem);
 }
 
 .hk-divider[class*="hk-divider-spacing-"]:not(.hk-divider-vertical) {
@@ -59,27 +59,26 @@
   margin-inline: var(--hk-divider-space);
 }
 
-.hk-divider-vertical.hk-divider-length-xs {
+.hk-divider-vertical[class*="hk-divider-length-"] {
   align-self: center;
-  height: var(--hi-space-8, 0.5rem);
+}
+
+.hk-divider-vertical.hk-divider-length-xs {
+  height: var(--space-8, 0.5rem);
 }
 
 .hk-divider-vertical.hk-divider-length-sm {
-  align-self: center;
-  height: var(--hi-space-12, 0.75rem);
+  height: var(--space-12, 0.75rem);
 }
 
 .hk-divider-vertical.hk-divider-length-md {
-  align-self: center;
-  height: var(--hi-space-16, 1rem);
+  height: var(--space-16, 1rem);
 }
 
 .hk-divider-vertical.hk-divider-length-lg {
-  align-self: center;
-  height: var(--hi-space-24, 1.5rem);
+  height: var(--space-24, 1.5rem);
 }
 
 .hk-divider-vertical.hk-divider-length-xl {
-  align-self: center;
-  height: var(--hi-space-32, 2rem);
+  height: var(--space-32, 2rem);
 }

package/src/components/HkDraggableGrid.scss

@@ -1,30 +1,30 @@
 .hk-draggable-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
 }
 
 .hk-draggable-grid-row {
   display: flex;
   flex-wrap: nowrap;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
 }
 
 .hk-draggable-grid-row-phantom {
   min-height: 44px;
   border: 1px dashed var(--hi-color-primary, #58a6ff);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
   background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
 }
 
 .hk-draggable-grid-cell {
-  flex: 0 0 calc((100% - (var(--hk-grid-cols, 3) - 1) * 0.5rem) / var(--hk-grid-cols, 3));
+  flex: 0 0 calc((100% - (var(--hk-grid-cols, 3) - 1) * var(--space-8, 0.5rem)) / var(--hk-grid-cols, 3));
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
   min-height: 44px;
-  padding: 0.5rem 0.625rem;
-  border-radius: 4px;
+  padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
+  border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-subtle, #21262d);
   border: 1px solid var(--hi-color-border, #30363d);
   transition:
@@ -48,7 +48,6 @@
     border-color: var(--hi-color-primary, #58a6ff);
     background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
     cursor: grabbing;
-    z-index: 0;
   }
 
   &[data-placeholder="before"] {
@@ -57,6 +56,13 @@
 
   &[data-locked] {
     opacity: 0.65;
+    cursor: default;
+
+    /* Locked cells never start a drag (tsx returns early) — no hover
+     * affordance and no grab cursor on their surface. */
+    &:hover {
+      border-color: var(--hi-color-border, #30363d);
+    }
   }
 
   .hk-draggable-grid[data-dragging] & {
@@ -70,10 +76,20 @@
   box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #58a6ff);
 }
 
+/* RTL flips the flex flow, so the before/after insertion markers must
+ * swap physical sides to keep pointing at the inline edge (HkBreadcrumb
+ * precedent for the [dir="rtl"] override form). */
+[dir="rtl"] .hk-draggable-grid-cell[data-placeholder="before"] {
+  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #58a6ff);
+}
+
+[dir="rtl"] .hk-draggable-grid-row[data-placeholder-row="after"] {
+  box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #58a6ff);
+}
+
 .hk-draggable-grid-cell-placeholder-target {
   border: none;
   background: transparent;
-  min-height: 44px;
 }
 
 .hk-draggable-grid-handle {
@@ -100,7 +116,7 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
 }
 
 .hk-draggable-grid-ghost {
@@ -113,7 +129,7 @@
   box-shadow:
     0 8px 24px rgb(0 0 0 / 28%),
     0 2px 6px rgb(0 0 0 / 18%);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-elevated, #161b22);
   backdrop-filter: blur(2px);
   pointer-events: none;
@@ -133,3 +149,17 @@
     width: 100%;
   }
 }
+
+/* The dragging cell's scale-down is a non-trivial transform animation —
+ * drop it (and the transitions) under reduced motion (HkExpansionPanel
+ * precedent). The ghost's pointer-follow is direct manipulation with no
+ * transition, so it needs no guard. */
+@media (prefers-reduced-motion: reduce) {
+  .hk-draggable-grid-cell {
+    transition: none;
+
+    &[data-dragging] {
+      transform: none;
+    }
+  }
+}

package/src/components/HkDraggableList.scss

@@ -1,16 +1,16 @@
 .hk-draggable-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-4, 4px);
 }
 
 .hk-draggable-list-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  min-height: 40px;
-  padding: 0.5rem 0.625rem;
-  border-radius: 4px;
+  gap: var(--space-8, 0.5rem);
+  min-height: var(--space-40, 40px);
+  padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
+  border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-subtle, #21262d);
   border: 1px solid var(--hi-color-border, #30363d);
   transition:
@@ -20,7 +20,6 @@
     background 150ms ease;
   user-select: none;
   -webkit-user-select: none;
-  transform-origin: center;
 
   &:hover {
     border-color: var(--hi-color-text-tertiary, #8b949e);
@@ -33,7 +32,6 @@
     border-color: var(--hi-color-primary, #58a6ff);
     background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
     cursor: grabbing;
-    z-index: 0;
   }
 
   &[data-placeholder="before"] {
@@ -58,7 +56,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
+  width: var(--space-20, 20px);
   flex-shrink: 0;
   color: var(--hi-color-text-tertiary, #8b949e);
   cursor: grab;
@@ -78,7 +76,7 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
 }
 
 .hk-draggable-list-ghost {
@@ -86,12 +84,14 @@
   top: 0;
   left: 0;
   margin: 0;
-  transform: translate3d(0, 0, 0) scale(1.02);
+  // No transform here: the tsx always writes the full translate3d inline
+  // (attachGhost/moveGhost) before the ghost paints — a class transform
+  // (e.g. a scale lift) could never win the cascade against it.
   opacity: 0.85;
   box-shadow:
     0 8px 24px rgb(0 0 0 / 28%),
     0 2px 6px rgb(0 0 0 / 18%);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-elevated, #161b22);
   backdrop-filter: blur(2px);
   pointer-events: none;
@@ -111,3 +111,14 @@
     width: 100%;
   }
 }
+
+/* Reduced motion: the dragging press cue (scale + dim) must snap instead
+   of animating; the hover border/background fades stay (house convention).
+   The ghost itself is pointer-positioned via inline transform — 1:1
+   direct manipulation, not autonomous motion — so it is left alone.
+   (house pattern: HkAffixPicker.scss / HkExpansionPanel.scss guards) */
+@media (prefers-reduced-motion: reduce) {
+  .hk-draggable-list-item {
+    transition: border-color 150ms ease, background 150ms ease;
+  }
+}

package/src/components/HkDrawer.scss

@@ -112,13 +112,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--hi-space-12, 0.75rem) var(--hi-space-16, 1rem);
+  padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
   border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
   flex-shrink: 0;
 }
 
 .hk-drawer-title {
-  font-size: var(--hi-text-base, 1rem);
+  font-size: var(--text-base, 0.875rem);
   font-weight: 700;
   color: var(--hi-color-text-primary, #333);
 }
@@ -147,7 +147,7 @@
   /* Consumers nesting a self-padded menu (HkMenuPanel) zero this via
      --hk-drawer-body-padding so nav rows and the footer menu share one
      left edge. */
-  padding: var(--hk-drawer-body-padding, var(--hi-space-16, 1rem));
+  padding: var(--hk-drawer-body-padding, var(--space-16, 1rem));
 
   /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
      hidden, never styled. */
@@ -161,7 +161,7 @@
 .hk-drawer-footer {
   /* HkMenuPanel carries its own inset; zero this variable when the
      footer hosts one so both edges align. */
-  padding: var(--hk-drawer-footer-padding, var(--hi-space-12, 0.75rem) var(--hi-space-16, 1rem));
+  padding: var(--hk-drawer-footer-padding, var(--space-12, 0.75rem) var(--space-16, 1rem));
   border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
   flex-shrink: 0;
 }
@@ -220,3 +220,23 @@
     }
   }
 }
+
+/* Reduced motion: the width/height size morph and the four slide
+   directions snap instead of animating — the surface machine's
+   zero-duration probe (useSurfaceMachine.completeNow) finalizes open/
+   close immediately. The overlay scrim's fade is already flattened by
+   the same media query inside scrim-fade().
+   (house pattern: HkModal.scss / HkPopover.scss guards) */
+@media (prefers-reduced-motion: reduce) {
+  .hk-drawer-panel,
+  .hk-drawer-left-enter-active,
+  .hk-drawer-right-enter-active,
+  .hk-drawer-top-enter-active,
+  .hk-drawer-bottom-enter-active,
+  .hk-drawer-left-leave-active,
+  .hk-drawer-right-leave-active,
+  .hk-drawer-top-leave-active,
+  .hk-drawer-bottom-leave-active {
+    transition: none;
+  }
+}

package/src/components/HkEmptyState.scss

@@ -3,19 +3,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--hi-space-48, 3rem) var(--hi-space-16, 1rem);
+  padding: var(--space-48, 3rem) var(--space-16, 1rem);
   text-align: center;
   background: var(--hk-empty-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(var(--blur-sm, 8px));
   border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
   border-radius: var(--hi-radius-md, 0.5rem);
   box-sizing: border-box;
 }
 
 .hk-empty-icon {
-  width: 48px;
-  height: 48px;
-  margin-bottom: var(--hi-space-12, 0.75rem);
+  width: var(--space-48, 3rem);
+  height: var(--space-48, 3rem);
+  margin-bottom: var(--space-12, 0.75rem);
   color: var(--hi-color-text-secondary, #666);
   opacity: 0.5;
   display: flex;
@@ -24,22 +24,22 @@
 }
 
 .hk-empty-title {
-  font-size: var(--hi-text-base, 1rem);
+  font-size: var(--text-base, 0.875rem);
   font-weight: 600;
   color: var(--hi-color-text-primary, #333);
-  margin: 0 0 var(--hi-space-8, 0.5rem);
+  margin: 0 0 var(--space-8, 0.5rem);
 }
 
 .hk-empty-desc {
-  font-size: var(--hi-text-sm, 0.8125rem);
+  font-size: var(--text-sm, 0.8125rem);
   color: var(--hi-color-text-secondary, #666);
-  margin: 0 0 var(--hi-space-16, 1rem);
+  margin: 0 0 var(--space-16, 1rem);
   max-width: 24rem;
   line-height: 1.5;
 }
 
 .hk-empty-action {
-  margin-top: var(--hi-space-4, 0.25rem);
+  margin-top: var(--space-4, 0.25rem);
 }
 
 /* fit="page" (default): full width on mobile — the page supplies the outer
@@ -61,7 +61,6 @@
 .hk-empty-state--fill {
   width: 100%;
   height: 100%;
-  min-height: 100%;
 }
 
 /* Loading variant keeps a comfortable spinner area in short hosts. */

package/src/components/HkErrorLanding.scss

@@ -43,7 +43,7 @@
   border: 1px solid rgb(var(--hel-border) / 70%);
   border-radius: var(--radius-xl, 20px);
   box-shadow: var(--shadow-lg, 0 18px 48px rgb(0 0 0 / 8%));
-  padding: 2.25rem 1.75rem 1.75rem;
+  padding: 2.25rem var(--space-28, 1.75rem) var(--space-28, 1.75rem);
   text-align: center;
 
   // Tone wash bleeding down from the top edge behind the icon — gives the
@@ -188,14 +188,14 @@
 .hk-error-landing__details {
   position: relative;
   margin-top: var(--space-16, 1rem);
-  text-align: left;
+  text-align: start;
 }
 
 .hk-error-landing__details-label {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 2px;
+  gap: var(--space-4, 4px);
+  padding: 0 var(--space-2, 2px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 500;
   letter-spacing: 0.02em;
@@ -269,6 +269,6 @@
 
 @media (max-width: 480px) {
   .hk-error-landing__card {
-    padding: 1.75rem 1.125rem 1.5rem;
+    padding: var(--space-28, 1.75rem) 1.125rem var(--space-24, 1.5rem);
   }
 }

package/src/components/HkExpansionPanel.scss

@@ -37,7 +37,7 @@
   background: none;
   color: rgb(var(--color-text));
   font: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   outline: none;
 
@@ -45,6 +45,10 @@
     background: var(--c-primary-faint);
   }
 
+  &:active:not(:disabled) {
+    background: var(--c-primary-dim);
+  }
+
   &:focus-visible {
     box-shadow: var(--shadow-focus);
   }
@@ -62,7 +66,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-2);
   min-width: 0;
 }