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

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 (3) hide show
  1. package/README.md +1 -1
  2. package/dist/styles.css +6 -4
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -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 bar with `anchor-name: --sc-bottom-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 (`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/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @salemcobalt/ui 0.2.0-rc.29 — requires @salemcobalt/tokens/css. */
1
+ /* @salemcobalt/ui 0.2.0-rc.30 — requires @salemcobalt/tokens/css. */
2
2
  @layer sc {
3
3
  /* ---- base.css ---- */
4
4
  /* Shared: focus ring, reduced motion. Component files follow. */
@@ -3069,11 +3069,13 @@
3069
3069
 
3070
3070
  /* ---- toast.css ---- */
3071
3071
  /* ---- Toast ----------------------------------------------------------------- */
3072
- /* Bottom-end, clear of a bar fixed along the bottom: an open SelectionBar, or any bar of the app's that sets
3073
- `anchor-name: --sc-bottom-bar`. Without one, the gutter. Phones use the md gutter on both sides. */
3072
+ /* Bottom-end, clear of a bar fixed along the bottom: an open SelectionBar, or any `position: fixed` bar of the app's
3073
+ that sets `anchor-name: --sc-bottom-bar`. Without one, the gutter. Phones use the md gutter on both sides.
3074
+ A sticky bar can't be an anchor (anchor() reads where it would be unstuck); while one shows, the app raises the
3075
+ toasts by setting `--sc-toast-offset-block-end` (on :root, for example) to the room it needs. */
3074
3076
  .sc-toast-viewport {
3075
3077
  --_gutter: var(--sc-spacing-lg);
3076
- --_bottom: calc(var(--_gutter) + env(safe-area-inset-bottom, 0px));
3078
+ --_bottom: calc(var(--_gutter) + var(--sc-toast-offset-block-end, 0px) + env(safe-area-inset-bottom, 0px));
3077
3079
  position: fixed;
3078
3080
  inset-block-end: var(--_bottom);
3079
3081
  inset-inline-end: var(--_gutter);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salemcobalt/ui",
3
- "version": "0.2.0-rc.29",
3
+ "version": "0.2.0-rc.30",
4
4
  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, FullScreenFlow, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton, Score, ReasonList, WordDiff, Quote; TextEditor (CodeMirror 6, inline word diffs) at @salemcobalt/ui/editor.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -46,7 +46,7 @@
46
46
  "diff": "^8.0.4",
47
47
  "react": "^19.0.0",
48
48
  "react-dom": "^19.0.0",
49
- "@salemcobalt/tokens": "^0.2.0-rc.29"
49
+ "@salemcobalt/tokens": "^0.2.0-rc.30"
50
50
  },
51
51
  "peerDependenciesMeta": {
52
52
  "@codemirror/commands": {
@@ -109,7 +109,7 @@
109
109
  "tsup": "^9.0.0",
110
110
  "typescript": "^5.9.3",
111
111
  "vitest": "^5.0.5",
112
- "@salemcobalt/tokens": "^0.2.0-rc.29"
112
+ "@salemcobalt/tokens": "^0.2.0-rc.30"
113
113
  },
114
114
  "publishConfig": {
115
115
  "access": "public"