@kerfjs/ui 5.0.0-beta.60 → 5.0.0-beta.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/README.md +1 -0
  2. package/ai/component-catalog.json +129 -19
  3. package/ai/component-composition-rules.json +8 -0
  4. package/ai/component-composition.d.ts +10 -0
  5. package/ai/component-composition.json +109 -7
  6. package/ai/component-composition.schema.json +21 -0
  7. package/ai/components/README.md +5 -4
  8. package/ai/components/chip.md +72 -0
  9. package/ai/components/grid.md +10 -7
  10. package/ai/components/list-item.md +10 -7
  11. package/ai/components/select.md +5 -2
  12. package/ai/components/tabs.md +8 -4
  13. package/ai/components/toolbar.md +3 -2
  14. package/ai/public-api-signatures-v1.md +90 -14
  15. package/ai/skill.md +21 -3
  16. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  17. package/dist/app-tab.d.ts +12 -2
  18. package/dist/app-tab.js +1 -1
  19. package/dist/browser/chip.js +3 -0
  20. package/dist/catalog.js +6 -6
  21. package/dist/chip.d.ts +29 -0
  22. package/dist/chip.js +3 -0
  23. package/dist/chip.js.map +1 -0
  24. package/dist/{chunk-F7F7KRO2.js → chunk-4SQK27MR.js} +33 -18
  25. package/dist/chunk-4SQK27MR.js.map +1 -0
  26. package/dist/{chunk-46263QLK.js → chunk-C4OYOKWX.js} +18 -6
  27. package/dist/chunk-C4OYOKWX.js.map +1 -0
  28. package/dist/chunk-EAC4CDY7.js +57 -0
  29. package/dist/chunk-EAC4CDY7.js.map +1 -0
  30. package/dist/{chunk-T57AXDFM.js → chunk-NYL63PSD.js} +2 -2
  31. package/dist/{chunk-T57AXDFM.js.map → chunk-NYL63PSD.js.map} +1 -1
  32. package/dist/{chunk-T66UNBXL.js → chunk-Q6YU3BT7.js} +11 -2
  33. package/dist/chunk-Q6YU3BT7.js.map +1 -0
  34. package/dist/chunk-SWVW56CV.js +188 -0
  35. package/dist/chunk-SWVW56CV.js.map +1 -0
  36. package/dist/{chunk-WPLIO5WJ.js → chunk-TEYARRAK.js} +37 -5
  37. package/dist/chunk-TEYARRAK.js.map +1 -0
  38. package/dist/{chunk-AGXQQFKZ.js → chunk-UCKKT6KO.js} +13 -4
  39. package/dist/chunk-UCKKT6KO.js.map +1 -0
  40. package/dist/{chunk-UWONG4QE.js → chunk-VCBTX62E.js} +11 -3
  41. package/dist/chunk-VCBTX62E.js.map +1 -0
  42. package/dist/{chunk-2OXQHM7I.js → chunk-Y74NWGQW.js} +3 -3
  43. package/dist/{chunk-2OXQHM7I.js.map → chunk-Y74NWGQW.js.map} +1 -1
  44. package/dist/collapsible-panel.js +2 -2
  45. package/dist/grid.d.ts +13 -5
  46. package/dist/grid.js +1 -1
  47. package/dist/index.d.ts +4 -3
  48. package/dist/index.js +14 -13
  49. package/dist/list-item.d.ts +11 -1
  50. package/dist/list-item.js +1 -1
  51. package/dist/popup-menu.d.ts +2 -2
  52. package/dist/popup-menu.js +1 -1
  53. package/dist/select-register.js +46 -0
  54. package/dist/select-register.js.map +1 -1
  55. package/dist/select.d.ts +14 -0
  56. package/dist/select.js +1 -1
  57. package/dist/styles/app-tab.css +35 -0
  58. package/dist/styles/chip.css +118 -0
  59. package/dist/styles/grid.css +7 -0
  60. package/dist/styles/list-item.css +14 -9
  61. package/dist/styles/popup-menu.css +2 -1
  62. package/dist/styles/segmented-control.css +2 -1
  63. package/dist/styles/select.css +30 -0
  64. package/dist/styles/styles.css +1 -0
  65. package/dist/styles/toolbar.css +8 -5
  66. package/dist/{token-search-field-CCke1yvQ.d.ts → token-search-field-DvgFLhLL.d.ts} +6 -2
  67. package/dist/token-search-field.d.ts +1 -1
  68. package/dist/token-search-model.d.ts +1 -1
  69. package/dist/token-search-model.js +1 -1
  70. package/dist/wire-catalog.js +1 -1
  71. package/dist/wire-tab-bars.js +1 -1
  72. package/dist/wire-token-search-fields.d.ts +1 -1
  73. package/dist/workbench.js +1 -1
  74. package/docs/accessibility.md +29 -3
  75. package/docs/component-contract.md +5 -0
  76. package/docs/component-selection.md +66 -4
  77. package/docs/design/templates/segmented-control/equal-dark.svg +1 -1
  78. package/docs/design/templates/segmented-control/equal.svg +1 -1
  79. package/docs/design/templates/segmented-control/pill-small-dark.svg +1 -1
  80. package/docs/design/templates/segmented-control/pill-small.svg +1 -1
  81. package/docs/design/templates/segmented-control-dark.svg +1 -1
  82. package/docs/design/templates/segmented-control.svg +1 -1
  83. package/docs/layout.md +20 -9
  84. package/docs/sunken-panel.md +5 -0
  85. package/docs/webawesome-theme.md +32 -0
  86. package/llms.txt +36 -8
  87. package/package.json +7 -1
  88. package/dist/chunk-46263QLK.js.map +0 -1
  89. package/dist/chunk-5I7OHCIP.js +0 -96
  90. package/dist/chunk-5I7OHCIP.js.map +0 -1
  91. package/dist/chunk-AGXQQFKZ.js.map +0 -1
  92. package/dist/chunk-F7F7KRO2.js.map +0 -1
  93. package/dist/chunk-T66UNBXL.js.map +0 -1
  94. package/dist/chunk-UWONG4QE.js.map +0 -1
  95. package/dist/chunk-WPLIO5WJ.js.map +0 -1
package/README.md CHANGED
@@ -181,6 +181,7 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
181
181
  | ------------------------------------------------------------------- | --------------------------------------- | -------------------------------------- |
182
182
  | `LucideIcon` | `@kerfjs/ui/lucide-icon` | `@kerfjs/ui/lucide-icon.css` |
183
183
  | `Badge` | `@kerfjs/ui/badge` | `@kerfjs/ui/badge.css` |
184
+ | `Chip` | `@kerfjs/ui/chip` | `@kerfjs/ui/chip.css` |
184
185
  | `DisclosureArrow` | `@kerfjs/ui/disclosure-arrow` | `@kerfjs/ui/disclosure-arrow.css` |
185
186
  | `Toolbar` | `@kerfjs/ui/toolbar` | `@kerfjs/ui/toolbar.css` |
186
187
  | `ToolbarControlGroup`, `ToolbarActionLink` | `@kerfjs/ui/toolbar-control-group` | `@kerfjs/ui/toolbar-control-group.css` |
@@ -63,6 +63,65 @@
63
63
  "recipe": "docs/component-selection.md#problem-to-component-matrix"
64
64
  }
65
65
  },
66
+ {
67
+ "id": "chip",
68
+ "name": "Chip",
69
+ "category": "Foundation",
70
+ "kind": "component",
71
+ "source": "kerf",
72
+ "description": "A short tag with semantic tone and an optional accessible remove button, including compact and disabled variants.",
73
+ "uses": [],
74
+ "purpose": "Render removable tags without application rules on Web Awesome internals.",
75
+ "publicExports": [
76
+ "Chip"
77
+ ],
78
+ "useWhen": [
79
+ "Show a short tag that the application can remove through a delegated action, including a compact or disabled tag."
80
+ ],
81
+ "avoidWhen": [
82
+ "Use Badge for non-interactive status and count metadata.",
83
+ "Do not use the remove button without a specific accessible name."
84
+ ],
85
+ "alternatives": [],
86
+ "appOwns": [
87
+ "tag text and identity",
88
+ "remove action and list update",
89
+ "disabled policy"
90
+ ],
91
+ "variants": [
92
+ "neutral, brand, pop, success, warning, or danger tone",
93
+ "quiet, solid, or outline appearance",
94
+ "pill or rounded shape",
95
+ "compact or default size",
96
+ "removable or plain, enabled or disabled"
97
+ ],
98
+ "accessibility": [
99
+ "The remove control is a native button and requires an action and a specific removeLabel. A disabled chip disables that button and removes it from keyboard interaction.",
100
+ "Keep meaningful tag text visible because tone is supplementary."
101
+ ],
102
+ "geometry": {
103
+ "margin": "none",
104
+ "border": "self",
105
+ "padding": "self"
106
+ },
107
+ "delivery": {
108
+ "browserImport": "@kerfjs/ui/chip",
109
+ "manualCssImport": "@kerfjs/ui/chip.css",
110
+ "sideEffects": [
111
+ "browser-condition-css"
112
+ ]
113
+ },
114
+ "wiring": [],
115
+ "publicClasses": [
116
+ "kui-chip"
117
+ ],
118
+ "publicTokens": [],
119
+ "links": {
120
+ "catalogRoute": "?component=chip",
121
+ "documentation": "docs/component-selection.md",
122
+ "recipe": "docs/component-selection.md#problem-to-component-matrix"
123
+ }
124
+ },
66
125
  {
67
126
  "id": "lucide-icon",
68
127
  "name": "LucideIcon",
@@ -1422,6 +1481,7 @@
1422
1481
  "center priority for an expanded center control",
1423
1482
  "trailing priority for an expanded trailing control at compact or narrow widths",
1424
1483
  "trailing groups wrap instead of clipping",
1484
+ "outer inset independently configurable from zone gap",
1425
1485
  "app bar or bottom bar claiming its screen edges (safeAreaEdges)"
1426
1486
  ],
1427
1487
  "accessibility": [
@@ -1432,7 +1492,7 @@
1432
1492
  "border": "conditional",
1433
1493
  "padding": "self",
1434
1494
  "notes": [
1435
- "Padding belongs to the toolbar; dividerSides selects any canonical combination of its physical top, right, bottom, and left edges.",
1495
+ "Padding belongs to the toolbar; --kui-toolbar-inset controls outer padding and minimum height independently of --kui-toolbar-gap. dividerSides selects any canonical combination of its physical top, right, bottom, and left edges.",
1436
1496
  "Safe areas: a Pane header or footer hands a sole Toolbar its inline edges; an app bar or bottom bar at a screen edge claims its sides with safeAreaEdges and pads each claimed side by the --kui-edge-inset-* context or the full device inset, while its box and dividers paint through."
1437
1497
  ]
1438
1498
  },
@@ -1473,6 +1533,7 @@
1473
1533
  "--kui-font-sans",
1474
1534
  "--kui-toolbar-center-padding-inline",
1475
1535
  "--kui-toolbar-divider-color",
1536
+ "--kui-toolbar-inset",
1476
1537
  "--kui-toolbar-leading-min-width",
1477
1538
  "--kui-toolbar-leading-padding-inline",
1478
1539
  "--kui-toolbar-trailing-gap",
@@ -2224,13 +2285,36 @@
2224
2285
  "category": "Structure",
2225
2286
  "kind": "component",
2226
2287
  "source": "kerf",
2227
- "description": "A fixed positive number of evenly distributed minmax columns with a typed xs gap by default and optional flex participation.",
2288
+ "description": "Equal-width columns with a fixed count or a minimum-width responsive mode, typed gaps, and optional flex participation.",
2228
2289
  "uses": [],
2229
- "purpose": "Arrange related siblings in equal-width columns without repeating application-owned grid-template-columns CSS.",
2290
+ "purpose": "Arrange related siblings in equal-width columns with either a fixed count or automatic container-width collapse.",
2230
2291
  "publicExports": [
2231
2292
  "Grid"
2232
2293
  ],
2233
2294
  "cssValueProps": [
2295
+ {
2296
+ "path": "minColumnWidth",
2297
+ "grammar": "length",
2298
+ "helpers": [
2299
+ "px",
2300
+ "rem",
2301
+ "em",
2302
+ "pct",
2303
+ "space",
2304
+ "lengthVar",
2305
+ "calc"
2306
+ ],
2307
+ "nonStandaloneHelpers": [
2308
+ "plus"
2309
+ ],
2310
+ "shorthands": [],
2311
+ "canonicalShorthands": [],
2312
+ "exceptionalShorthands": [],
2313
+ "rawPolicy": "forbid",
2314
+ "examples": [
2315
+ "minColumnWidth={px(376)}"
2316
+ ]
2317
+ },
2234
2318
  {
2235
2319
  "path": "gap",
2236
2320
  "grammar": "length",
@@ -2300,13 +2384,14 @@
2300
2384
  ],
2301
2385
  "useWhen": [
2302
2386
  "Arrange related siblings into a fixed positive number of equal-width columns.",
2387
+ "Fit equal-width columns down to a typed minimum and collapse as the container narrows.",
2303
2388
  "Prevent wider intrinsic content from making one fractional track wider than its peers.",
2304
2389
  "Use a finite flex keyword or the flex() builder when Grid participates in a flexible parent layout."
2305
2390
  ],
2306
2391
  "avoidWhen": [
2307
- "Do not use Grid for intrinsic, asymmetric, spanning, auto-fit, or masonry tracks; use application-owned CSS grid.",
2392
+ "Do not use Grid for intrinsic, asymmetric, spanning, or masonry tracks; use application-owned CSS grid.",
2308
2393
  "Do not use Grid when columns need a user-operable separator; use ResizableRegion.",
2309
- "Do not expect Grid to choose responsive breakpoints or change the column count; the application owns that policy.",
2394
+ "Do not combine fixed columns with minColumnWidth; choose one layout mode.",
2310
2395
  "Do not pass raw CSS strings to gap or flex, mix their distinct grammars, or use s/xl spacing steps without a deliberate exception."
2311
2396
  ],
2312
2397
  "alternatives": [
@@ -2328,11 +2413,12 @@
2328
2413
  ],
2329
2414
  "appOwns": [
2330
2415
  "child semantics and content",
2331
- "column count and responsive changes",
2416
+ "fixed column count or responsive minimum width",
2332
2417
  "typed gap and flex choices"
2333
2418
  ],
2334
2419
  "variants": [
2335
2420
  "any positive safe-integer equal-track count",
2421
+ "typed minimum column width with automatic container-width collapse",
2336
2422
  "named none/2xs/xs/s/m/l/xl token gap",
2337
2423
  "typed CssLength gap",
2338
2424
  "boolean, finite-keyword, or typed CssFlex flex",
@@ -2341,14 +2427,14 @@
2341
2427
  ],
2342
2428
  "accessibility": [
2343
2429
  "Grid adds layout only and no grid role; children retain responsibility for native or ARIA semantics.",
2344
- "Responsive column-count changes must preserve source and focus order."
2430
+ "Responsive column-count changes preserve source and focus order."
2345
2431
  ],
2346
2432
  "geometry": {
2347
2433
  "margin": "none",
2348
2434
  "border": "none",
2349
2435
  "padding": "none",
2350
2436
  "notes": [
2351
- "Every track uses minmax(0, 1fr), so unequal intrinsic widths cannot break equal distribution."
2437
+ "Fixed tracks use minmax(0, 1fr); responsive tracks use auto-fit with a minimum width capped at 100%, preserving equal distribution without narrow overflow."
2352
2438
  ]
2353
2439
  },
2354
2440
  "delivery": {
@@ -2941,14 +3027,15 @@
2941
3027
  "category": "Navigation",
2942
3028
  "kind": "component",
2943
3029
  "source": "kerf",
2944
- "description": "Configurable native-button navigation rows with structured labels, status/busy metadata, density, group dividers, protected domain metadata hooks, and rounded-boundary overflow clipping.",
3030
+ "description": "Configurable native-button action rows and native-anchor navigation rows with structured labels, status/busy metadata, density, group dividers, protected domain metadata hooks, and rounded-boundary overflow clipping.",
2945
3031
  "uses": [
2946
3032
  "lucide-icon",
2947
3033
  "loading-spinner"
2948
3034
  ],
2949
- "purpose": "Selectable, disabled, trailing, and multiline navigation rows.",
3035
+ "purpose": "Selectable, disabled, trailing, and multiline action or link rows.",
2950
3036
  "publicExports": [
2951
- "ListItem"
3037
+ "ListItem",
3038
+ "ListItemLink"
2952
3039
  ],
2953
3040
  "cssValueProps": [
2954
3041
  {
@@ -2965,7 +3052,7 @@
2965
3052
  }
2966
3053
  ],
2967
3054
  "useWhen": [
2968
- "Render a selectable, disabled, trailing, or multiline sidebar/navigation action row whose descendants must remain clipped to the rounded row boundary."
3055
+ "Render a selectable, disabled, trailing, or multiline sidebar action row whose descendants must remain clipped to the rounded row boundary; use ListItemLink when the destination has an href and needs native link activation."
2969
3056
  ],
2970
3057
  "avoidWhen": [
2971
3058
  "Do not use for an ordinary inline link, form button, isolated ARIA menuitem, or an interactive trailing action; use ListActionRow for sibling row actions.",
@@ -2980,12 +3067,14 @@
2980
3067
  ],
2981
3068
  "appOwns": [
2982
3069
  "routing",
3070
+ "link destinations",
2983
3071
  "selection",
2984
3072
  "permissions",
2985
3073
  "action handling",
2986
3074
  "domain data attributes"
2987
3075
  ],
2988
3076
  "variants": [
3077
+ "native link and external link",
2989
3078
  "selected",
2990
3079
  "pressed",
2991
3080
  "disabled",
@@ -3001,12 +3090,15 @@
3001
3090
  "before, after, or paired group divider"
3002
3091
  ],
3003
3092
  "accessibility": [
3004
- "Uses native button activation; selected maps to aria-current and pressed to aria-pressed; rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls."
3093
+ "ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls."
3005
3094
  ],
3006
3095
  "geometry": {
3007
3096
  "margin": "self",
3008
3097
  "border": "self",
3009
- "padding": "self"
3098
+ "padding": "self",
3099
+ "notes": [
3100
+ "Public resting background and border, hover border, and selected border tokens can be scoped to a row or its containing list without changing the default tones."
3101
+ ]
3010
3102
  },
3011
3103
  "delivery": {
3012
3104
  "browserImport": "@kerfjs/ui/list-item",
@@ -3027,22 +3119,27 @@
3027
3119
  ],
3028
3120
  "publicTokens": [
3029
3121
  "--kui-color-brand-border-normal",
3122
+ "--kui-color-brand-border-quiet",
3030
3123
  "--kui-color-brand-fill-quiet",
3031
3124
  "--kui-color-brand-fill-normal",
3032
3125
  "--kui-color-neutral-fill-quiet",
3033
3126
  "--kui-color-neutral-on-normal",
3034
3127
  "--kui-color-neutral-on-quiet",
3035
3128
  "--kui-color-neutral-border-quiet",
3129
+ "--kui-color-neutral-border-normal",
3036
3130
  "--kui-focus-ring",
3037
3131
  "--kui-list-item-color",
3132
+ "--kui-list-item-background",
3038
3133
  "--kui-list-item-align-items",
3039
3134
  "--kui-list-item-border-width",
3135
+ "--kui-list-item-border",
3040
3136
  "--kui-list-item-columns",
3041
3137
  "--kui-list-item-drag-target-background",
3042
3138
  "--kui-list-item-drag-target-outline",
3043
3139
  "--kui-list-item-drag-target-outline-offset",
3044
3140
  "--kui-list-item-gap",
3045
3141
  "--kui-list-item-hover-background",
3142
+ "--kui-list-item-hover-border",
3046
3143
  "--kui-list-item-icon-color",
3047
3144
  "--kui-list-item-icon-size",
3048
3145
  "--kui-list-item-label-max-width",
@@ -3052,6 +3149,7 @@
3052
3149
  "--kui-list-item-padding-inline",
3053
3150
  "--kui-list-item-radius",
3054
3151
  "--kui-list-item-selected-background",
3152
+ "--kui-list-item-selected-border",
3055
3153
  "--kui-list-item-selected-color",
3056
3154
  "--kui-list-item-trailing-color",
3057
3155
  "--kui-list-group-divider-color",
@@ -3343,11 +3441,11 @@
3343
3441
  "category": "Navigation",
3344
3442
  "kind": "component",
3345
3443
  "source": "kerf",
3346
- "description": "Roving-tabindex-ready tabs with typed compact, segmented, icon-only, and truncating-label presentations.",
3444
+ "description": "Roving-tabindex-ready tabs with typed compact, segmented, icon-only, drop-target, pinned, and name-overflow presentations.",
3347
3445
  "uses": [
3348
3446
  "lucide-icon"
3349
3447
  ],
3350
- "purpose": "Roving-tabindex-ready tabs with typed compact, segmented, icon-only, and truncating-label presentations.",
3448
+ "purpose": "Render a controlled application tab with compact or icon-only presentation, a visible drop target, optional full-name display, and an optional pinned leading position.",
3351
3449
  "publicExports": [
3352
3450
  "AppTab"
3353
3451
  ],
@@ -3366,6 +3464,7 @@
3366
3464
  "appOwns": [
3367
3465
  "tab identity",
3368
3466
  "selection",
3467
+ "drop-target state",
3369
3468
  "close policy",
3370
3469
  "content",
3371
3470
  "application data attribute values",
@@ -3382,7 +3481,9 @@
3382
3481
  "compact size",
3383
3482
  "segmented presentation",
3384
3483
  "icon-only accessible presentation",
3385
- "label maximum width and truncation",
3484
+ "label maximum width and ellipsis or visible name overflow",
3485
+ "drop-target highlight",
3486
+ "pinned leading position within a scrolling tablist",
3386
3487
  "attention name color"
3387
3488
  ],
3388
3489
  "accessibility": [
@@ -3415,7 +3516,12 @@
3415
3516
  "--kui-app-tab-attention-color",
3416
3517
  "--kui-app-tab-color",
3417
3518
  "--kui-app-tab-drop-indicator",
3519
+ "--kui-app-tab-drop-target-background",
3520
+ "--kui-app-tab-drop-target-color",
3521
+ "--kui-app-tab-drop-target-ring",
3418
3522
  "--kui-app-tab-hover-background",
3523
+ "--kui-app-tab-pinned-background",
3524
+ "--kui-app-tab-pinned-hover-background",
3419
3525
  "--kui-app-tab-selected-background",
3420
3526
  "--kui-app-tab-selected-border",
3421
3527
  "--kui-app-tab-selected-color",
@@ -3973,14 +4079,14 @@
3973
4079
  "category": "Controls",
3974
4080
  "kind": "component",
3975
4081
  "source": "kerf",
3976
- "description": "Controlled Web Awesome select with typed single or multiple values and form, toolbar, navigation, compact, icon-only, truncating, hint, and grouped-choice presentations.",
4082
+ "description": "Controlled Web Awesome select with typed single or multiple values, disabled choices, optional bulk actions, and form, toolbar, navigation, compact, icon-only, truncating, hint, and grouped-choice presentations.",
3977
4083
  "uses": [
3978
4084
  "lucide-icon",
3979
4085
  "badge",
3980
4086
  "wa-select",
3981
4087
  "wa-option"
3982
4088
  ],
3983
- "purpose": "Controlled Web Awesome select with typed form, toolbar, navigation, compact, icon-only, truncating, hint, and grouped-choice presentations.",
4089
+ "purpose": "Choose one or more controlled values, keep unavailable choices visible, and optionally select all enabled choices or clear a multiple selection.",
3984
4090
  "publicExports": [
3985
4091
  "Select",
3986
4092
  "uiColor",
@@ -4030,6 +4136,7 @@
4030
4136
  "value",
4031
4137
  "validation",
4032
4138
  "choices",
4139
+ "localized bulk-action labels",
4033
4140
  "hint copy",
4034
4141
  "domain mapping",
4035
4142
  "outer placement"
@@ -4050,6 +4157,8 @@
4050
4157
  "fit-content, max-content, or fill trigger width",
4051
4158
  "custom selected content typography and ellipsis",
4052
4159
  "multiple selection",
4160
+ "disabled choice with an optional reason",
4161
+ "opt-in select-all and clear actions for multiple selection",
4053
4162
  "multiple icon-only filter trigger with a fixed triggerIcon"
4054
4163
  ],
4055
4164
  "accessibility": [
@@ -4058,6 +4167,7 @@
4058
4167
  "Hint text is visible below the control through Web Awesome's native hint relationship; placeholderText remains the empty value inside the closed control.",
4059
4168
  "Import select/register once; its scoped lifecycle adapter keeps the latest open/close request authoritative across animation reversals, canceled transitions, and removal. Do not add consumer popup timing or position repairs.",
4060
4169
  "With multiple, the popup stays open while choices toggle (pointer, Enter, or Space) and closes on an outside press, Escape, or focus leaving; each chosen option shows a check, and the closed control summarizes the chosen labels in choice order.",
4170
+ "Disabled choices stay visible but cannot be selected; disabledReason exposes a tooltip. A multiple Select can opt in to localized select-all and clear buttons, which skip disabled choices and publish ordinary input/change events for changed values.",
4061
4171
  "A multiple icon-only trigger shows its fixed triggerIcon and, while any choice is chosen, an aria-hidden count Badge; the combobox's accessible name ends with the chosen labels in choice order, and its hidden value stays empty.",
4062
4172
  "Once registered, an icon-only trigger (single or multiple) shows an aria-hidden Web Awesome help tag repeating its accessible name (a single Select adds its current choice) after a 500ms hover and at once on keyboard focus; it hides while the popup is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
4063
4173
  ],
@@ -79,6 +79,14 @@
79
79
  },
80
80
  "@kerfjs/ui:toolbar-control-group": {
81
81
  "_source": "docs/component-selection.md#toolbar-composition",
82
+ "jsxExports": {
83
+ "ToolbarActionLink": {
84
+ "parents": {
85
+ "mode": "listed",
86
+ "entries": ["@kerfjs/ui:toolbar-control-group"]
87
+ }
88
+ }
89
+ },
82
90
  "parents": {
83
91
  "mode": "listed",
84
92
  "entries": ["@kerfjs/ui:toolbar"]
@@ -52,6 +52,16 @@ export interface CatalogCompositionEntry {
52
52
  /** For a wrapper component: the cataloged roots it renders (any one of
53
53
  * them, or nothing). Composition checks treat its elements as each root. */
54
54
  rendersAs?: CatalogQualifiedKey[];
55
+ /** Additional JSX exports in this selection entry with their own placement. */
56
+ jsxExports?: Record<
57
+ string,
58
+ {
59
+ parents: {
60
+ mode: 'any' | 'root' | 'listed';
61
+ entries: CatalogQualifiedKey[];
62
+ };
63
+ }
64
+ >;
55
65
  parents: { mode: 'any' | 'root' | 'listed'; entries: CatalogQualifiedKey[] };
56
66
  contexts: string[];
57
67
  zones: Array<{
@@ -60,6 +60,59 @@
60
60
  "composition": "generated-permissive-default"
61
61
  }
62
62
  },
63
+ {
64
+ "key": "@kerfjs/ui:chip",
65
+ "package": "@kerfjs/ui",
66
+ "id": "chip",
67
+ "name": "Chip",
68
+ "kind": "component",
69
+ "source": "kerf",
70
+ "parents": { "mode": "any", "entries": [] },
71
+ "contexts": ["application-ui"],
72
+ "zones": [],
73
+ "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
74
+ "state": [
75
+ {
76
+ "id": "tag text and identity",
77
+ "owner": "application",
78
+ "required": false
79
+ },
80
+ {
81
+ "id": "remove action and list update",
82
+ "owner": "application",
83
+ "required": false
84
+ },
85
+ { "id": "disabled policy", "owner": "application", "required": false }
86
+ ],
87
+ "wiring": {
88
+ "required": false,
89
+ "helpers": [],
90
+ "obligations": [],
91
+ "stateAttributes": []
92
+ },
93
+ "responsive": { "owner": "not-applicable", "behaviors": [] },
94
+ "layout": {
95
+ "roles": ["foundation"],
96
+ "geometry": { "margin": "none", "border": "self", "padding": "self" }
97
+ },
98
+ "accessibility": {
99
+ "obligations": [
100
+ "The remove control is a native button and requires an action and a specific removeLabel. A disabled chip disables that button and removes it from keyboard interaction.",
101
+ "Keep meaningful tag text visible because tone is supplementary."
102
+ ]
103
+ },
104
+ "cssValueProps": [],
105
+ "boundaries": {
106
+ "rootClass": "kui-chip",
107
+ "publicClasses": ["kui-chip"],
108
+ "publicTokens": []
109
+ },
110
+ "diagnostics": [],
111
+ "provenance": {
112
+ "selection": "ai/component-catalog.json",
113
+ "composition": "generated-permissive-default"
114
+ }
115
+ },
63
116
  {
64
117
  "key": "@kerfjs/ui:lucide-icon",
65
118
  "package": "@kerfjs/ui",
@@ -1383,7 +1436,7 @@
1383
1436
  "border": "conditional",
1384
1437
  "padding": "self",
1385
1438
  "notes": [
1386
- "Padding belongs to the toolbar; dividerSides selects any canonical combination of its physical top, right, bottom, and left edges.",
1439
+ "Padding belongs to the toolbar; --kui-toolbar-inset controls outer padding and minimum height independently of --kui-toolbar-gap. dividerSides selects any canonical combination of its physical top, right, bottom, and left edges.",
1387
1440
  "Safe areas: a Pane header or footer hands a sole Toolbar its inline edges; an app bar or bottom bar at a screen edge claims its sides with safeAreaEdges and pads each claimed side by the --kui-edge-inset-* context or the full device inset, while its box and dividers paint through."
1388
1441
  ]
1389
1442
  }
@@ -1407,6 +1460,7 @@
1407
1460
  "--kui-font-sans",
1408
1461
  "--kui-toolbar-center-padding-inline",
1409
1462
  "--kui-toolbar-divider-color",
1463
+ "--kui-toolbar-inset",
1410
1464
  "--kui-toolbar-leading-min-width",
1411
1465
  "--kui-toolbar-leading-padding-inline",
1412
1466
  "--kui-toolbar-trailing-gap",
@@ -1481,7 +1535,7 @@
1481
1535
  },
1482
1536
  "cssValueProps": [],
1483
1537
  "boundaries": {
1484
- "rootClass": "kui-toolbar-action-link",
1538
+ "rootClass": "kui-toolbar-control-group",
1485
1539
  "publicClasses": [
1486
1540
  "kui-toolbar-action-link",
1487
1541
  "kui-toolbar-control-group"
@@ -1518,6 +1572,14 @@
1518
1572
  "provenance": {
1519
1573
  "selection": "ai/component-catalog.json",
1520
1574
  "composition": "docs/component-selection.md#toolbar-composition"
1575
+ },
1576
+ "jsxExports": {
1577
+ "ToolbarActionLink": {
1578
+ "parents": {
1579
+ "mode": "listed",
1580
+ "entries": ["@kerfjs/ui:toolbar-control-group"]
1581
+ }
1582
+ }
1521
1583
  }
1522
1584
  },
1523
1585
  {
@@ -1976,7 +2038,7 @@
1976
2038
  "required": false
1977
2039
  },
1978
2040
  {
1979
- "id": "column count and responsive changes",
2041
+ "id": "fixed column count or responsive minimum width",
1980
2042
  "owner": "application",
1981
2043
  "required": false
1982
2044
  },
@@ -2000,17 +2062,28 @@
2000
2062
  "border": "none",
2001
2063
  "padding": "none",
2002
2064
  "notes": [
2003
- "Every track uses minmax(0, 1fr), so unequal intrinsic widths cannot break equal distribution."
2065
+ "Fixed tracks use minmax(0, 1fr); responsive tracks use auto-fit with a minimum width capped at 100%, preserving equal distribution without narrow overflow."
2004
2066
  ]
2005
2067
  }
2006
2068
  },
2007
2069
  "accessibility": {
2008
2070
  "obligations": [
2009
2071
  "Grid adds layout only and no grid role; children retain responsibility for native or ARIA semantics.",
2010
- "Responsive column-count changes must preserve source and focus order."
2072
+ "Responsive column-count changes preserve source and focus order."
2011
2073
  ]
2012
2074
  },
2013
2075
  "cssValueProps": [
2076
+ {
2077
+ "path": "minColumnWidth",
2078
+ "grammar": "length",
2079
+ "helpers": ["px", "rem", "em", "pct", "space", "lengthVar", "calc"],
2080
+ "nonStandaloneHelpers": ["plus"],
2081
+ "shorthands": [],
2082
+ "canonicalShorthands": [],
2083
+ "exceptionalShorthands": [],
2084
+ "rawPolicy": "forbid",
2085
+ "examples": ["minColumnWidth={px(376)}"]
2086
+ },
2014
2087
  {
2015
2088
  "path": "gap",
2016
2089
  "grammar": "length",
@@ -2430,6 +2503,11 @@
2430
2503
  "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
2431
2504
  "state": [
2432
2505
  { "id": "routing", "owner": "application", "required": false },
2506
+ {
2507
+ "id": "link destinations",
2508
+ "owner": "application",
2509
+ "required": false
2510
+ },
2433
2511
  { "id": "selection", "owner": "application", "required": false },
2434
2512
  { "id": "permissions", "owner": "application", "required": false },
2435
2513
  { "id": "action handling", "owner": "application", "required": false },
@@ -2448,11 +2526,18 @@
2448
2526
  "responsive": { "owner": "not-applicable", "behaviors": [] },
2449
2527
  "layout": {
2450
2528
  "roles": ["navigation"],
2451
- "geometry": { "margin": "self", "border": "self", "padding": "self" }
2529
+ "geometry": {
2530
+ "margin": "self",
2531
+ "border": "self",
2532
+ "padding": "self",
2533
+ "notes": [
2534
+ "Public resting background and border, hover border, and selected border tokens can be scoped to a row or its containing list without changing the default tones."
2535
+ ]
2536
+ }
2452
2537
  },
2453
2538
  "accessibility": {
2454
2539
  "obligations": [
2455
- "Uses native button activation; selected maps to aria-current and pressed to aria-pressed; rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls."
2540
+ "ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls."
2456
2541
  ]
2457
2542
  },
2458
2543
  "cssValueProps": [
@@ -2480,22 +2565,27 @@
2480
2565
  ],
2481
2566
  "publicTokens": [
2482
2567
  "--kui-color-brand-border-normal",
2568
+ "--kui-color-brand-border-quiet",
2483
2569
  "--kui-color-brand-fill-quiet",
2484
2570
  "--kui-color-brand-fill-normal",
2485
2571
  "--kui-color-neutral-fill-quiet",
2486
2572
  "--kui-color-neutral-on-normal",
2487
2573
  "--kui-color-neutral-on-quiet",
2488
2574
  "--kui-color-neutral-border-quiet",
2575
+ "--kui-color-neutral-border-normal",
2489
2576
  "--kui-focus-ring",
2490
2577
  "--kui-list-item-color",
2578
+ "--kui-list-item-background",
2491
2579
  "--kui-list-item-align-items",
2492
2580
  "--kui-list-item-border-width",
2581
+ "--kui-list-item-border",
2493
2582
  "--kui-list-item-columns",
2494
2583
  "--kui-list-item-drag-target-background",
2495
2584
  "--kui-list-item-drag-target-outline",
2496
2585
  "--kui-list-item-drag-target-outline-offset",
2497
2586
  "--kui-list-item-gap",
2498
2587
  "--kui-list-item-hover-background",
2588
+ "--kui-list-item-hover-border",
2499
2589
  "--kui-list-item-icon-color",
2500
2590
  "--kui-list-item-icon-size",
2501
2591
  "--kui-list-item-label-max-width",
@@ -2505,6 +2595,7 @@
2505
2595
  "--kui-list-item-padding-inline",
2506
2596
  "--kui-list-item-radius",
2507
2597
  "--kui-list-item-selected-background",
2598
+ "--kui-list-item-selected-border",
2508
2599
  "--kui-list-item-selected-color",
2509
2600
  "--kui-list-item-trailing-color",
2510
2601
  "--kui-list-group-divider-color",
@@ -2778,6 +2869,11 @@
2778
2869
  "state": [
2779
2870
  { "id": "tab identity", "owner": "application", "required": false },
2780
2871
  { "id": "selection", "owner": "application", "required": false },
2872
+ {
2873
+ "id": "drop-target state",
2874
+ "owner": "application",
2875
+ "required": false
2876
+ },
2781
2877
  { "id": "close policy", "owner": "application", "required": false },
2782
2878
  { "id": "content", "owner": "application", "required": false },
2783
2879
  {
@@ -2820,7 +2916,12 @@
2820
2916
  "--kui-app-tab-attention-color",
2821
2917
  "--kui-app-tab-color",
2822
2918
  "--kui-app-tab-drop-indicator",
2919
+ "--kui-app-tab-drop-target-background",
2920
+ "--kui-app-tab-drop-target-color",
2921
+ "--kui-app-tab-drop-target-ring",
2823
2922
  "--kui-app-tab-hover-background",
2923
+ "--kui-app-tab-pinned-background",
2924
+ "--kui-app-tab-pinned-hover-background",
2824
2925
  "--kui-app-tab-selected-background",
2825
2926
  "--kui-app-tab-selected-border",
2826
2927
  "--kui-app-tab-selected-color",
@@ -3312,6 +3413,7 @@
3312
3413
  "Hint text is visible below the control through Web Awesome's native hint relationship; placeholderText remains the empty value inside the closed control.",
3313
3414
  "Import select/register once; its scoped lifecycle adapter keeps the latest open/close request authoritative across animation reversals, canceled transitions, and removal. Do not add consumer popup timing or position repairs.",
3314
3415
  "With multiple, the popup stays open while choices toggle (pointer, Enter, or Space) and closes on an outside press, Escape, or focus leaving; each chosen option shows a check, and the closed control summarizes the chosen labels in choice order.",
3416
+ "Disabled choices stay visible but cannot be selected; disabledReason exposes a tooltip. A multiple Select can opt in to localized select-all and clear buttons, which skip disabled choices and publish ordinary input/change events for changed values.",
3315
3417
  "A multiple icon-only trigger shows its fixed triggerIcon and, while any choice is chosen, an aria-hidden count Badge; the combobox's accessible name ends with the chosen labels in choice order, and its hidden value stays empty.",
3316
3418
  "Once registered, an icon-only trigger (single or multiple) shows an aria-hidden Web Awesome help tag repeating its accessible name (a single Select adds its current choice) after a 500ms hover and at once on keyboard focus; it hides while the popup is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
3317
3419
  ]