@brandlab-digital/site-next 3.14.0 → 3.15.0

package/dist/ui-kit/structure.css

@@ -385,7 +385,7 @@
     height: var(--bl-logo-h-phone, 40px);
   }
 
-  /* The menu: hidden below 1280 px (the drawer takes over). */
+  /* The menu: hidden below 1200 px (the drawer takes over). */
   [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
     display: none;
     flex: 1;
@@ -559,7 +559,7 @@
     height: 1.25rem;
   }
 
-  /* 1024 to 1279 px: the compact band. Logo, phone with its number, quote and Menu. */
+  /* 1024 to 1199 px: the compact band. Logo, phone with its number, quote and Menu. The phone stays from 1024 px up. */
   @container bl-header (min-width: 1024px) {
     [data-bl='header'] > [data-slot='bar'] > [data-slot='inner'] {
       min-height: var(--bl-header-bar, 5rem);
@@ -599,8 +599,8 @@
     }
   }
 
-  /* 1280 px and up: the full menu. */
-  @container bl-header (min-width: 1280px) {
+  /* 1200 px and up: the full menu, with the phone and quote still beside it. */
+  @container bl-header (min-width: 1200px) {
     [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
       display: block;
     }
@@ -834,13 +834,22 @@
     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;
+  /*
+   * One line each down to 360 px (3.15.0): the buttons size to their content, the number never wraps, and the inline
+   * padding (`--bl-callbar-button-padding`) outranks a skin's general button padding, so a skin tunes it by the token.
+   */
+  [data-bl='callbar'][data-variant] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    flex: 1 1 auto;
     justify-content: center;
     min-width: 0;
     min-height: 48px;
+    padding-inline: var(--bl-callbar-button-padding, 0.75rem);
+    white-space: nowrap;
     text-decoration: none;
   }
+  [data-bl='callbar'] [data-bl='phone-link'] [data-slot='number'] {
+    white-space: nowrap;
+  }
   [data-bl='callbar'][data-variant='float'] {
     inset-inline: auto 0;
     justify-content: flex-end;
@@ -849,6 +858,25 @@
   [data-bl='callbar'][data-variant='float'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
     flex: none;
   }
+  /*
+   * Narrow phones: the verb before the number is visually hidden (the link's name still reads "Call 0497 777 735"), and
+   * a quote button with a compact label draws it from the attribute with empty alternative text, so its name stays the
+   * full label, which contains it (WCAG 2.5.3).
+   */
+  @media (max-width: 419.98px) {
+    [data-bl='callbar'] [data-bl='phone-link'] [data-slot='label'],
+    [data-bl='callbar'] [data-slot='label'][data-compact-label] > [data-bl-full-label] {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    [data-bl='callbar'] [data-slot='label'][data-compact-label]::after {
+      content: attr(data-compact-label) / '';
+    }
+  }
   [data-bl='callbar'][data-state='hidden'] {
     visibility: hidden;
     translate: 0 100%;
@@ -861,7 +889,10 @@
   }
 
   /* 14-back-to-top.css */
-  /* F7 back-to-top: a 44 px button in a bottom corner, above the call bar while it shows. */
+  /*
+   * F7 back-to-top: a 44 px button in a bottom corner. The hook hides it while the phone call bar shows (3.15.0); the
+   * bottom offset still clears the bar's height while the bar slides away.
+   */
 
   [data-bl='back-to-top'] {
     --bl-back-to-top-offset: 1.25rem;
@@ -1860,4 +1891,376 @@
     }
   }
 
+  /* 40-location.css */
+  /* Location sections (3.15.0): LocalFacts, CouncilRules, NearbyJobs, NearbyAreas, Coverage and RelatedServices. Layout
+     only; the link lists are `LinkList`s (05-primitives.css) and the job and service cards follow 39-services.css. Lists
+     styled without bullets carry role="list", so Safari keeps announcing them as lists. */
+
+  [data-bl-section='local-facts'] [data-slot='facts'],
+  [data-bl-section='local-facts'] [data-slot='fees'],
+  [data-bl-section='council-rules'] [data-slot='fees'],
+  [data-bl-section='nearby-jobs'] [data-slot='list'],
+  [data-bl-section='related-services'] [data-slot='list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='local-facts'] [data-slot='source'] > a,
+  [data-bl-section='council-rules'] [data-slot='source'] > a,
+  [data-bl-section='local-facts'] [data-slot='councilLink'] > a {
+    display: inline-block;
+    padding-block: 0.25rem;
+  }
+
+  /* Nearby jobs: the photo on top of each card; a grid of up to 3 columns, or a scrolling rail. */
+  [data-bl-section='nearby-jobs'] {
+    container: bl-nearby-jobs / inline-size;
+  }
+  [data-bl-section='nearby-jobs'] [data-slot='list'] > [data-slot='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  [data-bl-section='nearby-jobs'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+  [data-bl-section='nearby-jobs'] [data-slot='list'] [data-slot='title'] {
+    margin: 0;
+  }
+  [data-bl-section='nearby-jobs'][data-variant='grid'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='nearby-jobs'][data-variant='rail'] [data-slot='list'] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(16rem, 80%);
+    gap: var(--bl-gutter, 1.25rem);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+  }
+  [data-bl-section='nearby-jobs'][data-variant='rail'] [data-slot='list'] > [data-slot='item'] {
+    scroll-snap-align: start;
+  }
+  @container bl-nearby-jobs (min-width: 1024px) {
+    [data-bl-section='nearby-jobs'][data-variant='grid'][data-columns='2'] [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    [data-bl-section='nearby-jobs'][data-variant='grid'][data-columns='3'] [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='nearby-jobs'][data-variant='rail'] [data-slot='list'] {
+      grid-auto-columns: minmax(16rem, 1fr);
+    }
+  }
+
+  /* Nearby areas as chips: the links wrap in a row. */
+  [data-bl-section='nearby-areas'][data-variant='chips'] [data-bl='link-list'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Coverage: one block per group, its heading above its list. */
+  [data-bl-section='coverage'] [data-slot='groups'] {
+    display: grid;
+    gap: 2rem;
+  }
+  [data-bl-section='coverage'] [data-slot='groups'] > [data-slot='group'] > [data-slot='groupHeading'] {
+    margin: 0 0 0.75rem;
+  }
+
+  /* Related services as cards: the photo on top. */
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] [data-slot='title'] {
+    margin: 0;
+  }
+
+  /* 40-projects.css */
+  /* Projects and Gallery (3.15.0): a grid of cards or photos, one column on phones, two from 640 px and the skin's
+     columns from 1024 px of the section's own width. Lists styled without bullets carry role="list". */
+
+  [data-bl-section='projects'],
+  [data-bl-section='gallery'] {
+    container: bl-proof-grid / inline-size;
+  }
+  [data-bl-section='projects'] [data-slot='list'],
+  [data-bl-section='gallery'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--bl-gutter, 1.25rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='gallery'] [data-slot='list'] > [data-slot='item'] > [data-slot='link'] {
+    display: block;
+  }
+
+  @container bl-proof-grid (min-width: 640px) {
+    [data-bl-section='projects'] [data-slot='list'],
+    [data-bl-section='gallery'] [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @container bl-proof-grid (min-width: 1024px) {
+    [data-bl-section='projects'][data-columns='3'] [data-slot='list'],
+    [data-bl-section='gallery'][data-columns='3'] [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='projects'][data-columns='4'] [data-slot='list'],
+    [data-bl-section='gallery'][data-columns='4'] [data-slot='list'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  /* 41-before-after.css */
+  /* Before and after (3.15.0): each pair's two frames stacked on phones and side by side from 640 px of the section's
+     width (`data-arrange="side"`), before first. Both frames share one crop, so they line up. */
+
+  [data-bl-section='before-after'] {
+    container: bl-before-after / inline-size;
+  }
+  [data-bl-section='before-after'] [data-slot='list'] {
+    display: grid;
+    gap: calc(var(--bl-gutter, 1.25rem) * 2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='before-after'] [data-slot='list'] [data-slot='frames'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--bl-gutter, 1.25rem);
+  }
+
+  @container bl-before-after (min-width: 640px) {
+    [data-bl-section='before-after'][data-arrange='side'] [data-slot='list'] [data-slot='frames'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  /* 42-licences.css */
+  /* Licences (3.15.0): a ruled ledger, the label above its value on phones and beside it from 640 px of the section's
+     width. The skin draws the rules and type. */
+
+  [data-bl-section='licences'] {
+    container: bl-licences / inline-size;
+  }
+  [data-bl-section='licences'] [data-slot='list'] {
+    margin: 0;
+  }
+  [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] {
+    display: grid;
+    gap: 0.25rem 2rem;
+    padding-block: 1rem;
+  }
+  [data-bl-section='licences'] [data-slot='list'] [data-slot='row'] > dd {
+    margin: 0;
+  }
+  [data-bl-section='licences'] [data-slot='list'] [data-slot='classes'] > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @container bl-licences (min-width: 640px) {
+    [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    }
+    [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] > dt {
+      grid-column: 1;
+      grid-row: 1;
+    }
+    [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] > dd {
+      grid-column: 2;
+    }
+  }
+
+  /* 43-quote-checklist.css */
+  /* Quote checklist (3.15.0): heading, list, then the quote button; the list's columns are the TickList's. */
+
+  [data-bl='quote-checklist'] {
+    display: grid;
+    gap: 1rem;
+    justify-items: start;
+  }
+  [data-bl='quote-checklist'] > [data-bl='tick-list'] {
+    justify-self: stretch;
+  }
+  [data-bl='quote-checklist'] > p {
+    margin: 0;
+  }
+
+  /* 44-emergency.css */
+  /* Emergency band (3.15.0): heading and summary, then the actions (phone first), side by side from 768 px of the
+     band's width. The skin colours it. */
+
+  [data-bl-section='emergency'] {
+    container: bl-emergency / inline-size;
+  }
+  [data-bl-section='emergency'] > [data-slot='inner'] {
+    display: grid;
+    gap: 1rem;
+  }
+  [data-bl-section='emergency'] [data-slot='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  @container bl-emergency (min-width: 768px) {
+    [data-bl-section='emergency'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      column-gap: 2rem;
+    }
+  }
+
+  /* 45-area-map.css */
+  /* Area map (3.15.0): the map and its place list, side by side from 768 px of the section's width (`data-list="beside"`)
+     or stacked. The SVG's layers are `<use>` references into the base file, coloured here from the site's `--bl-map-*`
+     tokens (falling back to its colour tokens); on narrow widths the frame shows the model's phone crop. */
+
+  [data-bl-section='area-map'] {
+    container: bl-area-map / inline-size;
+  }
+  [data-bl-section='area-map'] [data-slot='body'] {
+    display: grid;
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='area-map'] [data-slot='figure'] {
+    margin: 0;
+    display: grid;
+    gap: 0.5rem;
+  }
+  [data-bl-section='area-map'] [data-slot='frame'] {
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: var(--bl-map-ratio, 1);
+  }
+  [data-bl-section='area-map'] [data-slot='map'] {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  [data-bl-section='area-map'] [data-slot='caption'] {
+    display: grid;
+    gap: 0.25rem;
+  }
+  [data-bl-section='area-map'] [data-slot='legend'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1rem;
+  }
+  /* Each legend line starts with the marker it names, drawn in the same layer as the map's (3.15.0). */
+  [data-bl-section='area-map'] :is([data-slot='legendJobs'], [data-slot='legendBase']) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+  }
+  [data-bl-section='area-map'] :is([data-slot='legendJobs'], [data-slot='legendBase']) > svg {
+    width: 0.9em;
+    height: 0.9em;
+  }
+  [data-bl-section='area-map'] [data-slot='places'] {
+    display: grid;
+    align-content: start;
+    gap: 0.75rem;
+  }
+  [data-bl-section='area-map'] [data-slot='placesTitle'],
+  [data-bl-section='area-map'] [data-slot='places'] > p {
+    margin: 0;
+  }
+
+  /* The layers. */
+  [data-bl-section='area-map'] [data-layer='water'] {
+    fill: var(--bl-map-water, transparent);
+  }
+  [data-bl-section='area-map'] [data-layer='land'] {
+    fill: var(--bl-map-land, var(--bl-color-surface, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='served'] {
+    fill: var(--bl-map-served, var(--bl-color-canvas, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='focus'] {
+    fill: var(--bl-map-focus, var(--bl-color-action, Highlight));
+  }
+  [data-bl-section='area-map'] [data-layer='linked'] use {
+    fill: var(--bl-map-linked, var(--bl-color-canvas, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='linked'] a:hover use {
+    fill: var(--bl-map-linked-hover, var(--bl-color-surface, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='outline'] {
+    stroke: var(--bl-map-outline, currentColor);
+    stroke-opacity: 0.35;
+    stroke-width: 1px;
+  }
+  [data-bl-section='area-map'] [data-layer='names'] {
+    fill: var(--bl-map-name, var(--bl-color-ink, CanvasText));
+    stroke: var(--bl-map-name-halo, var(--bl-color-canvas, Canvas));
+    paint-order: stroke;
+    text-anchor: middle;
+    pointer-events: none;
+  }
+  [data-bl-section='area-map'] [data-layer='names'] [data-state='focus'] {
+    font-weight: 700;
+  }
+  [data-bl-section='area-map'] [data-layer='jobs'] {
+    fill: var(--bl-map-job, var(--bl-color-action, Highlight));
+    stroke: var(--bl-color-canvas, Canvas);
+    pointer-events: none;
+  }
+  [data-bl-section='area-map'] [data-layer='base'] {
+    fill: var(--bl-map-base, var(--bl-color-ink, CanvasText));
+    stroke: var(--bl-color-canvas, Canvas);
+    pointer-events: none;
+  }
+
+  /* Narrow widths: the phone crop around the served area. */
+  @container bl-area-map (max-width: 639px) {
+    [data-bl-section='area-map'] [data-slot='frame'] {
+      aspect-ratio: var(--bl-map-crop-ratio, var(--bl-map-ratio, 1));
+    }
+    [data-bl-section='area-map'] [data-slot='map'] {
+      position: absolute;
+      width: var(--bl-map-crop-size, 100%);
+      max-width: none;
+      left: var(--bl-map-crop-x, 0);
+      top: var(--bl-map-crop-y, 0);
+    }
+  }
+
+  /*
+   * Beside a place list the map takes three fifths of the width. A region or overview map with no list fills the body
+   * (3.15.0); a locator keeps its column. Names on a map that wide draw at 70%, so they read at about the same size.
+   */
+  @container bl-area-map (min-width: 768px) {
+    [data-bl-section='area-map'][data-list='beside'] [data-slot='body']:has(> [data-slot='places']),
+    [data-bl-section='area-map'][data-variant='locator'][data-list='beside'] [data-slot='body'] {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      align-items: start;
+    }
+  }
+  @container bl-area-map (min-width: 960px) {
+    [data-bl-section='area-map']:not([data-variant='locator']) [data-slot='body']:not(:has(> [data-slot='places'])) [data-layer='names'] text {
+      font-size: 70%;
+    }
+  }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandlab-digital/site-next",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@brandlab-digital/site-core": "3.14.0",
+    "@brandlab-digital/site-core": "3.15.0",
     "browser-image-compression": "2.0.2",
     "pdf-lib": "1.17.1",
     "server-only": "0.0.1",