@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.103",
+  "version": "5.0.0-beta.105",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -65,6 +65,11 @@
       "browser": "./dist/browser/lucide-icon.js",
       "import": "./dist/lucide-icon.js"
     },
+    "./disclosure": {
+      "types": "./dist/disclosure.d.ts",
+      "browser": "./dist/browser/disclosure.js",
+      "import": "./dist/disclosure.js"
+    },
     "./disclosure-arrow": {
       "types": "./dist/disclosure-arrow.d.ts",
       "browser": "./dist/browser/disclosure-arrow.js",
@@ -75,6 +80,11 @@
       "browser": "./dist/browser/badge.js",
       "import": "./dist/badge.js"
     },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "browser": "./dist/browser/button.js",
+      "import": "./dist/button.js"
+    },
     "./chip": {
       "types": "./dist/chip.d.ts",
       "browser": "./dist/browser/chip.js",
@@ -177,10 +187,10 @@
       "types": "./dist/device-class.d.ts",
       "import": "./dist/device-class.js"
     },
-    "./app-tab": {
-      "types": "./dist/app-tab.d.ts",
-      "browser": "./dist/browser/app-tab.js",
-      "import": "./dist/app-tab.js"
+    "./tab-bar-item": {
+      "types": "./dist/tab-bar-item.d.ts",
+      "browser": "./dist/browser/tab-bar-item.js",
+      "import": "./dist/tab-bar-item.js"
     },
     "./catalog": {
       "types": "./dist/catalog.d.ts",
@@ -249,6 +259,10 @@
       "types": "./dist/wire-nav-stack.d.ts",
       "import": "./dist/wire-nav-stack.js"
     },
+    "./wire-pane-chrome": {
+      "types": "./dist/wire-pane-chrome.d.ts",
+      "import": "./dist/wire-pane-chrome.js"
+    },
     "./wire-content-items": {
       "types": "./dist/wire-content-items.d.ts",
       "import": "./dist/wire-content-items.js"
@@ -258,6 +272,16 @@
       "browser": "./dist/browser/split-view.js",
       "import": "./dist/split-view.js"
     },
+    "./list-detail-dialog": {
+      "types": "./dist/list-detail-dialog.d.ts",
+      "browser": "./dist/browser/list-detail-dialog.js",
+      "import": "./dist/list-detail-dialog.js"
+    },
+    "./workbench-dialog": {
+      "types": "./dist/workbench-dialog.d.ts",
+      "browser": "./dist/browser/workbench-dialog.js",
+      "import": "./dist/workbench-dialog.js"
+    },
     "./pane": {
       "types": "./dist/pane.d.ts",
       "browser": "./dist/browser/pane.js",
@@ -290,6 +314,16 @@
       "types": "./dist/wire-workbench.d.ts",
       "import": "./dist/wire-workbench.js"
     },
+    "./progress-bar": {
+      "types": "./dist/progress-bar.d.ts",
+      "browser": "./dist/browser/progress-bar.js",
+      "import": "./dist/progress-bar.js"
+    },
+    "./progress-ring": {
+      "types": "./dist/progress-ring.d.ts",
+      "browser": "./dist/browser/progress-ring.js",
+      "import": "./dist/progress-ring.js"
+    },
     "./loading-spinner": {
       "types": "./dist/loading-spinner.d.ts",
       "browser": "./dist/browser/loading-spinner.js",
@@ -315,32 +349,64 @@
       "browser": "./dist/browser/segmented-control.js",
       "import": "./dist/segmented-control.js"
     },
+    "./color-field": {
+      "types": "./dist/color-field.d.ts",
+      "browser": "./dist/browser/color-field.js",
+      "import": "./dist/color-field.js"
+    },
+    "./wire-color-fields": {
+      "types": "./dist/wire-color-fields.d.ts",
+      "import": "./dist/wire-color-fields.js"
+    },
+    "./color-picker": {
+      "types": "./dist/color-picker.d.ts",
+      "browser": "./dist/browser/color-picker.js",
+      "import": "./dist/color-picker.js"
+    },
+    "./wire-color-pickers": {
+      "types": "./dist/wire-color-pickers.d.ts",
+      "import": "./dist/wire-color-pickers.js"
+    },
+    "./color-swatches": {
+      "types": "./dist/color-swatches.d.ts",
+      "browser": "./dist/browser/color-swatches.js",
+      "import": "./dist/color-swatches.js"
+    },
     "./choice-chips": {
       "types": "./dist/choice-chips.d.ts",
       "browser": "./dist/browser/choice-chips.js",
       "import": "./dist/choice-chips.js"
     },
-    "./composer": {
-      "types": "./dist/composer.d.ts",
-      "browser": "./dist/browser/composer.js",
-      "import": "./dist/composer.js"
+    "./message-composer": {
+      "types": "./dist/message-composer.d.ts",
+      "browser": "./dist/browser/message-composer.js",
+      "import": "./dist/message-composer.js"
+    },
+    "./wire-message-composers": {
+      "types": "./dist/wire-message-composers.d.ts",
+      "import": "./dist/wire-message-composers.js"
     },
-    "./wire-composers": {
-      "types": "./dist/wire-composers.d.ts",
-      "import": "./dist/wire-composers.js"
+    "./tag-field": {
+      "types": "./dist/tag-field.d.ts",
+      "browser": "./dist/browser/tag-field.js",
+      "import": "./dist/tag-field.js"
     },
-    "./token-search-field": {
-      "types": "./dist/token-search-field.d.ts",
-      "browser": "./dist/browser/token-search-field.js",
-      "import": "./dist/token-search-field.js"
+    "./wire-tag-fields": {
+      "types": "./dist/wire-tag-fields.d.ts",
+      "import": "./dist/wire-tag-fields.js"
     },
-    "./token-search-model": {
-      "types": "./dist/token-search-model.d.ts",
-      "import": "./dist/token-search-model.js"
+    "./search-field": {
+      "types": "./dist/search-field.d.ts",
+      "browser": "./dist/browser/search-field.js",
+      "import": "./dist/search-field.js"
     },
-    "./wire-token-search-fields": {
-      "types": "./dist/wire-token-search-fields.d.ts",
-      "import": "./dist/wire-token-search-fields.js"
+    "./search-field-model": {
+      "types": "./dist/search-field-model.d.ts",
+      "import": "./dist/search-field-model.js"
+    },
+    "./wire-search-fields": {
+      "types": "./dist/wire-search-fields.d.ts",
+      "import": "./dist/wire-search-fields.js"
     },
     "./popup-menu": {
       "types": "./dist/popup-menu.d.ts",
@@ -383,16 +449,6 @@
       "browser": "./dist/browser/split-button.js",
       "import": "./dist/split-button.js"
     },
-    "./icon-toggle-button": {
-      "types": "./dist/icon-toggle-button.d.ts",
-      "browser": "./dist/browser/icon-toggle-button.js",
-      "import": "./dist/icon-toggle-button.js"
-    },
-    "./icon-button": {
-      "types": "./dist/icon-button.d.ts",
-      "browser": "./dist/browser/icon-button.js",
-      "import": "./dist/icon-button.js"
-    },
     "./edge-activity-indicator": {
       "types": "./dist/edge-activity-indicator.d.ts",
       "browser": "./dist/browser/edge-activity-indicator.js",
@@ -416,6 +472,51 @@
       "types": "./dist/wire-file-pickers.d.ts",
       "import": "./dist/wire-file-pickers.js"
     },
+    "./text-field": {
+      "types": "./dist/text-field.d.ts",
+      "browser": "./dist/browser/text-field.js",
+      "import": "./dist/text-field.js"
+    },
+    "./wire-text-fields": {
+      "types": "./dist/wire-text-fields.d.ts",
+      "import": "./dist/wire-text-fields.js"
+    },
+    "./slider": {
+      "types": "./dist/slider.d.ts",
+      "browser": "./dist/browser/slider.js",
+      "import": "./dist/slider.js"
+    },
+    "./wire-sliders": {
+      "types": "./dist/wire-sliders.d.ts",
+      "import": "./dist/wire-sliders.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "browser": "./dist/browser/checkbox.js",
+      "import": "./dist/checkbox.js"
+    },
+    "./radio-group": {
+      "types": "./dist/radio-group.d.ts",
+      "browser": "./dist/browser/radio-group.js",
+      "import": "./dist/radio-group.js"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "browser": "./dist/browser/switch.js",
+      "import": "./dist/switch.js"
+    },
+    "./wire-checkboxes": {
+      "types": "./dist/wire-checkboxes.d.ts",
+      "import": "./dist/wire-checkboxes.js"
+    },
+    "./wire-choice-chips": {
+      "types": "./dist/wire-choice-chips.d.ts",
+      "import": "./dist/wire-choice-chips.js"
+    },
+    "./selection": {
+      "types": "./dist/selection.d.ts",
+      "import": "./dist/selection.js"
+    },
     "./backdrop-image": {
       "types": "./dist/backdrop-image.d.ts",
       "browser": "./dist/browser/backdrop-image.js",
@@ -462,13 +563,17 @@
     "./foundation.css": "./dist/styles/foundation.css",
     "./document.css": "./dist/styles/document.css",
     "./overlay-sheet.css": "./dist/styles/overlay-sheet.css",
+    "./overlay-toast.css": "./dist/styles/overlay-toast.css",
+    "./overlay-tooltip.css": "./dist/styles/overlay-tooltip.css",
     "./layout.css": "./dist/styles/layout.css",
     "./webawesome.css": "./dist/styles/webawesome.css",
     "./styles.css": "./dist/styles/styles.css",
     "./lucide-icon.css": "./dist/styles/lucide-icon.css",
     "./badge.css": "./dist/styles/badge.css",
+    "./button.css": "./dist/styles/button.css",
     "./chip.css": "./dist/styles/chip.css",
     "./disclosure-arrow.css": "./dist/styles/disclosure-arrow.css",
+    "./disclosure.css": "./dist/styles/disclosure.css",
     "./toolbar.css": "./dist/styles/toolbar.css",
     "./toolbar-control-group.css": "./dist/styles/toolbar-control-group.css",
     "./surface-scaffold.css": "./dist/styles/surface-scaffold.css",
@@ -486,16 +591,20 @@
     "./list-inset-text.css": "./dist/styles/list-inset-text.css",
     "./content-item.css": "./dist/styles/content-item.css",
     "./resizable-region.css": "./dist/styles/resizable-region.css",
-    "./app-tab.css": "./dist/styles/app-tab.css",
+    "./tab-bar-item.css": "./dist/styles/tab-bar-item.css",
     "./catalog.css": "./dist/styles/catalog.css",
     "./tab-bar.css": "./dist/styles/tab-bar.css",
     "./nav-stack.css": "./dist/styles/nav-stack.css",
     "./split-view.css": "./dist/styles/split-view.css",
+    "./list-detail-dialog.css": "./dist/styles/list-detail-dialog.css",
+    "./workbench-dialog.css": "./dist/styles/workbench-dialog.css",
     "./pane.css": "./dist/styles/pane.css",
     "./workbench.css": "./dist/styles/workbench.css",
     "./collapsible-panel.css": "./dist/styles/collapsible-panel.css",
     "./tab-navigator.css": "./dist/styles/tab-navigator.css",
     "./loading-spinner.css": "./dist/styles/loading-spinner.css",
+    "./progress-bar.css": "./dist/styles/progress-bar.css",
+    "./progress-ring.css": "./dist/styles/progress-ring.css",
     "./select.css": "./dist/styles/select.css",
     "./popup-menu.css": "./dist/styles/popup-menu.css",
     "./anchored-surface.css": "./dist/styles/anchored-surface.css",
@@ -503,18 +612,25 @@
     "./sunken-panel.css": "./dist/styles/sunken-panel.css",
     "./segmented-control.css": "./dist/styles/segmented-control.css",
     "./choice-chips.css": "./dist/styles/choice-chips.css",
-    "./composer.css": "./dist/styles/composer.css",
-    "./token-search-field.css": "./dist/styles/token-search-field.css",
+    "./color-swatches.css": "./dist/styles/color-swatches.css",
+    "./color-picker.css": "./dist/styles/color-picker.css",
+    "./color-field.css": "./dist/styles/color-field.css",
+    "./message-composer.css": "./dist/styles/message-composer.css",
+    "./search-field.css": "./dist/styles/search-field.css",
+    "./tag-field.css": "./dist/styles/tag-field.css",
     "./state-banner.css": "./dist/styles/state-banner.css",
     "./corner-status.css": "./dist/styles/corner-status.css",
     "./column-track.css": "./dist/styles/column-track.css",
     "./content-swap.css": "./dist/styles/content-swap.css",
     "./backdrop-image.css": "./dist/styles/backdrop-image.css",
     "./file-picker.css": "./dist/styles/file-picker.css",
+    "./text-field.css": "./dist/styles/text-field.css",
+    "./checkbox.css": "./dist/styles/checkbox.css",
+    "./slider.css": "./dist/styles/slider.css",
+    "./radio-group.css": "./dist/styles/radio-group.css",
+    "./switch.css": "./dist/styles/switch.css",
     "./combobox.css": "./dist/styles/combobox.css",
     "./edge-activity-indicator.css": "./dist/styles/edge-activity-indicator.css",
-    "./icon-button.css": "./dist/styles/icon-button.css",
-    "./icon-toggle-button.css": "./dist/styles/icon-toggle-button.css",
     "./split-button.css": "./dist/styles/split-button.css",
     "./framed-list.css": "./dist/styles/framed-list.css",
     "./summary-row.css": "./dist/styles/summary-row.css",
@@ -591,6 +707,7 @@
     "test:contract-types:packed": "node scripts/check-packed-type-contracts.mjs",
     "test:consumer-types": "npm run test:contract-types:source && npm run build && node node_modules/typescript7/bin/tsc -p tests/consumer-types/webawesome/tsconfig.json && npm run test:contract-types:packed",
     "test:e2e": "playwright test",
+    "test:webawesome-latest": "npm install --no-save --no-audit --no-fund @awesome.me/webawesome@^3 && node -e \"console.log('Web Awesome', require('@awesome.me/webawesome/package.json').version)\" && vitest run tests/unit && KERF_WEBAWESOME_LATEST=1 playwright test --project=chromium",
     "bench:micro": "vitest bench --run tests/bench",
     "check": "npm run check:source-organization && npm run check:catalog && npm run check:component-integrations && npm run check:profile && npm run check:demo-conformance && npm run check:recipes && npm run check:css-ownership && npm run check:guidance && npm run check:ai-compatibility && npm run check:ai-regressions && npm run lint && npm run typecheck && npm test && npm run test:consumer-types && npm run check:ai-signatures && npm run demo:build && npm run check:design-templates && npm pack --dry-run",
     "prepublishOnly": "npm run check",
@@ -599,7 +716,7 @@
     "design-templates:build": "node scripts/build-design-templates.mjs"
   },
   "peerDependencies": {
-    "@awesome.me/webawesome": "^3.12.0",
+    "@awesome.me/webawesome": "^3.14.0",
     "kerfjs": "^5.0.0-0",
     "lucide": "^1.43.0",
     "playwright": "^1.63.0"
@@ -618,7 +735,7 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@awesome.me/webawesome": "3.12.0",
+    "@awesome.me/webawesome": "^3.14.0",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.63.0",
     "@types/node": "^22.10.0",

package/ux-demo/recipes/composer-form.tsx

@@ -1,17 +1,16 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/select/register';
 import '@kerfjs/ui/webawesome.css';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/input/input.js';
-import '@awesome.me/webawesome/dist/components/textarea/textarea.js';
 
 import { Spacer } from '@kerfjs/ui';
+import { Button } from '@kerfjs/ui/button';
 import { List } from '@kerfjs/ui/list';
 import { ListInsetText } from '@kerfjs/ui/list-inset-text';
 import { Row } from '@kerfjs/ui/row';
 import { Select } from '@kerfjs/ui/select';
 import { StateBanner } from '@kerfjs/ui/state-banner';
 import { Text } from '@kerfjs/ui/text';
+import { TextField } from '@kerfjs/ui/text-field';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
@@ -94,20 +93,21 @@ export const createRecipe: RecipeFactory = (announce) => {
           />
         )}
         <List gap="xs" controlInsets="rl">
-          <wa-input
+          <TextField
             name="recipe-title"
             label="Update Title"
             hint="Summarize the outcome in one line."
             required
             value={title.value}
           />
-          <wa-textarea
+          <TextField
+            multiline
             name="recipe-body"
             label="Details"
             hint="Include decisions, owners, and the next checkpoint."
-            rows="5"
-            maxlength="400"
-            with-count
+            rows={5}
+            maxLength={400}
+            showCount
             value={body.value}
           />
           <Select<string>
@@ -123,21 +123,20 @@ export const createRecipe: RecipeFactory = (announce) => {
         </List>
         <Row gap="xs" wrap controlInsets="rl">
           <Spacer flex />
-          <wa-button
-            appearance="outlined"
-            data-action="recipe-action"
-            data-recipe-command="reset"
+          <Button
+            emphasis="secondary"
+            action="recipe-action"
+            rootAttributes={{ 'data-recipe-command': 'reset' }}
           >
             Reset
-          </wa-button>
-          <wa-button
-            variant="brand"
-            appearance="accent"
-            data-action="recipe-action"
-            data-recipe-command="submit"
+          </Button>
+          <Button
+            tone="brand"
+            action="recipe-action"
+            rootAttributes={{ 'data-recipe-command': 'submit' }}
           >
             Publish Update
-          </wa-button>
+          </Button>
         </Row>
       </List>
     </form>