@brandlab-digital/site-next 3.12.1 → 3.14.0

package/dist/ui-kit/structure.css

@@ -97,11 +97,10 @@
 
   [data-bl='stars'] {
     display: inline-flex;
-    gap: 0.125rem;
     color: var(--bl-color-star, #f5b301);
   }
-  [data-bl='stars'] [data-slot='star'] svg {
-    width: 1em;
+  [data-bl='stars'] > svg {
+    width: 5.4em;
     height: 1em;
   }
   [data-bl='stars'] [data-slot='star'][data-state='off'] {
@@ -120,6 +119,198 @@
     }
   }
 
+  /* 05-media.css */
+  /* MediaFrame and Media (F13), the library's one image path: the frame holds the image at its own shape, or cropped to
+     an allowed ratio around the focal point (inline object-position); a caption flows under it. An AI image's
+     "Illustration" label (inside the figcaption) sits over the image's top corner; the site colours it. */
+
+  [data-bl='media'] {
+    position: relative;
+    margin: 0;
+  }
+  [data-bl='media'] > img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+  [data-bl='media'][data-fit='fluid'] > img {
+    width: 100%;
+  }
+  [data-bl='media'][data-ratio] > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  [data-bl='media'][data-ratio='16:9'] > img {
+    aspect-ratio: 16 / 9;
+  }
+  [data-bl='media'][data-ratio='4:5'] > img {
+    aspect-ratio: 4 / 5;
+  }
+  [data-bl='media'][data-ratio='4:3'] > img {
+    aspect-ratio: 4 / 3;
+  }
+  [data-bl='media'][data-ratio='3:2'] > img {
+    aspect-ratio: 3 / 2;
+  }
+  [data-bl='media'] [data-slot='label'] {
+    position: absolute;
+    inset-block-start: 0.5rem;
+    inset-inline-start: 0.5rem;
+    padding: 0.125rem 0.5rem;
+    background: var(--bl-color-surface, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  /* Behind the page header's text, the figure fills its media slot. */
+  :where([data-bl-section] [data-slot='media']) > [data-bl='media'][data-ratio] {
+    height: 100%;
+  }
+
+  /* 05-primitives.css */
+  /* Primitives (3.14.0): Button, Eyebrow, TickList, LinkList, Card, Badge and Chip, Stat, MediaFrame. Layout only. */
+
+  button[data-bl='button'] {
+    font: inherit;
+    cursor: pointer;
+  }
+  button[data-bl='button']:disabled {
+    cursor: not-allowed;
+  }
+
+  [data-bl='eyebrow'] {
+    margin: 0;
+  }
+
+  /* TickList: one column, or two from the first width up (the hero checklist). */
+  [data-bl='tick-list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 0.5rem 1.5rem;
+  }
+  [data-bl='tick-list'][data-columns='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  [data-bl='tick-list'] [data-slot='item'] {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  [data-bl='tick-list'] [data-slot='tick'] {
+    color: var(--bl-color-action, currentColor);
+  }
+  [data-bl='tick-list'] [data-slot='tick'] svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+  /* tick: 'rule': no svg, a short rule on the first line's centre (AA's ruled lists). */
+  [data-bl='tick-list'][data-tick='rule'] [data-slot='tick'] {
+    flex: none;
+    width: 0.875em;
+    height: 2px;
+    margin-top: 0.7em;
+    background: currentColor;
+  }
+
+  /* LinkList: plain entries, one column on phones, two from 40rem, the chosen count from 64rem. */
+  [data-bl='link-list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    column-gap: 2.5rem;
+  }
+  [data-bl='link-list'] > li > a {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+  }
+  @media (min-width: 40rem) {
+    [data-bl='link-list']:not([data-columns='1']) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 64rem) {
+    [data-bl='link-list'][data-columns='3'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl='link-list'][data-columns='4'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  /* Card: media then body; a linked card is one hit area through its title link. */
+  [data-bl='card'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  [data-bl='card'] [data-slot='title'] {
+    margin: 0;
+  }
+  [data-bl='card'] [data-slot='link']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  @media (min-width: 40rem) {
+    [data-bl='card'][data-media='start'] {
+      flex-direction: row;
+    }
+    [data-bl='card'][data-media='start'] > [data-slot='media'] {
+      flex: 0 0 40%;
+    }
+  }
+
+  [data-bl='badge'],
+  [data-bl='chip'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375em;
+  }
+  :where([data-bl='badge'], [data-bl='chip']) [data-slot='icon'] svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  [data-bl='stat'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  [data-bl='stat'] [data-slot='link'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+
+  /* 06-breadcrumbs.css */
+  /* Breadcrumbs (F11): one wrapping line; the separator is drawn here (no element per crumb) with empty alternative
+     text, so assistive technology reads the list alone. A skin may restyle or replace it on the same selector. */
+
+  [data-bl='breadcrumbs'] [data-slot='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl='breadcrumbs'] [data-slot='item'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  [data-bl='breadcrumbs'] [data-slot='item'] + [data-slot='item']::before {
+    content: '/';
+    content: '/' / '';
+    opacity: 0.6;
+  }
+
   /* 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
@@ -911,6 +1102,103 @@
     padding: 1rem var(--bl-gutter, 1.25rem) var(--bl-gutter, 1.25rem);
   }
 
+  /* 29-hero.css */
+  /* S1 Hero (3.14.0): layout only. Phones stack in source order (text, actions, checklist, photo at 4:3, form). From
+     1024 px of the hero's own width, `split` puts the text and form on one side and the photo on the other, and
+     `full-bleed` puts the photo behind both, under the skin's scrim, with the form as a card beside the text. */
+
+  [data-bl-section='hero'] {
+    container: bl-hero / inline-size;
+    isolation: isolate;
+  }
+  [data-bl-section='hero'] :where(h1, p) {
+    margin: 0;
+  }
+  [data-bl-section='hero'] > [data-slot='inner'] {
+    display: grid;
+    gap: 1.5rem;
+  }
+  [data-bl-section='hero'] [data-slot='content'] {
+    display: grid;
+    align-content: start;
+    gap: 1rem;
+  }
+  [data-bl-section='hero'] [data-slot='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  [data-bl-section='hero'] [data-slot='scrim'] {
+    display: none;
+  }
+  /* The root is the bl-hero container, and a container never matches its own query, so the full-bleed root is set up
+     here: it holds the absolute photo and scrim from 1024 px. */
+  [data-bl-section='hero'][data-variant='full-bleed'] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @container bl-hero (min-width: 1024px) {
+    [data-bl-section='hero'][data-height='tall'] > [data-slot='inner'] {
+      padding-block: calc(var(--bl-space-section, 4rem) * 1.5);
+    }
+    [data-bl-section='hero'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-areas:
+        'content media'
+        'form media';
+      grid-template-rows: auto 1fr;
+      column-gap: 3rem;
+      align-items: start;
+    }
+    [data-bl-section='hero'][data-media-side='start'] > [data-slot='inner'] {
+      grid-template-areas:
+        'media content'
+        'media form';
+    }
+    [data-bl-section='hero'] [data-slot='content'] {
+      grid-area: content;
+    }
+    [data-bl-section='hero'] > [data-slot='inner'] > [data-slot='media'] {
+      grid-area: media;
+      align-self: stretch;
+    }
+    [data-bl-section='hero'] > [data-slot='inner'] > [data-slot='form'] {
+      grid-area: form;
+    }
+    /* The photo fills its side: no white gaps beside it (Romie, Gabrael and H&R). */
+    [data-bl-section='hero'] [data-slot='media'] > [data-bl='media'] {
+      height: 100%;
+    }
+    [data-bl-section='hero'] [data-slot='media'] > [data-bl='media'] > img {
+      height: 100%;
+      min-height: 24rem;
+      aspect-ratio: auto;
+    }
+
+    /* full-bleed: the photo behind the whole hero; text and the form card side by side over it. */
+    [data-bl-section='hero'][data-variant='full-bleed'] > [data-slot='inner'] {
+      position: static;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
+      grid-template-areas: 'content form';
+      grid-template-rows: auto;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] > [data-slot='inner'] > [data-slot='media'] {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] [data-slot='media'] > [data-bl='media'] > img {
+      min-height: 0;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] [data-slot='scrim'] {
+      display: block;
+      position: absolute;
+      inset: 0;
+    }
+  }
+
   /* 30-reviews.css */
   /* S7 reviews band and the rating chip: layout only. Colours, fonts and shapes come from each site's skin. */
 
@@ -1480,4 +1768,96 @@
     color: var(--bl-color-on-band, inherit);
   }
 
+  /* 39-services.css */
+  /* Services grid (S4). `rows`: text beside the photo from 1024 px of its own width, the photo alternating sides by
+     default. `cards`: a grid of up to 4 columns, the photo on top. `compact`: a lean, wrapping list of links. Lists
+     styled without bullets carry role="list", so Safari keeps announcing them as lists. */
+
+  [data-bl-section='services'] {
+    container: bl-services / inline-size;
+  }
+  [data-bl-section='services'] [data-slot='list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='services'] [data-slot='list'] [data-slot='points'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='services'] [data-slot='list'] [data-slot='title'] {
+    margin: 0;
+  }
+
+  /* Rows: text first in reading order; the photo above it on phones. */
+  [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item'] {
+    display: grid;
+    gap: 1.25rem;
+    padding-block: 2rem;
+  }
+  [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+
+  /* Cards: the photo on top. */
+  [data-bl-section='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='services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  [data-bl-section='services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+
+  /* Compact: every service as one link, in columns. */
+  [data-bl-section='services'][data-variant='compact'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+    gap: 0 var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='services'][data-variant='compact'] [data-slot='list'] > [data-slot='item'] > [data-slot='link'] {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+  }
+
+  @container bl-services (min-width: 1024px) {
+    [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item']:has(> [data-slot='media']) {
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      column-gap: clamp(3rem, 6cqi, 5rem);
+    }
+    [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+      grid-row: 1;
+      grid-column: 1;
+    }
+    [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item']:has(> [data-slot='media']) > [data-slot='body'] {
+      grid-row: 1;
+      grid-column: 2;
+    }
+    [data-bl-section='services'][data-variant='rows'][data-media-side='end'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'],
+    [data-bl-section='services'][data-variant='rows'][data-media-side='alternate'] [data-slot='list'] > [data-slot='item']:nth-child(even) > [data-slot='media'] {
+      grid-column: 2;
+    }
+    [data-bl-section='services'][data-variant='rows'][data-media-side='end'] [data-slot='list'] > [data-slot='item']:has(> [data-slot='media']) > [data-slot='body'],
+    [data-bl-section='services'][data-variant='rows'][data-media-side='alternate'] [data-slot='list'] > [data-slot='item']:nth-child(even):has(> [data-slot='media']) > [data-slot='body'] {
+      grid-column: 1;
+    }
+    [data-bl-section='services'][data-variant='cards'][data-columns='2'] [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    [data-bl-section='services'][data-variant='cards'][data-columns='3'] [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='services'][data-variant='cards'][data-columns='4'] [data-slot='list'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandlab-digital/site-next",
-  "version": "3.12.1",
+  "version": "3.14.0",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@brandlab-digital/site-core": "3.12.1",
+    "@brandlab-digital/site-core": "3.14.0",
     "browser-image-compression": "2.0.2",
     "pdf-lib": "1.17.1",
     "server-only": "0.0.1",
@@ -145,6 +145,10 @@
       "browser": null,
       "import": "./dist/google-business-reviews-server.js"
     },
+    "./estate-segment": {
+      "types": "./dist/estate-segment.d.ts",
+      "import": "./dist/estate-segment.js"
+    },
     "./image-runtime": {
       "types": "./dist/image-runtime.d.ts",
       "import": "./dist/image-runtime.js",
@@ -158,6 +162,10 @@
       "types": "./dist/ui-kit/skin-index.d.ts",
       "import": "./dist/ui-kit/skin-index.js"
     },
+    "./ui-kit/icons": {
+      "types": "./dist/ui-kit/icon-glyphs.d.ts",
+      "import": "./dist/ui-kit/icon-glyphs.js"
+    },
     "./ui-kit/primitives": {
       "types": "./dist/ui-kit/primitives/index.d.ts",
       "import": "./dist/ui-kit/primitives/index.js"