@signal9/era-ui 30.8.0 → 32.0.0

package/dist/generated-docs/button.md

@@ -14,14 +14,47 @@ Inherits all props from `Button.RootProps`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | — |
+| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning' \| 'info'` | `'default'` | — |
 | `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | — |
 | `variant?` | `'filled' \| 'link'` | `'filled'` | — |
 | `active?` | `boolean` | `false` | — |
 | `icon?` | `boolean` | `false` | — |
-| `loading?` | `boolean` | `false` | When true, disables the button, sets `aria-busy`, and prepends a
-spinner. The existing label stays rendered so focus, click targets,
-and screen-reader accessible names don't change shape mid-flight. |
+| `loading?` | `boolean` | `false` | In flight: disables the button, sets `aria-busy`, and puts a spinner
+over the label.
+THE GEOMETRY DOES NOT MOVE. That is the requirement, not a detail. A
+button is loading because it was just CLICKED, so anything `loading`
+changes about the box moves the page under the pointer that is still
+on it — and a spinner PREPENDED to the label (what this used to do)
+costs an icon's width plus a gap, measured on a wrapping header row
+that reflowed everything beside it. A consumer hit exactly that and
+stopped using the prop, hand-rolling `disabled` + `aria-busy`
+instead, which is the report that produced this note.
+So the spinner is absolutely positioned and takes no part in the
+flex layout, and the label goes to `opacity-0` rather than being
+unmounted: the box that holds the width stays, and the text stays in
+the accessibility tree as the button's accessible name.
+The visible label is therefore HIDDEN in flight — the one thing this
+trades away, and the reason `loadingLabel` exists.
+IF YOU DO NOT WANT A SPINNER, use `busy`. Not showing one is a
+supported posture, not a legacy one — see that prop. |
+| `busy?` | `boolean` | `false` | In flight, WITHOUT a spinner: disables the button and sets `aria-busy`,
+and changes nothing else. The label stays visible and legible.
+This exists because "show a spinner" is a taste, not a requirement,
+and era had only one answer. A consumer whose house style is that
+spinners should not appear had to spell the posture out themselves —
+`disabled` plus a restated `aria-busy` — and rely on knowing that
+`restProps` spreads last, which is a real fact about this component
+that no reader should have to depend on. Two words for two postures
+is clearer than one word plus a workaround.
+`loading` implies this: it is `busy` plus the spinner and the hidden
+label. What you get from `busy` alone is a control that is visibly
+disabled (the era-interactive opacity) and announced as busy, with
+its geometry and its ink untouched — which is also why it needs no
+`loadingLabel`: nothing about the button changed except that you
+cannot press it.
+Reported by a consumer whose user asked for no spinners anywhere.
+They were right that a fix for the width shift did not answer it: a
+spinner that no longer moves its neighbours is still a spinner. |
 | `loadingLabel?` | `string` | — | Screen-reader-only label announced while `loading` is true. |
 | `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
 an icon in `children`: the label then gets its own box, which is the only
@@ -59,6 +92,7 @@ snippet's text cannot be read before it renders.
 Only reaches the label when `lead`/`trail` give it its own box. Without
 one the label is an anonymous flex item that no selector can address,
 which is the whole reason those snippets exist. |
+| `topology?` | `'bounded' \| 'docked'` | `'bounded'` | `docked` joins this control to a neighbour and removes one or more curves. |
 | `children?` | `Snippet` | — | — |
 | `ref?` | `(forwarded)` | `null` | bindable |
 

package/dist/generated-docs/card.md

@@ -18,11 +18,41 @@ Inherits all props from `ButtonBits`.
 |------|------|---------|-------|
 | `ref?` | `CardElement \| null` | `null` | bindable |
 | `tone?` | `'elevated' \| 'surface' \| 'well' \| 'flat'` | `'elevated'` | Surface tier the card paints on.
-- `elevated` (default): the lifted surface. Use on the page background.
-- `surface`: the base surface tier. Use when nesting cards inside another elevated container.
-- `well`: recessed. For content the surrounding UI puts INTO the card — a tool's
-  output pane, a transcript body — the container twin of a text field's fill.
-- `flat`: no background; only the rounded/padded shell. For grouping content visually without adding contrast. |
+- `elevated` (default): the lifted surface, with a resting shadow. Use
+  on the page background.
+- `surface`: the base surface tier, no shadow. Use when nesting cards
+  inside another elevated container.
+- `well`: recessed. For content the surrounding UI puts INTO the card —
+  a tool's output pane, a transcript body — the container twin of a
+  text field's fill.
+- `flat`: no background; only the rounded/padded shell. For grouping
+  content visually without adding contrast.
+READ THE CLASSES AND THEY LOOK SWAPPED. They are not, and this is
+worth a sentence because a consumer read them, believed it, and
+shipped flat cards for months. `surface` paints `bg-well` and `well`
+paints `bg-field`, because era's utility names describe FILLS rather
+than tiers: `bg-well` is the surface's own resting fill (it is what a
+panel is painted with, and it pairs with `shadow-well` when you want
+recessed chrome), and `bg-field` is the recessed fill a text input
+sits in. The tone names are the tiers; the class names are the paints.
+A CARD THAT IS PRESSABLE SHOULD USUALLY BE `elevated`. Passing `href`
+or `onclick` turns on the interactive face — hover, focus, press — but
+it deliberately does NOT override the tier you asked for, so a
+`surface` link card does not get the raised tier's separation and can
+read flatter than the static cards around it. That combination was
+reported as a bug and it is a choice: a tone that silently changed
+under an event handler would be a worse one.
+HOW THE TIERS DIFFER IS SURFACE-DEPENDENT, so do not go looking for a
+fill difference on every surface. `base` mixes the elevated fill 6%
+toward `--color-bright` and adds a resting shadow, so there the tiers
+differ in COLOUR. `bevel` sets `--era-surface-bg-elevated` to
+`--era-surface-bg` outright — elevation is a chisel, not a tone, which
+is bevel's whole premise — so `surface` and `elevated` paint the
+IDENTICAL fill there and differ only in relief. A consumer measured
+exactly that on 30.8.0 bevel: both tones `oklch(0.195 0 none)` in dark,
+`0.863` in light, one variable, side by side. `glass` splits the tiers
+its own way again. So the tier is real on every surface; the thing
+carrying it is not always the fill. |
 | `header?` | `Snippet` | — | Rendered above the body with a subtle divider. |
 | `footer?` | `Snippet` | — | Rendered below the body with a subtle divider. |
 | `children?` | `Snippet` | — | — |

package/dist/generated-docs/chip.md

@@ -18,6 +18,22 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | `size?` | `'chip' \| 'pill'` | `'chip'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
+| `dismissAs?` | `'button' \| 'span'` | `'button'` | What the dismiss control RENDERS AS. `button` (the default) is right
+for a free-standing chip. Use `span` when the chip lives inside
+another control.
+A <button> inside a <button> is not merely bad manners: it is invalid,
+and the HTML parser repairs it by CLOSING the outer control before the
+inner one. So the server's markup and the client's DOM disagree, Svelte
+discards the page's hydration and re-renders from scratch, and the
+chips briefly sit outside the trigger they belong to. era's own
+multi-select shipped exactly that (a Chip with `ondismiss` inside
+Select.Trigger) and logged node_invalid_placement_ssr on every load.
+`span` also drops the control from the accessibility tree rather than
+announcing a button inside a button — which is the honest description
+of what it is there: a pointer shortcut. The accessible way to remove
+a selection is the listbox itself, which is unaffected. Keyboard focus
+order is unchanged, because a nested button was never reachable in a
+sensible order anyway. |
 | `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
 an icon in `children`: the label then gets its own box, which is the only
 place era's ink centring can reach. |