gridsmith-ui 0.33.0 → 0.33.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # gridsmith-ui changelog
 
+## 0.33.1 — 23 October 2026
+
+What the owner's review of the Map page found in the library (Sprint 32's follow-up): a number field that went 0.1, 0.2, 0.30000000000000004 and took any number of decimals typed, a slider that snapped to the same noise, and a selectable list in a card whose rows didn't line up with the card's title. Its fresh-eyes review added two in Tabs: two on a page could mix up their tabs, and a panel was a Tab stop even when it started with something to reach.
+
+**Added.**
+- **NumberInput's `decimals`:** the places the field takes and always shows ("12.50"), never fewer than its step's, `min`'s or `max`'s own. Money with whole-unit buttons is `decimals={2}` with `step={1}`.
+
+**Fixed.**
+- **A NumberInput keeps the places its value needs.** A step adds and rounds to the step's places (or `min`'s or `max`'s, if they have more), so 0.1 stepped twice is 0.3, shown "0.3", and a held button counts 0.1 at a time. With `allowDecimals` on a whole step a value keeps every digit it has, and a step adds in its own places (0.14 stepped by 1 is 1.14, and 1234567890123 stays exact), as DataGrid's number editor needs. A step's places are read with any exponent (`1e-7` is seven), and a value never shows with one (0.0000001). A negative zero shows as "0", and a missing value as an empty field. A page value with more places than the field shows rounded, and `aria-valuenow` gives that number.
+- **Stepping an empty NumberInput** starts from `min`, or from 0 with no `min`.
+- **A focused NumberInput follows its value when the page changes it** (a map's handle dragged while the field has focus), an empty one too, while its text still shows the value it had: a number half typed stays.
+- **A NumberInput in a Field is described by the Field's hint and error:** it puts the Field's `aria-describedby` and `aria-required` on its input, so a screen reader hears the hint (a field's unit) with the field.
+- **SliderRange snaps to the step's places,** from the pointer and the keys: ArrowRight three times on a 0.1 step is 0.3.
+- **A selectable StackedList in a Card lines up with the Card's title:** its rows' text starts where the header's does, in every preset, and the selection's rail sits in the inset.
+- **Two Tabs on a page keep their tabs apart.** Each Tabs' tabs and panels have ids of their own, so two with a tab of the same id (two "Overview" tabs) no longer share one: the arrow keys move within their own tabs, and each panel is named by its own tab.
+- **A tab panel is a Tab stop of its own only when it needs one** (the Authoring Practices' tab panel): when it holds nothing to reach, or starts with words a Tab would pass by. One that starts with a control, or with a list or a scrolling region that is a stop, takes none, so Tab goes straight there: one press, not two.
+
+**Changed.**
+- **Typing in a NumberInput stops at its places:** a decimal past them isn't taken, as a letter isn't. A step of 0.5 now refuses "0.25"; `decimals={2}` (or a step of 0.01) takes it.
+- **Leaving a NumberInput changes nothing:** what's typed is reported as it's typed, held to the limits, so leaving the field calls no `onChange` and leaves the form unmarked; an empty field left at "-" stays empty, where it took the minimum. A page value outside `min` or `max` is still clamped as the field's own change, as since 0.21.0.
+
+### Upgrade note for agents (0.33.0 → 0.33.1)
+
+`^0.33.0` takes 0.33.1. What to check:
+- **A field with a fractional step that takes finer values** than its step: a step of 0.5 now refuses "0.25". Give it `decimals` with the places it takes.
+- **Money fields:** `decimals={2}` with `step={1}` (pence typed, shown "12.50"). One that passed `allowDecimals` for pence can keep it, or take `decimals={2}` to stop at two places.
+- **Tests that left a NumberInput to commit a value:** leaving it with nothing typed no longer calls `onChange`; type in it or step it instead.
+- **A screenshot test of a selectable list in a Card** changes by a few pixels, the rows' inset.
+- **A test that found a tab or a tab panel by its id** (`ds-tab-…`, `ds-tabpanel-…`): the ids now carry each Tabs' own part. Find it by its role and name.
+- **A keyboard test that tabbed into a panel starting with a control:** Tab now goes straight to the control.
+
 ## 0.33.0 — 22 October 2026
 
 A dashboard its people arrange (Sprint 32): a new entry, `gridsmith-ui/dashboard`, whose widgets are dragged, sized and added from a widget library, with a keyboard way and a plain-click way for every drag; a chart in a widget fills it; a chart's frame takes its own actions; and a hook that gives the theme's colours to anything that can't read CSS variables, such as a map.

package/dist/charts.js

@@ -1,18 +1,18 @@
 "use client";
-import { SegmentedControl, CELL_FRAME, TITLE_TEXT, TITLE_FLOOR, CELL_ROOM_INNER, CELL_HIDE_CHART_ACTIONS, Skeleton } from './chunk-6XCWKLJZ.js';
+import { SegmentedControl, CELL_FRAME, TITLE_TEXT, TITLE_FLOOR, CELL_ROOM_INNER, CELL_HIDE_CHART_ACTIONS, Skeleton } from './chunk-MPXE2XOP.js';
 import { useFormatLocale } from './chunk-R7FG4ZQ5.js';
-import './chunk-OWGF362U.js';
+import './chunk-4TQVFRKK.js';
 import { formatLocale } from './chunk-7QLXYRPD.js';
-import './chunk-R2IAK3J3.js';
+import './chunk-ZTS6HJAU.js';
 import { DashboardCellContext } from './chunk-P3NUUIL6.js';
 import { useHydrated } from './chunk-GIA4BMGI.js';
 import { FormChangeCtx } from './chunk-72SDAX54.js';
-import { elementType } from './chunk-FF57N3P7.js';
+import { elementType } from './chunk-MW5CJOJN.js';
 import './chunk-7RKC5C7G.js';
-import { useKeyboardScroll } from './chunk-F2XMZOUP.js';
-import { mergeRefs } from './chunk-HCEHTJ5E.js';
+import { useKeyboardScroll } from './chunk-T33JK3ZE.js';
+import { mergeRefs } from './chunk-77X7AHFB.js';
 import { warnOnce } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-2724SJO2.js';
+import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-HDFTENVW.js';
 import { createContext, forwardRef, useContext, useRef, useState, useId, useMemo, useLayoutEffect, useEffect, useCallback, useSyncExternalStore, Children, isValidElement } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, Symbols, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, ReferenceArea, ReferenceLine, getNiceTickValues, Rectangle, usePlotArea, ZIndexLayer, DefaultZIndexes } from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/chat.js

@@ -1,11 +1,11 @@
 "use client";
-import { Divider, CodeBlock, Link } from './chunk-UBLBVCQN.js';
-import './chunk-WSKPESAX.js';
-import './chunk-R2IAK3J3.js';
-import { useKeyboardScroll } from './chunk-F2XMZOUP.js';
-import './chunk-HCEHTJ5E.js';
+import { Divider, CodeBlock, Link } from './chunk-N6QLEZFH.js';
+import './chunk-4FX6UCSS.js';
+import './chunk-ZTS6HJAU.js';
+import { useKeyboardScroll } from './chunk-T33JK3ZE.js';
+import './chunk-77X7AHFB.js';
 import './chunk-53F7GVBQ.js';
-import { cn, FOCUS_INSET } from './chunk-2724SJO2.js';
+import { cn, FOCUS_INSET } from './chunk-HDFTENVW.js';
 import { memo, useState, Children, isValidElement } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';

package/dist/{chunk-WSKPESAX.js → chunk-4FX6UCSS.js}

@@ -1,8 +1,8 @@
 "use client";
-import { useTextOverflow } from './chunk-R2IAK3J3.js';
-import { AutoTooltip } from './chunk-HCEHTJ5E.js';
+import { useTextOverflow } from './chunk-ZTS6HJAU.js';
+import { AutoTooltip } from './chunk-77X7AHFB.js';
 import { Icon } from './chunk-53F7GVBQ.js';
-import { cn } from './chunk-2724SJO2.js';
+import { cn } from './chunk-HDFTENVW.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var severityToVariant = {
@@ -102,5 +102,5 @@ function Badge({ variant = "default", severity, size = "md", color, iconLeft, ic
 }
 
 export { Badge };
-//# sourceMappingURL=chunk-WSKPESAX.js.map
-//# sourceMappingURL=chunk-WSKPESAX.js.map
+//# sourceMappingURL=chunk-4FX6UCSS.js.map
+//# sourceMappingURL=chunk-4FX6UCSS.js.map

package/dist/{chunk-WSKPESAX.js.map → chunk-4FX6UCSS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../showcase/src/components/Badge.tsx"],"names":[],"mappings":"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","file":"chunk-WSKPESAX.js","sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { AutoTooltip } from \"./Tooltip\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport type { ReactNode } from \"react\";\n\nexport type BadgeVariant =\n  | \"default\"\n  | \"neutral\"\n  | \"subtle\"\n  | \"success\"\n  | \"success-soft\"\n  | \"warning\"\n  | \"warning-soft\"\n  | \"error\"\n  | \"error-soft\"\n  | \"outline\";\n\nexport type BadgeSize = \"xs\" | \"sm\" | \"md\";\nexport type BadgePaletteColor = 1 | 2 | 3 | 4 | 5;\nexport type BadgeSeverity = \"info\" | \"low\" | \"medium\" | \"high\" | \"critical\";\n\nconst severityToVariant: Record<BadgeSeverity, BadgeVariant> = {\n  info: \"neutral\",\n  low: \"success-soft\",\n  medium: \"warning-soft\",\n  high: \"error-soft\",\n  critical: \"error\",\n};\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  default: \"bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]\",\n  neutral: \"bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]\",\n  subtle: \"bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]\",\n  success: \"bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)]\",\n  \"success-soft\": \"bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]\",\n  warning: \"bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)]\",\n  \"warning-soft\": \"bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]\",\n  error: \"bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]\",\n  \"error-soft\": \"bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]\",\n  outline: \"bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n};\n\nconst sizeStyles: Record<BadgeSize, string> = {\n  xs: \"px-ds-1.5 py-[1px] text-[length:10px] gap-[3px]\",\n  sm: \"px-ds-2 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n  md: \"px-ds-2.5 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n};\n\nconst iconSizes: Record<BadgeSize, number> = {\n  xs: 10,\n  sm: 12,\n  md: 12,\n};\n\ntype PaletteStyleFn = (n: BadgePaletteColor) => string;\n\nconst paletteByVariant: Record<string, PaletteStyleFn> = {\n  default: (n) => paletteDefault[n],\n  neutral: (n) => paletteSubtle[n],\n  subtle: (n) => paletteSubtle[n],\n  outline: (n) => paletteOutline[n],\n};\n\nconst paletteDefault: Record<BadgePaletteColor, string> = {\n  1: \"bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]\",\n  2: \"bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]\",\n  3: \"bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]\",\n  4: \"bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]\",\n  5: \"bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]\",\n};\n\nconst paletteSubtle: Record<BadgePaletteColor, string> = {\n  1: \"bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]\",\n  2: \"bg-[var(--ds-palette-2-bg)] text-[var(--ds-palette-2-text)]\",\n  3: \"bg-[var(--ds-palette-3-bg)] text-[var(--ds-palette-3-text)]\",\n  4: \"bg-[var(--ds-palette-4-bg)] text-[var(--ds-palette-4-text)]\",\n  5: \"bg-[var(--ds-palette-5-bg)] text-[var(--ds-palette-5-text)]\",\n};\n\nconst paletteOutline: Record<BadgePaletteColor, string> = {\n  1: \"bg-transparent text-[var(--ds-palette-1-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-1-bold)]\",\n  2: \"bg-transparent text-[var(--ds-palette-2-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-2-bold)]\",\n  3: \"bg-transparent text-[var(--ds-palette-3-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-3-bold)]\",\n  4: \"bg-transparent text-[var(--ds-palette-4-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-4-bold)]\",\n  5: \"bg-transparent text-[var(--ds-palette-5-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-5-bold)]\",\n};\n\nfunction getPaletteClasses(color: BadgePaletteColor, variant: BadgeVariant): string {\n  const styleFn = paletteByVariant[variant] ?? paletteByVariant.default;\n  return styleFn(color);\n}\n\ninterface BadgeProps {\n  variant?: BadgeVariant;\n  /** Severity shorthand — maps to a variant. When set, overrides `variant`. */\n  severity?: BadgeSeverity;\n  size?: BadgeSize;\n  /** Palette colour (1-5). Overrides variant colour with decorative palette tokens. */\n  color?: BadgePaletteColor;\n  /** Icon to show before the label */\n  iconLeft?: IconName;\n  /** Icon to show after the label */\n  iconRight?: IconName;\n  /** Max width before truncation (e.g. \"120px\", \"16ch\"). Shows tooltip when truncated. */\n  maxWidth?: string;\n  /**\n   * A set width (a CSS length, e.g. \"6rem\"), for a set of badges that should line up: a table column of statuses gives\n   * each the same width. The text is centred, and truncated with a tooltip if it doesn't fit. Without it a badge is as\n   * wide as what it says (Sprint 25.33).\n   */\n  width?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function Badge({ variant = \"default\", severity, size = \"md\", color, iconLeft, iconRight, maxWidth, width, className, children }: BadgeProps) {\n  // severity sets the variant and variant is ignored when both are written\n  const resolvedVariant = severity ? severityToVariant[severity] : variant;\n  const capped = !!(maxWidth || width);\n  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !capped });\n  const iconSize = iconSizes[size];\n  const isIconOnly = (iconLeft || iconRight) && !children;\n\n  const colorClasses = color\n    ? getPaletteClasses(color, resolvedVariant)\n    : variantStyles[resolvedVariant];\n\n  const badge = (\n    <span\n      // Sprint 25.13 A1: a card header reads this to put a badge in its actions beside the title (D1a), and a card grid\n      // to size from what its headers hold (A2)\n      data-gs-badge=\"\"\n      // w-fit: a grid or a column round it never stretches it (Sprint 25.33: run 94's level badges went 337 px wide on a\n      // phone for 35 px of text); a set width is the caller's choice, centred\n      className={cn(\n        \"inline-flex items-center font-medium w-fit max-w-full whitespace-nowrap shrink-0\",\n        \"rounded-[var(--ds-radius-full)]\",\n        width && \"justify-center\",\n        sizeStyles[size],\n        isIconOnly && size === \"xs\" && \"px-[3px]\",\n        isIconOnly && size === \"sm\" && \"px-ds-1\",\n        isIconOnly && size === \"md\" && \"px-ds-1.5\",\n        colorClasses,\n        className\n      )}\n      style={capped ? { ...(width ? { width } : {}), ...(maxWidth ? { maxWidth } : {}) } : undefined}\n    >\n      {iconLeft && <Icon name={iconLeft} size={iconSize} className=\"shrink-0\" from=\"Badge's iconLeft\" />}\n      {capped ? (\n        <span ref={truncRef} className=\"truncate\">{children}</span>\n      ) : (\n        children\n      )}\n      {iconRight && <Icon name={iconRight} size={iconSize} className=\"shrink-0\" from=\"Badge's iconRight\" />}\n    </span>\n  );\n\n  if (isTruncated) {\n    return <AutoTooltip content={children}>{badge}</AutoTooltip>;\n  }\n  return badge;\n}\n"]}
+{"version":3,"sources":["../../../showcase/src/components/Badge.tsx"],"names":[],"mappings":";;;;;;;AAsBA,IAAM,iBAAA,GAAyD;AAAA,EAC7D,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,cAAA;AAAA,EACL,MAAA,EAAQ,cAAA;AAAA,EACR,IAAA,EAAM,YAAA;AAAA,EACN,QAAA,EAAU;AACZ,CAAA;AAEA,IAAM,aAAA,GAA8C;AAAA,EAClD,OAAA,EAAS,sGAAA;AAAA,EACT,OAAA,EAAS,kEAAA;AAAA,EACT,MAAA,EAAQ,yDAAA;AAAA,EACR,OAAA,EAAS,gEAAA;AAAA,EACT,cAAA,EAAgB,sJAAA;AAAA,EAChB,OAAA,EAAS,gEAAA;AAAA,EACT,cAAA,EAAgB,sJAAA;AAAA,EAChB,KAAA,EAAO,4DAAA;AAAA,EACP,YAAA,EAAc,gJAAA;AAAA,EACd,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,UAAA,GAAwC;AAAA,EAC5C,EAAA,EAAI,iDAAA;AAAA,EACJ,EAAA,EAAI,iEAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,SAAA,GAAuC;AAAA,EAC3C,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAIA,IAAM,gBAAA,GAAmD;AAAA,EACvD,OAAA,EAAS,CAAC,CAAA,KAAM,cAAA,CAAe,CAAC,CAAA;AAAA,EAChC,OAAA,EAAS,CAAC,CAAA,KAAM,aAAA,CAAc,CAAC,CAAA;AAAA,EAC/B,MAAA,EAAQ,CAAC,CAAA,KAAM,aAAA,CAAc,CAAC,CAAA;AAAA,EAC9B,OAAA,EAAS,CAAC,CAAA,KAAM,cAAA,CAAe,CAAC;AAClC,CAAA;AAEA,IAAM,cAAA,GAAoD;AAAA,EACxD,CAAA,EAAG,kEAAA;AAAA,EACH,CAAA,EAAG,kEAAA;AAAA,EACH,CAAA,EAAG,kEAAA;AAAA,EACH,CAAA,EAAG,kEAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEA,IAAM,aAAA,GAAmD;AAAA,EACvD,CAAA,EAAG,6DAAA;AAAA,EACH,CAAA,EAAG,6DAAA;AAAA,EACH,CAAA,EAAG,6DAAA;AAAA,EACH,CAAA,EAAG,6DAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEA,IAAM,cAAA,GAAoD;AAAA,EACxD,CAAA,EAAG,yHAAA;AAAA,EACH,CAAA,EAAG,yHAAA;AAAA,EACH,CAAA,EAAG,yHAAA;AAAA,EACH,CAAA,EAAG,yHAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEA,SAAS,iBAAA,CAAkB,OAA0B,OAAA,EAA+B;AAClF,EAAA,MAAM,OAAA,GAAU,gBAAA,CAAiB,OAAO,CAAA,IAAK,gBAAA,CAAiB,OAAA;AAC9D,EAAA,OAAO,QAAQ,KAAK,CAAA;AACtB;AAyBO,SAAS,KAAA,CAAM,EAAE,OAAA,GAAU,SAAA,EAAW,UAAU,IAAA,GAAO,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,KAAA,EAAO,SAAA,EAAW,UAAS,EAAe;AAElJ,EAAA,MAAM,eAAA,GAAkB,QAAA,GAAW,iBAAA,CAAkB,QAAQ,CAAA,GAAI,OAAA;AACjE,EAAA,MAAM,MAAA,GAAS,CAAC,EAAE,QAAA,IAAY,KAAA,CAAA;AAC9B,EAAA,MAAM,EAAE,GAAA,EAAK,QAAA,EAAU,WAAA,EAAY,GAAI,eAAA,CAAgB,EAAE,KAAA,EAAO,CAAA,EAAG,QAAA,EAAU,CAAC,MAAA,EAAQ,CAAA;AACtF,EAAA,MAAM,QAAA,GAAW,UAAU,IAAI,CAAA;AAC/B,EAAA,MAAM,UAAA,GAAA,CAAc,QAAA,IAAY,SAAA,KAAc,CAAC,QAAA;AAE/C,EAAA,MAAM,eAAe,KAAA,GACjB,iBAAA,CAAkB,OAAO,eAAe,CAAA,GACxC,cAAc,eAAe,CAAA;AAEjC,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAGC,eAAA,EAAc,EAAA;AAAA,MAGd,SAAA,EAAW,EAAA;AAAA,QACT,kFAAA;AAAA,QACA,iCAAA;AAAA,QACA,KAAA,IAAS,gBAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,UAAA,IAAc,SAAS,IAAA,IAAQ,UAAA;AAAA,QAC/B,UAAA,IAAc,SAAS,IAAA,IAAQ,SAAA;AAAA,QAC/B,UAAA,IAAc,SAAS,IAAA,IAAQ,WAAA;AAAA,QAC/B,YAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,OAAO,MAAA,GAAS,EAAE,GAAI,KAAA,GAAQ,EAAE,KAAA,EAAM,GAAI,EAAC,EAAI,GAAI,QAAA,GAAW,EAAE,UAAS,GAAI,IAAI,GAAI,MAAA;AAAA,MAEpF,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAY,GAAA,CAAC,QAAK,IAAA,EAAM,QAAA,EAAU,MAAM,QAAA,EAAU,SAAA,EAAU,UAAA,EAAW,IAAA,EAAK,kBAAA,EAAmB,CAAA;AAAA,QAC/F,MAAA,uBACE,MAAA,EAAA,EAAK,GAAA,EAAK,UAAU,SAAA,EAAU,UAAA,EAAY,UAAS,CAAA,GAEpD,QAAA;AAAA,QAED,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,SAAA,EAAW,MAAM,QAAA,EAAU,SAAA,EAAU,UAAA,EAAW,IAAA,EAAK,mBAAA,EAAoB;AAAA;AAAA;AAAA,GACrG;AAGF,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAS,QAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,EAChD;AACA,EAAA,OAAO,KAAA;AACT","file":"chunk-4FX6UCSS.js","sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { AutoTooltip } from \"./Tooltip\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport type { ReactNode } from \"react\";\n\nexport type BadgeVariant =\n  | \"default\"\n  | \"neutral\"\n  | \"subtle\"\n  | \"success\"\n  | \"success-soft\"\n  | \"warning\"\n  | \"warning-soft\"\n  | \"error\"\n  | \"error-soft\"\n  | \"outline\";\n\nexport type BadgeSize = \"xs\" | \"sm\" | \"md\";\nexport type BadgePaletteColor = 1 | 2 | 3 | 4 | 5;\nexport type BadgeSeverity = \"info\" | \"low\" | \"medium\" | \"high\" | \"critical\";\n\nconst severityToVariant: Record<BadgeSeverity, BadgeVariant> = {\n  info: \"neutral\",\n  low: \"success-soft\",\n  medium: \"warning-soft\",\n  high: \"error-soft\",\n  critical: \"error\",\n};\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  default: \"bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]\",\n  neutral: \"bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]\",\n  subtle: \"bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]\",\n  success: \"bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)]\",\n  \"success-soft\": \"bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]\",\n  warning: \"bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)]\",\n  \"warning-soft\": \"bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]\",\n  error: \"bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]\",\n  \"error-soft\": \"bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]\",\n  outline: \"bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n};\n\nconst sizeStyles: Record<BadgeSize, string> = {\n  xs: \"px-ds-1.5 py-[1px] text-[length:10px] gap-[3px]\",\n  sm: \"px-ds-2 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n  md: \"px-ds-2.5 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n};\n\nconst iconSizes: Record<BadgeSize, number> = {\n  xs: 10,\n  sm: 12,\n  md: 12,\n};\n\ntype PaletteStyleFn = (n: BadgePaletteColor) => string;\n\nconst paletteByVariant: Record<string, PaletteStyleFn> = {\n  default: (n) => paletteDefault[n],\n  neutral: (n) => paletteSubtle[n],\n  subtle: (n) => paletteSubtle[n],\n  outline: (n) => paletteOutline[n],\n};\n\nconst paletteDefault: Record<BadgePaletteColor, string> = {\n  1: \"bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]\",\n  2: \"bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]\",\n  3: \"bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]\",\n  4: \"bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]\",\n  5: \"bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]\",\n};\n\nconst paletteSubtle: Record<BadgePaletteColor, string> = {\n  1: \"bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]\",\n  2: \"bg-[var(--ds-palette-2-bg)] text-[var(--ds-palette-2-text)]\",\n  3: \"bg-[var(--ds-palette-3-bg)] text-[var(--ds-palette-3-text)]\",\n  4: \"bg-[var(--ds-palette-4-bg)] text-[var(--ds-palette-4-text)]\",\n  5: \"bg-[var(--ds-palette-5-bg)] text-[var(--ds-palette-5-text)]\",\n};\n\nconst paletteOutline: Record<BadgePaletteColor, string> = {\n  1: \"bg-transparent text-[var(--ds-palette-1-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-1-bold)]\",\n  2: \"bg-transparent text-[var(--ds-palette-2-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-2-bold)]\",\n  3: \"bg-transparent text-[var(--ds-palette-3-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-3-bold)]\",\n  4: \"bg-transparent text-[var(--ds-palette-4-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-4-bold)]\",\n  5: \"bg-transparent text-[var(--ds-palette-5-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-5-bold)]\",\n};\n\nfunction getPaletteClasses(color: BadgePaletteColor, variant: BadgeVariant): string {\n  const styleFn = paletteByVariant[variant] ?? paletteByVariant.default;\n  return styleFn(color);\n}\n\ninterface BadgeProps {\n  variant?: BadgeVariant;\n  /** Severity shorthand — maps to a variant. When set, overrides `variant`. */\n  severity?: BadgeSeverity;\n  size?: BadgeSize;\n  /** Palette colour (1-5). Overrides variant colour with decorative palette tokens. */\n  color?: BadgePaletteColor;\n  /** Icon to show before the label */\n  iconLeft?: IconName;\n  /** Icon to show after the label */\n  iconRight?: IconName;\n  /** Max width before truncation (e.g. \"120px\", \"16ch\"). Shows tooltip when truncated. */\n  maxWidth?: string;\n  /**\n   * A set width (a CSS length, e.g. \"6rem\"), for a set of badges that should line up: a table column of statuses gives\n   * each the same width. The text is centred, and truncated with a tooltip if it doesn't fit. Without it a badge is as\n   * wide as what it says (Sprint 25.33).\n   */\n  width?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function Badge({ variant = \"default\", severity, size = \"md\", color, iconLeft, iconRight, maxWidth, width, className, children }: BadgeProps) {\n  // severity sets the variant and variant is ignored when both are written\n  const resolvedVariant = severity ? severityToVariant[severity] : variant;\n  const capped = !!(maxWidth || width);\n  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !capped });\n  const iconSize = iconSizes[size];\n  const isIconOnly = (iconLeft || iconRight) && !children;\n\n  const colorClasses = color\n    ? getPaletteClasses(color, resolvedVariant)\n    : variantStyles[resolvedVariant];\n\n  const badge = (\n    <span\n      // Sprint 25.13 A1: a card header reads this to put a badge in its actions beside the title (D1a), and a card grid\n      // to size from what its headers hold (A2)\n      data-gs-badge=\"\"\n      // w-fit: a grid or a column round it never stretches it (Sprint 25.33: run 94's level badges went 337 px wide on a\n      // phone for 35 px of text); a set width is the caller's choice, centred\n      className={cn(\n        \"inline-flex items-center font-medium w-fit max-w-full whitespace-nowrap shrink-0\",\n        \"rounded-[var(--ds-radius-full)]\",\n        width && \"justify-center\",\n        sizeStyles[size],\n        isIconOnly && size === \"xs\" && \"px-[3px]\",\n        isIconOnly && size === \"sm\" && \"px-ds-1\",\n        isIconOnly && size === \"md\" && \"px-ds-1.5\",\n        colorClasses,\n        className\n      )}\n      style={capped ? { ...(width ? { width } : {}), ...(maxWidth ? { maxWidth } : {}) } : undefined}\n    >\n      {iconLeft && <Icon name={iconLeft} size={iconSize} className=\"shrink-0\" from=\"Badge's iconLeft\" />}\n      {capped ? (\n        <span ref={truncRef} className=\"truncate\">{children}</span>\n      ) : (\n        children\n      )}\n      {iconRight && <Icon name={iconRight} size={iconSize} className=\"shrink-0\" from=\"Badge's iconRight\" />}\n    </span>\n  );\n\n  if (isTruncated) {\n    return <AutoTooltip content={children}>{badge}</AutoTooltip>;\n  }\n  return badge;\n}\n"]}

package/dist/{chunk-OWGF362U.js → chunk-4TQVFRKK.js}

@@ -1,11 +1,11 @@
 "use client";
-import { useTextOverflow } from './chunk-R2IAK3J3.js';
+import { useTextOverflow } from './chunk-ZTS6HJAU.js';
 import { useReportedChange, useOptionalFormContext } from './chunk-72SDAX54.js';
-import { ControlSizeContext } from './chunk-FF57N3P7.js';
+import { ControlSizeContext } from './chunk-MW5CJOJN.js';
 import { useInputModality } from './chunk-7RKC5C7G.js';
-import { useRevealFocus, AutoTooltip } from './chunk-HCEHTJ5E.js';
+import { useRevealFocus, AutoTooltip } from './chunk-77X7AHFB.js';
 import { warnNameLeftOut, Icon } from './chunk-53F7GVBQ.js';
-import { cn, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, FOCUS_RING, useLatest, useFocusLeave, usePopupFocus, focusAfterRemoval, ERROR_ACTIVE_RING, ACTIVE_RING } from './chunk-2724SJO2.js';
+import { cn, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, FOCUS_RING, useLatest, useFocusLeave, usePopupFocus, focusAfterRemoval, ERROR_ACTIVE_RING, ACTIVE_RING } from './chunk-HDFTENVW.js';
 import { createContext, useContext, useRef, useCallback, useEffect, useId, useState, Children, isValidElement, useLayoutEffect, useMemo, cloneElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -807,5 +807,5 @@ function OptionButton({
 }
 
 export { AddAnotherRowCtx, CHECK_FILL, Dropdown, Field, FilterRowContext, InlineFieldError, Input, Label, OutsideField, SWITCH_KNOB_MOTION, SWITCH_KNOB_OFF, SWITCH_KNOB_ON, SWITCH_TRACK_OFF, SWITCH_TRACK_ON, Textarea, Toggle, useField, useFieldControl };
-//# sourceMappingURL=chunk-OWGF362U.js.map
-//# sourceMappingURL=chunk-OWGF362U.js.map
+//# sourceMappingURL=chunk-4TQVFRKK.js.map
+//# sourceMappingURL=chunk-4TQVFRKK.js.map