@uxelle/skills 0.2.1-beta.0 → 0.2.3

package/index.json

@@ -1,10 +1,10 @@
 {
   "schemaVersion": 1,
-  "version": "0.2.1-beta.0",
+  "version": "0.2.3",
   "skills": [
     {
       "name": "uxelle-components",
-      "description": "Reference for uxElle Generative Product Foundation (GPF) components. Use when generating UI with uxElle, implementing designs, building layouts, or when the user mentions uxElle components, design system, or enterprise UI.",
+      "description": "Reference for uxElle Generative Product Foundation (GPF) components. Use when generating UI with uxElle, implementing designs, building layouts, installing or setting up a React or Next.js app with @uxelle/components, loading theme CSS, or when the user mentions uxElle components or enterprise UI.",
       "files": [
         {
           "path": "Accordion.md",
@@ -68,13 +68,13 @@
         },
         {
           "path": "ChoiceChip.md",
-          "size": 3796,
-          "hash": "sha256:9c2dc57310d28631817bb75acd151a9c23ff5644d19cb345c7bd65fa8d75797a"
+          "size": 4061,
+          "hash": "sha256:6d3233c0895eb04bad20f0adb1818e0f591afa94c2cd3dba36d3d7af1baa4ee8"
         },
         {
           "path": "ChoiceChipGroup.md",
-          "size": 4756,
-          "hash": "sha256:91de9bc2984cbfb640e1ba117661fcfd7633bb9c16ef3f3b2b9fd7c2d1f0c032"
+          "size": 4999,
+          "hash": "sha256:97f3f8c26837e0adb78b7bea234e04160c58819dc8ff4664f8852a9080da54cc"
         },
         {
           "path": "DatePicker.md",
@@ -138,28 +138,33 @@
         },
         {
           "path": "FilterChip.md",
-          "size": 2891,
-          "hash": "sha256:da8c799773f8f94c82a29f777015d1516cedec9bb53d042fd079ff2b4dd25a41"
+          "size": 3290,
+          "hash": "sha256:feaa21e3cf7b095ea8f9d37bc84693206bf479209ee8a7b4a77ccb66c5028e4d"
         },
         {
           "path": "FilterChipGroup.md",
-          "size": 4369,
-          "hash": "sha256:fa8e1c2544071de8fc268c0c4aceda4ddea9aebe62f63b4bc32894632d857aa5"
+          "size": 4422,
+          "hash": "sha256:811a57ccac9b6777f8264651e52ca0ccb13da9bad3c428fe5ad8ffe324ed0772"
         },
         {
           "path": "Footer.md",
           "size": 1276,
           "hash": "sha256:e2ca30ae7eba1e8c206d70791f4636a66e4f654059dbddda1b508bfd08e7b5c2"
         },
+        {
+          "path": "getting-started.md",
+          "size": 3387,
+          "hash": "sha256:5aa1009aaf71d2d45d8f57198ee52942d4220d031948357c646b799b19ffd34f"
+        },
         {
           "path": "Hero.md",
-          "size": 3330,
-          "hash": "sha256:56619429625460a459b3ea7c37379769342628b35e461ed2614fe233fb99ebbc"
+          "size": 3578,
+          "hash": "sha256:e79223c6415b55c68cbe9d86e00d19a66ff369f43d6158231356cc409055a419"
         },
         {
           "path": "Icon.md",
-          "size": 2218,
-          "hash": "sha256:bfde859f04937c40b1ce2f3b386e9b059e3781878b1bb91471e688de605ccf1b"
+          "size": 2948,
+          "hash": "sha256:c467d672c13c5d52120618d5f932454e5f3a8dbd5f8bdd2e1498b26f676d523d"
         },
         {
           "path": "IconButton.md",
@@ -168,8 +173,8 @@
         },
         {
           "path": "Image.md",
-          "size": 2065,
-          "hash": "sha256:75ee6ba8c65372ecbbf013c264b2bafaac509847949fb08d571538179c053560"
+          "size": 3893,
+          "hash": "sha256:37e001e0dde7ec499fe1d2ac3a805402972d12e64fc773991579310ff6738a7a"
         },
         {
           "path": "Label.md",
@@ -238,8 +243,8 @@
         },
         {
           "path": "MultiSelect.md",
-          "size": 5923,
-          "hash": "sha256:2bf934ef37ddb1a39867fa5167bfc6693477b2dff72b37684446315570e2562e"
+          "size": 6171,
+          "hash": "sha256:1b106b8d5368b4236e1671e0000545fb41dea75ff6ffc67595ec33a360a04f17"
         },
         {
           "path": "Navigation.md",
@@ -248,8 +253,8 @@
         },
         {
           "path": "NavigationSide.md",
-          "size": 5005,
-          "hash": "sha256:32386fd82517e9d74561b4c05b8a7b0951532fcf1ab80b038fe7bde376b96752"
+          "size": 5474,
+          "hash": "sha256:ffe9e9a88ade7c6cef99c1953e4e265afce446d616af366fd4b63206517396bf"
         },
         {
           "path": "NavigationSideGroup.md",
@@ -258,13 +263,13 @@
         },
         {
           "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",
@@ -323,8 +328,8 @@
         },
         {
           "path": "Select.md",
-          "size": 6032,
-          "hash": "sha256:546f35666100ff9e3fc65c9b8a07908e3f73182abca021518f34b6f9b4118e47"
+          "size": 6321,
+          "hash": "sha256:629e02b1014c0134b8c2a0f8716e2e161ac268a502b64568429d5060f68ccd06"
         },
         {
           "path": "Sheet.md",
@@ -338,8 +343,8 @@
         },
         {
           "path": "SKILL.md",
-          "size": 13949,
-          "hash": "sha256:ea3ea17c6e11456ace3d1890d9cacdadd2eac8f2ff2e6ec4e68e697184928944"
+          "size": 14816,
+          "hash": "sha256:a15ed6eb6c149096d9cb6376ee47e17700cbf36ed498edd176232ff87f78d94b"
         },
         {
           "path": "Spinner.md",
@@ -348,8 +353,8 @@
         },
         {
           "path": "StatTile.md",
-          "size": 7820,
-          "hash": "sha256:e9330341336d46ab38724a17e76548d8cd4081b06b1a483bfea6be642718ea9e"
+          "size": 8042,
+          "hash": "sha256:76a99c8ea47082659e625c59030d0cef527bd19d8d6cabd635e71016be13754d"
         },
         {
           "path": "Stepper.md",
@@ -368,8 +373,8 @@
         },
         {
           "path": "Table.md",
-          "size": 2727,
-          "hash": "sha256:bfe8aa99f3cd9ee3bea87f151c5f42f091f93d4dd47006c76e0ed456a18b7af8"
+          "size": 3695,
+          "hash": "sha256:5455212f7c8f0370d369702dc6198c95e37fbde14695823413b7930b8421eefd"
         },
         {
           "path": "TabsCompact.md",
@@ -409,163 +414,168 @@
       "files": [
         {
           "path": "a2ui.md",
-          "size": 3438,
-          "hash": "sha256:79acf8d1fb2df2dd82bf979f05807c4d2d0f75b4fafd94e32b31a103bdac86f4"
+          "size": 5279,
+          "hash": "sha256:9ebad576e8878251c6ce2210a7cab70066b30d04f0b38e1963b5eeb9f5c820e3"
+        },
+        {
+          "path": "density.md",
+          "size": 7471,
+          "hash": "sha256:1f819b3670222a54105b50c5c6f76059dd0e739b4b642c245be586e5c03f6e4a"
         },
         {
           "path": "how-to-accessibility.md",
-          "size": 3160,
-          "hash": "sha256:d84f9acbb4f9e55420f355acaeabca61533f5febc8d0ec688a4c9072b95ae501"
+          "size": 3732,
+          "hash": "sha256:c66c97e67182cb444fb9ff6f1b02db8da663f928a79bf31517008b9dc3f7a82e"
         },
         {
           "path": "how-to-color.md",
-          "size": 3724,
-          "hash": "sha256:de6a183f582582cf43f4eb901706dca062f36b8d27601fc442c8ada4f56d2bf8"
+          "size": 3923,
+          "hash": "sha256:a72c5a4d88d007d68e6b640bccba0434fdd2c23ae8f291a77bdaec8689163425"
         },
         {
           "path": "how-to-host.md",
-          "size": 3080,
-          "hash": "sha256:b3cbd747f0913075e0db35747dc47e088b291bcf7a128a14648b6bf5c12e7009"
+          "size": 2856,
+          "hash": "sha256:05187f27fb791bc18c613354635d5d68a044454c166dfce0925116adca3a6cba"
         },
         {
           "path": "how-to-page-layout.md",
-          "size": 8414,
-          "hash": "sha256:9f6eb01b3a160d0ef6bc809fa416d2134869b3da31c3cc95039e906798454603"
+          "size": 10962,
+          "hash": "sha256:b01626a0661950a5bbb9a7def38e82b6b3ce9ded32a328edd72aa5c256588a84"
         },
         {
           "path": "principles.md",
-          "size": 4174,
-          "hash": "sha256:1d1a83cf5af7a32e4758cf1c7cd3da54f711ff6aae15dd12a8c1ad4a554c9fbe"
+          "size": 4551,
+          "hash": "sha256:7e93db6f61f469237feb5405b61f2d49e5aeef4d15425efdaa947bfafb6aabc8"
         },
         {
           "path": "recipe-app-chrome.md",
-          "size": 9152,
-          "hash": "sha256:8d42d4fba9c8df38a72394a2512c584ad271855edf58013116f598c232d6b777"
+          "size": 10042,
+          "hash": "sha256:225ebbfabfa65538c9275744c4cc6e5cc7798a36ab496643b41283efae3ea1a3"
         },
         {
           "path": "recipe-card-grid.md",
-          "size": 3411,
-          "hash": "sha256:1ceb77d6de97f560b34c2de166142fc78fb3eb7c81e9af40262f59c2c1ceeffd"
+          "size": 4099,
+          "hash": "sha256:3e594d337994417cf391f31222464c99fc84b9f4f251560c82d8f3501bdee5f4"
         },
         {
           "path": "recipe-cta-band.md",
-          "size": 3033,
-          "hash": "sha256:5d3973dc04c2cffd8beeb2c1e0c8f20eaefe9c047f090e70b6e01641cc84eb1a"
+          "size": 3645,
+          "hash": "sha256:4259be1f810e29abe43400010bde395ebf3e3e7ed7dc465b1c58d6ed87f3154c"
         },
         {
           "path": "recipe-dashboard-overview.md",
-          "size": 4004,
-          "hash": "sha256:ab2e8a60dc61444564eb352a35d2a9a2be152e8b493d898e0f0aadbd87676d6e"
+          "size": 4857,
+          "hash": "sha256:4fe4573d6eb09730c1737875c835ca9b939cd3d8e8587ecae09ba7331b2ff8d7"
         },
         {
           "path": "recipe-data-table-page.md",
-          "size": 14766,
-          "hash": "sha256:45dfcc1ef9ba681715e9a1b34e7e691870966d09f9851d5d416f6753c389bf55"
+          "size": 14334,
+          "hash": "sha256:3133781fb670d44f0d0e6c25c75520272800127d4a11dab00b0bebcccf75f53c"
         },
         {
           "path": "recipe-feature-section.md",
-          "size": 3239,
-          "hash": "sha256:8f77b15b331599bb384c02567fee0b2215691c69a76d364c29580b0930de1a7b"
+          "size": 3422,
+          "hash": "sha256:4e6927fe2efdc1eafc94511037a4cdeb528896e377eebaef16728f7a29cffe20"
         },
         {
           "path": "recipe-footer.md",
-          "size": 7107,
-          "hash": "sha256:534369d865b44b752c51cc60d0c141c9e8f476ac59462e7d2013c5c0dc8dab9b"
+          "size": 7241,
+          "hash": "sha256:8c2bd3e9b3c88c7444b2d9a92308f883541cb61cd8f039d757ca885ba9d122af"
         },
         {
           "path": "recipe-form-section.md",
-          "size": 8676,
-          "hash": "sha256:ef5c72a29137302c7c939c666574c639abe3f737d32eccc6e8218e13bd4cbbf1"
+          "size": 9125,
+          "hash": "sha256:dfdac68a0788e17fe48a5b8084717bbac7f59a80b0fbfcb1622ce2421211706c"
         },
         {
           "path": "recipe-hero.md",
-          "size": 3138,
-          "hash": "sha256:a3276a485257f8ba745482b75d9ca368812918d6f6a3e9dc351c2ddedffcc817"
+          "size": 4106,
+          "hash": "sha256:14a1e862832226591244646ff442cf46b25ca8e088c2f15b0376a8ac8bde0cc2"
         },
         {
           "path": "recipe-landing-page.md",
-          "size": 3513,
-          "hash": "sha256:fdab8439e7a21ba901cc86c577092f9765a33d822044b66384b4c02c473a18cf"
+          "size": 4900,
+          "hash": "sha256:7cf05d3d24e98b680e28f52b9691c59f881b420993f7af2ed1adc6ef1279ccc1"
         },
         {
           "path": "recipe-logo-wall.md",
-          "size": 2702,
-          "hash": "sha256:d9ffed408a5dd0adeab19bc425413432db143fc12c2b58b73b49c31b5c608c40"
+          "size": 2920,
+          "hash": "sha256:6b9c2199a0a18d20cf8350013ebbba4f9a8c94f4d5b50642d93ac1551c054eff"
         },
         {
           "path": "recipe-multi-step-flow.md",
-          "size": 3712,
-          "hash": "sha256:4921735a867d6635bc7a0152e2045fbcffb94b5ba047004fbbd5720e46080077"
+          "size": 3876,
+          "hash": "sha256:351069ddf1e5d085d9f1a89caa47c368874b5d15d4cb9a53e9e1691c3df44a14"
         },
         {
           "path": "recipe-page-header.md",
-          "size": 3483,
-          "hash": "sha256:83728fd741f2518ef97d927ea5bb33969b1609a1fca38ceb836ed733178cb42f"
+          "size": 4161,
+          "hash": "sha256:7487c48c7ea6ba57a613d9e91b4b4a1c6271ea27120f4a3c857dc1501dfce518"
         },
         {
           "path": "recipe-page-shell.md",
-          "size": 3537,
-          "hash": "sha256:1392b86cafabeeb375b62d791804f8d4012345a72716cac6f80824253beb842e"
+          "size": 3826,
+          "hash": "sha256:0e87856ed26f73a19cc057f63c505bfce7a6973b2f389f257ffdde9bac64faca"
         },
         {
           "path": "recipe-pricing.md",
-          "size": 3106,
-          "hash": "sha256:babee8bad4e2a8ddaf3baf5fbbddf82914a2f910be0c52e2b4df2e191407a084"
+          "size": 3374,
+          "hash": "sha256:072d554945710df4b2a2be3c78836a3aa1d0b910bace362c2838272130e152e1"
         },
         {
           "path": "recipe-query-bar.md",
-          "size": 4024,
-          "hash": "sha256:caeb50b6bf583bc55963fa225677d9adb0701db7e705219f380490e450767739"
+          "size": 4990,
+          "hash": "sha256:d63bc538947160d1cf14209c9777233bc78e9cc1b2b52278b21b7959ff4e06c2"
         },
         {
           "path": "recipe-record-detail.md",
-          "size": 3249,
-          "hash": "sha256:8322cff9a5a1b344e10b7e63f25297d5cdfe58e21b6d53419910ef75acb2ef53"
+          "size": 3480,
+          "hash": "sha256:1d21484544c0307fc409570aeacf5f10bd03cde564e91e32ad271d46b29c7da6"
         },
         {
           "path": "recipe-settings-page.md",
-          "size": 7978,
-          "hash": "sha256:837984d7079f0334b5c3f12a7490f7febdca050ecb4ec675284f4e17259a7ec4"
+          "size": 8287,
+          "hash": "sha256:eda9f10d2367b9bab26ef66ae471d65f6189c410829ea2176c07d6b1a82f89f8"
         },
         {
           "path": "recipe-stat-callouts.md",
-          "size": 3684,
-          "hash": "sha256:b0f0c70364f797265413b40b741e349f1e88429bf3e1bd9fc9c020cce37730ee"
+          "size": 4207,
+          "hash": "sha256:ef84f56f302f623b990dff4e5051256642a41cf2dabab0e102ddf030bff4f61c"
         },
         {
           "path": "recipe-states.md",
-          "size": 3684,
-          "hash": "sha256:9d25de854ed1ea06a74412aa26f3e238d559977075aa02877ef17f2a398b8605"
+          "size": 4150,
+          "hash": "sha256:cda9dedd98d44e1eddcb25b1cca721f686e15a7642d53ebcfe926c8241cca38d"
         },
         {
           "path": "recipe-summary-list.md",
-          "size": 2808,
-          "hash": "sha256:c3ee287cdac7986994d53041cf2d6cf461018d039dca6224bd01e01275ef3b9a"
+          "size": 2951,
+          "hash": "sha256:a7fad25286bc6b6e357acfcc2b1afb5c562078b3bf633a190ad68648b2748cc4"
         },
         {
           "path": "recipe-template.md",
-          "size": 3268,
-          "hash": "sha256:9117d2cfccb0c1d33ebb05272b7fac5d98f92570f44dff06b0072e7a72a1d45e"
+          "size": 3703,
+          "hash": "sha256:d3fe331af035c4af72d143b0d65ebba7a719a6b104af34ef7939afb1f05ef14a"
         },
         {
           "path": "recipe-testimonial.md",
-          "size": 2324,
-          "hash": "sha256:ee43cacccda063d1843759d117153e5ae658d2a0f0130c504e3d62dabedc9171"
+          "size": 2453,
+          "hash": "sha256:7a755896fb14b0d3f4771ead61996f494033bb856e6ac847dfb78eb216bfce6c"
         },
         {
           "path": "SKILL.md",
-          "size": 9065,
-          "hash": "sha256:e9b12497656c5258cb88968548689a8e4a960b701861012c853c0b969dc946d4"
+          "size": 10810,
+          "hash": "sha256:096a85cb85d2fe413bc5f2abb241c45ea6e59dfc3b9547a00b639c7739fc014e"
         },
         {
           "path": "spacing-steps.md",
-          "size": 2379,
-          "hash": "sha256:f2b089b1575994f2f15b6220e76436e475c45c57efa6951aecbf497fa31bdb81"
+          "size": 2959,
+          "hash": "sha256:dcfcadc6371c478bd80f796231502fdaf65548914cda7786457a26e59b37e8ab"
         },
         {
           "path": "tokens.md",
-          "size": 4547,
-          "hash": "sha256:de72dee7c0334a6dc074f02223e5142a53742c8889baac4402a18d3d74a5bba3"
+          "size": 6758,
+          "hash": "sha256:69af34fc3fbfbf63a7796c2c49dc123c4cefc7b8553c3678b86bce6cd33dcdaf"
         }
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxelle/skills",
-  "version": "0.2.1-beta.0",
+  "version": "0.2.3",
   "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/ChoiceChip.md

@@ -41,4 +41,4 @@ Toggle pill for choice sets (facets, sort, view options).
 
 ## Notes
 
-- Uses `checked` / `defaultChecked` with `aria-pressed`. Checked chips show a leading check. Selection policy (single vs multi) is owned by the app — this control only toggles itself. Compose in **ChoiceChipGroup**. For exclusive single-select, keep one checked value in app state and set `role="radiogroup"` on the group. Use **FilterChip** for dismissible applied filters. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values. Controlled: set `checked` from `onChange` (next pressed value). Uncontrolled: `defaultChecked` is mount-only.
+- Uses `checked` / `defaultChecked` with `aria-pressed`. Checked chips show a leading check. Unchecked labels use **Text** type `Condensed`; checked labels use `Condensed Alt`. Pass `label` as a string — do not wrap a `Text` node. Selection policy (single vs multi) is owned by the app — this control only toggles itself. Compose in **ChoiceChipGroup**. For exclusive single-select, keep one checked value in app state and leave `role="group"`. ChoiceChip stays a toggle button (`aria-pressed`), not a radio — use **RadioGroup** or **SegmentedControl** when you need radio semantics. Use **FilterChip** for dismissible applied filters. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values. Controlled: set `checked` from `onChange` (next pressed value). Uncontrolled: `defaultChecked` is mount-only.

package/skills/uxelle-components/ChoiceChipGroup.md

@@ -17,7 +17,7 @@ Groups choice toggles under an optional legend, wrapping to new rows as needed.
 | fieldMessageType | `"Info" \| "Danger" \| "Warning" \| "Success"` | `CHOICE_CHIP_GROUP_DEFAULTS.fieldMessageType` | Tone of the wrapped **FieldMessage** — `Info`, `Danger`, `Warning`, or `Success`. Forced to `Danger` while `invalid` is true. `Danger` wires the message as `aria-errormessage` and announces it politely; other tones link through `aria-describedby`. |
 | required | `boolean` | `false` | Sets `aria-required` on the fieldset and shows the **Label** asterisk while a legend is visible. No native validation is enforced — the app owns that. |
 | invalid | `boolean` | `false` | Sets `aria-invalid="true"` and shows a Danger field message (uses `fieldMessage` when set, otherwise a default error string). Also wires `aria-errormessage` and announces the message politely. `aria-invalid={true}` does the same; `false` is treated as omitted so this prop can still apply. |
-| role | `string` | `"group"` | ARIA role on the fieldset. Keep `group` for independent toggles; switch to `radiogroup` only when the app enforces exclusive selection and the chips carry matching roles. |
+| role | `string` | `"group"` | ARIA role on the fieldset. Default `group`. Chip children are not radio buttons — do not set `radiogroup`. For exclusive choice, keep one checked value in app state. Use **RadioGroup** or **SegmentedControl** for radio semantics. |
 | "aria-label" | `string` | `""` | Accessible name for the fieldset, used only when no legend is showing. Prefer a visible legend via `label` and `labelText`; this value is dropped while one renders. |
 | "aria-labelledby" | `string` | `""` | IDs of elements that name the fieldset when no legend renders, space-separated. Dropped while a legend is showing, since the legend already names the group. |
 | "aria-describedby" | `string` | `""` | IDs of elements describing the group, space-separated. Merged with the field-message region id for non-`Danger` messages rather than replacing it. |
@@ -38,7 +38,7 @@ Groups choice toggles under an optional legend, wrapping to new rows as needed.
 
 ```tsx
 // Exclusive single-select (app-owned)
-<ChoiceChipGroup label labelText="Sort by" role="radiogroup">
+<ChoiceChipGroup label labelText="Sort by">
   <ChoiceChip label="Relevance" checked onChange={() => {}} />
   <ChoiceChip label="Newest" onChange={() => {}} />
 </ChoiceChipGroup>
@@ -47,4 +47,4 @@ Groups choice toggles under an optional legend, wrapping to new rows as needed.
 
 ## Notes
 
-- Pass **ChoiceChip** children. Root is a **`fieldset`** with default **`role="group"`**; name it with the legend (`label` + `labelText`) or `aria-label` / `aria-labelledby`. Selection policy (single vs multi) is app-owned — this group does not enforce exclusivity. Keep **`role="group"`** for independent toggles. For exclusive single-select, keep one checked value in app state and set **`role="radiogroup"`** on the group. Form parity: **`fieldMessage`**, **`required`**, **`invalid`**, and merged **`aria-describedby`** / **`aria-errormessage`**. For dismissible applied filters, use **FilterChipGroup**. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values.
+- Pass **ChoiceChip** children. Root is a **`fieldset`** with default **`role="group"`**; name it with the legend (`label` + `labelText`) or `aria-label` / `aria-labelledby`. Each chip owns its label type: `Condensed` when unchecked, `Condensed Alt` when checked. Selection policy (single vs multi) is app-owned — this group does not enforce exclusivity. Keep **`role="group"`**. For exclusive single-select, keep one checked value in app state — the chips remain `aria-pressed` toggles. Do not set **`role="radiogroup"`** (that role requires radio children). Use **RadioGroup** or **SegmentedControl** for radio semantics. Form parity: **`fieldMessage`**, **`required`**, **`invalid`**, and merged **`aria-describedby`** / **`aria-errormessage`**. For dismissible applied filters, use **FilterChipGroup**. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values.

package/skills/uxelle-components/FilterChip.md

@@ -10,7 +10,7 @@ Removable pill for an applied filter value.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| label (required) | `string` | `"Filter Chip"` | Filter value shown on the chip; also seeds the remove control's default name (`Remove {label}`). Whitespace is trimmed, an empty result renders no chip, and long values are not truncated. |
+| label (required) | `string` | `"Filter Chip"` | Filter value shown on the chip; also seeds the remove control's default name (`Remove {label}`). Whitespace is trimmed, an empty result renders no chip. The label hugs content so chips wrap as units; it ellipsizes only when the chip itself is narrower than the label, so the dismiss control stays visible. |
 | disabled | `boolean` | `false` | Applies disabled styling and blocks dismissal — the remove control ignores clicks and keys, and arrow-key navigation inside **FilterChipGroup** skips it. |
 | leadingIcon | `boolean` | `false` | Adds a decorative icon before the label, useful for showing which facet the value belongs to. |
 | leadingIconName | `string` | `"add"` | Material Symbol drawn before the label. Ignored unless `leadingIcon` is `true`. |
@@ -32,4 +32,4 @@ Removable pill for an applied filter value.
 
 ## Notes
 
-- Always requires `onRemove` — the chip’s job is to represent a filter that can be dismissed. Root is a non-interactive `span` so the dismiss Icon Button nests correctly; the surface does not use hover/pressed fills. Prefer **ChoiceChip** for selectable option sets. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values. Keyboard: focus the remove control, then **Enter** / **Space** or **Delete** / **Backspace** to dismiss. Inside **FilterChipGroup**, arrow keys move between chips (one Tab stop for the set). Removal is announced via a polite live region.
+- Always requires `onRemove` — the chip’s job is to represent a filter that can be dismissed. The label uses **Text** type `Condensed`. Pass `label` as a string — do not wrap a `Text` node. The label hugs content so chips wrap as whole units in **FilterChipGroup**. When a single chip is wider than its container, the label ellipsizes so the dismiss control stays visible. Root is a non-interactive `span` so the dismiss Icon Button nests correctly; the surface does not use hover/pressed fills. Prefer **ChoiceChip** for selectable option sets. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values. Keyboard: focus the remove control, then **Enter** / **Space** or **Delete** / **Backspace** to dismiss. Inside **FilterChipGroup**, arrow keys move between chips (one Tab stop for the set). Removal is announced via a polite live region.

package/skills/uxelle-components/FilterChipGroup.md

@@ -39,4 +39,4 @@ Groups dismissible applied-filter chips under an optional legend, wrapping to ne
 
 ## Notes
 
-- Pass **FilterChip** children. Root is a **`fieldset`** with default **`role="group"`**; name it with the legend (`label` + `labelText`) or `aria-label` / `aria-labelledby`. Keyboard: one Tab stop into the set; **Arrow** keys move between remove controls; **Delete** / **Backspace** dismisses the focused chip. Removals are announced politely. Form parity: **`fieldMessage`**, **`required`**, **`invalid`**, and merged **`aria-describedby`** / **`aria-errormessage`**. For choice option toggles, use **ChoiceChipGroup**. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values.
+- Pass **FilterChip** children. Root is a **`fieldset`** with default **`role="group"`**; name it with the legend (`label` + `labelText`) or `aria-label` / `aria-labelledby`. Each child’s label uses **Text** type `Condensed`. Keyboard: one Tab stop into the set; **Arrow** keys move between remove controls; **Delete** / **Backspace** dismisses the focused chip. Removals are announced politely. Form parity: **`fieldMessage`**, **`required`**, **`invalid`**, and merged **`aria-describedby`** / **`aria-errormessage`**. For choice option toggles, use **ChoiceChipGroup**. There is no InputChip — compose entry (e.g. Textfield) with FilterChips for removable values.

package/skills/uxelle-components/Hero.md

@@ -11,7 +11,7 @@ Full-bleed marketing band with overlaid copy and actions.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | contentDirection | `"Left" \| "Right" \| "Bottom"` | `"Left"` | Where the content panel sits over the media. From the tablet breakpoint (678px) up, `Left` and `Right` pin a half-width, vertically centered panel to that edge, while `Bottom` keeps a full-width panel along the bottom. Below 678px all three collapse to the same full-width bottom panel. |
-| image (required) | `ReactNode` | `—` | Full-bleed media behind the hero. Pass a **direct** child `Image`, `img`, `picture`, or `video` — extra wrappers are unsupported and will not fill the media layer. Prefer `Image` for source, alt text, and optional overlay. Do not rely on `Image` aspect ratio — Hero owns the responsive crop. Keep this region non-interactive; put actions in `contentSlot`. |
+| image (required) | `ReactNode` | `—` | Full-bleed media behind the hero. Pass a **direct** child `Image`, `img`, `picture`, or `video` — extra wrappers are unsupported and will not fill the media layer. Prefer `Image` for source, alt text, and optional overlay. Do not set `Image` `aspectRatio` or box size (`width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`) — Hero owns the responsive crop. Keep this region non-interactive; put actions in `contentSlot`. |
 | contentSlot (required) | `ReactNode` | `—` | Overlay panel content, stacked in a column with theme gap — typically a `Lockup` plus a `ButtonGroup`. Required: the hero always renders the panel, and it is where any interactive content belongs. |
 | "data-color-switcher" | `string` | `—` | Color-switcher palette applied to the hero root, which drives the content panel surface and text colors. Falls back to `brand-1`; pass another palette name such as `brand-2` or `neutral` to override it. |
 
@@ -58,4 +58,4 @@ Full-bleed marketing band with overlaid copy and actions.
 
 ## Notes
 
-- Pass media in `image` as a direct child `Image`, `img`, `picture`, or `video` (wrappers are unsupported) and composed intro content in `contentSlot` (usually `Lockup` and `ButtonGroup`). `contentDirection` controls panel placement: `Left` / `Right` for side panels on tablet and up, `Bottom` for a full-width bottom panel at every size. Below the tablet breakpoint, `Left` and `Right` use the bottom panel layout. Content-area spacing remaps through theme breakpoint aliases that currently start at 375px — widths below that need a theme update before spacing sign-off. The root defaults to `data-color-switcher="brand-1"`; pass a different attribute to override. Do not add a landmark role by default — pass `role="region"` with `aria-label` or `aria-labelledby` when a named region is needed. Remaining HTML attributes are forwarded to the root element.
+- Pass media in `image` as a direct child `Image`, `img`, `picture`, or `video` (wrappers are unsupported) and composed intro content in `contentSlot` (usually `Lockup` and `ButtonGroup`). `contentDirection` controls panel placement: `Left` / `Right` for side panels on tablet and up, `Bottom` for a full-width bottom panel at every size. Below the tablet breakpoint, `Left` and `Right` use the bottom panel layout. Content-area spacing remaps through theme breakpoint aliases that currently start at 375px — widths below that need a theme update before spacing sign-off. The root defaults to `data-color-switcher="brand-1"`; pass a different attribute to override. Do not add a landmark role by default — pass `role="region"` with `aria-label` or `aria-labelledby` when a named region is needed. Remaining HTML attributes are forwarded to the root element. Nested `Image` `aspectRatio` and box size (`width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`) have no effect — this component sizes the media layer.

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/Image.md

@@ -12,7 +12,13 @@ Responsive image that optionally crops its source to a selected aspect ratio.
 |------|------|---------|-------------|
 | src (required) | `string` | `""` | Source URL forwarded to the inner `img` element. Nothing renders in its place when the request fails, so guard missing values upstream. |
 | alt (required) | `string` | `""` | Text alternative announced by assistive technology. Describe what the image conveys, or pass an empty string to mark it decorative and drop it from the accessibility tree. |
-| aspectRatio | `"1:1" \| "4:3" \| "3:2" \| "16:9" \| "21:9" \| "3:4" \| "2:3"` | `undefined` | Crops the image to a fixed ratio — `1:1`, `4:3`, `3:2`, `16:9`, `21:9`, `3:4`, or `2:3`. The image fills the available width and covers the box, so overflow is trimmed; omit to keep the source's intrinsic proportions. |
+| aspectRatio | `"1:1" \| "4:3" \| "3:2" \| "16:9" \| "21:9" \| "3:4" \| "2:3"` | `undefined` | Crops the image to a fixed ratio — `1:1`, `4:3`, `3:2`, `16:9`, `21:9`, `3:4`, or `2:3` — and covers the box so overflow is trimmed. With `width` or `height` it sizes the missing axis; with both, the explicit box wins and this only crops. Omit to keep the source's intrinsic proportions. |
+| width | `string` | `""` | Layout width of the image box. Numbers are pixels; strings pass through as CSS (`400px`, `var(--uxl-…)`). Omit to fill the parent width. |
+| minWidth | `string` | `""` | Floor for the box width. Numbers are pixels; strings pass through as CSS. With `aspectRatio`, this clamps the computed width rather than replacing the ratio. |
+| maxWidth | `string` | `""` | Ceiling for the box width. Numbers are pixels; strings pass through as CSS. With `aspectRatio`, this clamps the computed width rather than replacing the ratio. |
+| height | `string` | `""` | Layout height of the image box. Numbers are pixels; strings pass through as CSS. With `aspectRatio` and no `width`, this sizes the box and the ratio computes width. Omit to size height from the source or from `aspectRatio`. |
+| minHeight | `string` | `""` | Floor for the box height. Numbers are pixels; strings pass through as CSS. With `aspectRatio`, this clamps the computed height rather than replacing the ratio. |
+| maxHeight | `string` | `""` | Ceiling for the box height. Numbers are pixels; strings pass through as CSS. With `aspectRatio`, this clamps the computed height rather than replacing the ratio. |
 | overlay | `"100" \| "200"` | `undefined` | Layers a decorative gradient wash over the image so text placed on top keeps contrast: `100` is a light wash, `200` a dark wash weighted to the bottom edge. Omit for no overlay. |
 
 <!-- prettier-ignore-end -->
@@ -27,6 +33,7 @@ Responsive image that optionally crops its source to a selected aspect ratio.
 <Image
   src="/images/hero.jpg"
   alt="Crop field at sunrise"
+  width={640}
   aspectRatio="21:9"
   overlay="200"
 />
@@ -35,6 +42,6 @@ Responsive image that optionally crops its source to a selected aspect ratio.
 
 ## Notes
 
-- When `aspectRatio` is set, the image fills its available width and uses `object-fit: cover` to preserve the ratio. Omit `aspectRatio` to keep the intrinsic proportions. Supply meaningful `alt` text when the image conveys information, or `alt=""` when it is decorative.
+- `width` and `height` size the layout box (numbers are pixels; strings pass through as CSS). `aspectRatio` is a preferred ratio used when at least one axis is still automatic: with only `width` it computes height, with only `height` it computes width, and with both the explicit box wins while the image still covers that box. `minWidth` / `maxWidth` and `minHeight` / `maxHeight` clamp the computed axis rather than replacing the ratio. Omit `aspectRatio` to keep the source's intrinsic proportions, except when `height` is set — then the image covers the box. Supply meaningful `alt` text when the image conveys information, or `alt=""` when it is decorative.
 - Set `overlay` to `"100"` or `"200"` to layer a decorative gradient wash for contrast (for example under text). The wash is non-interactive and hidden from assistive technologies.
-- This component is non-interactive. Wrap it in a link or button only when the surrounding experience requires an action, and name that control separately.
+- This component is non-interactive. Wrap it in a link or button only when the surrounding experience requires an action, and name that control separately. Inside Hero, omit `aspectRatio` and box-size props (`width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`) — Hero owns the media box.

package/skills/uxelle-components/MultiSelect.md

@@ -34,6 +34,7 @@ Multi-select dropdown with removable chips, label, optional `FieldMessage`, and
 | readOnly | `boolean` | `false` | Shows the selection as comma-separated text instead of chips, blocks opening the listbox, and hides the trailing chevron; the trigger stays focusable. |
 | required | `boolean` | `—` | Adds the asterisk to `Label` and `aria-required` on the trigger. Advisory only — no native constraint validation runs on the hidden inputs. |
 | name | `string` | `—` | Form field name for the hidden inputs that post the selection — one input per selected value, and none at all while nothing is selected. |
+| onClick | `MouseEventHandler<HTMLDivElement>` | `—` | Fired on the field chrome. `currentTarget` is the trigger wrapper, not the combobox input. |
 | disabled | `boolean` | `false` | Blocks interaction, collapses chips to comma-separated text, and removes the trigger from the tab order; a `name` hidden input still submits each selected value. |
 
 <!-- prettier-ignore-end -->
@@ -49,6 +50,6 @@ Multi-select dropdown with removable chips, label, optional `FieldMessage`, and
 ## Notes
 
 - Chips stay on one row when interactive; overflowed chips collapse to “and N more”. Read-only and disabled states show comma-separated text with truncation.
-- **Accessibility**: Visible label uses `<Label htmlFor>`; selected values render as Filter Chip–styled tags inside the combobox (standard tag-in-input pattern). Remove controls use `tabIndex={-1}` and are omitted from the accessibility tree; toggle selections via the listbox. Overflowed labels are included in a screen-reader-only summary on the combobox. Composable list rows should use `listboxOptionProps()`. `FieldMessage` uses `aria-describedby` (info) or `aria-errormessage` (error). Pass `id` for stable ids; use `aria-label` when `label={false}`.
-- **Focus**: Tab focuses the combobox trigger; **Arrow** keys move the active option while open. **Enter** / **Space** toggle the active option; **Escape** closes the list.
+- **Accessibility**: Visible label uses `<Label htmlFor>`; selected values render as Filter Chip–styled tags beside a readonly combobox `<input>` (standard tag-in-input pattern). Remove controls use `tabIndex={-1}` and are omitted from the accessibility tree; toggle selections via the listbox. The combobox `value` is the comma-separated selection summary, including overflowed labels. Composable list rows should use `listboxOptionProps()`. `FieldMessage` uses `aria-describedby` (info) or `aria-errormessage` (error). Pass `id` for stable ids; use `aria-label` when `label={false}`.
+- **Focus**: The combobox is a readonly `<input>` (not a `<button>`) so Safari's default Tab cycle can land on it. **Arrow** keys move the active option while open. **Enter** / **Space** toggle the active option; **Escape** closes the list.
 - **Forms**: With `name`, one hidden input is rendered per selected value.

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.