@cloudgrid-io/ui 0.33.0 → 0.34.0

package/README.md

@@ -62,6 +62,29 @@ The order matters, and getting it wrong fails quietly rather than loudly.
 Not using the Console's face: skip the `console.css` line. Not using shadcn: skip the last line. Not using Tailwind: `tokens.css` alone gives you every
 value as a custom property.
 
+### The docs site (Starlight)
+
+The docs site is not Tailwind. It takes three stylesheets through Starlight's `customCss`, in this
+order, and the code-block configuration in one line:
+
+```js
+import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code"
+
+starlight({
+  customCss: [
+    "@cloudgrid-io/ui/fonts.css",
+    "@cloudgrid-io/ui/tokens.css",
+    "@cloudgrid-io/ui/docs.css",
+  ],
+  expressiveCode: cloudgridExpressiveCode,
+})
+```
+
+`docs.css` maps Starlight's `--sl-*` variables onto the tokens and adds a few targeted rules. It
+is light only: it styles no dark scope, so the site must force the light theme and drop the
+theme picker (override Starlight's `ThemeProvider` and `ThemeSelect`). It has to come after
+`tokens.css`, which every value in it reads.
+
 ## Point Tailwind at the package
 
 Tailwind v4 ignores `node_modules` when it scans for classes, so utilities used only inside
@@ -128,6 +151,8 @@ rest).
 |---|---|
 | `@cloudgrid-io/ui/tokens.css` | every value as a CSS custom property |
 | `@cloudgrid-io/ui/console.css` | product preset: body and display type set to Manrope |
+| `@cloudgrid-io/ui/docs.css` | product preset: the Starlight docs site, light only, see below |
+| `@cloudgrid-io/ui/expressive-code` | the docs site's code blocks: Expressive Code theme and overrides, monochrome on ink |
 | `@cloudgrid-io/ui/theme.css` | maps Tailwind utilities onto the tokens |
 | `@cloudgrid-io/ui/shadcn.css` | maps shadcn's variables onto the tokens |
 | `@cloudgrid-io/ui/fonts.css` | the three self-hosted families |

package/dist/badge/css-live.d.ts

@@ -6,10 +6,13 @@
  * caption size (13px, the type floor; the design draws 12) in the UI face.
  *
  * The sign is ONE white box under three mask layers: the plug glyph, a cover
- * that fills the box, and a disc. The mask is glyph + (cover x disc). At rest
- * the cover sits above the box, so only the glyph shows; the arrival starts it
- * over the box, so the whole disc is white, and slides it up and out, which
- * cuts the plug out of the disc from the bottom up.
+ * and a disc. The mask is glyph + (cover x disc). The cover is twice the box's
+ * height, opaque on top and clear below. At rest its clear half sits over the
+ * box, so only the glyph shows; the arrival starts its opaque half over the box,
+ * so the whole disc is white, and slides it up, which cuts the plug out of the
+ * disc from the bottom up. The cover always paints over the box: WebKit leaves
+ * the layers below untouched wherever a layer paints nothing, so a cover parked
+ * outside the box kept the whole disc white there (ui issue 346).
  *
  * Arrival (from `--cgb-start`, default 300ms): the pill rises 500ms; the sign
  * swells from 70% at +150ms and the cut starts at +200ms; the pill opens to

package/dist/badge/css-live.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAoBH,eAAO,MAAM,cAAc,EAAE,MAwBpB,CAAA"}
+{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAoBH,eAAO,MAAM,cAAc,EAAE,MAwBpB,CAAA"}

package/dist/badge/css-live.js

@@ -6,10 +6,13 @@
  * caption size (13px, the type floor; the design draws 12) in the UI face.
  *
  * The sign is ONE white box under three mask layers: the plug glyph, a cover
- * that fills the box, and a disc. The mask is glyph + (cover x disc). At rest
- * the cover sits above the box, so only the glyph shows; the arrival starts it
- * over the box, so the whole disc is white, and slides it up and out, which
- * cuts the plug out of the disc from the bottom up.
+ * and a disc. The mask is glyph + (cover x disc). The cover is twice the box's
+ * height, opaque on top and clear below. At rest its clear half sits over the
+ * box, so only the glyph shows; the arrival starts its opaque half over the box,
+ * so the whole disc is white, and slides it up, which cuts the plug out of the
+ * disc from the bottom up. The cover always paints over the box: WebKit leaves
+ * the layers below untouched wherever a layer paints nothing, so a cover parked
+ * outside the box kept the whole disc white there (ui issue 346).
  *
  * Arrival (from `--cgb-start`, default 300ms): the pill rises 500ms; the sign
  * swells from 70% at +150ms and the cut starts at +200ms; the pill opens to
@@ -36,13 +39,13 @@ const GLYPH_MASK = 'url("data:image/svg+xml,' +
     encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='53 14.977 41 41'><path d='${SIGN_GLYPH_PATH}'/></svg>`) +
     '")';
 // A mask reads only alpha, so any opaque token draws "keep"; the ink is one.
-const MASK = `${GLYPH_MASK},linear-gradient(var(--cg-text-primary) 0 0),radial-gradient(circle at 10.04px 10.1px,var(--cg-text-primary) 9.25px,transparent 9.75px)`;
+const MASK = `${GLYPH_MASK},linear-gradient(var(--cg-text-primary) 50%,transparent 50%),radial-gradient(circle at 10.04px 10.1px,var(--cg-text-primary) 9.25px,transparent 9.75px)`;
 export const BADGE_LIVE_CSS = /* @__PURE__ */ (() => `.cgb-live-wrap{--cgb-t0:var(--cgb-start,300ms);position:absolute;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-top:22px}
 .cgb-live{position:relative;display:flex;align-items:center;width:max-content;height:28px;padding:4px;border-radius:var(--cg-radius-pill);background:var(--cg-primary);color:var(--cg-text-on-primary);` +
     `text-decoration:none;box-shadow:var(--cg-shadow-card);cursor:pointer;animation:cgb-rise 500ms var(--cg-ease-out-expo) var(--cgb-t0) both}
 .cgb-live:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
 .cgb-live-icon{flex:none;width:20px;height:20px;background:var(--cg-text-on-primary);` +
-    `-webkit-mask-image:${MASK};mask-image:${MASK};-webkit-mask-size:20px 20px;mask-size:20px 20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;` +
+    `-webkit-mask-image:${MASK};mask-image:${MASK};-webkit-mask-size:20px 20px,20px 40px,20px 20px;mask-size:20px 20px,20px 40px,20px 20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;` +
     `-webkit-mask-composite:source-over,source-in,source-over;mask-composite:add,intersect,add;-webkit-mask-position:0 0,0 -20px,0 0;mask-position:0 0,0 -20px,0 0;` +
     `animation:cgb-plug 480ms var(--cg-ease-in-out-cubic) calc(var(--cgb-t0) + 200ms) both,cgb-swell 560ms var(--cg-ease-spring) calc(var(--cgb-t0) + 150ms) both;` +
     `transition:transform 420ms var(--cg-ease-spring)}

package/dist/badge/css-live.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;;;GAIG;AACH,MAAM,UAAU,GACd,0BAA0B;IAC1B,kBAAkB,CAChB,qGAAqG,eAAe,WAAW,CAChI;IACD,IAAI,CAAA;AAEN,6EAA6E;AAC7E,MAAM,IAAI,GAAG,GAAG,UAAU,yIAAyI,CAAA;AAEnK,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D;wMACsM;IACtM;;sFAEoF;IACpF,sBAAsB,IAAI,eAAe,IAAI,uGAAuG;IACpJ,gKAAgK;IAChK,+JAA+J;IAC/J;;;;;;qLAMmL;IACnL;;;;;;CAMD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,+FAA+F,CAAC;IACtH,IAAI,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;;;GAIG;AACH,MAAM,UAAU,GACd,0BAA0B;IAC1B,kBAAkB,CAChB,qGAAqG,eAAe,WAAW,CAChI;IACD,IAAI,CAAA;AAEN,6EAA6E;AAC7E,MAAM,IAAI,GAAG,GAAG,UAAU,yJAAyJ,CAAA;AAEnL,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D;wMACsM;IACtM;;sFAEoF;IACpF,sBAAsB,IAAI,eAAe,IAAI,+IAA+I;IAC5L,gKAAgK;IAChK,+JAA+J;IAC/J;;;;;;qLAMmL;IACnL;;;;;;CAMD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,+FAA+F,CAAC;IACtH,IAAI,CAAC,EAAE,CAAA"}

package/dist/badge/palette.d.ts

@@ -1,5 +1,5 @@
 /** Every badge token as one declaration list, for the badge root's rule. */
-export declare const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(34, 34, 34, 0.4);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
+export declare const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-secondary-press:#a6cf57;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(34, 34, 34, 0.4);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
 /** The same values as a map, for tests and the gallery. Not needed at runtime. */
 export declare const BADGE_TOKENS: Readonly<Record<string, string>>;
 /** `--cg-font-ui`: Manrope. The tab label and button labels. */

package/dist/badge/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/badge/palette.ts"],"names":[],"mappings":"AAMA,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,+iFACygF,CAAA;AAE9iF,kFAAkF;AAClF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAsEzD,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,aAAa,6FAA6F,CAAA;AAEvH,iEAAiE;AACjE,eAAO,MAAM,eAAe,wIAAwI,CAAA;AAEpK;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB,CAGA,CAAA"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/badge/palette.ts"],"names":[],"mappings":"AAMA,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,4kFACsiF,CAAA;AAE3kF,kFAAkF;AAClF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuEzD,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,aAAa,6FAA6F,CAAA;AAEvH,iEAAiE;AACjE,eAAO,MAAM,eAAe,wIAAwI,CAAA;AAEpK;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB,CAGA,CAAA"}

package/dist/badge/palette.js

@@ -4,13 +4,14 @@
 // carries its token values with it. Each is the resolved value of the token of
 // the same name at :root. Retune the token and rebuild; this file follows.
 /** Every badge token as one declaration list, for the badge root's rule. */
-export const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(34, 34, 34, 0.4);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
+export const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-secondary-press:#a6cf57;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(34, 34, 34, 0.4);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
 /** The same values as a map, for tests and the gallery. Not needed at runtime. */
 export const BADGE_TOKENS = {
     "--cg-primary": "#5a47f0",
     "--cg-primary-press": "#4b39db",
     "--cg-primary-tint": "#eeecfe",
     "--cg-secondary": "#b6de68",
+    "--cg-secondary-press": "#a6cf57",
     "--cg-tertiary": "#60e9f0",
     "--cg-tertiary-press": "#4dd8e0",
     "--cg-accent": "#0061f0",

package/dist/badge/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","sourceRoot":"","sources":["../../src/badge/palette.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"palette.js","sourceRoot":"","sources":["../../src/badge/palette.ts"],"names":[],"mappings":"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"}

package/dist/blocks/bar-chart.d.ts

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { type ChartDatum } from "./chart-parts.js";
+/**
+ * Daily bars, for the App page's Views over time and the Coming soon Time saved
+ * over time (#332, Figma "App page: final cut", frames 01 and 02).
+ *
+ * The Console hand-builds its Views chart today (`AppViewsChart`), with 11px axis
+ * text. This is that chart moved into the library with the frames' additions: an
+ * optional value label over each bar, and a version marker.
+ *
+ * ## Plain data in, nothing fetched
+ *
+ * `data` is an array of `{ label, value }`, and the label is printed as given:
+ * the chart never parses a date, so it never disagrees with the Console about a
+ * time zone. Empty (`data` is `[]`) and pending (`pending`) are states of the
+ * block, so a caller does not draw its own.
+ *
+ * - **Empty** prints `emptyLabel` where the plot goes. An empty series is a real
+ *   measurement of nothing; a series of zeros is a real measurement of zero, and
+ *   that one IS drawn, as a hairline stub per day, the frame's dashed baseline.
+ * - **Pending** draws a skeleton the plot's size and says "Loading" to a screen
+ *   reader. It never draws a zero, which a reader would take for a measurement.
+ *
+ * ## What it draws
+ *
+ * - **The peak callout** (`peak`): "Peak 57 · Sep 10", from the first highest
+ *   point. Left out when nothing is above zero, since "Peak 0" is not a peak.
+ * - **The value axis** (`valueAxis`, on by default): 0 and three steps on a
+ *   1/2/5 ladder, so 57 draws 0, 20, 40, 60. The Time saved frame has none and
+ *   labels its bars instead.
+ * - **Value labels** (`valueLabels`): the value over each bar, and none over a
+ *   zero, as the Time saved frame draws its first week. The plot keeps 20px
+ *   clear above the tallest bar so its label is not cut off.
+ * - **The date axis**: the first and last label and evenly spaced ones between,
+ *   `dateTicks` in all (5 by default, the frame's count).
+ * - **The version marker** (`marker`): a dashed rule through the middle of one
+ *   day and a chip such as "v11", found by the point's `key` (or `label`). The
+ *   chip sits right of the rule, or left of it in the last fifth of the plot so it
+ *   stays inside the card.
+ *
+ * ## Colour and marks
+ *
+ * Bars are `--cg-text-accent`: purple on the page, white on the purple panel,
+ * lime on ink, the pair `Spinner` and `ProgressBar` use. A single series, so no
+ * legend: the title names it. Bars take at most 24px and two thirds of their
+ * slot, with a 4px rounded top and a square foot. The zero stub, the rule and
+ * the chip read the hairline and muted tokens, which flip per surface.
+ *
+ * ## For a screen reader
+ *
+ * The drawn plot is `aria-hidden`, and a visually hidden table carries every
+ * point (`labelName` and `valueName` head its columns), with the marker's chip on
+ * its row. A pointer gets each day's value from the bar's native tooltip, on a
+ * hit area the full height of the plot. Nothing in the chart takes focus.
+ *
+ * ## The heading is the caller's words
+ *
+ * `title` renders in the chart's header, beside the peak callout, as the frame
+ * draws them. It is a `figcaption`, so it names the figure.
+ */
+/** A dashed rule and a chip at one point of the chart: the version that went live that day. */
+export type BarChartMarker = {
+    /** The `key` (or `label`) of the point the rule goes through. */
+    at: string;
+    /** The chip's text, such as "v11". */
+    label: string;
+};
+declare function BarChart({ data, title, peak, valueAxis, valueLabels, marker, dateTicks, height, formatValue, labelName, valueName, emptyLabel, pending, className, ...props }: Omit<React.ComponentProps<"figure">, "children" | "title"> & {
+    /** One bar per point, in order. */
+    data: readonly ChartDatum[];
+    /** The chart's heading, such as "Views over time". Rendered as the figure's caption. */
+    title?: React.ReactNode;
+    /** Show the "Peak 57 · Sep 10" callout in the header. */
+    peak?: boolean;
+    /** Draw the value axis down the left. On by default. */
+    valueAxis?: boolean;
+    /** Print each bar's value over it. */
+    valueLabels?: boolean;
+    /** A version marker at one point. Ignored when no point has that key. */
+    marker?: BarChartMarker;
+    /** How many date labels to print under the plot, first and last included. */
+    dateTicks?: number;
+    /** The plot's height in px, value labels included. */
+    height?: number;
+    /** Formats every value the chart prints. Defaults to grouped digits. */
+    formatValue?: (value: number) => string;
+    /** The table's first column heading, for a screen reader. */
+    labelName?: string;
+    /** The table's second column heading, for a screen reader, such as "Views". */
+    valueName?: string;
+    /** Printed in place of the plot when `data` is empty. */
+    emptyLabel?: React.ReactNode;
+    /** The data is on its way: draw a skeleton, never a zero. */
+    pending?: boolean;
+}): React.JSX.Element;
+export { BarChart };
+//# sourceMappingURL=bar-chart.d.ts.map

package/dist/blocks/bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/blocks/bar-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAUL,KAAK,UAAU,EAChB,MAAM,2BAA2B,CAAA;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,+FAA+F;AAC/F,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAA;IACV,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAQD,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,KAAK,EACL,IAAY,EACZ,SAAgB,EAChB,WAAmB,EACnB,MAAM,EACN,SAAa,EACb,MAAY,EACZ,WAA+B,EAC/B,SAAkB,EAClB,SAAmB,EACnB,UAAsC,EACtC,OAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAC9D,mCAAmC;IACnC,IAAI,EAAE,SAAS,UAAU,EAAE,CAAA;IAC3B,wFAAwF;IACxF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yEAAyE;IACzE,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAoHA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/bar-chart.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { CHART_LOADING_TEXT, ChartDateAxis, ChartEmpty, ChartTable, ChartValueAxis, chartAxisTop, chartPeak, chartValue, formatChartNumber, } from "./chart-parts.js";
+/** Space kept clear above the bars for value labels, in px. */
+const VALUE_LABEL_ROOM = 20;
+/** Bar width as a share of its slot: the frame's 15.5px bar in a 23px slot. */
+const BAR_SHARE = "67%";
+function BarChart({ data, title, peak = false, valueAxis = true, valueLabels = false, marker, dateTicks = 5, height = 160, formatValue = formatChartNumber, labelName = "Date", valueName = "Value", emptyLabel = "Nothing in this window.", pending = false, className, ...props }) {
+    const empty = !pending && data.length === 0;
+    const top = chartAxisTop(Math.max(0, ...data.map((d) => chartValue(d.value))));
+    const peakDatum = peak && !pending ? chartPeak(data) : undefined;
+    const markerIndex = marker ? data.findIndex((d) => (d.key ?? d.label) === marker.at) : -1;
+    const inset = valueLabels ? VALUE_LABEL_ROOM : 0;
+    const slot = (i, n) => (i + 0.5) / n;
+    return (_jsxs("figure", { "data-slot": "bar-chart", "data-pending": pending ? "" : undefined, "data-empty": empty ? "" : undefined, "aria-busy": pending || undefined, 
+        // text-ink on the root, because text does not flip by inheritance (rule 3).
+        className: cn("m-0 grid min-w-0 gap-3 text-ink", className), ...props, children: [title || peakDatum ? (_jsxs("figcaption", { "data-slot": "bar-chart-header", className: "flex items-baseline justify-between gap-3", children: [title ? (_jsx("span", { "data-slot": "bar-chart-title", className: "text-body-md font-medium", children: title })) : null, peakDatum ? (_jsxs("span", { "data-slot": "bar-chart-peak", className: "ml-auto text-caption text-faint-strong tabular-nums", children: ["Peak ", formatValue(peakDatum.value), " \u00B7 ", peakDatum.label] })) : null] })) : null, pending ? (_jsxs("div", { "data-slot": "bar-chart-pending", children: [_jsx("span", { className: "sr-only", children: CHART_LOADING_TEXT }), _jsx(Skeleton, { "aria-hidden": "true", className: "w-full", style: { height } })] })) : empty ? (_jsx(ChartEmpty, { children: emptyLabel })) : (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "bar-chart-plot", "aria-hidden": "true", className: cn("grid min-w-0 gap-x-3 gap-y-2", valueAxis ? "grid-cols-[auto_minmax(0,1fr)]" : "grid-cols-1"), children: [valueAxis ? _jsx(ChartValueAxis, { top: top, height: height, inset: inset, format: formatValue }) : null, _jsxs("div", { className: "relative flex min-w-0 items-end", style: { height, paddingTop: inset }, children: [data.map((d, i) => {
+                                        const value = chartValue(d.value);
+                                        return (_jsx("div", { "data-slot": "bar-chart-column", title: `${d.label}: ${formatValue(value)}`, className: "flex h-full min-w-0 flex-1 flex-col items-center justify-end", children: _jsx("span", { "data-slot": "bar-chart-bar", "data-value": value, className: cn("relative block max-w-6", value > 0 ? "min-h-0.5 rounded-t-[4px] bg-(--cg-text-accent)" : "h-px bg-hairline"), style: { width: BAR_SHARE, ...(value > 0 ? { height: `${(value / top) * 100}%` } : {}) }, children: valueLabels && value > 0 ? (_jsx("span", { "data-slot": "bar-chart-value", className: "absolute bottom-full left-1/2 mb-1 -translate-x-1/2 whitespace-nowrap text-caption leading-none text-faint-strong tabular-nums", children: formatValue(value) })) : null }) }, d.key ?? `${d.label}-${i}`));
+                                    }), markerIndex >= 0 && marker ? (_jsx("div", { "data-slot": "bar-chart-marker", className: "pointer-events-none absolute inset-y-0 border-l border-dashed border-faint", style: { left: `${slot(markerIndex, data.length) * 100}%` }, children: _jsx("span", { "data-slot": "bar-chart-marker-chip", className: cn("absolute top-0 whitespace-nowrap rounded-pill bg-hairline px-1.5 text-caption leading-5 text-ink", slot(markerIndex, data.length) > 0.8 ? "right-full mr-1" : "left-full ml-1"), children: marker.label }) })) : null] }), valueAxis ? _jsx("span", {}) : null, _jsx(ChartDateAxis, { data: data, ticks: dateTicks })] }), _jsx(ChartTable, { data: data, labelName: labelName, valueName: valueName, format: formatValue, note: markerIndex >= 0 && marker ? { index: markerIndex, text: marker.label } : undefined })] }))] }));
+}
+export { BarChart };
+//# sourceMappingURL=bar-chart.js.map

package/dist/blocks/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.js","sourceRoot":"","sources":["../../src/blocks/bar-chart.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/chart-parts.d.ts

@@ -0,0 +1,101 @@
+import * as React from "react";
+/**
+ * The parts of `BarChart` (#332) that are not the bars: the value axis, the
+ * date axis, the screen-reader table and the scale arithmetic.
+ *
+ * They are kept apart from the bars so the axis arithmetic is written once and
+ * can be tested on its own. Exported with the package, as every component module is
+ * (the barrel test requires it), so a caller can also use the arithmetic on its
+ * own: `chartPeak` to put the peak somewhere else, `chartAxisTop` to match an
+ * axis drawn beside a chart. The axis, table and empty pieces are building
+ * blocks of the charts rather than components to compose on their own.
+ *
+ * ## Text is 13px and reads the strong muted rung
+ *
+ * The Console's hand-built Views chart set its axis in 11px `--cg-text-muted`,
+ * which is under the brand's 13px floor and under 4.5:1 on the card. Every label
+ * here is `text-caption` (13px) in `text-faint-strong` (`--cg-text-muted-strong`),
+ * the rung #232 added for content captions.
+ */
+/** One point on a chart: what the axis and the tooltip call it, and its value. */
+export type ChartDatum = {
+    /** The label the axis, the tooltip and the table print, such as "Sep 10". */
+    label: string;
+    /** The measurement. Negative values are drawn as zero. */
+    value: number;
+    /**
+     * A stable key, such as an ISO date. Defaults to `label`. A version marker
+     * finds its point by this.
+     */
+    key?: string;
+};
+export declare function formatChartNumber(value: number): string;
+/**
+ * The top of the value axis: the smallest `3 x step` that covers the peak,
+ * stepping 1, 2, 5 per decade. Three steps, because the frames draw four labels
+ * (0, 20, 40, 60 for a peak of 57).
+ *
+ * The same ladder as the Console's `AppViewsChart`, moved here so the axis is
+ * derived in one place. Rounding the peak itself to a friendlier number would
+ * put a gridline where no measurement is.
+ */
+export declare function chartAxisTop(peak: number): number;
+/**
+ * Which points the date axis labels: the first, the last, and `count - 2`
+ * evenly between them, rounded down. For 30 days and 5 labels that is days 1,
+ * 8, 15, 22 and 30, which is Aug 17, Aug 24, Aug 31, Sep 7 and Sep 15 in the
+ * frame. Fewer points than labels labels every point.
+ */
+export declare function chartTickIndices(length: number, count: number): number[];
+/** The point a chart's peak callout names: the first highest value. `undefined` when nothing is above zero. */
+export declare function chartPeak(data: readonly ChartDatum[]): ChartDatum | undefined;
+/** Clamp to the drawable range: a negative or non-finite value draws as zero. */
+export declare function chartValue(value: number): number;
+/**
+ * The value axis: top, two thirds, one third, zero, spaced to the plot's height.
+ * Decorative; the table carries the values.
+ */
+export declare function ChartValueAxis({ top, height, inset, format, }: {
+    top: number;
+    height: number;
+    /** Space kept clear above the plot, so the axis lines up with the bars under value labels. */
+    inset?: number;
+    format: (value: number) => string;
+}): React.JSX.Element;
+/**
+ * The date axis: the picked labels spread edge to edge, the first flush left and
+ * the last flush right, with at least 8px between neighbours.
+ *
+ * Spread rather than pinned under each point, which is what the frames do too
+ * (their "Date range" row is evenly spaced). The picks are evenly spaced, so a
+ * label lands within a slot of its point, and two labels can never overlap the
+ * way pinned ones do once the card narrows to the side panel.
+ */
+export declare function ChartDateAxis({ data, ticks }: {
+    data: readonly ChartDatum[];
+    ticks: number;
+}): React.JSX.Element;
+/**
+ * The chart, as a table, for a screen reader. The drawn plot is `aria-hidden`:
+ * thirty bars announced as thirty unlabelled images tell nobody anything, and a
+ * table can be read row by row, which is what a sighted reader does with the
+ * tooltip.
+ */
+export declare function ChartTable({ data, labelName, valueName, format, note, }: {
+    data: readonly ChartDatum[];
+    labelName: string;
+    valueName: string;
+    format: (value: number) => string;
+    /** A remark on one row, by its index: the version marker's chip. */
+    note?: {
+        index: number;
+        text: string;
+    };
+}): React.JSX.Element;
+/** The words a component prints when it has nothing to draw, in one place. */
+export declare function ChartEmpty({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** What a screen reader hears while a component's data is on its way. */
+export declare const CHART_LOADING_TEXT = "Loading";
+//# sourceMappingURL=chart-parts.d.ts.map

package/dist/blocks/chart-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-parts.d.ts","sourceRoot":"","sources":["../../src/blocks/chart-parts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;GAiBG;AAEH,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAAG;IACvB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CASjD;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAQxE;AAED,+GAA+G;AAC/G,wBAAgB,SAAS,CAAC,IAAI,EAAE,SAAS,UAAU,EAAE,GAAG,UAAU,GAAG,SAAS,CAI7E;AAED,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,MAAM,EACN,KAAS,EACT,MAAM,GACP,EAAE;IACD,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,qBAaA;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,UAAU,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,qBAiB5F;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,MAAM,EACN,IAAI,GACL,EAAE;IACD,IAAI,EAAE,SAAS,UAAU,EAAE,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,oEAAoE;IACpE,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CACvC,qBAsBA;AAED,8EAA8E;AAC9E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAMrE;AAED,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,YAAY,CAAA"}

package/dist/blocks/chart-parts.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+/** The default number format: grouped digits, "7,112". Fixed locale, so a server render and a hydrated one agree. */
+const DEFAULT_NUMBER_FORMAT = new Intl.NumberFormat("en-US");
+export function formatChartNumber(value) {
+    return DEFAULT_NUMBER_FORMAT.format(value);
+}
+/**
+ * The top of the value axis: the smallest `3 x step` that covers the peak,
+ * stepping 1, 2, 5 per decade. Three steps, because the frames draw four labels
+ * (0, 20, 40, 60 for a peak of 57).
+ *
+ * The same ladder as the Console's `AppViewsChart`, moved here so the axis is
+ * derived in one place. Rounding the peak itself to a friendlier number would
+ * put a gridline where no measurement is.
+ */
+export function chartAxisTop(peak) {
+    if (!(peak > 0))
+        return 3;
+    let step = 1;
+    while (step * 3 < peak) {
+        const digits = Math.floor(Math.log10(step));
+        const lead = Math.round(step / 10 ** digits);
+        step = (lead === 1 ? 2 : lead === 2 ? 5 : 10) * 10 ** digits;
+    }
+    return step * 3;
+}
+/**
+ * Which points the date axis labels: the first, the last, and `count - 2`
+ * evenly between them, rounded down. For 30 days and 5 labels that is days 1,
+ * 8, 15, 22 and 30, which is Aug 17, Aug 24, Aug 31, Sep 7 and Sep 15 in the
+ * frame. Fewer points than labels labels every point.
+ */
+export function chartTickIndices(length, count) {
+    if (length <= 0)
+        return [];
+    if (length <= count)
+        return Array.from({ length }, (_, i) => i);
+    if (count <= 1)
+        return [0];
+    const picks = new Set();
+    for (let i = 0; i < count - 1; i++)
+        picks.add(Math.floor((i * (length - 1)) / (count - 1)));
+    picks.add(length - 1);
+    return [...picks].sort((a, b) => a - b);
+}
+/** The point a chart's peak callout names: the first highest value. `undefined` when nothing is above zero. */
+export function chartPeak(data) {
+    let best;
+    for (const d of data)
+        if (d.value > 0 && (!best || d.value > best.value))
+            best = d;
+    return best;
+}
+/** Clamp to the drawable range: a negative or non-finite value draws as zero. */
+export function chartValue(value) {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+}
+/**
+ * The value axis: top, two thirds, one third, zero, spaced to the plot's height.
+ * Decorative; the table carries the values.
+ */
+export function ChartValueAxis({ top, height, inset = 0, format, }) {
+    const ticks = [top, (top / 3) * 2, top / 3, 0];
+    return (_jsx("div", { "data-slot": "chart-value-axis", className: "flex shrink-0 flex-col justify-between text-caption leading-none text-faint-strong tabular-nums", style: { height: height - inset, marginTop: inset }, children: ticks.map((t) => (_jsx("span", { children: format(t) }, t))) }));
+}
+/**
+ * The date axis: the picked labels spread edge to edge, the first flush left and
+ * the last flush right, with at least 8px between neighbours.
+ *
+ * Spread rather than pinned under each point, which is what the frames do too
+ * (their "Date range" row is evenly spaced). The picks are evenly spaced, so a
+ * label lands within a slot of its point, and two labels can never overlap the
+ * way pinned ones do once the card narrows to the side panel.
+ */
+export function ChartDateAxis({ data, ticks }) {
+    const picks = chartTickIndices(data.length, ticks);
+    return (_jsx("div", { "data-slot": "chart-date-axis", className: cn("flex min-w-0 gap-2 text-caption leading-5 text-faint-strong", picks.length === 1 ? "justify-center" : "justify-between"), children: picks.map((i) => (_jsx("span", { "data-slot": "chart-date-tick", className: "whitespace-nowrap", children: data[i].label }, i))) }));
+}
+/**
+ * The chart, as a table, for a screen reader. The drawn plot is `aria-hidden`:
+ * thirty bars announced as thirty unlabelled images tell nobody anything, and a
+ * table can be read row by row, which is what a sighted reader does with the
+ * tooltip.
+ */
+export function ChartTable({ data, labelName, valueName, format, note, }) {
+    return (_jsxs("table", { "data-slot": "chart-table", className: "sr-only", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: labelName }), _jsx("th", { scope: "col", children: valueName })] }) }), _jsx("tbody", { children: data.map((d, i) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [d.label, note && note.index === i ? `, ${note.text}` : null] }), _jsx("td", { children: format(chartValue(d.value)) })] }, d.key ?? `${d.label}-${i}`))) })] }));
+}
+/** The words a component prints when it has nothing to draw, in one place. */
+export function ChartEmpty({ children }) {
+    return (_jsx("p", { "data-slot": "chart-empty", className: "m-0 text-body-sm text-faint-strong", children: children }));
+}
+/** What a screen reader hears while a component's data is on its way. */
+export const CHART_LOADING_TEXT = "Loading";
+//# sourceMappingURL=chart-parts.js.map

package/dist/blocks/chart-parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-parts.js","sourceRoot":"","sources":["../../src/blocks/chart-parts.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/coming-soon-tag.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Badge } from "../ui/badge.js";
+/**
+ * THE COMING SOON TAG (#334, Figma "App final / Parts" 10780:9225).
+ *
+ * The one mark that says a card is a preview of something not built yet. The
+ * App page v2 shows a few such cards with example values (App Score, Time Saved
+ * over Time, Grid tokens, the Insights summary line) and a few disabled
+ * controls (Answer, Track, Dismiss). Each says so with this tag, and with
+ * nothing else: the founder ruled against an "Example data" footer.
+ *
+ * It is `Badge` outline (20px, `text-caption`, medium, `border-border`) with
+ * fixed words. The words are the block's rather than the caller's, because
+ * "Coming soon" is the canonical text and a tag that took children would drift
+ * to "Soon", "Preview" and "Beta" one card at a time.
+ *
+ * ## Where it goes
+ *
+ * The frames' rule, from the annotation: at most one per card, in the header of
+ * a preview card (`CardAction` is the slot), never on a card whose values are
+ * real and never on an inner tile. Pair it with `example` on the `Card` and on
+ * any `StatTile` inside, which mutes the values.
+ *
+ * ## Accessibility
+ *
+ * Plain text, read in order. A screen reader reaches "App Score, Coming soon"
+ * through the card header, which is the reason the tag sits there rather than
+ * floating over the values.
+ */
+/** The canonical text. Exported so a test or a consumer's string check reads one spelling. */
+export declare const COMING_SOON_LABEL = "Coming soon";
+declare function ComingSoonTag({ className, ...props }: Omit<React.ComponentProps<typeof Badge>, "children" | "variant" | "render">): React.JSX.Element;
+export { ComingSoonTag };
+//# sourceMappingURL=coming-soon-tag.d.ts.map

package/dist/blocks/coming-soon-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coming-soon-tag.d.ts","sourceRoot":"","sources":["../../src/blocks/coming-soon-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,gBAAgB,CAAA;AAE9C,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,qBAW7E;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/blocks/coming-soon-tag.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Badge } from "../ui/badge.js";
+/**
+ * THE COMING SOON TAG (#334, Figma "App final / Parts" 10780:9225).
+ *
+ * The one mark that says a card is a preview of something not built yet. The
+ * App page v2 shows a few such cards with example values (App Score, Time Saved
+ * over Time, Grid tokens, the Insights summary line) and a few disabled
+ * controls (Answer, Track, Dismiss). Each says so with this tag, and with
+ * nothing else: the founder ruled against an "Example data" footer.
+ *
+ * It is `Badge` outline (20px, `text-caption`, medium, `border-border`) with
+ * fixed words. The words are the block's rather than the caller's, because
+ * "Coming soon" is the canonical text and a tag that took children would drift
+ * to "Soon", "Preview" and "Beta" one card at a time.
+ *
+ * ## Where it goes
+ *
+ * The frames' rule, from the annotation: at most one per card, in the header of
+ * a preview card (`CardAction` is the slot), never on a card whose values are
+ * real and never on an inner tile. Pair it with `example` on the `Card` and on
+ * any `StatTile` inside, which mutes the values.
+ *
+ * ## Accessibility
+ *
+ * Plain text, read in order. A screen reader reaches "App Score, Coming soon"
+ * through the card header, which is the reason the tag sits there rather than
+ * floating over the values.
+ */
+/** The canonical text. Exported so a test or a consumer's string check reads one spelling. */
+export const COMING_SOON_LABEL = "Coming soon";
+function ComingSoonTag({ className, ...props }) {
+    return (_jsx(Badge, { variant: "outline", "data-slot": "coming-soon-tag", className: className, ...props, children: COMING_SOON_LABEL }));
+}
+export { ComingSoonTag };
+//# sourceMappingURL=coming-soon-tag.js.map

package/dist/blocks/coming-soon-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coming-soon-tag.js","sourceRoot":"","sources":["../../src/blocks/coming-soon-tag.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,8FAA8F;AAC9F,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAA;AAE9C,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACoE;IAC5E,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,SAAS,eACP,iBAAiB,EAC3B,SAAS,EAAE,SAAS,KAChB,KAAK,YAER,iBAAiB,GACZ,CACT,CAAA;AACH,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}