@uxelle/skills 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/manifest.generated.ts
 var manifest = {
   "schemaVersion": 1,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "skills": [
     {
       "name": "uxelle-components",
@@ -154,8 +154,8 @@ var manifest = {
         },
         {
           "path": "getting-started.md",
-          "size": 2276,
-          "hash": "sha256:c40148458f76df3bdd9a0cf85732cd09bbe621c5625d20c4251aa7f4bd808a90"
+          "size": 3387,
+          "hash": "sha256:5aa1009aaf71d2d45d8f57198ee52942d4220d031948357c646b799b19ffd34f"
         },
         {
           "path": "Hero.md",
@@ -164,8 +164,8 @@ var manifest = {
         },
         {
           "path": "Icon.md",
-          "size": 2218,
-          "hash": "sha256:bfde859f04937c40b1ce2f3b386e9b059e3781878b1bb91471e688de605ccf1b"
+          "size": 2948,
+          "hash": "sha256:c467d672c13c5d52120618d5f932454e5f3a8dbd5f8bdd2e1498b26f676d523d"
         },
         {
           "path": "IconButton.md",
@@ -249,13 +249,13 @@ var manifest = {
         },
         {
           "path": "Navigation.md",
-          "size": 2626,
-          "hash": "sha256:ed38f63fc2728c5de857bcc891807c628103e30b7381e4b4b3e7576980b672e4"
+          "size": 3749,
+          "hash": "sha256:d51bf6f799deda23afae3b13a60e38d90b8a8069be1eedd05c5c6ec5d6d806ad"
         },
         {
           "path": "NavigationSide.md",
-          "size": 5005,
-          "hash": "sha256:32386fd82517e9d74561b4c05b8a7b0951532fcf1ab80b038fe7bde376b96752"
+          "size": 5474,
+          "hash": "sha256:ffe9e9a88ade7c6cef99c1953e4e265afce446d616af366fd4b63206517396bf"
         },
         {
           "path": "NavigationSideGroup.md",
@@ -264,18 +264,18 @@ var manifest = {
         },
         {
           "path": "NavigationSideItem.md",
-          "size": 5839,
-          "hash": "sha256:a57473d0c207155e48e34e495a9a8b195357442871132c04e3a51b0130044cc9"
+          "size": 6595,
+          "hash": "sha256:3e7f51a9eabb5bf144022064b14416cebbc4d7d9eb87ee9c82299c5ecbb50e34"
         },
         {
           "path": "NavigationSideSubItem.md",
-          "size": 2350,
-          "hash": "sha256:f3da7ff70aac2a0568ff6831efd18bd2849d459f88ba41a76006432a33245b02"
+          "size": 2649,
+          "hash": "sha256:3edf70cb4a3cb43abd112cbae73d83385481f004d8e48513ab455596388d221e"
         },
         {
           "path": "NavLink.md",
-          "size": 2567,
-          "hash": "sha256:46d020ef5c1a46874e8fb89df9af5c96b0a2cc9b778fe8d64ceaaa1522df8047"
+          "size": 2765,
+          "hash": "sha256:6d8d696c1066b536cb3a36a145f316968bef40879b265a8d5fac06fbeaf9d69b"
         },
         {
           "path": "NotificationBadge.md",
@@ -344,8 +344,8 @@ var manifest = {
         },
         {
           "path": "SKILL.md",
-          "size": 14408,
-          "hash": "sha256:de312111538d710c822a0212af2188584591d594d4f99ba7f3efb7a4435e9021"
+          "size": 14816,
+          "hash": "sha256:a15ed6eb6c149096d9cb6376ee47e17700cbf36ed498edd176232ff87f78d94b"
         },
         {
           "path": "Spinner.md",
@@ -354,8 +354,8 @@ var manifest = {
         },
         {
           "path": "StatTile.md",
-          "size": 7820,
-          "hash": "sha256:e9330341336d46ab38724a17e76548d8cd4081b06b1a483bfea6be642718ea9e"
+          "size": 8042,
+          "hash": "sha256:76a99c8ea47082659e625c59030d0cef527bd19d8d6cabd635e71016be13754d"
         },
         {
           "path": "Stepper.md",
@@ -415,8 +415,8 @@ var manifest = {
       "files": [
         {
           "path": "a2ui.md",
-          "size": 4779,
-          "hash": "sha256:e557e7caba1471f250a651f6449aa4b8e73b40e05c331dcbda25892b958ecd99"
+          "size": 5279,
+          "hash": "sha256:9ebad576e8878251c6ce2210a7cab70066b30d04f0b38e1963b5eeb9f5c820e3"
         },
         {
           "path": "density.md",
@@ -425,8 +425,8 @@ var manifest = {
         },
         {
           "path": "how-to-accessibility.md",
-          "size": 3554,
-          "hash": "sha256:c19043086e302c1681ae462efa9f7282a9e227aeb78dfe93bf66f6c4f4710bf7"
+          "size": 3732,
+          "hash": "sha256:c66c97e67182cb444fb9ff6f1b02db8da663f928a79bf31517008b9dc3f7a82e"
         },
         {
           "path": "how-to-color.md",
@@ -435,13 +435,13 @@ var manifest = {
         },
         {
           "path": "how-to-host.md",
-          "size": 2647,
-          "hash": "sha256:bdab3b08e77adaabcd582dff4b64838e0723ade66d5c9416be9111f9dc9b49cd"
+          "size": 2856,
+          "hash": "sha256:dab3dc61a74b069600d56940f4b2b5e9210f2899ab5688613fbbbfdc035c60ba"
         },
         {
           "path": "how-to-page-layout.md",
-          "size": 10962,
-          "hash": "sha256:b01626a0661950a5bbb9a7def38e82b6b3ce9ded32a328edd72aa5c256588a84"
+          "size": 11126,
+          "hash": "sha256:2d06c39afbe035eb13bace7c744f7d19a2130248eb574a8b11f2bf179f83fa67"
         },
         {
           "path": "principles.md",
@@ -450,8 +450,8 @@ var manifest = {
         },
         {
           "path": "recipe-app-chrome.md",
-          "size": 10042,
-          "hash": "sha256:225ebbfabfa65538c9275744c4cc6e5cc7798a36ab496643b41283efae3ea1a3"
+          "size": 12052,
+          "hash": "sha256:f4a1380400b4ea54a70dd8d77bb800d37fdf90240e1aaecd5aafad67730730bb"
         },
         {
           "path": "recipe-card-grid.md",
@@ -465,8 +465,8 @@ var manifest = {
         },
         {
           "path": "recipe-dashboard-overview.md",
-          "size": 4708,
-          "hash": "sha256:a6a581ca179595535d9d3df0469d362d8e7175e5595bea3222a32733c66c4615"
+          "size": 4857,
+          "hash": "sha256:4fe4573d6eb09730c1737875c835ca9b939cd3d8e8587ecae09ba7331b2ff8d7"
         },
         {
           "path": "recipe-data-table-page.md",
@@ -508,6 +508,11 @@ var manifest = {
           "size": 3876,
           "hash": "sha256:351069ddf1e5d085d9f1a89caa47c368874b5d15d4cb9a53e9e1691c3df44a14"
         },
+        {
+          "path": "recipe-navigation.md",
+          "size": 17612,
+          "hash": "sha256:37dde1f17bb34f12b9e53a930f336a7beafbb4ae9fc237bcff02a2b37018f922"
+        },
         {
           "path": "recipe-page-header.md",
           "size": 4161,
@@ -540,8 +545,8 @@ var manifest = {
         },
         {
           "path": "recipe-stat-callouts.md",
-          "size": 4017,
-          "hash": "sha256:fb3857880f691fd016cb1414ee788e3a9fdfc49f7e61376442965aa018896f6e"
+          "size": 4207,
+          "hash": "sha256:ef84f56f302f623b990dff4e5051256642a41cf2dabab0e102ddf030bff4f61c"
         },
         {
           "path": "recipe-states.md",
@@ -565,8 +570,8 @@ var manifest = {
         },
         {
           "path": "SKILL.md",
-          "size": 10810,
-          "hash": "sha256:096a85cb85d2fe413bc5f2abb241c45ea6e59dfc3b9547a00b639c7739fc014e"
+          "size": 11032,
+          "hash": "sha256:75b96a393abccffd6c6292a22bbaf88f402fc68edbcd9326f7d099ea0d575d48"
         },
         {
           "path": "spacing-steps.md",

package/index.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "skills": [
     {
       "name": "uxelle-components",
@@ -153,8 +153,8 @@
         },
         {
           "path": "getting-started.md",
-          "size": 2276,
-          "hash": "sha256:c40148458f76df3bdd9a0cf85732cd09bbe621c5625d20c4251aa7f4bd808a90"
+          "size": 3387,
+          "hash": "sha256:5aa1009aaf71d2d45d8f57198ee52942d4220d031948357c646b799b19ffd34f"
         },
         {
           "path": "Hero.md",
@@ -163,8 +163,8 @@
         },
         {
           "path": "Icon.md",
-          "size": 2218,
-          "hash": "sha256:bfde859f04937c40b1ce2f3b386e9b059e3781878b1bb91471e688de605ccf1b"
+          "size": 2948,
+          "hash": "sha256:c467d672c13c5d52120618d5f932454e5f3a8dbd5f8bdd2e1498b26f676d523d"
         },
         {
           "path": "IconButton.md",
@@ -248,13 +248,13 @@
         },
         {
           "path": "Navigation.md",
-          "size": 2626,
-          "hash": "sha256:ed38f63fc2728c5de857bcc891807c628103e30b7381e4b4b3e7576980b672e4"
+          "size": 3749,
+          "hash": "sha256:d51bf6f799deda23afae3b13a60e38d90b8a8069be1eedd05c5c6ec5d6d806ad"
         },
         {
           "path": "NavigationSide.md",
-          "size": 5005,
-          "hash": "sha256:32386fd82517e9d74561b4c05b8a7b0951532fcf1ab80b038fe7bde376b96752"
+          "size": 5474,
+          "hash": "sha256:ffe9e9a88ade7c6cef99c1953e4e265afce446d616af366fd4b63206517396bf"
         },
         {
           "path": "NavigationSideGroup.md",
@@ -263,18 +263,18 @@
         },
         {
           "path": "NavigationSideItem.md",
-          "size": 5839,
-          "hash": "sha256:a57473d0c207155e48e34e495a9a8b195357442871132c04e3a51b0130044cc9"
+          "size": 6595,
+          "hash": "sha256:3e7f51a9eabb5bf144022064b14416cebbc4d7d9eb87ee9c82299c5ecbb50e34"
         },
         {
           "path": "NavigationSideSubItem.md",
-          "size": 2350,
-          "hash": "sha256:f3da7ff70aac2a0568ff6831efd18bd2849d459f88ba41a76006432a33245b02"
+          "size": 2649,
+          "hash": "sha256:3edf70cb4a3cb43abd112cbae73d83385481f004d8e48513ab455596388d221e"
         },
         {
           "path": "NavLink.md",
-          "size": 2567,
-          "hash": "sha256:46d020ef5c1a46874e8fb89df9af5c96b0a2cc9b778fe8d64ceaaa1522df8047"
+          "size": 2765,
+          "hash": "sha256:6d8d696c1066b536cb3a36a145f316968bef40879b265a8d5fac06fbeaf9d69b"
         },
         {
           "path": "NotificationBadge.md",
@@ -343,8 +343,8 @@
         },
         {
           "path": "SKILL.md",
-          "size": 14408,
-          "hash": "sha256:de312111538d710c822a0212af2188584591d594d4f99ba7f3efb7a4435e9021"
+          "size": 14816,
+          "hash": "sha256:a15ed6eb6c149096d9cb6376ee47e17700cbf36ed498edd176232ff87f78d94b"
         },
         {
           "path": "Spinner.md",
@@ -353,8 +353,8 @@
         },
         {
           "path": "StatTile.md",
-          "size": 7820,
-          "hash": "sha256:e9330341336d46ab38724a17e76548d8cd4081b06b1a483bfea6be642718ea9e"
+          "size": 8042,
+          "hash": "sha256:76a99c8ea47082659e625c59030d0cef527bd19d8d6cabd635e71016be13754d"
         },
         {
           "path": "Stepper.md",
@@ -414,8 +414,8 @@
       "files": [
         {
           "path": "a2ui.md",
-          "size": 4779,
-          "hash": "sha256:e557e7caba1471f250a651f6449aa4b8e73b40e05c331dcbda25892b958ecd99"
+          "size": 5279,
+          "hash": "sha256:9ebad576e8878251c6ce2210a7cab70066b30d04f0b38e1963b5eeb9f5c820e3"
         },
         {
           "path": "density.md",
@@ -424,8 +424,8 @@
         },
         {
           "path": "how-to-accessibility.md",
-          "size": 3554,
-          "hash": "sha256:c19043086e302c1681ae462efa9f7282a9e227aeb78dfe93bf66f6c4f4710bf7"
+          "size": 3732,
+          "hash": "sha256:c66c97e67182cb444fb9ff6f1b02db8da663f928a79bf31517008b9dc3f7a82e"
         },
         {
           "path": "how-to-color.md",
@@ -434,13 +434,13 @@
         },
         {
           "path": "how-to-host.md",
-          "size": 2647,
-          "hash": "sha256:bdab3b08e77adaabcd582dff4b64838e0723ade66d5c9416be9111f9dc9b49cd"
+          "size": 2856,
+          "hash": "sha256:dab3dc61a74b069600d56940f4b2b5e9210f2899ab5688613fbbbfdc035c60ba"
         },
         {
           "path": "how-to-page-layout.md",
-          "size": 10962,
-          "hash": "sha256:b01626a0661950a5bbb9a7def38e82b6b3ce9ded32a328edd72aa5c256588a84"
+          "size": 11126,
+          "hash": "sha256:2d06c39afbe035eb13bace7c744f7d19a2130248eb574a8b11f2bf179f83fa67"
         },
         {
           "path": "principles.md",
@@ -449,8 +449,8 @@
         },
         {
           "path": "recipe-app-chrome.md",
-          "size": 10042,
-          "hash": "sha256:225ebbfabfa65538c9275744c4cc6e5cc7798a36ab496643b41283efae3ea1a3"
+          "size": 12052,
+          "hash": "sha256:f4a1380400b4ea54a70dd8d77bb800d37fdf90240e1aaecd5aafad67730730bb"
         },
         {
           "path": "recipe-card-grid.md",
@@ -464,8 +464,8 @@
         },
         {
           "path": "recipe-dashboard-overview.md",
-          "size": 4708,
-          "hash": "sha256:a6a581ca179595535d9d3df0469d362d8e7175e5595bea3222a32733c66c4615"
+          "size": 4857,
+          "hash": "sha256:4fe4573d6eb09730c1737875c835ca9b939cd3d8e8587ecae09ba7331b2ff8d7"
         },
         {
           "path": "recipe-data-table-page.md",
@@ -507,6 +507,11 @@
           "size": 3876,
           "hash": "sha256:351069ddf1e5d085d9f1a89caa47c368874b5d15d4cb9a53e9e1691c3df44a14"
         },
+        {
+          "path": "recipe-navigation.md",
+          "size": 17612,
+          "hash": "sha256:37dde1f17bb34f12b9e53a930f336a7beafbb4ae9fc237bcff02a2b37018f922"
+        },
         {
           "path": "recipe-page-header.md",
           "size": 4161,
@@ -539,8 +544,8 @@
         },
         {
           "path": "recipe-stat-callouts.md",
-          "size": 4017,
-          "hash": "sha256:fb3857880f691fd016cb1414ee788e3a9fdfc49f7e61376442965aa018896f6e"
+          "size": 4207,
+          "hash": "sha256:ef84f56f302f623b990dff4e5051256642a41cf2dabab0e102ddf030bff4f61c"
         },
         {
           "path": "recipe-states.md",
@@ -564,8 +569,8 @@
         },
         {
           "path": "SKILL.md",
-          "size": 10810,
-          "hash": "sha256:096a85cb85d2fe413bc5f2abb241c45ea6e59dfc3b9547a00b639c7739fc014e"
+          "size": 11032,
+          "hash": "sha256:75b96a393abccffd6c6292a22bbaf88f402fc68edbcd9326f7d099ea0d575d48"
         },
         {
           "path": "spacing-steps.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxelle/skills",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "uxElle generate-UI agent skills: component API reference and design harness, as versioned markdown with a machine-readable manifest",
   "type": "module",
   "repository": {

package/skills/uxelle-components/Icon.md

@@ -2,7 +2,7 @@
 
 Import: `import { Icon } from "@uxelle/components";`
 
-Renders Material Symbols icons.
+Inline Material Symbols Sharp pictogram.
 
 ## Props
 
@@ -10,13 +10,13 @@ Renders Material Symbols icons.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| iconName | `string` | `"add"` | Material Symbols ligature name to render, e.g. `home`, `close`, or `settings`. Names outside that set render as literal text. |
+| iconName | `string` | `"add"` | Material Symbols Sharp name to render, e.g. `home`, `close`, or `settings`. GPF chrome names always resolve. Any other name needs `import "@uxelle/icons/register"` (or `registerIcons`) before render. Unknown names render no glyph (an empty span — a visual-only miss that a11y tests will not catch). Type names with `UxelleIconName` from `@uxelle/icons` to catch typos at compile time. |
 | size | `number` | `24` | Glyph size in pixels, applied as an inline `font-size`. Valid range is 8–128 and out-of-range values warn in development; leaving it at the default emits no inline size, so CSS or a parent token can drive it. |
 | style | `CSSProperties` | `—` | Inline styles merged onto the icon `span`, applied after the `size`-derived `font-size` — a `fontSize` here therefore overrides `size`. |
 | "aria-label" | `string` | `""` | Accessible name for an icon that carries meaning. Setting it also suppresses the automatic `aria-hidden`, so the icon becomes visible to assistive technology. |
 | "aria-hidden" | `"auto" \| "true" \| "false"` | `undefined` | Explicitly includes or excludes the icon from the accessibility tree. Leave it unset for the default: hidden when there is no `aria-label`, exposed once there is one. |
 | role | `string` | `""` | Role placed on the icon `span`. Pair `img` with `aria-label` when the glyph is meaningful content; leave it unset for decorative icons. |
-| variant | `"sharpUnfilled" \| "sharpFilled"` | `"sharpUnfilled"` | Glyph weight: `sharpFilled` renders the solid form through font-variation settings, `sharpUnfilled` the outlined form. |
+| variant | `"sharpUnfilled" \| "sharpFilled"` | `"sharpUnfilled"` | Glyph weight: `sharpFilled` renders the solid SVG, `sharpUnfilled` the outlined form. |
 
 <!-- prettier-ignore-end -->
 
@@ -40,4 +40,4 @@ Renders Material Symbols icons.
 
 ## Notes
 
-- Uses the material-symbols sharp font; updates instantly when `iconName` changes. By default, icons are hidden from screen readers (`aria-hidden="true"`) as they are typically decorative. Provide an `aria-label` when the icon conveys meaningful information.
+- Looks up a Sharp SVG from `iconName` and `variant`. `@uxelle/components` ships the GPF chrome set; register the full catalog with `import "@uxelle/icons/register"` or **registerIcons** before the first render. Unknown names render no glyph and warn in development — treat that as an authoring error, not UI copy. Production is silent: an icon-only control with `aria-label` still has an accessible name, so this is a visual-only failure that a11y tests will not catch. Import `@uxelle/icons/register` in the host, or type names with `UxelleIconName` from `@uxelle/icons`. By default, icons are hidden from screen readers (`aria-hidden="true"`) as they are typically decorative. Provide an `aria-label` when the icon conveys meaningful information.

package/skills/uxelle-components/NavLink.md

@@ -17,7 +17,7 @@ Primary or secondary navigation item with Navigation Link typography.
 | trailingIconName | `string` | `"keyboard_arrow_down"` | Material Symbol name for the trailing icon. Ignored when `trailingIcon` is false, and overridden by the menu chevron when `withMenu` is true. |
 | iconVariant | `"sharpUnfilled" \| "sharpFilled"` | `"sharpUnfilled"` | Fill style shared by both icons: `sharpUnfilled` for the outline glyph, `sharpFilled` for the solid one. |
 | navigationLevel | `"Primary" \| "Secondary"` | `"Primary"` | Which `Navigation` band the link sits in, so its colors match that surface: `Primary` for the main bar, `Secondary` for the sub-navigation bar. |
-| withMenu | `boolean` | `false` | Wraps the link in a `Menu` that opens `children` as a dropdown panel. The trigger stays a button (so `href` is ignored) and always shows a trailing `keyboard_arrow_down` that rotates 180° when open. |
+| withMenu | `boolean` | `false` | Wraps the link in a `Menu` (`pattern="menu"`, Tab dismisses) for overflow labeled More — not destination panels (`Menu` `pattern="disclosure"` with a `NavLink` trigger instead). The trigger stays a button (so `href` is ignored) and always shows a trailing `keyboard_arrow_down` that rotates 180° when open. |
 | href | `string` | `undefined` | Destination URL, which renders the link as an anchor instead of a button. Ignored when `withMenu` is true. |
 | children | `ReactNode` | `undefined` | Dropdown panel content — typically a `List` of `ListItem`s — shown when `withMenu` is true. Ignored otherwise; the visible text comes from `label`. |
 | className | `string` | `—` |  |
@@ -40,5 +40,5 @@ Primary or secondary navigation item with Navigation Link typography.
 ## Notes
 
 - Renders as an anchor when `href` is set; otherwise a button.
-- Set `withMenu` and pass panel `children` for dropdown overflow items. `href` is ignored while `withMenu` is true so the trigger stays a button. A trailing `keyboard_arrow_down` icon is shown and rotates 180° when open.
+- Set `withMenu` for overflow items labeled More. Destination panels use `Menu` `pattern="disclosure"` with a `NavLink` trigger (no `href`) so Tab walks links. `href` is ignored while `withMenu` is true so the trigger stays a button. A trailing `keyboard_arrow_down` icon is shown and rotates 180° when open.
 - Use `navigationLevel="Secondary"` in the secondary nav band so colors follow that surface.

package/skills/uxelle-components/Navigation.md

@@ -10,10 +10,10 @@ Two-tier navigation bar for enterprise applications.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| leadingSlot | `ReactNode \| null` | `undefined` | Start of the primary bar, typically a menu `IconButton`, a **Logo**, and a title lockup. Pass `null` to drop the region; omit to render the built-in placeholder branding. |
-| centerSlot | `ReactNode \| null` | `undefined` | Middle of the primary bar between the leading and trailing regions — typically a row of `NavLink`s. Pass `null` to drop the region; omit to render placeholder links. |
-| trailingSlot | `ReactNode \| null` | `undefined` | End of the primary bar, for utilities such as a search `IconButton`, a `LanguageSelector`, and a log-in `Button`. Pass `null` to drop the region; omit for the built-in utility set. |
-| bottomSlot | `ReactNode \| null` | `undefined` | Contents of the secondary bar below the primary bar, typically `NavLink`s with `navigationLevel="Secondary"`. Pass `null` to drop the secondary bar entirely; omit to render placeholder links. |
+| leadingSlot | `ReactNode \| null` | `undefined` | Start of the primary bar. Slots are open — any node is valid. Generation default: a **Logo** home control plus a two-line lockup (`Text` Condensed Alt for the site name, optional Condensed for location or a short descriptor). The compact (below-desktop) menu `IconButton` does not belong here unless asked. Pass `null` to drop the region; omit to render the built-in placeholder branding. |
+| centerSlot | `ReactNode \| null` | `undefined` | Middle of the primary bar. Slots are open. Generation default: `null` (destinations live in a trailing **Sheet**). Fill from desktop up with **Menu** `pattern="disclosure"` category triggers when the IA is two or more levels deep (`NavLink withMenu` is overflow More only). Pass `null` to leave the middle empty (blank space between leading and trailing); omit to render placeholder links. |
+| trailingSlot | `ReactNode \| null` | `undefined` | End of the primary bar. Slots are open. Generation default: utilities (search, session) plus, below desktop, the menu `IconButton` that opens a **Sheet** from this side. Pass `null` to drop the region; omit for the built-in utility set. |
+| bottomSlot | `ReactNode \| null` | `undefined` | Contents of the secondary bar. Generation default: `null` unless a persistent L2 module bar is needed (`NavLink`s with `navigationLevel="Secondary"`). Pass `null` to drop the secondary bar entirely; omit to render placeholder links. |
 
 <!-- prettier-ignore-end -->
 
@@ -22,40 +22,50 @@ Extends `HTMLAttributes` — supports standard HTML attributes.
 ## Usage
 
 ```tsx
+const [menuOpen, setMenuOpen] = useState(false);
+
 <Navigation
   leadingSlot={
     <>
-      <IconButton emphasis="low" size="medium" iconName="menu" iconVariant="sharpUnfilled" />
-      <Logo name="generic" className="uxl-navigation__logo" width={48} aria-hidden />
-      <Text type="Condensed Alt" truncation>Votre espace dédié</Text>
-    </>
-  }
-  centerSlot={
-    <>
-      <NavLink label="Menu Link" href="#" />
-      <NavLink label="Menu Link" href="#" />
+      <a href="/" aria-label="Home">
+        <Logo name="generic" width={48} interactive aria-hidden />
+      </a>
+      <Layout display="flex" flexDirection="column" gap={0}>
+        <Text type="Condensed Alt" truncation width={false}>Crop Science</Text>
+        <Text type="Condensed" truncation width={false}>United States</Text>
+      </Layout>
     </>
   }
+  centerSlot={null}
   trailingSlot={
     <>
       <IconButton iconName="search" aria-label="Search" emphasis="low" size="small" />
       <LanguageSelector value="EN" />
-      <Divider orientation="vertical" emphasis="low" />
-      <Button emphasis="low" size="small" trailingIcon trailingIconName="keyboard_arrow_down" trailingIconVariant="sharpUnfilled">Log In</Button>
-    </>
-  }
-  bottomSlot={
-    <>
-      <NavLink label="Menu Link" href="#" navigationLevel="Secondary" />
-      <NavLink label="Menu Link" href="#" navigationLevel="Secondary" />
+      <Button emphasis="low" size="small">Log In</Button>
+      <Sheet
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        direction="Right"
+        title=""
+        aria-label="Menu"
+        trigger={
+          <IconButton emphasis="low" size="small" iconName="menu" iconVariant="sharpUnfilled" aria-label="Menu" />
+        }
+      >
+        <List>
+          <ListItem interactive href="/about" centerText="About" bottomText="" onClick={() => setMenuOpen(false)} />
+        </List>
+      </Sheet>
     </>
   }
+  bottomSlot={null}
 />
 ```
 
 
 ## Notes
 
-- **Primary nav**: Leading, center, and trailing regions. Use slots for branding, main links, and utilities.
+- **Slots are open**: any node may go in `leadingSlot`, `centerSlot`, `trailingSlot`, or `bottomSlot`.
+- **Generation defaults** (overridable): lockup in leading (Logo as home, Condensed Alt name, optional Condensed location or descriptor), `centerSlot` `null` unless the IA is two or more levels deep, compact menu `IconButton` in `trailingSlot` below desktop opening a **Sheet** from that same side (`open` / `onOpenChange` to close after a leaf). Omit a slot for the built-in placeholder. Pass `null` to drop leading, trailing, or the secondary bar; `centerSlot={null}` leaves blank space between leading and trailing.
+- **Primary nav**: Leading, center, and trailing regions.
 - **Secondary nav**: Optional bottom bar for sub-navigation.
-- **Slots**: Pass `leadingSlot`, `centerSlot`, `trailingSlot`, and `bottomSlot` to customize each region. Omit a slot for the built-in placeholder; pass `null` to drop that region.

package/skills/uxelle-components/NavigationSide.md

@@ -10,9 +10,9 @@ App chrome for a vertical side rail, or a compact top bar on small layouts.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| expanded | `boolean` | `—` | Controlled rail width: wide labeled rail when true, icon-only rail when false. Pass with `onExpandedChange`; omit to let `defaultExpanded` and the built-in toggle own the width. Ignored when the mobile layout is shown. |
+| expanded | `boolean` | `—` | Controlled rail width: wide labeled rail when true, icon-only rail when false. Pass with `onExpandedChange`; omit to let `defaultExpanded` and the built-in toggle own the width. Ignored when the mobile layout is shown. Collapsing hides open nested destination lists; accordion parents of the current nested page show the selected appearance. |
 | defaultExpanded | `boolean` | `true` | Whether the rail starts wide and labeled (true) or icon-only (false) when `expanded` is omitted. The built-in toggle owns the width after mount. |
-| onExpandedChange | `(expanded: boolean) => void` | `—` | Called with the next width state each time the expand/collapse control is activated. Required to track the width when `expanded` is set. |
+| onExpandedChange | `(expanded: boolean) => void` | `—` | Called with the next width state each time the expand/collapse control is activated. Required to track the width when `expanded` is set. Collapsing hides open nested destination lists on accordion rows. |
 | mobile | `boolean` | `—` | Top-bar chrome when true; side rail when false. SSR hosts must pass `true` or `false` so server and client markup match. Omit only in client-only surfaces to follow the theme mobile range (`--uxl-theme-layout-mobile-screen-width-max`). The menu opens a right sheet with the same center and bottom slots as the rail. |
 | logoSlot | `boolean` | `true` | Renders the logo region on the expanded rail and the mobile top bar. Set `false` to leave it empty; the collapsed rail never shows the logo. |
 | logoSlotContent | `ReactNode` | `undefined` | Content for the logo region, typically a decorative **Logo**. Rendered only when `logoSlot` is true; omit for a neutral placeholder block. |
@@ -45,7 +45,7 @@ Extends `HTMLAttributes` — supports standard HTML attributes.
 ## Notes
 
 - **Rail**: Logo, expand/collapse control, `centerSlotContent` (`NavigationSideGroup` rows), and `bottomSlotContent`. Renders an `<aside>`. Groups remain named `<nav>` landmarks — do not wrap this chrome in another `nav`.
-- **Width**: Set `expanded` for the labeled rail and `expanded={false}` for the icon-only rail. Hosts own when to pass those values (tablet-and-up). This component does not hard-code those widths.
+- **Width**: Set `expanded` for the labeled rail and `expanded={false}` for the icon-only rail. Hosts own when to pass those values (tablet-and-up). This component does not hard-code those widths. Collapsing hides any open accordion nested lists (focus moves to the parent if a nested row had it) and shows the selected appearance on an accordion parent when a nested row is the current page. Expanding restores that open state unless the flyout was dismissed while collapsed.
 - **Mobile**: Pass `mobile` (`true` or `false`) in SSR so the first paint matches hydration. The server snapshot for an omitted `mobile` is always the rail, so a phone viewport would swap to the top bar on the client. Omit `mobile` only in client-only surfaces (for example Storybook) to follow the theme mobile range (`--uxl-theme-layout-mobile-screen-width-max`). When the mobile layout is shown, the menu control opens a right `Sheet` (no visible title, labeled Menu for assistive tech) with the same `centerSlotContent` and `bottomSlotContent` as the rail (labeled rows, not the collapsed icon rail). The logo stays on the top bar. Use `menuOpen` / `onMenuOpenChange` to control the sheet (for example to close it after navigation). `onMenuClick` still fires on the menu control.
 - **Slots**: Omit a slot to fill demo content. Pass `false` to leave a region empty. `logoSlot={false}` hides the logo on the expanded rail and the mobile bar.
 - **Bottom slot**: Typical account rows use `List` + `ListItem`. List item text stays on one line during the rail width transition (same as destination labels) so it is revealed horizontally instead of wrapping.

package/skills/uxelle-components/NavigationSideItem.md

@@ -17,10 +17,10 @@ Destination row for a vertical side navigation rail. Shows a leading icon, label
 | trailingSlotContent | `ReactNode` | `undefined` | Content for the trailing region, typically a `LabelBadge`, short text, or a decorative icon. Rendered only when `trailingSlot` is true, and it must stay non-interactive because it sits inside the row's own link or button. |
 | subNavigationItemsSlot | `ReactNode` | `undefined` | Nested `NavigationSideSubItem` rows revealed when `accordion` is true; takes precedence over `children`. On the collapsed rail they are re-rendered as a `List` of `ListItem`s inside the flyout. |
 | children | `ReactNode` | `undefined` | Nested `NavigationSideSubItem` rows revealed when `accordion` is true, used when `subNavigationItemsSlot` is omitted. Not the row label — that is `label`. On the collapsed rail they become a `List` of `ListItem`s in the flyout. |
-| activated | `boolean` | `false` | Marks this row as the current page: filled surface plus a leading indicator bar. Destination rows also get `aria-current="page"`; accordion parents do not, so set it on the matching child instead. |
+| activated | `boolean` | `false` | Marks this row as the current page: filled surface plus a leading indicator bar. Destination rows also get `aria-current="page"`; accordion parents do not, so set it on the matching child instead. When the rail is collapsed, an accordion parent also shows this selected appearance if any nested `NavigationSideSubItem` is activated (pass the sub item directly, not wrapped in a custom component). |
 | navCollapsed | `boolean` | `false` | Icon-only rail layout: hides the label, the trailing slot, and the inline accordion panel, and shows the label in a tooltip on hover and focus. Inherited from the enclosing `NavigationSideGroup` when omitted. |
 | accordion | `boolean` | `false` | Turns the row into an expandable parent with a trailing chevron that reveals its nested rows. The control is always a button, so `href` is ignored. |
-| open | `boolean` | `undefined` | Controlled expanded state of the accordion panel (or of the collapsed-rail flyout). Pass with `onOpenChange`; omit to use `defaultOpen` instead. |
+| open | `boolean` | `undefined` | Controlled expanded state of the accordion panel (or of the collapsed-rail flyout). Pass with `onOpenChange`; omit to use `defaultOpen` instead. Collapsing the rail hides an open nested list even if this stays true; pass `true` again (or let the user open the flyout) to show it while collapsed. |
 | defaultOpen | `boolean` | `false` | Whether the accordion panel starts expanded when `open` is omitted. |
 | onOpenChange | `(open: boolean) => void` | `undefined` | Called with the next expanded state each time the accordion parent toggles. |
 | notificationBadge | `boolean` | `false` | Overlays an unread dot on the leading icon. The dot itself is decorative; the state is folded into the control name as `"{label}, notifications"`. |
@@ -48,8 +48,8 @@ Destination row for a vertical side navigation rail. Shows a leading icon, label
 - Do not use as a top or header nav link (`NavLink`). Nested accordion destinations use `NavigationSideSubItem`.
 - Compose inside `NavigationSideGroup` (a `<nav>` list). This row is a list item; other HTML attributes (`aria-*`, `data-*`, `id`) go to the interactive control, and `className` is on the row wrapper.
 - Renders as an anchor when `href` is set; otherwise a button. Accordion parents are **not** destinations: `href` is ignored and the control is always a button. Put a section landing page in a `NavigationSideSubItem` child instead.
-- Set `activated` for the current page — fill and leading indicator. Destinations also set `aria-current="page"`; accordion parents do not. When a child is the current page, set `activated` on that child, not only on the parent.
-- Set `accordion` for a parent that reveals `subNavigationItemsSlot` (or `children`): `NavigationSideSubItem` rows (`href` for destinations). Omit `open` for uncontrolled (`defaultOpen` + `onOpenChange`). The trigger is a button with `aria-expanded` / `aria-controls`; the nested list animates open and closed (inert and `aria-hidden` when collapsed). When `navCollapsed` is also true, those rows open in a disclosure flyout (`Menu` `pattern="disclosure"`, `direction="Right Top"`) as a `List` of interactive `ListItem`s. Keyboard: Enter/Space toggles; Tab moves through destinations; Tab-out and Escape close and return focus to the trigger.
+- Set `activated` for the current page — fill and leading indicator. Destinations also set `aria-current="page"`; accordion parents do not. When a child is the current page, set `activated` on that child, not only on the parent. Collapsing the rail still shows the selected appearance on that accordion parent so the section remains visible on the icon-only rail.
+- Set `accordion` for a parent that reveals `subNavigationItemsSlot` (or `children`): `NavigationSideSubItem` rows (`href` for destinations). Omit `open` for uncontrolled (`defaultOpen` + `onOpenChange`). The trigger is a button with `aria-expanded` / `aria-controls`; the nested list animates open and closed (inert and `aria-hidden` when collapsed). Collapsing the rail hides any open nested list (and moves keyboard focus to the parent if a nested row had it). Expanding restores that open state unless the flyout was dismissed while collapsed. Opening a disclosure flyout from the collapsed parent is still available. When `navCollapsed` is also true, those rows open in a disclosure flyout (`Menu` `pattern="disclosure"`, `direction="Right Top"`) as a `List` of interactive `ListItem`s. Keyboard: Enter/Space toggles; Tab moves through destinations; Tab-out and Escape close and return focus to the trigger.
 - The leading icon is always shown. Group collapsed layout with `NavigationSideGroup` (`collapsed`) or set `navCollapsed`.
 - When `navCollapsed`, the visible label is hidden; pass `label` (or `aria-label`) for the accessible name. A tooltip shows the label on hover and focus.
 - When `notificationBadge` is true, the dot stays decorative; unread state is included in the control name (`"{label}, notifications"`). Override with `aria-label` when you need a different name.

package/skills/uxelle-components/NavigationSideSubItem.md

@@ -14,7 +14,7 @@ Nested destination row under an accordion side-nav parent.
 | leadingIcon | `boolean` | `true` | Renders the leading icon before the label. Set `false` for text-only nested rows, which is the usual look under an accordion parent. |
 | leadingIconName | `string` | `"outbound"` | Material Symbol name for the leading icon. Ignored when `leadingIcon` is false. |
 | iconVariant | `"sharpUnfilled" \| "sharpFilled"` | `"sharpUnfilled"` | Fill style for the leading icon: `sharpUnfilled` for the outline glyph, `sharpFilled` for the solid one. |
-| activated | `boolean` | `false` | Marks this row as the current page: filled surface, leading indicator bar, and `aria-current="page"`. Set it here rather than on the accordion parent. |
+| activated | `boolean` | `false` | Marks this row as the current page: filled surface, leading indicator bar, and `aria-current="page"`. Set it here rather than on the accordion parent. When the rail is collapsed, that parent also shows the selected appearance. |
 | href | `string` | `undefined` | Destination URL, which renders the row as an anchor instead of a button. Omit for a button that only reports clicks through `onClick`. |
 | className | `string` | `—` |  |
 
@@ -34,6 +34,6 @@ Nested destination row under an accordion side-nav parent.
 
 - Use as a child of an accordion `NavigationSideItem`, not as a top-level rail row (`NavigationSideItem`). Compose inside `NavigationSideGroup` so this row is a list item in the side `nav`.
 - Renders as an anchor when `href` is set; otherwise a button. `className` is on the row wrapper; other HTML attributes (`aria-*`, `data-*`, `id`) go to the interactive control.
-- Set `activated` for the current page — fill, leading indicator, and `aria-current="page"`.
+- Set `activated` for the current page — fill, leading indicator, and `aria-current="page"`. When the rail is collapsed, the accordion parent also shows the selected appearance so the section remains visible on the icon-only rail.
 - Set `leadingIcon={false}` to hide the icon.
-- When the parent accordion is collapsed (`navCollapsed`), this row is presented as a `ListItem` in the disclosure flyout (a list of links, not a menu).
+- When the parent accordion is collapsed (`navCollapsed`), this row is presented as a `ListItem` in the disclosure flyout (a list of links, not a menu). Collapsing the rail hides an open nested list; the parent can still open the flyout.

package/skills/uxelle-components/SKILL.md

@@ -221,7 +221,12 @@ Use `List` + `ListItem` for menus and lists. Prefer `centerText` / `bottomText`
 Prefer **`ListControls`** when each row has title/description plus an embedded trailing control (settings and exclusive choices). Page layout: harness [recipe-settings-page.md](../uxelle-design-harness/recipe-settings-page.md). Set **`controlType`** to **`switch`**, **`checkbox`**, or **`radio`**. Same selection roles as **`RadioGroup`** / **`CheckboxGroup`** for checkbox/radio, list layout instead of stacked form options. Use **`interactive`** **`ListItem`** rows with **`embedded`** Switch / Checkbox / Radio in **`trailing`**. Set **`dense`** on **`ListControls`** (or per **`ListItem`**) for compact row padding.
 
 ### Icon variants
-Icons use `sharpFilled` or `sharpUnfilled`. Default is `sharpUnfilled`.
+Icons use `sharpFilled` or `sharpUnfilled`. Default is `sharpUnfilled`. GPF chrome
+names always resolve from `@uxelle/components`. Any other Material Symbol requires
+`import "@uxelle/icons/register"` in the host (`@uxelle/a2ui` already does this).
+Unknown names render no glyph (empty span, production-silent) — a visual-only miss
+that a11y tests will not catch on icon-only buttons that already have `aria-label`.
+Type product names with `UxelleIconName` from `@uxelle/icons`.
 
 ### Theme tokens
 Generated app CSS uses `--uxl-color-switcher-*` and layout/page-chrome tokens. Do not use `--uxl-component-*` in app CSS (those tokens belong inside components). Focus rings on catalog controls already use `--uxl-color-switcher-interactive-icon`.