@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.50

package/ux-demo/recipes/collapsible-sidebar.tsx

@@ -1,6 +1,6 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/collapsible-panel.css';
-import './recipes.css';
+import './collapsible-sidebar.css';
 
 import {
   CollapsiblePanel,
@@ -10,7 +10,7 @@ import { deviceClass } from '@kerfjs/ui/device-class';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { Text } from '@kerfjs/ui/text';
+import { Pane } from '@kerfjs/ui/pane';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
@@ -18,6 +18,11 @@ import { type SidebarStorage, wireSidebar } from '@kerfjs/ui/wire-sidebar';
 import { signal } from 'kerfjs';
 import { Bell, Folder, Inbox, Users } from 'lucide';
 
+import {
+  RecipeMutedText,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 const RAIL_ACTION = 'recipe-sidebar-rail';
@@ -67,132 +72,157 @@ export const createRecipe: RecipeFactory = (announce) => {
   );
 
   const render = () => (
-    <section
-      class="kui-recipe recipe-collapsible-sidebar kui-recipe__surface"
-      data-recipe="recipe-collapsible-sidebar"
-      data-rail-collapsed={String(railCollapsed.value)}
-      data-drawer-collapsed={String(drawerCollapsed.value)}
+    <RecipeRoot
+      recipe="recipe-collapsible-sidebar"
+      dataAttributes={{
+        'data-rail-collapsed': String(railCollapsed.value),
+        'data-drawer-collapsed': String(drawerCollapsed.value),
+      }}
     >
-      <CollapsiblePanel
-        id="sidebar-rail"
-        side="left"
-        size={232}
-        collapsed={railCollapsed.value}
-        label="Workspace navigation"
-        className="recipe-collapsible-sidebar__rail kui-pane"
-      >
-        <div class="recipe-collapsible-sidebar__rail-head">
-          <ToolbarText text="Atlas" />
-          <ToolbarControlGroup appearance="borderless" single>
-            {railToggle(true)}
-          </ToolbarControlGroup>
+      <div class="recipe-collapsible-sidebar">
+        <div class="recipe-collapsible-sidebar__rail">
+          <CollapsiblePanel
+            id="sidebar-rail"
+            side="left"
+            size={232}
+            collapsed={railCollapsed.value}
+            label="Workspace navigation"
+          >
+            <Pane
+              contentElement="nav"
+              contentClassName="recipe-collapsible-sidebar__nav"
+              contentLabel="Workspace"
+              header={
+                <Toolbar
+                  label="Workspace navigation"
+                  dividerSides=""
+                  leading={<ToolbarText text="Atlas" />}
+                  trailing={
+                    <ToolbarControlGroup appearance="borderless" single>
+                      {railToggle(true)}
+                    </ToolbarControlGroup>
+                  }
+                />
+              }
+            >
+              <section>
+                <ListHeader label="Workspace" />
+                <ListItem
+                  action="recipe-action"
+                  itemId="inbox"
+                  label="Inbox"
+                  icon={<LucideIcon icon={Inbox} name="inbox" />}
+                  trailing={<span>12</span>}
+                  selected={selected.value === 'inbox'}
+                />
+                <ListItem
+                  action="recipe-action"
+                  itemId="projects"
+                  label="Projects"
+                  icon={<LucideIcon icon={Folder} name="folder" />}
+                  selected={selected.value === 'projects'}
+                />
+                <ListItem
+                  action="recipe-action"
+                  itemId="shared"
+                  label="Shared with me"
+                  icon={<LucideIcon icon={Users} name="users" />}
+                  selected={selected.value === 'shared'}
+                />
+              </section>
+            </Pane>
+          </CollapsiblePanel>
         </div>
-        <nav
-          class="recipe-collapsible-sidebar__nav kui-pane__content kui-content"
-          aria-label="Workspace"
-        >
-          <section>
-            <ListHeader label="Workspace" />
-            <ListItem
-              action="recipe-action"
-              itemId="inbox"
-              label="Inbox"
-              icon={<LucideIcon icon={Inbox} name="inbox" />}
-              trailing={<span>12</span>}
-              selected={selected.value === 'inbox'}
-            />
-            <ListItem
-              action="recipe-action"
-              itemId="projects"
-              label="Projects"
-              icon={<LucideIcon icon={Folder} name="folder" />}
-              selected={selected.value === 'projects'}
-            />
-            <ListItem
-              action="recipe-action"
-              itemId="shared"
-              label="Shared with me"
-              icon={<LucideIcon icon={Users} name="users" />}
-              selected={selected.value === 'shared'}
-            />
-          </section>
-        </nav>
-      </CollapsiblePanel>
-      <main class="recipe-collapsible-sidebar__main kui-pane">
-        <Toolbar
-          label="Current navigation view"
-          dividerSides=""
-          leading={
-            <>
-              <ToolbarControlGroup appearance="borderless" single>
-                {railToggle(false)}
-              </ToolbarControlGroup>
-              <ToolbarText
-                text={
-                  selected.value === 'projects'
-                    ? 'Projects'
-                    : selected.value === 'shared'
-                      ? 'Shared with me'
-                      : 'Inbox'
+        <div class="recipe-collapsible-sidebar__main">
+          <Pane
+            element="main"
+            contentClassName="recipe-collapsible-sidebar__body"
+            header={
+              <Toolbar
+                label="Current navigation view"
+                dividerSides=""
+                leading={
+                  <>
+                    <ToolbarControlGroup appearance="borderless" single>
+                      {railToggle(false)}
+                    </ToolbarControlGroup>
+                    <ToolbarText
+                      text={
+                        selected.value === 'projects'
+                          ? 'Projects'
+                          : selected.value === 'shared'
+                            ? 'Shared with me'
+                            : 'Inbox'
+                      }
+                      size="xlarge"
+                      id="recipe-collapsible-main-title"
+                    />
+                  </>
+                }
+                trailing={
+                  <ToolbarControlGroup appearance="borderless" single>
+                    {drawerToggle()}
+                  </ToolbarControlGroup>
                 }
-                size="xlarge"
-                id="recipe-collapsible-main-title"
               />
-            </>
-          }
-          trailing={
-            <ToolbarControlGroup appearance="borderless" single>
-              {drawerToggle()}
-            </ToolbarControlGroup>
-          }
-        />
-        <div class="recipe-collapsible-sidebar__body kui-pane__content kui-content">
-          <Text class="kui-recipe__ownership kui-content-item">
-            The app owns each panel's <code>collapsed</code> signal, sizes, and
-            content; <code>wireSidebar</code> owns the toggle, focus
-            move/restore, the compact overlay, and persistence.
-          </Text>
-          <article class="recipe-collapsible-sidebar__card kui-content-item">
-            <strong>Narrow the window to a compact width</strong>
-            <Text class="kui-recipe__muted">
-              The rail and drawer become a dismissable overlay: a backdrop,
-              Escape, and a trapped Tab ring, all managed by the wire.
-            </Text>
-          </article>
+            }
+          >
+            <RecipeOwnershipNote>
+              The app owns each panel's <code>collapsed</code> signal, sizes,
+              and content; <code>wireSidebar</code> owns the toggle, focus
+              move/restore, the compact overlay, and persistence.
+            </RecipeOwnershipNote>
+            <article class="recipe-collapsible-sidebar__card kui-content-item">
+              <strong>Narrow the window to a compact width</strong>
+              <RecipeMutedText>
+                The rail and drawer become a dismissable overlay: a backdrop,
+                Escape, and a trapped Tab ring, all managed by the wire.
+              </RecipeMutedText>
+            </article>
+          </Pane>
         </div>
-      </main>
-      <CollapsiblePanel
-        id="sidebar-console"
-        side="bottom"
-        size={168}
-        collapsed={drawerCollapsed.value}
-        label="Activity"
-        className="recipe-collapsible-sidebar__drawer kui-pane"
-      >
-        <Toolbar
-          label="Activity"
-          dividerSides="b"
-          leading={<ToolbarText text="Activity" size="small" />}
-          trailing={
-            <ToolbarControlGroup appearance="borderless" single>
-              {drawerToggle()}
-            </ToolbarControlGroup>
-          }
-        />
-        <div class="recipe-collapsible-sidebar__drawer-body kui-pane__content kui-content">
-          <ul class="recipe-collapsible-sidebar__log">
-            <li>
-              <LucideIcon icon={Bell} name="bell" />
-              Deploy finished · 2m ago
-            </li>
-            <li>
-              <LucideIcon icon={Bell} name="bell" />
-              Review requested · 9m ago
-            </li>
-          </ul>
+        <div class="recipe-collapsible-sidebar__drawer">
+          <CollapsiblePanel
+            id="sidebar-console"
+            side="bottom"
+            size={168}
+            collapsed={drawerCollapsed.value}
+            label="Activity"
+          >
+            <Pane
+              contentClassName="recipe-collapsible-sidebar__drawer-body"
+              header={
+                <Toolbar
+                  label="Activity"
+                  dividerSides="b"
+                  leading={<ToolbarText text="Activity" size="small" />}
+                  trailing={
+                    <ToolbarControlGroup appearance="borderless" single>
+                      {drawerToggle()}
+                    </ToolbarControlGroup>
+                  }
+                />
+              }
+            >
+              <ul class="recipe-collapsible-sidebar__log">
+                <li>
+                  <span class="recipe-collapsible-sidebar__log-icon">
+                    <LucideIcon icon={Bell} name="bell" />
+                  </span>
+                  Deploy finished · 2m ago
+                </li>
+                <li>
+                  <span class="recipe-collapsible-sidebar__log-icon">
+                    <LucideIcon icon={Bell} name="bell" />
+                  </span>
+                  Review requested · 9m ago
+                </li>
+              </ul>
+            </Pane>
+          </CollapsiblePanel>
         </div>
-      </CollapsiblePanel>
-    </section>
+      </div>
+    </RecipeRoot>
   );
 
   return {

package/ux-demo/recipes/compact-toolbar.css

@@ -0,0 +1,35 @@
+.recipe-compact-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-content-gap);
+}
+
+.recipe-compact-toolbar__guide {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-inline: 0;
+  gap: var(--kui-layout-control-gap);
+}
+
+.recipe-compact-toolbar__guide > div {
+  padding: var(--kui-layout-item-padding);
+  border: var(--kui-layout-item-border-width) solid
+    var(--kui-color-border-quiet);
+  border-radius: var(--kui-layout-rounded-radius);
+}
+
+.recipe-compact-toolbar__guide strong {
+  display: block;
+}
+
+@container (max-width: 44rem) {
+  .recipe-compact-toolbar__guide {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@container (max-width: 28rem) {
+  .recipe-compact-toolbar__guide {
+    grid-template-columns: 1fr;
+  }
+}

package/ux-demo/recipes/compact-toolbar.tsx

@@ -1,17 +1,21 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/select/register';
-import './recipes.css';
+import './compact-toolbar.css';
 
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
 import { SegmentedControl } from '@kerfjs/ui/segmented-control';
 import { Select } from '@kerfjs/ui/select';
-import { Text } from '@kerfjs/ui/text';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
 import { Filter, MoreHorizontal, RefreshCw } from 'lucide';
 
+import {
+  RecipeMutedText,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 export const createRecipe: RecipeFactory = (announce) => {
@@ -19,108 +23,108 @@ export const createRecipe: RecipeFactory = (announce) => {
   const sort = signal('updated');
   const filtered = signal(false);
   const render = () => (
-    <section
-      class="kui-recipe recipe-compact-toolbar kui-recipe__surface kui-layout"
-      data-recipe="recipe-compact-toolbar"
-    >
-      <Toolbar
-        label="Task workspace controls"
-        leading={
-          <ToolbarControlGroup appearance="borderless" single>
-            <ToolbarText text="Tasks" size="small" />
-          </ToolbarControlGroup>
-        }
-        center={
-          <ToolbarControlGroup>
-            <SegmentedControl<string>
-              id="recipe-view"
-              label="View"
-              value={view.value}
-              action="recipe-action"
-              appearance="toolbar"
-              shape="pill"
-              size="small"
-              choices={[
-                { value: 'list', label: 'List' },
-                { value: 'board', label: 'Board' },
-                { value: 'timeline', label: 'Timeline' },
-              ]}
-            />
-          </ToolbarControlGroup>
-        }
-        trailing={
-          <div class="kui-control-cluster">
-            <Select<string>
-              name="recipe-sort"
-              value={sort.value}
-              ariaLabel="Sort tasks"
-              fitMenu
-              choices={[
-                { value: 'updated', label: 'Recently updated' },
-                { value: 'priority', label: 'Priority' },
-                { value: 'owner', label: 'Owner' },
-                { value: 'created', label: 'Created date' },
-              ]}
-            />
-            <ToolbarControlGroup label="Task actions" buttonAppearance="push">
-              <button
-                type="button"
-                aria-label="Toggle filters"
-                aria-pressed={String(filtered.value)}
-                data-action="recipe-action"
-                data-recipe-command="filter"
-              >
-                <LucideIcon icon={Filter} name="filter" />
-              </button>
-              <button
-                type="button"
-                aria-label="Refresh tasks"
-                data-action="recipe-action"
-                data-recipe-command="refresh"
-              >
-                <LucideIcon icon={RefreshCw} name="refresh-cw" />
-              </button>
-            </ToolbarControlGroup>
-            <ToolbarControlGroup label="More task actions" single>
-              <button
-                type="button"
-                aria-label="More task actions"
-                data-action="recipe-action"
-                data-recipe-command="more"
-              >
-                <LucideIcon icon={MoreHorizontal} name="more-horizontal" />
-              </button>
+    <RecipeRoot recipe="recipe-compact-toolbar">
+      <div class="recipe-compact-toolbar kui-layout">
+        <Toolbar
+          label="Task workspace controls"
+          responsive="stack"
+          responsiveAt="compact"
+          leading={<ToolbarText text="Tasks" size="small" />}
+          center={
+            <ToolbarControlGroup>
+              <SegmentedControl<string>
+                id="recipe-view"
+                label="View"
+                value={view.value}
+                action="recipe-action"
+                appearance="toolbar"
+                shape="pill"
+                size="small"
+                choices={[
+                  { value: 'list', label: 'List' },
+                  { value: 'board', label: 'Board' },
+                  { value: 'timeline', label: 'Timeline' },
+                ]}
+              />
             </ToolbarControlGroup>
+          }
+          trailing={
+            <>
+              <ToolbarControlGroup single focusRing="outline">
+                <Select<string>
+                  name="recipe-sort"
+                  value={sort.value}
+                  ariaLabel="Sort tasks"
+                  fitMenu
+                  presentation="toolbar-borderless"
+                  size="compact"
+                  focusRingOwner="group"
+                  choices={[
+                    { value: 'updated', label: 'Recently updated' },
+                    { value: 'priority', label: 'Priority' },
+                    { value: 'owner', label: 'Owner' },
+                    { value: 'created', label: 'Created date' },
+                  ]}
+                />
+              </ToolbarControlGroup>
+              <ToolbarControlGroup label="Task actions" buttonAppearance="push">
+                <button
+                  type="button"
+                  aria-label="Toggle filters"
+                  aria-pressed={String(filtered.value)}
+                  data-action="recipe-action"
+                  data-recipe-command="filter"
+                >
+                  <LucideIcon icon={Filter} name="filter" />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Refresh tasks"
+                  data-action="recipe-action"
+                  data-recipe-command="refresh"
+                >
+                  <LucideIcon icon={RefreshCw} name="refresh-cw" />
+                </button>
+              </ToolbarControlGroup>
+              <ToolbarControlGroup label="More task actions" single>
+                <button
+                  type="button"
+                  aria-label="More task actions"
+                  data-action="recipe-action"
+                  data-recipe-command="more"
+                >
+                  <LucideIcon icon={MoreHorizontal} name="more-horizontal" />
+                </button>
+              </ToolbarControlGroup>
+            </>
+          }
+        />
+        <div class="recipe-compact-toolbar__guide kui-content-item">
+          <div>
+            <strong>ToolbarControlGroup</strong>
+            <RecipeMutedText>
+              Related commands or pressed tools.
+            </RecipeMutedText>
+          </div>
+          <div>
+            <strong>SegmentedControl</strong>
+            <RecipeMutedText>A few visible exclusive choices.</RecipeMutedText>
+          </div>
+          <div>
+            <strong>Select</strong>
+            <RecipeMutedText>A longer controlled value list.</RecipeMutedText>
+          </div>
+          <div>
+            <strong>Ordinary button</strong>
+            <RecipeMutedText>One independent command.</RecipeMutedText>
           </div>
-        }
-      />
-      <div class="recipe-compact-toolbar__guide kui-content-item">
-        <div>
-          <strong>ToolbarControlGroup</strong>
-          <span class="kui-recipe__muted">
-            Related commands or pressed tools.
-          </span>
-        </div>
-        <div>
-          <strong>SegmentedControl</strong>
-          <span class="kui-recipe__muted">
-            A few visible exclusive choices.
-          </span>
-        </div>
-        <div>
-          <strong>Select</strong>
-          <span class="kui-recipe__muted">A longer controlled value list.</span>
-        </div>
-        <div>
-          <strong>Ordinary button</strong>
-          <span class="kui-recipe__muted">One independent command.</span>
         </div>
+        <RecipeOwnershipNote>
+          The recipe owns control semantics and wrapping. The app owns values,
+          actions, persistence, and responsive priority.
+        </RecipeOwnershipNote>
       </div>
-      <Text class="kui-recipe__ownership kui-content-item">
-        The recipe owns control semantics and wrapping. The app owns values,
-        actions, persistence, and responsive priority.
-      </Text>
-    </section>
+    </RecipeRoot>
   );
   return {
     render,

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

@@ -0,0 +1,19 @@
+.recipe-form__section {
+  display: grid;
+  min-width: 0;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+  gap: var(--kui-layout-item-gap);
+}
+
+.recipe-form__heading-summary {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--kui-color-text-quiet);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recipe-form__fields,
+.recipe-form__footer {
+  align-content: start;
+}

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

@@ -4,16 +4,16 @@ 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 './recipes.css';
+import './composer-form.css';
 
 import { ListInsetText } from '@kerfjs/ui/list-inset-text';
 import { Select } from '@kerfjs/ui/select';
 import { StateBanner } from '@kerfjs/ui/state-banner';
-import { Text } from '@kerfjs/ui/text';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
 
+import { RecipeOwnershipNote, RecipeRoot } from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 type ValueField = HTMLElement & { value: string };
@@ -40,11 +40,13 @@ export const createRecipe: RecipeFactory = (announce) => {
   const audience = signal('team');
   const status = signal<'idle' | 'error' | 'saved'>('idle');
   const render = () => (
-    <form
-      class="kui-recipe recipe-form kui-recipe__surface kui-content"
-      data-recipe="recipe-composer-form"
-      aria-labelledby="recipe-composer-title"
-      aria-describedby="recipe-composer-summary"
+    <RecipeRoot
+      element="form"
+      recipe="recipe-composer-form"
+      measure="form"
+      contentLayout
+      ariaLabelledBy="recipe-composer-title"
+      ariaDescribedBy="recipe-composer-summary"
       noValidate
     >
       <Toolbar
@@ -58,11 +60,13 @@ export const createRecipe: RecipeFactory = (announce) => {
           />
         }
       />
-      <ListInsetText className="kui-recipe__heading-summary">
-        <span id="recipe-composer-summary">
-          Share a concise, actionable update with collaborators.
-        </span>
-      </ListInsetText>
+      <div class="recipe-form__heading-summary">
+        <ListInsetText sides="rl">
+          <span id="recipe-composer-summary">
+            Share a concise, actionable update with collaborators.
+          </span>
+        </ListInsetText>
+      </div>
       {status.value === 'error' && (
         <StateBanner
           title="Add a title before publishing"
@@ -124,12 +128,12 @@ export const createRecipe: RecipeFactory = (announce) => {
             Publish update
           </wa-button>
         </div>
-        <Text class="kui-recipe__ownership">
+        <RecipeOwnershipNote contentItem={false}>
           The recipe owns field, message, and action rhythm. The app owns
           validation rules, draft persistence, permissions, and transport.
-        </Text>
+        </RecipeOwnershipNote>
       </footer>
-    </form>
+    </RecipeRoot>
   );
   return {
     render,