@vakwerk/navigation 0.0.0-stage → 0.0.0

package/src/navigation.css

@@ -0,0 +1,461 @@
+/*
+ * @vakwerk/navigation
+ *
+ * Public theming surface: the --ui-nav-* custom properties, set anywhere above or on the host.
+ * Each falls back to a semantic token of @vakwerk/tokens and then to a system colour, so the
+ * component follows a vakwerk theme and still works on its own. The --_nav-* properties are
+ * internal; set the public ones instead.
+ *
+ * Submenu visibility follows aria-expanded only, and every enhanced rule is gated on
+ * [data-enhanced], so without JavaScript the navigation is a plain nested list.
+ */
+/* Registered as a length, so a unitless 0 parses as 0px and the 4px floor below still applies.
+   The var() fallback below covers browsers without @property. */
+@property --ui-nav-toggle-gap {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 4px;
+}
+
+@layer ui.navigation {
+  :is(ui-navigation, .ui-nav) {
+    --_nav-color: var(--ui-nav-color, var(--color-text-high, CanvasText));
+    --_nav-bg: var(--ui-nav-bg, var(--color-bg-app, Canvas));
+    --_nav-border: var(--ui-nav-border, var(--color-border-subtle, GrayText));
+    --_nav-hover-bg: var(--ui-nav-hover-bg, var(--color-bg-ui-hover, transparent));
+    --_nav-current: var(--ui-nav-current, var(--color-link, LinkText));
+    --_nav-focus: var(--ui-nav-focus, var(--color-focus-ring, Highlight));
+    --_nav-backdrop: var(--ui-nav-backdrop, var(--color-overlay, color-mix(in srgb, CanvasText 50%, transparent)));
+    --_nav-font-size: var(--ui-nav-font-size, 1rem);
+    --_nav-panel-font-size: var(--ui-nav-panel-font-size, 1.125rem);
+    --_nav-item-gap: var(--ui-nav-item-gap, 0px);
+    --_nav-item-pad-block: var(--ui-nav-item-pad-block, 4px);
+    --_nav-item-pad-inline: var(--ui-nav-item-pad-inline, 8px);
+    --_nav-indent: var(--ui-nav-indent, 16px);
+    --_nav-dropdown-pad: var(--ui-nav-dropdown-pad, 4px);
+    --_nav-dropdown-item-pad-inline: var(--ui-nav-dropdown-item-pad-inline, 8px);
+    --_nav-button-pad-inline: var(--ui-nav-button-pad-inline, 12px);
+    --_nav-panel-pad: var(--ui-nav-panel-pad, 16px);
+    --_nav-panel-gap: var(--ui-nav-panel-gap, 8px);
+    --_nav-group-font-size: var(--ui-nav-group-font-size, 1em);
+    --_nav-group-color: var(--ui-nav-group-color, currentColor);
+    --_nav-group-text-transform: var(--ui-nav-group-text-transform, none);
+    --_nav-group-letter-spacing: var(--ui-nav-group-letter-spacing, normal);
+    --_nav-group-divider: var(--ui-nav-group-divider, none);
+    --_nav-group-pad-block-start: var(--ui-nav-group-pad-block-start, var(--_nav-item-pad-block));
+    /* A focus ring reaches 4px beyond a link or toggle (2px outline at 2px offset), so never less. */
+    --_nav-toggle-gap: max(4px, var(--ui-nav-toggle-gap, 4px));
+    /* Not themeable: the padding of the toggles, menu and close buttons; a label toggle's end padding matches it so chevrons line up. */
+    --_nav-control-pad: 4px;
+    --_nav-radius: var(--ui-nav-radius, var(--radius-md, 6px));
+    --_nav-dropdown-width: var(--ui-nav-dropdown-width, 16rem);
+    --_nav-panel-width: var(--ui-nav-panel-width, min(24rem, 100vw));
+    --_nav-gutter: var(--ui-nav-gutter, 16px);
+    --_nav-z: var(--ui-nav-z, 100);
+    --_nav-duration: var(--ui-nav-duration, var(--duration-normal, 200ms));
+
+    display: block;
+    color: var(--_nav-color);
+    font-size: var(--_nav-font-size);
+  }
+
+  /* Base: also the layout without JavaScript. */
+
+  :is(ui-navigation, .ui-nav) nav :is(ul, li) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :is(ui-navigation, .ui-nav) nav > ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 4px var(--_nav-item-gap);
+  }
+
+  :is(ui-navigation, .ui-nav) nav ul ul {
+    padding-inline-start: var(--_nav-indent);
+  }
+
+  :is(ui-navigation, .ui-nav) nav a,
+  :is(ui-navigation, .ui-nav) nav li > span {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 24px;
+    padding-block: var(--_nav-item-pad-block);
+    padding-inline: var(--_nav-item-pad-inline);
+    color: inherit;
+    text-decoration-line: none;
+  }
+
+  :is(ui-navigation, .ui-nav) nav a:hover {
+    text-decoration-line: underline;
+  }
+
+  :is(ui-navigation, .ui-nav) nav [aria-current='page'] {
+    font-weight: 600;
+    color: var(--_nav-current);
+    text-decoration-line: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  /* A parent of the current page: a dotted underline on its label. */
+  :is(ui-navigation, .ui-nav) nav li:has(ul [aria-current='page']) > :is(a, span, .ui-nav__toggle--label) {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 0.2em;
+  }
+
+  :is(ui-navigation, .ui-nav) :is(a, button):focus-visible {
+    outline: 2px solid var(--_nav-focus);
+    outline-offset: 2px;
+  }
+
+  /* Below the default breakpoint the top level stacks. Hosts with another breakpoint override this. */
+  @media (max-width: 767.98px) {
+    :is(ui-navigation, .ui-nav):not([data-enhanced]) nav > ul {
+      flex-direction: column;
+    }
+  }
+
+  /*
+   * While JavaScript is on but the script has not enhanced the navigation yet, only the top level
+   * shows, so a slow first load does not flash the whole nested list. Without JavaScript the
+   * nested list stays. If the script fails to load, links under a label without a page stay hidden.
+   */
+  @media (scripting: enabled) {
+    :is(ui-navigation, .ui-nav):not([data-enhanced], [submenu-visibility='always'], [data-submenu-visibility='always']) nav ul ul {
+      display: none;
+    }
+  }
+
+  /*
+   * A group: a label without a page below the top level. Its heading is bold, and its links stay
+   * in line with the heading instead of indenting under it. --ui-nav-group-divider draws a line
+   * above each group that follows another item, so a submenu never starts with a double edge.
+   */
+  :is(ui-navigation, .ui-nav)[data-enhanced] nav ul ul li > span {
+    font-size: var(--_nav-group-font-size);
+    font-weight: 600;
+    color: var(--_nav-group-color);
+    text-transform: var(--_nav-group-text-transform);
+    letter-spacing: var(--_nav-group-letter-spacing);
+    /* The space beyond the item padding is a margin, so it counts once whatever the box sizing. */
+    margin-block-start: calc(var(--_nav-group-pad-block-start) - var(--_nav-item-pad-block));
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] nav ul ul li + li:has(> span) {
+    border-block-start: var(--_nav-group-divider);
+  }
+
+  /* A heading is not a link, so it never takes the dotted marker of a parent of the current page. */
+  :is(ui-navigation, .ui-nav)[data-enhanced] nav ul ul li:has(ul [aria-current='page']) > span {
+    text-decoration-line: none;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] nav ul ul li:has(> span) > ul {
+    padding-inline-start: 0;
+  }
+
+  /* Enhanced: shared controls. */
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] :is(.ui-nav__toggle, .ui-nav__menu-button, .ui-nav__close) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-inline-size: 24px;
+    min-block-size: 24px;
+    margin: 0;
+    padding: var(--_nav-control-pad);
+    /* Invisible normally; under forced colours it becomes the button's outline. */
+    border: 1px solid transparent;
+    border-radius: var(--_nav-radius);
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] :is(.ui-nav__toggle, .ui-nav__menu-button, .ui-nav__close, a):hover {
+    background: var(--_nav-hover-bg);
+  }
+
+  /* A label toggle reads as a menu item: its text starts where the links' text does, also when it fills a row. */
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__toggle--label {
+    justify-content: flex-start;
+    padding-inline: var(--_nav-item-pad-inline) var(--_nav-control-pad);
+  }
+
+  /* When a label toggle fills a row, its chevron sits at the row's end, in line with a split toggle's (same end padding). */
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__toggle--label .ui-nav__chevron {
+    margin-inline-start: auto;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__chevron {
+    inline-size: 1em;
+    block-size: 1em;
+    flex: none;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__toggle[aria-expanded='true'] .ui-nav__chevron {
+    rotate: 180deg;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__toggle[aria-expanded='false'] ~ ul {
+    display: none;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Enhanced inline. */
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] .ui-nav__menu-button {
+    display: none;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav > ul {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-justify='center'] nav > ul {
+    justify-content: center;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-justify='end'] nav > ul {
+    justify-content: flex-end;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-justify='space-between'] nav > ul {
+    justify-content: space-between;
+  }
+
+  /* The column gap leaves room for a toggle's focus ring (2px at a 2px offset) next to its link. */
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav > ul > li {
+    position: relative;
+    display: flex;
+    align-items: center;
+    column-gap: var(--_nav-toggle-gap);
+  }
+
+  /*
+   * A parent with a toggle is one item in the bar: the item padding goes before its label and
+   * after its chevron, so the chevron sits by its own label and the next item keeps its distance.
+   */
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav > ul > li > a:has(+ .ui-nav__toggle) {
+    padding-inline-end: 0;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav > ul > li > .ui-nav__toggle {
+    padding-inline-end: var(--_nav-item-pad-inline);
+  }
+
+  /* Dropdowns: float below their item. */
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline']:not([data-submenus='always']) nav > ul > li > ul {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    z-index: var(--_nav-z);
+    inline-size: max-content;
+    min-inline-size: 12rem;
+    max-inline-size: min(var(--_nav-dropdown-width), 100vw - 2 * var(--_nav-gutter));
+    margin-block-start: 4px;
+    padding: var(--_nav-dropdown-pad);
+    border: 1px solid var(--_nav-border);
+    border-radius: var(--_nav-radius);
+    background: var(--_nav-bg);
+    box-shadow: 0 4px 12px color-mix(in srgb, CanvasText 15%, transparent);
+  }
+
+  /* Links in a dropdown fill their row, so the hover background, focus ring and click target span it. */
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline']:not([data-submenus='always'])
+    nav > ul > li > ul :is(a, li > span) {
+    flex: 1 1 auto;
+    padding-inline: var(--_nav-dropdown-item-pad-inline);
+    border-radius: var(--_nav-radius);
+  }
+
+  /* Edge overflow: the last two top-level items (from the third on) open their dropdown to the inline end. */
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline']:not([data-submenus='always'])
+    nav > ul > li:nth-last-child(-n + 2):nth-child(n + 3) > ul {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  /* Inside a dropdown, and for "always": submenus expand in the flow, indented. */
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav ul ul li,
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'][data-submenus='always'] nav > ul > li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--_nav-toggle-gap);
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav ul ul li > ul,
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'][data-submenus='always'] nav > ul > li > ul {
+    flex-basis: 100%;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'][data-submenus='always'] nav > ul {
+    align-items: flex-start;
+  }
+
+  /* Enhanced overlay. */
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='overlay'] .ui-nav__menu-button,
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel :is(a, button, li > span) {
+    min-block-size: 44px;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='overlay'] .ui-nav__menu-button {
+    padding-inline: var(--_nav-button-pad-inline);
+    border: 1px solid var(--_nav-border);
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel {
+    box-sizing: border-box;
+    inset-block: 0;
+    inset-inline: auto 0;
+    inline-size: var(--_nav-panel-width);
+    max-inline-size: 100vw;
+    block-size: 100dvh;
+    max-block-size: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-inline-start: 1px solid var(--_nav-border);
+    background: var(--_nav-bg);
+    color: var(--_nav-color);
+    font-size: var(--_nav-panel-font-size);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel::backdrop {
+    background: var(--_nav-backdrop);
+    overflow: hidden;
+    overscroll-behavior: contain;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel-inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_nav-panel-gap);
+    padding-block: max(var(--_nav-panel-pad), env(safe-area-inset-top)) max(var(--_nav-panel-pad), env(safe-area-inset-bottom));
+    padding-inline: max(var(--_nav-panel-pad), env(safe-area-inset-left)) max(var(--_nav-panel-pad), env(safe-area-inset-right));
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__close {
+    align-self: flex-end;
+    padding-inline: var(--_nav-button-pad-inline);
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel-inner > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--_nav-toggle-gap);
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel li > :is(a, span, .ui-nav__toggle--label) {
+    flex: 1;
+  }
+
+  :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel li > ul {
+    flex-basis: 100%;
+  }
+
+  /* While the overlay is open the page does not scroll; the gutter keeps the layout from shifting. */
+  :root:has(.ui-nav__panel[open]) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+  }
+
+  /* Motion, only without a reduced-motion preference. */
+  @media (prefers-reduced-motion: no-preference) {
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__chevron {
+      transition: rotate var(--_nav-duration);
+    }
+
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel {
+      opacity: 0;
+      translate: 100% 0;
+      transition:
+        opacity var(--_nav-duration),
+        translate var(--_nav-duration),
+        display var(--_nav-duration),
+        overlay var(--_nav-duration);
+      transition-behavior: allow-discrete;
+    }
+
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel:dir(rtl) {
+      translate: -100% 0;
+    }
+
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel[open] {
+      opacity: 1;
+      translate: 0 0;
+    }
+
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel::backdrop {
+      opacity: 0;
+      transition:
+        opacity var(--_nav-duration),
+        display var(--_nav-duration),
+        overlay var(--_nav-duration);
+      transition-behavior: allow-discrete;
+    }
+
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel[open] {
+        opacity: 0;
+        translate: 100% 0;
+      }
+
+      :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel[open]:dir(rtl) {
+        translate: -100% 0;
+      }
+
+      :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel[open]::backdrop {
+        opacity: 0;
+      }
+    }
+  }
+
+  /* Forced colours: states keep a non-colour cue and the panel gets a full border. */
+  @media (forced-colors: active) {
+    :is(ui-navigation, .ui-nav)[data-enhanced] .ui-nav__panel {
+      border: 1px solid CanvasText;
+    }
+
+    :is(ui-navigation, .ui-nav)[data-enhanced][data-mode='inline'] nav > ul > li > ul {
+      border-color: CanvasText;
+    }
+
+    :is(ui-navigation, .ui-nav) :is(a, button):focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}