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

package/ux-demo/recipes/list-detail-dialog.css

@@ -0,0 +1,42 @@
+.recipe-list-detail {
+  display: grid;
+  width: 100%;
+  min-height: 25rem;
+  grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
+}
+
+.recipe-list-detail__list {
+  display: grid;
+  min-height: 0;
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+
+.recipe-list-detail__detail {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+}
+
+.recipe-list-detail__body {
+  padding-block: var(--kui-layout-item-gap);
+}
+
+.recipe-list-detail__title {
+  margin: 0 var(--kui-layout-inline-margin, remify(8px));
+  font-size: var(--kui-font-s);
+}
+
+.recipe-list-detail__actions {
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+}
+
+@container (max-width: 44rem) {
+  .recipe-list-detail {
+    grid-template-columns: 1fr;
+  }
+
+  .recipe-list-detail__list {
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--kui-color-border);
+  }
+}

package/ux-demo/recipes/list-detail-dialog.tsx

@@ -2,12 +2,12 @@ import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/webawesome.css';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
-import './recipes.css';
+import './list-detail-dialog.css';
 
 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';
@@ -15,6 +15,11 @@ import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
 import { FileText } from 'lucide';
 
+import {
+  RecipeHeadingSummary,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 const records = {
@@ -46,132 +51,129 @@ export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal<keyof typeof records>('alpha');
   const open = { value: false };
   const render = () => (
-    <section
-      class="kui-recipe kui-content"
-      data-recipe="recipe-list-detail-dialog"
-    >
-      <button
-        class="kui-recipe__button kui-content-item"
-        data-primary="true"
-        type="button"
-        data-action="recipe-action"
-        data-recipe-command="open"
-      >
-        Open project details
-      </button>
-      <Text class="kui-recipe__ownership kui-content-item">
-        Web Awesome owns modal focus and dismissal. The recipe owns
-        header/body/list-detail anatomy; the app owns open state, selection, and
-        policy.
-      </Text>
-      <wa-dialog
-        class="recipe-dialog"
-        label="Project details"
-        without-header
-        open={open.value}
-      >
-        <div class="recipe-dialog__pane kui-pane">
-          <div class="recipe-list-detail kui-pane__content">
-            <nav
-              class="recipe-list-detail__list kui-pane"
-              aria-label="Projects"
-            >
-              <ListHeader label="Recent projects" />
-              <div class="kui-pane__content kui-content">
-                <section>
-                  {Object.entries(records).map(([id, record]) => (
-                    <ListItem
-                      action="recipe-action"
-                      itemId={id}
-                      label={record.name}
-                      selected={selected.value === id}
-                      multiline
-                    />
-                  ))}
-                </section>
+    <RecipeRoot recipe="recipe-list-detail-dialog" surface={false}>
+      <div class="recipe-list-detail-dialog kui-content">
+        <wa-button
+          variant="brand"
+          appearance="accent"
+          data-action="recipe-action"
+          data-recipe-command="open"
+        >
+          Open project details
+        </wa-button>
+        <RecipeOwnershipNote>
+          Web Awesome owns modal focus and dismissal. The recipe owns
+          header/body/list-detail anatomy; the app owns open state, selection,
+          and policy.
+        </RecipeOwnershipNote>
+        <wa-dialog
+          class="recipe-dialog"
+          label="Project details"
+          without-header
+          open={open.value}
+          style="--spacing:0;--width:min(62rem, calc(100vw - 2rem))"
+        >
+          <Pane>
+            <div class="recipe-list-detail">
+              <div class="recipe-list-detail__list">
+                <Pane contentElement="nav" contentLabel="Projects">
+                  <ListHeader label="Recent projects" />
+                  <section>
+                    {Object.entries(records).map(([id, record]) => (
+                      <ListItem
+                        action="recipe-action"
+                        itemId={id}
+                        label={record.name}
+                        selected={selected.value === id}
+                        multiline
+                      />
+                    ))}
+                  </section>
+                </Pane>
               </div>
-            </nav>
-            <section class="recipe-list-detail__detail kui-pane">
-              <Toolbar
-                label="Project details"
-                dividerSides=""
-                leading={
-                  <>
-                    <ToolbarControlGroup appearance="borderless" single>
-                      <LucideIcon icon={FileText} name="file-text" />
-                    </ToolbarControlGroup>
-                    <ToolbarText
-                      text="Project details"
-                      size="xlarge"
-                      id="recipe-dialog-title"
-                    />
-                  </>
-                }
-                trailing={
-                  <ToolbarControlGroup appearance="borderless" single>
-                    <wa-button
-                      appearance="plain"
-                      data-action="recipe-action"
-                      data-recipe-command="close"
-                    >
-                      Close
-                    </wa-button>
-                  </ToolbarControlGroup>
-                }
-              />
-              <Text
-                class="kui-recipe__heading-summary"
-                id="recipe-dialog-summary"
-              >
-                Compare delivery state without leaving the workspace.
-              </Text>
-              <div
-                class="recipe-list-detail__body kui-pane__content kui-content"
-                aria-live="polite"
-              >
-                <Text
-                  variant="h3"
-                  class="recipe-list-detail__title kui-recipe__pane-title kui-content-item"
+              <div class="recipe-list-detail__detail">
+                <Pane
+                  element="section"
+                  header={
+                    <>
+                      <Toolbar
+                        label="Project details"
+                        dividerSides=""
+                        leading={
+                          <>
+                            <ToolbarControlGroup appearance="borderless" single>
+                              <LucideIcon icon={FileText} name="file-text" />
+                            </ToolbarControlGroup>
+                            <ToolbarText
+                              text="Project details"
+                              size="xlarge"
+                              id="recipe-dialog-title"
+                            />
+                          </>
+                        }
+                        trailing={
+                          <ToolbarControlGroup appearance="borderless" single>
+                            <wa-button
+                              appearance="plain"
+                              data-action="recipe-action"
+                              data-recipe-command="close"
+                            >
+                              Close
+                            </wa-button>
+                          </ToolbarControlGroup>
+                        }
+                      />
+                      <RecipeHeadingSummary id="recipe-dialog-summary">
+                        Compare delivery state without leaving the workspace.
+                      </RecipeHeadingSummary>
+                    </>
+                  }
                 >
-                  {records[selected.value].name}
-                </Text>
-                <ValueTable label="Project details">
-                  <ValueTableRow
-                    label="Owner"
-                    value={records[selected.value].owner}
-                  />
-                  <ValueTableRow
-                    label="Status"
-                    value={records[selected.value].state}
-                  />
-                  <ValueTableRow
-                    label="Updated"
-                    value={records[selected.value].updated}
-                  />
-                </ValueTable>
-                <div class="recipe-list-detail__actions kui-control-cluster">
-                  <wa-button
-                    appearance="outlined"
-                    data-action="recipe-action"
-                    data-recipe-command="archive"
-                  >
-                    Archive
-                  </wa-button>
-                  <wa-button
-                    variant="brand"
-                    appearance="accent"
-                    data-action="recipe-action"
-                    data-recipe-command="open-record"
-                  >
-                    Open project
-                  </wa-button>
-                </div>
+                  <div class="recipe-list-detail__body">
+                    <div aria-live="polite">
+                      <h3 class="recipe-list-detail__title kui-content-item">
+                        {records[selected.value].name}
+                      </h3>
+                      <ValueTable label="Project details">
+                        <ValueTableRow
+                          label="Owner"
+                          value={records[selected.value].owner}
+                        />
+                        <ValueTableRow
+                          label="Status"
+                          value={records[selected.value].state}
+                        />
+                        <ValueTableRow
+                          label="Updated"
+                          value={records[selected.value].updated}
+                        />
+                      </ValueTable>
+                      <div class="recipe-list-detail__actions kui-control-cluster">
+                        <wa-button
+                          appearance="outlined"
+                          data-action="recipe-action"
+                          data-recipe-command="archive"
+                        >
+                          Archive
+                        </wa-button>
+                        <wa-button
+                          variant="brand"
+                          appearance="accent"
+                          data-action="recipe-action"
+                          data-recipe-command="open-record"
+                        >
+                          Open project
+                        </wa-button>
+                      </div>
+                    </div>
+                  </div>
+                </Pane>
               </div>
-            </section>
-          </div>
-        </div>
-      </wa-dialog>
-    </section>
+            </div>
+          </Pane>
+        </wa-dialog>
+      </div>
+    </RecipeRoot>
   );
   return {
     render,

package/ux-demo/recipes/list-workspace-states.css

@@ -0,0 +1,30 @@
+.recipe-list {
+  display: grid;
+  min-height: 27rem;
+}
+
+.recipe-list__body {
+  min-height: 0;
+}
+
+.recipe-list__items {
+  display: grid;
+  margin: 0 var(--kui-layout-inline-margin);
+  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);
+  background: var(--kui-color-surface);
+  list-style: none;
+}
+
+.recipe-list__items li {
+  display: grid;
+  padding: var(--kui-layout-item-padding);
+  border-block-end: 1px solid var(--kui-color-border-quiet);
+  gap: var(--kui-layout-metadata-gap);
+}
+
+.recipe-list__items li:last-child {
+  border-block-end: 0;
+}

package/ux-demo/recipes/list-workspace-states.tsx

@@ -1,15 +1,20 @@
 import '@kerfjs/ui/layout.css';
-import './recipes.css';
+import './list-workspace-states.css';
 
 import { EmptyState } from '@kerfjs/ui/empty-state';
 import { LoadingSpinner } from '@kerfjs/ui/loading-spinner';
+import { Pane } from '@kerfjs/ui/pane';
 import { StateBanner } from '@kerfjs/ui/state-banner';
-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 {
+  RecipeMutedText,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 type ListState = 'loading' | 'empty' | 'populated' | 'stale' | 'error';
@@ -26,13 +31,13 @@ export const createRecipe: RecipeFactory = (announce) => {
       {items.map((item, index) => (
         <li>
           <strong>{item}</strong>
-          <span class="kui-recipe__muted">
+          <RecipeMutedText>
             {index === 0
               ? 'In review · Mara'
               : index === 1
                 ? 'Ready · Sam'
                 : 'Draft · Inez'}
-          </span>
+          </RecipeMutedText>
         </li>
       ))}
     </ul>
@@ -46,7 +51,6 @@ export const createRecipe: RecipeFactory = (announce) => {
           busy
           action={
             <button
-              class="kui-recipe__button"
               type="button"
               data-action="recipe-action"
               data-recipe-command="load"
@@ -63,8 +67,6 @@ export const createRecipe: RecipeFactory = (announce) => {
           detail="Create the first task for this milestone."
           action={
             <button
-              class="kui-recipe__button"
-              data-primary="true"
               type="button"
               data-action="recipe-action"
               data-recipe-command="create"
@@ -83,7 +85,6 @@ export const createRecipe: RecipeFactory = (announce) => {
           urgency="alert"
           action={
             <button
-              class="kui-recipe__button"
               type="button"
               data-action="recipe-action"
               data-recipe-command="retry"
@@ -104,7 +105,6 @@ export const createRecipe: RecipeFactory = (announce) => {
               <span class="kui-inline-metadata">
                 <LoadingSpinner label="Refreshing release tasks" />
                 <button
-                  class="kui-recipe__button"
                   type="button"
                   data-action="recipe-action"
                   data-recipe-command="finish"
@@ -120,59 +120,65 @@ export const createRecipe: RecipeFactory = (announce) => {
     );
   };
   const render = () => (
-    <section
-      class="kui-recipe recipe-list kui-recipe__surface kui-pane"
-      data-recipe="recipe-list-workspace-states"
-      data-list-state={state.value}
+    <RecipeRoot
+      recipe="recipe-list-workspace-states"
+      dataAttributes={{ 'data-list-state': state.value }}
     >
-      <Toolbar
-        label="Release tasks"
-        dividerSides=""
-        leading={
-          <ToolbarText
-            text="Release tasks"
-            size="xlarge"
-            id="recipe-list-title"
-          />
-        }
-        trailing={
-          <ToolbarControlGroup appearance="borderless">
-            <button
-              class="kui-recipe__button"
-              type="button"
-              data-action="recipe-action"
-              data-recipe-command="empty"
-            >
-              Clear
-            </button>
-            <button
-              class="kui-recipe__button"
-              type="button"
-              data-action="recipe-action"
-              data-recipe-command="fail"
-            >
-              Simulate failure
-            </button>
-            <button
-              class="kui-recipe__button"
-              data-primary="true"
-              type="button"
-              data-action="recipe-action"
-              data-recipe-command="refresh"
-            >
-              Refresh
-            </button>
-          </ToolbarControlGroup>
-        }
-      />
-      <div class="recipe-list__body kui-pane__content kui-content">
-        {renderBody()}
-        <Text class="kui-recipe__ownership kui-content-item">
-          The recipe owns feedback placement and stable content. The app owns
-          fetching, cache age, retry policy, and domain rows.
-        </Text>
+      <div class="recipe-list">
+        <Pane
+          element="section"
+          contentClassName="recipe-list__body"
+          header={
+            <Toolbar
+              label="Release tasks"
+              dividerSides=""
+              leading={
+                <ToolbarText
+                  text="Release tasks"
+                  size="xlarge"
+                  id="recipe-list-title"
+                />
+              }
+              trailing={
+                <ToolbarControlGroup
+                  appearance="borderless"
+                  content="text"
+                  buttonAppearance="push"
+                >
+                  <button
+                    type="button"
+                    data-action="recipe-action"
+                    data-recipe-command="empty"
+                  >
+                    Clear
+                  </button>
+                  <button
+                    type="button"
+                    data-action="recipe-action"
+                    data-recipe-command="fail"
+                  >
+                    Simulate failure
+                  </button>
+                  <button
+                    type="button"
+                    data-action="recipe-action"
+                    data-recipe-command="refresh"
+                  >
+                    Refresh
+                  </button>
+                </ToolbarControlGroup>
+              }
+            />
+          }
+        >
+          {renderBody()}
+          <RecipeOwnershipNote>
+            The recipe owns feedback placement and stable content. The app owns
+            fetching, cache age, retry policy, and domain rows.
+          </RecipeOwnershipNote>
+        </Pane>
       </div>
-    </section>
+    </RecipeRoot>
   );
   return {
     render,

package/ux-demo/recipes/loading-inspector.css

@@ -0,0 +1,7 @@
+.recipe-inspector__controls {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+  gap: var(--kui-space-s);
+}