@brandlab-digital/site-next 3.13.0 → 3.14.0

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

@@ -1,17 +1,27 @@
 /**
  * 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.
+ * component: a variant from the component's closed list, typed layout options and one class string per one-off 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.
+ *
+ * Repeated slots (3.14.0): a part the component renders once per entry of a list in its data (menu and panel links,
+ * footer links, drawer links, reviews, stars, cards, chips, list items) carries its `data-slot` hook and no class. The
+ * site styles it once in `src/site/skin.css` through the hooks, `[data-bl="footer"] [data-slot="link"] { … }`, so its
+ * class string is not repeated in the HTML and the RSC payload for every item. Each component lists them in its
+ * `X_REPEATED_SLOTS`; the skin entry's `classes` type leaves them out.
  */
 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>> {
+/**
+ * A component's skin: its variant, its layout options and its slot classes. Every field is optional. `Repeated` names
+ * the slots the component renders once per list entry; they take no class here (style them from the skin stylesheet
+ * through their `data-slot` hooks).
+ */
+export interface SkinEntry<Slot extends string, Variant extends string = never, Layout extends object = Record<never, never>, Repeated extends Slot = never> {
     readonly variant?: Variant;
     readonly layout?: Readonly<Layout>;
-    readonly classes?: SlotClasses<Slot>;
+    readonly classes?: SlotClasses<Exclude<Slot, Repeated>>;
 }
 type SkinKeys = 'variant' | 'layout' | 'classes';
 /** The part of a component's props a skin entry supplies. */
@@ -35,6 +45,13 @@ export declare function skinned<P extends {
 }>(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 hook for a repeated part (3.14.0): `data-slot` only, never a class. Spread it onto each item:
+ * `<li {...repeatedSlot('item')}>`. A site styles it from its skin stylesheet through `[data-bl] [data-slot]`.
+ */
+export declare function repeatedSlot<Slot extends string>(name: Slot): {
+    'data-slot': Slot;
+};
 /**
  * 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

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

@@ -1 +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"}
+{"version":3,"file":"skin.d.ts","sourceRoot":"","sources":["../../src/ui-kit/skin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;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;;;;GAIG;AACH,MAAM,WAAW,SAAS,CACxB,IAAI,SAAS,MAAM,EACnB,OAAO,SAAS,MAAM,GAAG,KAAK,EAC9B,MAAM,SAAS,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAC5C,QAAQ,SAAS,IAAI,GAAG,KAAK;IAE7B,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,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;CACxD;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;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,SAAS,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAEnF;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

@@ -1,8 +1,14 @@
 /**
  * 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.
+ * component: a variant from the component's closed list, typed layout options and one class string per one-off 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.
+ *
+ * Repeated slots (3.14.0): a part the component renders once per entry of a list in its data (menu and panel links,
+ * footer links, drawer links, reviews, stars, cards, chips, list items) carries its `data-slot` hook and no class. The
+ * site styles it once in `src/site/skin.css` through the hooks, `[data-bl="footer"] [data-slot="link"] { … }`, so its
+ * class string is not repeated in the HTML and the RSC payload for every item. Each component lists them in its
+ * `X_REPEATED_SLOTS`; the skin entry's `classes` type leaves them out.
  */
 import { createElement } from 'react';
 /**
@@ -36,6 +42,13 @@ export function cx(...parts) {
     const joined = parts.filter(Boolean).join(' ');
     return joined === '' ? undefined : joined;
 }
+/**
+ * The hook for a repeated part (3.14.0): `data-slot` only, never a class. Spread it onto each item:
+ * `<li {...repeatedSlot('item')}>`. A site styles it from its skin stylesheet through `[data-bl] [data-slot]`.
+ */
+export function repeatedSlot(name) {
+    return { 'data-slot': name };
+}
 /**
  * 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

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

@@ -1 +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"]}
+{"version":3,"file":"skin.js","sourceRoot":"","sources":["../../src/ui-kit/skin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,aAAa,EAAsC,MAAM,OAAO,CAAA;AA6BzE;;;;;;;;;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;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAsB,IAAU;IAC1D,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;AAC9B,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 one-off 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 *\n * Repeated slots (3.14.0): a part the component renders once per entry of a list in its data (menu and panel links,\n * footer links, drawer links, reviews, stars, cards, chips, list items) carries its `data-slot` hook and no class. The\n * site styles it once in `src/site/skin.css` through the hooks, `[data-bl=\"footer\"] [data-slot=\"link\"] { … }`, so its\n * class string is not repeated in the HTML and the RSC payload for every item. Each component lists them in its\n * `X_REPEATED_SLOTS`; the skin entry's `classes` type leaves them out.\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/**\n * A component's skin: its variant, its layout options and its slot classes. Every field is optional. `Repeated` names\n * the slots the component renders once per list entry; they take no class here (style them from the skin stylesheet\n * through their `data-slot` hooks).\n */\nexport interface SkinEntry<\n  Slot extends string,\n  Variant extends string = never,\n  Layout extends object = Record<never, never>,\n  Repeated extends Slot = never,\n> {\n  readonly variant?: Variant\n  readonly layout?: Readonly<Layout>\n  readonly classes?: SlotClasses<Exclude<Slot, Repeated>>\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 hook for a repeated part (3.14.0): `data-slot` only, never a class. Spread it onto each item:\n * `<li {...repeatedSlot('item')}>`. A site styles it from its skin stylesheet through `[data-bl] [data-slot]`.\n */\nexport function repeatedSlot<Slot extends string>(name: Slot): { 'data-slot': Slot } {\n  return { 'data-slot': name }\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

@@ -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.13.0",
+  "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.13.0",
+    "@brandlab-digital/site-core": "3.14.0",
     "browser-image-compression": "2.0.2",
     "pdf-lib": "1.17.1",
     "server-only": "0.0.1",
@@ -162,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"