@helixui/library 2.1.2 → 3.0.0

package/dist/css/helix-navigation.css

@@ -29,6 +29,20 @@
     display: none;
   }
 
+  /*
+   * Ellipsis ordering when collapsed (FS-014 fix):
+   * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating
+   * the consumer's light DOM. CSS order places it between the first item
+   * (order: 0, default) and the last item (order: 2) in the flex <ol>.
+   */
+  .hx-bc-ellipsis {
+    order: 1;
+  }
+
+  ::slotted([data-bc-last]) {
+    order: 2;
+  }
+
   /* Visually hide the separator slot — used only to read text content.
    * display:none is intentional: the slot contains no interactive or focusable
    * content. If a future change adds focusable elements to this slot, switch to
@@ -36,6 +50,19 @@
   .separator-slot {
     display: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-breadcrumb is a nav container. Link colors and separators are handled
+   * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed
+   * at the container level.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-menu ── */
 :host {
     display: block;
@@ -51,14 +78,22 @@
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
     );
     min-width: var(--hx-menu-min-width, 10rem);
     max-height: var(--hx-menu-max-height, 20rem);
     overflow-y: auto;
     outline: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-nav ── */
 :host {
     display: block;
@@ -74,8 +109,8 @@
 
   [part='nav'] {
     position: relative;
-    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
   }
 
@@ -89,14 +124,14 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms) ease;
     line-height: 0;
   }
 
   [part='toggle']:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
   }
 
   [part='toggle']:focus-visible {
@@ -131,7 +166,7 @@
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f1f5f9));
     text-decoration: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
     border: none;
@@ -148,7 +183,7 @@
   }
 
   .nav__link:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
     color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -159,7 +194,7 @@
   }
 
   .nav__link--active {
-    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #1d4ed8));
     color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -184,12 +219,11 @@
     list-style: none;
     margin: 0;
     padding: var(--hx-space-1, 0.25rem) 0;
-    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1f2937));
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1e293b));
     border-radius: var(--hx-border-radius-md, 0.375rem);
     box-shadow: var(
-      --hx-shadow-md,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
+      --hx-nav-shadow,
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
     );
     z-index: var(--hx-z-index-dropdown, 1000);
   }
@@ -239,7 +273,7 @@
   :host([orientation='vertical']) .nav__submenu .nav__link {
     padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #cbd5e1));
   }
 
   /* ─── Mobile Responsive ─── */
@@ -301,6 +335,22 @@
       animation: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='nav'] {
+      border: 1px solid CanvasText;
+    }
+
+    .nav__link--active {
+      border: 1px solid Highlight;
+    }
+
+    .nav__submenu {
+      border: 1px solid CanvasText;
+    }
+  }
 /* ── hx-overflow-menu ── */
 :host {
     display: inline-block;
@@ -309,7 +359,7 @@
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   /* ─── Trigger Button ─── */
@@ -321,11 +371,11 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
     cursor: pointer;
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      color var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
     padding: 0;
     line-height: 1;
@@ -341,11 +391,11 @@
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   /* ─── Size Variants ─── */
@@ -378,8 +428,8 @@
     position: fixed;
     z-index: var(--hx-overflow-menu-panel-z-index, 1000);
     min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -404,7 +454,7 @@
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #111827);
+    color: var(--hx-color-neutral-900, #0f172a);
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -413,7 +463,7 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f9fafb);
+    background-color: var(--hx-color-neutral-50, #f8fafc);
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -434,10 +484,41 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .trigger {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .trigger[disabled] {
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .panel {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-pagination ── */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-pagination-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .pagination-root {
@@ -470,14 +551,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--hx-pagination-button-size, 2.25rem);
-    height: var(--hx-pagination-button-size, 2.25rem);
+    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -490,7 +571,7 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f3f4f6));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
     border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
   }
 
@@ -521,9 +602,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--hx-pagination-button-size, 2.25rem);
-    height: var(--hx-pagination-button-size, 2.25rem);
-    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #6b7280));
+    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -544,18 +625,18 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     white-space: nowrap;
   }
 
   .page-size-select {
-    height: var(--hx-pagination-button-size, 2.25rem);
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -776,6 +857,32 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .side-nav {
+      border-inline-end-color: CanvasText;
+    }
+
+    .side-nav__header {
+      border-bottom-color: CanvasText;
+    }
+
+    .side-nav__footer {
+      border-top-color: CanvasText;
+    }
+
+    .side-nav__toggle {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .side-nav__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
 /* ── hx-steps ── */
 :host {
     display: block;
@@ -828,10 +935,22 @@
     --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
     --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-steps is a layout container — forced-colors state is handled
+   * by each hx-step child element's own forced-colors block.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-tabs ── */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-tabs-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   * {
@@ -858,7 +977,7 @@
     flex-wrap: nowrap;
     gap: 0;
     border-bottom: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: auto;
     scrollbar-width: none;
   }
@@ -883,7 +1002,7 @@
     flex-direction: column;
     border-bottom: none;
     border-inline-end: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: visible;
     overflow-y: auto;
     min-width: var(--hx-tabs-vertical-width, 12rem);
@@ -904,6 +1023,18 @@
       scroll-behavior: auto;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tablist {
+      border-bottom-color: CanvasText;
+    }
+
+    :host([orientation='vertical']) .tablist {
+      border-inline-end-color: CanvasText;
+    }
+  }
 /* ── hx-top-nav ── */
 /* ─── Host ─── */
 
@@ -932,10 +1063,10 @@
 
   .nav {
     background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
-    font-family: var(--hx-font-family-sans, sans-serif);
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Bar row (always visible) ─── */
@@ -968,13 +1099,13 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
     cursor: pointer;
     line-height: 0;
   }
 
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f3f5);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .mobile-toggle:focus-visible {
@@ -996,12 +1127,12 @@
     width: 100%;
     padding-block: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   .nav__collapsible--open {
     display: flex;
-    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;
   }
 
   /* ─── Menu and actions in collapsible (mobile) ─── */
@@ -1018,7 +1149,7 @@
     margin-top: var(--hx-space-3, 0.75rem);
     padding-top: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   /* ─── Desktop breakpoint ─── */
@@ -1107,6 +1238,27 @@
       animation: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .nav {
+      border-bottom-color: CanvasText;
+    }
+
+    .mobile-toggle {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .nav__collapsible {
+      border-top-color: CanvasText;
+    }
+
+    .nav__actions {
+      border-top-color: CanvasText;
+    }
+  }
 /* ── hx-tree-view ── */
 :host {
     display: block;
@@ -1128,4 +1280,13 @@
       var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tree:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
   }