@salemcobalt/ui 0.2.0-rc.30 → 0.2.0-rc.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +2 -2
  2. package/dist/index.d.ts +5 -2
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles.css +25 -1
  5. package/package.json +3 -3
package/README.md CHANGED
@@ -21,7 +21,7 @@ import {
21
21
  } from '@salemcobalt/ui';
22
22
  ```
23
23
 
24
- Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS always wins. Every value in it is a token custom property; theme with `data-theme="light|dark"` on `<html>` and density with `data-density="compact"` on any ancestor. Interactive behaviour (Dialog, Tooltip and Menu focus and keyboard handling, `render` composition) comes from Base UI; see `docs/adr/0001-headless-primitives.md`.
24
+ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS always wins. Every value in it is a token custom property; theme with `data-theme="light|dark"` on `<html>` and density with `data-density="compact"` on any ancestor. Controls on an accent fill: give the filled element the `sc-on-accent` class (the accent Toast has it built in); it repoints text, strong border, focus and hover/pressed tokens so secondary and ghost Buttons, IconButtons and muted text inside read on the fill (AA in both themes). Interactive behaviour (Dialog, Tooltip and Menu focus and keyboard handling, `render` composition) comes from Base UI; see `docs/adr/0001-headless-primitives.md`.
25
25
 
26
26
  | Component | Notes |
27
27
  | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -51,7 +51,7 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
51
51
  | `Menu` | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, decorative; `description`, a muted second line that is the item's accessible description, not part of its name; `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`, and the same `icon` and `description`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI. |
52
52
  | `Table` selection | `useRowSelection(ids)` (ids in visible order; ids that disappear leave the selection): `selected`, `selectedIds`, `count`, `anchor`, `headerState` none · some · all, `isSelected`, `toggle`, `toggleRange`, `selectAll`, `clear`; a pure reducer underneath (`selection.*` events). `Table.Root selection` + `Table.SelectionHeader` (`label`, mixed when some) + `Table.SelectionCell label="Select …"` in a `Table.Row selectionId`. Shift+click (checkbox or row) and Shift+Space extend from the anchor; Cmd/Ctrl+click on a row toggles without reaching its `onClick`; Cmd/Ctrl+A in the table selects all, Esc clears. |
53
53
  | `SelectionBar` | Floating bulk-action bar on Toolbar, centred at the bottom of the viewport (content width up to 48rem, gutters and the safe area respected, full width between the gutters under 640px, fade and slide-up, none under reduced motion): `count` (hidden at 0), `onClear`, children are `Toolbar.Button`s, `aria-label` ("Bulk actions"), `countLabel`, `clearLabel`. Mount it at the end of the scrolling content: while open it leaves a spacer as tall as itself so the last rows scroll clear. A polite status region announces the count; focus returns to where it came from when the bar leaves. |
54
- | `Toast` | `Toast.Provider` (`timeout` 6000, `limit` 3) near the root (one viewport: a Provider inside another adds nothing), `useToast().add({ title, description, tone, action: { label, onClick, keepOpen }, timeout, priority, id, dismissLabel, onClose })` below it (`timeout: 0` stays; the same `id` updates in place; `dismissLabel` makes the × a text button such as Later); Base UI Toast: polite region, paused on hover and focus, F6 to reach it, bottom-end at `--sc-z-toast`, above an open `SelectionBar` or any fixed bar with `anchor-name: --sc-bottom-bar`; `--sc-toast-offset-block-end` raises it further (for a sticky bar). |
54
+ | `Toast` | `Toast.Provider` (`timeout` 6000, `limit` 3) near the root (one viewport: a Provider inside another adds nothing), `useToast().add({ title, description, tone, action: { label, onClick, keepOpen }, timeout, priority, id, dismissLabel, onClose })` below it (`tone` `neutral`, `success` or `danger` colours the edge; `accent` fills it, for the one notice that must be seen, such as an app update; `timeout: 0` stays; the same `id` updates in place; `dismissLabel` makes the × a text button such as Later); Base UI Toast: polite region, paused on hover and focus, F6 to reach it, bottom-end at `--sc-z-toast`, above an open `SelectionBar` or any fixed bar with `anchor-name: --sc-bottom-bar`; `--sc-toast-offset-block-end` raises it further (for a sticky bar). |
55
55
  | `PriorityNav` | Priority+ primary navigation (docs/adr/0005): required `aria-label`; `items` as `{ href, label, id?, current?, badge?, badgeLabel? }` in priority order; links that fit stay inline and the rest go into a "More" disclosure (APG disclosure navigation: a `button` with `aria-expanded`, not a menu; Esc, click outside and focus leaving close it). The `current` link is never collapsed. `moreLabel`, `moreCountLabel(n)` (announced only: "More, 3 links"), `renderLink={(props) => <Link {...props} />}` for a router. Server-renders every link on one clipped line (scrolls sideways without JS), measures widths once (again after web fonts load or when keys/string labels change) and re-renders only when the inline count changes. Takes the free space in a flex row (`flex: 1 1 0%`); in a grid use a `minmax(0, 1fr)` track. The open panel sits in the top layer (Popover API), anchored to the toggle with CSS anchor positioning (a JS fallback elsewhere) and capped to the viewport. `data-overflowing` + `onOverflowChange(boolean)` let a header make room, with `overflowHysteresis` (px) so it cannot oscillate. Under 400px wide (container query) More shows only an ellipsis. `badge` (a count, or `'dot'`; `0` shows nothing) draws an accent pill or dot after the label, decorative, with `badgeLabel` ("2 suggestions to review") appended to the link's name; while the item is collapsed, More shows the collapsed items' summed count (a dot when they only have dots) and adds their `badgeLabel`s to its name ("More, 3 links, 2 suggestions to review"). Icon-only, the badge sits on More's corner. No motion. |
56
56
  | `Popover` | Non-modal panel on Base UI Popover: `Root` (`open`, `defaultOpen`, `onOpenChange`, `modal` default false), `Trigger` (secondary Button, or `render={<IconButton label dot />}`), `Content` (`side`, `align`, `sideOffset`, `arrow`, `anchor` to position against another element than the Trigger, e.g. a row's action button with a controlled `Root`; portaled to `document.body`; Menu's surface, `--sc-z-dropdown`, dropping to the backdrop layer while a Dialog opened from inside it is open, so the Dialog covers it), `Title` (names the dialog), `Description`, `Close` (the × with no children, or wraps a Button). Esc and focus return come from Base UI. |
57
57
  | `BroomIcon` | Animated 24px-grid icon for "a sweep is running": `sweeping`, `size` (Icon sizes, default `lg`, or `display` 72px with a 1.75px stroke), `title`. Inline SVG; strokes stay 1.25px at any size; holds still with the dust shown under `prefers-reduced-motion`. Inside an IconButton it takes the next icon size up. |
package/dist/index.d.ts CHANGED
@@ -1863,12 +1863,15 @@ interface SelectionBarProps {
1863
1863
  */
1864
1864
  declare function SelectionBar({ count, onClear, children, 'aria-label': ariaLabel, countLabel, clearLabel, clearedMessage, className, }: SelectionBarProps): react.JSX.Element;
1865
1865
 
1866
- type ToastTone = 'neutral' | 'success' | 'danger';
1866
+ type ToastTone = 'neutral' | 'success' | 'danger' | 'accent';
1867
1867
  interface ToastOptions {
1868
1868
  /** Required. One line: "Closed 5 applications". */
1869
1869
  title: ReactNode;
1870
1870
  description?: ReactNode | undefined;
1871
- /** A coloured edge. Default `neutral`. */
1871
+ /**
1872
+ * `neutral` (default), `success` and `danger` colour the edge. `accent` fills the toast with the accent colour, for
1873
+ * the rare notice that has to be seen (the app was updated); its buttons read on the fill (`.sc-on-accent`).
1874
+ */
1872
1875
  tone?: ToastTone | undefined;
1873
1876
  /**
1874
1877
  * One action, usually Undo. It closes the toast after `onClick`, unless `keepOpen` (the action asks first, and the