@helixui/library 1.1.1 → 1.1.2-next.2

package/dist/css/helix-navigation.css

@@ -0,0 +1,1129 @@
+/* helix-navigation.css — 10 components */
+
+/* ── hx-breadcrumb ── */
+:host {
+    display: block;
+    font-family: var(
+      --hx-breadcrumb-font-family,
+      var(--hx-font-family-sans, system-ui, sans-serif)
+    );
+    font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));
+  }
+
+  [part='nav'] {
+    /* nav landmark — no additional styling needed */
+  }
+
+  [part='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+  }
+
+  /* Hide middle items when collapsed via maxItems */
+  ::slotted([data-bc-hidden]) {
+    display: none;
+  }
+
+  /* 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
+   * visibility:hidden + position:absolute to preserve focus reachability. */
+  .separator-slot {
+    display: none;
+  }
+/* ── hx-menu ── */
+:host {
+    display: block;
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    padding: var(--hx-space-1, 0.25rem);
+    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    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)
+    );
+    min-width: var(--hx-menu-min-width, 10rem);
+    outline: none;
+  }
+/* ── hx-nav ── */
+:host {
+    display: block;
+    font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Container ─── */
+
+  [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));
+    padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
+  }
+
+  /* ─── Hamburger Toggle ─── */
+
+  [part='toggle'] {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-2, 0.5rem);
+    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));
+    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));
+  }
+
+  [part='toggle']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Navigation List ─── */
+
+  [part='list'] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--hx-space-1, 0.25rem);
+    align-items: center;
+  }
+
+  /* ─── Nav Item ─── */
+
+  [part='item'] {
+    position: relative;
+  }
+
+  /* ─── Nav Link / Button ─── */
+
+  .nav__link {
+    display: inline-flex;
+    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));
+    text-decoration: none;
+    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-normal, 1.5);
+    white-space: nowrap;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+  }
+
+  .nav__link:hover {
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
+  }
+
+  .nav__link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .nav__link--active {
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
+    color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
+  }
+
+  /* ─── Chevron Icon ─── */
+
+  .nav__chevron {
+    transition: transform var(--hx-transition-normal, 200ms) ease;
+    flex-shrink: 0;
+  }
+
+  .nav__link--expanded .nav__chevron {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Submenu ─── */
+
+  .nav__submenu {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    min-width: var(--hx-nav-submenu-min-width, 12rem);
+    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));
+    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)
+    );
+    z-index: var(--hx-z-index-dropdown, 1000);
+  }
+
+  .nav__submenu[hidden] {
+    display: none;
+  }
+
+  .nav__submenu .nav__link {
+    display: block;
+    width: 100%;
+    text-align: start;
+    border-radius: 0;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Vertical / Sidebar Orientation ─── */
+
+  :host([orientation='vertical']) [part='nav'] {
+    padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);
+  }
+
+  :host([orientation='vertical']) [part='list'] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  :host([orientation='vertical']) .nav__link {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  :host([orientation='vertical']) .nav__submenu {
+    position: static;
+    box-shadow: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    padding-inline-start: var(--hx-space-4, 1rem);
+  }
+
+  :host([orientation='vertical']) .nav__submenu[hidden] {
+    display: none;
+  }
+
+  :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));
+  }
+
+  /* ─── Mobile Responsive ─── */
+
+  @media (max-width: 768px) {
+    [part='nav'] {
+      display: flex;
+      flex-direction: column;
+      padding: var(--hx-space-2, 0.5rem);
+    }
+
+    [part='toggle'] {
+      display: inline-flex;
+      align-self: flex-end;
+    }
+
+    [part='list'] {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+      margin-top: var(--hx-space-2, 0.5rem);
+      gap: var(--hx-space-1, 0.25rem);
+    }
+
+    [part='list'].nav__list--open {
+      display: flex;
+    }
+
+    [part='item'] {
+      width: 100%;
+    }
+
+    .nav__link {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .nav__submenu {
+      position: static;
+      box-shadow: none;
+      border-radius: 0;
+      padding-inline-start: var(--hx-space-4, 1rem);
+      background-color: transparent;
+    }
+
+    .nav__submenu .nav__link {
+      padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
+    }
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav__link,
+    .nav__chevron,
+    [part='toggle'] {
+      transition: none;
+      animation: none;
+    }
+  }
+/* ── hx-overflow-menu ── */
+:host {
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.4);
+  }
+
+  /* ─── Trigger Button ─── */
+
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    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));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .trigger:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-overflow-menu-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .trigger:hover:not([disabled]) {
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  .trigger--open {
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  /* ─── Size Variants ─── */
+
+  .trigger--sm {
+    width: var(--hx-size-8, 2rem);
+    height: var(--hx-size-8, 2rem);
+    min-width: var(--hx-size-touch-target, 2.75rem);
+    min-height: var(--hx-size-touch-target, 2.75rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .trigger--md {
+    width: var(--hx-size-10, 2.5rem);
+    height: var(--hx-size-10, 2.5rem);
+    min-width: var(--hx-size-touch-target, 2.75rem);
+    min-height: var(--hx-size-touch-target, 2.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  .trigger--lg {
+    width: var(--hx-size-12, 3rem);
+    height: var(--hx-size-12, 3rem);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+  }
+
+  /* ─── Panel ─── */
+
+  .panel {
+    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));
+    border-radius: var(
+      --hx-overflow-menu-panel-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
+    box-shadow: var(
+      --hx-overflow-menu-panel-shadow,
+      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))
+    );
+    padding: var(--hx-space-1, 0.25rem) 0;
+    outline: none;
+  }
+
+  /* ─── Slot: menu items ─── */
+
+  ::slotted([role='menuitem']),
+  ::slotted([role='menuitemcheckbox']),
+  ::slotted([role='menuitemradio']) {
+    display: block;
+    width: 100%;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    background: none;
+    border: none;
+    text-align: start;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-900, #111827);
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  ::slotted([role='menuitem']:hover),
+  ::slotted([role='menuitemcheckbox']:hover),
+  ::slotted([role='menuitemradio']:hover) {
+    background-color: var(--hx-color-neutral-50, #f9fafb);
+  }
+
+  ::slotted([role='menuitem']:focus-visible),
+  ::slotted([role='menuitemcheckbox']:focus-visible),
+  ::slotted([role='menuitemradio']:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-overflow-menu-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger {
+      transition: none;
+    }
+  }
+/* ── hx-pagination ── */
+:host {
+    display: block;
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .pagination-root {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-4, 1rem);
+    flex-wrap: wrap;
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .list {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-pagination-gap, var(--hx-space-1, 0.25rem));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .item {
+    display: flex;
+  }
+
+  .button {
+    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);
+    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));
+    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));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      border-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .button:hover:not(:disabled) {
+    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f3f4f6));
+    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .button[aria-current='page'] {
+    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(
+      --hx-pagination-active-border-color,
+      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
+    );
+    color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));
+    font-weight: var(--hx-font-weight-semibold, 600);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .button:disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  .ellipsis {
+    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));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    user-select: none;
+  }
+
+  .button[aria-disabled='true'] {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* Page size selector */
+  .page-size-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .page-size-label {
+    display: flex;
+    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);
+    white-space: nowrap;
+  }
+
+  .page-size-select {
+    height: var(--hx-pagination-button-size, 2.25rem);
+    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));
+    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));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    cursor: pointer;
+  }
+
+  .page-size-select:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* Visually hidden — used for aria-live status messages */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }
+
+  /* Windows High Contrast / forced-colors support */
+  @media (forced-colors: active) {
+    .button {
+      border: 1px solid ButtonText;
+      color: ButtonText;
+      background: ButtonFace;
+      forced-color-adjust: none;
+    }
+
+    .button:hover:not(:disabled) {
+      border-color: Highlight;
+      color: Highlight;
+    }
+
+    .button:focus-visible {
+      outline-color: Highlight;
+    }
+
+    .button[aria-current='page'] {
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    .button:disabled {
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    .button[aria-disabled='true'] {
+      color: GrayText;
+    }
+
+    .page-size-select {
+      border-color: ButtonText;
+      color: ButtonText;
+      background: ButtonFace;
+      forced-color-adjust: none;
+    }
+  }
+/* ── hx-side-nav ── */
+:host {
+    display: block;
+    height: 100%;
+    /* Mirror the nav background and text on the host so slotted light-DOM
+       content (header, footer slots) inherits the correct dark surface color.
+       Without this, axe-core cannot resolve the background for slotted nodes
+       and evaluates their text against the page white background, producing
+       false-positive color-contrast violations (WCAG 2.1 AA). */
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Container ─── */
+
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: var(--hx-side-nav-width, 16rem);
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    transition: width var(--hx-transition-normal, 300ms) ease;
+    overflow: hidden;
+    border-inline-end: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+  }
+
+  /* ─── Collapsed State ─── */
+
+  :host([collapsed]) .side-nav {
+    width: var(--hx-side-nav-collapsed-width, 3.5rem);
+  }
+
+  /* ─── Header ─── */
+
+  .side-nav__header {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-side-nav-header-padding, var(--hx-space-4, 1rem));
+    flex-shrink: 0;
+    min-height: var(--hx-space-14, 3.5rem);
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+    overflow: hidden;
+  }
+
+  :host([collapsed]) .side-nav__header {
+    justify-content: center;
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Body ─── */
+
+  .side-nav__body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--hx-space-2, 0.5rem) 0;
+  }
+
+  /* ─── Footer ─── */
+
+  .side-nav__footer {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-side-nav-footer-padding, var(--hx-space-4, 1rem));
+    flex-shrink: 0;
+    min-height: var(--hx-space-14, 3.5rem);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+    overflow: hidden;
+  }
+
+  :host([collapsed]) .side-nav__footer {
+    justify-content: center;
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Toggle Button ─── */
+
+  .side-nav__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-space-8, 2rem);
+    height: var(--hx-space-8, 2rem);
+    margin-inline-start: auto;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+  }
+
+  .side-nav__toggle:hover {
+    background-color: var(
+      --hx-overlay-white-10,
+      rgba(255, 255, 255, 0.1)
+    ); /* fallback for browsers without color-mix() */
+    color: var(--hx-color-neutral-100, #f1f5f9);
+  }
+
+  @supports (color: color-mix(in srgb, red 50%, blue)) {
+    .side-nav__toggle:hover {
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
+    }
+  }
+
+  .side-nav__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .side-nav__toggle svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+    flex-shrink: 0;
+    transition: transform var(--hx-transition-normal, 300ms) ease;
+  }
+
+  :host([collapsed]) .side-nav__toggle svg {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .side-nav {
+      transition: none;
+    }
+
+    .side-nav__toggle {
+      transition: none;
+    }
+
+    .side-nav__toggle svg {
+      transition: none;
+    }
+  }
+/* ── hx-steps ── */
+:host {
+    display: block;
+
+    /* ─── Size defaults (md) ─── */
+    --hx-steps-indicator-size: var(--hx-size-8, 2rem);
+    --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-steps-indicator-icon-size: var(--hx-size-4, 1rem);
+    --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
+
+    /* ─── Item layout defaults (horizontal) ─── */
+    --hx-steps-item-flex: 1;
+    --hx-steps-item-width: auto;
+  }
+
+  .steps {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  /* ─── Orientation: vertical ─── */
+
+  :host([orientation='vertical']) {
+    --hx-steps-item-flex: initial;
+    --hx-steps-item-width: 100%;
+  }
+
+  :host([orientation='vertical']) .steps {
+    flex-direction: column;
+  }
+
+  /* ─── Size: sm ─── */
+
+  :host([size='sm']) {
+    --hx-steps-indicator-size: var(--hx-size-6, 1.5rem);
+    --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-steps-indicator-icon-size: var(--hx-space-3, 0.75rem);
+    --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  /* ─── Size: lg ─── */
+
+  :host([size='lg']) {
+    --hx-steps-indicator-size: var(--hx-size-10, 2.5rem);
+    --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);
+    --hx-steps-indicator-icon-size: var(--hx-size-5, 1.25rem);
+    --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
+    --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+/* ── hx-tabs ── */
+:host {
+    display: block;
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Container ─── */
+
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-tabs-gap, 0);
+  }
+
+  :host([orientation='vertical']) .tabs {
+    flex-direction: row;
+  }
+
+  /* ─── Tablist ─── */
+
+  .tablist {
+    display: flex;
+    flex-direction: row;
+    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));
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tablist::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ─── Vertical Orientation ─── */
+
+  :host([orientation='vertical']) {
+    --_tab-indicator-bottom: 0px;
+    --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);
+    --_tab-indicator-bottom-color: transparent;
+    --_tab-indicator-end-color: var(
+      --hx-tabs-indicator-color,
+      var(--hx-color-primary-500, #2563eb)
+    );
+  }
+
+  :host([orientation='vertical']) .tablist {
+    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));
+    overflow-x: visible;
+    overflow-y: auto;
+    min-width: var(--hx-tabs-vertical-width, 12rem);
+    flex-shrink: 0;
+  }
+
+  /* ─── Panels Container ─── */
+
+  .panels {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .tablist {
+      scroll-behavior: auto;
+    }
+  }
+/* ── hx-top-nav ── */
+/* ─── Host ─── */
+
+  :host {
+    display: block;
+  }
+
+  /* ─── Header wrapper (landmark) ─── */
+
+  header {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ─── Sticky mode ─── */
+
+  :host([sticky]) .nav {
+    position: sticky;
+    top: 0;
+    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */
+    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));
+  }
+
+  /* ─── Nav container ─── */
+
+  .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));
+    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);
+  }
+
+  /* ─── Bar row (always visible) ─── */
+
+  .nav__bar {
+    display: flex;
+    align-items: center;
+    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));
+    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Logo ─── */
+
+  .nav__logo {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* ─── Mobile toggle (hamburger) ─── */
+
+  .mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: auto;
+    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */
+    padding: var(--hx-space-3, 0.75rem);
+    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));
+    cursor: pointer;
+    line-height: 0;
+  }
+
+  .mobile-toggle:hover {
+    background: var(--hx-color-neutral-100, #f1f3f5);
+  }
+
+  .mobile-toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .mobile-toggle__icon {
+    width: var(--hx-space-6, 1.5rem);
+    height: var(--hx-space-6, 1.5rem);
+  }
+
+  /* ─── Collapsible panel (mobile) ─── */
+
+  .nav__collapsible {
+    display: none;
+    flex-direction: column;
+    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));
+  }
+
+  .nav__collapsible--open {
+    display: flex;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+  }
+
+  /* ─── Menu and actions in collapsible (mobile) ─── */
+
+  .nav__menu,
+  .nav__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));
+  }
+
+  .nav__actions {
+    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));
+  }
+
+  /* ─── Desktop breakpoint ─── */
+
+  /* NOTE: CSS @media queries do not support custom properties.
+     This value corresponds to --hx-breakpoint-md (768px). */
+  @media (min-width: 768px) {
+    /* Make nav a flex row so bar and collapsible sit side-by-side */
+    .nav {
+      display: flex;
+      align-items: center;
+      padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));
+    }
+
+    .nav__bar {
+      flex-shrink: 0;
+      padding-inline: 0;
+      min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));
+    }
+
+    /* Hide hamburger on desktop */
+    .mobile-toggle {
+      display: none;
+    }
+
+    /* Collapsible becomes a standard inline flex row */
+    .nav__collapsible {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex: 1;
+      padding-block: 0;
+      border-top: none;
+      margin-inline-start: auto;
+      gap: var(--hx-space-4, 1rem);
+      animation: none;
+    }
+
+    /* Override open modifier — always visible on desktop regardless of state */
+    .nav__collapsible--open {
+      display: flex;
+      animation: none;
+    }
+
+    /* Menu grows to fill available space */
+    .nav__menu {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--hx-space-1, 0.25rem);
+      flex: 1;
+      padding-inline: 0;
+    }
+
+    /* Actions sit at the far right */
+    .nav__actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--hx-space-2, 0.5rem);
+      margin-top: 0;
+      padding-top: 0;
+      padding-inline: 0;
+      border-top: none;
+      flex-shrink: 0;
+    }
+  }
+
+  /* ─── Mobile menu open animation ─── */
+
+  @keyframes hx-mobile-nav-open {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ─── Reduced motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav__collapsible--open {
+      animation: none;
+    }
+  }
+/* ── hx-tree-view ── */
+:host {
+    display: block;
+    contain: layout style;
+    font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .tree {
+    display: block;
+    outline: none;
+  }
+
+  .tree:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      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);
+  }