@usememos/ui 26.11.13 → 26.11.14

package/llms-full.txt

@@ -645,8 +645,8 @@ The short version. [Using the components](../usage.md) has the full decision gui
 | One of a short list | Select |
 | One of a long list, or typing to find | Combobox |
 | On/off in a toolbar, or stacking filters | Toggle, or ToggleGroup with `multiple` |
-| One of several views or filters on the same page | ToggleGroup without `multiple` |
-| Sections of a page | Tabs |
+| A layout preference or filter of the same content | ToggleGroup without `multiple` |
+| Content sections of a page, with one panel per choice | Tabs |
 | A list of actions for one thing | Menu |
 | A few controls that belong to one thing | Popover |
 | A decision that blocks the page | Dialog |
@@ -770,7 +770,7 @@ Wraps Base UI's [Toggle](https://base-ui.com/react/components/toggle): `pressed`
 
 # ToggleGroup
 
-A row of related [Toggles](toggle.md). With `multiple`: a toolbar of independent on/off toggles. Without: one choice among peers, the same control as [Tabs](tabs.md) without a panel.
+A row of related [Toggles](toggle.md) that changes values or tool states. Without `multiple`, it chooses one layout or filter; with `multiple`, it groups independent on/off tools. Use [Tabs](tabs.md) when each choice activates a corresponding content panel.
 
 ## Example
 
@@ -815,7 +815,9 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange`, `multipl
 
 - Give the group an `aria-label`.
 - A single choice among peers is a flat selected fill in a well; an on/off state is a pressed toggle. Never mix the two in one row.
-- Without `multiple`: filters and view switches that don't change the whole page. For sections of a page, use Tabs.
+- Without `multiple`: filters and layout preferences for the same content, such as All / Pinned / Archived or List / 2 / 3 / Auto. Saving the preference does not turn it into a tab; the choice still changes a value rather than activating a content panel.
+- With `multiple`: independent tools or filters that can be active together, such as Bold and Italic. Tabs always chooses one content panel and does not replace this behavior.
+- Single-choice ToggleGroups and Tabs reuse the same segmented treatment. Keep the behavior APIs separate; do not add a `multiple` mode to Tabs or fake panels for settings.
 - When long translated options would need several lines in a narrow panel, use a Select. Wrapping keeps a constrained group readable; it is not a reason to force every choice into a segmented group.
 - Base UI lets people press the chosen item to clear it. When one item must stay chosen, ignore an empty value, as in the example.
 - Arrow keys move focus between items; Space or Enter presses one.
@@ -1516,7 +1518,7 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange`, `disable
 
 # Tabs
 
-Switches between sections of the same page.
+Switches between content panels on the same page. Use [ToggleGroup](toggle-group.md) to change a layout, filter or tool state, and [Link](link.md) to navigate to another page.
 
 ## Example
 
@@ -1559,7 +1561,9 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange` on the ro
 ## Rules
 
 - Give the list an `aria-label`.
-- Use tabs for sections of a page, not for site navigation. For a filter or view switch, use a [ToggleGroup](toggle-group.md).
+- Each tab activates a corresponding `Tabs.Panel`, such as Account or Notifications. Use Tabs when the choices name content sections.
+- List / 2 / 3 / Auto changes how the same content is displayed: use a single-choice [ToggleGroup](toggle-group.md). Do not add empty panels just to use Tabs' appearance for a setting.
+- Tabs and single-choice ToggleGroups share one segmented treatment. Pick by what the control changes; do not create separate tokens or visual variants to distinguish them.
 - Left and Right arrow keys move between tabs.
 
 ## Style
@@ -2500,7 +2504,9 @@ The most common mistake is reaching for the wrong overlay. Decide by what the fl
 
 ### Choosing a value
 
-Answer in order; the first yes decides.
+For layout preferences and filters on content already on screen, use a [ToggleGroup](components/toggle-group.md) without `multiple` for one choice, or [Toggle](components/toggle.md)s / a ToggleGroup with `multiple` for independent choices. A view preference can be saved; it still changes how the same content is displayed.
+
+For other form and settings values, answer in order; the first yes decides.
 
 1. **Does it save the moment it changes (a settings page)?** On or off: [Switch](components/switch.md). One of a few: [Select](components/select.md) that saves in `onValueChange`.
 2. **Is it on or off, saved with a form?** [Checkbox](components/checkbox.md).
@@ -2508,16 +2514,16 @@ Answer in order; the first yes decides.
 4. **Is it one of up to about 10 options?** [Select](components/select.md).
 5. **Is it one of a long list, or do people know what they're looking for and type it?** [Combobox](components/combobox.md).
 6. **Is it several of a few options?** Checkboxes in a [Fieldset](components/field.md).
-7. **Is it a view or filter on the current page, not a stored value?** One choice: [ToggleGroup](components/toggle-group.md) without `multiple`. Stacking filters: [Toggle](components/toggle.md)s, or a ToggleGroup with `multiple`.
-8. **Is it text?** One line: [Input](components/input.md). A few plain lines: [Textarea](components/textarea.md). Formatted content: the editor (`@usememos/editor`) with [Prose](components/prose.md).
-9. **Is it a number?** An Input with `type="number"` and `inputMode="numeric"`, or a Select of the sensible values. There is no Slider or Stepper.
+7. **Is it text?** One line: [Input](components/input.md). A few plain lines: [Textarea](components/textarea.md). Formatted content: the editor (`@usememos/editor`) with [Prose](components/prose.md).
+8. **Is it a number?** An Input with `type="number"` and `inputMode="numeric"`, or a Select of the sensible values. There is no Slider or Stepper.
 
 ### Grouping and moving between sections
 
 | Need | Use | Not |
 | --- | --- | --- |
-| Sections of one page (Account, Notifications) | [Tabs](components/tabs.md) | ToggleGroup |
-| A view or filter of the same content (All, Pinned, Archived) | [ToggleGroup](components/toggle-group.md) without `multiple` | Tabs |
+| Content panels of one page (Account, Notifications), with one `Tabs.Panel` per choice | [Tabs](components/tabs.md) | ToggleGroup |
+| A layout or filter of the same content (List / 2 / 3 / Auto; All / Pinned / Archived) | [ToggleGroup](components/toggle-group.md) without `multiple` | Tabs |
+| Independent tool states that can be active together (Bold, Italic) | ToggleGroup with `multiple` | Tabs |
 | Navigation between pages | [Link](components/link.md)s in the app's sidebar | Tabs |
 | Details or advanced settings people rarely need | [Collapsible](components/collapsible.md) | A Dialog |
 | Several sections, one open at a time | Collapsibles, controlled together | A third-party accordion |
@@ -2526,6 +2532,8 @@ Answer in order; the first yes decides.
 | Settings rows, or a few records with an action each | [List](components/list.md) | Separate boxes for each row |
 | A list of content (notes, comments) | [Entries](patterns.md#entry) | A Table |
 
+Tabs and single-choice ToggleGroups share the same well, selected fill and focus treatment. Choose by whether the control activates a content panel or changes a value. Do not add a separate visual variant, tokens or an app wrapper for either one.
+
 ## Picking feedback
 
 | Situation | Use |

package/llms.txt

@@ -24,7 +24,7 @@ React components on Base UI, CSS tokens and foundation styles. Load `@usememos/u
 
 - [Button](https://github.com/usememos/ui/blob/main/docs/components/button.md): Starts an action.
 - [Toggle](https://github.com/usememos/ui/blob/main/docs/components/toggle.md): Turns one option on or off and stays pressed while on.
-- [ToggleGroup](https://github.com/usememos/ui/blob/main/docs/components/toggle-group.md): A row of related Toggles. With `multiple`: a toolbar of independent on/off toggles. Without: one choice among peers, the same control as Tabs without a panel.
+- [ToggleGroup](https://github.com/usememos/ui/blob/main/docs/components/toggle-group.md): A row of related Toggles that changes values or tool states. Without `multiple`, it chooses one layout or filter; with `multiple`, it groups independent on/off tools. Use Tabs when each choice activates a corresponding content panel.
 - [Menu](https://github.com/usememos/ui/blob/main/docs/components/menu.md): Lists actions for one thing, opened from a trigger.
 - [Link](https://github.com/usememos/ui/blob/main/docs/components/link.md): Goes somewhere.
 - [Form](https://github.com/usememos/ui/blob/main/docs/components/form.md): A `<form>` with a title, its fields and its buttons. `bordered` boxes a small form among the Lists of a settings page.
@@ -36,7 +36,7 @@ React components on Base UI, CSS tokens and foundation styles. Load `@usememos/u
 - [Checkbox](https://github.com/usememos/ui/blob/main/docs/components/checkbox.md): Includes or excludes one item, saved with a form.
 - [Switch](https://github.com/usememos/ui/blob/main/docs/components/switch.md): Turns a setting on or off at once.
 - [RadioGroup](https://github.com/usememos/ui/blob/main/docs/components/radio-group.md): Picks exactly one option from a short list that is always visible.
-- [Tabs](https://github.com/usememos/ui/blob/main/docs/components/tabs.md): Switches between sections of the same page.
+- [Tabs](https://github.com/usememos/ui/blob/main/docs/components/tabs.md): Switches between content panels on the same page. Use ToggleGroup to change a layout, filter or tool state, and Link to navigate to another page.
 - [Collapsible](https://github.com/usememos/ui/blob/main/docs/components/collapsible.md): Hides content behind one trigger until people ask for it.
 - [Dialog](https://github.com/usememos/ui/blob/main/docs/components/dialog.md): Dialog asks for a short form or a decision on top of the page. AlertDialog asks to confirm an action and closes only through its buttons.
 - [Drawer](https://github.com/usememos/ui/blob/main/docs/components/drawer.md): A panel that slides in from one edge of the screen over a dimmed backdrop, such as a navigation sidebar on a phone or the details of one item.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usememos/ui",
-  "version": "26.11.13",
+  "version": "26.11.14",
   "description": "The Memos UI design system: tokens, foundation styles and React components for usememos products.",
   "keywords": [
     "react",