@fairgarden/design 0.1.0-alpha.0

package/utils/overlay.js

@@ -0,0 +1,73 @@
+'use client';
+import * as React from 'react';
+import { actionScaleVariants, primaryScaleVariants, secondaryScaleVariants, } from './scales';
+import { GroundContext, overlayScope, presetDefaults, toScopeAttributes } from './scope';
+import { POPUP_CLEARANCE_PX, POPUP_OFFSET_PX } from './tokens';
+/*
+ * Internal helpers shared by the portaled overlays (Popover, Preview Card,
+ * Dialog, Alert Dialog, Menu, Context Menu, Menubar, Tooltip, Toast, Select,
+ * Combobox, Autocomplete, Search). Not exported from any index: each overlay
+ * root uses them to declare its own `white` scope.
+ *
+ * Every overlay renders in its Base UI Portal, outside every band, so the
+ * popup root writes the overlay scope itself (`white`, `page` scheme, no
+ * data-theme) and takes the white preset's scales unless props override
+ * them; it never inherits the trigger's scales, nor the root's action scale
+ * (§10.1, §1.11.9) [D139].
+ */
+/** The attributes every overlay root writes: a `white` scope that follows the page mode [D139]. */
+export const overlayAttributes = toScopeAttributes(overlayScope);
+const overlayDefaults = presetDefaults[overlayScope.ground];
+/**
+ * The popup's color axes: the explicit props, else the overlay preset's
+ * defaults. Computed, never CVA defaults, so the classes mark a new scope
+ * root the way Ground's do [D133].
+ */
+export function overlayScales(primary, secondary) {
+    return {
+        primary: primary ?? overlayDefaults.primary,
+        secondary: secondary ?? overlayDefaults.secondary,
+    };
+}
+/**
+ * The overlay scope's action scale class (the white preset's amber), so a
+ * solid Button inside a popup takes the overlay's action, not the root's.
+ * Add it to the popup root beside its CVA classes.
+ */
+export const overlayActionClassName = actionScaleVariants[overlayDefaults.action === 'ink' ? overlayDefaults.primary : overlayDefaults.action];
+/** The overlay preset's default scale classes (primary, secondary, action), for a popup root without color props. */
+export const overlayScaleClassName = [
+    primaryScaleVariants[overlayDefaults.primary],
+    secondaryScaleVariants[overlayDefaults.secondary],
+    overlayActionClassName,
+].join(' ');
+/**
+ * Provides the overlay scope to the popup's children. React context reaches
+ * through portals, so without it a Button inside a popup opened from a
+ * forest field would write forest's scope attributes.
+ */
+export function OverlayScope({ children }) {
+    return React.createElement(GroundContext.Provider, { value: overlayScope }, children);
+}
+/**
+ * The anchored-panel offset from the trigger, `--ds-popup-offset` (8 px,
+ * §9.1, §10.1). Base UI positions in JavaScript, so the token is restated.
+ */
+export const OVERLAY_SIDE_OFFSET = POPUP_OFFSET_PX;
+/**
+ * Viewport clearance before a panel flips or shifts: `--ds-popup-clearance`
+ * (16 px, the base `--ds-space-margin`, §10.1).
+ */
+export const OVERLAY_COLLISION_PADDING = POPUP_CLEARANCE_PX;
+/**
+ * The anchored-panel tail on a 12 × 8 box (--ds-space-12 wide): 6 px of
+ * triangle plus the 2 px band that overlaps the panel's frame, filled with
+ * the face so the frame opens under the tail, and the two slanted edges at
+ * the frame's --border-size-2. The host module sets fill and stroke.
+ */
+export function OverlayTail({ className }) {
+    return (React.createElement("svg", { className: className, viewBox: "0 0 12 8", "aria-hidden": "true", focusable: "false" },
+        React.createElement("path", { d: "M0 8 6 1l6 7z", stroke: "none" }),
+        React.createElement("path", { d: "M0 7 6 1l6 6", fill: "none" })));
+}
+//# sourceMappingURL=overlay.js.map

package/utils/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/utils/overlay.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,GAGvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AACxF,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE9D;;;;;;;;;;;GAWG;AAEH,mGAAmG;AACnG,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAA;AAEhE,MAAM,eAAe,GAAG,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;AAE3D;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,OAAwC,EACxC,SAAwC;IAExC,OAAO;QACL,OAAO,EAAE,OAAO,IAAI,eAAe,CAAC,OAAO;QAC3C,SAAS,EAAE,SAAS,IAAI,eAAe,CAAC,SAAS;KAClD,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GACjC,mBAAmB,CAAC,eAAe,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;AAE1G,qHAAqH;AACrH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC;IAC7C,sBAAsB,CAAC,eAAe,CAAC,SAAS,CAAC;IACjD,sBAAsB;CACvB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEX;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAkC;IACvE,OAAO,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,QAAQ,CAA0B,CAAA;AACzF,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAA;AAElD;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,kBAAkB,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAA0B;IAC/D,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,OAAO,EAAC,UAAU,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;QAChF,8BAAM,CAAC,EAAC,eAAe,EAAC,MAAM,EAAC,MAAM,GAAG;QACxC,8BAAM,CAAC,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAG,CACjC,CACP,CAAA;AACH,CAAC"}

package/utils/pattern.module.css

@@ -0,0 +1,386 @@
+/*
+ * Patterns and the hatched fringe (§1.5.9, §4.9.1, §4.10). Compose into a
+ * module part in a top-level rule outside any @layer (Lightning CSS rejects
+ * nested composes):
+ *   .face { composes: patternGrain from '../../utils/pattern.module.css'; }
+ * or add the class from JS. One pattern class per element (patterns never
+ * overlap [D37]); the modifiers `patternPlate` and `patternInkSecondary`
+ * are added beside one.
+ *
+ * Construction [D36, D68, D126]. Every mark is an SVG tile used as a
+ * hard-edged CSS mask on a pseudo-element layer whose background is a role
+ * variable, so marks take the scope's colors and follow the mode with no
+ * selector. Dots are true circles; nothing is a gradient function; marks are
+ * opaque (no opacity, no alpha color). The host becomes the layer's
+ * containing block and stacking context (position: relative, isolation:
+ * isolate; any other non-static position also works), and the layer sits
+ * between the host's own ground and its content. `padding: inherit` puts the
+ * tile origin on the host's content-box corner, so dots and stripes land on
+ * the 4 px grid and column edges (§4.10.1). Patterns take ::before; grain
+ * takes ::before and ::after, and the fringe ::after, so grain and the fringe
+ * never share an element.
+ *
+ * Geometry. Tiles are drawn at the §1.5.9 token values and sized by the
+ * tokens (--ds-dotgrid-pitch, --ds-hatch-tile, --ds-dotscreen-pitch-*,
+ * --ds-awning-stripe); a mark keeps its proportion to its tile. Ranges and
+ * jitter (grain, fringe) are generator parameters baked into their tiles.
+ *
+ * Decorative (dotgrid, speckle, sunburst, grain, awning, fringe): dropped
+ * in print and in forced colors (§4.11, §4.12). Semantic (hatch, dotscreen): a --border-size-1
+ * --primary12 outline, and `print-color-adjust: exact` on the mark layer
+ * alone, so the marks print black through the remap (§4.13.4).
+ *
+ * Budget and text (§4.10.2, §4.10.4), the caller's job: patterned area stays
+ * under 35% of the page above the footer at each breakpoint; patterned bands
+ * never touch; only --primary12 text sits on a decorative pattern, and never
+ * --role-rule or --role-muted; behind running text a pattern covers ≤ 12%
+ * with marks ≤ --ds-sunburst-dot (grain ≈ 10.6%, dotgrid 0.7%). Dotgrid and
+ * awning carry display type and one action only; running text sits on a
+ * solid plate (a nested ground face). Semantic patterns carry no text: a
+ * label sits on a --primary1 knockout plate.
+ */
+@layer base {
+  .patternDotgrid,
+  .patternDotgridFine,
+  .patternSpeckle,
+  .patternSunburst,
+  .patternGrain,
+  .patternAwning,
+  .patternHatch,
+  .patternHatch0,
+  .patternHatch135,
+  .patternHatchCrossed,
+  .patternDotscreen,
+  .patternDotscreenPitch2,
+  .patternDotscreenPitch3,
+  .patternDotscreenHeavy,
+  .ornamentFringe {
+    position: relative;
+    isolation: isolate;
+  }
+
+  /* The mark layer: the host's padding box, behind its content. */
+  .patternDotgrid::before,
+  .patternDotgridFine::before,
+  .patternSpeckle::before,
+  .patternSunburst::before,
+  .patternGrain::before,
+  .patternGrain::after,
+  .patternAwning::before,
+  .patternHatch::before,
+  .patternHatch0::before,
+  .patternHatch135::before,
+  .patternHatchCrossed::before,
+  .patternDotscreen::before,
+  .patternDotscreenPitch2::before,
+  .patternDotscreenPitch3::before,
+  .patternDotscreenHeavy::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    box-sizing: border-box;
+    padding: inherit;
+    border-radius: inherit;
+    pointer-events: none;
+    mask-repeat: repeat;
+    mask-origin: content-box;
+    mask-clip: border-box;
+  }
+
+  /*
+   * pattern-dotgrid (decorative) [D72, D111]: --ds-dotgrid-dot (1.5 px) true
+   * circles at --ds-dotgrid-pitch (16 px) in --role-tint; --role-hairline on
+   * a plate (patternPlate). Technical grounds, figure plates, and the dot
+   * field on forest, night and amber feature bands (§2.2.1). Never behind
+   * running text.
+   */
+  .patternDotgrid::before,
+  .patternDotgridFine::before {
+    background-color: var(--role-tint);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='0.75'/%3E%3C/svg%3E");
+    mask-size: var(--ds-dotgrid-pitch) var(--ds-dotgrid-pitch);
+    mask-position: calc(var(--ds-dotgrid-pitch) / -2) calc(var(--ds-dotgrid-pitch) / -2);
+  }
+
+  /*
+   * pattern-dotgrid-fine: --ds-dotgrid-fine-dot (1 px) at
+   * --ds-dotgrid-fine-pitch (8 px), only at ≥ 2 dppx; below, the standard
+   * grid, because 1 px dots smudge gray at 1–1.5× density [D72].
+   */
+  @media (min-resolution: 2dppx) {
+    .patternDotgridFine::before {
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='0.5'/%3E%3C/svg%3E");
+      mask-size: var(--ds-dotgrid-fine-pitch) var(--ds-dotgrid-fine-pitch);
+      mask-position: calc(var(--ds-dotgrid-fine-pitch) / -2)
+        calc(var(--ds-dotgrid-fine-pitch) / -2);
+    }
+  }
+
+  /*
+   * pattern-speckle (decorative) [D176, D177]: one mark per --ds-speckle-grid
+   * (16 px) cell, jittered ±4 px: 70% round dots of --ds-speckle-dot (2 px)
+   * and 30% seed strokes 1 × 4 px at random angles, a third of them comma
+   * flecks, in --role-tint. A seamless tile of 16 × 16 cells (256 px;
+   * seeded, so deterministic); marks never leave their cell. One full-bleed
+   * band or one field per page (set it on the band's or field's Ground),
+   * map and media plates; --primary12 text at any size.
+   */
+  .patternSpeckle::before {
+    background-color: var(--role-tint);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M9.4 5.5h0M20.7 10.1h0M53.9 5.6h0M70.3 7.9h0M88.4 8.9h0M119.4 9.1h0M133.8 10.4h0M167.1 9.8h0M217.6 5h0M232.7 10.7h0M251.6 6.2h0M39.5 20.5h0M72.4 20.9h0M88.5 21.1h0M123.2 22.5h0M134.5 20.9h0M151 24.3h0M166 27.4h0M184.6 24.4h0M202.5 23.1h0M212.9 21h0M228.4 24.8h0M245.2 24.2h0M5.3 36.1h0M20.2 42.8h0M36.3 43.3h0M56.6 39.3h0M76 43.4h0M86.1 39.2h0M103.8 36.3h0M120.5 38.5h0M169.4 40h0M183.6 36.9h0M229.3 38.4h0M251.7 37h0M68.1 55.3h0M89.5 54.5h0M103.9 52.9h0M135.9 54.2h0M154.4 52.1h0M167.7 58h0M200.2 54.3h0M217 52.5h0M230.9 59.4h0M246.8 57.3h0M5.4 71.7h0M27.3 68.2h0M38.6 73.6h0M59 74.4h0M69.2 74.8h0M85.9 73.5h0M118.4 75.3h0M133.3 70.1h0M165.5 74.1h0M186.4 73.2h0M198.2 71h0M235.8 75.9h0M251.2 75.4h0M27.1 85.3h0M43.2 91.6h0M75.2 88.6h0M90.9 91.4h0M103.6 91.8h0M116.6 87.1h0M132 90.5h0M170.3 85.8h0M186.4 90.3h0M247.6 89.7h0M27.5 105h0M38.1 104.3h0M57.4 101.1h0M121.5 102.2h0M137 107.3h0M169.6 104h0M228.9 105.3h0M11.7 120.2h0M59.4 119.7h0M73.7 121.4h0M103.5 122.3h0M118.5 122.8h0M155.7 123h0M168.2 122.3h0M183.3 117.2h0M244.1 122.4h0M11.3 132.5h0M43.1 138.4h0M52.7 139.3h0M72.8 133.5h0M119.8 139.5h0M140 136.3h0M168.3 138.9h0M219.2 137.1h0M232.4 135.3h0M8.1 155.6h0M37.4 150h0M69.3 155.3h0M86.7 150.8h0M123.6 148.2h0M138.1 154.3h0M155 154.8h0M170.1 148.3h0M180.9 152.7h0M200.5 155.5h0M214.2 148.3h0M229.6 150.4h0M246.2 154.2h0M8.5 166.3h0M52.6 166.7h0M73.2 165.2h0M123.6 168.7h0M155.9 169.2h0M168.6 171.5h0M185.9 170.7h0M214.1 164.2h0M228.7 168.8h0M7.2 184.2h0M21.6 180.6h0M43.5 185.4h0M70.4 187.6h0M84.6 187.3h0M117 184h0M136.6 185.2h0M165.2 186.6h0M182.8 183.9h0M231.3 187.7h0M244.9 182.4h0M6.8 203h0M25.1 198.2h0M41.3 196.2h0M55 200.3h0M68.6 203.1h0M85.2 197h0M103 201.4h0M116.6 197.1h0M148.2 196.7h0M184.6 203.2h0M202.1 196.6h0M214.1 202.3h0M245.2 200.2h0M20.2 217.8h0M36.5 214.1h0M55.8 217.7h0M100.5 212.3h0M117.3 216h0M132.9 215.2h0M154 214.7h0M197.1 218.3h0M215.1 216.7h0M231.5 218.9h0M244.7 215.2h0M7.1 232.6h0M26 231h0M57.2 235.7h0M69.4 229.8h0M88 234.1h0M136.4 234.7h0M151.7 233.4h0M166.6 229.3h0M196.4 234.4h0M214 232.7h0M233.5 234.8h0M246.1 232.9h0M8.8 248.8h0M25.6 248.4h0M53.5 248.8h0M71.7 251.5h0M85.8 247.8h0M106.3 247.9h0M117.5 250.5h0M137.8 248.1h0M153.3 248.6h0M171.5 247.8h0M183.7 245.6h0M198.1 247.6h0M212.7 251h0M250.1 249.8h0' stroke-width='2'/%3E%3Cpath d='M37.2 8.2Q36.4 10.6 38.9 10.7M99.7 3.2L101.3 5.8M149.3 4Q149.4 6.5 151.8 5.7M181.3 9.1L182.6 11.8M197.8 4.3L197.2 7.3M5.9 21.5Q3.4 21.8 4.4 24.1M25.5 24.2L23.4 26.4M55.6 20.1L58.5 20.6M99.8 24.7L100.6 27.6M137.6 40.1L140.5 40.7M151.1 38L154 38.8M196.8 39.6L198.9 41.8M213.1 37.3L213.7 40.2M8.9 54.5Q6.4 54.7 7.3 57M20 51.6L22.1 53.7M43.2 52.1L44.2 55M57.7 55Q57.2 57.4 59.7 57.3M121.1 52.9Q121.5 55.3 123.7 54.2M180.7 57Q178.3 57.8 179.7 59.9M100.8 71.7L102.5 74.2M154.9 70.6Q153.4 72.6 155.7 73.5M215.8 74L218.6 75M8.1 88.2L5.1 88.3M58.9 84.5Q56.8 85.9 58.7 87.5M155.2 90.9Q153.2 89.3 152.3 91.6M196.7 86.5L199.3 88M215.2 83.7Q212.7 83.1 212.9 85.6M228.5 87.8L230.4 90.2M8 100L7.1 102.8M69.5 105.3L71.3 107.7M91.4 101.3L88.4 101.6M102.4 101.9L101.3 104.7M149 106.9L151.5 108.6M182.2 103.2Q179.9 104.1 181.5 106.1M197.4 105.2L195.4 107.4M214.8 100.3L211.9 101.1M249.6 105.8L246.8 106.7M22.3 117.6L22.8 120.6M39.1 118.5L38.4 121.4M87.9 116Q86 117.6 88.1 119M137.9 122.8Q138.8 125.1 140.8 123.7M203.6 118.1Q202 120 204.3 121M218.4 119.6L221.2 120.4M235.8 121.2L235 124.1M27.2 132.8L24.4 133.8M89.9 135.6L92.7 136.8M102.2 134.1L105.2 134.2M156.7 131.5L153.9 132.6M185.7 133.2L182.8 134.1M197.9 133.5Q195.8 135 197.8 136.5M243.6 136.2L246.4 137.3M25.3 152.8Q24.4 155.1 26.9 155.3M57.7 147.8L55 149.2M99.2 152.3L101.9 153.7M27.7 170.3L24.8 170.8M39.7 170.2Q37.6 171.5 39.5 173.1M91.4 168L88.5 168.9M103.4 167.5Q101.7 169.3 103.9 170.4M134.9 170.5L137.7 171.6M199.7 169.7L198.4 172.4M250 164Q247.8 165.2 249.6 167M51.8 179.6L53.8 181.9M101.9 180.1L103 182.9M151.5 179.8L154 181.5M195.7 182.6L197.8 184.7M216 182.8Q214.9 185.1 217.3 185.5M140.3 203.1L137.8 204.8M167.7 199.1L165.7 201.4M231.3 195L233.2 197.3M4.6 218L6.6 220.2M67.6 212.1L70.4 213.1M90.2 215.3Q87.7 215.9 88.9 218M170 218L168 220.3M181.9 212.2L181.8 215.2M41.5 228.5L38.5 228.8M101.3 234.2Q98.8 233.7 99 236.2M117 228.5L115.7 231.2M184.7 231.3Q183.7 233.6 186.1 233.9M41.3 247.4Q39.4 245.8 38.4 248M229.2 248.9L231.3 251' stroke-width='1'/%3E%3C/svg%3E");
+    mask-size: calc(16 * var(--ds-speckle-grid)) calc(16 * var(--ds-speckle-grid));
+  }
+
+  /*
+   * pattern-sunburst (decorative) [D143]: 60 rays 6° apart from an origin at
+   * the host's bottom centre, radius --ds-sunburst-radius (290 px), clipped
+   * by the host's edges. Lay the host out so that its bottom edge is the
+   * origin: --ds-space-40 below the CTA's bottom edge, or the band's bottom
+   * edge, which then clips the lower half (LTA). Marks are --ds-sunburst-dot
+   * (2.5 px) round-capped dashes on shared radii --ds-sunburst-pitch
+   * (6.5 px) apart, so arcs form across the rays, in five discrete zones
+   * outward: dots, then 4, 6, 8 and 10 px dashes (no ramp [D21]); the
+   * 6–10 px dashes take every second radius. In --role-tint. CTA backdrop
+   * only, at most one per page; only the CTA heading (--primary12, not
+   * --role-heading) and its action sit on it, and never with a shaped edge
+   * on the same band [D38].
+   */
+  .patternSunburst::before {
+    background-color: var(--role-tint);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-290 -290 580 580' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cdefs%3E%3Cpath id='r' d='M0-39V-287' stroke-dasharray='0 6.5 0 6.5 0 6.5 0 6.5 0 6.5 0 6.5 0 6.5 0 6.5 0 6.5 1.5 5 1.5 5 1.5 5 1.5 5 1.5 5 1.5 5 1.5 5 1.5 5 3.5 9.5 3.5 9.5 3.5 9.5 3.5 9.5 5.5 7.5 5.5 7.5 5.5 7.5 5.5 7.5 7.5 5.5 7.5 5.5 7.5 5.5'/%3E%3Cg id='a'%3E%3Cuse href='%23r'/%3E%3Cuse href='%23r' transform='rotate(6)'/%3E%3C/g%3E%3Cg id='b'%3E%3Cuse href='%23a'/%3E%3Cuse href='%23a' transform='rotate(12)'/%3E%3C/g%3E%3Cg id='c'%3E%3Cuse href='%23b'/%3E%3Cuse href='%23b' transform='rotate(24)'/%3E%3Cuse href='%23b' transform='rotate(48)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='rotate(72)'/%3E%3Cuse href='%23c' transform='rotate(144)'/%3E%3Cuse href='%23c' transform='rotate(216)'/%3E%3Cuse href='%23c' transform='rotate(288)'/%3E%3C/svg%3E");
+    mask-size: calc(2 * var(--ds-sunburst-radius)) calc(2 * var(--ds-sunburst-radius));
+    mask-repeat: no-repeat;
+    mask-origin: border-box;
+    mask-position: left 50% bottom calc(-1 * var(--ds-sunburst-radius));
+  }
+
+  /*
+   * pattern-grain, the stipple (decorative) [D120]: seeded random flecks of
+   * 0.5–1 px on a 160 px stitched tile, hard-thresholded (binary alpha),
+   * ≈ 5.3% in --role-grain-light (::before) and ≈ 5.3% in --role-grain-dark
+   * (::after), never overlapping. One card face on a deep or saturated
+   * ground: light grounds resolve both roles to their ground, so no grain
+   * shows there, and pink and royal show one side only (§1.5.16).
+   * --primary12 text keeps ≥ 4.5:1 over every fleck.
+   */
+  .patternGrain::before {
+    background-color: var(--role-grain-light);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
+    mask-size: auto;
+  }
+
+  .patternGrain::after {
+    background-color: var(--role-grain-dark);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
+    mask-size: auto;
+  }
+
+  /*
+   * pattern-awning (decorative) [D172, D175]: equal vertical stripes of
+   * --ds-awning-stripe (24 px), --role-tint alternating with the ground,
+   * starting at the left content-box edge; the band keeps a straight edge.
+   * Campaign bands only, at most one per page; display type and one action.
+   */
+  .patternAwning::before {
+    background-color: var(--role-tint);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
+    mask-size: calc(2 * var(--ds-awning-stripe)) 100%;
+  }
+
+  /* Semantic patterns: a --border-size-1 --primary12 outline on every fill [D12]. */
+  .patternHatch,
+  .patternHatch0,
+  .patternHatch135,
+  .patternHatchCrossed,
+  .patternDotscreen,
+  .patternDotscreenPitch2,
+  .patternDotscreenPitch3,
+  .patternDotscreenHeavy {
+    border: var(--border-size-1) solid var(--primary12);
+  }
+
+  .patternHatch::before,
+  .patternHatch0::before,
+  .patternHatch135::before,
+  .patternHatchCrossed::before,
+  .patternDotscreen::before,
+  .patternDotscreenPitch2::before,
+  .patternDotscreenPitch3::before,
+  .patternDotscreenHeavy::before {
+    background-color: var(--primary12);
+    print-color-adjust: exact;
+  }
+
+  /*
+   * pattern-hatch (semantic): 1 px lines at 45°. As a CSS tile the 45° hatch
+   * uses --ds-hatch-tile (8 px, ≈ 5.7 px pitch): an exact 6 px pitch needs an
+   * 8.49 px tile and shows seams [D72]. An SVG chart pattern rotates a 6 px
+   * pitch instead. Partial, projected or other; series slot 2.
+   */
+  .patternHatch::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M-1 1l2-2M0 8l8-8M7 9l2-2' stroke='%23000'/%3E%3C/svg%3E");
+    mask-size: var(--ds-hatch-tile) var(--ds-hatch-tile);
+  }
+
+  /* pattern-hatch-0: 1 px horizontal lines at --ds-hatch-pitch (6 px); series slot 4. */
+  .patternHatch0::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Crect width='6' height='1'/%3E%3C/svg%3E");
+    mask-size: var(--ds-hatch-pitch) var(--ds-hatch-pitch);
+  }
+
+  /* pattern-hatch-135: reserved for projected or partial data, never a series slot. */
+  .patternHatch135::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M-1 7l2 2M0 0l8 8M7-1l2 2' stroke='%23000'/%3E%3C/svg%3E");
+    mask-size: var(--ds-hatch-tile) var(--ds-hatch-tile);
+  }
+
+  /* pattern-hatch-crossed: 45° and 135° together; series slot 5, sequential step 5. */
+  .patternHatchCrossed::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M-1 1l2-2M0 8l8-8M7 9l2-2M-1 7l2 2M0 0l8 8M7-1l2 2' stroke='%23000'/%3E%3C/svg%3E");
+    mask-size: var(--ds-hatch-tile) var(--ds-hatch-tile);
+  }
+
+  /*
+   * pattern-dotscreen (semantic) [D72]: --ds-dotscreen-dot (1.25 px) true
+   * circles, orthogonal, at --ds-dotscreen-pitch-1 (6 px); Pitch2 5 px
+   * (series slot 3), Pitch3 4 px; heavy: --ds-dotscreen-dot-heavy (2 px) at
+   * 4 px. Tone: ≈ 3, 8 and 20% ink, so the steps read in order on paper.
+   */
+  .patternDotscreen::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='0.625'/%3E%3C/svg%3E");
+    mask-size: var(--ds-dotscreen-pitch-1) var(--ds-dotscreen-pitch-1);
+    mask-position: calc(var(--ds-dotscreen-pitch-1) / -2) calc(var(--ds-dotscreen-pitch-1) / -2);
+  }
+
+  .patternDotscreenPitch2::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5'%3E%3Ccircle cx='2.5' cy='2.5' r='0.625'/%3E%3C/svg%3E");
+    mask-size: var(--ds-dotscreen-pitch-2) var(--ds-dotscreen-pitch-2);
+    mask-position: calc(var(--ds-dotscreen-pitch-2) / -2) calc(var(--ds-dotscreen-pitch-2) / -2);
+  }
+
+  .patternDotscreenPitch3::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Ccircle cx='2' cy='2' r='0.625'/%3E%3C/svg%3E");
+    mask-size: var(--ds-dotscreen-pitch-3) var(--ds-dotscreen-pitch-3);
+    mask-position: calc(var(--ds-dotscreen-pitch-3) / -2) calc(var(--ds-dotscreen-pitch-3) / -2);
+  }
+
+  .patternDotscreenHeavy::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
+    mask-size: var(--ds-dotscreen-pitch-3) var(--ds-dotscreen-pitch-3);
+    mask-position: calc(var(--ds-dotscreen-pitch-3) / -2) calc(var(--ds-dotscreen-pitch-3) / -2);
+  }
+
+  /*
+   * ornament-fringe, the hatched fringe (decorative) [D172, D175]:
+   * --ds-stroke-1-5 ticks, --ds-fringe-tick (6 px) ± 2 px jitter, at
+   * --ds-fringe-pitch (4 px), in the band's --primary12, hanging from its top
+   * edge along the seam (a 96 px tile of 24 seeded ticks, round-capped at the
+   * free end). Drawn ticks, not a mask cut of the band. On the lower band of
+   * a campaign page: the page's one shaped edge and one decorative separator
+   * [D38, D39]. --ds-edge-shaped: none (set per scope by the role maps where
+   * the band shows its --role-seam rule instead, §4.9.2) removes it.
+   */
+  .ornamentFringe {
+    --fringe-jitter: 2px;
+  }
+
+  .ornamentFringe::after {
+    content: '';
+    display: var(--ds-edge-shaped, block);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: -1;
+    block-size: calc(var(--ds-fringe-tick) + var(--fringe-jitter));
+    pointer-events: none;
+    background-color: var(--primary12);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='8'%3E%3Cpath d='M2 0v5.25M6 0v7.25M10 0v4.25M14 0v6.25M18 0v3.25M22 0v5.25M26 0v6.25M30 0v4.25M34 0v7.25M38 0v5.25M42 0v3.25M46 0v6.25M50 0v4.25M54 0v5.25M58 0v7.25M62 0v4.25M66 0v6.25M70 0v5.25M74 0v3.25M78 0v7.25M82 0v5.25M86 0v4.25M90 0v6.25M94 0v5.25' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    mask-repeat: repeat-x;
+    mask-size: auto;
+  }
+
+  /*
+   * Forced colors (§4.11): decorative patterns and the fringe drop out, the
+   * fringe leaving its straight rule. Semantic marks carry meaning, so they
+   * stay, in the system text color.
+   */
+  @media (forced-colors: active) {
+    .patternDotgrid::before,
+    .patternDotgridFine::before,
+    .patternSpeckle::before,
+    .patternSunburst::before,
+    .patternGrain::before,
+    .patternGrain::after,
+    .patternAwning::before,
+    .ornamentFringe::after {
+      display: none;
+    }
+
+    .ornamentFringe {
+      border-block-start: var(--border-size-1) solid var(--primary12);
+    }
+
+    .patternHatch::before,
+    .patternHatch0::before,
+    .patternHatch135::before,
+    .patternHatchCrossed::before,
+    .patternDotscreen::before,
+    .patternDotscreenPitch2::before,
+    .patternDotscreenPitch3::before,
+    .patternDotscreenHeavy::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /* Dotgrid on a figure or specimen plate: --role-hairline (§1.5.9). */
+  .patternPlate::before {
+    background-color: var(--role-hairline);
+  }
+
+  /* A semantic pattern in an odd series slot's ink (§1.5.16) [D125]; the outline stays --primary12. */
+  .patternInkSecondary::before {
+    background-color: var(--secondary11);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Decorative patterns and the fringe are removed (§4.12). */
+    .patternDotgrid::before,
+    .patternDotgridFine::before,
+    .patternSpeckle::before,
+    .patternSunburst::before,
+    .patternGrain::before,
+    .patternGrain::after,
+    .patternAwning::before,
+    .ornamentFringe::after {
+      display: none;
+    }
+
+    /* The fringe drops to a straight --border-size-1 rule at the ground change [D172]. */
+    .ornamentFringe {
+      border-block-start: var(--border-size-1) solid var(--primary12);
+    }
+
+    /*
+     * Standard dot screens print 1 pt dots, stated rather than scaled from
+     * 1.25 px (0.94 pt); pitches 4.5 / 3.75 / 3 pt and the heavy 1.5 pt dot
+     * are the px values at 0.75 pt per px (§1.5.9).
+     */
+    .patternDotscreen::before {
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='0.6667'/%3E%3C/svg%3E");
+    }
+
+    .patternDotscreenPitch2::before {
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5'%3E%3Ccircle cx='2.5' cy='2.5' r='0.6667'/%3E%3C/svg%3E");
+    }
+
+    .patternDotscreenPitch3::before {
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Ccircle cx='2' cy='2' r='0.6667'/%3E%3C/svg%3E");
+    }
+  }
+}

package/utils/print.css

@@ -0,0 +1,125 @@
+/*
+ * The print remap (§1.11.6, §1.4.5). Print always renders light, whatever
+ * the screen mode, including inside a data-theme="dark" band: steps 1–5 of
+ * the role scales go white and 6–12 black; contrast inks and label aliases
+ * black; halo, grounds, tints and grain white; the seam black. Browsers drop
+ * backgrounds by default, so fills and decorative patterns vanish; borders
+ * and inline SVG print. Modules add structural print rules only.
+ */
+@layer print {
+  @media print {
+    @page {
+      margin: var(--ds-print-margin-block) var(--ds-print-margin-inline);
+    }
+
+    :root {
+      color-scheme: light;
+      --ds-font-fine: var(--ds-font-text);
+      --ds-muted-weight-step: 0;
+
+      /* Print values of the tokens (§1.5). 1 px = 0.75 pt, so most px values already map exactly. */
+      --ds-font-size-display-xl: 26pt;
+      --ds-font-size-stat: 24pt; /* type-stat (§1.5.6, §8.8); type-display-xl keeps 26 pt */
+      --ds-font-size-display: 22pt;
+      --ds-font-size-h2: 17pt;
+      --ds-font-size-itemhead: 13pt;
+      --ds-font-size-kicker: 10.5pt;
+      --ds-font-size-subhead: 11pt;
+      --ds-font-size-lead: 12pt;
+      --ds-font-size-quote: 14pt;
+      --ds-font-size-body: 10.5pt;
+      --ds-font-size-body-ui: 10pt;
+      --ds-font-size-marquee: 11pt;
+      --ds-font-size-button-lg: 10pt;
+      --ds-font-size-button: 9pt;
+      --ds-font-size-footnote: 8.5pt;
+      --ds-font-size-caption: 8.5pt;
+      --ds-font-size-eyebrow: 8pt;
+      --ds-font-size-label: 8pt;
+      --ds-leading-reading: var(--ds-leading-compact);
+      --ds-space-56: 36pt;
+      --ds-space-section: 36pt;
+      --size-px-10: 36pt;
+      --size-px-11: 48pt;
+      --ds-space-margin: 0;
+      --ds-stroke-0-75: 0.75pt;
+      --ds-stroke-1-25: 1pt;
+      --ds-stroke-1-5: 1.1pt;
+      --ds-stroke-8: 4pt;
+      --ds-measure-reading: var(--ds-measure-print);
+    }
+
+    :root,
+    [data-ground] {
+      --primary1: #fff;
+      --primary2: #fff;
+      --primary3: #fff;
+      --primary4: #fff;
+      --primary5: #fff;
+      --primary6: #000;
+      --primary7: #000;
+      --primary8: #000;
+      --primary9: #000;
+      --primary10: #000;
+      --primary11: #000;
+      --primary12: #000;
+      --secondary1: #fff;
+      --secondary2: #fff;
+      --secondary3: #fff;
+      --secondary4: #fff;
+      --secondary5: #fff;
+      --secondary6: #000;
+      --secondary7: #000;
+      --secondary8: #000;
+      --secondary9: #000;
+      --secondary10: #000;
+      --secondary11: #000;
+      --secondary12: #000;
+      --action1: #fff;
+      --action2: #fff;
+      --action3: #fff;
+      --action4: #fff;
+      --action5: #fff;
+      --action6: #000;
+      --action7: #000;
+      --action8: #000;
+      --action9: #000;
+      --action10: #000;
+      --action11: #000;
+      --action12: #000;
+      --primary-contrast: #000;
+      --secondary-contrast: #000;
+      --action-contrast: #000;
+      --role-inverse: #000;
+      --role-action-label: #000;
+      --role-action-pressed-label: #000;
+      --role-select-mark: #000;
+      --role-status-text: #000;
+      --role-halo: #fff;
+      --role-ground: #fff;
+      --role-seam: #000;
+      --role-tint: #fff;
+      --role-grain-light: #fff;
+      --role-grain-dark: #fff;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) {
+      break-after: avoid;
+      break-inside: avoid;
+    }
+
+    :where(figure, table, tr, img, svg, blockquote) {
+      break-inside: avoid;
+    }
+
+    :where(p, li) {
+      orphans: 3;
+      widows: 3;
+    }
+
+    /* Long-form documents start each H2 on a new page [D168]; a page-template flag, never a prop. */
+    :root[data-print='long-form'] h2:not(:first-of-type) {
+      break-before: page;
+    }
+  }
+}

package/utils/printUrl.d.ts

@@ -0,0 +1,13 @@
+/**
+ * An absolute URL cleaned per §7.6: no protocol, `www.`, tracking
+ * parameters or trailing slash. Relative or malformed URLs return null.
+ */
+export declare function cleanUrl(href: string): string | null;
+/**
+ * The short URL printed after a link, "Label (short URL)" (§7.6.1): the
+ * cleaned URL, for absolute URLs of at most 30 cleaned characters. Longer
+ * or relative URLs return null: they take a lettered link note, which the
+ * page collects.
+ */
+export declare function printUrl(href: unknown): string | null;
+//# sourceMappingURL=printUrl.d.ts.map

package/utils/printUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"printUrl.d.ts","sourceRoot":"","sources":["../src/utils/printUrl.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAcpD;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAIrD"}

package/utils/printUrl.js

@@ -0,0 +1,43 @@
+/*
+ * The print URL rules (§7.6), shared by Link and Section Header. Not
+ * exported from any index.
+ */
+/** Query parameters dropped when a URL is cleaned for print (§7.6). */
+const TRACKING_PARAM = /^(utm_.+|fbclid|gclid|msclkid|mc_cid|mc_eid)$/i;
+/** The longest cleaned URL printed inline after its link (§7.6.1). */
+const PRINT_URL_MAX = 30;
+/**
+ * An absolute URL cleaned per §7.6: no protocol, `www.`, tracking
+ * parameters or trailing slash. Relative or malformed URLs return null.
+ */
+export function cleanUrl(href) {
+    if (!/^https?:\/\//i.test(href))
+        return null;
+    let url;
+    try {
+        url = new URL(href);
+    }
+    catch {
+        return null;
+    }
+    for (const key of Array.from(url.searchParams.keys())) {
+        if (TRACKING_PARAM.test(key))
+            url.searchParams.delete(key);
+    }
+    const host = url.host.replace(/^www\./i, '');
+    const path = url.pathname.replace(/\/+$/, '');
+    return `${host}${path}${url.search}${url.hash}`;
+}
+/**
+ * The short URL printed after a link, "Label (short URL)" (§7.6.1): the
+ * cleaned URL, for absolute URLs of at most 30 cleaned characters. Longer
+ * or relative URLs return null: they take a lettered link note, which the
+ * page collects.
+ */
+export function printUrl(href) {
+    if (typeof href !== 'string')
+        return null;
+    const cleaned = cleanUrl(href);
+    return cleaned === null || cleaned.length > PRINT_URL_MAX ? null : cleaned;
+}
+//# sourceMappingURL=printUrl.js.map

package/utils/printUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"printUrl.js","sourceRoot":"","sources":["../src/utils/printUrl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,uEAAuE;AACvE,MAAM,cAAc,GAAG,gDAAgD,CAAA;AAEvE,sEAAsE;AACtE,MAAM,aAAa,GAAG,EAAE,CAAA;AAExB;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAC5C,IAAI,GAAQ,CAAA;IACZ,IAAI,CAAC;QACH,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAA;IACb,CAAC;IACD,KAAK,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;QACtD,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;YAAE,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IAC5D,CAAC;IACD,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;IAC5C,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAC7C,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,IAAI,EAAE,CAAA;AACjD,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAa;IACpC,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAA;IACzC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC9B,OAAO,OAAO,KAAK,IAAI,IAAI,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,CAAC"}