@24vlh/vds 0.1.0

package/dist/components/navigation.css

@@ -0,0 +1,900 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Navigation
+ *
+ *  Responsibilities:
+ *    - Provide the entire navigation architecture: primary/secondary nav,
+ *      mobile nav, vertical nav, sidebar, pills, tabs, pagination,
+ *      breadcrumbs, toolbars, and announcement bars
+ *    - Define interactive states: hover, active, disabled, focus-visible,
+ *      depth indentation, collapsed/expanded sections
+ *    - Expose brand/logo slots and action areas for headers & sidebars
+ *    - Supply panel + backdrop patterns for mobile overlay navigation
+ *
+ *  System Notes:
+ *    - Fully token-driven: spacing, radii, borders, colours, z-index, motion
+ *    - Pure CSS; JS only toggles `.nav-panel--open` and `.nav-backdrop--visible`
+ *    - Safe namespacing: can embed in header/footer/sidebars without collisions
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. CORE NAV PRIMITIVES
+--------------------------------------------------------- */
+
+.nav {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+}
+
+.nav__item,
+.nav__link {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    font-size: var(--text-sm);
+    color: var(--color-text);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+
+    padding: var(--space-1) 0;
+    gap: var(--space-2);
+
+    cursor: pointer;
+
+    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.nav__item:hover,
+.nav__link:hover {
+    color: var(--color-text-muted);
+}
+
+.nav__item:active,
+.nav__link:active {
+    color: var(--color-text);
+    background-color: var(--color-surface-subtle);
+}
+
+.nav__item:focus-visible,
+.nav__link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+    border-radius: var(--radius-sm);
+}
+
+.nav__item--active,
+.nav__link--active,
+.nav__item--active:hover,
+.nav__link--active:hover {
+    font-weight: 600;
+    color: var(--link-text-hover);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+}
+
+.nav__item--disabled,
+.nav__link--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.nav__item svg,
+.nav__link svg {
+    width: 1em;
+    height: 1em;
+    stroke: currentColor;
+    fill: currentColor;
+}
+
+.nav--a .nav__item,
+.nav--a .nav__link {
+    padding: var(--space-2) var(--space-2);
+}
+
+.nav--b .nav__item,
+.nav--b .nav__link {
+    padding: var(--space-1) var(--space-1);
+}
+
+.nav--c .nav__item,
+.nav--c .nav__link {
+    padding: 0 var(--space-1);
+    font-size: var(--text-xs);
+    gap: var(--space-1);
+}
+
+.nav--c .nav__item svg,
+.nav--c .nav__link svg {
+    width: 0.875em;
+    height: 0.875em;
+}
+
+.nav-section {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-6);
+}
+
+/* ---------------------------------------------------------
+   2. BRAND / LOGO / ACTION SLOTS
+--------------------------------------------------------- */
+
+.nav__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.nav__brand--compact {
+    gap: var(--space-2);
+}
+
+.nav__logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav__logo .logo {
+    padding: 0;
+}
+
+.nav__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   3. NAV TOGGLE (MOBILE HAMBURGER)
+--------------------------------------------------------- */
+
+.nav__toggle {
+    display: none;
+    cursor: pointer;
+    padding: var(--space-2);
+    border-radius: var(--radius-sm);
+
+    color: var(--color-text);
+    background-color: transparent;
+    border: var(--border-width) solid transparent;
+
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.nav__toggle svg {
+    width: 24px;
+    height: 24px;
+    stroke: currentColor;
+}
+
+.nav__toggle:hover {
+    background-color: var(--color-surface-subtle);
+    border-color: var(--color-border-subtle);
+}
+
+.nav__toggle:active {
+    background-color: var(--color-muted-bg);
+}
+
+.nav__toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+.nav__toggle--active {
+    background-color: var(--color-accent-soft);
+    border-color: var(--color-accent);
+    color: var(--color-text);
+}
+
+/* ---------------------------------------------------------
+   4. HORIZONTAL / PRIMARY NAV
+--------------------------------------------------------- */
+
+.nav--primary {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+}
+
+.nav--primary .nav__item,
+.nav--primary .nav__link {
+    padding: var(--space-2) var(--space-2);
+    border-radius: var(--radius-sm);
+}
+
+.nav--primary .nav__item:hover,
+.nav--primary .nav__link:hover {
+    background-color: var(--color-surface-subtle);
+}
+
+.nav--primary .nav__item--active,
+.nav--primary .nav__link--active {
+    background-color: var(--color-accent-soft);
+    color: var(--color-text);
+}
+
+/* ---------------------------------------------------------
+   5. SUB NAV (TABS) + PILL NAV
+--------------------------------------------------------- */
+
+.nav--sub {
+    display: flex;
+    gap: var(--space-6);
+    border-bottom: var(--border-width) solid var(--color-border-subtle);
+    padding-bottom: var(--space-2);
+    margin-bottom: var(--space-8);
+}
+
+.nav--sub .nav__item,
+.nav--sub .nav__link {
+    padding-bottom: var(--space-2);
+}
+
+.nav--sub .nav__item--active::after,
+.nav--sub .nav__link--active::after {
+    content: "";
+    position: absolute;
+    bottom: calc(var(--border-width) * -1);
+    left: 0;
+    height: var(--tab-indicator-height);
+    width: 100%;
+    background-color: var(--color-accent);
+}
+
+.nav--sub .nav__item--disabled,
+.nav--sub .nav__link--disabled {
+    opacity: 0.45;
+    pointer-events: none;
+}
+
+.nav--sub .nav__item:focus-visible,
+.nav--sub .nav__link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+    border-radius: var(--radius-sm);
+}
+
+.nav--pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.nav--pills .nav__item,
+.nav--pills .nav__link {
+    padding: var(--space-1) var(--space-3);
+    border-radius: 999px;
+    border: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-surface);
+    font-size: var(--text-xs);
+}
+
+.nav--pills .nav__item:hover,
+.nav--pills .nav__link:hover {
+    background-color: var(--color-surface-subtle);
+    border-color: var(--color-border-subtle);
+}
+
+.nav--pills .nav__item--active,
+.nav--pills .nav__link--active {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent-soft);
+    color: var(--color-text);
+}
+
+.nav--pills .nav__item--disabled,
+.nav--pills .nav__link--disabled {
+    opacity: 0.45;
+    pointer-events: none;
+}
+
+.nav--pills .nav__item:focus-visible,
+.nav--pills .nav__link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+/* ---------------------------------------------------------
+   6. VERTICAL NAV + SIDEBAR
+--------------------------------------------------------- */
+
+.nav--vertical {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.nav--vertical .nav__item,
+.nav--vertical .nav__link {
+    padding: var(--space-1) 0;
+}
+
+.nav--vertical .nav__item--depth-2,
+.nav--vertical .nav__link--depth-2 {
+    padding-left: var(--space-4);
+}
+
+.nav--vertical .nav__item--depth-3,
+.nav--vertical .nav__link--depth-3 {
+    padding-left: var(--space-6);
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+}
+
+.sidebar__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.sidebar__section--collapsible .sidebar__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    cursor: pointer;
+}
+
+.sidebar__section-title {
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-muted);
+}
+
+.sidebar__section-toggle-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s ease;
+}
+
+.sidebar__section--expanded .sidebar__section-toggle-icon {
+    transform: rotate(90deg);
+}
+
+.sidebar__section--collapsed .sidebar__nav {
+    display: none;
+}
+
+.sidebar__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.sidebar__nav .nav__item,
+.sidebar__nav .nav__link {
+    font-size: var(--text-sm);
+    padding: var(--space-1) 0;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    color: var(--color-text);
+}
+
+.sidebar__nav .nav__item:hover,
+.sidebar__nav .nav__link:hover {
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text-muted);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+}
+
+.sidebar__nav .nav__item--active,
+.sidebar__nav .nav__link--active {
+    font-weight: 600;
+    color: var(--color-accent);
+}
+
+.sidebar__section--collapsible .sidebar__section-header {
+    cursor: pointer;
+}
+
+.sidebar__nav .nav__item:focus-visible,
+.sidebar__nav .nav__link:focus-visible {
+    outline: 2px solid var(--focus-ring-color, var(--color-accent-soft));
+    outline-offset: var(--space-1);
+}
+
+/* ---------------------------------------------------------
+   7. ANNOUNCEMENT BAR
+--------------------------------------------------------- */
+
+.announcement {
+    width: 100%;
+    background-color: var(--color-muted-bg);
+    color: var(--color-text-muted);
+    border-bottom: var(--border-width) solid var(--color-muted-border);
+    padding: var(--space-2) 0;
+}
+
+.announcement__inner {
+    max-width: var(--content-width-xl);
+    margin: 0 auto;
+    padding: 0 var(--space-6);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+}
+
+.announcement__content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.announcement__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm);
+}
+
+.announcement__text {
+    font-size: var(--text-xs);
+}
+
+.announcement__link {
+    font-size: var(--text-xs);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    color: var(--color-text);
+}
+
+.announcement__link:hover {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+}
+
+.announcement__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    border-radius: var(--radius-sm);
+    padding: var(--space-1);
+
+    border: var(--border-width) solid transparent;
+    background-color: transparent;
+
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.announcement__close:hover {
+    background-color: var(--color-surface-subtle);
+    border-color: var(--color-border-subtle);
+}
+
+.announcement__close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+.announcement--info {
+    background-color: var(--color-info-soft);
+    color: var(--color-info-strong);
+}
+
+.announcement--success {
+    background-color: var(--color-success-soft);
+    color: var(--color-success-strong);
+}
+
+.announcement--warning {
+    background-color: var(--color-warning-soft);
+    color: var(--color-warning-strong);
+}
+
+.announcement--danger {
+    background-color: var(--color-danger-soft);
+    color: var(--color-danger-strong);
+}
+
+/* ---------------------------------------------------------
+   8. BREADCRUMBS
+--------------------------------------------------------- */
+
+.breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    flex-wrap: wrap;
+}
+
+.breadcrumbs__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    max-width: 100%;
+}
+
+.breadcrumbs__link {
+    color: var(--color-text);
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    max-width: 16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.breadcrumbs__link:hover {
+    color: var(--color-text-muted);
+}
+
+.breadcrumbs__link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+    border-radius: var(--radius-sm);
+}
+
+.breadcrumbs__separator {
+    color: var(--color-text-soft);
+}
+
+/* ---------------------------------------------------------
+   9. PAGINATION
+--------------------------------------------------------- */
+
+.pagination {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-xs);
+}
+
+.pagination__item {
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 var(--space-2);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: var(--radius-sm);
+    border: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+
+    cursor: pointer;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.pagination__item:hover {
+    background-color: var(--color-surface-subtle);
+    border-color: var(--color-border-subtle);
+    color: var(--color-text);
+}
+
+.pagination__item:active {
+    background-color: var(--color-muted-bg);
+}
+
+.pagination__item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+.pagination__item--active {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent-soft);
+    color: var(--color-text);
+}
+
+.pagination__item--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.pagination__prev,
+.pagination__next {
+    min-width: auto;
+    padding: 0 var(--space-2);
+}
+
+.pagination__ellipsis {
+    min-width: auto;
+    border: none;
+    background-color: transparent;
+    cursor: default;
+}
+
+/* ---------------------------------------------------------
+   10. TOOLBAR
+--------------------------------------------------------- */
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    border: var(--border-width) solid var(--color-border-subtle);
+}
+
+.toolbar--dense {
+    padding: var(--space-2) var(--space-3);
+}
+
+.toolbar--spacious {
+    padding: var(--space-4) var(--space-5);
+}
+
+.toolbar__section {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.toolbar__title {
+    font-size: var(--text-sm);
+    font-weight: 500;
+}
+
+.toolbar__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   11. FOOTER NAV CONTEXT
+--------------------------------------------------------- */
+
+.footer .nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.footer .nav.nav--vertical {
+    align-items: flex-start;
+}
+
+.footer .nav__item,
+.footer .nav__link {
+    color: var(--color-footer-text);
+    opacity: 0.85;
+    font-size: var(--text-sm);
+    text-align: left;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.footer .nav__item:hover,
+.footer .nav__link:hover {
+    opacity: 1;
+}
+
+.footer .nav__item--active,
+.footer .nav__link--active {
+    opacity: 1;
+    font-weight: 500;
+}
+
+/* ---------------------------------------------------------
+   12. MOBILE NAV (OVERLAY / PANEL PATTERN)
+--------------------------------------------------------- */
+
+.nav-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    width: 18rem;
+    max-width: 100%;
+
+    background-color: var(--color-bg-elevated);
+    border-left: var(--border-width) solid var(--color-border-subtle);
+    box-shadow: var(--shadow-2);
+
+    transform: translateX(100%);
+    opacity: 0;
+    pointer-events: none;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-4);
+
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    z-index: 40;
+}
+
+.nav-panel--open {
+    transform: translateX(0);
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.nav-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--overlay-backdrop-default);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 30;
+}
+
+.nav-backdrop--visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.nav--mobile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+}
+
+.nav--mobile .nav__item,
+.nav--mobile .nav__link {
+    font-size: var(--text-md);
+    padding: var(--space-2) 0;
+}
+
+@media (max-width: 768px) {
+    .nav__toggle {
+        display: inline-flex;
+        align-items: center;
+    }
+}
+
+/* ---------------------------------------------------------
+   TABS (Standalone Component)
+--------------------------------------------------------- */
+
+.nav-tabs {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    border-bottom: var(--border-width) solid var(--color-border-subtle);
+    padding-bottom: var(--space-2);
+}
+
+.nav-tabs__item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    font-weight: 500;
+
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    color: var(--color-text);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+
+    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.nav-tabs__item:hover {
+    color: var(--color-text-muted);
+}
+
+.nav-tabs__item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+    border-radius: var(--radius-sm);
+}
+
+.nav-tabs__item--active,
+.nav-tabs__item[aria-selected="true"] {
+    color: var(--color-text);
+    font-weight: 600;
+}
+
+.nav-tabs__item--active::after,
+.nav-tabs__item[aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    bottom: calc(var(--border-width) * -1);
+    left: 0;
+    width: 100%;
+    height: var(--tab-indicator-height); /* already used in nav--sub */
+    background-color: var(--color-accent);
+}
+
+.nav-tabs__item--disabled,
+.nav-tabs__item[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.nav-tabs__item:hover:not(.nav-tabs__item--active):not([aria-selected="true"]) {
+    color: var(--color-text);
+    background-color: var(--color-surface-subtle);
+    border-radius: var(--radius-sm);
+}
+
+.nav-tabs--compact {
+    gap: var(--space-4);
+    padding-bottom: var(--space-1);
+}
+
+.nav-tabs--compact .nav-tabs__item {
+    padding: var(--space-0_5) 0;
+    font-size: var(--text-xs);
+}
+
+.nav-tabs__item {
+    gap: var(--space-2);
+}
+
+.nav-tabs__icon {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    flex-shrink: 0;
+}
+
+.nav-tabs__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 1.25rem;
+    height: 1.25rem;
+
+    padding-left: var(--space-1);
+
+    padding-right: var(--space-1);
+
+    background-color: var(--accent-soft-surface, var(--color-accent-soft));
+    color: var(--accent-soft-on, var(--color-on-accent));
+
+    font-size: var(--text-xs);
+    font-weight: 500;
+
+    border-radius: var(--radius-pill);
+
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.nav-tabs__item--active .nav-tabs__badge,
+.nav-tabs__item[aria-selected="true"] .nav-tabs__badge {
+    background-color: var(--accent-soft-surface-strong, var(--accent-soft-surface));
+    color: var(--accent-soft-on, var(--color-on-accent));
+}