diff --git a/src/uix/eidos/components/sidebar/README.md b/src/uix/eidos/components/sidebar/README.md index 10e16ff4a..432f3a369 100644 --- a/src/uix/eidos/components/sidebar/README.md +++ b/src/uix/eidos/components/sidebar/README.md @@ -46,13 +46,20 @@ real `sidebar.tsx`). Headless behavior: - **`data-collapsible` siempre estampado** (shadcn solo lo pone colapsado, lo que obliga a cada regla del recipe a guardar por estado). - **`rail` alcanzable por teclado**: es un `

+ {#if collapsible === 'none'} +

+ none pins the panel open: the state chips are inert because the component + itself refuses to collapse in this mode, and reporting «collapsed» would make + data-state and aria-expanded lie about a visible panel. +

+ {/if}
open (state)
- - +
@@ -369,8 +406,12 @@

The recipe is logical throughout (border-inline-end, padding-inline), so RTL mirrors the whole shell — including which edge the rail - sits on. Widths are tokens (--sidebar-width, - --sidebar-width-icon), so density and scaling reach them too. + sits on and which way the off-canvas panel slides out (a physical translate sign would sweep + it across the page instead). The three widths (--sidebar-width, + --sidebar-width-icon, --sidebar-width-mobile) are deliberately + FIXED rem: a rail whose width drifted with density would reflow the page every time the user + changed a foundation knob. Density and scaling do reach the interior — row height, paddings, + gaps and the rail's own thickness all ride the spacing scale.

@@ -412,7 +453,7 @@ '#?components.sidebar.label|Sidebar' )}», «{uix.langs.ts('#?components.sidebar.nav|Main navigation')}», «{uix.langs.ts( '#?components.sidebar.trigger|Toggle sidebar' - )}», «{uix.langs.ts('#?components.sidebar.rail|Resize sidebar')}» — so a rail with no visible + )}», «{uix.langs.ts('#?components.sidebar.rail|Collapse sidebar')}» — so a rail with no visible text is still announced in the reader's language. adom supplies the breakpoint tracker that decides data-mobile (uix.dom.isAtLeast) and the floating engine that anchors a sub-menu to its row in icon mode. sema @@ -460,6 +501,52 @@ Resolved by the system tracker, never a local matchMedia. + + onOpenChange + (open: boolean) => void + + Fires for the DESKTOP state — the layout preference an app persists. The mobile + drawer's open/closed is a transient overlay, not a preference, so it stays quiet. + + + + +
+
Part props
+
+ + + + + + + + + + + + + + + + + + + + + + +
PartPropNotes
Sidebar.Panelaria-label + Name of the complementary landmark (and of the mobile dialog). Falls back to the + localized «{uix.langs.ts('#?components.sidebar.label|Sidebar')}». +
Sidebar.Contentaria-label + Name of the <nav> landmark. Falls back to «{uix.langs.ts( + '#?components.sidebar.nav|Main navigation' + )}». +
Sidebar.MenuActionaria-labelRequired in practice: the action is a glyph with no text of its own.
every partid · child + Explicit id (ids are generated otherwise) and the asChild snippet, which receives the + part's resolved props. +
@@ -490,8 +577,9 @@ tooltip string - Name shown in a composed Tooltip while the panel is an icon rail (where - the label is hidden). Eidos-only. + The row's name while the panel is an icon rail (where the label is hidden): it + becomes the aria-label AND, unless the row owns a sub-menu, the text of + a composed Tooltip. Eidos-only. @@ -539,6 +627,40 @@
+
Events
+
+ + + + {#each sidebarMorfo.events as event (event.name)} + + + + + + + {/each} + +
eventfamily · verbtargetsequence
{event.name}{event.semantic.family} · {event.semantic.verb}panel{event.semantic.sequence}
+
+
Keyboard
+
+ + + + + + + + + +
partkeyaction
menu-subEscape + close-sub — dismisses the floating sub-menu and returns focus to its + row. Handled at the menu-item, which contains both the row and the sub: + focus normally sits on the ROW, and the runtime's shared action map cannot tell which + sub fired. +
+

separator and the search input are deliberately NOT parts: they compose the canonical Separator and Field. Two partRefs @@ -630,9 +752,14 @@ Icon mode - The label is hidden visually, so the row's name comes from the composed - Tooltip (tooltip prop). Sub-menus float beside the rail - instead of disappearing, and Escape closes one returning focus to its row. + The label is hidden visually, so the tooltip text becomes the row's + aria-label — a tooltip only describes + (aria-describedby), it never names, so relying on it alone would leave + the control anonymous. The visible tooltip is the sighted half of the same fact, and + it is suppressed on a row that owns a sub-menu (the flyout opens on the same hover; + the name still comes through the label). Sub-menus float beside the rail instead of + disappearing; they close on pointer-leave, on focus leaving the row, and on Escape, + which returns focus to the row.