basalt-ui 1.25.0 → 1.27.0

package/dist/tokens/palette.js

@@ -158,7 +158,24 @@ const SPACE_ANCHORS_BASE = {
    * (both read {@link CONTROL_HEIGHT_BASE}), so a Button/ActionIcon placed beside a `size="md"`
    * Input tracks it at every density level instead of only coinciding at level 0 (the defect this
    * anchor fixes — Mantine's own `--button-height-md`/`--ai-size` are static, density-blind). */
-  controlHeight: CONTROL_HEIGHT_BASE
+  controlHeight: CONTROL_HEIGHT_BASE,
+  /** The `size="icon"` count-tag height (`docs/CONTROLS-SPEC.md` §5) — inline chip / table-cell
+   * count badge. Floored at 18px in {@link deriveSpacing} (same "negative level can't collapse a
+   * real control below a legible/tappable minimum" reasoning as `sidebarSearchTriggerHeight`'s WCAG
+   * floor, one notch tighter since a count tag is a badge, not a primary interactive target). */
+  controlHeightTag: 20,
+  /** The `size="icon"` ActionIcon height (`docs/CONTROLS-SPEC.md` §5) — `WidgetHeader
+   * tier="widget"` actions. Floored at 22px in {@link deriveSpacing}. */
+  controlHeightWidget: 24,
+  /** The `size="ctl"` Mantine tier's resolved height (`docs/CONTROLS-SPEC.md` §5, C5) —
+   * `PageBar`/`Section`/table toolbar/sidebar-block controls. Floored at 28px in
+   * {@link deriveSpacing}. */
+  controlHeightCtl: 30,
+  /** The touch hit-area size (`::before`) every home control expands to below `sm` (C15,
+   * `docs/CONTROLS-SPEC.md` §5) — independent of the visible `controlHeightCtl` box, same shape as
+   * `mobileNavBarHeight`/`mobileNavRowHeight`'s Apple HIG 44pt / WCAG 2.5.5 floors elsewhere in this
+   * table. Floored at 30px in {@link deriveSpacing} (C15's "floor 30 at density −3"). */
+  touchControlHeight: 36
 };
 const SPACE_SCALE_BASE = {
   xs: 11,
@@ -171,14 +188,13 @@ const SPACE_STEP_BASE = {
   /** Timeline `defaultProps.bulletSize`. */
   timelineBullet: 22,
   // ── Shared across ≥2 sites (structural — must render at the same value) ──────────────────────
-  // `stickyHeaderClearance`/`stickyHeaderClearanceMobile` USED to live here as ONE independent base
-  // literal (84) — they don't any more. Both are DERIVED, post-`step`, from their OWN AppShell
-  // header (`appShellHeaderHeight` / `appShellHeaderMobileHeight` below) instead (see
-  // {@link deriveSpacing}'s doc for why): an independent literal could drift from the header it's
-  // supposed to clear, which is exactly what happened (84 < 96, under-clearing the mobile header at
-  // every level before this fix) — and a SINGLE derived value still over-cleared the desktop header
-  // by 60px, since the desktop header is less than half the mobile one's height. `SpaceValues.step`
-  // still carries both keys — see that type's own doc — they're just not part of this BASE table.
+  // `stickyHeaderClearance` USED to live here as an independent base literal (84) — it doesn't any
+  // more. It is DERIVED, post-`step`, from the AppShell header it exists to clear
+  // (`appShellHeaderHeight` below) instead (see {@link deriveSpacing}'s doc for why): an independent
+  // literal could drift from that header, which is exactly what happened. `SpaceValues.step` still
+  // carries the key — see that type's own doc — it is just not part of this BASE table. The
+  // `stickyHeaderClearanceMobile` sibling went with the two-row mobile header in 1.26.0: the header
+  // is one 48px row at every viewport now, so one clearance covers both.
   /** NavLink leftSection icon-to-label gap — shared by `theme/nav-link.module.css` (every render
    * path) and `shell/app-sidebar.module.css`'s own `.link` rule (belt-and-suspenders on the same
    * DOM), and reused verbatim for `.footerBtn`/`.accountRow`'s icon gap (their own doc comments call
@@ -375,35 +391,28 @@ const SPACE_STEP_BASE = {
   sidebarAccountMenuWidth: 220,
   /** Settings-menu `<Menu width={…}>` (`app-sidebar.tsx`). */
   sidebarSettingsMenuWidth: 200,
-  // ── shell/app-header.module.css ───────────────────────────────────────────────────────────────
-  /** Mobile two-row header's page-actions row height. */
-  appHeaderMobileActionsHeight: 52,
   // ── shell/index.tsx (AppShell dimensions) ──────────────────────────────────────────────
   /** AppShell desktop header bar height — sized to hold one row of `size="md"` controls, so it
    *  tracks `controlHeight`. Its level-0 coincidence with `appShellNavbarRailWidth` below is a
    *  coincidence, not a law: this is a horizontal bar's HEIGHT (governed by control height), that
    *  is a vertical rail's WIDTH (governed by icon footprint). They stay separate entries. */
+  /** AppShell header bar height — ONE value at every viewport since 1.26.0 (law C14,
+   *  `docs/CONTROLS-SPEC.md` §2.1). The pre-1.26.0 `appShellHeaderMobileHeight` (97) existed only
+   *  because the mobile header wrapped to a second, always-reserved page-actions row; `PageBar`
+   *  folds that row's overflow into a kebab and moves its filters/tabs into the page flow, so the
+   *  bar is 48px on a phone too and there is no sum to keep in step any more. */
   appShellHeaderHeight: 48,
-  /** AppShell mobile (two-row) header height. Not one concept but a sum: row 1 + `app-header.
-   *  module.css`'s wrap row-gap (`--mantine-spacing-sm`) + `appHeaderMobileActionsHeight`. Two of
-   *  those three addends already track density, so the container must too — held fixed, row 1's
-   *  budget collapses 52px -> 12px across the level range.
+  /** AppShell navbar width, expanded — ONE entry for both the `base` (mobile, where the navbar is
+   *  permanently collapsed and unused — see `MobileNav`) and the expanded `sm` value: the same
+   *  `.root` at full width, genuinely one concept.
    *
-   *  KEEP THIS EQUAL TO THE SUM. At level 0: 32 (row 1) + 13 (`SPACE_SCALE.sm`) + 52
-   *  (`appHeaderMobileActionsHeight`) = 97. It was 96 while `SPACE_SCALE.sm` was 12; the
-   *  component-roominess retune raised that addend, and leaving the total at 96 silently took the
-   *  pixel out of row 1 instead — which is what ate the last of its WCAG 2.5.8 target-size margin at
-   *  density -3 (`theme/density-relations.test.ts` measures row 1 as the REMAINDER of this sum, so
-   *  the total is the only place the budget can come from). Raise this whenever `SPACE_SCALE.sm` or
-   *  `appHeaderMobileActionsHeight` moves. Better still, make it unnecessary: computing this the way
-   *  `stickyHeaderClearance*` already is — post-`step`, from its own addends rather than as an
-   *  independent literal — would make the drift impossible instead of merely re-tuned. That is the
-   *  same refactor, and the same reasoning, this PR applied to the clearances; it is worth doing to
-   *  this one too, and it stays a follow-up only because it moves every non-zero level's value. */
-  appShellHeaderMobileHeight: 97,
-  /** AppShell navbar width, expanded — ONE entry for both the `base` (mobile drawer) and the
-   *  expanded `sm` value: the same `.root` at full width, genuinely one concept. */
-  appShellNavbarWidth: 216,
+   *  256, up from 216. At 216 the column was 196px of usable text after `.root`'s 10px inset a side,
+   *  and the sidebar carries more than nav rows: a block row is `label · meta`, an account row is
+   *  `avatar · name · plan`, and a `Recents` entry is a sentence. Every one of them was ellipsizing
+   *  in the second word. 256 is also the width the shell's own dropdowns already assume
+   *  (`sidebarAccountMenuWidth` 220 + the row inset), so the menu no longer overhangs the column it
+   *  belongs to. */
+  appShellNavbarWidth: 256,
   /** AppShell navbar width, collapsed icon rail. Separate from `appShellHeaderHeight` above
    *  despite sharing 48 at level 0 (see that entry's note). */
   appShellNavbarRailWidth: 48,
@@ -482,7 +491,33 @@ const SPACE_STEP_BASE = {
   /** `data/virtual-list.tsx`'s skeleton row vertical inset. */
   virtualRowInsetY: 8,
   /** `data/virtual-list.tsx`'s skeleton row horizontal inset. */
-  virtualRowInsetX: 12
+  virtualRowInsetX: 12,
+  // ── Controls — homes/tiers (`docs/CONTROLS-SPEC.md` §5) ──────────────────────────────────────
+  /** `PageBar` row height (row 1 or row 2, each measured independently — the bar's own overall
+   *  height is the sum published as `--basalt-page-bar-h`, computed by `PageBar` itself, not a
+   *  static token). */
+  pageBarRowHeight: 40,
+  /** `WidgetHeader tier="section"` row height. */
+  sectionHeaderHeight: 36,
+  /** `WidgetHeader tier="widget"` row height. */
+  widgetHeaderHeight: 28,
+  /** Sidebar block list-item row height. */
+  sidebarBlockRowHeight: 32,
+  /** Gap between adjacent controls inside a home (filter pills, action buttons). */
+  controlGap: 6,
+  /** Mobile bottom-sheet row height (the `Filters (n)` drawer, a block's More-sheet row) — Apple
+   *  HIG 44pt / WCAG 2.5.5 AAA, same floor family as `mobileNavRowHeight`. */
+  sheetRowHeight: 44,
+  /** `BasaltDataTable`'s header row. Its own entry rather than a reuse of `sectionHeaderHeight`
+   *  (which is 36 too at level 0): one is a heading's box, this is a table's `th`, and a density
+   *  pass that wants denser table rows must not be forced to shrink every section header with them.
+   *  Mantine sizes both `th` and `td` from ONE `verticalSpacing` prop, so a 36/40 pair is
+   *  unreachable through it — both are applied in `theme/index.ts`'s `Table.extend` as JS numbers,
+   *  which is why (like `progressBarSize`) neither is emitted as a `--vx-*` var. */
+  tableHeaderHeight: 36,
+  /** `BasaltDataTable`'s body row — one step taller than the header, so the mono uppercase `th`
+   *  reads as a label band over roomier data rows rather than as the first row of the data. */
+  tableRowHeight: 40
 };
 const SPACE_FIXED = {
   /** Timeline `defaultProps.lineWidth`; also used for 1px borders. */
@@ -530,18 +565,21 @@ function deriveSpacing(level) {
   anchors.stackMd = stackUnit * 3;
   anchors.stackLg = stackUnit * 4;
   anchors.stackXl = stackUnit * 6;
+  anchors.controlHeightTag = Math.max(18, anchors.controlHeightTag);
+  anchors.controlHeightWidget = Math.max(22, anchors.controlHeightWidget);
+  anchors.controlHeightCtl = Math.max(28, anchors.controlHeightCtl);
+  anchors.touchControlHeight = Math.max(30, anchors.touchControlHeight);
   const mappedStep = mapSpaceGroup(SPACE_STEP_BASE, level, multiplier);
   mappedStep.sidebarSearchTriggerHeight = Math.max(24, mappedStep.sidebarSearchTriggerHeight);
   mappedStep.mobileNavBarHeight = Math.max(48, mappedStep.mobileNavBarHeight);
   mappedStep.mobileNavRowHeight = Math.max(44, mappedStep.mobileNavRowHeight);
+  mappedStep.sheetRowHeight = Math.max(44, mappedStep.sheetRowHeight);
   const step = {
     ...mappedStep,
-    // RESPONSIVE, one per AppShell breakpoint — each DERIVED from its own header, plus
-    // density-tracking breathing room — see this function's doc (third bullet, Decision 3) for the
-    // full rationale, and `theme/spacing.test.ts` for why `stickyHeaderClearance` alone is exempt
-    // from the level-0 byte-identity gate.
-    stickyHeaderClearance: mappedStep.appShellHeaderHeight + anchors.stackMd,
-    stickyHeaderClearanceMobile: mappedStep.appShellHeaderMobileHeight + anchors.stackMd
+    // DERIVED from the header it clears, plus density-tracking breathing room — see this function's
+    // doc (third bullet) for the full rationale, and `theme/spacing.test.ts` for why
+    // `stickyHeaderClearance` alone is exempt from the level-0 byte-identity gate.
+    stickyHeaderClearance: mappedStep.appShellHeaderHeight + anchors.stackMd
   };
   return {
     anchors,

package/dist/tokens.css

@@ -10,13 +10,16 @@
   --vx-space-row-line-height: 1.35;
   --vx-space-input-height: 2.625rem;
   --vx-space-control-height: 2.625rem;
+  --vx-space-control-height-tag: 1.25rem;
+  --vx-space-control-height-widget: 1.5rem;
+  --vx-space-control-height-ctl: 1.875rem;
+  --vx-space-touch-control-height: 2.25rem;
   --vx-space-stack-xs: 4px;
   --vx-space-stack-sm: 8px;
   --vx-space-stack-md: 12px;
   --vx-space-stack-lg: 16px;
   --vx-space-stack-xl: 24px;
   --vx-space-sticky-header-clearance: 60px;
-  --vx-space-sticky-header-clearance-mobile: 109px;
   --vx-space-nav-icon-gap: 10px;
   --vx-space-sidebar-region-gap: 10px;
   --vx-space-prose-quote-inset-y: 2px;
@@ -93,7 +96,6 @@
   --vx-space-sidebar-child-list-indent: 15px;
   --vx-space-sidebar-child-row-inset-y: 4px;
   --vx-space-sidebar-child-row-indent: 12px;
-  --vx-space-app-header-mobile-actions-height: 52px;
   --vx-space-mobile-nav-tab-gap: 3px;
   --vx-space-mobile-nav-icon-size: 24px;
   --vx-space-mobile-nav-tab-inset-y: 2px;
@@ -113,6 +115,12 @@
   --vx-space-stat-card-gap: 8px;
   --vx-space-virtual-row-inset-y: 8px;
   --vx-space-virtual-row-inset-x: 12px;
+  --vx-space-page-bar-row-height: 2.5rem;
+  --vx-space-section-header-height: 2.25rem;
+  --vx-space-widget-header-height: 1.75rem;
+  --vx-space-sidebar-block-row-height: 2rem;
+  --vx-space-control-gap: 6px;
+  --vx-space-sheet-row-height: 2.75rem;
   --vx-prose-measure: 72ch;
   --vx-fill-gray: #717176;
   --vx-fill-red: #b7514e;

package/dist/widget-header/delta-badge.d.ts

@@ -0,0 +1,13 @@
+export type DeltaBadgeProps = {
+    /** Signed delta driving tone (positive/negative/zero) and, by default, the label magnitude. */
+    value: number;
+    /** Formats the value into the label text. Defaults to `${Math.abs(value).toFixed(1)}%`. */
+    format?: (value: number) => string;
+    /** Render the ▲/▼ direction glyph. Defaults to `true`; a zero value never shows a glyph. */
+    withGlyph?: boolean;
+    /** Optional comparison timeframe rendered directly after the value in a dimmer shade of the same
+     * tone (e.g. `MoM`, `WoW`, `YTD`) — states what the delta is measured against without a hover. */
+    period?: string | undefined;
+};
+export declare function DeltaBadge({ value, format, withGlyph, period, }: DeltaBadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=delta-badge.d.ts.map

package/dist/widget-header/delta-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delta-badge.d.ts","sourceRoot":"","sources":["../../src/widget-header/delta-badge.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,eAAe,GAAG;IAC5B,+FAA+F;IAC/F,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;sGACkG;IAClG,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AAID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAsB,EACtB,SAAgB,EAChB,MAAM,GACP,EAAE,eAAe,+BAejB"}

package/dist/widget-header/delta-badge.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { alpha, VX } from "../tokens/index.js";
+import classes from "./widget-header.module.css";
+const defaultFormat = (value) => `${Math.abs(value).toFixed(1)}%`;
+function DeltaBadge({
+  value,
+  format = defaultFormat,
+  withGlyph = true,
+  period
+}) {
+  const tone = value > 0 ? VX.status.good : value < 0 ? VX.status.bad : VX.faint;
+  const glyph = value > 0 ? "\u25B2" : value < 0 ? "\u25BC" : void 0;
+  const showGlyph = withGlyph && glyph !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: classes.deltaBadge,
+      style: { backgroundColor: alpha(tone, 0.13), color: tone },
+      children: [
+        showGlyph && /* @__PURE__ */ jsx("span", { className: classes.deltaGlyph, children: glyph }),
+        format(value),
+        period !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.deltaPeriod, children: period })
+      ]
+    }
+  );
+}
+export {
+  DeltaBadge
+};

package/dist/widget-header/delta-badge.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=delta-badge.test.d.ts.map

package/dist/widget-header/delta-badge.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delta-badge.test.d.ts","sourceRoot":"","sources":["../../src/widget-header/delta-badge.test.tsx"],"names":[],"mappings":""}

package/dist/widget-header/index.d.ts

@@ -0,0 +1,3 @@
+export { WidgetHeader, type WidgetHeaderProps } from './widget-header.js';
+export { DeltaBadge, type DeltaBadgeProps } from './delta-badge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/widget-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA"}

package/dist/widget-header/index.js

@@ -0,0 +1,6 @@
+import { WidgetHeader } from "./widget-header.js";
+import { DeltaBadge } from "./delta-badge.js";
+export {
+  DeltaBadge,
+  WidgetHeader
+};

package/dist/widget-header/no-mantine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=no-mantine.test.d.ts.map

package/dist/widget-header/no-mantine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-mantine.test.d.ts","sourceRoot":"","sources":["../../src/widget-header/no-mantine.test.ts"],"names":[],"mappings":""}

package/dist/widget-header/widget-header.d.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+export type WidgetHeaderProps = {
+    /** `section` renders an `<h2>` at the section-header height; `widget` renders an `<h3>` at the
+     * tighter icon-tier height, display-only. */
+    tier: 'section' | 'widget';
+    /** Head-font title (88% stretch, weight 550). */
+    title: string;
+    /** Optional leading icon, rendered before the title. Decorative — hidden from assistive tech. */
+    icon?: ReactNode;
+    /** Optional muted line rendered below the title row. */
+    subtitle?: string;
+    /**
+     * Renders an info glyph BESIDE the heading (never inside it — this text would otherwise become
+     * part of the heading's accessible name, and an `info` paragraph read out in every headings list
+     * is what that cost). The glyph is named `More information`; the text itself reaches assistive
+     * tech through `aria-describedby` on a `role="tooltip"` bubble that opens on hover, focus and
+     * click — so a keyboard user gets it too. Mantine-free: a plain state bubble, not a Tooltip.
+     */
+    info?: string;
+    /** Pre-formatted metric value (mono, hero size). Renders on its own row with `delta`, directly
+     * under the title row — never inline with the title. */
+    value?: string;
+    /**
+     * The value's unit, rendered immediately after it on the hero row: muted, mono, `--vx-text-sm`.
+     *
+     * It exists because `value` is a pre-formatted `string` and a KPI's unit is not part of the
+     * number: `412` and `TSS` are two facts at two weights, and jamming them into one string paints
+     * the unit at the hero's 24px — which reads as a second numeral. `subtitle` was the only place a
+     * unit could go before this, and a unit on its own line under the value is a different claim (the
+     * BASIS: `7-day rolling`), so cards using both had to pick one.
+     *
+     * Never a substitute for the number's own formatting: a thousands separator, a currency symbol or
+     * a `%` belong in `value`, where they are part of how the numeral reads.
+     */
+    unit?: string;
+    /** Signed delta rendered via `DeltaBadge`, on the same hero-metric row as `value`. */
+    delta?: number;
+    /** Comparison timeframe forwarded to `DeltaBadge` (e.g. `MoM`). */
+    deltaPeriod?: string;
+    /**
+     * Formats `delta` into the chip's label — forwarded to `DeltaBadge`'s `format`. Defaults to
+     * `${Math.abs(delta).toFixed(1)}%`.
+     *
+     * It exists because not every delta is a percentage: a pace card's trend is `0:12 /km` and a
+     * throughput card's is `0.3 km/h`, and the default printed both as a percent — a wrong unit on a
+     * KPI, which is worse than no chip. A FUNCTION rather than a label string, so the number stays the
+     * number: `delta` still drives the tone and the glyph, and there is exactly one place the sign is
+     * decided.
+     *
+     * The value arrives SIGNED, so a formatter that wants to print the sign itself (`−0:12 /km`) can —
+     * pair it with `deltaGlyph={false}` so the ▼ does not say the same thing twice.
+     */
+    deltaFormat?: (delta: number) => string;
+    /** Render `DeltaBadge`'s ▲/▼ glyph. Defaults to `true`; a zero delta never shows one. Pass
+     * `false` when `deltaFormat` prints the sign itself. */
+    deltaGlyph?: boolean;
+    /** Trend visual slot, rendered below the metric row. Carries `data-placement="right"` so a
+     * wave-3 composer's `bleed` layout can select it. */
+    sparkline?: ReactNode;
+    /** Mono count tag rendered after the title (C11 — every table/list states its count). `0` is a
+     * real count and renders, distinct from omitting the prop entirely. */
+    count?: number;
+    /** Right-aligned slot (`margin-inline-start: auto`) — the C1/C5 home for header actions. */
+    actions?: ReactNode;
+};
+export declare function WidgetHeader({ tier, title, icon, subtitle, info, value, unit, delta, deltaPeriod, deltaFormat, deltaGlyph, sparkline, count, actions, }: WidgetHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=widget-header.d.ts.map

package/dist/widget-header/widget-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-header.d.ts","sourceRoot":"","sources":["../../src/widget-header/widget-header.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;iDAC6C;IAC7C,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC1B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;4DACwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;4DACwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;yDACqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;2EACuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAyDD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAU,EACV,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,iBAAiB,+BA6CnB"}

package/dist/widget-header/widget-header.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { IconSlot } from "../theme/icon-slot.js";
+import { DeltaBadge } from "./delta-badge.js";
+import classes from "./widget-header.module.css";
+function InfoGlyph({ text }) {
+  const [open, setOpen] = useState(false);
+  const tipId = useId();
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      if (triggerRef.current?.contains(event.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("span", { className: classes.info, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: classes.infoTrigger,
+        "aria-label": "More information",
+        "aria-describedby": open ? tipId : void 0,
+        "data-open": open,
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        onFocus: () => setOpen(true),
+        onBlur: () => setOpen(false),
+        onClick: () => setOpen(true),
+        onKeyDown: (event) => {
+          if (event.key === "Escape") setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx("svg", { width: 11, height: 11, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 5a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1z" }) })
+      }
+    ),
+    open && /* @__PURE__ */ jsx("span", { id: tipId, role: "tooltip", className: classes.infoBubble, children: text })
+  ] });
+}
+function WidgetHeader({
+  tier,
+  title,
+  icon,
+  subtitle,
+  info,
+  value,
+  unit,
+  delta,
+  deltaPeriod,
+  deltaFormat,
+  deltaGlyph,
+  sparkline,
+  count,
+  actions
+}) {
+  const Heading = tier === "section" ? "h2" : "h3";
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, "data-tier": tier, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.titleRow, children: [
+      /* @__PURE__ */ jsxs(Heading, { className: classes.heading, children: [
+        icon !== void 0 && /* @__PURE__ */ jsx(IconSlot, { className: classes.icon, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: classes.titleText, children: title })
+      ] }),
+      info !== void 0 && /* @__PURE__ */ jsx(InfoGlyph, { text: info }),
+      count !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.count, children: count }),
+      actions !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.actions, children: actions })
+    ] }),
+    (value !== void 0 || delta !== void 0) && /* @__PURE__ */ jsxs("div", { className: classes.metrics, children: [
+      value !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.value, children: value }),
+      value !== void 0 && unit !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.unit, children: unit }),
+      delta !== void 0 && /* @__PURE__ */ jsx(
+        DeltaBadge,
+        {
+          value: delta,
+          period: deltaPeriod,
+          ...deltaFormat !== void 0 && { format: deltaFormat },
+          ...deltaGlyph !== void 0 && { withGlyph: deltaGlyph }
+        }
+      )
+    ] }),
+    subtitle !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.subtitle, children: subtitle }),
+    sparkline !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.sparkline, "data-placement": "right", children: sparkline })
+  ] });
+}
+export {
+  WidgetHeader
+};