@brandlab-digital/site-next 3.10.0 → 3.12.0

package/dist/ui-kit/structure.css

@@ -911,4 +911,573 @@
     padding: 1rem var(--bl-gutter, 1.25rem) var(--bl-gutter, 1.25rem);
   }
 
+  /* 30-reviews.css */
+  /* S7 reviews band and the rating chip: layout only. Colours, fonts and shapes come from each site's skin. */
+
+  [data-bl='rating-chip'] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem 0.5rem;
+    margin: 0;
+  }
+  [data-bl='rating-chip'] > [data-slot='source'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+
+  [data-bl-section='reviews'] {
+    container: bl-reviews / inline-size;
+    isolation: isolate;
+  }
+  [data-bl-section='reviews'] :where(ul[data-slot='list'], figure, blockquote, blockquote p, [data-slot='disclosure']) {
+    margin: 0;
+  }
+  [data-bl-section='reviews'] [data-slot='top'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 1.5rem 2.5rem;
+  }
+  [data-bl-section='reviews'][data-align='center'] [data-slot='top'] {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  [data-bl-section='reviews'] [data-slot='list'] {
+    display: grid;
+    gap: 1.25rem;
+    margin-top: 2.5rem;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='reviews'] [data-slot='item'] > figure {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+  }
+  [data-bl-section='reviews'] [data-slot='quote'] {
+    flex: 1;
+  }
+  /* The reviewer's own line breaks stay. */
+  [data-bl-section='reviews'] [data-slot='quote'] p {
+    white-space: pre-line;
+  }
+  [data-bl-section='reviews'] [data-slot='more'] {
+    margin-top: 0.5rem;
+  }
+  [data-bl-section='reviews'] [data-slot='more'] > summary {
+    min-height: 24px;
+    cursor: pointer;
+  }
+  [data-bl-section='reviews'] [data-slot='more'][open] > summary {
+    margin-bottom: 0.5rem;
+  }
+  [data-bl-section='reviews'] [data-slot='author'] {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 0.75rem;
+    align-items: center;
+  }
+  [data-bl-section='reviews'] [data-slot='avatar'] {
+    grid-row: span 2;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+  }
+  [data-bl-section='reviews'] [data-slot='author'] > :not([data-slot='avatar']) {
+    grid-column: 2;
+  }
+  [data-bl-section='reviews'] [data-slot='author']:not(:has([data-slot='avatar'])) {
+    grid-template-columns: 1fr;
+  }
+  [data-bl-section='reviews'] [data-slot='author']:not(:has([data-slot='avatar'])) > * {
+    grid-column: 1;
+  }
+  [data-bl-section='reviews'] [data-slot='disclosure'] {
+    margin-top: 2rem;
+  }
+  [data-bl-section='reviews'][data-align='center'] [data-slot='disclosure'] {
+    text-align: center;
+  }
+  [data-bl-section='reviews'] [data-slot='profileLink'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+
+  /* The reviews page: a wall of every review, in balanced columns. */
+  [data-bl-section='reviews'][data-variant='wall'] [data-slot='list'] {
+    display: block;
+    columns: 1;
+    column-gap: 1.25rem;
+  }
+  [data-bl-section='reviews'][data-variant='wall'] [data-slot='item'] {
+    break-inside: avoid;
+    margin-bottom: 1.25rem;
+  }
+
+  @container bl-reviews (min-width: 768px) {
+    [data-bl-section='reviews']:is([data-columns='2'], [data-columns='3']) [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    [data-bl-section='reviews'][data-variant='feature'] [data-slot='list'] {
+      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+      align-items: start;
+    }
+    [data-bl-section='reviews'][data-variant='feature'] [data-slot='item'][data-lead='true'] {
+      grid-row: span 2;
+    }
+    [data-bl-section='reviews'][data-variant='wall']:is([data-columns='2'], [data-columns='3']) [data-slot='list'] {
+      columns: 2;
+    }
+  }
+  @container bl-reviews (min-width: 1024px) {
+    [data-bl-section='reviews'][data-columns='3']:not([data-variant='feature']) [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='reviews'][data-variant='wall'][data-columns='3'] [data-slot='list'] {
+      columns: 3;
+    }
+  }
+
+  /* 31-cta.css */
+  /* S8 CTA band: layout only. The photo variant's backdrop fills the band behind the content. */
+
+  [data-bl-section='cta'] {
+    container: bl-cta / inline-size;
+    isolation: isolate;
+  }
+  [data-bl-section='cta'] :where(h2, p) {
+    margin: 0;
+  }
+  [data-bl-section='cta'] > [data-slot='media'] {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-bl-section='cta'] > [data-slot='media'] :where(img, picture, video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  [data-bl-section='cta'] [data-slot='content'] {
+    display: grid;
+    justify-items: start;
+    align-content: start;
+    gap: 1rem;
+  }
+  [data-bl-section='cta'][data-align='center'] [data-slot='content'] {
+    justify-items: center;
+    text-align: center;
+  }
+  [data-bl-section='cta'] [data-slot='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1.25rem;
+    margin-top: 0.5rem;
+  }
+  [data-bl-section='cta'][data-align='center'] [data-slot='actions'] {
+    justify-content: center;
+  }
+  [data-bl-section='cta'][data-variant='form'] > [data-slot='inner'] {
+    display: grid;
+    gap: 2.5rem;
+  }
+
+  @container bl-cta (min-width: 1024px) {
+    [data-bl-section='cta'][data-variant='form'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+      align-items: start;
+      gap: 4rem;
+    }
+  }
+
+  /* 32-footer.css */
+  /* S27 footer: layout only. Tone (light, ink or the photo panel) comes from each site's skin. */
+
+  [data-bl='footer'] {
+    position: relative;
+    isolation: isolate;
+    container: bl-footer / inline-size;
+  }
+  [data-bl='footer'] :where(ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl='footer'] :where(p, h2) {
+    margin: 0;
+  }
+  [data-bl='footer'] > [data-slot='decoration'] {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  [data-bl='footer'] [data-slot='panel'] {
+    position: relative;
+    isolation: isolate;
+  }
+  [data-bl='footer'] [data-slot='panel'] > [data-slot='media'] {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-bl='footer'] [data-slot='panel'] > [data-slot='media'] :where(img, picture) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  [data-bl='footer'] [data-slot='inner'] {
+    display: grid;
+    gap: 2.5rem;
+    max-width: var(--bl-container, 80rem);
+    margin-inline: auto;
+    padding: var(--bl-space-section, 4rem) var(--bl-gutter, 1.25rem) 3rem;
+  }
+  [data-bl='footer'] [data-slot='brand'] {
+    display: grid;
+    align-content: start;
+    gap: 1.25rem;
+  }
+  [data-bl='footer'] [data-slot='logo'] {
+    display: inline-flex;
+    justify-self: start;
+  }
+  [data-bl='footer'] [data-slot='logo'] img {
+    display: block;
+    width: auto;
+    height: var(--bl-footer-logo-h, 56px);
+  }
+  [data-bl='footer'] [data-slot='licences'] {
+    display: grid;
+    gap: 0.25rem;
+  }
+  /* WCAG 2.5.8: every footer link is at least 24 px tall without relying on the spacing exception. */
+  [data-bl='footer'] [data-slot='licenceLink'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+  [data-bl='footer'] [data-slot='social'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  [data-bl='footer'] [data-slot='socialLink'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+  [data-bl='footer'] [data-slot='social'] svg {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+  [data-bl='footer'] [data-slot='contact'] {
+    display: grid;
+    justify-items: start;
+    gap: 0.25rem;
+  }
+  [data-bl='footer'] [data-slot='contact'] > a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+  [data-bl='footer'] [data-slot='columns'] {
+    display: grid;
+    gap: 2rem;
+  }
+  [data-bl='footer'] [data-slot='columns'][data-accordion='true'] {
+    gap: 0;
+  }
+  [data-bl='footer'] [data-slot='column'] > [data-slot='list'] {
+    display: grid;
+    gap: 0.15rem;
+    margin-top: 0.75rem;
+  }
+  [data-bl='footer'] [data-slot='column'] > [data-slot='list'] a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  [data-bl='footer'] [data-slot='toggle'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 52px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-align: start;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+  [data-bl='footer'] [data-slot='toggle'] svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    transition: rotate 150ms ease;
+  }
+  [data-bl='footer'] [data-slot='toggle'][aria-expanded='true'] svg {
+    rotate: 180deg;
+  }
+  [data-bl='footer'] [data-slot='columns'][data-accordion='true'] [data-slot='column'] > [data-slot='list'] {
+    margin-top: 0;
+    padding-bottom: 1rem;
+  }
+  [data-bl='footer'] [data-slot='bottomInner'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem 1.5rem;
+    max-width: var(--bl-container, 80rem);
+    margin-inline: auto;
+    padding: 1.25rem var(--bl-gutter, 1.25rem);
+  }
+  /* The ABN never breaks across lines on a phone. */
+  [data-bl='footer'] [data-slot='legal'] > span:not([aria-hidden]) {
+    white-space: nowrap;
+  }
+  [data-bl='footer'] [data-slot='policies'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1.25rem;
+  }
+  [data-bl='footer'] [data-slot='policyLink'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+  }
+
+  @container bl-footer (min-width: 640px) {
+    [data-bl='footer'] [data-slot='columns'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @container bl-footer (min-width: 1024px) {
+    [data-bl='footer'] [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
+      gap: 4rem;
+    }
+  }
+
+  /* 33-faqs.css */
+  /* Accordion and FAQs: native <details name> disclosures (one open at a time); two columns from 48rem of the section. */
+
+  [data-bl='accordion'] > [data-slot='item'] > [data-slot='summary'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    min-height: 44px;
+    cursor: pointer;
+    list-style: none;
+  }
+  [data-bl='accordion'] > [data-slot='item'] > [data-slot='summary']::-webkit-details-marker {
+    display: none;
+  }
+  [data-bl='accordion'] [data-slot='marker'] svg {
+    width: 1.25em;
+    height: 1.25em;
+    transition: transform 150ms ease;
+  }
+  [data-bl='accordion'] > [data-slot='item'][open] > [data-slot='summary'] [data-slot='marker'] svg {
+    transform: rotate(180deg);
+  }
+
+  [data-bl-section='faqs'] {
+    container-type: inline-size;
+  }
+  [data-bl-section='faqs'] [data-slot='columns'] {
+    display: grid;
+    gap: 0 calc(var(--bl-gutter, 1.25rem) * 2);
+  }
+  @container (min-width: 48rem) {
+    [data-bl-section='faqs'] [data-slot='columns'][data-columns='2'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      align-items: start;
+    }
+  }
+
+  /* 34-prices.css */
+  /* Price table and price guide. Below 40rem of its own width the table stacks its rows; its explicit roles keep the
+     table semantics, and each cell shows its column label (aria-hidden) for sighted readers. Lists styled without
+     bullets carry role="list", so Safari keeps announcing them as lists. */
+
+  [data-bl='price-table'] {
+    container-type: inline-size;
+  }
+  [data-bl='price-table'] > table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  [data-bl='price-table'] caption,
+  [data-bl='price-table'] :where(th, td) {
+    text-align: start;
+    vertical-align: top;
+  }
+  [data-bl='price-table'] [data-slot='label'] {
+    display: none;
+  }
+  :where([data-bl='price-table'], [data-bl-section='price-guide']) [data-slot='range'] {
+    white-space: nowrap;
+  }
+  @container (max-width: 40rem) {
+    [data-bl='price-table'] :where(table, tbody, tr, th, td) {
+      display: block;
+    }
+    [data-bl='price-table'] thead {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    [data-bl='price-table'] [data-slot='label'] {
+      display: block;
+    }
+  }
+
+  [data-bl-section='price-guide'] :where([data-slot='cards'], [data-slot='bands']) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='price-guide'] [data-slot='cards'] {
+    display: grid;
+    gap: var(--bl-gutter, 1.25rem);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  }
+  [data-bl-section='price-guide'] [data-slot='bands'] {
+    display: grid;
+    gap: 0.75rem;
+  }
+  [data-bl-section='price-guide'] [data-slot='band'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.25rem 1rem;
+  }
+  [data-bl-section='price-guide'] [data-slot='band'] > :where([data-slot='includes'], [data-slot='excludes']) {
+    flex-basis: 100%;
+  }
+
+  /* 35-proof.css */
+  /* Proof strip: one wrapping row (inline) or a grid of tiles. */
+
+  [data-bl-section='proof-strip'] [data-slot='list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 2rem;
+  }
+  [data-bl-section='proof-strip'][data-variant='tiles'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    align-items: stretch;
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='proof-strip'] [data-slot='item'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.5rem;
+  }
+  [data-bl-section='proof-strip'] [data-slot='icon'] svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+  [data-bl-section='proof-strip'] [data-slot='logos'] {
+    margin-top: 1.5rem;
+  }
+
+  /* 36-page-header.css */
+  /* Page header. The photo variant puts the site's image and its scrim behind the text, edge to edge. */
+
+  [data-bl-section='page-header'][data-variant='photo'] {
+    isolation: isolate;
+    overflow: hidden;
+  }
+  [data-bl-section='page-header'][data-variant='photo'] > [data-slot='inner'] {
+    position: static;
+  }
+  [data-bl-section='page-header'] :where([data-slot='media'], [data-slot='scrim']) {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+  }
+  [data-bl-section='page-header'] [data-slot='media'] :where(img, picture, video) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* 37-contact.css */
+  /* Contact block: the form and the details side by side from 48rem of the section (form at the start by default). */
+
+  [data-bl-section='contact'] {
+    container-type: inline-size;
+  }
+  [data-bl-section='contact'] > [data-slot='inner'] {
+    display: grid;
+    gap: calc(var(--bl-gutter, 1.25rem) * 2);
+  }
+  [data-bl-section='contact'] [data-slot='list'] {
+    margin: 0;
+  }
+  [data-bl-section='contact'] [data-slot='value'] {
+    margin: 0 0 1rem;
+  }
+  [data-bl-section='contact'] [data-slot='line'] {
+    display: block;
+  }
+  @container (min-width: 48rem) {
+    [data-bl-section='contact'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      align-items: start;
+    }
+    [data-bl-section='contact'][data-form-side='end'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    }
+    [data-bl-section='contact'][data-form-side='end'] [data-slot='form'] {
+      order: 2;
+    }
+  }
+
+  /* 38-sequence.css */
+  /* Section tones assigned by SectionSequence, from the site's tokens. The photo tone takes its look from its image. */
+
+  [data-bl-section][data-tone='canvas'] {
+    background-color: var(--bl-color-canvas, transparent);
+  }
+  [data-bl-section][data-tone='surface'] {
+    background-color: var(--bl-color-surface, transparent);
+  }
+  [data-bl-section][data-tone='band'] {
+    background-color: var(--bl-color-band, transparent);
+    color: var(--bl-color-on-band, inherit);
+  }
+
 }

package/package.json

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