diff --git a/docs/src/main.tsx b/docs/src/main.tsx index cea5183..9222714 100644 --- a/docs/src/main.tsx +++ b/docs/src/main.tsx @@ -242,13 +242,19 @@ function App() { -

- Import greyui/styles.css once. Simple controls accept native props; - compound controls use Root plus named parts and Base UI behavior. - Consumers still provide labels and accessible names. See the - Base UI reference for exhaustive primitive - props. -

+ @@ -286,13 +292,17 @@ function App() { -

- Use variant="primary" for emphasis, defaultAction for - the action Enter should invoke, and aria-pressed (or - ToggleButton) for persistent selection. Pointer focus adds no sticky - cue; keyboard :focus-visible uses a neutral inset cue without - replacing the selected fill. -

+ @@ -357,16 +367,17 @@ function App() { intro="Inputs, textareas, selects, number fields, and comboboxes use white inset editing surfaces." > -

- Select is fixed-list; Combobox searches and selects - listed values; Autocomplete keeps free-form text valid. -

-

- Form popups match their trigger width and clamp to the available screen space by - default. Use popupWidth="content" on Select or{" "} - width="content" on a compound popup when long options should widen - the list; positionerProps forwards Base UI placement options. -

+
@@ -440,18 +451,18 @@ function App() {
  • - ToggleGroup owns values; SegmentedControl only groups - caller-controlled ToggleButtons. + Use ToggleGroup when the group should own selection; + SegmentedControl only lays out controlled + ToggleButtons.
  • - Fieldset adds form semantics and shared disabled state. - Accordion groups disclosures; Collapsible handles + Use Fieldset for form semantics and shared disabled state; + Accordion for several disclosures; Collapsible for one.
  • - Use Fieldset.Root variant="plain" aria-label="…" when the - surrounding window already provides visual chrome and a visible legend would - repeat its heading. + Use Fieldset.Root variant="plain" aria-label="…" when a window + already supplies the visible heading and border.
@@ -487,11 +498,20 @@ function App() { code={"\n \n \n"} codeLabel="Toast setup" > -

- Progress tracks work; Meter measures a value. - Banner is inline; Toast is transient and requires a - provider/toaster pair. -

+
    +
  • + Use Progress for work toward completion and Meter for + a measured value. +
    • +
  • + Use Banner for persistent inline feedback and Toast{" "} + for transient feedback. +
    • +
  • + Mount one Toast.Provider and Toast.Toaster around your + application. +
    • +
@@ -563,18 +583,19 @@ function App() { code={"\n \n"} codeLabel="Application setup" > -

- Mount one Layer.Provider near the app root. Use - AlertDialog for confirmation decisions; context menus should not be - the only path to important actions. -

-

- In Window.MenuBar, Left and Right Arrow move between enabled menu - triggers. When a menu is open, that movement hands the open popup to the next - trigger; Escape closes it and restores focus. Submenus use the standard forward - and back arrow keys, and disabled triggers are skipped. Menu popups remain - content-sized but clamp to the available collision area. -

+
    +
  • + Mount one Layer.Provider near the application root. +
    • +
  • + Use AlertDialog for confirmation; keep important actions available + outside context menus. +
    • +
  • + Put related menus in Window.MenuBar. Arrow keys switch menus, + Escape restores focus, and popups clamp to the viewport. +
    • +
@@ -757,39 +778,41 @@ function App() {
- -

- Put padded application content in Window.Content. Compose - Window.Header, Window.Description, and - Window.Actions for a shared content rail; keep menu and status bars - outside so their chrome remains full width. Field.ActionRow aligns a - labeled Select with adjacent buttons at the control edge. Their default - layout="auto" behavior follows each component container rather than - the page viewport. Use layout="inline" or - layout="stacked" for an explicit override, and choose - chrome="floating" or chrome="stacked" when the window - should not adapt automatically. -

-

- The root owns sizing while its frame owns the outer border, panel, and shadow. - Menu, content, and status rows share the same inset edge without compensating - negative margins, so switching between active and inactive states never changes - the window geometry. -

+ +
    +
  • + Put padded UI in Window.Content; keep Window.MenuBar{" "} + and + Window.StatusBar outside it for full-width chrome. +
    • +
  • + Compose Window.Header, Window.Description, and + Window.Actions; use Field.ActionRow for labeled + controls with adjacent actions. +
    • +
  • + Keep chrome="auto" and layout="auto" for + container-aware behavior; choose an explicit mode only when geometry must stay + fixed. +
    • +
- + - -

- These fixed-width windows keep container behavior visible inside a wide docs - viewport. They include expanded and collapsed small windows, explicit Header and - ActionRow layouts, stacked chrome, and automatic chrome above the breakpoint. Open - the right-aligned Window menu in the 360 px case to check popup collision handling - at the inline edge. -

+ +
    +
  • + auto follows each component container—not the page viewport. +
    • +
  • + Use explicit header, action-row, or chrome modes only when the layout should not + adapt. +
    • +
  • Menu popups clamp to the available viewport at narrow widths.
    • +
- + @@ -811,7 +834,10 @@ function App() { } codeLabel="CSS example" > -

Override tokens at a theme boundary; avoid styling component internals.

+
    +
  • Override shared tokens on a theme boundary.
    • +
  • Avoid targeting component internals.
    • +
{[