@stealthscale/component-feedback 0.2.1 → 0.2.3

package/dist/theme.js

@@ -1,14 +1,29 @@
-import { a as recipe$6, d as recipe$4, f as recipe$3, i as recipe$7, l as recipe$2, n as recipe, r as recipe$1, t as recipe$8, u as recipe$5 } from "./recipe-CX1gSsN7.js";
+import { a as recipe$6, d as recipe$4, f as recipe$3, i as recipe$7, l as recipe$2, n as recipe, r as recipe$1, t as recipe$8, u as recipe$5 } from "./recipes-CX1gSsN7.js";
 import { definePreset } from "@stealthscale/theme/authoring";
-//#region src/theme.ts
-/**
-* Registers every recipe in the package in the preset an application's style compiler installs.
-*
-* @remarks
-*   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so
-*   no generator writes it.
-*/
-var theme_default = definePreset({
+//#endregion
+const theme_default$published = ((preset) => {
+	const extend = preset.theme.extend;
+	return {
+		...preset,
+		theme: {
+			...preset.theme,
+			extend: {
+				...extend,
+				"recipes": {
+					...extend["recipes"],
+					"skeleton": {
+						...extend["recipes"]["skeleton"],
+						staticCss: [...extend["recipes"]["skeleton"].staticCss ?? []]
+					},
+					"spinner": {
+						...extend["recipes"]["spinner"],
+						staticCss: [...extend["recipes"]["spinner"].staticCss ?? [], { "size": ["inherit"] }]
+					}
+				}
+			}
+		}
+	};
+})(definePreset({
 	name: "@stealthscale/component-feedback",
 	theme: { extend: {
 		recipes: {
@@ -25,6 +40,5 @@ var theme_default = definePreset({
 			toast: recipe$8
 		}
 	} }
-});
-//#endregion
-export { theme_default as default };
+}));
+export { theme_default$published as default };

package/locales/en/specimen/alert.json

@@ -0,0 +1,37 @@
+{
+  "about": "A notice the reader needs to act on or know about: an icon, a title, a description and a close trigger.",
+  "declined": "The card was declined and nothing was charged.",
+  "dismiss": "Dismiss {{name}}",
+  "edge": {
+    "about": "A rule in the palette's solid color along one edge. The end edge is logical: the right edge in a left-to-right document and the left edge in a right-to-left one.",
+    "title": "Edges"
+  },
+  "failed": "Payment failed",
+  "layout": {
+    "about": "The description stacked under the title, and on the same line after it.",
+    "title": "Layouts"
+  },
+  "motion": {
+    "about": "The entry animation of the alert. Under reduced motion the alert appears without it.",
+    "title": "Motion"
+  },
+  "radius": {
+    "about": "Every corner.",
+    "title": "Corners"
+  },
+  "restored": "Your draft was restored from Tuesday.",
+  "saved": "Changes saved",
+  "size": {
+    "about": "Every size. The size sets the text style, the inset, the gap and the icon box. The close trigger is 1.5em square and at least 24px.",
+    "title": "Sizes"
+  },
+  "status": {
+    "about": "Every status in the subtle look. The status sets the palette only, and the title states the severity in words.",
+    "title": "Statuses"
+  },
+  "title": "Alert",
+  "variant": {
+    "about": "Every look in the error status. The close trigger takes the alert's ink, so it takes the contrast ink on the solid look.",
+    "title": "Looks"
+  }
+}

package/locales/en/specimen/empty-state.json

@@ -0,0 +1,10 @@
+{
+  "about": "The panel a surface renders when it has no content: a mark, a heading and a sentence about what to do next.",
+  "description": "Send your first one to get started.",
+  "none": "No invoices yet",
+  "size": {
+    "about": "Every size. The size sets the panel's inset, the gap, the mark and the title. The description stays at the small body size.",
+    "title": "Sizes"
+  },
+  "title": "Empty state"
+}

package/locales/en/specimen/loader.json

@@ -0,0 +1,30 @@
+{
+  "about": "Shows that something is loading, beside words or over the content it replaces. Over content, the loader hides it and keeps its box, so the layout does not shift when the content returns.",
+  "button": {
+    "about": "A button loaded and loading. The label is hidden and keeps its width, so the button does not resize when the save starts or ends.",
+    "title": "In a button"
+  },
+  "ledger": "Matched against the ledger, then written back.",
+  "lines": "Four hundred lines",
+  "matching": "Matching",
+  "palette": {
+    "about": "The spinner in each semantic palette's solid color. Without a palette the spinner takes the ink of the surrounding text.",
+    "title": "Palettes"
+  },
+  "placement": {
+    "about": "The spinner before or after its words. Both stay on one line in any container.",
+    "title": "Placement"
+  },
+  "save": "Save changes",
+  "saving": "Saving changes",
+  "scrim": {
+    "about": "The overlay's fill over a card that is loading. `veil` keeps the content visible behind the spinner, `glass` blurs it, and `none` leaves it unchanged.",
+    "title": "Scrims"
+  },
+  "settled": "£17,500.40 settled",
+  "title": "Loader",
+  "value": {
+    "about": "A value loaded and loading. The spinner is centred over the hidden value, and screen readers read the label `Loading` in its place.",
+    "title": "Over a value"
+  }
+}

package/locales/en/specimen/meter.json

@@ -0,0 +1,81 @@
+{
+  "about": "Shows a measurement within a known range: storage used, seats taken, a password's strength. The track is the meter a screen reader reports, named by the label. A meter has a value and moves only when its caller measures again, which is what sets it apart from a progress bar. Every part but the root is the progress bar's.",
+  "capacity": {
+    "about": "A disk's used space split into its parts. `Meter.Segment` fills the track once per part, in the order the parts render, each as wide as its share of the disk's size, and the rest of the track is the free space. Each part takes the theme's series color at its place, the colors a chart gives its series, so neighbouring parts differ in every theme. A key of the data package's `ColorSwatch` names each color with its amount. The meter's value is the used space, the parts' sum.",
+    "apps": "Apps {{value, number}} GB",
+    "label": "Storage",
+    "other": "Other {{value, number}} GB",
+    "photos": "Photos {{value, number}} GB",
+    "system": "System {{value, number}} GB",
+    "title": "Parts of a capacity",
+    "value": "{{used, number}} of {{size, number}} GB"
+  },
+  "layout": {
+    "about": "Stacked puts the label and the value above the track. Inline puts them on the track's row, and the track takes the room the words leave.",
+    "title": "Layouts"
+  },
+  "limits": {
+    "about": "A plan's usage. Each meter's palette comes from the caller's own threshold, warning from 75% and error from 90%, because a meter has no judgement of its own: 90% is good news for a download and bad news for a disk. The words state the count, and `aria-valuetext` on the track states it too.",
+    "title": "Usage against limits"
+  },
+  "palette": {
+    "about": "Every palette in both looks. The outline look lays the range on a muted ground with an inset line, and the subtle look on the palette's muted role.",
+    "title": "Palettes and looks"
+  },
+  "shape": {
+    "about": "The ends of the track, which the range takes too: square, rounded or full, on the thickest track.",
+    "title": "Shapes"
+  },
+  "shares": {
+    "about": "A whole split into shares: the accounts on each plan. `max` is the total, so the segments fill the track. `aria-valuetext` on the track lists the shares through `Intl.ListFormat`, because a meter at 100% tells a screen reader nothing about the split.",
+    "growth": "Growth {{share}}",
+    "label": "Accounts by plan",
+    "scale": "Scale {{share}}",
+    "starter": "Starter {{share}}",
+    "title": "Shares of a whole",
+    "value_one": "{{count, number}} account",
+    "value_other": "{{count, number}} accounts"
+  },
+  "size": {
+    "about": "The size is the thickness of the track: 4, 6, 8, 12 and 16px. The label and the value keep the label style at every size.",
+    "title": "Sizes"
+  },
+  "storage": "Storage used",
+  "strength": {
+    "fair": "Fair",
+    "good": "Good",
+    "label": "Password strength",
+    "none": "Too short",
+    "password": "New password",
+    "strong": "Strong",
+    "weak": "Weak"
+  },
+  "target": {
+    "about": "Measures against their targets. `Meter.Marker` crosses the track at the target, and `max` is the larger of the target and the value, so a measure past its target fills the track and still reads as more than the target. The palette is the caller's judgement: deals past their target take success, and spend past 90% of its budget takes warning. The words state both numbers, and `aria-valuetext` on the track states them too, because the marker is hidden from a screen reader.",
+    "deals": "Deals closed this quarter",
+    "spend": "Cloud spend this month, €",
+    "spoken": "{{value, number}}, target {{target, number}}",
+    "title": "Against a target",
+    "trials": "Trials started this month",
+    "value": "{{value, number}} / {{target, number}}"
+  },
+  "title": "Meter",
+  "usage": {
+    "requests": {
+      "label": "API requests this month",
+      "value": "{{value, number}} of {{max, number}}"
+    },
+    "seats": {
+      "label": "Seats",
+      "value": "{{value, number}} of {{max, number}}"
+    },
+    "storage": {
+      "label": "Storage",
+      "value": "{{value, number}} of {{max, number}} GB"
+    }
+  },
+  "words": {
+    "about": "A password's strength from 0 to 4 as the reader types. The words are the value text and the track's `aria-valuetext`, so a screen reader hears Strong rather than 100%, and the palette follows the score.",
+    "title": "A value in words"
+  }
+}

package/locales/en/specimen/progress-circle.json

@@ -0,0 +1,41 @@
+{
+  "about": "Reports how far a task has come as a ring, with the value in its middle. The ring is the progress bar a screen reader reports, and the label names it. For a value the machine does not know, a quarter arc turns.",
+  "checklist": "Workspace set-up",
+  "counted": {
+    "about": "`max` counts the steps. The ring's middle shows `3/5` as children of the value text, and `aria-valuetext` on the ring states the count in words.",
+    "title": "Counting steps"
+  },
+  "layout": {
+    "about": "Stacked puts the label under the ring. Inline puts it beside the ring, as in a list row.",
+    "title": "Layouts"
+  },
+  "palette": {
+    "about": "The scene crosses every palette with both looks. The outline look strokes the track in the muted ground, and the subtle look in the palette's muted role.",
+    "title": "Palettes and looks"
+  },
+  "quota": {
+    "label": "Storage used",
+    "used": "{{used}} of {{total}} GB"
+  },
+  "shape": {
+    "about": "`shape` rounds or squares the ends of the range. The scene shows both on the thickest ring.",
+    "title": "Shapes"
+  },
+  "size": {
+    "about": "The ring is 24, 32, 40, 48 and 64px wide and 4, 4, 4, 6 and 8px thick. From `md` up the value shows in the ring's middle, in the largest text style whose \"100%\" fits inside the ring. The smaller rings hide it. The ring's `aria-valuetext` states the value at every size.",
+    "title": "Sizes"
+  },
+  "steps_one": "{{count}} of {{total}} step done",
+  "steps_other": "{{count}} of {{total}} steps done",
+  "syncing": "Syncing mail",
+  "title": "Progress circle",
+  "unknown": {
+    "about": "A `null` value means the end is not known. A quarter arc turns once every 1.2 seconds, and the ring leaves out `aria-valuenow`. For a reader who asked for less motion, the ring stops and the range is a dashed line around the whole ring.",
+    "title": "Value unknown"
+  },
+  "units": {
+    "about": "`max` sets the range in gigabytes. The middle shows the share, and `aria-valuetext` states the amount used.",
+    "title": "Counting in its own units"
+  },
+  "upload": "Uploading the report"
+}

package/locales/en/specimen/progress.json

@@ -0,0 +1,66 @@
+{
+  "about": "Reports how far a task has come. The track is the progress bar a screen reader reports, named by the label, and for a value the machine does not know a segment crosses the track.",
+  "animated": {
+    "about": "The stripes move at 40px a second while the work runs, so a value that updates slowly still reads as work in progress. They stop moving for a reader who asked for less motion.",
+    "title": "Moving stripes"
+  },
+  "bare": {
+    "about": "A bar without a label is named by `aria-label` on the track, as in a player's position under its controls. `aria-valuetext` states the position in minutes.",
+    "title": "Without words"
+  },
+  "effect": {
+    "about": "A halo around the range in the palette's solid. `pulse` animates it and stops for a reader who asked for less motion.",
+    "title": "Effects"
+  },
+  "imported": "Rows imported",
+  "layout": {
+    "about": "Stacked puts the label and the value above the track. Inline puts them on the track's row, the shape a bar takes in a table row or at the foot of a card, and the track takes the room the words leave.",
+    "title": "Layouts"
+  },
+  "outcomes": {
+    "about": "A test run split by outcome while it runs. `Progress.Segment` fills the track with the passed, failed and skipped tests, each in the palette its `color` states, and the rest of the track is the tests still to run. The value is the tests run so far, the segments' sum, and a key of the data package's `Status` names each palette with its count.",
+    "failed": "{{count, number}} failed",
+    "label": "Test run",
+    "passed": "{{count, number}} passed",
+    "skipped": "{{count, number}} skipped",
+    "title": "Outcomes while it runs",
+    "value": "{{run, number}} of {{tests, number}}"
+  },
+  "palette": {
+    "about": "Every palette in both looks. The outline look lays the range on a muted ground with an inset line, and the subtle look on the palette's muted role. A palette has no meaning of its own, so the label has to agree with it.",
+    "title": "Palettes and looks"
+  },
+  "plan": {
+    "about": "A migration against the share its plan expects by today. `Progress.Marker` crosses the track at the planned share, and the bar takes the warning palette while it is behind. The words and `aria-valuetext` state both shares, because the marker is hidden from a screen reader.",
+    "label": "Migrating customer records",
+    "spoken": "{{done}}% done, {{planned}}% planned by today",
+    "title": "Against a plan",
+    "value": "{{done}}%, plan {{planned}}%"
+  },
+  "playback": "Playback position",
+  "played": "2:41 of 4:05",
+  "preparing": "Preparing the export",
+  "reconciling": "Reconciling payouts",
+  "rows": "2,650 of 4,200",
+  "shape": {
+    "about": "The ends of the track, which the range takes too: square, rounded or full, on the thickest track.",
+    "title": "Shapes"
+  },
+  "size": {
+    "about": "The size is the thickness of the track: 4, 6, 8, 12 and 16px. The label and the value keep the label style at every size, so a thin bar under its words still reads as one thing.",
+    "title": "Sizes"
+  },
+  "striped": {
+    "about": "Stripes over the range in the palette's contrast ink at a quarter strength.",
+    "title": "Stripes"
+  },
+  "title": "Progress",
+  "unknown": {
+    "about": "A `null` value means the end is not known. A segment crosses the track once every 1.2 seconds and the value text is empty, so the bar never claims a share it does not know. For a reader who asked for less motion the segment spreads over the whole track and stops. The track reports no `aria-valuenow`.",
+    "title": "Value unknown"
+  },
+  "units": {
+    "about": "`min` and `max` set the range in the units the work is measured in. The words over the bar and `aria-valuetext` on the track state the count, because the bar itself reports a share.",
+    "title": "Counting in its own units"
+  }
+}

package/locales/en/specimen/skeleton-text.json

@@ -0,0 +1,12 @@
+{
+  "about": "A placeholder paragraph with one bar per line and a shorter last bar.",
+  "lines": {
+    "about": "One, three and six lines. Each bar is one line height tall, and the bars are half a line height apart.",
+    "title": "Lines"
+  },
+  "motion": {
+    "about": "Every motion of the skeleton recipe, applied to each bar.",
+    "title": "Motion"
+  },
+  "title": "Skeleton text"
+}

package/locales/en/specimen/skeleton.json

@@ -0,0 +1,18 @@
+{
+  "about": "A placeholder over content that is still loading, at the size of the content it wraps.",
+  "loading": {
+    "about": "The loaded card and the placeholder over it. Wrap the content in the skeleton instead of replacing it, so the layout does not shift when the content arrives.",
+    "title": "Loading"
+  },
+  "motion": {
+    "about": "Every motion: none, pulse and shimmer. The theme stops both animations under reduced motion.",
+    "title": "Motion"
+  },
+  "name": "Ada Lovelace",
+  "radius": {
+    "about": "Every corner of the placeholder.",
+    "title": "Corners"
+  },
+  "role": "Analyst",
+  "title": "Skeleton"
+}

package/locales/en/specimen/spinner.json

@@ -0,0 +1,33 @@
+{
+  "about": "Shows that work is running when there is no progress to report. Where the work reports how far along it is, show a progress indicator instead. The spinner has no role and no text, so write the words the wait needs beside it and set `aria-busy` on the region that is waiting.",
+  "button": {
+    "about": "A spinner at `inherit` in a disabled button, in three looks. With the palette at `current`, the arc takes the button's label ink in each one.",
+    "title": "In a button"
+  },
+  "effect": {
+    "about": "A halo in the palette's solid at half opacity: `glow` holds still and `pulse` breathes. Both stop moving when the reader prefers reduced motion.",
+    "title": "Effects"
+  },
+  "inline": {
+    "about": "At `inherit` the spinner is as tall as the text it sits in, so the line keeps its height at every text size.",
+    "title": "In a line of text"
+  },
+  "palette": {
+    "about": "The arc in each semantic palette's solid color. The theme engine keeps every solid at 3:1 or more against the page. `current` takes the ink of the surrounding text.",
+    "title": "Palettes"
+  },
+  "saving": "Saving",
+  "size": {
+    "about": "Every step of the icon scale, and `inherit`, which takes the height of the surrounding text.",
+    "title": "Sizes"
+  },
+  "stroke": {
+    "about": "The theme's three stroke widths, and `heavy` for a thicker ring. The stroke is a border width, so it keeps its weight at every size.",
+    "title": "Strokes"
+  },
+  "title": "Spinner",
+  "track": {
+    "about": "The ring behind the arc, in the palette's muted color.",
+    "title": "Track"
+  }
+}

package/locales/en/specimen/toast.json

@@ -0,0 +1,79 @@
+{
+  "about": "Raises a short message into a region fixed to an edge of the window, and removes it after its duration. A pointer resting on the region, or focus inside it, pauses every toast, and Alt+T moves focus to the region. A screen reader hears each new toast through the region's polite live region. A toast that is missed is gone, so nothing a reader needs is only in one.",
+  "dismiss": "Dismiss",
+  "kinds": {
+    "about": "The five types. The type sets the toast's palette, which the indicator reads, and its duration: 2 seconds for `success`, 5 for the others, and no timer for `loading`.",
+    "error": {
+      "description": "The bank could not verify the account.",
+      "show": "Error",
+      "title": "Payout held"
+    },
+    "info": {
+      "description": "ledger-2026-09.csv is in your downloads.",
+      "show": "Info",
+      "title": "Export ready"
+    },
+    "loading": {
+      "description": "Matching 400 lines against the bank.",
+      "show": "Loading",
+      "title": "Reconciling"
+    },
+    "success": {
+      "description": "€1,240.00 is on its way to NL91 ABNA 0417 1643 00.",
+      "show": "Success",
+      "title": "Payout sent"
+    },
+    "title": "Kinds",
+    "warning": {
+      "description": "The card ending in 4242 expires this month.",
+      "show": "Warning",
+      "title": "Card expiring"
+    }
+  },
+  "promise": {
+    "about": "`promise` raises one loading toast and rewrites it as the work settles: the success in its place, or the error. The first trigger settles after 2 seconds, the second fails after 2 seconds.",
+    "error": "Export failed",
+    "failed": "Nothing was written.",
+    "fails": "Export, failing",
+    "file": "ledger-2026-09.csv",
+    "lines": "400 lines",
+    "loading": "Exporting the ledger",
+    "succeeds": "Export, settling",
+    "success": "Exported",
+    "title": "Promise"
+  },
+  "queue": {
+    "about": "The toaster shows 5 toasts at a time and queues the rest. The trigger raises 8 at once: 5 show, and the others arrive as those close.",
+    "description": "Line {{line}} could not be matched.",
+    "heading": "Line not matched",
+    "show": "Report 8 failures",
+    "title": "Queue"
+  },
+  "region": {
+    "about": "The region an application renders once, at its root, for one toaster. Its render function returns each toast's parts: the indicator's glyph by type, the title, the description, the action and the close button. A trigger anywhere in the application raises into the same toaster.",
+    "description": "Your changes to the payout schedule are saved.",
+    "heading": "Schedule saved",
+    "show": "Show a toast",
+    "title": "Region"
+  },
+  "sync": {
+    "about": "A toast raised with an id is rewritten in place through `update`. The report starts as a loading toast, changes its description after 1.5 seconds and turns into a success after 3.",
+    "done": "400 of 400 lines matched.",
+    "halfway": "200 of 400 lines matched.",
+    "heading": "Reconciling",
+    "matched": "Reconciled",
+    "show": "Reconcile the ledger",
+    "started": "Matching 400 lines.",
+    "title": "Updated in place"
+  },
+  "title": "Toast",
+  "undo": {
+    "about": "A toast with an action. A press on Undo runs the action, then dismisses the toast. The toast closes after 10 seconds, which gives a reader time to reach the button.",
+    "action": "Undo",
+    "description": "PO-2026-0731 is no longer scheduled.",
+    "heading": "Payout removed",
+    "restored": "Payout restored",
+    "show": "Remove the payout",
+    "title": "Action"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-feedback",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Draws the system reporting on itself: what is loading, what went wrong, what state a thing is in.",
   "keywords": [
     "components",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -43,16 +44,16 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/component-actions": "^0.2.1",
-    "@stealthscale/component-layout": "^0.2.1",
-    "@stealthscale/component-surfaces": "^0.1.1",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/component-layout": "^0.2.2",
+    "@stealthscale/component-surfaces": "^0.1.2",
     "@stealthscale/hooks": "^0.3.0",
     "@stealthscale/theme": "^0.5.0",
     "@stealthscale/vite-config": "^0.8.0",
-    "@stealthscale/vite-config-i18n": "^0.2.1",
+    "@stealthscale/vite-config-i18n": "^0.2.2",
     "@stealthscale/vite-config-react": "^0.9.1",
-    "@stealthscale/vite-config-specimen": "^0.2.1",
-    "@stealthscale/vite-config-theme": "^0.2.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/react": "^19.3",