@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.9

package/dist/styles/menu-item.css

@@ -1,123 +0,0 @@
-.kui-menu-item {
-  --kui-menu-item-color: var(--kui-color-neutral-on-normal);
-  --kui-menu-item-border: transparent;
-  --kui-menu-item-background: transparent;
-  --kui-menu-item-hover-border: var(--kui-color-neutral-border-normal);
-  --kui-menu-item-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-menu-item-selected-color: var(--kui-color-brand-on-quiet);
-  --kui-menu-item-selected-border: var(--kui-color-brand-border-quiet);
-  --kui-menu-item-selected-background: var(--kui-color-brand-fill-normal);
-  display: grid;
-  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid var(--kui-menu-item-border);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: var(--kui-menu-item-color);
-  background: var(--kui-menu-item-background);
-  cursor: pointer;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: var(--kui-layout-item-gap, 0.5rem);
-  font: inherit;
-  text-align: start;
-}
-
-.kui-menu-item[data-has-icon="true"] {
-  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
-}
-
-.kui-menu-item[data-has-icon="true"] .kui-menu-item__icon {
-  grid-column: 1;
-}
-
-.kui-menu-item[data-has-icon="true"] .kui-menu-item__label {
-  grid-column: 2;
-}
-
-.kui-menu-item[data-has-icon="true"] .kui-menu-item__trailing {
-  grid-column: 3;
-}
-
-.kui-menu-item[data-has-icon="false"] .kui-menu-item__label {
-  grid-column: 1;
-}
-
-.kui-menu-item[data-has-icon="false"] .kui-menu-item__trailing {
-  grid-column: 2;
-}
-
-.kui-menu-item:hover {
-  border-color: var(--kui-menu-item-hover-border);
-  background: var(--kui-menu-item-hover-background);
-}
-
-.kui-menu-item:disabled {
-  color: var(--kui-color-neutral-on-quiet);
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.kui-menu-item[aria-current="page"],
-.kui-menu-item[aria-pressed="true"] {
-  border-color: var(--kui-menu-item-selected-border);
-  color: var(--kui-menu-item-selected-color);
-  background: var(--kui-menu-item-selected-background);
-  font-weight: 650;
-}
-
-.kui-menu-item:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-menu-item__icon {
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: currentColor;
-  place-items: center;
-}
-
-.kui-menu-item__icon svg {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.kui-menu-item__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-menu-item[data-multiline="true"] {
-  height: fit-content;
-  white-space: normal;
-}
-
-.kui-menu-item[data-multiline="true"] .kui-menu-item__label {
-  overflow: visible;
-  white-space: normal;
-}
-
-.kui-menu-item[data-multiline="true"] .kui-menu-item__icon {
-  align-self: start;
-  margin-block-start: calc((1lh - 1.5rem) / 2);
-}
-
-.kui-menu-item__trailing {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-}
-
-.kui-menu-item__trailing > svg {
-  width: 1rem;
-  height: 1rem;
-}

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

@@ -1,45 +0,0 @@
-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 { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
-import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
-import { signal } from 'kerfjs';
-import { FileText } from 'lucide';
-
-import type { RecipeFactory } from './types.js';
-
-const records = {
-  alpha: { name: 'Northstar migration', owner: 'Mara Chen', state: 'In review', updated: 'Today, 09:42' },
-  beta: { name: 'Tablet navigation', owner: 'Sam Rivera', state: 'Ready', updated: 'Yesterday, 16:20' },
-  gamma: { name: 'Contrast audit', owner: 'Inez Okafor', state: 'Blocked', updated: 'Monday, 11:05' },
-} as const;
-
-interface RecipeDialogElement extends HTMLElement {
-  open: boolean;
-}
-
-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-master-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><p class="kui-recipe__ownership kui-content-item">Web Awesome owns modal focus and dismissal. The recipe owns header/body/master-detail anatomy; the app owns open state, selection, and policy.</p><wa-dialog class="recipe-dialog" label="Project details" without-header open={open.value}><div class="recipe-dialog__pane kui-pane"><PanelHeader title="Project details" titleId="recipe-dialog-title" summary="Compare delivery state without leaving the workspace." summaryId="recipe-dialog-summary" icon={<LucideIcon icon={FileText} name="file-text" />} actions={<wa-button appearance="plain" data-action="recipe-action" data-recipe-command="close">Close</wa-button>} /><div class="recipe-master-detail kui-pane__content"><nav class="recipe-master-detail__master kui-pane" aria-label="Projects"><MenuHeader label="Recent projects" /><div class="kui-pane__content kui-content"><section>{Object.entries(records).map(([id, record]) => <MenuItem action="recipe-action" itemId={id} label={record.name} selected={selected.value === id} multiline />)}</section></div></nav><section class="recipe-master-detail__detail kui-content" aria-live="polite"><h3 class="recipe-master-detail__title kui-recipe__pane-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-master-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></section></div></div></wa-dialog></section>;
-  return {
-    render,
-    action(command, element) {
-      const id = element.dataset.itemId;
-      if (id && id in records) { selected.value = id as keyof typeof records; announce(`Selected ${records[selected.value].name}`); return; }
-      const dialog = element.closest('[data-recipe]')?.querySelector<RecipeDialogElement>('wa-dialog');
-      if (command === 'open' && dialog) { element.focus(); open.value = true; dialog.open = true; return; }
-      if (command === 'close' && dialog) { dialog.open = false; return; }
-      announce(`${command} requested`);
-    },
-    afterHide() {
-      open.value = false;
-    },
-  };
-};