@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkBreadcrumb.scss

@@ -0,0 +1,624 @@
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+
+// ------
+// Hikari Breadcrumb Component
+// Features: Glowing separators, smooth transitions, hover effects
+// ------
+
+// ------
+// Base Breadcrumb Styles
+// ------
+
+.hk-breadcrumb {
+  // Layout
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  // Reset
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  // Typography
+  font-family: vars.$hikari-font-family-sans;
+  font-size: vars.$hikari-font-size-sm;
+  line-height: 1.5;
+
+  // Gap
+  gap: 0.5rem;
+}
+
+// ------
+// Breadcrumb Item
+// ------
+
+.hk-breadcrumb-item {
+  // Layout
+  display: flex;
+  align-items: center;
+
+  // Spacing
+  margin: 0;
+
+  // Position
+  position: relative;
+
+  // Not the last item
+  &:not(:last-child) {
+    // Separator
+    .hk-breadcrumb-separator {
+      margin-left: 0.5rem;
+      color: var(--hi-color-text-secondary);
+      opacity: 0.5;
+      // DISABLED - migrated to JS animation
+
+      // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+      // Glow effect on separator
+      filter: drop-shadow(0 0 4px var(--hi-primary));
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  // Last item (current page)
+  &:last-child {
+    .hk-breadcrumb-link {
+      color: var(--hi-color-text-primary);
+      font-weight: 500;
+      cursor: default;
+      pointer-events: none;
+
+      // Subtle glow on current item
+      text-shadow: 0 0 8px var(--hi-primary);
+    }
+  }
+}
+
+// ------
+// Breadcrumb Link
+// ------
+
+.hk-breadcrumb-link {
+  // Typography
+  color: var(--hi-color-text-secondary);
+  text-decoration: none;
+  white-space: nowrap;
+
+  // Cursor
+  cursor: pointer;
+
+  // Transitions
+  // DISABLED - migrated to JS animation
+
+  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+  // Padding
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  border-radius: vars.$hikari-radius-fui-sm;
+
+  // Display
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+
+  // Icon
+  .hk-breadcrumb-icon {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // Hover state
+  &:hover {
+    color: var(--hi-color-text-primary);
+    background: var(--hi-primary);
+
+    .hk-breadcrumb-icon {
+      color: var(--hi-color-primary);
+      filter: drop-shadow(0 0 4px var(--hi-primary));
+    }
+
+    // Glow effect on text
+    text-shadow: 0 0 8px var(--hi-primary);
+  }
+
+  // Active/focus state
+  &:focus-visible {
+    outline: none;
+    background: var(--hi-primary);
+    box-shadow:
+      0 0 0 2px var(--hi-primary),
+      0 0 12px var(--hi-primary);
+  }
+
+  // Active state (for non-last items)
+  &.hk-breadcrumb-link-active {
+    color: var(--hi-color-text-primary);
+    font-weight: 500;
+  }
+}
+
+// ------
+// Breadcrumb Separator
+// ------
+
+.hk-breadcrumb-separator {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+
+  // Typography
+  font-size: 0.875rem;
+
+  // Transitions
+  // DISABLED - migrated to JS animation
+
+  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+  // Custom separator glow
+  &.hk-breadcrumb-separator-glow {
+    color: var(--hi-color-primary);
+    opacity: 0.8;
+    filter: drop-shadow(0 0 6px var(--hi-primary));
+  }
+}
+
+// ------
+// Separator Variants
+// ------
+
+// Slash separator
+.hk-breadcrumb-separator-slash {
+  &::before {
+    content: '/';
+  }
+}
+
+// Arrow separator
+.hk-breadcrumb-separator-arrow {
+  &::before {
+    content: '›';
+    font-size: 1.1em;
+  }
+}
+
+// Double arrow separator
+.hk-breadcrumb-separator-double-arrow {
+  &::before {
+    content: '»';
+    font-size: 0.9em;
+  }
+}
+
+// Chevron separator (default with icon)
+.hk-breadcrumb-separator-chevron {
+  // Uses chevron-right icon
+}
+
+// Dot separator
+.hk-breadcrumb-separator-dot {
+  &::before {
+    content: '•';
+    font-size: 1.2em;
+  }
+}
+
+// ------
+// Breadcrumb Dropdown (for nested paths)
+// ------
+
+.hk-breadcrumb-dropdown {
+  // Layout
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  // Trigger
+  .hk-breadcrumb-dropdown-trigger {
+    // Layout
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    // Arrow icon
+    .hk-breadcrumb-dropdown-arrow {
+      width: 0.75rem;
+      height: 0.75rem;
+      // DISABLED - migrated to JS animation
+
+      // transition: transform vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // Open state
+    &.hk-breadcrumb-dropdown-open {
+      .hk-breadcrumb-dropdown-arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // Dropdown menu
+  .hk-breadcrumb-dropdown-menu {
+    // Layout
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 200px;
+    z-index: 100;
+
+    // Appearance
+    border-radius: vars.$hikari-radius-fui-md;
+    border: 1px solid var(--hi-color-border);
+    background: var(--hi-surface);
+    backdrop-filter: blur(4px);
+    box-shadow:
+      0 8px 16px var(--hi-black-30, rgba(0, 0, 0, 0.3)),
+      0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;
+
+    // Padding
+    padding: 0.5rem;
+
+    // Transitions
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-normal vars.$hikari-ease-smooth;
+
+    // Animation
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+
+    // Open state
+    &.hk-breadcrumb-dropdown-menu-open {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    // Menu items
+    .hk-breadcrumb-dropdown-item {
+      // Layout
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      // Spacing
+      padding: 0.5rem 0.75rem;
+      margin: 0.125rem 0;
+
+      // Typography
+      font-size: vars.$hikari-font-size-sm;
+      color: var(--hi-color-text-primary);
+      text-decoration: none;
+      white-space: nowrap;
+
+      // Appearance
+      border-radius: vars.$hikari-radius-fui-sm;
+
+      // Cursor
+      cursor: pointer;
+
+      // Transitions
+      // DISABLED - migrated to JS animation
+
+      // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+      // Hover state
+      &:hover {
+        background: var(--hi-primary);
+        color: var(--hi-color-text-primary);
+        box-shadow:
+          0 0 12px var(--hi-primary),
+          inset 0 0 8px var(--hi-primary);
+      }
+    }
+  }
+}
+
+// ------
+// Icon Styles
+// ------
+
+.hk-breadcrumb-icon {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+
+  // Size
+  width: 1rem;
+  height: 1rem;
+
+  // Color
+  color: var(--hi-color-text-secondary);
+
+  // Transitions
+  // DISABLED - migrated to JS animation
+
+  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ------
+// Size Variants
+// ------
+
+.hk-breadcrumb-sm {
+  font-size: 0.75rem;
+  gap: 0.375rem;
+
+  .hk-breadcrumb-link {
+    padding: 0.125rem 0.375rem;
+    margin: -0.125rem -0.375rem;
+
+    .hk-breadcrumb-icon {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
+  .hk-breadcrumb-separator {
+    margin-left: 0.375rem;
+    font-size: 0.75rem;
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+}
+
+.hk-breadcrumb-md {
+  font-size: vars.$hikari-font-size-sm;
+  gap: 0.5rem;
+}
+
+.hk-breadcrumb-lg {
+  font-size: 1rem;
+  gap: 0.625rem;
+
+  .hk-breadcrumb-link {
+    padding: 0.375rem 0.625rem;
+    margin: -0.375rem -0.625rem;
+
+    .hk-breadcrumb-icon {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
+
+  .hk-breadcrumb-separator {
+    margin-left: 0.625rem;
+    font-size: 1rem;
+
+    svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
+}
+
+// ------
+// Theme Variants
+// ------
+
+// With background
+.hk-breadcrumb-background {
+  gap: 0;
+
+  .hk-breadcrumb-item {
+    background: var(--hi-card-bg);
+    padding: 0.375rem 0.75rem;
+    border-radius: vars.$hikari-radius-fui-sm;
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+    &:not(:last-child):hover {
+      background: var(--hi-primary);
+    }
+
+    &:last-child {
+      background: var(--hi-primary);
+      box-shadow:
+        0 0 12px var(--hi-primary),
+        inset 0 0 8px var(--hi-primary);
+    }
+  }
+}
+
+// Pill style
+.hk-breadcrumb-pill {
+  .hk-breadcrumb-item {
+    background: var(--hi-card-bg);
+    padding: 0.375rem 0.875rem;
+    border-radius: 999px;
+    border: 1px solid var(--hi-color-border);
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+    &:not(:last-child) {
+      &:hover {
+        background: var(--hi-primary);
+        border-color: var(--hi-primary);
+      }
+    }
+
+    &:last-child {
+      background: linear-gradient(135deg, var(--hi-primary), var(--hi-primary));
+      border-color: var(--hi-primary);
+      box-shadow:
+        0 0 12px var(--hi-primary),
+        inset 0 0 8px var(--hi-primary);
+    }
+  }
+}
+
+// ------
+// Separator Animations
+// ------
+
+// Animated separator (pulsing glow)
+.hk-breadcrumb-separator-animated {
+  // DISABLED - migrated to JS animation
+
+  // animation: breadcrumb-separator-pulse 2s ease-in-out infinite;
+}
+
+// DISABLED - migrated to JS animation
+// @keyframes breadcrumb-separator-pulse {
+//   0%, 100% {
+//     opacity: 0.5;
+//     filter: drop-shadow(0 0 4px var(--hi-primary));
+//   }
+//   50% {
+//     opacity: 1;
+//     filter: drop-shadow(0 0 8px var(--hi-primary));
+//   }
+// }
+
+// ------
+// Collapsible Breadcrumb (for mobile)
+// ------
+
+.hk-breadcrumb-collapsible {
+  // Hide middle items on small screens
+  .hk-breadcrumb-item {
+    &:nth-child(n+2):nth-last-child(n+3) {
+      @media (max-width: 768px) {
+        display: none;
+      }
+    }
+
+    // Show ellipsis
+    &.hk-breadcrumb-ellipsis {
+      @media (max-width: 768px) {
+        display: flex;
+      }
+    }
+  }
+}
+
+// ------
+// Animations
+// ------
+
+// Fade-in animation
+.hk-breadcrumb-animate-in {
+  .hk-breadcrumb-item {
+    opacity: 0;
+    // DISABLED - migrated to JS animation
+
+    // animation: breadcrumb-fade-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
+
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{$i * 0.1s};
+      }
+    }
+  }
+}
+
+// DISABLED - migrated to JS animation
+// @keyframes breadcrumb-fade-in {
+//   from {
+//     opacity: 0;
+//     transform: translateY(-4px);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateY(0);
+//   }
+// }
+
+// Slide-in animation
+.hk-breadcrumb-slide-in {
+  .hk-breadcrumb-item {
+    opacity: 0;
+    // DISABLED - migrated to JS animation
+
+    // animation: breadcrumb-slide-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
+
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{$i * 0.08s};
+      }
+    }
+  }
+}
+
+// DISABLED - migrated to JS animation
+// @keyframes breadcrumb-slide-in {
+//   from {
+//     opacity: 0;
+//     transform: translateX(-8px);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateX(0);
+//   }
+// }
+
+// ------
+// Custom Colors
+// ------
+
+.hk-breadcrumb-primary {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-primary);
+      text-shadow: 0 0 8px var(--hi-color-primary);
+    }
+  }
+}
+
+.hk-breadcrumb-success {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-success);
+      text-shadow: 0 0 8px var(--hi-color-success);
+    }
+  }
+}
+
+.hk-breadcrumb-warning {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-warning);
+      text-shadow: 0 0 8px var(--hi-color-warning);
+    }
+  }
+}
+
+.hk-breadcrumb-danger {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-danger);
+      text-shadow: 0 0 8px var(--hi-color-danger);
+    }
+  }
+}

package/src/components/HkBreadcrumb.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, type PropType } from "vue";
 import { useI18n } from "../i18n/context";
-import "../../../components/src/styles/components/breadcrumb.scss";
+import "./HkBreadcrumb.scss";
 
 export default defineComponent({
   name: "HkBreadcrumb",
@@ -14,7 +14,7 @@ export default defineComponent({
     const cls = computed(() => ["hk-breadcrumb", `hk-breadcrumb-${props.size}`]);
 
     return () => (
-      <nav aria-label={t("hk.breadcrumb.label", "Breadcrumb")}>
+      <nav aria-label={t("hikari::breadcrumb.label", "Breadcrumb")}>
         <ol class={cls.value}>
           {props.items.map((item, index) => (
             <li key={index} class="hk-breadcrumb-item">

package/src/components/HkButton.scss

@@ -17,7 +17,6 @@
   user-select: none;
   outline: none;
   position: relative;
-  min-height: 2.5rem;
 }
 
 .hk-btn:focus-visible {
@@ -32,20 +31,29 @@
 }
 
 /* ---- Size variants ---- */
+/* Height scales WITH the size: a single base min-height made every sm
+   button 2.5rem (40px) tall — comically oversized next to page-header
+   text and toolbar rows. Font size does NOT scale with the size
+   (2026-08-30 user report, Material-Design convention): md and lg share
+   --text-base and lg only grows padding/min-height for a larger touch
+   target; sm keeps its compact --text-xs. */
 
 .hk-btn-sm {
   padding: var(--space-6) var(--space-12);
   font-size: var(--text-xs);
+  min-height: 1.75rem;
 }
 
 .hk-btn-md {
   padding: var(--space-8) var(--space-16);
   font-size: var(--text-base);
+  min-height: 2.5rem;
 }
 
 .hk-btn-lg {
   padding: var(--space-10) var(--space-24);
-  font-size: var(--text-md);
+  font-size: var(--text-base);
+  min-height: 2.75rem;
 }
 
 /* ---- Primary ---- */
@@ -53,6 +61,12 @@
 .hk-btn-primary {
   background: rgb(var(--color-primary));
   color: rgb(var(--color-on-solid));
+
+  /* Glyphs follow the icon slot so custom themes can split text/icon ink
+     (mirrors the legacy button-vars primary block). */
+  svg {
+    color: rgb(var(--color-on-solid-icon, 255 255 255));
+  }
 }
 
 .hk-btn-primary:hover:not(:disabled) {

package/src/components/HkCaptchaModal.scss

@@ -0,0 +1,14 @@
+.s-captcha-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-12, 0.75rem);
+  padding: var(--space-8, 0.5rem) 0;
+}
+
+.s-captcha-modal-prompt {
+  margin: 0;
+  font-size: var(--text-sm, 0.8125rem);
+  color: rgb(var(--color-muted));
+  text-align: center;
+}