@celestia-island/hikari 0.43.10 → 0.43.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.10",
+  "version": "0.43.12",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAboutModal.scss

@@ -78,17 +78,28 @@
 
 .s-about-modal-link {
   padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-sm, 4px);
   background: rgb(var(--color-primary) / 12%);
   color: rgb(var(--color-primary));
   font-size: var(--text-xs, 0.75rem);
   text-decoration: none;
+  transition: background 200ms ease;
 }
 
 .s-about-modal-link:hover {
   background: rgb(var(--color-primary) / 20%);
 }
 
+.s-about-modal-link:active {
+  background: rgb(var(--color-primary) / 26%);
+}
+
+.s-about-modal-link:focus-visible {
+  box-shadow:
+    0 0 0 2px rgb(var(--color-surface)),
+    0 0 0 4px rgb(var(--color-primary));
+}
+
 .s-about-modal-footer {
   display: flex;
   justify-content: flex-end;

package/src/components/HkAdaptiveDialog.scss

@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--hi-space-4, 4px);
+  gap: var(--space-4, 4px);
   flex: 1;
   min-width: 0;
 }
@@ -18,5 +18,5 @@
 .hk-adaptive-dialog-footer {
   display: flex;
   justify-content: flex-end;
-  gap: var(--hi-space-8, 8px);
+  gap: var(--space-8, 8px);
 }

package/src/components/HkAffixPicker.scss

@@ -12,7 +12,10 @@
   align-items: center;
   gap: 0.3rem;
   max-width: 11rem;
-  padding: 2px 6px 2px 4px;
+  /* Logical axes: the wide side reserves caret room at inline-end and
+   * flips together with the host input's RTL suffix/prefix side. */
+  padding-block: 2px;
+  padding-inline: 4px 6px;
   border: none;
   border-radius: var(--radius-sm, 6px);
   background: transparent;
@@ -25,6 +28,10 @@
     background: rgb(var(--color-primary) / 14%);
   }
 
+  &:active:not(:disabled) {
+    background: rgb(var(--color-primary) / 20%);
+  }
+
   &:disabled {
     cursor: default;
     opacity: 0.6;
@@ -33,7 +40,7 @@
 
 .hk-affix-chip-label {
   font-weight: 600;
-  font-size: var(--text-sm, 14px);
+  font-size: var(--text-sm, 0.8125rem);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -44,6 +51,13 @@
   color: rgb(var(--color-muted));
 }
 
+/* Open disclosure state (aria-expanded sits on the chip button): flip the
+ * caret so the popup direction reads at a glance. Instant swap — no
+ * transition, so the reduced-motion guard below needs no entry. */
+.hk-affix-chip[aria-expanded="true"] .hk-affix-chip-caret {
+  transform: rotate(180deg);
+}
+
 /* ── popup head: tags (multi) + search ─────────────────────────────── */
 .hk-affix-head {
   display: flex;
@@ -51,18 +65,18 @@
 }
 
 .hk-affix-search {
-  padding: 8px 10px 6px;
+  padding: var(--space-8, 8px) var(--space-10, 10px) var(--space-6, 6px);
 }
 
 .hk-affix-tags {
-  padding: 10px 10px 8px;
+  padding: var(--space-10, 10px) var(--space-10, 10px) var(--space-8, 8px);
   border-bottom: 1px solid var(--border-faint);
 }
 
 .hk-affix-tag-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-6, 6px);
   min-width: min(18rem, 100%);
   max-width: 24rem;
 }
@@ -75,12 +89,12 @@
 .hk-affix-tag {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-8, 8px);
   min-height: 2.25rem;
-  padding: 4px var(--space-16);
+  padding: var(--space-4, 4px) var(--space-16, 16px);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
-  background: rgb(var(--color-surface) / var(--opacity-half, 50%));
+  background: rgb(var(--color-surface) / var(--opacity-half));
   transition: border-color 0.12s ease, background 0.12s ease;
 
   &:hover {
@@ -103,16 +117,21 @@
   min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-6, 6px);
   padding: 0;
   border: 0;
   background: transparent;
   color: rgb(var(--color-text));
   font-size: var(--text-sm);
   line-height: 1.4;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   appearance: none;
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: 2px;
+  }
 }
 
 .hk-affix-tag-flag {
@@ -166,7 +185,7 @@
   height: 1.5rem;
   padding: 0;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: transparent;
   color: rgb(var(--color-muted));
   cursor: pointer;
@@ -211,32 +230,40 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding: 4px 6px 8px;
+  padding: var(--space-4, 4px) var(--space-6, 6px) var(--space-8, 8px);
 }
 
 .hk-affix-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-8, 8px);
   width: 100%;
   min-height: 2.25rem;
-  padding: 4px 8px;
+  padding: var(--space-4, 4px) var(--space-8, 8px);
   border: none;
   border-radius: var(--radius-sm, 6px);
   background: transparent;
   color: rgb(var(--color-text));
-  font-size: var(--text-sm, 14px);
-  text-align: left;
+  font-size: var(--text-sm, 0.8125rem);
+  text-align: start;
   cursor: pointer;
   appearance: none;
   transition: background 0.1s ease;
 
-  &:hover,
-  &:focus-visible {
+  &:hover {
     background: rgb(var(--color-primary) / 10%);
     outline: none;
   }
 
+  /* Keyboard position is drawn INSIDE the row (HkSelectionGrid branch-fix
+   * pattern) and distinct from the hover tint, so overlapping popup/sheet
+   * chrome cannot shave a per-side outer ring and focus reads as focus. */
+  &:focus-visible {
+    background: rgb(var(--color-primary) / 10%);
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
+  }
+
   &[data-active] {
     background: rgb(var(--color-primary) / 16%);
     font-weight: 600;
@@ -246,27 +273,28 @@
     opacity: 0.5;
     cursor: default;
 
-    &:hover {
+    /* The button stays keyboard-focusable (data-disabled only), so the
+     * unpickable row must not paint the pickable tint on focus either. */
+    &:hover,
+    &:focus-visible {
       background: transparent;
     }
   }
 
-  /* The "Use <query>" free-text row reads as an add affordance. */
+  /* The "Use <query>" free-text row reads as an add affordance. Truncation
+   * comes from the base .hk-affix-row-label — only the emphasis is new. */
   &[data-custom="true"] {
     color: rgb(var(--color-primary));
 
     .hk-affix-row-label {
       font-weight: 600;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
   }
 }
 
 .hk-affix-row-flag {
   flex: none;
-  font-size: calc(var(--text-base, 15px) * 1.05);
+  font-size: calc(var(--text-base, 0.875rem) * 1.05);
   line-height: 1;
   font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
     sans-serif;
@@ -283,14 +311,14 @@
 .hk-affix-row-meta {
   flex: none;
   color: rgb(var(--color-muted));
-  font-size: calc(var(--text-sm, 14px) * 0.9);
+  font-size: calc(var(--text-sm, 0.8125rem) * 0.9);
   font-variant-numeric: tabular-nums;
 }
 
 .hk-affix-empty {
-  padding: 14px 12px;
+  padding: var(--space-14, 14px) var(--space-12, 12px);
   color: rgb(var(--color-muted));
-  font-size: var(--text-sm, 14px);
+  font-size: var(--text-sm, 0.8125rem);
   text-align: center;
 }
 

package/src/components/HkAlert.scss

@@ -1,12 +1,12 @@
 .hk-alert {
   display: flex;
   align-items: flex-start;
-  gap: var(--hi-space-12, 12px);
-  padding: var(--hi-space-12, 12px) var(--hi-space-16, 16px);
+  gap: var(--space-12, 12px);
+  padding: var(--space-12, 12px) var(--space-16, 16px);
   border-radius: var(--hi-radius-md, 8px);
   border: 1px solid transparent;
-  border-left-width: 4px;
-  color: var(--hi-color-text-primary);
+  border-inline-start-width: 4px;
+  color: var(--hi-color-text-primary, #333);
 }
 
 .hk-alert-banner {
@@ -20,52 +20,52 @@
 /* ── Sizes ─────────────────────────────────────── */
 
 .hk-alert-sm {
-  padding: var(--hi-space-8, 8px) var(--hi-space-12, 12px);
-  font-size: var(--hi-text-xs, 0.75rem);
+  padding: var(--space-8, 8px) var(--space-12, 12px);
+  font-size: var(--text-xs, 0.75rem);
 }
 
 .hk-alert-md {
-  padding: var(--hi-space-12, 12px) var(--hi-space-16, 16px);
-  font-size: var(--hi-text-sm, 0.875rem);
+  /* md padding == the .hk-alert base values; only the type size differs. */
+  font-size: var(--text-sm, 0.875rem);
 }
 
 .hk-alert-lg {
-  padding: var(--hi-space-16, 16px) var(--hi-space-24, 24px);
-  font-size: var(--hi-text-base, 1rem);
+  padding: var(--space-16, 16px) var(--space-24, 24px);
+  font-size: var(--text-base, 0.875rem);
 }
 
 /* ── Variants ──────────────────────────────────── */
 
 .hk-alert-error {
-  background: color-mix(in srgb, var(--hi-color-danger) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-danger) 15%, transparent);
-  border-left-color: var(--hi-color-danger);
+  background: color-mix(in srgb, var(--hi-color-danger, #f85149) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-danger, #f85149) 15%, transparent);
+  border-inline-start-color: var(--hi-color-danger, #f85149);
 
-  .hk-alert-icon { color: var(--hi-color-danger); }
+  .hk-alert-icon { color: var(--hi-color-danger, #f85149); }
 }
 
 .hk-alert-warning {
-  background: color-mix(in srgb, var(--hi-color-warning) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-warning) 15%, transparent);
-  border-left-color: var(--hi-color-warning);
+  background: color-mix(in srgb, var(--hi-color-warning, #d29922) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-warning, #d29922) 15%, transparent);
+  border-inline-start-color: var(--hi-color-warning, #d29922);
 
-  .hk-alert-icon { color: var(--hi-color-warning); }
+  .hk-alert-icon { color: var(--hi-color-warning, #d29922); }
 }
 
 .hk-alert-info {
-  background: color-mix(in srgb, var(--hi-color-primary) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
-  border-left-color: var(--hi-color-primary);
+  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
+  border-inline-start-color: var(--hi-color-primary, #58a6ff);
 
-  .hk-alert-icon { color: var(--hi-color-primary); }
+  .hk-alert-icon { color: var(--hi-color-primary, #58a6ff); }
 }
 
 .hk-alert-success {
-  background: color-mix(in srgb, var(--hi-color-success) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-success) 15%, transparent);
-  border-left-color: var(--hi-color-success);
+  background: color-mix(in srgb, var(--hi-color-success, #3fb950) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-success, #3fb950) 15%, transparent);
+  border-inline-start-color: var(--hi-color-success, #3fb950);
 
-  .hk-alert-icon { color: var(--hi-color-success); }
+  .hk-alert-icon { color: var(--hi-color-success, #3fb950); }
 }
 
 /* ── Icon ──────────────────────────────────────── */
@@ -87,14 +87,13 @@
 .hk-alert-title {
   margin: 0 0 2px;
   font-weight: 600;
-  font-size: inherit;
   line-height: 1.4;
 }
 
 .hk-alert-text {
   margin: 0;
   line-height: 1.5;
-  color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
+  color: color-mix(in srgb, var(--hi-color-text-secondary, #666) 85%, transparent);
 }
 
 /* ── Close button ──────────────────────────────── */
@@ -109,13 +108,18 @@
   border: 0;
   background: transparent;
   border-radius: var(--hi-radius-sm, 4px);
-  color: var(--hi-color-muted);
+  color: var(--hi-color-muted, #666);
   cursor: pointer;
   padding: 0;
   transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
 
   &:hover {
-    background: var(--hi-color-surface);
-    color: var(--hi-color-text-primary);
+    background: var(--hi-color-surface, #fff);
+    color: var(--hi-color-text-primary, #333);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline-offset: 2px;
   }
 }

package/src/components/HkAltSignIn.scss

@@ -5,7 +5,6 @@
 .hk-alt-signin {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
   width: 100%;
 }
 
@@ -25,10 +24,17 @@
     opacity var(--duration-normal, 0.3s) ease;
 }
 
-.hk-alt-signin__trigger:hover:not(:disabled) {
+.hk-alt-signin__trigger:hover:not(:disabled),
+.hk-alt-signin__trigger[aria-expanded="true"] {
   color: var(--hi-color-text-secondary, #999);
 }
 
+/* Keyboard position feedback on the full-width disclosure row. */
+.hk-alt-signin__trigger:focus-visible:not(:disabled) {
+  outline: 2px solid var(--hi-color-primary, #58a6ff);
+  outline-offset: 2px;
+}
+
 .hk-alt-signin__trigger:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -39,7 +45,7 @@
 .hk-alt-signin__rule {
   flex: 1 1 auto;
   height: 1px;
-  background: var(--hi-color-border-subtle, rgba(0, 0, 0, 0.08));
+  background: var(--border-subtle);
 }
 
 .hk-alt-signin__label {
@@ -51,5 +57,5 @@
   flex-direction: column;
   gap: var(--space-2, 0.125rem);
   min-width: 12rem;
-  padding: var(--space-4, 0.25rem) var(--space-4, 0.25rem);
+  padding: var(--space-4, 0.25rem);
 }

package/src/components/HkAuthMethodList.scss

@@ -7,8 +7,7 @@
 .s-auth-methods-divider {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 10px;
+  gap: var(--space-10, 0.625rem);
   margin: 0 0 var(--space-4, 0.25rem);
   color: var(--hi-color-muted, #999);
   font-size: var(--text-xs, 0.75rem);
@@ -32,9 +31,10 @@
 
 /* Fixed icon + label columns: the two spans keep the same width on every
    row, so icons and labels align across buttons while each button stays a
-   centered hk-btn-block. HkButton has a fragment root, so inbound classes
-   don't fall through — scope everything off the `.s-auth-methods`
-   container (descendant match: the component wrapper is display:contents).
+   centered hk-btn-block. The part classes sit on the default-slot spans
+   inside HkButton's single <button> root — scope everything off the
+   `.s-auth-methods` container (descendant match: the component wrapper
+   is display:contents).
    The label column width is MEASURED by the component (widest label text
    + 1px headroom, published as `--auth-methods-label-width` on its
    wrapper, inherited into the rows); the `max-content` fallback only

package/src/components/HkAuthSubmitButton.scss

@@ -1,12 +1,12 @@
 .s-auth-submit {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-6, 0.375rem);
   width: 100%;
 }
 
 .s-auth-submit-error {
   margin: 0;
-  font-size: 0.8125rem;
-  color: rgb(var(--color-danger, 229 62 62));
+  font-size: var(--text-sm, 0.8125rem);
+  color: rgb(var(--color-error, 240 70 80));
 }

package/src/components/HkAvatar.scss

@@ -9,7 +9,6 @@
   overflow: hidden;
   background-color: var(--hi-color-gray-200, #E5E7EB);
   color: var(--hi-color-gray-600, #4B5563);
-  font-weight: 500;
   transition: all 0.2s ease;
 
   img {
@@ -19,46 +18,24 @@
   }
 }
 
-.hk-avatar-xs {
-  width: 24px;
-  height: 24px;
-  font-size: 0.625rem;
-}
-
 .hk-avatar-sm {
-  width: 32px;
-  height: 32px;
-  font-size: 0.75rem;
+  width: var(--space-32);
+  height: var(--space-32);
+  font-size: var(--text-xs);
 }
 
 .hk-avatar-md {
-  width: 40px;
-  height: 40px;
-  font-size: 0.875rem;
+  width: var(--space-40);
+  height: var(--space-40);
+  font-size: var(--text-base);
 }
 
 .hk-avatar-lg {
+  /* 48px: --space-48 exists only in theme/_layout.scss, not in every
+     token sheet this component's other tokens live in — keep literal. */
   width: 48px;
   height: 48px;
-  font-size: 1rem;
-}
-
-.hk-avatar-xl {
-  width: 64px;
-  height: 64px;
-  font-size: 1.25rem;
-}
-
-.hk-avatar-circular {
-  border-radius: 50%;
-}
-
-.hk-avatar-rounded {
-  border-radius: 8px;
-}
-
-.hk-avatar-square {
-  border-radius: 0;
+  font-size: var(--text-md);
 }
 
 .hk-avatar-fallback {
@@ -71,23 +48,7 @@
   font-weight: 600;
 }
 
-.hk-avatar-icon {
-  color: var(--hi-color-text-secondary);
-  opacity: 0.8;
-}
-
-.hk-avatar-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
 [data-theme="dark"] .hk-avatar {
   background-color: var(--hi-surface);
-  color: var(--hi-color-text-secondary);
-}
-
-[data-theme="dark"] .hk-avatar-icon {
-  color: var(--hi-color-text-secondary);
-  opacity: 0.6;
+  color: var(--hi-color-text-secondary, rgba(255, 255, 255, 0.6));
 }

package/src/components/HkBadge.scss

@@ -7,6 +7,9 @@
  * (rendered as inline --hk-badge-* custom properties).
  */
 
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+
 .hk-badge {
   --hk-badge-text: inherit;
   --hk-badge-bg: transparent;
@@ -32,11 +35,6 @@
   padding: var(--space-1) var(--space-6);
 }
 
-.hk-badge[data-size="md"] {
-  font-size: var(--text-xs);
-  padding: var(--space-2) var(--space-8);
-}
-
 /* ---------- shape ---------- */
 .hk-badge[data-pill="false"] {
   border-radius: var(--radius-sm);
@@ -44,8 +42,7 @@
 
 /* ---------- typography ---------- */
 .hk-badge[data-mono] {
-  font-family: var(--font-mono);
-  font-weight: 600;
+  font-family: var(--font-mono, vars.$hikari-font-family-mono);
 }
 
 .hk-badge[data-uppercase] {
@@ -55,8 +52,8 @@
 
 /* ---------- dot indicator ---------- */
 .hk-badge [data-el="dot"] {
-  width: 6px;
-  height: 6px;
+  width: var(--space-6);
+  height: var(--space-6);
   border-radius: 50%;
   background: var(--hk-badge-text);
   flex-shrink: 0;