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

package/dist/styles/menu-action-row.css

@@ -1,160 +0,0 @@
-.kui-menu-action-row {
-  --kui-menu-action-row-color: var(--kui-color-neutral-on-normal);
-  --kui-menu-action-row-border: transparent;
-  --kui-menu-action-row-background: transparent;
-  --kui-menu-action-row-hover-border: var(--kui-color-neutral-border-normal);
-  --kui-menu-action-row-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-menu-action-row-selected-color: var(--kui-color-brand-on-quiet);
-  --kui-menu-action-row-selected-border: var(--kui-color-brand-border-quiet);
-  --kui-menu-action-row-selected-background: var(--kui-color-brand-fill-normal);
-  --kui-menu-action-row-trailing-hover-background: var(
-    --kui-color-neutral-fill-normal
-  );
-  display: flex;
-  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: var(--kui-menu-action-row-color);
-  background: var(--kui-menu-action-row-background);
-  box-shadow: inset 0 0 0 1px var(--kui-menu-action-row-border);
-  align-items: stretch;
-}
-
-.kui-menu-action-row:has(.kui-menu-action-row__primary:hover) {
-  --kui-menu-action-row-border: var(--kui-menu-action-row-hover-border);
-  --kui-menu-action-row-background: var(--kui-menu-action-row-hover-background);
-}
-
-.kui-menu-action-row[data-selected="true"],
-.kui-menu-action-row[data-pressed="true"] {
-  --kui-menu-action-row-border: var(--kui-menu-action-row-selected-border);
-  --kui-menu-action-row-background: var(
-    --kui-menu-action-row-selected-background
-  );
-  color: var(--kui-menu-action-row-selected-color);
-  font-weight: 650;
-}
-
-.kui-menu-action-row:has(.kui-menu-action-row__primary:focus-visible) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-menu-action-row__primary,
-.kui-menu-action-row__trailing-action {
-  height: auto !important;
-  min-height: 2.75rem;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-}
-
-.kui-menu-action-row__primary {
-  position: relative;
-  display: block;
-  flex: 1 1 auto;
-  min-width: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  text-align: start;
-}
-
-.kui-menu-action-row__primary:focus-visible {
-  outline: none;
-}
-
-.kui-menu-action-row__primary:disabled,
-.kui-menu-action-row__trailing-action:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.kui-menu-action-row__icon {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: currentColor;
-  transform: translateY(-50%);
-  place-items: center;
-}
-
-.kui-menu-action-row__icon svg {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.kui-menu-action-row__label {
-  display: grid;
-  min-width: 0;
-  min-height: calc(
-    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
-  );
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  align-items: center;
-}
-
-.kui-menu-action-row[data-has-icon="true"] .kui-menu-action-row__label {
-  margin-inline-start: calc(
-    1.5rem + var(--kui-layout-item-gap, 0.5rem)
-  );
-}
-
-.kui-menu-action-row[data-multiline="true"] .kui-menu-action-row__label {
-  display: block;
-  overflow: visible;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.kui-menu-action-row[data-multiline="true"] .kui-menu-action-row__icon {
-  inset-block-start: calc(
-    var(--kui-layout-item-padding, 0.5rem) + (1lh / 2)
-  );
-}
-
-.kui-menu-action-row__trailing-action {
-  display: grid;
-  width: 2.75rem;
-  min-width: 2.75rem;
-  border-radius: var(--kui-radius-pill);
-  place-items: center;
-}
-
-.kui-menu-action-row__trailing-action:hover:not(:disabled) {
-  background: var(--kui-menu-action-row-trailing-hover-background);
-}
-
-.kui-menu-action-row__trailing-action:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: -2px;
-}
-
-.kui-menu-action-row__trailing-action > svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-@media (forced-colors: active) {
-  .kui-menu-action-row {
-    --kui-menu-action-row-border: ButtonText;
-    outline: 1px solid ButtonText;
-    outline-offset: -1px;
-  }
-
-  .kui-menu-action-row[data-selected="true"],
-  .kui-menu-action-row[data-pressed="true"] {
-    --kui-menu-action-row-selected-color: HighlightText;
-    --kui-menu-action-row-selected-background: Highlight;
-  }
-}

package/dist/styles/menu-header.css

@@ -1,160 +0,0 @@
-.kui-menu-header {
-  --kui-menu-header-color: var(--kui-color-neutral-on-quiet);
-  --kui-menu-header-hover-background: var(--kui-color-neutral-border-quiet);
-  --_kui-menu-header-action-icon-size: var(
-    --kui-menu-header-action-icon-size,
-    1.125rem
-  );
-  display: flex;
-  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-width: 0;
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: 0;
-  box-sizing: border-box;
-  color: var(--kui-menu-header-color);
-  background: transparent;
-  align-items: stretch;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-}
-
-.kui-menu-header__title,
-.kui-menu-header__action {
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: inherit;
-  background: transparent;
-}
-
-.kui-menu-header__title {
-  display: flex;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  align-items: center;
-  flex: 1 1 auto;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-  font: inherit;
-  text-align: start;
-}
-
-.kui-menu-header__label {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  font-size: var(--kui-font-xs);
-  font-weight: 650;
-  letter-spacing: 0.04em;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.kui-menu-header__badge {
-  display: inline-flex;
-  min-height: 1.5rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-quiet);
-  align-items: center;
-  flex: none;
-  font-size: var(--kui-font-xs);
-  line-height: 1;
-}
-
-.kui-menu-header__count {
-  display: inline-grid;
-  min-width: 1.35rem;
-  height: 1.35rem;
-  padding-inline: 0.35rem;
-  box-sizing: border-box;
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-quiet);
-  place-items: center;
-  flex: none;
-  font-size: var(
-    --kui-menu-header-count-font-size,
-    var(--wa-font-size-3xs, 0.625rem)
-  );
-  font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1;
-}
-
-.kui-menu-header__action,
-.kui-menu-header__action-layer {
-  display: grid;
-  place-items: center;
-}
-
-.kui-menu-header__action {
-  /* A fitted square: the icon size plus its padding and 1px border, instead of a
-     forced 44px box that left an oversized halo around the ~18px icon and, via the
-     parent's align-items: stretch, a vertically stretched oval. `align-self:
-     center` keeps it centered in the header's 44px row without stretching. Sizing
-     off the icon variable keeps it square and correct at any icon size. */
-  --_kui-menu-header-action-size: calc(
-    var(--_kui-menu-header-action-icon-size) +
-      (2 * var(--kui-layout-item-padding, 0.5rem)) + 2px
-  );
-  appearance: none;
-  display: inline-flex;
-  width: var(--_kui-menu-header-action-size);
-  height: var(--_kui-menu-header-action-size);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  cursor: pointer;
-  flex: none;
-}
-
-.kui-menu-header__toggle {
-  appearance: none;
-  width: 100%;
-  cursor: pointer;
-}
-
-.kui-menu-header__action-layer {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-inline-start: auto;
-  flex: none;
-}
-
-.kui-menu-header__action:hover,
-.kui-menu-header__toggle:hover {
-  border-color: var(--kui-color-neutral-border-normal);
-  background: var(--kui-menu-header-hover-background);
-}
-
-.kui-menu-header__action:focus-visible,
-.kui-menu-header__toggle:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-menu-header__action:disabled {
-  cursor: not-allowed;
-  opacity: 0.48;
-}
-
-.kui-menu-header__action:disabled:hover {
-  border-color: transparent;
-  background: transparent;
-}
-
-.kui-menu-header__action > svg,
-.kui-menu-header__action-layer > svg {
-  /* min-block-size: 0 overrides the flex item's automatic minimum, which would
-     otherwise resolve to the icon SVG's intrinsic 24px viewBox height and stretch
-     the button past its used icon size. */
-  width: var(--_kui-menu-header-action-icon-size);
-  height: var(--_kui-menu-header-action-icon-size);
-  min-block-size: 0;
-}

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/dist/styles/panel-header.css

@@ -1,59 +0,0 @@
-.kui-panel-header {
-  display: grid;
-  width: 100%;
-  gap: 0;
-}
-
-/* The only chrome PanelHeader adds to the plain Toolbar: the icon group is a
-   normal (bordered) control group given a brand fill, with its border color set
-   to match the fill so it reads as a solid filled tile rather than a bordered
-   pill. Both are the group's own theming variables — no Toolbar style is
-   overridden. */
-.kui-panel-header__icon.kui-toolbar-control-group {
-  --kui-toolbar-control-background: var(
-    --kui-panel-header-icon-background,
-    var(--kui-color-brand-fill-quiet)
-  );
-  --kui-toolbar-control-border: var(
-    --kui-panel-header-icon-border,
-    var(--kui-color-brand-fill-quiet)
-  );
-  color: var(
-    --kui-panel-header-icon-foreground,
-    var(--kui-color-brand-on-quiet)
-  );
-}
-
-.kui-panel-header__icon svg {
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-/* The subtitle sits on its own row, its text left-aligned with the title text
-   (past the toolbar padding, the optional icon group + leading gap, and the
-   title's own inline padding). */
-.kui-panel-header__summary {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  padding-inline-start: var(--kui-panel-header-title-inset);
-  color: var(--kui-color-text-quiet);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-panel-header[data-has-icon="false"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}
-
-.kui-panel-header[data-has-icon="true"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}

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;
-    },
-  };
-};