@brandlab-digital/site-next 3.8.0 → 3.9.0

package/dist/ui-kit/structure.css

@@ -120,4 +120,598 @@
     }
   }
 
+  /* 10-header.css */
+  /*
+   * F2 header and F3 panels: sticky and solid, modes by the header's own width, panels always in the HTML. The drawer's
+   * dialog sits inside the header's actions, so header rules reach their parts by structure, never by a bare slot name.
+   */
+
+  :where([data-bl='header'], [data-bl='drawer'], [data-bl='utility']) :where(ul) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  :where([data-bl='header'], [data-bl='drawer'], [data-bl='utility']) :where(p) {
+    margin: 0;
+  }
+  :where([data-bl='header'], [data-bl='drawer'], [data-bl='utility']) :where(a) {
+    color: inherit;
+  }
+  :where([data-bl='header'], [data-bl='drawer']) :where(button),
+  :where([data-bl='back-to-top']) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  /* F12: the skip link is the first focusable element, visible on focus. */
+  [data-bl='skip'] {
+    position: absolute;
+    inset-inline-start: 1rem;
+    top: 0.75rem;
+    z-index: 100;
+    translate: 0 -200%;
+    padding: 0.75rem 1rem;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  [data-bl='skip']:focus {
+    translate: 0 0;
+  }
+
+  /* The header never hides on scroll; its background is solid (a skin sets the colour, never transparency). */
+  [data-bl='header'] {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    container: bl-header / inline-size;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  [data-bl='header'] > [data-slot='bar'] > [data-slot='inner'] {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    max-width: var(--bl-container, 80rem);
+    min-height: var(--bl-header-bar-phone, 4rem);
+    margin-inline: auto;
+    padding-inline: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='logo'] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='logo'] :is(img, svg) {
+    display: block;
+    width: auto;
+    height: var(--bl-logo-h-phone, 40px);
+  }
+
+  /* The menu: hidden below 1280 px (the drawer takes over). */
+  [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
+    display: none;
+    flex: 1;
+    min-width: 0;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] > [data-slot='list'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+  }
+  [data-bl='header'][data-nav-align='end'] [data-slot='inner'] > [data-slot='nav'] > [data-slot='list'] {
+    justify-content: flex-end;
+  }
+  [data-bl='header'] [data-slot='item'] {
+    position: relative;
+  }
+  [data-bl='header'] [data-slot='itemRow'] {
+    display: flex;
+    align-items: center;
+  }
+  [data-bl='header'] [data-slot='item'] [data-slot='link'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 40px;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 40px;
+  }
+  [data-bl='header'] [data-slot='trigger'] svg {
+    width: 1rem;
+    height: 1rem;
+    transition: rotate 150ms ease;
+  }
+  [data-bl='header'] [data-slot='trigger'][aria-expanded='true'] svg {
+    rotate: 180deg;
+  }
+
+  /*
+   * F3 panels: always in the server HTML. Closed panels are visibility: hidden (and inert once scripts run); before
+   * hydration, :hover and :focus-within open them. The offset gap is padding inside the panel's hover box, never a
+   * margin, so the pointer never crosses a dead gap. The 150 ms fade never decides hoverability: visibility flips at once.
+   */
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'] {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    z-index: 50;
+    translate: -50% 0;
+    padding-top: var(--bl-panel-gap, 0.75rem);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-state='open'],
+  [data-bl='header']:not([data-hydrated='true']) [data-slot='item']:is(:hover, :focus-within) > [data-slot='panel'] {
+    visibility: visible;
+    opacity: 1;
+  }
+  [data-bl='header'] [data-slot='panelBody'] {
+    width: 22rem;
+    max-width: calc(100vw - 2 * var(--bl-gutter, 1.25rem));
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  [data-bl='header'] [data-slot='panelLink'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.15rem 0.75rem;
+    min-height: 40px;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='panelLink'] svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  [data-bl='header'] [data-slot='panelText'] {
+    flex-basis: 100%;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns'] [data-slot='panelBody'] {
+    display: grid;
+    grid-template-columns: repeat(var(--bl-panel-columns, 2), minmax(0, 1fr));
+    gap: 0 1.5rem;
+    width: 34rem;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns'][data-columns='3'] [data-slot='panelBody'] {
+    --bl-panel-columns: 3;
+    width: 46rem;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns'] [data-slot='panelBody'] > [data-slot='panelList']:first-child {
+    grid-column: 1 / -1;
+  }
+  /* A columns panel without groups balances its one list. */
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns']:not([data-columns]) [data-slot='panelList'] {
+    columns: 2;
+    column-gap: 1.5rem;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns']:not([data-columns]) [data-slot='panelList'] > li {
+    break-inside: avoid;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='featured'] [data-slot='panelBody'] {
+    display: grid;
+    grid-template-columns: 15rem minmax(0, 1fr);
+    gap: 1.25rem;
+    width: 38rem;
+  }
+  [data-bl='header'] [data-slot='featured'] {
+    display: grid;
+    align-content: start;
+    gap: 0.4rem;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='featuredMedia'] {
+    display: block;
+    overflow: hidden;
+    aspect-ratio: 4 / 3;
+  }
+  [data-bl='header'] [data-slot='featuredMedia'] img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Actions: phone (icon left, its label above the number), quote, Menu. Below 1024 px a 44 px call button and Menu. */
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-inline-start: auto;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] {
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  [data-bl='header'][data-variant='standard'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] :is([data-slot='label'], [data-slot='number']),
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='label'],
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] [data-slot='menuLabel'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='quote-button'] {
+    display: none;
+    white-space: nowrap;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    min-width: 44px;
+    min-height: 44px;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > :is([data-bl='phone-link'], [data-bl='quote-button'], [data-slot='menuButton']) svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* 1024 to 1279 px: the compact band. Logo, phone with its number, quote and Menu. */
+  @container bl-header (min-width: 1024px) {
+    [data-bl='header'] > [data-slot='bar'] > [data-slot='inner'] {
+      min-height: var(--bl-header-bar, 5rem);
+      gap: 1rem;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='logo'] :is(img, svg) {
+      height: var(--bl-logo-h, 52px);
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] {
+      display: inline-grid;
+      grid-template-columns: auto auto;
+      column-gap: 0.6rem;
+      align-items: center;
+      justify-content: start;
+      text-align: start;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='icon'] {
+      grid-row: span 2;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] :is([data-slot='label'], [data-slot='number']),
+    [data-bl='header'][data-variant='standard'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] :is([data-slot='label'], [data-slot='number']),
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] [data-slot='menuLabel'] {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      clip-path: none;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='label'] {
+      grid-column: 2;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='number'] {
+      grid-column: 2;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='quote-button'] {
+      display: inline-flex;
+    }
+  }
+
+  /* 1280 px and up: the full menu. */
+  @container bl-header (min-width: 1280px) {
+    [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
+      display: block;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] {
+      margin-inline-start: 0;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] {
+      display: none;
+    }
+  }
+
+  /* 11-utility.css */
+  /* F5 utility bar: optional, above the header, scrolls away with the page; hidden below 768 px of its own width. */
+
+  [data-bl='utility'] {
+    container: bl-utility / inline-size;
+  }
+  [data-bl='utility'] > [data-slot='inner'] {
+    display: none;
+  }
+  @container bl-utility (min-width: 768px) {
+    [data-bl='utility'] > [data-slot='inner'] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1.5rem;
+      max-width: var(--bl-container, 80rem);
+      min-height: 2.25rem;
+      margin-inline: auto;
+      padding-inline: var(--bl-gutter, 1.25rem);
+    }
+  }
+  [data-bl='utility'][data-reverse='true'] > [data-slot='inner'] {
+    flex-direction: row-reverse;
+  }
+  [data-bl='utility'] [data-slot='left'],
+  [data-bl='utility'] [data-slot='social'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 1.25rem;
+  }
+  [data-bl='utility'] :is([data-slot='rating'], [data-slot='licence']) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 24px;
+    text-decoration: none;
+  }
+  [data-bl='utility'] [data-slot='social'] {
+    gap: 0.25rem;
+  }
+  [data-bl='utility'] [data-slot='socialLink'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+  }
+  [data-bl='utility'] [data-slot='social'] svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* 12-drawer.css */
+  /*
+   * F4 drawer: a modal dialog of min(100%, 420px) from the end side (or full screen), its own scroll container. The page
+   * behind it is inert (native modal) and doesn't scroll while it is open.
+   */
+
+  /* The gutter stays when the scrollbar goes, so the header's width (and its mode) never changes as the drawer opens. */
+  :root:has(dialog[data-bl='drawer'][open]) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+  }
+
+  dialog[data-bl='drawer'] {
+    inset-block: 0;
+    width: min(100%, 420px);
+    max-width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    margin-inline-start: auto;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  dialog[data-bl='drawer'][data-side='start'] {
+    margin-inline: 0 auto;
+  }
+  dialog[data-bl='drawer'][data-variant='full'] {
+    width: 100%;
+    margin-inline: 0;
+  }
+  dialog[data-bl='drawer'] > [data-slot='panel'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  dialog[data-bl='drawer'][open] > [data-slot='panel'] {
+    animation: bl-drawer-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  dialog[data-bl='drawer'][data-side='start'][open] > [data-slot='panel'] {
+    animation-name: bl-drawer-in-start;
+  }
+  @keyframes bl-drawer-in {
+    from {
+      translate: 2rem 0;
+      opacity: 0;
+    }
+  }
+  @keyframes bl-drawer-in-start {
+    from {
+      translate: -2rem 0;
+      opacity: 0;
+    }
+  }
+
+  /* The close button comes first in the DOM and focus order; the row shows it at the end. */
+  dialog[data-bl='drawer'] [data-slot='top'] {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem var(--bl-gutter, 1.25rem);
+  }
+  dialog[data-bl='drawer'] [data-slot='close'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+  dialog[data-bl='drawer'] [data-slot='close'] svg {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='title'] {
+    margin-inline-end: auto;
+  }
+  dialog[data-bl='drawer'] [data-slot='top'] > [data-slot='logo'] :is(img, svg) {
+    display: block;
+    width: auto;
+    height: 36px;
+  }
+  dialog[data-bl='drawer'] [data-slot='nav'] {
+    padding: 0.5rem var(--bl-gutter, 1.25rem) 1rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='groupTrigger'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    min-height: 52px;
+    list-style: none;
+    cursor: pointer;
+  }
+  dialog[data-bl='drawer'] [data-slot='groupTrigger']::-webkit-details-marker {
+    display: none;
+  }
+  dialog[data-bl='drawer'] [data-slot='groupTrigger'] svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    transition: rotate 150ms ease;
+  }
+  dialog[data-bl='drawer'] [data-slot='group'][open] > [data-slot='groupTrigger'] svg {
+    rotate: 180deg;
+  }
+  dialog[data-bl='drawer'] :is([data-slot='link'], [data-slot='groupLink']) {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    text-decoration: none;
+  }
+  dialog[data-bl='drawer'] [data-slot='actions'] {
+    display: grid;
+    gap: 0.75rem;
+    margin-top: auto;
+    padding: 0.5rem var(--bl-gutter, 1.25rem) 1.25rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='actions'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    display: flex;
+    justify-content: center;
+    min-height: 52px;
+    text-decoration: none;
+  }
+  dialog[data-bl='drawer'] [data-slot='actions'] svg {
+    width: 1.15rem;
+    height: 1.15rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='social'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0 var(--bl-gutter, 1.25rem);
+  }
+  dialog[data-bl='drawer'] [data-slot='socialLink'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+  dialog[data-bl='drawer'] [data-slot='social'] svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  /* 13-callbar.css */
+  /*
+   * F6 call bar: below 1024 px only, fixed to the bottom above the safe area. Hidden until the hero's call paths have
+   * scrolled out; the component sets --bl-callbar-height while it shows (scroll padding and back-to-top use it).
+   */
+
+  [data-bl='callbar'] {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 30;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem var(--bl-gutter, 1.25rem) max(0.5rem, env(safe-area-inset-bottom));
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    transition: translate 200ms ease, visibility 0s;
+  }
+  [data-bl='callbar'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    flex: 1 1 0;
+    justify-content: center;
+    min-width: 0;
+    min-height: 48px;
+    text-decoration: none;
+  }
+  [data-bl='callbar'][data-variant='float'] {
+    inset-inline: auto 0;
+    justify-content: flex-end;
+    background: none;
+  }
+  [data-bl='callbar'][data-variant='float'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    flex: none;
+  }
+  [data-bl='callbar'][data-state='hidden'] {
+    visibility: hidden;
+    translate: 0 100%;
+    transition: translate 200ms ease, visibility 0s linear 200ms;
+  }
+  @media (min-width: 1024px) {
+    [data-bl='callbar'] {
+      display: none;
+    }
+  }
+
+  /* 14-back-to-top.css */
+  /* F7 back-to-top: a 44 px button in a bottom corner, above the call bar while it shows. */
+
+  [data-bl='back-to-top'] {
+    --bl-back-to-top-offset: 1.25rem;
+    position: fixed;
+    inset-inline-end: var(--bl-back-to-top-offset);
+    bottom: max(
+      calc(var(--bl-callbar-height, 0px) + var(--bl-back-to-top-offset)),
+      calc(env(safe-area-inset-bottom) + var(--bl-back-to-top-offset))
+    );
+    z-index: 30;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    transition: opacity 150ms ease, bottom 200ms ease, visibility 0s;
+  }
+  [data-bl='back-to-top'][data-corner='start'] {
+    inset-inline: var(--bl-back-to-top-offset) auto;
+  }
+  [data-bl='back-to-top'][data-offset='small'] {
+    --bl-back-to-top-offset: 0.75rem;
+  }
+  [data-bl='back-to-top'][data-offset='large'] {
+    --bl-back-to-top-offset: 2rem;
+  }
+  [data-bl='back-to-top'][data-state='hidden'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 150ms ease, bottom 200ms ease, visibility 0s linear 150ms;
+  }
+  [data-bl='back-to-top'] svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* The skip-link and back-to-top target takes focus without a ring: it is a landmark, not a control. */
+  #main[tabindex='-1']:focus {
+    outline: none;
+  }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandlab-digital/site-next",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@brandlab-digital/site-core": "3.8.0",
+    "@brandlab-digital/site-core": "3.9.0",
     "browser-image-compression": "2.0.2",
     "pdf-lib": "1.17.1",
     "server-only": "0.0.1",
@@ -162,6 +162,14 @@
       "types": "./dist/ui-kit/primitives/index.d.ts",
       "import": "./dist/ui-kit/primitives/index.js"
     },
+    "./ui-kit/shell": {
+      "types": "./dist/ui-kit/shell/index.d.ts",
+      "import": "./dist/ui-kit/shell/index.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js"
+    },
     "./ui-kit/structure.css": {
       "style": "./dist/ui-kit/structure.css",
       "default": "./dist/ui-kit/structure.css"