@uxelle/skills 0.2.1-beta.0 → 0.2.2

package/index.json

@@ -1,10 +1,10 @@
 {
   "schemaVersion": 1,
-  "version": "0.2.1-beta.0",
+  "version": "0.2.2",
   "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,23 +138,28 @@
         },
         {
           "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": 2276,
+          "hash": "sha256:c40148458f76df3bdd9a0cf85732cd09bbe621c5625d20c4251aa7f4bd808a90"
+        },
         {
           "path": "Hero.md",
-          "size": 3330,
-          "hash": "sha256:56619429625460a459b3ea7c37379769342628b35e461ed2614fe233fb99ebbc"
+          "size": 3578,
+          "hash": "sha256:e79223c6415b55c68cbe9d86e00d19a66ff369f43d6158231356cc409055a419"
         },
         {
           "path": "Icon.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",
@@ -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": 14408,
+          "hash": "sha256:de312111538d710c822a0212af2188584591d594d4f99ba7f3efb7a4435e9021"
         },
         {
           "path": "Spinner.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": 4779,
+          "hash": "sha256:e557e7caba1471f250a651f6449aa4b8e73b40e05c331dcbda25892b958ecd99"
+        },
+        {
+          "path": "density.md",
+          "size": 7471,
+          "hash": "sha256:1f819b3670222a54105b50c5c6f76059dd0e739b4b642c245be586e5c03f6e4a"
         },
         {
           "path": "how-to-accessibility.md",
-          "size": 3160,
-          "hash": "sha256:d84f9acbb4f9e55420f355acaeabca61533f5febc8d0ec688a4c9072b95ae501"
+          "size": 3554,
+          "hash": "sha256:c19043086e302c1681ae462efa9f7282a9e227aeb78dfe93bf66f6c4f4710bf7"
         },
         {
           "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": 2647,
+          "hash": "sha256:bdab3b08e77adaabcd582dff4b64838e0723ade66d5c9416be9111f9dc9b49cd"
         },
         {
           "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": 4708,
+          "hash": "sha256:a6a581ca179595535d9d3df0469d362d8e7175e5595bea3222a32733c66c4615"
         },
         {
           "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": 4017,
+          "hash": "sha256:fb3857880f691fd016cb1414ee788e3a9fdfc49f7e61376442965aa018896f6e"
         },
         {
           "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.2",
   "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/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/SKILL.md

@@ -1,6 +1,6 @@
 ---
 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.
 ---
 
 # uxElle Components — Generative Workflow Reference
@@ -10,6 +10,7 @@ Reference for accurately using uxElle Generative Product Foundation (GPF) compon
 ## Context discipline
 
 - Load this SKILL.md when working with uxElle components.
+- New app or host without packages and CSS? Read [getting-started.md](getting-started.md) first, then [how-to-host.md](../uxelle-design-harness/how-to-host.md). Skip getting-started when the host already loads theme CSS, component CSS, and `data-*`.
 - Load individual component files (e.g. Button.md, ListItem.md) only when you need that component's props or examples.
 - Do not preload all component files.
 
@@ -236,6 +237,7 @@ For secondary nav or brand hero bands: `data-color-switcher="brand-2"` on second
 
 ## Additional Resources
 
+- [Getting started](getting-started.md) — install `@uxelle/components` and `@uxelle/themes`, load CSS, theme provider, Next.js/SSR
 - [Design harness](../uxelle-design-harness/SKILL.md) — principles, variables, page chrome, responsiveness, WCAG AA, recipes
 - [Form field contract](../../docs/guides/form-field-contract.md) — HTML `value` / `checked` (not Figma `Selected` / `Activated`)
 - [Design variables (`--uxl-*`)](../uxelle-design-harness/tokens.md) — spacing, radius, elevation, color switcher, type

package/skills/uxelle-components/Select.md

@@ -34,6 +34,7 @@ Single-select dropdown with label, design tokens, optional `FieldMessage`, and l
 | readOnly | `boolean` | `false` | Shows the current selection but blocks opening the listbox and hides the trailing chevron; the trigger stays focusable and reports `aria-readonly`. |
 | required | `boolean` | `—` | Adds the asterisk to `Label` and `aria-required` on the trigger. Advisory only — no native constraint validation runs on the hidden input. |
 | name | `string` | `—` | Form field name for the hidden input that posts the selected value. No input is rendered while nothing is selected, so an empty selection is never submitted. |
+| onClick | `MouseEventHandler<HTMLDivElement>` | `—` | Fired on the field chrome. `currentTarget` is the trigger wrapper, not the combobox input. |
 | disabled | `boolean` | `false` | Blocks interaction, removes the trigger from the tab order, and applies disabled styling; a `name` hidden input still submits the current value. |
 
 <!-- prettier-ignore-end -->
@@ -51,5 +52,5 @@ Single-select dropdown with label, design tokens, optional `FieldMessage`, and l
 - **Simple API** — pass `options` with `value` / `onChange` for controlled usage; optional `leadingIcon` / `leadingIconName`.
 - **Composable API** — pass `children` to render custom `ListItem` rows in the listbox; pass `leading` for a custom leading slot. Each row should spread `listboxOptionProps()` plus selection handlers (see dev console when the list opens).
 - **Accessibility**: Visible label uses `<Label htmlFor>`; the combobox name uses `aria-labelledby` on the label text only (not `fieldDescription`, which is linked via `aria-describedby`). `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 only; **Arrow** keys move the active option (`aria-activedescendant`) while open. **Enter** commits the active option; **Escape** closes the list. Options use `tabIndex={-1}` and are not separate tab stops.
+- **Focus**: The combobox is a readonly `<input>` (not a `<button>`) so Safari's default Tab cycle — text fields, not buttons — can land on it, and a click actually focuses the control. **Arrow** keys move the active option (`aria-activedescendant`) while open. **Enter** commits the active option; **Escape** closes the list. Options use `tabIndex={-1}` and are not separate tab stops.
 - **Forms**: With `name`, a hidden input posts the selected value; when nothing is selected, no hidden input is rendered.

package/skills/uxelle-components/Table.md

@@ -11,7 +11,7 @@ Composable table shell and semantic grid for tabular data. Columns support resiz
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | topSlot | `ReactNode` | `—` | Band rendered above the table and outside its horizontal scrollport — typically a title, toolbar, filters, or search. Omitted entirely when unset. |
-| bottomSlot | `ReactNode` | `—` | Band rendered below the table and outside its horizontal scrollport — typically pagination or bulk actions. Omitted entirely when unset. |
+| bottomSlot | `ReactNode` | `—` | Band rendered below the table and outside its horizontal scrollport — typically **Pagination** or bulk actions. Omitted entirely when unset. |
 | tableSlot | `ReactNode` | `—` | The table itself: one **TableGrid** with its head, body, rows, and cells, placed in the scroll region that drives the horizontal scroll hint. Same slot as `children`, and it wins when both are passed. |
 | children | `ReactNode` | `—` | Alias for `tableSlot`, ignored when `tableSlot` is also passed. Compose one `TableGrid` (give it `aria-label` and `gridTemplateColumns`) holding a `TableHead` with a `TableRow` of `TableHeaderCell` children, then a `TableBody` with one `TableRow` of `TableCell` children per record — all exported from `@uxelle/components`. |
 
@@ -23,7 +23,7 @@ Extends `HTMLAttributes` — supports standard HTML attributes.
 
 ```tsx
 const columns = [
-  { flex: 0.5, minWidth: 48 },
+  { flex: 0, minWidth: 48, maxWidth: 72 },
   { flex: 1, minWidth: 120 },
 ] as const;
 
@@ -44,12 +44,15 @@ function OrdersGrid() {
       <OrdersGrid />
     </TableColumnSizingProvider>
   }
+  bottomSlot={
+    <Pagination totalItems={100} defaultItemsPerPage={10} aria-label="Orders pagination" />
+  }
 />
 ```
 
 
 ## Notes
 
-- Optional top and bottom slots frame the table region; a horizontal scroll hint appears when the grid is wider than its container. Fixed columns are implemented as sticky cells inside one `TableGrid`—not as a separate grid—so each row stays a single unit for assistive technology. Use **TableColumnPinProvider** or `pinned="start"` on **TableHeaderCell** and **TableCell** with **usePinnedStartOffsets** to keep leading columns visible during horizontal scroll.
-- Horizontal scroll and the trailing-edge hint appear automatically when content overflows the container. Define column proportions with **TableColumnSizingProvider** and **useColumnGridTemplate**.
+- Optional top and bottom slots frame the table region; pass **Pagination** in `bottomSlot` when the dataset is paged. A horizontal scroll hint appears when the grid is wider than its container. Fixed columns are implemented as sticky cells inside one `TableGrid`—not as a separate grid—so each row stays a single unit for assistive technology. Use **TableColumnPinProvider** or `pinned="start"` on **TableHeaderCell** and **TableCell** with **usePinnedStartOffsets** to keep leading columns visible during horizontal scroll.
+- Horizontal scroll and the trailing-edge hint appear automatically when content overflows the container. Define column proportions with **TableColumnSizingProvider** and **useColumnGridTemplate**. Set `flex: 0` and `maxWidth` on compact columns (selection, icons) so leftover `fr` space does not stretch them on a wide viewport. `flex: 0` without a pixel `minWidth` or `maxWidth` sizes the track to content (`max-content`) instead of collapsing. `maxWidth` on a growing column (`flex > 0`) is a resize ceiling only. Cell copy wraps and the row height follows the tallest cell. Header titles stay on one line and ellipsize when the column is narrower than the name. Pass `truncation` on **Text** in a body cell only when that column must stay single-line. Resizing a column persists every column as a pixel track at the widths on screen, so siblings are not stretched or shrunk to fit the container. Call **useResetTableColumnWidths** to restore every column to its template.
 - Layout is left-to-right only; right-to-left document direction is not supported yet.