@brandlab-digital/site-next 3.15.0 → 3.16.0

package/dist/ui-kit/sections/rating-chip.d.ts

@@ -3,23 +3,33 @@
  * and a link to the Business Profile. Server component. The numbers come only from the reviews feed (T4), never typed
  * by hand; without both an average and a total of 1 or more it renders nothing. `data-bl-source="feed"` marks the
  * numbers as the feed's for the ready gate (T4, T5).
+ *
+ * 3.16.0: `layout.display: 'figure'` sets the average as a large figure ("4.9", with "out of 5" for assistive
+ * technology) followed by the stars and the count, as AA's hero shows it under the H1; `moreLabel` adds the site's own
+ * link to the Business Profile ("Read all reviews on Google"), and the count becomes plain text so the profile is
+ * linked once.
  */
 import type { PreparedBusinessProfileReviews } from '@brandlab-digital/site-core/google-business-reviews';
 import { type SkinEntry } from '../skin.js';
-export type RatingChipSlot = 'root' | 'stars' | 'rating' | 'source';
-export type RatingChipSkin = SkinEntry<RatingChipSlot, never, {
-    stars?: boolean;
-}>;
+export type RatingChipSlot = 'root' | 'stars' | 'rating' | 'figure' | 'source' | 'more';
+export interface RatingChipLayout {
+    readonly stars?: boolean;
+    /** `inline` (the default): one line of words; `figure`: the average set large, then the stars and the count. */
+    readonly display?: 'inline' | 'figure';
+}
+export type RatingChipSkin = SkinEntry<RatingChipSlot, never, RatingChipLayout>;
 /** The part of the prepared reviews the chip reads: Google's average, total and profile link. */
 export type RatingChipData = Pick<PreparedBusinessProfileReviews, 'averageRating' | 'totalReviewCount' | 'profileUrl'>;
 export interface RatingChipProps extends RatingChipSkin {
     /** From `prepareBusinessProfileReviews`; null renders nothing. */
     readonly reviews: RatingChipData | null | undefined;
+    /** The site's words for a link to the Business Profile, for example "Read all reviews on Google". */
+    readonly moreLabel?: string | undefined;
 }
 /** Whether the feed gave Google's average and a total of 1 or more, so a rating can be shown. */
 export declare function hasGoogleRating(reviews: RatingChipData | null | undefined): reviews is RatingChipData & {
     averageRating: number;
     totalReviewCount: number;
 };
-export declare function RatingChip({ reviews, layout, classes }: RatingChipProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RatingChip({ reviews, moreLabel, layout, classes }: RatingChipProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=rating-chip.d.ts.map

package/dist/ui-kit/sections/rating-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating-chip.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/sections/rating-chip.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,qDAAqD,CAAA;AAEzG,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAEjD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,EAAE,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAA;AAElF,iGAAiG;AACjG,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,8BAA8B,EAAE,eAAe,GAAG,kBAAkB,GAAG,YAAY,CAAC,CAAA;AAEtH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAA;CACpD;AAID,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,IAAI,cAAc,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAE3J;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,eAAe,kDAgBvE"}
+{"version":3,"file":"rating-chip.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/sections/rating-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,qDAAqD,CAAA;AAEzG,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAEjD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AACvF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAA;IACxB,gHAAgH;IAChH,QAAQ,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CACvC;AACD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAE/E,iGAAiG;AACjG,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,8BAA8B,EAAE,eAAe,GAAG,kBAAkB,GAAG,YAAY,CAAC,CAAA;AAEtH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAA;IACnD,qGAAqG;IACrG,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACxC;AAID,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,IAAI,cAAc,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAE3J;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,eAAe,kDAqClF"}

package/dist/ui-kit/sections/rating-chip.js

@@ -1,15 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RatingStars } from '../primitives/layout.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RatingStars, VisuallyHidden } from '../primitives/layout.js';
 import { slot } from '../skin.js';
 const COUNT = new Intl.NumberFormat('en-AU');
 /** Whether the feed gave Google's average and a total of 1 or more, so a rating can be shown. */
 export function hasGoogleRating(reviews) {
     return typeof reviews?.averageRating === 'number' && typeof reviews.totalReviewCount === 'number' && reviews.totalReviewCount > 0;
 }
-export function RatingChip({ reviews, layout, classes }) {
+export function RatingChip({ reviews, moreLabel, layout, classes }) {
     if (!hasGoogleRating(reviews))
         return null;
     const total = reviews.totalReviewCount;
-    return (_jsxs("p", { "data-bl": "rating-chip", "data-bl-source": "feed", className: classes?.root, children: [layout?.stars === false ? null : (_jsx("span", { ...slot(classes, 'stars'), "aria-hidden": "true", children: _jsx(RatingStars, { rating: reviews.averageRating }) })), _jsxs("span", { ...slot(classes, 'rating'), children: [reviews.averageRating.toFixed(1), " out of 5"] }), " from", ' ', _jsxs("a", { ...slot(classes, 'source'), href: reviews.profileUrl, target: "_blank", rel: "noopener noreferrer", children: [COUNT.format(total), " Google ", total === 1 ? 'review' : 'reviews'] })] }));
+    const figure = layout?.display === 'figure';
+    const average = reviews.averageRating.toFixed(1);
+    const stars = layout?.stars === false ? null : (_jsx("span", { ...slot(classes, 'stars'), "aria-hidden": "true", children: _jsx(RatingStars, { rating: reviews.averageRating }) }));
+    const count = `${COUNT.format(total)} Google ${total === 1 ? 'review' : 'reviews'}`;
+    const more = moreLabel?.trim();
+    const link = { href: reviews.profileUrl, target: '_blank', rel: 'noopener noreferrer' };
+    return (_jsxs("p", { "data-bl": "rating-chip", "data-bl-source": "feed", "data-display": figure ? 'figure' : undefined, className: classes?.root, children: [figure ? null : stars, figure ? (_jsxs("span", { ...slot(classes, 'rating'), children: [_jsx("span", { ...slot(classes, 'figure'), children: average }), _jsx(VisuallyHidden, { children: " out of 5" })] })) : (_jsxs("span", { ...slot(classes, 'rating'), children: [average, " out of 5"] })), figure ? stars : null, " from", ' ', more ? _jsx("span", { ...slot(classes, 'source'), children: count }) : _jsx("a", { ...slot(classes, 'source'), ...link, children: count }), more ? (_jsxs(_Fragment, { children: [' ', _jsx("a", { ...slot(classes, 'more'), ...link, children: more })] })) : null] }));
 }
 //# sourceMappingURL=rating-chip.js.map

package/dist/ui-kit/sections/rating-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-chip.js","sourceRoot":"","sources":["../../../src/ui-kit/sections/rating-chip.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAajD,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;AAE5C,iGAAiG;AACjG,MAAM,UAAU,eAAe,CAAC,OAA0C;IACxE,OAAO,OAAO,OAAO,EAAE,aAAa,KAAK,QAAQ,IAAI,OAAO,OAAO,CAAC,gBAAgB,KAAK,QAAQ,IAAI,OAAO,CAAC,gBAAgB,GAAG,CAAC,CAAA;AACnI,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAmB;IACtE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAA;IAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,gBAAgB,CAAA;IACtC,OAAO,CACL,wBAAW,aAAa,oBAAgB,MAAM,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,aACpE,MAAM,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,kBAAU,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAc,MAAM,YAClD,KAAC,WAAW,IAAC,MAAM,EAAE,OAAO,CAAC,aAAa,GAAI,GACzC,CACR,EACD,mBAAU,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,WAAM,GAAG,EAC9F,gBAAO,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,aAChG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,cAAU,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAC9D,IACF,CACL,CAAA;AACH,CAAC","sourcesContent":["/**\n * `RatingChip`: Google's own average and total in words (\"4.9 out of 5 from 99 Google reviews\"), with decorative stars\n * and a link to the Business Profile. Server component. The numbers come only from the reviews feed (T4), never typed\n * by hand; without both an average and a total of 1 or more it renders nothing. `data-bl-source=\"feed\"` marks the\n * numbers as the feed's for the ready gate (T4, T5).\n */\nimport type { PreparedBusinessProfileReviews } from '@brandlab-digital/site-core/google-business-reviews'\nimport { RatingStars } from '../primitives/layout.js'\nimport { slot, type SkinEntry } from '../skin.js'\n\nexport type RatingChipSlot = 'root' | 'stars' | 'rating' | 'source'\nexport type RatingChipSkin = SkinEntry<RatingChipSlot, never, { stars?: boolean }>\n\n/** The part of the prepared reviews the chip reads: Google's average, total and profile link. */\nexport type RatingChipData = Pick<PreparedBusinessProfileReviews, 'averageRating' | 'totalReviewCount' | 'profileUrl'>\n\nexport interface RatingChipProps extends RatingChipSkin {\n  /** From `prepareBusinessProfileReviews`; null renders nothing. */\n  readonly reviews: RatingChipData | null | undefined\n}\n\nconst COUNT = new Intl.NumberFormat('en-AU')\n\n/** Whether the feed gave Google's average and a total of 1 or more, so a rating can be shown. */\nexport function hasGoogleRating(reviews: RatingChipData | null | undefined): reviews is RatingChipData & { averageRating: number; totalReviewCount: number } {\n  return typeof reviews?.averageRating === 'number' && typeof reviews.totalReviewCount === 'number' && reviews.totalReviewCount > 0\n}\n\nexport function RatingChip({ reviews, layout, classes }: RatingChipProps) {\n  if (!hasGoogleRating(reviews)) return null\n  const total = reviews.totalReviewCount\n  return (\n    <p data-bl=\"rating-chip\" data-bl-source=\"feed\" className={classes?.root}>\n      {layout?.stars === false ? null : (\n        <span {...slot(classes, 'stars')} aria-hidden=\"true\">\n          <RatingStars rating={reviews.averageRating} />\n        </span>\n      )}\n      <span {...slot(classes, 'rating')}>{reviews.averageRating.toFixed(1)} out of 5</span> from{' '}\n      <a {...slot(classes, 'source')} href={reviews.profileUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n        {COUNT.format(total)} Google {total === 1 ? 'review' : 'reviews'}\n      </a>\n    </p>\n  )\n}\n"]}
+{"version":3,"file":"rating-chip.js","sourceRoot":"","sources":["../../../src/ui-kit/sections/rating-chip.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAoBjD,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;AAE5C,iGAAiG;AACjG,MAAM,UAAU,eAAe,CAAC,OAA0C;IACxE,OAAO,OAAO,OAAO,EAAE,aAAa,KAAK,QAAQ,IAAI,OAAO,OAAO,CAAC,gBAAgB,KAAK,QAAQ,IAAI,OAAO,CAAC,gBAAgB,GAAG,CAAC,CAAA;AACnI,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAmB;IACjF,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAA;IAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,gBAAgB,CAAA;IACtC,MAAM,MAAM,GAAG,MAAM,EAAE,OAAO,KAAK,QAAQ,CAAA;IAC3C,MAAM,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;IAChD,MAAM,KAAK,GACT,MAAM,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,kBAAU,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAc,MAAM,YAClD,KAAC,WAAW,IAAC,MAAM,EAAE,OAAO,CAAC,aAAa,GAAI,GACzC,CACR,CAAA;IACH,MAAM,KAAK,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,CAAA;IACnF,MAAM,IAAI,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;IAC9B,MAAM,IAAI,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,qBAAqB,EAAW,CAAA;IAChG,OAAO,CACL,wBAAW,aAAa,oBAAgB,MAAM,kBAAe,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,aACjH,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACrB,MAAM,CAAC,CAAC,CAAC,CACR,mBAAU,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,aAC/B,kBAAU,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,YAAG,OAAO,GAAQ,EACnD,KAAC,cAAc,4BAA2B,IACrC,CACR,CAAC,CAAC,CAAC,CACF,mBAAU,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAG,OAAO,iBAAiB,CAC7D,EACA,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,WAAO,GAAG,EAC/B,IAAI,CAAC,CAAC,CAAC,kBAAU,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,eAAO,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAM,IAAI,YAAG,KAAK,GAAK,EAChH,IAAI,CAAC,CAAC,CAAC,CACN,8BACG,GAAG,EACJ,eAAO,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,KAAM,IAAI,YACnC,IAAI,GACH,IACH,CACJ,CAAC,CAAC,CAAC,IAAI,IACN,CACL,CAAA;AACH,CAAC","sourcesContent":["/**\n * `RatingChip`: Google's own average and total in words (\"4.9 out of 5 from 99 Google reviews\"), with decorative stars\n * and a link to the Business Profile. Server component. The numbers come only from the reviews feed (T4), never typed\n * by hand; without both an average and a total of 1 or more it renders nothing. `data-bl-source=\"feed\"` marks the\n * numbers as the feed's for the ready gate (T4, T5).\n *\n * 3.16.0: `layout.display: 'figure'` sets the average as a large figure (\"4.9\", with \"out of 5\" for assistive\n * technology) followed by the stars and the count, as AA's hero shows it under the H1; `moreLabel` adds the site's own\n * link to the Business Profile (\"Read all reviews on Google\"), and the count becomes plain text so the profile is\n * linked once.\n */\nimport type { PreparedBusinessProfileReviews } from '@brandlab-digital/site-core/google-business-reviews'\nimport { RatingStars, VisuallyHidden } from '../primitives/layout.js'\nimport { slot, type SkinEntry } from '../skin.js'\n\nexport type RatingChipSlot = 'root' | 'stars' | 'rating' | 'figure' | 'source' | 'more'\nexport interface RatingChipLayout {\n  readonly stars?: boolean\n  /** `inline` (the default): one line of words; `figure`: the average set large, then the stars and the count. */\n  readonly display?: 'inline' | 'figure'\n}\nexport type RatingChipSkin = SkinEntry<RatingChipSlot, never, RatingChipLayout>\n\n/** The part of the prepared reviews the chip reads: Google's average, total and profile link. */\nexport type RatingChipData = Pick<PreparedBusinessProfileReviews, 'averageRating' | 'totalReviewCount' | 'profileUrl'>\n\nexport interface RatingChipProps extends RatingChipSkin {\n  /** From `prepareBusinessProfileReviews`; null renders nothing. */\n  readonly reviews: RatingChipData | null | undefined\n  /** The site's words for a link to the Business Profile, for example \"Read all reviews on Google\". */\n  readonly moreLabel?: string | undefined\n}\n\nconst COUNT = new Intl.NumberFormat('en-AU')\n\n/** Whether the feed gave Google's average and a total of 1 or more, so a rating can be shown. */\nexport function hasGoogleRating(reviews: RatingChipData | null | undefined): reviews is RatingChipData & { averageRating: number; totalReviewCount: number } {\n  return typeof reviews?.averageRating === 'number' && typeof reviews.totalReviewCount === 'number' && reviews.totalReviewCount > 0\n}\n\nexport function RatingChip({ reviews, moreLabel, layout, classes }: RatingChipProps) {\n  if (!hasGoogleRating(reviews)) return null\n  const total = reviews.totalReviewCount\n  const figure = layout?.display === 'figure'\n  const average = reviews.averageRating.toFixed(1)\n  const stars =\n    layout?.stars === false ? null : (\n      <span {...slot(classes, 'stars')} aria-hidden=\"true\">\n        <RatingStars rating={reviews.averageRating} />\n      </span>\n    )\n  const count = `${COUNT.format(total)} Google ${total === 1 ? 'review' : 'reviews'}`\n  const more = moreLabel?.trim()\n  const link = { href: reviews.profileUrl, target: '_blank', rel: 'noopener noreferrer' } as const\n  return (\n    <p data-bl=\"rating-chip\" data-bl-source=\"feed\" data-display={figure ? 'figure' : undefined} className={classes?.root}>\n      {figure ? null : stars}\n      {figure ? (\n        <span {...slot(classes, 'rating')}>\n          <span {...slot(classes, 'figure')}>{average}</span>\n          <VisuallyHidden> out of 5</VisuallyHidden>\n        </span>\n      ) : (\n        <span {...slot(classes, 'rating')}>{average} out of 5</span>\n      )}\n      {figure ? stars : null} from{' '}\n      {more ? <span {...slot(classes, 'source')}>{count}</span> : <a {...slot(classes, 'source')} {...link}>{count}</a>}\n      {more ? (\n        <>\n          {' '}\n          <a {...slot(classes, 'more')} {...link}>\n            {more}\n          </a>\n        </>\n      ) : null}\n    </p>\n  )\n}\n"]}

package/dist/ui-kit/sections/section-sequence.d.ts

@@ -5,7 +5,9 @@
  * its reason without rendering twice. Then the cap drops optional sections first, the light tones alternate so
  * neighbours never share a background (at most one `band` and one `photo`), and the page's manifest is written as
  * `<script type="application/json" data-bl-manifest>` (`SECTION_MANIFEST_ATTRIBUTE`) for K12: what was planned, what
- * rendered with which tone, and what was skipped and why.
+ * rendered with which tone, and what was skipped and why. The strips (proof strip, emergency band) and signature
+ * sections don't count toward the cap (3.16.0); a `signature` section names itself and may say which section it
+ * follows: `{ id: 'signature', signature: 'storm-line', after: 'services', render: (tone) => <StormLine tone={tone} /> }`.
  *
  * ```tsx
  * <SectionSequence

package/dist/ui-kit/sections/section-sequence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section-sequence.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/sections/section-sequence.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC/B,MAAM,2CAA2C,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAE1D,oHAAoH;AACpH,MAAM,WAAW,eAAgB,SAAQ,yBAAyB;IAChE,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAA;CAClD;AAED,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;IAC7C,+CAA+C;IAC/C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,yFAAyF;AACzF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,uBAAuB,GAAG,MAAM,CAElF;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,oBAAoB,2CAc9E"}
+{"version":3,"file":"section-sequence.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/sections/section-sequence.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC/B,MAAM,2CAA2C,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAE1D,oHAAoH;AACpH,MAAM,WAAW,eAAgB,SAAQ,yBAAyB;IAChE,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAA;CAClD;AAED,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;IAC7C,+CAA+C;IAC/C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,yFAAyF;AACzF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,uBAAuB,GAAG,MAAM,CAElF;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,oBAAoB,2CAc9E"}

package/dist/ui-kit/sections/section-sequence.js

@@ -6,7 +6,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * its reason without rendering twice. Then the cap drops optional sections first, the light tones alternate so
  * neighbours never share a background (at most one `band` and one `photo`), and the page's manifest is written as
  * `<script type="application/json" data-bl-manifest>` (`SECTION_MANIFEST_ATTRIBUTE`) for K12: what was planned, what
- * rendered with which tone, and what was skipped and why.
+ * rendered with which tone, and what was skipped and why. The strips (proof strip, emergency band) and signature
+ * sections don't count toward the cap (3.16.0); a `signature` section names itself and may say which section it
+ * follows: `{ id: 'signature', signature: 'storm-line', after: 'services', render: (tone) => <StormLine tone={tone} /> }`.
  *
  * ```tsx
  * <SectionSequence
@@ -29,6 +31,6 @@ export function serialiseSectionManifest(manifest) {
 }
 export function SectionSequence({ order, sections, page }) {
     const plan = planSectionSequence(order, sections, page);
-    return (_jsxs(_Fragment, { children: [plan.rendered.map((item) => (_jsx(Fragment, { children: sections[item.candidate]?.render(item.tone) }, item.id))), _jsx("script", { type: "application/json", [SECTION_MANIFEST_ATTRIBUTE]: '', dangerouslySetInnerHTML: { __html: serialiseSectionManifest(plan.manifest) } })] }));
+    return (_jsxs(_Fragment, { children: [plan.rendered.map((item) => (_jsx(Fragment, { children: sections[item.candidate]?.render(item.tone) }, `${item.id}-${item.candidate}`))), _jsx("script", { type: "application/json", [SECTION_MANIFEST_ATTRIBUTE]: '', dangerouslySetInnerHTML: { __html: serialiseSectionManifest(plan.manifest) } })] }));
 }
 //# sourceMappingURL=section-sequence.js.map

package/dist/ui-kit/sections/section-sequence.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-sequence.js","sourceRoot":"","sources":["../../../src/ui-kit/sections/section-sequence.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACnE,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GAIpB,MAAM,2CAA2C,CAAA;AAgBlD,yFAAyF;AACzF,MAAM,UAAU,wBAAwB,CAAC,QAAiC;IACxE,OAAO,cAAc,CAAC,QAAQ,CAAC,CAAA;AACjC,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAwB;IAC7E,MAAM,IAAI,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;IACvD,OAAO,CACL,8BACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,QAAQ,cAAgB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAArD,IAAI,CAAC,EAAE,CAA0D,CACjF,CAAC,EACF,iBACE,IAAI,EAAC,kBAAkB,EACjB,CAAC,0BAA0B,CAAC,EAAE,EAAE,EACtC,uBAAuB,EAAE,EAAE,MAAM,EAAE,wBAAwB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAC5E,IACD,CACJ,CAAA;AACH,CAAC","sourcesContent":["/**\n * `SectionSequence` (F15): renders a page family's sections in order. Server component, ported from Omega's\n * `Sequence` and `alternateTones`. Each section the page offers comes with its guard, computed from the same data it\n * renders (`faqsReady(props)`, `priceGuideReady(props)` …), so a section that would render nothing is skipped with\n * its reason without rendering twice. Then the cap drops optional sections first, the light tones alternate so\n * neighbours never share a background (at most one `band` and one `photo`), and the page's manifest is written as\n * `<script type=\"application/json\" data-bl-manifest>` (`SECTION_MANIFEST_ATTRIBUTE`) for K12: what was planned, what\n * rendered with which tone, and what was skipped and why.\n *\n * ```tsx\n * <SectionSequence\n *   order={orders.service}\n *   page=\"/tree-removal\"\n *   sections={[\n *     { id: 'hero', tone: 'photo', render: (tone) => <Hero tone={tone} {...hero} /> },\n *     { id: 'price-guide', ready: priceGuideReady(guide), render: (tone) => <PriceGuide tone={tone} {...guide} /> },\n *     { id: 'cta', tone: 'band', render: (tone) => <CTABand tone={tone} {...cta} /> },\n *   ]}\n * />\n * ```\n */\nimport { Fragment, type ReactNode } from 'react'\nimport { sanitizeJsonLd } from '@brandlab-digital/site-core/schema'\nimport {\n  SECTION_MANIFEST_ATTRIBUTE,\n  planSectionSequence,\n  type BrandlabFamilyOrder,\n  type BrandlabSectionManifest,\n  type BrandlabSequenceCandidate,\n} from '@brandlab-digital/site-core/section-order'\nimport type { SectionTone } from '../primitives/layout.js'\n\n/** One section the page offers: its matrix id, its guard, the tone it asks for and how to render it with a tone. */\nexport interface SequenceSection extends BrandlabSequenceCandidate {\n  readonly render: (tone: SectionTone) => ReactNode\n}\n\nexport interface SectionSequenceProps {\n  /** The family's order, from the site's `defineSectionOrder` (or `defaultSectionOrder`). */\n  readonly order: BrandlabFamilyOrder\n  readonly sections: readonly SequenceSection[]\n  /** The page path, recorded in the manifest. */\n  readonly page?: string\n}\n\n/** The manifest as safe inline JSON (no `<`, `>` or `&` that could close the script). */\nexport function serialiseSectionManifest(manifest: BrandlabSectionManifest): string {\n  return sanitizeJsonLd(manifest)\n}\n\nexport function SectionSequence({ order, sections, page }: SectionSequenceProps) {\n  const plan = planSectionSequence(order, sections, page)\n  return (\n    <>\n      {plan.rendered.map((item) => (\n        <Fragment key={item.id}>{sections[item.candidate]?.render(item.tone)}</Fragment>\n      ))}\n      <script\n        type=\"application/json\"\n        {...{ [SECTION_MANIFEST_ATTRIBUTE]: '' }}\n        dangerouslySetInnerHTML={{ __html: serialiseSectionManifest(plan.manifest) }}\n      />\n    </>\n  )\n}\n"]}
+{"version":3,"file":"section-sequence.js","sourceRoot":"","sources":["../../../src/ui-kit/sections/section-sequence.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACnE,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GAIpB,MAAM,2CAA2C,CAAA;AAgBlD,yFAAyF;AACzF,MAAM,UAAU,wBAAwB,CAAC,QAAiC;IACxE,OAAO,cAAc,CAAC,QAAQ,CAAC,CAAA;AACjC,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAwB;IAC7E,MAAM,IAAI,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;IACvD,OAAO,CACL,8BACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,QAAQ,cAAuC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAA5E,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,CAA0D,CACxG,CAAC,EACF,iBACE,IAAI,EAAC,kBAAkB,EACjB,CAAC,0BAA0B,CAAC,EAAE,EAAE,EACtC,uBAAuB,EAAE,EAAE,MAAM,EAAE,wBAAwB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAC5E,IACD,CACJ,CAAA;AACH,CAAC","sourcesContent":["/**\n * `SectionSequence` (F15): renders a page family's sections in order. Server component, ported from Omega's\n * `Sequence` and `alternateTones`. Each section the page offers comes with its guard, computed from the same data it\n * renders (`faqsReady(props)`, `priceGuideReady(props)` …), so a section that would render nothing is skipped with\n * its reason without rendering twice. Then the cap drops optional sections first, the light tones alternate so\n * neighbours never share a background (at most one `band` and one `photo`), and the page's manifest is written as\n * `<script type=\"application/json\" data-bl-manifest>` (`SECTION_MANIFEST_ATTRIBUTE`) for K12: what was planned, what\n * rendered with which tone, and what was skipped and why. The strips (proof strip, emergency band) and signature\n * sections don't count toward the cap (3.16.0); a `signature` section names itself and may say which section it\n * follows: `{ id: 'signature', signature: 'storm-line', after: 'services', render: (tone) => <StormLine tone={tone} /> }`.\n *\n * ```tsx\n * <SectionSequence\n *   order={orders.service}\n *   page=\"/tree-removal\"\n *   sections={[\n *     { id: 'hero', tone: 'photo', render: (tone) => <Hero tone={tone} {...hero} /> },\n *     { id: 'price-guide', ready: priceGuideReady(guide), render: (tone) => <PriceGuide tone={tone} {...guide} /> },\n *     { id: 'cta', tone: 'band', render: (tone) => <CTABand tone={tone} {...cta} /> },\n *   ]}\n * />\n * ```\n */\nimport { Fragment, type ReactNode } from 'react'\nimport { sanitizeJsonLd } from '@brandlab-digital/site-core/schema'\nimport {\n  SECTION_MANIFEST_ATTRIBUTE,\n  planSectionSequence,\n  type BrandlabFamilyOrder,\n  type BrandlabSectionManifest,\n  type BrandlabSequenceCandidate,\n} from '@brandlab-digital/site-core/section-order'\nimport type { SectionTone } from '../primitives/layout.js'\n\n/** One section the page offers: its matrix id, its guard, the tone it asks for and how to render it with a tone. */\nexport interface SequenceSection extends BrandlabSequenceCandidate {\n  readonly render: (tone: SectionTone) => ReactNode\n}\n\nexport interface SectionSequenceProps {\n  /** The family's order, from the site's `defineSectionOrder` (or `defaultSectionOrder`). */\n  readonly order: BrandlabFamilyOrder\n  readonly sections: readonly SequenceSection[]\n  /** The page path, recorded in the manifest. */\n  readonly page?: string\n}\n\n/** The manifest as safe inline JSON (no `<`, `>` or `&` that could close the script). */\nexport function serialiseSectionManifest(manifest: BrandlabSectionManifest): string {\n  return sanitizeJsonLd(manifest)\n}\n\nexport function SectionSequence({ order, sections, page }: SectionSequenceProps) {\n  const plan = planSectionSequence(order, sections, page)\n  return (\n    <>\n      {plan.rendered.map((item) => (\n        <Fragment key={`${item.id}-${item.candidate}`}>{sections[item.candidate]?.render(item.tone)}</Fragment>\n      ))}\n      <script\n        type=\"application/json\"\n        {...{ [SECTION_MANIFEST_ATTRIBUTE]: '' }}\n        dangerouslySetInnerHTML={{ __html: serialiseSectionManifest(plan.manifest) }}\n      />\n    </>\n  )\n}\n"]}

package/dist/ui-kit/sections/signature-section.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `SignatureSection` (`signature`, 3.16.0): the frame for one of a client's signature features, the sections that give
+ * a site its own character (Superior's waterline story, AA's storm line, Finishing Touch's `FinishBoard`). Server
+ * component. The site builds the body from the library's primitives in `src/site/signature/`; the frame keeps the
+ * rules every section keeps:
+ * - a `<section data-bl-section="signature" data-bl-signature="<name>">` labelled by its one H2, so K8, K11 and axe read
+ *   it like any other section;
+ * - the name matches the `signature` the page offers `SectionSequence` and the look record in `strategy.ts`
+ *   (`homeSections.signatures`), which D4 compares with the competitors' and K13 holds the rendered page to;
+ * - decoration is `aria-hidden`, and the body carries no client JS of its own (B1 budgets the page);
+ * - claims inside it come from the business facts (`renderableCredentials`) or the reviews feed, as everywhere else
+ *   (T4, E8): a signature adds character, never an unsupported claim.
+ *
+ * `SectionSequence` places it where the site declares (`{ id: 'signature', signature: 'storm-line', after: 'services',
+ * render }`), outside the cap: up to two on the home page and one on service pages (`SIGNATURE_LIMITS`).
+ */
+import type { ReactNode } from 'react';
+import { type SectionSlot, type SectionTone } from '../primitives/layout.js';
+import { type SkinEntry } from '../skin.js';
+export type SignatureSectionSlot = SectionSlot | 'head' | 'eyebrow' | 'heading' | 'lead' | 'body';
+export interface SignatureSectionLayout {
+    readonly align?: 'start' | 'center';
+}
+export type SignatureSectionSkin = SkinEntry<SignatureSectionSlot, never, SignatureSectionLayout>;
+export interface SignatureSectionProps extends SignatureSectionSkin {
+    /** The signature's name, as the page offers it to `SectionSequence` and `strategy.ts` records it: `storm-line`. */
+    readonly name: string;
+    /** The H2. */
+    readonly title: string;
+    readonly eyebrow?: string;
+    readonly lead?: string;
+    /** Defaults to `signature-<name>-heading`. */
+    readonly headingId?: string;
+    /** Set by `SectionSequence`. */
+    readonly tone?: SectionTone;
+    /** Signature art, rendered `aria-hidden`. */
+    readonly decoration?: ReactNode;
+    /** The feature itself, built from the library's primitives. */
+    readonly children: ReactNode;
+}
+export declare function SignatureSection({ name, title, eyebrow, lead, headingId, tone, decoration, layout, classes, children }: SignatureSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=signature-section.d.ts.map

package/dist/ui-kit/sections/signature-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature-section.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/sections/signature-section.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAA2B,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrG,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAEjD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AACjG,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CACpC;AACD,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,oBAAoB,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAA;AAEjG,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE,mHAAmH;IACnH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,cAAc;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAA;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAmB7I"}

package/dist/ui-kit/sections/signature-section.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SIGNATURE_NAME_PATTERN } from '@brandlab-digital/site-core/section-order';
+import { Section, SectionHeading } from '../primitives/layout.js';
+import { slot } from '../skin.js';
+export function SignatureSection({ name, title, eyebrow, lead, headingId, tone, decoration, layout, classes, children }) {
+    if (!SIGNATURE_NAME_PATTERN.test(name)) {
+        throw new Error(`SignatureSection: "${name}" is not a signature name (lower-case words joined by hyphens, for example "storm-line").`);
+    }
+    if (title.trim() === '')
+        throw new Error(`SignatureSection "${name}": the heading is empty.`);
+    const id = headingId ?? `signature-${name}-heading`;
+    return (_jsxs(Section, { id: "signature", labelledBy: id, tone: tone, classes: classes, decoration: decoration, hooks: { 'data-bl-signature': name }, children: [_jsx(SectionHeading, { id: id, title: title, eyebrow: eyebrow, lead: lead, layout: { align: layout?.align ?? 'start' }, classes: { head: classes?.head, eyebrow: classes?.eyebrow, heading: classes?.heading, lead: classes?.lead } }), _jsx("div", { ...slot(classes, 'body'), children: children })] }));
+}
+//# sourceMappingURL=signature-section.js.map

package/dist/ui-kit/sections/signature-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature-section.js","sourceRoot":"","sources":["../../../src/ui-kit/sections/signature-section.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAA;AAClF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAsC,MAAM,yBAAyB,CAAA;AACrG,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAyBjD,MAAM,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAyB;IAC5I,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QACvC,MAAM,IAAI,KAAK,CAAC,sBAAsB,IAAI,2FAA2F,CAAC,CAAA;IACxI,CAAC;IACD,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,qBAAqB,IAAI,0BAA0B,CAAC,CAAA;IAC7F,MAAM,EAAE,GAAG,SAAS,IAAI,aAAa,IAAI,UAAU,CAAA;IACnD,OAAO,CACL,MAAC,OAAO,IAAC,EAAE,EAAC,WAAW,EAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,aAChI,KAAC,cAAc,IACb,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,OAAO,EAAE,EAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAC3G,EACF,iBAAS,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,YAAG,QAAQ,GAAO,IACxC,CACX,CAAA;AACH,CAAC","sourcesContent":["/**\n * `SignatureSection` (`signature`, 3.16.0): the frame for one of a client's signature features, the sections that give\n * a site its own character (Superior's waterline story, AA's storm line, Finishing Touch's `FinishBoard`). Server\n * component. The site builds the body from the library's primitives in `src/site/signature/`; the frame keeps the\n * rules every section keeps:\n * - a `<section data-bl-section=\"signature\" data-bl-signature=\"<name>\">` labelled by its one H2, so K8, K11 and axe read\n *   it like any other section;\n * - the name matches the `signature` the page offers `SectionSequence` and the look record in `strategy.ts`\n *   (`homeSections.signatures`), which D4 compares with the competitors' and K13 holds the rendered page to;\n * - decoration is `aria-hidden`, and the body carries no client JS of its own (B1 budgets the page);\n * - claims inside it come from the business facts (`renderableCredentials`) or the reviews feed, as everywhere else\n *   (T4, E8): a signature adds character, never an unsupported claim.\n *\n * `SectionSequence` places it where the site declares (`{ id: 'signature', signature: 'storm-line', after: 'services',\n * render }`), outside the cap: up to two on the home page and one on service pages (`SIGNATURE_LIMITS`).\n */\nimport type { ReactNode } from 'react'\nimport { SIGNATURE_NAME_PATTERN } from '@brandlab-digital/site-core/section-order'\nimport { Section, SectionHeading, type SectionSlot, type SectionTone } from '../primitives/layout.js'\nimport { slot, type SkinEntry } from '../skin.js'\n\nexport type SignatureSectionSlot = SectionSlot | 'head' | 'eyebrow' | 'heading' | 'lead' | 'body'\nexport interface SignatureSectionLayout {\n  readonly align?: 'start' | 'center'\n}\nexport type SignatureSectionSkin = SkinEntry<SignatureSectionSlot, never, SignatureSectionLayout>\n\nexport interface SignatureSectionProps extends SignatureSectionSkin {\n  /** The signature's name, as the page offers it to `SectionSequence` and `strategy.ts` records it: `storm-line`. */\n  readonly name: string\n  /** The H2. */\n  readonly title: string\n  readonly eyebrow?: string\n  readonly lead?: string\n  /** Defaults to `signature-<name>-heading`. */\n  readonly headingId?: string\n  /** Set by `SectionSequence`. */\n  readonly tone?: SectionTone\n  /** Signature art, rendered `aria-hidden`. */\n  readonly decoration?: ReactNode\n  /** The feature itself, built from the library's primitives. */\n  readonly children: ReactNode\n}\n\nexport function SignatureSection({ name, title, eyebrow, lead, headingId, tone, decoration, layout, classes, children }: SignatureSectionProps) {\n  if (!SIGNATURE_NAME_PATTERN.test(name)) {\n    throw new Error(`SignatureSection: \"${name}\" is not a signature name (lower-case words joined by hyphens, for example \"storm-line\").`)\n  }\n  if (title.trim() === '') throw new Error(`SignatureSection \"${name}\": the heading is empty.`)\n  const id = headingId ?? `signature-${name}-heading`\n  return (\n    <Section id=\"signature\" labelledBy={id} tone={tone} classes={classes} decoration={decoration} hooks={{ 'data-bl-signature': name }}>\n      <SectionHeading\n        id={id}\n        title={title}\n        eyebrow={eyebrow}\n        lead={lead}\n        layout={{ align: layout?.align ?? 'start' }}\n        classes={{ head: classes?.head, eyebrow: classes?.eyebrow, heading: classes?.heading, lead: classes?.lead }}\n      />\n      <div {...slot(classes, 'body')}>{children}</div>\n    </Section>\n  )\n}\n"]}

package/dist/ui-kit/shell/call-bar-client.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
-export declare function CallBarController({ variant, className, children }: {
+export declare function CallBarController({ variant, always, className, children, }: {
     readonly variant: string;
+    readonly always?: boolean | undefined;
     readonly className?: string | undefined;
     readonly children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui-kit/shell/call-bar-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"call-bar-client.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/shell/call-bar-client.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG9C,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAStK"}
+{"version":3,"file":"call-bar-client.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/shell/call-bar-client.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG9C,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B,2CAiBA"}

package/dist/ui-kit/shell/call-bar-client.js

@@ -4,10 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { usePathname } from 'next/navigation';
 import { useRef } from 'react';
 import { useStickyCallBar } from '../../navigation/use-sticky-call-bar.js';
-export function CallBarController({ variant, className, children }) {
+export function CallBarController({ variant, always, className, children, }) {
     const ref = useRef(null);
     const pathname = usePathname();
-    const shown = useStickyCallBar(ref, pathname);
-    return (_jsx("div", { ref: ref, "data-bl": "callbar", "data-variant": variant, "data-state": shown ? 'shown' : 'hidden', inert: !shown, className: className, children: children }));
+    const shown = useStickyCallBar(ref, pathname, { always: always === true });
+    return (_jsx("div", { ref: ref, "data-bl": "callbar", "data-variant": variant, "data-show": always ? 'always' : undefined, "data-state": shown ? 'shown' : 'hidden', inert: !shown, className: className, children: children }));
 }
 //# sourceMappingURL=call-bar-client.js.map

package/dist/ui-kit/shell/call-bar-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"call-bar-client.js","sourceRoot":"","sources":["../../../src/ui-kit/shell/call-bar-client.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,qHAAqH;AACrH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAE1E,MAAM,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAuG;IACrK,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,KAAK,GAAG,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAA;IAC7C,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,aAAU,SAAS,kBAAe,OAAO,gBAAc,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,YAChI,QAAQ,GACL,CACP,CAAA;AACH,CAAC","sourcesContent":["'use client'\n\n/** The call bar's client leaf: shows and hides the server-rendered Call and quote buttons (F6 rules in the hook). */\nimport { usePathname } from 'next/navigation'\nimport { useRef, type ReactNode } from 'react'\nimport { useStickyCallBar } from '../../navigation/use-sticky-call-bar.js'\n\nexport function CallBarController({ variant, className, children }: { readonly variant: string; readonly className?: string | undefined; readonly children: ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null)\n  const pathname = usePathname()\n  const shown = useStickyCallBar(ref, pathname)\n  return (\n    <div ref={ref} data-bl=\"callbar\" data-variant={variant} data-state={shown ? 'shown' : 'hidden'} inert={!shown} className={className}>\n      {children}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"call-bar-client.js","sourceRoot":"","sources":["../../../src/ui-kit/shell/call-bar-client.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,qHAAqH;AACrH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAE1E,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,GAMT;IACC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,KAAK,GAAG,gBAAgB,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,EAAE,CAAC,CAAA;IAC1E,OAAO,CACL,cACE,GAAG,EAAE,GAAG,aACA,SAAS,kBACH,OAAO,eACV,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC5B,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EACtC,KAAK,EAAE,CAAC,KAAK,EACb,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACL,CACP,CAAA;AACH,CAAC","sourcesContent":["'use client'\n\n/** The call bar's client leaf: shows and hides the server-rendered Call and quote buttons (F6 rules in the hook). */\nimport { usePathname } from 'next/navigation'\nimport { useRef, type ReactNode } from 'react'\nimport { useStickyCallBar } from '../../navigation/use-sticky-call-bar.js'\n\nexport function CallBarController({\n  variant,\n  always,\n  className,\n  children,\n}: {\n  readonly variant: string\n  readonly always?: boolean | undefined\n  readonly className?: string | undefined\n  readonly children: ReactNode\n}) {\n  const ref = useRef<HTMLDivElement>(null)\n  const pathname = usePathname()\n  const shown = useStickyCallBar(ref, pathname, { always: always === true })\n  return (\n    <div\n      ref={ref}\n      data-bl=\"callbar\"\n      data-variant={variant}\n      data-show={always ? 'always' : undefined}\n      data-state={shown ? 'shown' : 'hidden'}\n      inert={!shown}\n      className={className}\n    >\n      {children}\n    </div>\n  )\n}\n"]}

package/dist/ui-kit/shell/mobile-call-bar.d.ts

@@ -5,7 +5,11 @@ export type MobileCallBarSlot = 'root' | 'call' | 'quote';
 export declare const MOBILE_CALL_BAR_VARIANTS: readonly ["bar", "float"];
 /** `bar`: full width; `float`: two pills at the end. */
 export type MobileCallBarVariant = (typeof MOBILE_CALL_BAR_VARIANTS)[number];
-export type MobileCallBarSkin = SkinEntry<MobileCallBarSlot, MobileCallBarVariant>;
+export interface MobileCallBarLayout {
+    /** `after-call-path` (the default): once the hero's buttons scroll out; `always`: from the first phone screen. */
+    readonly show?: 'after-call-path' | 'always';
+}
+export type MobileCallBarSkin = SkinEntry<MobileCallBarSlot, MobileCallBarVariant, MobileCallBarLayout>;
 export interface MobileCallBarProps extends MobileCallBarSkin {
     readonly phone: UiPhone;
     /** Words before the number, for example "Call". The button's name always includes the number. */
@@ -17,5 +21,5 @@ export interface MobileCallBarProps extends MobileCallBarSkin {
      */
     readonly compactLabel?: string | undefined;
 }
-export declare function MobileCallBar({ phone, phoneLabel, quote, compactLabel, variant, classes }: MobileCallBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileCallBar({ phone, phoneLabel, quote, compactLabel, variant, layout, classes }: MobileCallBarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=mobile-call-bar.d.ts.map

package/dist/ui-kit/shell/mobile-call-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-call-bar.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/shell/mobile-call-bar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AACzD,eAAO,MAAM,wBAAwB,2BAA4B,CAAA;AACjE,wDAAwD;AACxD,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5E,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAA;AAElF,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,iGAAiG;IACjG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3C;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,OAAe,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAOrH"}
+{"version":3,"file":"mobile-call-bar.d.ts","sourceRoot":"","sources":["../../../src/ui-kit/shell/mobile-call-bar.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AACzD,eAAO,MAAM,wBAAwB,2BAA4B,CAAA;AACjE,wDAAwD;AACxD,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5E,MAAM,WAAW,mBAAmB;IAClC,kHAAkH;IAClH,QAAQ,CAAC,IAAI,CAAC,EAAE,iBAAiB,GAAG,QAAQ,CAAA;CAC7C;AACD,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,iBAAiB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC,CAAA;AAEvG,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,iGAAiG;IACjG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3C;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,OAAe,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAO7H"}

package/dist/ui-kit/shell/mobile-call-bar.js

@@ -7,12 +7,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Both buttons stay on one line down to 360 px (3.15.0): the number never wraps or truncates; below 420 px the verb
  * ("Call") is visually hidden (the link's name keeps it) and the quote button shows `compactLabel` when given.
+ *
+ * `layout.show: 'always'` (3.16.0, as AA's live site): the bar shows from the first phone screen, beside the hero's
+ * buttons, still Call before Quote (K6), and still hides over the footer, a dialog and a focused field.
  */
 import { PhoneLink } from '../primitives/links.js';
 import { ShellQuoteButton } from './shell-quote.js';
 import { CallBarController } from './call-bar-client.js';
 export const MOBILE_CALL_BAR_VARIANTS = ['bar', 'float'];
-export function MobileCallBar({ phone, phoneLabel, quote, compactLabel, variant = 'bar', classes }) {
-    return (_jsxs(CallBarController, { variant: variant, className: classes?.root, children: [_jsx(PhoneLink, { phone: phone, placement: "fab", label: phoneLabel, showIcon: true, variant: "button", classes: { root: classes?.call } }), _jsx(ShellQuoteButton, { label: quote.label, href: quote.href, placement: "floating", ctaId: "quote-callbar", compactLabel: compactLabel, classes: { root: classes?.quote } })] }));
+export function MobileCallBar({ phone, phoneLabel, quote, compactLabel, variant = 'bar', layout, classes }) {
+    return (_jsxs(CallBarController, { variant: variant, always: layout?.show === 'always', className: classes?.root, children: [_jsx(PhoneLink, { phone: phone, placement: "fab", label: phoneLabel, showIcon: true, variant: "button", classes: { root: classes?.call } }), _jsx(ShellQuoteButton, { label: quote.label, href: quote.href, placement: "floating", ctaId: "quote-callbar", compactLabel: compactLabel, classes: { root: classes?.quote } })] }));
 }
 //# sourceMappingURL=mobile-call-bar.js.map

package/dist/ui-kit/shell/mobile-call-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-call-bar.js","sourceRoot":"","sources":["../../../src/ui-kit/shell/mobile-call-bar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAGnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIxD,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,OAAO,CAAU,CAAA;AAiBjE,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAsB;IACpH,OAAO,CACL,MAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,aAC3D,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,QAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAI,EAC1H,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAC,UAAU,EAAC,KAAK,EAAC,eAAe,EAAC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAI,IAClJ,CACrB,CAAA;AACH,CAAC","sourcesContent":["/**\n * F6: the phone call bar (server component). Call and quote always one tap away below 1024 px: it shows once the\n * hero's own call and quote buttons (`data-bl-call-path`) have scrolled out, and hides over the footer, the drawer, a\n * dialog, any call path and while a form field has focus. Call reports placement `fab`; the quote button sends\n * `lead_cta_click` with placement `floating`. Render it once, after the page's `<main>`.\n *\n * Both buttons stay on one line down to 360 px (3.15.0): the number never wraps or truncates; below 420 px the verb\n * (\"Call\") is visually hidden (the link's name keeps it) and the quote button shows `compactLabel` when given.\n */\nimport { PhoneLink } from '../primitives/links.js'\nimport { ShellQuoteButton } from './shell-quote.js'\nimport type { SkinEntry } from '../skin.js'\nimport type { UiPhone } from '../types.js'\nimport { CallBarController } from './call-bar-client.js'\nimport type { ShellQuote } from './mobile-drawer.js'\n\nexport type MobileCallBarSlot = 'root' | 'call' | 'quote'\nexport const MOBILE_CALL_BAR_VARIANTS = ['bar', 'float'] as const\n/** `bar`: full width; `float`: two pills at the end. */\nexport type MobileCallBarVariant = (typeof MOBILE_CALL_BAR_VARIANTS)[number]\nexport type MobileCallBarSkin = SkinEntry<MobileCallBarSlot, MobileCallBarVariant>\n\nexport interface MobileCallBarProps extends MobileCallBarSkin {\n  readonly phone: UiPhone\n  /** Words before the number, for example \"Call\". The button's name always includes the number. */\n  readonly phoneLabel?: string | undefined\n  readonly quote: ShellQuote\n  /**\n   * A shorter quote label for phones narrower than 420 px, for example \"Free quote\" for \"Get a Free Quote\". It must be\n   * part of the quote label; the button's text and name stay the full label.\n   */\n  readonly compactLabel?: string | undefined\n}\n\nexport function MobileCallBar({ phone, phoneLabel, quote, compactLabel, variant = 'bar', classes }: MobileCallBarProps) {\n  return (\n    <CallBarController variant={variant} className={classes?.root}>\n      <PhoneLink phone={phone} placement=\"fab\" label={phoneLabel} showIcon variant=\"button\" classes={{ root: classes?.call }} />\n      <ShellQuoteButton label={quote.label} href={quote.href} placement=\"floating\" ctaId=\"quote-callbar\" compactLabel={compactLabel} classes={{ root: classes?.quote }} />\n    </CallBarController>\n  )\n}\n"]}
+{"version":3,"file":"mobile-call-bar.js","sourceRoot":"","sources":["../../../src/ui-kit/shell/mobile-call-bar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAGnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIxD,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,OAAO,CAAU,CAAA;AAqBjE,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,EAAE,OAAO,EAAsB;IAC5H,OAAO,CACL,MAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,KAAK,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,aAC9F,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,QAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAI,EAC1H,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAC,UAAU,EAAC,KAAK,EAAC,eAAe,EAAC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAI,IAClJ,CACrB,CAAA;AACH,CAAC","sourcesContent":["/**\n * F6: the phone call bar (server component). Call and quote always one tap away below 1024 px: it shows once the\n * hero's own call and quote buttons (`data-bl-call-path`) have scrolled out, and hides over the footer, the drawer, a\n * dialog, any call path and while a form field has focus. Call reports placement `fab`; the quote button sends\n * `lead_cta_click` with placement `floating`. Render it once, after the page's `<main>`.\n *\n * Both buttons stay on one line down to 360 px (3.15.0): the number never wraps or truncates; below 420 px the verb\n * (\"Call\") is visually hidden (the link's name keeps it) and the quote button shows `compactLabel` when given.\n *\n * `layout.show: 'always'` (3.16.0, as AA's live site): the bar shows from the first phone screen, beside the hero's\n * buttons, still Call before Quote (K6), and still hides over the footer, a dialog and a focused field.\n */\nimport { PhoneLink } from '../primitives/links.js'\nimport { ShellQuoteButton } from './shell-quote.js'\nimport type { SkinEntry } from '../skin.js'\nimport type { UiPhone } from '../types.js'\nimport { CallBarController } from './call-bar-client.js'\nimport type { ShellQuote } from './mobile-drawer.js'\n\nexport type MobileCallBarSlot = 'root' | 'call' | 'quote'\nexport const MOBILE_CALL_BAR_VARIANTS = ['bar', 'float'] as const\n/** `bar`: full width; `float`: two pills at the end. */\nexport type MobileCallBarVariant = (typeof MOBILE_CALL_BAR_VARIANTS)[number]\nexport interface MobileCallBarLayout {\n  /** `after-call-path` (the default): once the hero's buttons scroll out; `always`: from the first phone screen. */\n  readonly show?: 'after-call-path' | 'always'\n}\nexport type MobileCallBarSkin = SkinEntry<MobileCallBarSlot, MobileCallBarVariant, MobileCallBarLayout>\n\nexport interface MobileCallBarProps extends MobileCallBarSkin {\n  readonly phone: UiPhone\n  /** Words before the number, for example \"Call\". The button's name always includes the number. */\n  readonly phoneLabel?: string | undefined\n  readonly quote: ShellQuote\n  /**\n   * A shorter quote label for phones narrower than 420 px, for example \"Free quote\" for \"Get a Free Quote\". It must be\n   * part of the quote label; the button's text and name stay the full label.\n   */\n  readonly compactLabel?: string | undefined\n}\n\nexport function MobileCallBar({ phone, phoneLabel, quote, compactLabel, variant = 'bar', layout, classes }: MobileCallBarProps) {\n  return (\n    <CallBarController variant={variant} always={layout?.show === 'always'} className={classes?.root}>\n      <PhoneLink phone={phone} placement=\"fab\" label={phoneLabel} showIcon variant=\"button\" classes={{ root: classes?.call }} />\n      <ShellQuoteButton label={quote.label} href={quote.href} placement=\"floating\" ctaId=\"quote-callbar\" compactLabel={compactLabel} classes={{ root: classes?.quote }} />\n    </CallBarController>\n  )\n}\n"]}

package/dist/ui-kit/structure.css

@@ -311,6 +311,43 @@
     opacity: 0.6;
   }
 
+  /* 07-motif.css */
+  /* 3.16.0 brand motif tokens: a client's own marks, available to every section. Each default draws nothing, and none
+     overrides a property a skin sets, so a site opts in by setting the token:
+     --bl-motif-rule-display: block     a short rule above each section H2 (size, weight, colour, gap tokens below);
+     --bl-motif-dash-display: inline-block   a dash before each eyebrow;
+     --bl-motif-divider: 2px solid …    a border between neighbouring sections;
+     --bl-motif-texture: url(…)         a background image on the page's band;
+     --bl-motif-media-clip: polygon(…)  a corner shape for section photos. */
+
+  [data-bl-section] h2[data-slot='heading']::before {
+    content: '';
+    display: var(--bl-motif-rule-display, none);
+    inline-size: var(--bl-motif-rule-size, 3rem);
+    block-size: var(--bl-motif-rule-weight, 3px);
+    margin-block-end: var(--bl-motif-rule-gap, 0.75rem);
+    background: var(--bl-motif-rule-color, currentColor);
+  }
+  [data-bl-section] [data-slot='eyebrow']::before,
+  [data-bl='eyebrow']::before {
+    content: '';
+    display: var(--bl-motif-dash-display, none);
+    inline-size: var(--bl-motif-dash-size, 1.5rem);
+    block-size: var(--bl-motif-dash-weight, 2px);
+    margin-inline-end: var(--bl-motif-dash-gap, 0.5rem);
+    vertical-align: middle;
+    background: var(--bl-motif-dash-color, currentColor);
+  }
+  [data-bl-section] + [data-bl-section] {
+    border-block-start: var(--bl-motif-divider, none);
+  }
+  [data-bl-section][data-tone='band'] {
+    background-image: var(--bl-motif-texture, none);
+  }
+  [data-bl-section] [data-bl='media'] {
+    clip-path: var(--bl-motif-media-clip, none);
+  }
+
   /* 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
@@ -1163,6 +1200,36 @@
   [data-bl-section='hero'] [data-slot='scrim'] {
     display: none;
   }
+  /* 3.16.0: the form's heading block, the seal on the photo and the photo's own treatment (all from the skin's tokens). */
+  [data-bl-section='hero'] [data-slot='formHead'] {
+    display: grid;
+    gap: 0.25rem;
+    margin-block-end: 1rem;
+  }
+  [data-bl-section='hero'] [data-slot='formHead'] :where(h2) {
+    margin: 0;
+  }
+  [data-bl-section='hero'] > [data-slot='inner'] > [data-slot='media'] {
+    position: relative;
+  }
+  [data-bl-section='hero'] [data-slot='media'] > [data-bl='media'] {
+    overflow: hidden;
+    border-radius: var(--bl-hero-photo-radius, 0);
+    box-shadow: var(--bl-hero-photo-shadow, none);
+  }
+  [data-bl-section='hero'] [data-slot='media'] > [data-bl='media'] > img {
+    filter: var(--bl-hero-photo-filter, none);
+  }
+  [data-bl-section='hero'] [data-slot='seal'] {
+    position: absolute;
+    z-index: 1;
+    inset-block-end: 1rem;
+    inset-inline-start: 1rem;
+    display: grid;
+    justify-items: center;
+    max-width: 10rem;
+    text-align: center;
+  }
   /* 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'] {
@@ -1228,6 +1295,21 @@
       position: absolute;
       inset: 0;
     }
+    /* 3.16.0: a scrim on any variant, coloured by --bl-hero-scrim; `column` covers the text side only. */
+    [data-bl-section='hero'][data-scrim] [data-slot='scrim'] {
+      display: block;
+      position: absolute;
+      inset: 0;
+      background: var(--bl-hero-scrim, none);
+      pointer-events: none;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'][data-scrim='column'] [data-slot='scrim'] {
+      inset-inline-end: var(--bl-hero-scrim-column-end, 40%);
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] [data-slot='seal'] {
+      inset-inline: auto 1.5rem;
+      inset-block-end: 1.5rem;
+    }
   }
 
   /* 30-reviews.css */
@@ -1240,11 +1322,23 @@
     gap: 0.35rem 0.5rem;
     margin: 0;
   }
-  [data-bl='rating-chip'] > [data-slot='source'] {
+  [data-bl='rating-chip'] > :is(a[data-slot='source'], [data-slot='more']) {
     display: inline-flex;
     align-items: center;
     min-height: 24px;
   }
+  /* 3.16.0 figure display: the average large (--bl-rating-figure-size), then the stars, the count and the link. */
+  [data-bl='rating-chip'][data-display='figure'] {
+    align-items: baseline;
+  }
+  [data-bl='rating-chip'] [data-slot='figure'] {
+    font-family: var(--bl-font-display, inherit);
+    font-size: var(--bl-rating-figure-size, 2.5rem);
+    line-height: 1;
+  }
+  [data-bl='rating-chip'][data-display='figure'] > [data-slot='more'] {
+    flex-basis: 100%;
+  }
 
   [data-bl-section='reviews'] {
     container: bl-reviews / inline-size;
@@ -1370,6 +1464,12 @@
     container: bl-cta / inline-size;
     isolation: isolate;
   }
+  /* 3.16.0: the closing band's own colour, so it never reads as the footer. It outranks the shared band tone
+     (38-sequence.css), which loads later. */
+  [data-bl-section='cta'][data-tone='band'][data-variant] {
+    background-color: var(--bl-color-cta, var(--bl-color-band, transparent));
+    color: var(--bl-color-on-cta, var(--bl-color-on-band, inherit));
+  }
   [data-bl-section='cta'] :where(h2, p) {
     margin: 0;
   }
@@ -1411,6 +1511,23 @@
     gap: 2.5rem;
   }
 
+  @container bl-cta (min-width: 768px) {
+    [data-bl-section='cta'][data-arrangement='split'] [data-slot='content'] {
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      column-gap: 3rem;
+    }
+    [data-bl-section='cta'][data-arrangement='split'] [data-slot='content'] > :not([data-slot='actions']) {
+      grid-column: 1;
+    }
+    [data-bl-section='cta'][data-arrangement='split'] [data-slot='actions'] {
+      grid-column: 2;
+      grid-row: 1 / span 3;
+      justify-content: flex-end;
+      margin-top: 0;
+    }
+  }
+
   @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);
@@ -1718,12 +1835,30 @@
     align-items: stretch;
     gap: var(--bl-gutter, 1.25rem);
   }
-  [data-bl-section='proof-strip'] [data-slot='item'] {
+  [data-bl-section='proof-strip'] :is([data-slot='item'], [data-slot='link']) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.25rem 0.5rem;
   }
+  [data-bl-section='proof-strip'] [data-slot='link'] {
+    min-height: 24px;
+    color: inherit;
+  }
+  /* 3.16.0 tiles: the value as a large figure over its label. */
+  [data-bl-section='proof-strip'][data-variant='tiles'] :is([data-slot='item'], [data-slot='link']) {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  [data-bl-section='proof-strip'][data-variant='tiles'] [data-slot='link'] {
+    flex: 1;
+  }
+  [data-bl-section='proof-strip'][data-variant='tiles'] [data-slot='value'] {
+    font-family: var(--bl-font-display, inherit);
+    font-size: var(--bl-proof-figure-size, 2.25rem);
+    line-height: 1;
+  }
   [data-bl-section='proof-strip'] [data-slot='icon'] svg {
     width: 1.5em;
     height: 1.5em;

package/package.json

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