@flowstack-ui/brick 0.1.9 → 0.1.11

package/dist/agents/manifest.json

@@ -1,7 +1,7 @@
 {
   "schema": "flowstack.agent-manifest.v1",
   "package": "@flowstack-ui/brick",
-  "packageVersion": "0.1.9",
+  "packageVersion": "0.1.11",
   "components": [
     {
       "id": "accordion",
@@ -9,6 +9,12 @@
       "json": "./accordion.json",
       "markdown": "./accordion.md"
     },
+    {
+      "id": "alert-dialog",
+      "name": "AlertDialog",
+      "json": "./alert-dialog.json",
+      "markdown": "./alert-dialog.md"
+    },
     {
       "id": "app-bar",
       "name": "AppBar",
@@ -21,12 +27,36 @@
       "json": "./appearance.json",
       "markdown": "./appearance.md"
     },
+    {
+      "id": "aspect-ratio",
+      "name": "AspectRatio",
+      "json": "./aspect-ratio.json",
+      "markdown": "./aspect-ratio.md"
+    },
+    {
+      "id": "avatar",
+      "name": "Avatar",
+      "json": "./avatar.json",
+      "markdown": "./avatar.md"
+    },
     {
       "id": "badge",
       "name": "Badge",
       "json": "./badge.json",
       "markdown": "./badge.md"
     },
+    {
+      "id": "notification-badge",
+      "name": "NotificationBadge",
+      "json": "./notification-badge.json",
+      "markdown": "./notification-badge.md"
+    },
+    {
+      "id": "bleed",
+      "name": "Bleed",
+      "json": "./bleed.json",
+      "markdown": "./bleed.md"
+    },
     {
       "id": "bottom-navigation",
       "name": "BottomNavigation",
@@ -57,24 +87,90 @@
       "json": "./carousel.json",
       "markdown": "./carousel.md"
     },
+    {
+      "id": "checkbox-group",
+      "name": "Checkbox Group",
+      "json": "./checkbox-group.json",
+      "markdown": "./checkbox-group.md"
+    },
     {
       "id": "checkbox",
       "name": "Checkbox",
       "json": "./checkbox.json",
       "markdown": "./checkbox.md"
     },
+    {
+      "id": "chip",
+      "name": "Chip",
+      "json": "./chip.json",
+      "markdown": "./chip.md"
+    },
+    {
+      "id": "code-block",
+      "name": "Code Block",
+      "json": "./code-block.json",
+      "markdown": "./code-block.md"
+    },
+    {
+      "id": "code",
+      "name": "Code",
+      "json": "./code.json",
+      "markdown": "./code.md"
+    },
     {
       "id": "collapsible",
       "name": "Collapsible",
       "json": "./collapsible.json",
       "markdown": "./collapsible.md"
     },
+    {
+      "id": "color-picker",
+      "name": "Color Picker",
+      "json": "./color-picker.json",
+      "markdown": "./color-picker.md"
+    },
+    {
+      "id": "color-swatch",
+      "name": "Color Swatch",
+      "json": "./color-swatch.json",
+      "markdown": "./color-swatch.md"
+    },
+    {
+      "id": "combobox",
+      "name": "Combobox",
+      "json": "./combobox.json",
+      "markdown": "./combobox.md"
+    },
     {
       "id": "container",
       "name": "Container",
       "json": "./container.json",
       "markdown": "./container.md"
     },
+    {
+      "id": "context-menu",
+      "name": "ContextMenu",
+      "json": "./context-menu.json",
+      "markdown": "./context-menu.md"
+    },
+    {
+      "id": "data-grid",
+      "name": "Data Grid",
+      "json": "./data-grid.json",
+      "markdown": "./data-grid.md"
+    },
+    {
+      "id": "data-list",
+      "name": "Data List",
+      "json": "./data-list.json",
+      "markdown": "./data-list.md"
+    },
+    {
+      "id": "dialog",
+      "name": "Dialog",
+      "json": "./dialog.json",
+      "markdown": "./dialog.md"
+    },
     {
       "id": "divider",
       "name": "Divider",
@@ -87,6 +183,18 @@
       "json": "./drawer.json",
       "markdown": "./drawer.md"
     },
+    {
+      "id": "dropdown-menu",
+      "name": "DropdownMenu",
+      "json": "./dropdown-menu.json",
+      "markdown": "./dropdown-menu.md"
+    },
+    {
+      "id": "feed",
+      "name": "Feed",
+      "json": "./feed.json",
+      "markdown": "./feed.md"
+    },
     {
       "id": "field",
       "name": "Field",
@@ -99,6 +207,12 @@
       "json": "./fieldset.json",
       "markdown": "./fieldset.md"
     },
+    {
+      "id": "file-upload",
+      "name": "FileUpload",
+      "json": "./file-upload.json",
+      "markdown": "./file-upload.md"
+    },
     {
       "id": "form",
       "name": "Form",
@@ -117,12 +231,24 @@
       "json": "./grid.json",
       "markdown": "./grid.md"
     },
+    {
+      "id": "group",
+      "name": "Group",
+      "json": "./group.json",
+      "markdown": "./group.md"
+    },
     {
       "id": "hide",
       "name": "Hide",
       "json": "./hide.json",
       "markdown": "./hide.md"
     },
+    {
+      "id": "hover-card",
+      "name": "HoverCard",
+      "json": "./hover-card.json",
+      "markdown": "./hover-card.md"
+    },
     {
       "id": "icon-button",
       "name": "IconButton",
@@ -147,6 +273,12 @@
       "json": "./input.json",
       "markdown": "./input.md"
     },
+    {
+      "id": "link-box",
+      "name": "Link Box",
+      "json": "./link-box.json",
+      "markdown": "./link-box.md"
+    },
     {
       "id": "link",
       "name": "Link",
@@ -159,6 +291,18 @@
       "json": "./list.json",
       "markdown": "./list.md"
     },
+    {
+      "id": "menubar",
+      "name": "Menubar",
+      "json": "./menubar.json",
+      "markdown": "./menubar.md"
+    },
+    {
+      "id": "multi-select",
+      "name": "MultiSelect",
+      "json": "./multi-select.json",
+      "markdown": "./multi-select.md"
+    },
     {
       "id": "nav-list",
       "name": "NavList",
@@ -171,12 +315,66 @@
       "json": "./navigation-menu.json",
       "markdown": "./navigation-menu.md"
     },
+    {
+      "id": "number-input",
+      "name": "NumberInput",
+      "json": "./number-input.json",
+      "markdown": "./number-input.md"
+    },
+    {
+      "id": "otp-field",
+      "name": "OTPField",
+      "json": "./otp-field.json",
+      "markdown": "./otp-field.md"
+    },
     {
       "id": "pagination",
       "name": "Pagination",
       "json": "./pagination.json",
       "markdown": "./pagination.md"
     },
+    {
+      "id": "password-toggle-field",
+      "name": "PasswordToggleField",
+      "json": "./password-toggle-field.json",
+      "markdown": "./password-toggle-field.md"
+    },
+    {
+      "id": "popover",
+      "name": "Popover",
+      "json": "./popover.json",
+      "markdown": "./popover.md"
+    },
+    {
+      "id": "progress-circle",
+      "name": "ProgressCircle",
+      "json": "./progress-circle.json",
+      "markdown": "./progress-circle.md"
+    },
+    {
+      "id": "progress",
+      "name": "Progress",
+      "json": "./progress.json",
+      "markdown": "./progress.md"
+    },
+    {
+      "id": "radio-group",
+      "name": "RadioGroup",
+      "json": "./radio-group.json",
+      "markdown": "./radio-group.md"
+    },
+    {
+      "id": "rating",
+      "name": "Rating",
+      "json": "./rating.json",
+      "markdown": "./rating.md"
+    },
+    {
+      "id": "reorderable-list",
+      "name": "Reorderable List",
+      "json": "./reorderable-list.json",
+      "markdown": "./reorderable-list.md"
+    },
     {
       "id": "scroll-area",
       "name": "ScrollArea",
@@ -189,6 +387,18 @@
       "json": "./section.json",
       "markdown": "./section.md"
     },
+    {
+      "id": "segment-group",
+      "name": "SegmentGroup",
+      "json": "./segment-group.json",
+      "markdown": "./segment-group.md"
+    },
+    {
+      "id": "select",
+      "name": "Select",
+      "json": "./select.json",
+      "markdown": "./select.md"
+    },
     {
       "id": "show",
       "name": "Show",
@@ -201,24 +411,60 @@
       "json": "./sidebar.json",
       "markdown": "./sidebar.md"
     },
+    {
+      "id": "skeleton",
+      "name": "Skeleton",
+      "json": "./skeleton.json",
+      "markdown": "./skeleton.md"
+    },
     {
       "id": "skip-link",
       "name": "SkipLink",
       "json": "./skip-link.json",
       "markdown": "./skip-link.md"
     },
+    {
+      "id": "slider",
+      "name": "Slider",
+      "json": "./slider.json",
+      "markdown": "./slider.md"
+    },
     {
       "id": "stack",
       "name": "Stack",
       "json": "./stack.json",
       "markdown": "./stack.md"
     },
+    {
+      "id": "status",
+      "name": "Status",
+      "json": "./status.json",
+      "markdown": "./status.md"
+    },
     {
       "id": "surface",
       "name": "Surface",
       "json": "./surface.json",
       "markdown": "./surface.md"
     },
+    {
+      "id": "swipeable-item",
+      "name": "SwipeableItem",
+      "json": "./swipeable-item.json",
+      "markdown": "./swipeable-item.md"
+    },
+    {
+      "id": "switch",
+      "name": "Switch",
+      "json": "./switch.json",
+      "markdown": "./switch.md"
+    },
+    {
+      "id": "table",
+      "name": "Table",
+      "json": "./table.json",
+      "markdown": "./table.md"
+    },
     {
       "id": "tabs",
       "name": "Tabs",
@@ -237,12 +483,54 @@
       "json": "./textarea.json",
       "markdown": "./textarea.md"
     },
+    {
+      "id": "toast",
+      "name": "Toast",
+      "json": "./toast.json",
+      "markdown": "./toast.md"
+    },
+    {
+      "id": "toggle-group",
+      "name": "ToggleGroup",
+      "json": "./toggle-group.json",
+      "markdown": "./toggle-group.md"
+    },
+    {
+      "id": "toggle",
+      "name": "Toggle",
+      "json": "./toggle.json",
+      "markdown": "./toggle.md"
+    },
     {
       "id": "toolbar",
       "name": "Toolbar",
       "json": "./toolbar.json",
       "markdown": "./toolbar.md"
     },
+    {
+      "id": "tooltip",
+      "name": "Tooltip",
+      "json": "./tooltip.json",
+      "markdown": "./tooltip.md"
+    },
+    {
+      "id": "tree-grid",
+      "name": "TreeGrid",
+      "json": "./tree-grid.json",
+      "markdown": "./tree-grid.md"
+    },
+    {
+      "id": "tree",
+      "name": "Tree",
+      "json": "./tree.json",
+      "markdown": "./tree.md"
+    },
+    {
+      "id": "visually-hidden",
+      "name": "VisuallyHidden",
+      "json": "./visually-hidden.json",
+      "markdown": "./visually-hidden.md"
+    },
     {
       "id": "z-stack",
       "name": "ZStack",
@@ -263,5 +551,6 @@
       "json": "./layer-selection.json",
       "markdown": "./layer-selection.md"
     }
-  ]
+  ],
+  "coverage": "./coverage.json"
 }

package/dist/agents/menubar.json

@@ -0,0 +1,109 @@
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "menubar",
+  "name": "Menubar",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present a finished persistent application command strip with coordinated top-level menus while Atom owns menubar semantics, roving focus, adjacent-menu handoff, and shared Menu behavior.",
+  "useWhen": [
+    "A desktop-like application has several persistent command categories such as File, Edit, and View that must behave as one keyboard menubar."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "There is one temporary command menu, ordinary website navigation, a route list, or a toolbar of immediately executable controls.",
+      "useInstead": "DropdownMenu, NavigationMenu or NavList, or Toolbar"
+    },
+    {
+      "condition": "The application needs responsive mobile replacement or overflow orchestration.",
+      "useInstead": "An application-owned composition using DropdownMenu, Drawer, or another appropriate command surface"
+    }
+  ],
+  "composition": [
+    "Give Menubar.Root an accessible name and compose one or more uniquely valued Menubar.Menu scopes, each containing Menubar.Trigger and portalled Menubar.Content. Build Content from the shared command, selection, grouping, separator, static row, and paired submenu anatomy.",
+    "Root owns sm, md, or lg density and horizontal or vertical orientation; Content and SubContent inherit that density. Reproduce any local Appearance scope on each portalled visual root."
+  ],
+  "rules": [
+    {
+      "id": "menubar-application-commands",
+      "level": "must",
+      "statement": "Use Menubar only for persistent application command categories, not website navigation, page tabs, route-current state, or a responsive application shell."
+    },
+    {
+      "id": "menubar-root-name",
+      "level": "must",
+      "statement": "Give the role=menubar Root an accessible name and keep every top-level Trigger as its role=menuitem child with one Atom-owned roving tab stop."
+    },
+    {
+      "id": "menubar-menu-scope",
+      "level": "must",
+      "statement": "Give every top-level Menu a unique value and keep its Trigger and Content within that Menu scope so controlled value and adjacent-menu handoff remain deterministic."
+    },
+    {
+      "id": "menubar-orientation",
+      "level": "must",
+      "statement": "Match orientation to the visible Root arrangement and preserve direction-aware Arrow movement, Home/End, first and last item opening, adjacent handoff, and nested submenu keys in LTR and RTL."
+    },
+    {
+      "id": "menubar-shared-menu-contract",
+      "level": "must",
+      "statement": "Preserve uniquely valued item roles, real focus, typeahead, disabled navigation, checkbox and radio state, closeOnSelect, paired submenus, whole-root Tab exit, Escape restoration, and parent-modal ownership."
+    },
+    {
+      "id": "menubar-row-anatomy",
+      "level": "must",
+      "statement": "Use Leading, ItemLabel, Description, Shortcut, ItemIndicator, and tone=danger for their documented jobs; shortcuts are visual hints and Menubar does not register global commands."
+    },
+    {
+      "id": "menubar-responsive",
+      "level": "must",
+      "statement": "Do not automatically wrap, collapse, or change Menubar semantics at a breakpoint; applications own an explicit scrolling region or a separately selected mobile command surface."
+    },
+    {
+      "id": "menubar-theme-scope",
+      "level": "must",
+      "statement": "When Content leaves a local Appearance scope through Portal, reproduce that scope on the portalled visual root or target a container inside it."
+    },
+    {
+      "id": "menubar-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus menubar.css and every composed child component stylesheet."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Menubar as styled website navigation, omitting Root's name, duplicating top-level values, or implementing each heading as an independent dropdown.",
+      "correction": "Use Menubar only for application commands and preserve its named, uniquely valued, orientation-aware top-level ownership."
+    },
+    {
+      "mistake": "Hiding or collapsing the command strip at a Brick breakpoint or treating Shortcut text as registered keyboard behavior.",
+      "correction": "Let the application select a responsive alternative and keep shortcut execution in application code."
+    }
+  ],
+  "validation": [
+    "Verify Root naming and orientation, unique Menu values, one top-level tab stop, Home/End, horizontal and vertical Arrow movement, LTR and RTL, pointer and touch opening, keyboard first and last opening, hover switching, controlled active value, disabled triggers, and adjacent-menu focus ownership.",
+    "Verify shared item focus and typeahead, checkbox mixed and radio state, submenus, selection close policy, whole-root Tab exit, top-layer Escape, focus return, portals, parent-modal ownership, and asChild or render composition.",
+    "Verify three densities, persistent Root and open-trigger paint, constrained popup scrolling, danger meaning, narrow overflow policy, zoom, long localization, reduced motion, forced colors, portalled appearance, and complete CSS."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "menubar",
+      "versionPolicy": "installed-exact"
+    },
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "menu",
+      "versionPolicy": "installed-exact"
+    },
+    "dropdown-menu",
+    "context-menu",
+    "navigation-menu",
+    "nav-list",
+    "toolbar",
+    "drawer",
+    "appearance"
+  ]
+}

package/dist/agents/menubar.md

@@ -0,0 +1,54 @@
+# Menubar agent guide
+
+## Purpose
+
+Present a finished persistent application command strip with coordinated top-level menus while Atom owns menubar semantics, roving focus, adjacent-menu handoff, and shared Menu behavior.
+
+## Use when
+
+- A desktop-like application has several persistent command categories such as File, Edit, and View that must behave as one keyboard menubar.
+
+## Choose something else when
+
+- There is one temporary command menu, ordinary website navigation, a route list, or a toolbar of immediately executable controls. Use DropdownMenu, NavigationMenu or NavList, or Toolbar.
+- The application needs responsive mobile replacement or overflow orchestration. Use An application-owned composition using DropdownMenu, Drawer, or another appropriate command surface.
+
+## Required composition
+
+- Give Menubar.Root an accessible name and compose one or more uniquely valued Menubar.Menu scopes, each containing Menubar.Trigger and portalled Menubar.Content. Build Content from the shared command, selection, grouping, separator, static row, and paired submenu anatomy.
+- Root owns sm, md, or lg density and horizontal or vertical orientation; Content and SubContent inherit that density. Reproduce any local Appearance scope on each portalled visual root.
+
+## Rules
+
+- **MUST:** Use Menubar only for persistent application command categories, not website navigation, page tabs, route-current state, or a responsive application shell.
+- **MUST:** Give the role=menubar Root an accessible name and keep every top-level Trigger as its role=menuitem child with one Atom-owned roving tab stop.
+- **MUST:** Give every top-level Menu a unique value and keep its Trigger and Content within that Menu scope so controlled value and adjacent-menu handoff remain deterministic.
+- **MUST:** Match orientation to the visible Root arrangement and preserve direction-aware Arrow movement, Home/End, first and last item opening, adjacent handoff, and nested submenu keys in LTR and RTL.
+- **MUST:** Preserve uniquely valued item roles, real focus, typeahead, disabled navigation, checkbox and radio state, closeOnSelect, paired submenus, whole-root Tab exit, Escape restoration, and parent-modal ownership.
+- **MUST:** Use Leading, ItemLabel, Description, Shortcut, ItemIndicator, and tone=danger for their documented jobs; shortcuts are visual hints and Menubar does not register global commands.
+- **MUST:** Do not automatically wrap, collapse, or change Menubar semantics at a breakpoint; applications own an explicit scrolling region or a separately selected mobile command surface.
+- **MUST:** When Content leaves a local Appearance scope through Portal, reproduce that scope on the portalled visual root or target a container inside it.
+- **MUST:** Load styles.css or core.css plus menubar.css and every composed child component stylesheet.
+
+## Common mistakes
+
+- **Avoid:** Using Menubar as styled website navigation, omitting Root's name, duplicating top-level values, or implementing each heading as an independent dropdown. **Instead:** Use Menubar only for application commands and preserve its named, uniquely valued, orientation-aware top-level ownership.
+- **Avoid:** Hiding or collapsing the command strip at a Brick breakpoint or treating Shortcut text as registered keyboard behavior. **Instead:** Let the application select a responsive alternative and keep shortcut execution in application code.
+
+## Validation checklist
+
+- Verify Root naming and orientation, unique Menu values, one top-level tab stop, Home/End, horizontal and vertical Arrow movement, LTR and RTL, pointer and touch opening, keyboard first and last opening, hover switching, controlled active value, disabled triggers, and adjacent-menu focus ownership.
+- Verify shared item focus and typeahead, checkbox mixed and radio state, submenus, selection close policy, whole-root Tab exit, top-layer Escape, focus return, portals, parent-modal ownership, and asChild or render composition.
+- Verify three densities, persistent Root and open-trigger paint, constrained popup scrolling, danger meaning, narrow overflow policy, zoom, long localization, reduced motion, forced colors, portalled appearance, and complete CSS.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/menubar`
+- `@flowstack-ui/atom/agents/menu`
+- `dropdown-menu`
+- `context-menu`
+- `navigation-menu`
+- `nav-list`
+- `toolbar`
+- `drawer`
+- `appearance`