@seekalfred/primitives 0.7.1 → 0.7.4

package/README.md

@@ -132,6 +132,34 @@ makes `description` **required** — React Aria associates the description
 for that role, so a confirmation built from a plain `Dialog` loses the
 sentence explaining what is about to happen.
 
+### Rich content: `body`
+
+`body` puts rich content between the description and the actions: a plan
+comparison, a before/after diff, a quoted reply, a field to fill in or a choice
+to make (a `RadioGroup`). It shares the description's edge and is in the
+dialog's tab order before the actions. `false`, `true` and `""` (as from
+`cond && <X />`) render no body.
+
+```tsx
+<AlertDialog
+  isOpen={open}
+  onOpenChange={setOpen}
+  title="Cancel subscription?"
+  description="You keep Pro until the end of the period, then move to Free."
+  body={<PlanSummary plan={plan} />}
+>
+  <AlertDialogCancel>Keep plan</AlertDialogCancel>
+  <AlertDialogAction onPress={cancel}>Cancel subscription</AlertDialogAction>
+</AlertDialog>
+```
+
+The body is not part of the accessible description: a screen reader announces
+only the `description` sentence with the title, and reads the body in place or
+as focus reaches its controls, each with its own label. So a field or a choice
+belongs in `body`, but the `description` must say everything needed to answer,
+including that something below is required ("Pick what happens to your
+recordings, then confirm.").
+
 ### Migrating from the legacy shadcn AlertDialog
 
 | legacy                     | Alfred                          |                                                     |
@@ -528,6 +556,28 @@ Padding is **block-only on the shell and inline-only on the sections**, which
 is what lets a divider or a full-bleed image run edge to edge. A single `p-6`
 on the shell would make that impossible.
 
+### Featured and flush cards
+
+```tsx
+<Card highlighted>…</Card>   {/* the one featured card in a view */}
+<Card flush>…</Card>         {/* a table, list or chart that meets the top and bottom */}
+```
+
+`highlighted` replaces the hairline with a brand gradient edge (secondary to
+tertiary, so it follows the theme) without changing the card's box. To repaint
+the edge, set the `--card-highlight` custom property on the card element itself
+(`className` or `style` on `Card`): the utility declares it on the card, so a
+value set on an ancestor does not reach it. Use it for one card per view and
+say in the content why it is featured: the edge is decoration. `flush` drops
+the shell's block padding and the gap between parts and clips the content to
+the rounded border, keeping the outline, radius, surface and shadow; a
+`className` padding still wins. The header and footer keep a 24px block
+inset, so their text clears the corner curve; the content stays block-flush.
+Every section keeps its inline padding, so text never sits in the corner, and
+a section's fill (`<CardContent className="bg-muted">`) still reaches the side
+edges because background paints the padding. Both default to `false`, and the two
+compose: a flush featured card keeps its gradient edge.
+
 ### Migrating from the legacy shadcn Card
 
 | legacy                   | Alfred                           |                                                                         |
@@ -682,6 +732,16 @@ What a list shows when it has nothing to show: one muted line, centred in a
 bordered box the width of the list. `action` is an optional next step under the
 text and is omitted from the DOM when absent.
 
+`image` is an optional illustration above the icon and the title (an `<img>`,
+an inline SVG or any element). It is centred, shrinks to fit a narrow box and
+keeps its aspect ratio; its size is the artwork's. The slot reserves no space,
+so set the artwork's intrinsic `width` and `height`, or the layout jumps when
+it loads. The slot does not hide it from assistive technology, so name it:
+give an `<img>` an `alt` (`alt=""` when the title already says it all), and an
+inline `<svg>` `role="img"` with an `aria-label`, or `aria-hidden="true"` when
+it is decorative. Omitted from the DOM when absent; `false` (from
+`cond && <img />`) counts as absent.
+
 ### Motion (EmptyState)
 
 New optional `icon` settles in once when the state first appears (small and transparent to rest over 480ms); a different icon component later swaps in place. A string message swaps as a whole when it changes and the message column follows its height on the smooth spring. The message now sits in an `empty-state-copy` frame.
@@ -908,6 +968,18 @@ The wiring, done for you:
 - The error row has `role="alert"`.
 - Screen readers get the plain copy. The animated words are `aria-hidden`.
 
+**`isRequired`** makes the control `required` (announced by screen readers and
+checked by native form validation) and shows the required marker after the
+label: the same red asterisk as `PasswordField` and `Select`, `aria-hidden` so
+the name stays the label's text. Off by default. Without a `label` the control
+is still `required`, with no label to mark. A native `required` on its own still
+only sets the attribute and draws no marker, as before.
+
+```tsx
+<Input label="Email" isRequired />
+<Textarea label="Message" isRequired />
+```
+
 Limits worth knowing:
 
 - **Do not pass `aria-label` together with `label`.** `aria-label` wins, so the
@@ -1044,6 +1116,20 @@ default). Native input props apply to the input, and `className` goes to the
 input; `disabled` also disables the toggle, and `aria-invalid` gives the box its
 invalid border. The box shares the field look of `Input` and `Textarea`.
 
+`error` is `Input`'s prop: error text under the field, announced as an alert,
+that sets `aria-invalid` and is named in `aria-describedby`. `isRequired` makes
+the input `required` and shows a required marker (an asterisk, hidden from
+assistive technology, which hears the input's own `required`) after the label.
+
+```tsx
+<PasswordField
+  label="API secret"
+  isRequired
+  error={errors.secret?.message}
+  {...register("secret")}
+/>
+```
+
 **The toggle's name changes with its state and it is also `aria-pressed`**, so a
 screen reader may announce both ("Hide password, pressed"); this is not tested
 with a screen reader. Reduced motion drops every transition and the press.
@@ -1135,9 +1221,39 @@ and no number. `formatOptions` reaches it too, so a currency or "3 of 7" needs n
 second prop. `trackClassName` and `fillClassName` are escape hatches for a colour
 no tone covers.
 
+`isIndeterminate` draws a segment 40% of the track wide that sweeps across it
+from the start edge on a loop (right to left in RTL), and announces no value.
+With `labelHidden` and no `showValue` nothing is printed above the track, so the
+6px header gap collapses and the bar sits at the top of its box.
+
+`showCompletion={false}` keeps a bar from saying "done" at 100%: the fill keeps
+its tone and no check lands. Use it for a timer-driven estimate that can reach
+100% before the work finishes.
+
+`target` draws an upright tick where the bar should be by now, on the same
+scale as `value` (clamped to `minValue`..`maxValue`), standing proud of the
+track with a 1px halo so it reads over the fill too. The tick is decorative:
+`targetLabel` (default "Target") and the formatted target ("Expected by now:
+40%", formatted like the bar's own value) become the bar's accessible
+description, kept alongside any `aria-describedby` of yours. `showTargetLabel`
+also prints that text under the tick, centred on it and kept inside the bar
+near either end. No `target`, no tick and the same DOM as before.
+
+`surface="inverse"` is for a bar on the inverted, foreground-coloured surface
+(a dark strip in the light theme): the track is the inverse text colour mixed
+into that surface, and the default fill, the tick and the copy take the inverse
+text colour. Explicit tones keep their colours.
+
+```tsx
+<Progress label="Organic sessions" value={340} maxValue={1000} target={450} targetLabel="Expected by now" labelHidden />
+<div className="bg-foreground p-4">
+  <Progress label="Plan reaches" value={72} target={100} surface="inverse" labelHidden />
+</div>
+```
+
 ### Motion (Progress)
 
-The fill follows the value on the smooth spring (it was a 200ms ease) and the printed percentage counts to the new number on the same spring, so the number always matches the bar. When a default-toned bar completes it eases to the success colour (after 200ms) and a check lands beside the count; an explicit `tone` is never overridden, and a bar that is full at mount shows its check with no motion. A value that is not a percentage (a price) is shown as it is. A changed string label swaps as a whole.
+The fill follows the value on the smooth spring (it was a 200ms ease) and the printed percentage counts to the new number on the same spring, so the number always matches the bar. When a default-toned bar completes it eases to the success colour (after 200ms) and a check lands beside the count; an explicit `tone` is never overridden, `showCompletion={false}` turns both off, and a bar that is full at mount shows its check with no motion. An indeterminate segment sweeps the track every 1.6s; under reduced motion it does not travel, and the fill spans the track and pulses slowly instead. A value that is not a percentage (a price) is shown as it is. A changed string label swaps as a whole.
 
 ## RadioGroup
 
@@ -1148,6 +1264,32 @@ The fill follows the value on the smooth spring (it was a 200ms ease) and the pr
 </RadioGroup>
 ```
 
+### Card variant
+
+`variant="card"` draws each choice as a selectable card: the whole card is the
+target, the title is `children`, and each `Radio` can take a `description` and
+a decorative `icon`. The group becomes a grid, so the caller sets the columns.
+
+```tsx
+<RadioGroup variant="card" value={mode} onChange={setMode} aria-label="How to run" className="sm:grid-cols-2">
+  <Radio value="draft" icon={<DraftIcon />} description="Save as a draft and review it first.">
+    Draft only
+  </Radio>
+  <Radio value="everywhere" description="Apply to every category now.">
+    Run everywhere
+  </Radio>
+</RadioGroup>
+```
+
+- The title alone is the option's name; the description is wired as its
+  description (`aria-describedby`), so a screen reader does not run the two
+  together. The icon is `aria-hidden`.
+- Selected shows twice: a `primary-strong` edge (StatCard's selected pair) and
+  the same dot as the default radio, so it never rests on colour alone.
+- Keyboard is unchanged: one tab stop, arrow keys move and select. The focus
+  ring is drawn on the card, not the dot.
+- `description` and `icon` are ignored by the default variant.
+
 ### Migrating from the legacy RadioGroup
 
 | legacy                              | Alfred                    |                                        |
@@ -1192,6 +1334,8 @@ New opt-in `fade` (px, default `0` = off, so an area is unchanged) fades the con
 
 ```tsx
 <SearchField label="Search contacts" value={query} onValueChange={setQuery} />
+<SearchField label="Search tickets" labelHidden size="sm" placeholder="Search tickets"
+             value={query} onValueChange={setQuery} />
 ```
 
 A search input with a clear button. It is controlled: `value` and
@@ -1205,7 +1349,13 @@ animation, and while the button leaves it cannot be pressed or focused. The
 magnifier is muted at rest and takes full contrast while the field has focus or
 a value.
 
-`label` is required and visible; `clearLabel` renames the button (default "Clear
+`label` is required and visible unless `labelHidden` is set, which keeps it as
+the input's accessible name (`aria-label`) without printing it — for a toolbar
+search whose purpose the surrounding UI already shows. That holds inside a
+React Aria `TextField` too, including one with no `Label` child. `size` (`sm` · `md` ·
+`lg`, default `md`) takes the same `--density-control-*` height and padding as
+Input, Select and Button, and `sm` takes Input's 14px text (16px on a touch
+screen). `clearLabel` renames the button (default "Clear
 search"). Native input props apply to the input, `className` goes to the input,
 and `disabled` also disables the clear button. The browser's own clear button
 and search decoration are hidden. The box shares the field look of `Input`.
@@ -1265,22 +1415,40 @@ only — WCAG 1.4.1. The message is wired into `aria-describedby` for you.
 <Select label="Country" isInvalid errorMessage="Pick a country to continue." />
 ```
 
+**`isRequired`** is React Aria's prop: the hidden native select is `required`
+and the root gets `data-required`. It also shows the required marker after the
+label, the same asterisk as `Input`, `Textarea` and `PasswordField`, hidden from
+the trigger's accessible name.
+
+```tsx
+<Select label="Country" isRequired>…</Select>
+```
+
 ## Separator
 
 ```tsx
 <Separator />
 <Separator orientation="vertical" />
+<Separator orientation="vertical" decorative />
 ```
 
 React Aria renders an `<hr>` horizontally and a `<div role="separator">`
-vertically.
+vertically. The line is painted with `--color-separator`, the hairline between
+rows and groups inside a surface, not `--color-border`, which is the surface's
+own outline.
+
+`decorative` draws the same line as a plain `aria-hidden` div, for a rule that
+only spaces inline items (a metadata row) where announcing "separator" between
+each pair is noise. Leave it off for a line between two groups of content.
+Other props (`id`, `data-*`, handlers) reach the div in this mode too; a name
+(`aria-label`, `aria-labelledby`) is dropped.
 
 ### Migrating from the legacy Separator
 
 | legacy        | Alfred          |                                                              |
 | ------------- | --------------- | ------------------------------------------------------------ |
 | `orientation` | `orientation`   | unchanged                                                     |
-| `decorative`  | *no equivalent* | zero call sites; see below                                    |
+| `decorative`  | `decorative`    | default flipped to `false`; see below                         |
 
 **This changes the semantics of all six existing uses.** The legacy defaulted
 to `decorative: true`, rendering `role="none"` — so every divider in the app
@@ -1404,6 +1572,17 @@ link, `onPress` a button, and `isSelected` with `onPress` a filter toggle with
 use `Badge`, whose `tone` already covers success, warning, danger, info,
 primary and neutral.
 
+`isLoading` keeps the card's box while its figure loads: the label stays (an
+empty `label` pulses in its line), the value and the context line (pass `sub`
+to keep it) become placeholders one line tall, the change pill pulses at its
+own size, the content is `aria-busy` and the root carries `data-loading`.
+Screen readers hear `loadingLabel` ("Loading") in place of the figure. A row of
+loading cards is exactly as tall as the row that replaces it.
+
+```tsx
+<StatCard label={metric?.name ?? ""} value={metric?.value ?? ""} sub="vs previous period" isLoading={!metric} />
+```
+
 ## Switch
 
 ```tsx
@@ -1516,6 +1695,12 @@ depends on row *data*, use `rowClassName`.
 | `striped` | zebra-stripes alternate rows |
 | `totalRow` | `(column) => ReactNode`; renders a real `<tfoot>` |
 | `Column.numeric` | tabular numerals, end-aligned by default |
+| `getSubRows` | `(row) => T[]`; rows that open to show the rows under them, with a disclosure button in the first cell (`aria-expanded`, named by the cell) |
+| `expandedKeys` / `defaultExpandedKeys` / `onExpandedChange` | the open rows, controlled or not; nothing is open by default |
+| `isGroupRow` | `(row) => boolean`; a group header row whose first cell spans the row. It only heads its rows: `onRowAction` does not fire for it and it shows no pointer |
+| `density` | `default` · `compact` — `py-2` rows in small type, the product's tight report tables |
+| `headerHidden` | hides the header row from sight and keeps it for assistive tech (key/value tables); widths still apply, sorting is off |
+| `keyboardModel` | `grid` (default) · `table` — a plain `role="table"` where Tab walks the links and buttons in the cells; no selection or `onRowAction`; `getSubRows` and `isGroupRow` work in it, with the disclosure button in the Tab order |
 
 ### Using it in alfred-ui
 
@@ -1558,7 +1743,7 @@ not worth a palette entry. If you want it exactly, override
 | `rowClassName` | unchanged | |
 | `rowIdField="keywordId"` | `getRowId={(r) => r.keywordId}` | |
 
-Row expansion, sticky headers, loading skeletons, pinned columns, the total
+Sticky headers, loading skeletons, pinned columns, the total
 row, filtering, column visibility and CSV export are **not ported** — each had
 one consumer or none across the six legacy tables, and they belong to a future
 `DataGrid`.
@@ -1635,6 +1820,28 @@ builds a `Time` at runtime, so the peer dependency is a real import here.
 (1, 5, 10, 15 or 30; a time between steps is added to the list so it is never lost),
 and `hourCycle` chooses 12 or 24 hour times.
 
+**In a form**: `id` goes on the trigger (so an outside `<label htmlFor>` or a form
+library reaches it), `name` submits the time as `"HH:MM"` in 24-hour time, as
+`<input type="time">` does, and `onBlur` fires when focus leaves the trigger.
+`isInvalid` paints the invalid border and `errorMessage` shows under the control
+while it is invalid, named in `aria-describedby`, as on `Select`. With
+react-hook-form, wire them from a `Controller`. Pass `field.value ?? null`, not
+`field.value`: `undefined` makes the picker uncontrolled, so a form reset to
+`undefined` would leave the last time on screen, while `null` clears it. With no
+time chosen, `name` submits an empty string.
+
+```tsx
+<Controller
+  name="syncTime"
+  control={control}
+  render={({ field, fieldState }) => (
+    <TimePicker label="Sync time" id={field.name} name={field.name}
+                value={field.value ?? null} onChange={field.onChange} onBlur={field.onBlur}
+                isInvalid={!!fieldState.error} errorMessage={fieldState.error?.message} />
+  )}
+/>
+```
+
 **Motion** (plain CSS and a little plain React, no animation library): the shown
 time rolls like a clock face (a later time rises in from below, an earlier one
 drops in from above, and the old one lifts away); the chevron turns half a turn on
@@ -1707,3 +1914,46 @@ inherits from the document. Set both if you support RTL.
 
 A tooltip rises 3px from its trigger and settles from .97 over 160ms (offset follows the side it opens on), and leaves in 120ms. While any tooltip is open, and for 300ms after the last one closes, the next one only fades in (no travel). The open delay stays 0. Reduced motion fades only. **DOM:** an empty hidden `span` inside the tooltip marks the warm case. Not ported: the crossfade and size spring when a string tooltip's text changes while open.
 
+
+## UsageMeter
+
+```tsx
+<UsageMeter label="Workspace storage" segments={segments} limit={10} unit="GB" />
+```
+
+The meter works its state out from the numbers: almost full from `warnAt` (a
+share of the limit, 0.9 by default), over once the total passes the limit.
+
+### A status from the backend
+
+When the product decides the state, pass `status` and the meter shows that
+instead of its own reading (badge, `data-status`, the bar's name and the
+announcement). The bar and legend agree with it:
+
+- `full` and `exhausted` under the limit mean the allowance is used up, so
+  there is no free share: the bar spans what is used and the free item reads 0.
+  The headline still states the plan size ("7.7 GB of 10 GB used").
+- Past the limit, `ok` and `warn` give way to the meter's own over state, since
+  the hatch already shows the overage. `full` and `exhausted` keep their words.
+
+| `status`    | meaning                     | badge           | `data-status` |
+| ----------- | --------------------------- | --------------- | ------------- |
+| `ok`        | under the limit             | "N free"        | `ok`          |
+| `warn`      | almost full                 | "Almost full"   | `near`        |
+| `full`      | allowance used up           | "Limit reached" | `full`        |
+| `exhausted` | nothing left to draw on     | "None left"     | `exhausted`   |
+
+`statusLabel` is the product's own words for the status ("Credits paused"). It
+replaces the badge's words in every mode (including "Unlimited"), the status in
+the bar's name and the announcement; the tone and icon still follow the status.
+
+### Unlimited
+
+`unlimited` is a plan with no limit. The badge reads "Unlimited" (unless
+`statusLabel` is set), the bar shows
+each category's share of what is used, and there is no free share, limit marker
+or overflow hatch. `limit`, `warnAt` and `status` are ignored.
+
+```tsx
+<UsageMeter label="Keyword slots" segments={segments} limit={0} unlimited />
+```

package/dist/alert/alert.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { AriaRole, ComponentPropsWithoutRef, ReactNode, SVGProps } from "react";
 //#region src/alert/alert.d.ts
 /**
  * Alert, ported from the legacy shadcn component.
@@ -24,14 +24,42 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  * problems rather than porting them.
  */
 export declare const alertVariants: (props?: ({
-  variant?: "success" | "warning" | "destructive" | "default" | null | undefined;
+  variant?: "warning" | "destructive" | "default" | "success" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The icon's colour: the state's own hue on every variant. Inside an Alert the
+ * destructive red is also the whole alert's text colour, so it changes nothing
+ * there; outside one it is what colours the icon.
+ *
+ * Exported with the status icons so a notice that is not an `Alert` (a row, a
+ * banner of the app's own) can show a tone the same way the alert does.
+ */
+export declare const alertIconVariants: (props?: ({
+  variant?: "warning" | "destructive" | "default" | "success" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The built-in glyph of each variant, drawn with currentColor so the icon
+ * wrapper's colour paints it. Each is its own component so a variant change
+ * crossfades the icon (see iconKey).
+ *
+ * Exported as AlertInfoIcon, AlertSuccessIcon, AlertWarningIcon and
+ * AlertDestructiveIcon. They are decorative (`aria-hidden`) and `--icon-sm`
+ * by default; extra props, such as a `className` with a size, land on the svg.
+ * Given an `aria-label` or `aria-labelledby` (with `role="img"`), an icon is
+ * no longer hidden, and an explicit `aria-hidden` always wins.
+ */
+type StatusIconProps = Omit<SVGProps<SVGSVGElement>, "children">;
+declare function InfoGlyph(props: StatusIconProps): import("react").JSX.Element;
+declare function SuccessGlyph(props: StatusIconProps): import("react").JSX.Element;
+declare function WarningGlyph(props: StatusIconProps): import("react").JSX.Element;
+declare function DestructiveGlyph(props: StatusIconProps): import("react").JSX.Element;
 /**
  * An inline status message.
  *
  * Announced by assistive technology the moment it renders, via `role="alert"`.
- * That makes it the wrong component for content that is present on load and
- * merely styled as a notice -- use a plain region for those.
+ * That makes it the wrong default for content that is present on load and
+ * merely styled as a notice -- pass `role="note"` for those, or
+ * `role="status"` for an outcome that should be announced politely.
  *
  * @example
  * <Alert variant="destructive" icon={<WarningIcon aria-hidden />} title="Save failed">
@@ -80,7 +108,24 @@ export interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title
   onDismiss?: () => void;
   /** The Dismiss button's accessible name. @default "Dismiss" */
   dismissLabel?: string;
+  /**
+   * How assistive technology treats the message.
+   *
+   * - `alert`: announced assertively the moment it renders. For an error or a
+   *   warning that appears after the user did something.
+   * - `status`: a live region announced politely, after what the user is
+   *   hearing. For an outcome reported after an action ("Saved").
+   * - `note`: not live. For a notice that is simply there when the page loads;
+   *   an alert there would interrupt the page's own announcement.
+   *
+   * Typed as any ARIA role, as the inherited `role` was, so existing callers
+   * still compile; those three are the ones an inline notice should use.
+   *
+   * @default "alert"
+   */
+  role?: "alert" | "status" | "note" | AriaRole;
 }
 export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
+export { DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon };
 //# sourceMappingURL=alert.d.ts.map

package/dist/alert/alert.js

@@ -9,6 +9,17 @@ import { Button } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/alert/alert.tsx
 /**
+* `info` is `default` said by name: a call site that means "information" should
+* not depend on `default` happening to look like it. Every per-variant map below
+* derives `info` here, from its `default`, so the two cannot drift.
+*/
+function withInfo(map) {
+	return {
+		...map,
+		info: map.default
+	};
+}
+/**
 * Alert, ported from the legacy shadcn component.
 *
 * There is no React Aria base: RAC ships no static inline alert (its Toast
@@ -35,71 +46,88 @@ const alertVariants = cva([
 	"rounded-panel border-(length:--border-width) p-(--density-control-pad-md)",
 	"font-sans text-sm leading-(--leading-normal)"
 ], {
-	variants: { variant: {
+	variants: { variant: withInfo({
 		default: "bg-surface text-foreground border-border",
 		success: "bg-surface text-foreground border-border",
 		warning: "bg-surface text-foreground border-border",
 		destructive: "bg-surface text-destructive-strong border-destructive-strong"
-	} },
+	}) },
 	defaultVariants: { variant: "default" }
 });
-/** The icon's colour: the state's own hue, on the status variants. Destructive keeps its whole-alert red. */
+/**
+* The icon's colour: the state's own hue on every variant. Inside an Alert the
+* destructive red is also the whole alert's text colour, so it changes nothing
+* there; outside one it is what colours the icon.
+*
+* Exported with the status icons so a notice that is not an `Alert` (a row, a
+* banner of the app's own) can show a tone the same way the alert does.
+*/
 const alertIconVariants = cva("flex h-lh shrink-0 items-center [&_svg]:block [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--icon-sm)", {
-	variants: { variant: {
+	variants: { variant: withInfo({
 		default: "text-info-strong",
 		success: "text-success-strong",
 		warning: "text-warning-strong",
-		destructive: ""
-	} },
+		destructive: "text-destructive-strong"
+	}) },
 	defaultVariants: { variant: "default" }
 });
-/**
-* The built-in glyph of each variant, drawn with currentColor so the icon
-* wrapper's colour paints it. Each is its own component so a variant change
-* crossfades the icon (see iconKey).
-*/
-function StatusGlyph({ children }) {
+function StatusGlyph({ children, className, ...props }) {
+	const labelled = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
 	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": labelled ? void 0 : "true",
+		...props,
+		className: cn("size-(--icon-sm)", className),
 		viewBox: "0 0 16 16",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		"aria-hidden": "true",
 		children
 	});
 }
-function InfoGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "8",
-		cy: "8",
-		r: "6.25"
-	}), /* @__PURE__ */ jsx("path", { d: "M8 7.25v3.5M8 5h.01" })] });
+function InfoGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25"
+		}), /* @__PURE__ */ jsx("path", { d: "M8 7.25v3.5M8 5h.01" })]
+	});
 }
-function SuccessGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "8",
-		cy: "8",
-		r: "6.25"
-	}), /* @__PURE__ */ jsx("path", { d: "m5.25 8.25 1.9 1.9 3.6-3.9" })] });
+function SuccessGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25"
+		}), /* @__PURE__ */ jsx("path", { d: "m5.25 8.25 1.9 1.9 3.6-3.9" })]
+	});
 }
-function WarningGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("path", { d: "M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z" }), /* @__PURE__ */ jsx("path", { d: "M8 6.4v2.6M8 11.2h.01" })] });
+function WarningGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z" }), /* @__PURE__ */ jsx("path", { d: "M8 6.4v2.6M8 11.2h.01" })]
+	});
 }
-function DestructiveGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "8",
-		cy: "8",
-		r: "6.25"
-	}), /* @__PURE__ */ jsx("path", { d: "m6 6 4 4M10 6l-4 4" })] });
+function DestructiveGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25"
+		}), /* @__PURE__ */ jsx("path", { d: "m6 6 4 4M10 6l-4 4" })]
+	});
 }
-const statusGlyphs = {
+const statusGlyphs = withInfo({
 	default: /* @__PURE__ */ jsx(InfoGlyph, {}),
 	success: /* @__PURE__ */ jsx(SuccessGlyph, {}),
 	warning: /* @__PURE__ */ jsx(WarningGlyph, {}),
 	destructive: /* @__PURE__ */ jsx(DestructiveGlyph, {})
-};
+});
 /** A string title or description swaps as a whole when its text changes. */
 function Swappable({ value, children }) {
 	if (typeof value !== "string" && typeof value !== "number") return /* @__PURE__ */ jsx(Fragment$1, { children });
@@ -127,7 +155,7 @@ function DismissGlyph() {
 		children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
 	});
 }
-const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, title, headingLevel = 3, children, open, onDismiss, dismissLabel = "Dismiss", ...props }, ref) {
+const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, title, headingLevel = 3, children, open, onDismiss, dismissLabel = "Dismiss", role = "alert", ...props }, ref) {
 	const Title = `h${headingLevel}`;
 	const icon = iconProp === void 0 ? statusGlyphs[variant ?? "default"] : iconProp;
 	const frame = useRef(null);
@@ -163,7 +191,7 @@ const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, ti
 	const alert = /* @__PURE__ */ jsxs("div", {
 		ref,
 		...props,
-		role: "alert",
+		role,
 		"data-slot": "alert",
 		className: cn(alertVariants({ variant }), className),
 		children: [
@@ -221,6 +249,6 @@ const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, ti
 	});
 });
 //#endregion
-export { Alert, alertVariants };
+export { Alert, DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, alertIconVariants, alertVariants };
 
 //# sourceMappingURL=alert.js.map