@db-vincent/components 0.0.0-stage → 0.1.1

package/src/styles/navbar.css

@@ -0,0 +1,658 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  /* The bar is a query container: it collapses by its own width, so it works
+     the same as a page header, inside a split view or in a demo frame. */
+  /* No surface at rest: the bar is just its content on the page. Once a
+     sticky bar has content scrolling under it, it gains a light tint that
+     blurs what passes beneath, so the row stays legible without becoming a
+     slab. This is the one sanctioned blur in the system (AGENTS.md). */
+  .ds-navbar {
+    background-color: transparent;
+    container: ds-navbar / inline-size;
+    position: relative;
+    transition:
+      background-color var(--duration-base) var(--ease-standard),
+      backdrop-filter var(--duration-base) var(--ease-standard),
+      -webkit-backdrop-filter var(--duration-base) var(--ease-standard);
+  }
+
+  .ds-navbar[data-scrolled="true"] {
+    -webkit-backdrop-filter: blur(var(--navbar-blur)) saturate(1.4);
+    backdrop-filter: blur(var(--navbar-blur)) saturate(1.4);
+    background-color: color-mix(
+      in srgb,
+      var(--navbar-bg) var(--navbar-tint),
+      transparent
+    );
+  }
+
+  /* Without backdrop-filter support the tint goes opaque instead. */
+  @supports not (
+    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+  ) {
+    .ds-navbar[data-scrolled="true"] {
+      background-color: var(--navbar-bg);
+    }
+  }
+
+  .ds-navbar--sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+  }
+
+  /* An open panel lifts its bar above later bars and sticky surfaces. */
+  .ds-navbar:has(.ds-navbar__viewport:not([hidden])) {
+    z-index: var(--z-popover);
+  }
+
+  .ds-navbar__inner {
+    align-items: center;
+    display: flex;
+    gap: var(--navbar-gap);
+    min-height: var(--navbar-height);
+    padding-inline: var(--navbar-padding-x);
+  }
+
+  /* Brand ------------------------------------------------------------------ */
+  .ds-navbar__brand {
+    align-items: center;
+    border-radius: var(--navbar-link-radius);
+    color: var(--navbar-brand-fg);
+    display: inline-flex;
+    flex: none;
+    font-size: var(--navbar-brand-size);
+    font-weight: var(--weight-semibold);
+    gap: var(--space-2-5);
+    letter-spacing: var(--type-heading-tracking);
+    text-decoration: none;
+  }
+
+  .ds-navbar__mark {
+    align-items: center;
+    background: var(--navbar-brand-mark-bg);
+    border-radius: var(--radius-md);
+    color: var(--navbar-brand-mark-fg);
+    display: inline-flex;
+    height: var(--space-8);
+    justify-content: center;
+    width: var(--space-8);
+  }
+
+  .ds-navbar__start {
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ds-navbar__start:empty {
+    display: none;
+  }
+
+  .ds-navbar__actions {
+    align-items: center;
+    display: flex;
+    flex: none;
+    gap: var(--space-1);
+    margin-inline-start: auto;
+  }
+
+  .ds-navbar__actions:empty {
+    display: none;
+  }
+
+  /* Row of triggers and links --------------------------------------------- */
+  .ds-navbar__nav {
+    position: relative;
+  }
+
+  .ds-navbar__list {
+    align-items: center;
+    display: flex;
+    gap: var(--space-0-5);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-navbar__trigger {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--navbar-link-radius);
+    color: var(--navbar-link-fg);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: var(--navbar-link-size);
+    font-weight: var(--weight-medium);
+    gap: var(--navbar-link-gap);
+    height: var(--navbar-link-height);
+    padding-inline: var(--navbar-link-padding-x);
+    position: relative;
+    text-decoration: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard);
+    white-space: nowrap;
+  }
+
+  .ds-navbar__trigger:hover,
+  .ds-navbar__trigger[aria-expanded="true"] {
+    background: var(--navbar-link-bg-hover);
+    color: var(--navbar-link-fg-hover);
+  }
+
+  .ds-navbar__trigger[aria-expanded="true"] {
+    background: var(--navbar-link-bg-open);
+  }
+
+  /* Current destination: the same tinted fill the sidebar uses for its
+     current item, so "you are here" reads the same everywhere. */
+  .ds-navbar__trigger[aria-current="page"],
+  .ds-navbar__trigger.is-current {
+    background: var(--navbar-link-bg-current);
+    color: var(--navbar-link-fg-current);
+  }
+
+  .ds-navbar__trigger[aria-current="page"]:hover,
+  .ds-navbar__trigger.is-current:hover,
+  .ds-navbar__trigger.is-current[aria-expanded="true"] {
+    background: var(--navbar-link-bg-current-hover);
+  }
+
+  .ds-navbar__trigger[aria-current="page"] .ds-icon:not(.ds-navbar__chevron),
+  .ds-navbar__trigger.is-current .ds-icon:not(.ds-navbar__chevron) {
+    color: var(--navbar-current-icon-fg);
+  }
+
+  .ds-navbar__chevron {
+    color: var(--navbar-row-icon-fg);
+    transition: transform var(--duration-base) var(--ease-standard);
+  }
+
+  [aria-expanded="true"] > .ds-navbar__chevron,
+  .ds-navbar__disclosure[open] > summary .ds-navbar__chevron {
+    transform: rotate(180deg);
+  }
+
+  /* Shared viewport -------------------------------------------------------- */
+  .ds-navbar__viewport {
+    background: var(--navbar-viewport-bg);
+    border: 1px solid var(--navbar-viewport-border);
+    border-radius: var(--navbar-viewport-radius);
+    box-shadow: var(--navbar-viewport-shadow);
+    height: var(--ds-navbar-viewport-h, auto);
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: calc(100% + var(--navbar-viewport-offset));
+    transform: translateX(var(--ds-navbar-viewport-x, 0));
+    transition:
+      transform var(--duration-slow) var(--ease-standard),
+      width var(--duration-slow) var(--ease-standard),
+      height var(--duration-slow) var(--ease-standard);
+    width: var(--ds-navbar-viewport-w, auto);
+  }
+
+  .ds-navbar__viewport[hidden] {
+    display: none;
+  }
+
+  .ds-navbar__viewport[data-instant="true"] {
+    animation: ds-navbar-viewport-in var(--duration-base) var(--ease-enter);
+    transition: none;
+  }
+
+  .ds-navbar__panel {
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+  .ds-navbar__panel:not([hidden]) {
+    animation: ds-navbar-panel-in var(--duration-base) var(--ease-enter);
+    display: grid;
+    gap: var(--navbar-panel-gap);
+    padding: var(--navbar-panel-padding);
+  }
+
+  .ds-navbar__panel--list {
+    width: var(--navbar-panel-width-list);
+  }
+
+  .ds-navbar__panel--grid {
+    width: var(--navbar-panel-width-grid);
+  }
+
+  .ds-navbar__panel--grid .ds-navbar__rows {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ds-navbar__panel--featured {
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    width: var(--navbar-panel-width-grid);
+  }
+
+  .ds-navbar__panel--groups {
+    grid-auto-columns: var(--navbar-panel-width-group);
+    grid-auto-flow: column;
+  }
+
+  .ds-navbar__panel--groups .ds-navbar__group + .ds-navbar__group {
+    border-inline-start: 1px solid var(--navbar-sheet-border);
+    padding-inline-start: var(--navbar-panel-gap);
+  }
+
+  .ds-navbar__group {
+    display: grid;
+    align-content: start;
+    gap: var(--space-1);
+  }
+
+  .ds-navbar__eyebrow {
+    color: var(--navbar-eyebrow-fg);
+    font-size: var(--type-overline-size);
+    font-weight: var(--type-overline-weight);
+    letter-spacing: var(--type-overline-tracking);
+    line-height: var(--type-overline-leading);
+    margin: 0;
+    padding: var(--space-2) var(--space-3) var(--space-1);
+    text-transform: uppercase;
+  }
+
+  .ds-navbar__rows {
+    display: grid;
+    gap: var(--space-0-5);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-navbar__row {
+    align-items: flex-start;
+    border-radius: var(--navbar-row-radius);
+    color: var(--navbar-row-fg);
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--navbar-row-padding);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-navbar__row:hover,
+  .ds-navbar__row:focus-visible {
+    background: var(--navbar-row-bg-hover);
+  }
+
+  .ds-navbar__row[aria-current="page"] {
+    background: var(--navbar-row-bg-current);
+  }
+
+  .ds-navbar__row[aria-current="page"]:hover,
+  .ds-navbar__row[aria-current="page"]:focus-visible {
+    background: var(--navbar-link-bg-current-hover);
+  }
+
+  .ds-navbar__row[aria-current="page"] .ds-navbar__row-icon {
+    color: var(--navbar-current-icon-fg);
+  }
+
+  .ds-navbar__row-icon {
+    color: var(--navbar-row-icon-fg);
+    display: inline-flex;
+    flex: none;
+    margin-block-start: var(--space-0-5);
+  }
+
+  .ds-navbar__row-body {
+    display: grid;
+    gap: var(--space-0-5);
+    min-width: 0;
+  }
+
+  .ds-navbar__row-title {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-navbar__row-desc {
+    color: var(--navbar-row-desc-fg);
+    display: -webkit-box;
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  /* Featured card: the section's front door, on a quiet tint. */
+  .ds-navbar__feature {
+    align-content: end;
+    background: var(--navbar-feature-bg);
+    border-radius: var(--navbar-row-radius);
+    color: var(--navbar-row-fg);
+    display: grid;
+    gap: var(--space-1);
+    min-height: var(--navbar-feature-min-height);
+    padding: var(--space-4);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-navbar__feature:hover,
+  .ds-navbar__feature:focus-visible {
+    background: var(--navbar-feature-bg-hover);
+  }
+
+  .ds-navbar__feature .ds-navbar__eyebrow {
+    padding: 0;
+  }
+
+  .ds-navbar__feature-icon {
+    align-items: center;
+    align-self: start;
+    background: var(--navbar-feature-icon-bg);
+    border-radius: var(--radius-md);
+    color: var(--navbar-feature-icon-fg);
+    display: inline-flex;
+    height: var(--space-10);
+    justify-content: center;
+    margin-block-end: auto;
+    width: var(--space-10);
+  }
+
+  .ds-navbar__feature-title {
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--type-heading-tracking);
+    line-height: var(--leading-lg);
+  }
+
+  /* Focus ------------------------------------------------------------------ */
+  .ds-navbar__brand:focus-visible,
+  .ds-navbar__trigger:focus-visible,
+  .ds-navbar__row:focus-visible,
+  .ds-navbar__feature:focus-visible,
+  .ds-navbar__toggle:focus-visible,
+  .ds-navbar__sheet-link:focus-visible,
+  .ds-navbar__sheet-sublink:focus-visible {
+    outline: var(--navbar-focus-width) solid var(--navbar-focus-color);
+    outline-offset: var(--navbar-focus-offset);
+  }
+
+  .ds-navbar__row:focus-visible,
+  .ds-navbar__feature:focus-visible,
+  .ds-navbar__sheet-link:focus-visible,
+  .ds-navbar__sheet-sublink:focus-visible {
+    outline-offset: calc(-1 * var(--navbar-focus-width));
+  }
+
+  /* Menu button: a plain icon button, like the other bar utilities. ------ */
+  .ds-navbar__toggle {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--navbar-link-radius);
+    color: var(--navbar-toggle-fg);
+    cursor: pointer;
+    display: none;
+    flex: none;
+    height: var(--space-10);
+    justify-content: center;
+    margin-inline-end: calc(-1 * var(--space-2));
+    transition: background-color var(--duration-fast) var(--ease-standard);
+    width: var(--space-10);
+  }
+
+  .ds-navbar__toggle:hover {
+    background: var(--navbar-toggle-bg-hover);
+  }
+
+  /* Mobile menu -------------------------------------------------------------
+     A floating card inset from the screen edges, not a full-bleed slab: the
+     page stays visible around it under a light scrim. It sizes to its
+     content and scrolls inside itself when that runs past the viewport. */
+  .ds-navbar__sheet {
+    background: var(--navbar-sheet-bg);
+    border: 1px solid var(--navbar-sheet-border);
+    border-radius: var(--navbar-sheet-radius);
+    box-shadow: var(--navbar-viewport-shadow);
+    color: var(--navbar-row-fg);
+    inset: var(--navbar-sheet-inset) var(--navbar-sheet-inset) auto auto;
+    margin: 0;
+    max-height: calc(100dvh - 2 * var(--navbar-sheet-inset));
+    max-width: var(--navbar-sheet-max-width);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0;
+    position: fixed;
+    transform-origin: top right;
+    width: calc(100% - 2 * var(--navbar-sheet-inset));
+  }
+
+  .ds-navbar__sheet[open] {
+    animation: ds-navbar-sheet-in var(--duration-base) var(--ease-enter);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ds-navbar__sheet::backdrop {
+    background: var(--navbar-sheet-backdrop);
+  }
+
+  /* Scroll lock without script: the page cannot scroll behind an open menu. */
+  :root:has(.ds-navbar__sheet[open]) {
+    overflow: hidden;
+  }
+
+  .ds-navbar__sheet-head {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    min-height: var(--space-16);
+    padding-inline: var(--navbar-sheet-padding);
+  }
+
+  .ds-navbar__sheet-head form {
+    display: contents;
+  }
+
+  .ds-navbar__sheet-head .ds-navbar__toggle {
+    display: inline-flex;
+  }
+
+  .ds-navbar__sheet-title {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+  }
+
+  .ds-navbar__sheet-nav {
+    padding: var(--space-2) var(--space-3) var(--space-4);
+  }
+
+  .ds-navbar__sheet-list,
+  .ds-navbar__sheet-group ul {
+    display: grid;
+    gap: var(--space-0-5);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-navbar__sheet-link {
+    align-items: center;
+    border-radius: var(--navbar-row-radius);
+    color: var(--navbar-row-fg);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--navbar-sheet-row-size);
+    font-weight: var(--weight-medium);
+    gap: var(--space-3);
+    list-style: none;
+    min-height: var(--navbar-sheet-row-height);
+    padding-inline: var(--space-3);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-navbar__sheet-link::-webkit-details-marker {
+    display: none;
+  }
+
+  .ds-navbar__sheet-link .ds-navbar__chevron {
+    margin-inline-start: auto;
+  }
+
+  .ds-navbar__sheet-link:hover {
+    background: var(--navbar-row-bg-hover);
+  }
+
+  .ds-navbar__sheet-panel {
+    display: grid;
+    gap: var(--space-1);
+    padding: var(--space-1) 0 var(--space-2) var(--space-3);
+  }
+
+  .ds-navbar__sheet-group .ds-navbar__eyebrow {
+    padding-inline: var(--space-3);
+  }
+
+  .ds-navbar__sheet-sublink {
+    border-radius: var(--navbar-row-radius);
+    color: var(--navbar-row-fg);
+    display: grid;
+    gap: var(--space-0-5);
+    padding: var(--space-2) var(--space-3);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-navbar__sheet-sublink:hover {
+    background: var(--navbar-row-bg-hover);
+  }
+
+  /* In the menu the current page gets the tint; its section keeps an accent
+     icon so the open disclosure points at it. */
+  .ds-navbar__sheet-link[aria-current="page"],
+  .ds-navbar__sheet-sublink[aria-current="page"] {
+    background: var(--navbar-row-bg-current);
+  }
+
+  .ds-navbar__sheet-link.is-current .ds-icon:not(.ds-navbar__chevron),
+  .ds-navbar__sheet-link[aria-current="page"] .ds-icon {
+    color: var(--navbar-current-icon-fg);
+  }
+
+  /* Footer: secondary links in two columns, then full-width actions. */
+  .ds-navbar__sheet-footer {
+    border-top: 1px solid var(--navbar-sheet-border);
+    display: grid;
+    gap: var(--space-5);
+    margin-block-start: auto;
+    padding: var(--space-5) var(--navbar-sheet-padding)
+      var(--navbar-sheet-padding);
+  }
+
+  .ds-navbar__sheet-meta {
+    display: grid;
+    gap: var(--space-3) var(--space-4);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-navbar__sheet-meta a {
+    border-radius: var(--radius-xs);
+    color: var(--navbar-sheet-meta-fg);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    text-decoration: none;
+  }
+
+  .ds-navbar__sheet-meta a:hover {
+    color: var(--navbar-row-fg);
+  }
+
+  .ds-navbar__sheet-meta a:focus-visible {
+    outline: var(--navbar-focus-width) solid var(--navbar-focus-color);
+    outline-offset: var(--navbar-focus-offset);
+  }
+
+  .ds-navbar__sheet-actions {
+    display: grid;
+    gap: var(--space-2);
+  }
+
+  /* Collapse ---------------------------------------------------------------
+     With script, the bar collapses exactly when its full row no longer fits
+     (data-collapsed). Without script, a container query collapses it below
+     720px of its own width. */
+  .ds-navbar[data-collapsed="true"] .ds-navbar__nav {
+    display: none;
+  }
+
+  .ds-navbar[data-collapsed="true"] .ds-navbar__toggle {
+    display: inline-flex;
+  }
+
+  .ds-navbar[data-collapsed="true"] .ds-navbar__brand ~ .ds-navbar__start {
+    display: none;
+  }
+
+  @container ds-navbar (max-width: 719px) {
+    .ds-navbar:not([data-collapsed]) .ds-navbar__nav {
+      display: none;
+    }
+
+    .ds-navbar:not([data-collapsed]) .ds-navbar__toggle {
+      display: inline-flex;
+    }
+
+    .ds-navbar:not([data-collapsed]) .ds-navbar__brand ~ .ds-navbar__start {
+      display: none;
+    }
+  }
+
+  @container ds-navbar (max-width: 719px) {
+    .ds-navbar__inner {
+      padding-inline: var(--space-4);
+    }
+  }
+
+  @keyframes ds-navbar-viewport-in {
+    from {
+      opacity: 0;
+      transform: translateX(var(--ds-navbar-viewport-x, 0))
+        translateY(calc(-1 * var(--space-1)));
+    }
+  }
+
+  @keyframes ds-navbar-panel-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ds-navbar-sheet-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--space-2))) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-navbar__viewport,
+    .ds-navbar__viewport[data-instant="true"],
+    .ds-navbar__panel:not([hidden]),
+    .ds-navbar__sheet[open],
+    .ds-navbar__chevron {
+      animation: none;
+      transition: none;
+    }
+  }
+}

package/src/styles/page-header.css

@@ -0,0 +1,62 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-page-header {
+    display: grid;
+    gap: var(--page-header-gap);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ds-page-header__title {
+    color: var(--page-header-title-fg);
+    font-size: var(--page-header-title-size);
+    letter-spacing: var(--page-header-title-tracking);
+    line-height: var(--page-header-title-leading);
+    max-width: var(--page-header-title-max);
+    text-wrap: balance;
+  }
+
+  .ds-page-header__lede {
+    color: var(--page-header-lede-fg);
+    font-size: var(--page-header-lede-size);
+    line-height: var(--page-header-lede-leading);
+    max-width: var(--page-header-lede-max);
+  }
+
+  .ds-page-header__meta {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--page-header-meta-gap);
+  }
+
+  .ds-page-header__actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--page-header-actions-gap);
+    margin-block-start: var(--page-header-actions-margin);
+  }
+
+  .ds-page-header__meta:empty,
+  .ds-page-header__lede:empty,
+  .ds-page-header__actions:empty {
+    display: none;
+  }
+
+  .ds-page-header--display .ds-page-header__title {
+    font-size: var(--page-header-display-size);
+    letter-spacing: var(--page-header-display-tracking);
+    line-height: var(--page-header-display-leading);
+    max-width: var(--page-header-title-max);
+  }
+
+  .ds-page-header--display .ds-page-header__lede {
+    margin-block-start: var(--space-1);
+  }
+
+  .ds-page-header__title em {
+    color: var(--page-header-emphasis-fg);
+    font-style: normal;
+  }
+}