@brandlab-digital/site-next 3.6.0 → 3.8.0

package/dist/ui-kit/primitives/quote-button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `QuoteButton`: the quote action. A server-rendered link to the page's quote form (for example `/contact#quote`), so
+ * it works before scripts run. When a `QuoteDialog` is on the page (3.10.0) it opens the dialog instead; on the
+ * contact page the link scrolls to the form. It carries the `data-bl-cta` hooks only: from 3.9.0 the shared
+ * instrumentation reads them and sends `lead_cta_click` when lead diagnostics are on. Nothing is sent in 3.8.0, and
+ * nothing here emits events itself.
+ */
+import Link from 'next/link';
+import { Icon } from '../icons.js';
+import { slot } from '../skin.js';
+export function QuoteButton({ label, href, placement, ctaId, variant = 'primary', layout, classes }) {
+    return (_jsxs(Link, { href: href, "data-bl": "quote-button", "data-variant": variant, "data-size": layout?.size ?? 'regular', "data-bl-cta": ctaId, "data-bl-cta-placement": placement, className: classes?.root, children: [_jsx("span", { ...slot(classes, 'label'), children: label }), layout?.icon === false ? null : (_jsx("span", { ...slot(classes, 'icon'), children: _jsx(Icon, { name: "arrow" }) }))] }));
+}
+//# sourceMappingURL=quote-button.js.map

package/dist/ui-kit/primitives/quote-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote-button.js","sourceRoot":"","sources":["../../../src/ui-kit/primitives/quote-button.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,OAAO,IAAI,MAAM,WAAW,CAAA;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAiBjD,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,OAAO,EAAoB;IACnH,OAAO,CACL,MAAC,IAAI,IACH,IAAI,EAAE,IAAI,aACF,cAAc,kBACR,OAAO,eACV,MAAM,EAAE,IAAI,IAAI,SAAS,iBACvB,KAAK,2BACK,SAAS,EAChC,SAAS,EAAE,OAAO,EAAE,IAAI,aAExB,kBAAU,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,YAAG,KAAK,GAAQ,EAC/C,MAAM,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,kBAAU,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,YAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GAChB,CACR,IACI,CACR,CAAA;AACH,CAAC","sourcesContent":["/**\n * `QuoteButton`: the quote action. A server-rendered link to the page's quote form (for example `/contact#quote`), so\n * it works before scripts run. When a `QuoteDialog` is on the page (3.10.0) it opens the dialog instead; on the\n * contact page the link scrolls to the form. It carries the `data-bl-cta` hooks only: from 3.9.0 the shared\n * instrumentation reads them and sends `lead_cta_click` when lead diagnostics are on. Nothing is sent in 3.8.0, and\n * nothing here emits events itself.\n */\nimport Link from 'next/link'\nimport type { LeadCtaPlacement } from '../../analytics.js'\nimport { Icon } from '../icons.js'\nimport { slot, type SkinEntry } from '../skin.js'\nimport type { ButtonVariant } from './links.js'\n\nexport type QuoteButtonSlot = 'root' | 'label' | 'icon'\nexport type QuoteButtonSkin = SkinEntry<QuoteButtonSlot, ButtonVariant, { size?: 'regular' | 'large'; icon?: boolean }>\n\nexport interface QuoteButtonProps extends QuoteButtonSkin {\n  /** The site's recorded quote label, or one from the closed list (C5), for example \"Get a free quote\". */\n  readonly label: string\n  /** The quote form this falls back to without scripts, for example `/contact#quote`. */\n  readonly href: string\n  /** Where the button sits, for `lead_cta_click`. */\n  readonly placement: LeadCtaPlacement\n  /** A stable id for `lead_cta_click`, for example `quote-header` or `quote-cta`. */\n  readonly ctaId: string\n}\n\nexport function QuoteButton({ label, href, placement, ctaId, variant = 'primary', layout, classes }: QuoteButtonProps) {\n  return (\n    <Link\n      href={href}\n      data-bl=\"quote-button\"\n      data-variant={variant}\n      data-size={layout?.size ?? 'regular'}\n      data-bl-cta={ctaId}\n      data-bl-cta-placement={placement}\n      className={classes?.root}\n    >\n      <span {...slot(classes, 'label')}>{label}</span>\n      {layout?.icon === false ? null : (\n        <span {...slot(classes, 'icon')}>\n          <Icon name=\"arrow\" />\n        </span>\n      )}\n    </Link>\n  )\n}\n"]}

package/dist/ui-kit/skin-index.d.ts

@@ -0,0 +1,3 @@
+export { cx, skinned, slot, type SkinEntry, type SkinEntryOf, type SkinnedProps, type SlotClasses } from './skin.js';
+export type { BrandlabSkin } from './brandlab-skin.js';
+//# sourceMappingURL=skin-index.d.ts.map

package/dist/ui-kit/skin-index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin-index.d.ts","sourceRoot":"","sources":["../../src/ui-kit/skin-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACpH,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/ui-kit/skin-index.js

@@ -0,0 +1,2 @@
+export { cx, skinned, slot } from './skin.js';
+//# sourceMappingURL=skin-index.js.map

package/dist/ui-kit/skin-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin-index.js","sourceRoot":"","sources":["../../src/ui-kit/skin-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAyE,MAAM,WAAW,CAAA","sourcesContent":["export { cx, skinned, slot, type SkinEntry, type SkinEntryOf, type SkinnedProps, type SlotClasses } from './skin.js'\nexport type { BrandlabSkin } from './brandlab-skin.js'\n"]}

package/dist/ui-kit/skin.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The skin model of the Brandlab ui-kit. A site gives every shared component its own look through one skin entry per
+ * component: a variant from the component's closed list, typed layout options and one class string per named slot.
+ * Colours, fonts and shapes come from the site's `--bl-*` tokens and these classes; behaviour, semantics, accessible
+ * names and analytics hooks never appear here, so a skin can't change them.
+ */
+import { type ComponentType } from 'react';
+/** One class string per named slot. Tailwind v4 utilities, CSS Module class names or nothing (plain CSS on hooks). */
+export type SlotClasses<Slot extends string> = Readonly<Partial<Record<Slot, string>>>;
+/** A component's skin: its variant, its layout options and its slot classes. Every field is optional. */
+export interface SkinEntry<Slot extends string, Variant extends string = never, Layout extends object = Record<never, never>> {
+    readonly variant?: Variant;
+    readonly layout?: Readonly<Layout>;
+    readonly classes?: SlotClasses<Slot>;
+}
+type SkinKeys = 'variant' | 'layout' | 'classes';
+/** The part of a component's props a skin entry supplies. */
+export type SkinEntryOf<P> = Pick<P, Extract<keyof P, SkinKeys>>;
+/** What a page passes to a skinned component: its data, and at most a `layout` adjustment within the contract. */
+export type SkinnedProps<P> = Omit<P, 'variant' | 'classes'>;
+/**
+ * Bind a component to the site's skin entry, so pages pass data only. Returns a plain function component (no
+ * context, no client code), so it works in server components and client components alike. The skin's layout merges
+ * under the page's `layout`; the variant and classes come from the skin only.
+ *
+ * ```tsx
+ * // src/site/ui.tsx
+ * export const ReviewsBand = skinned(UI.ReviewsBand, skin.reviewsBand)
+ * ```
+ */
+export declare function skinned<P extends {
+    variant?: unknown;
+    layout?: object;
+    classes?: object;
+}>(Component: ComponentType<P>, entry: SkinEntryOf<P>): ComponentType<SkinnedProps<P>>;
+/** Join class strings, dropping empty parts. Returns `undefined` when nothing is left, so no empty `class` renders. */
+export declare function cx(...parts: readonly (string | false | null | undefined)[]): string | undefined;
+/**
+ * The stable hook for one named part: `data-slot` plus the skin's class for it. Spread it onto the element:
+ * `<div {...slot(classes, 'inner')}>`. Slot names, nesting and element types are public API (a minor release to
+ * change); a skin's class never replaces the hook.
+ */
+export declare function slot<Slot extends string>(classes: SlotClasses<Slot> | undefined, name: Slot, extra?: string): {
+    'data-slot': Slot;
+    className: string | undefined;
+};
+export {};
+//# sourceMappingURL=skin.d.ts.map

package/dist/ui-kit/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","sourceRoot":"","sources":["../../src/ui-kit/skin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAiB,KAAK,aAAa,EAAkB,MAAM,OAAO,CAAA;AAEzE,sHAAsH;AACtH,MAAM,MAAM,WAAW,CAAC,IAAI,SAAS,MAAM,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;AAEtF,yGAAyG;AACzG,MAAM,WAAW,SAAS,CACxB,IAAI,SAAS,MAAM,EACnB,OAAO,SAAS,MAAM,GAAG,KAAK,EAC9B,MAAM,SAAS,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;IAE5C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;CACrC;AAED,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEhD,6DAA6D;AAC7D,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAA;AAEhE,kHAAkH;AAClH,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAA;AAE5D;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EACxF,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAehC;AAED,uHAAuH;AACvH,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,GAAG,SAAS,CAG/F;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,SAAS,MAAM,EACtC,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS,EACtC,IAAI,EAAE,IAAI,EACV,KAAK,CAAC,EAAE,MAAM,GACb;IAAE,WAAW,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAEtD"}

package/dist/ui-kit/skin.js

@@ -0,0 +1,47 @@
+/**
+ * The skin model of the Brandlab ui-kit. A site gives every shared component its own look through one skin entry per
+ * component: a variant from the component's closed list, typed layout options and one class string per named slot.
+ * Colours, fonts and shapes come from the site's `--bl-*` tokens and these classes; behaviour, semantics, accessible
+ * names and analytics hooks never appear here, so a skin can't change them.
+ */
+import { createElement } from 'react';
+/**
+ * Bind a component to the site's skin entry, so pages pass data only. Returns a plain function component (no
+ * context, no client code), so it works in server components and client components alike. The skin's layout merges
+ * under the page's `layout`; the variant and classes come from the skin only.
+ *
+ * ```tsx
+ * // src/site/ui.tsx
+ * export const ReviewsBand = skinned(UI.ReviewsBand, skin.reviewsBand)
+ * ```
+ */
+export function skinned(Component, entry) {
+    const skin = entry;
+    function Skinned(props) {
+        const pageLayout = props.layout;
+        const layout = skin.layout || pageLayout ? { ...(skin.layout ?? {}), ...(pageLayout ?? {}) } : undefined;
+        const merged = {
+            ...props,
+            ...(skin.variant !== undefined ? { variant: skin.variant } : {}),
+            ...(layout ? { layout } : {}),
+            ...(skin.classes ? { classes: skin.classes } : {}),
+        };
+        return createElement(Component, merged);
+    }
+    Skinned.displayName = `Skinned(${Component.displayName ?? Component.name ?? 'Component'})`;
+    return Skinned;
+}
+/** Join class strings, dropping empty parts. Returns `undefined` when nothing is left, so no empty `class` renders. */
+export function cx(...parts) {
+    const joined = parts.filter(Boolean).join(' ');
+    return joined === '' ? undefined : joined;
+}
+/**
+ * The stable hook for one named part: `data-slot` plus the skin's class for it. Spread it onto the element:
+ * `<div {...slot(classes, 'inner')}>`. Slot names, nesting and element types are public API (a minor release to
+ * change); a skin's class never replaces the hook.
+ */
+export function slot(classes, name, extra) {
+    return { 'data-slot': name, className: cx(classes?.[name], extra) };
+}
+//# sourceMappingURL=skin.js.map

package/dist/ui-kit/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","sourceRoot":"","sources":["../../src/ui-kit/skin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,aAAa,EAAsC,MAAM,OAAO,CAAA;AAwBzE;;;;;;;;;GASG;AACH,MAAM,UAAU,OAAO,CACrB,SAA2B,EAC3B,KAAqB;IAErB,MAAM,IAAI,GAAG,KAAiE,CAAA;IAC9E,SAAS,OAAO,CAAC,KAAsB;QACrC,MAAM,UAAU,GAAI,KAA6B,CAAC,MAAM,CAAA;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QACxG,MAAM,MAAM,GAAG;YACb,GAAG,KAAK;YACR,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACnC,CAAA;QACjB,OAAO,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACzC,CAAC;IACD,OAAO,CAAC,WAAW,GAAG,WAAW,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG,CAAA;IAC1F,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,uHAAuH;AACvH,MAAM,UAAU,EAAE,CAAC,GAAG,KAAqD;IACzE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC9C,OAAO,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAA;AAC3C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAClB,OAAsC,EACtC,IAAU,EACV,KAAc;IAEd,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;AACrE,CAAC","sourcesContent":["/**\n * The skin model of the Brandlab ui-kit. A site gives every shared component its own look through one skin entry per\n * component: a variant from the component's closed list, typed layout options and one class string per named slot.\n * Colours, fonts and shapes come from the site's `--bl-*` tokens and these classes; behaviour, semantics, accessible\n * names and analytics hooks never appear here, so a skin can't change them.\n */\nimport { createElement, type ComponentType, type ReactNode } from 'react'\n\n/** One class string per named slot. Tailwind v4 utilities, CSS Module class names or nothing (plain CSS on hooks). */\nexport type SlotClasses<Slot extends string> = Readonly<Partial<Record<Slot, string>>>\n\n/** A component's skin: its variant, its layout options and its slot classes. Every field is optional. */\nexport interface SkinEntry<\n  Slot extends string,\n  Variant extends string = never,\n  Layout extends object = Record<never, never>,\n> {\n  readonly variant?: Variant\n  readonly layout?: Readonly<Layout>\n  readonly classes?: SlotClasses<Slot>\n}\n\ntype SkinKeys = 'variant' | 'layout' | 'classes'\n\n/** The part of a component's props a skin entry supplies. */\nexport type SkinEntryOf<P> = Pick<P, Extract<keyof P, SkinKeys>>\n\n/** What a page passes to a skinned component: its data, and at most a `layout` adjustment within the contract. */\nexport type SkinnedProps<P> = Omit<P, 'variant' | 'classes'>\n\n/**\n * Bind a component to the site's skin entry, so pages pass data only. Returns a plain function component (no\n * context, no client code), so it works in server components and client components alike. The skin's layout merges\n * under the page's `layout`; the variant and classes come from the skin only.\n *\n * ```tsx\n * // src/site/ui.tsx\n * export const ReviewsBand = skinned(UI.ReviewsBand, skin.reviewsBand)\n * ```\n */\nexport function skinned<P extends { variant?: unknown; layout?: object; classes?: object }>(\n  Component: ComponentType<P>,\n  entry: SkinEntryOf<P>,\n): ComponentType<SkinnedProps<P>> {\n  const skin = entry as { variant?: unknown; layout?: object; classes?: object }\n  function Skinned(props: SkinnedProps<P>): ReactNode {\n    const pageLayout = (props as { layout?: object }).layout\n    const layout = skin.layout || pageLayout ? { ...(skin.layout ?? {}), ...(pageLayout ?? {}) } : undefined\n    const merged = {\n      ...props,\n      ...(skin.variant !== undefined ? { variant: skin.variant } : {}),\n      ...(layout ? { layout } : {}),\n      ...(skin.classes ? { classes: skin.classes } : {}),\n    } as unknown as P\n    return createElement(Component, merged)\n  }\n  Skinned.displayName = `Skinned(${Component.displayName ?? Component.name ?? 'Component'})`\n  return Skinned\n}\n\n/** Join class strings, dropping empty parts. Returns `undefined` when nothing is left, so no empty `class` renders. */\nexport function cx(...parts: readonly (string | false | null | undefined)[]): string | undefined {\n  const joined = parts.filter(Boolean).join(' ')\n  return joined === '' ? undefined : joined\n}\n\n/**\n * The stable hook for one named part: `data-slot` plus the skin's class for it. Spread it onto the element:\n * `<div {...slot(classes, 'inner')}>`. Slot names, nesting and element types are public API (a minor release to\n * change); a skin's class never replaces the hook.\n */\nexport function slot<Slot extends string>(\n  classes: SlotClasses<Slot> | undefined,\n  name: Slot,\n  extra?: string,\n): { 'data-slot': Slot; className: string | undefined } {\n  return { 'data-slot': name, className: cx(classes?.[name], extra) }\n}\n"]}

package/dist/ui-kit/structure.css

@@ -0,0 +1,123 @@
+/* @brandlab-digital/site-next ui-kit structure.css: behaviour and layout only. Each site styles the components. */
+@layer theme, base, bl-structure, components, utilities;
+
+@layer bl-structure {
+  /* 00-base.css */
+  /* Base: scoped resets, focus, scroll padding, the visually-hidden utility and reduced motion. */
+
+  :where([data-bl], [data-bl-section]),
+  :where([data-bl], [data-bl-section]) *,
+  :where([data-bl], [data-bl-section]) *::before,
+  :where([data-bl], [data-bl-section]) *::after {
+    box-sizing: border-box;
+  }
+
+  :where([data-bl], [data-bl-section]) :where(svg) {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  :where([data-bl], [data-bl-section]) :where([hidden]:not([hidden='until-found'])) {
+    display: none !important;
+  }
+
+  /* WCAG 2.4.11: a focused element is never hidden under the sticky header or the call bar. */
+  html {
+    scroll-padding-top: calc(var(--bl-header-height, 0px) + 0.5rem);
+    scroll-padding-bottom: calc(var(--bl-callbar-height, 0px) + 0.5rem);
+  }
+
+  :where([data-bl], [data-bl-section]) :focus-visible {
+    outline: 2px solid var(--bl-color-focus, currentColor);
+    outline-offset: 3px;
+  }
+
+  [data-bl-visually-hidden] {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+  }
+
+  [data-bl='container'] {
+    width: 100%;
+    max-width: var(--bl-container, 80rem);
+    margin-inline: auto;
+    padding-inline: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl='container'][data-width='narrow'] {
+    max-width: min(var(--bl-container, 80rem), 48rem);
+  }
+  [data-bl='container'][data-width='wide'] {
+    max-width: calc(var(--bl-container, 80rem) + 12rem);
+  }
+
+  [data-bl-section] {
+    position: relative;
+    padding-block: var(--bl-space-section, 4rem);
+  }
+  [data-bl-section] > [data-slot='inner'] {
+    position: relative;
+    max-width: var(--bl-container, 80rem);
+    margin-inline: auto;
+    padding-inline: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section] > [data-slot='decoration'] {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  /* WCAG 2.5.8 and the 44 px rule for primary actions. */
+  [data-bl='button'],
+  [data-bl='quote-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 44px;
+    text-decoration: none;
+  }
+  [data-bl='phone-link'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 24px;
+  }
+  [data-bl='phone-link'][data-variant='button'] {
+    min-height: 44px;
+  }
+  :where([data-bl='button'], [data-bl='quote-button'], [data-bl='phone-link']) [data-slot='icon'] svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  [data-bl='stars'] {
+    display: inline-flex;
+    gap: 0.125rem;
+    color: var(--bl-color-star, #f5b301);
+  }
+  [data-bl='stars'] [data-slot='star'] svg {
+    width: 1em;
+    height: 1em;
+  }
+  [data-bl='stars'] [data-slot='star'][data-state='off'] {
+    opacity: 0.3;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-bl], [data-bl-section]),
+    :where([data-bl], [data-bl-section]) *,
+    :where([data-bl], [data-bl-section]) *::before,
+    :where([data-bl], [data-bl-section]) *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+}

package/dist/ui-kit/types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Data shapes shared by the ui-kit components. A site passes data in these shapes; it never passes markup, ARIA or
+ * event props, so behaviour and semantics stay locked in the components.
+ */
+/**
+ * A phone number ready to render: the number as the business shows it and its `tel:` href. Take both from the
+ * derived business facts (`deriveBusinessFacts(business).phone`), never type them by hand: C10 holds every `tel:` to
+ * the evidence-file phone. Mobiles and landlines use `tel:+61…`; 13, 1300 and 1800 numbers use their national digits.
+ */
+export interface UiPhone {
+    readonly display: string;
+    readonly telHref: string;
+}
+/** A plain link. */
+export interface UiLink {
+    readonly label: string;
+    readonly href: string;
+}
+export declare const UI_SOCIAL_KINDS: readonly ["facebook", "instagram", "google", "linkedin", "youtube", "tiktok"];
+export type UiSocialKind = (typeof UI_SOCIAL_KINDS)[number];
+/** A social or Business Profile link. `label` is the accessible name, for example "Abloom on Facebook". */
+export interface UiSocial {
+    readonly kind: UiSocialKind;
+    readonly label: string;
+    readonly href: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/ui-kit/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ui-kit/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;GAIG;AACH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CACzB;AAED,oBAAoB;AACpB,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,eAAe,+EAAgF,CAAA;AAC5G,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,2GAA2G;AAC3G,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB"}

package/dist/ui-kit/types.js

@@ -0,0 +1,6 @@
+/**
+ * Data shapes shared by the ui-kit components. A site passes data in these shapes; it never passes markup, ARIA or
+ * event props, so behaviour and semantics stay locked in the components.
+ */
+export const UI_SOCIAL_KINDS = ['facebook', 'instagram', 'google', 'linkedin', 'youtube', 'tiktok'];
+//# sourceMappingURL=types.js.map

package/dist/ui-kit/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/ui-kit/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAkBH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAA","sourcesContent":["/**\n * Data shapes shared by the ui-kit components. A site passes data in these shapes; it never passes markup, ARIA or\n * event props, so behaviour and semantics stay locked in the components.\n */\n\n/**\n * A phone number ready to render: the number as the business shows it and its `tel:` href. Take both from the\n * derived business facts (`deriveBusinessFacts(business).phone`), never type them by hand: C10 holds every `tel:` to\n * the evidence-file phone. Mobiles and landlines use `tel:+61…`; 13, 1300 and 1800 numbers use their national digits.\n */\nexport interface UiPhone {\n  readonly display: string\n  readonly telHref: string\n}\n\n/** A plain link. */\nexport interface UiLink {\n  readonly label: string\n  readonly href: string\n}\n\nexport const UI_SOCIAL_KINDS = ['facebook', 'instagram', 'google', 'linkedin', 'youtube', 'tiktok'] as const\nexport type UiSocialKind = (typeof UI_SOCIAL_KINDS)[number]\n\n/** A social or Business Profile link. `label` is the accessible name, for example \"Abloom on Facebook\". */\nexport interface UiSocial {\n  readonly kind: UiSocialKind\n  readonly label: string\n  readonly href: string\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandlab-digital/site-next",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -10,7 +10,8 @@
   "private": false,
   "type": "module",
   "sideEffects": [
-    "./dist/image-runtime.js"
+    "./dist/image-runtime.js",
+    "./dist/ui-kit/structure.css"
   ],
   "files": [
     "dist"
@@ -19,12 +20,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.json",
+    "build": "rm -rf dist && tsc -p tsconfig.json && node scripts/build-structure-css.mjs",
     "test": "vitest run",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@brandlab-digital/site-core": "3.6.0",
+    "@brandlab-digital/site-core": "3.8.0",
     "browser-image-compression": "2.0.2",
     "pdf-lib": "1.17.1",
     "server-only": "0.0.1",
@@ -152,6 +153,18 @@
     "./testing/server-only": {
       "types": "./dist/testing/server-only.d.ts",
       "import": "./dist/testing/server-only.js"
+    },
+    "./ui-kit/skin": {
+      "types": "./dist/ui-kit/skin-index.d.ts",
+      "import": "./dist/ui-kit/skin-index.js"
+    },
+    "./ui-kit/primitives": {
+      "types": "./dist/ui-kit/primitives/index.d.ts",
+      "import": "./dist/ui-kit/primitives/index.js"
+    },
+    "./ui-kit/structure.css": {
+      "style": "./dist/ui-kit/structure.css",
+      "default": "./dist/ui-kit/structure.css"
     }
   }
 }