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

package/dist/chunk-WVPYVDXY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/empty-state.tsx"],"names":[],"mappings":";;;AAaO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAQ,IAAA,EAAM,QAAQ,IAAA,GAAO,KAAA,EAAO,SAAA,GAAY,EAAA,EAAG,EAAoB;AACzG,EAAA,4BAAQ,SAAA,EAAA,EAAQ,KAAA,EAAO,mBAAmB,SAAS,CAAA,CAAA,CAAG,MAAK,EAAG,gBAAA,EAAe,eAAc,WAAA,EAAW,MAAA,CAAO,IAAI,CAAA,EAAG,IAAA,EAAK,UAAS,WAAA,EAAW,MAAA,CAAO,IAAI,CAAA,EACtJ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,uBAAA,EAAyB,iCAAO,GAAA,CAAC,cAAA,EAAA,EAAe,IAAK,IAAA,EAAK,CAAA;AAAA,oBACrE,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACd,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,IACxB,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC1D,CAAA;AACF","file":"chunk-WVPYVDXY.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { LoadingSpinner } from './loading-spinner.js';\n\nexport interface EmptyStateProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: SafeHtml;\n  busy?: boolean;\n  className?: string;\n}\n\nexport function EmptyState({ title, detail, icon, action, busy = false, className = '' }: EmptyStateProps) {\n  return <section class={`kui-empty-state ${className}`.trim()} data-component=\"empty-state\" data-busy={String(busy)} role=\"status\" aria-busy={String(busy)}>\n    <div class=\"kui-empty-state__icon\">{busy ? <LoadingSpinner /> : icon}</div>\n    <strong>{title}</strong>\n    {detail && <span>{detail}</span>}\n    {action && <div class=\"kui-empty-state__action\">{action}</div>}\n  </section>;\n}\n"]}

package/dist/chunk-YGN7OMLT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAA0B;AACxB,EAAA,uBAAO,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACN,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,QAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,KAAA;AAClC,QAAA,uBAAO,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACN,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,MAAA,CAAO,KAAA;AAAA,YACxC,QAAA,EAAU,OAAO,QAAA,IAAY,WAAA;AAAA,YAC7B,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAC/B,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM;AAAA;AAAA,SAAQ;AAAA,MAC3F,CAAC;AAAA;AAAA,GACH;AACF","file":"chunk-YGN7OMLT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice {\n  value: string;\n  label: string;\n  content?: SafeHtml;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  id: string;\n  label: string;\n  value: string;\n  choices: readonly SegmentedControlChoice[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling every segment. */\n  placeholder?: boolean;\n}\n\nexport function SegmentedControl({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n  placeholder = false,\n}: SegmentedControlProps) {\n  return <div\n    class={`kui-segmented-control ${className}`.trim()}\n    data-component=\"segmented-control\"\n    data-segmented-control-id={id}\n    data-value={value}\n    data-appearance={appearance}\n    data-shape={shape}\n    data-size={size}\n    data-layout={layout}\n    data-placeholder={placeholder ? 'true' : undefined}\n    role=\"group\"\n    aria-label={label}\n    aria-busy={placeholder ? 'true' : undefined}\n  >\n    {choices.map((choice) => {\n      const selected = choice.value === value;\n      return <button\n        type=\"button\"\n        class=\"kui-segmented-control__item\"\n        data-action={placeholder ? undefined : action}\n        data-segment-value={choice.value}\n        data-selected={String(selected)}\n        aria-label={choice.label}\n        aria-pressed={String(selected)}\n        title={placeholder ? undefined : choice.title}\n        disabled={choice.disabled || placeholder}\n        tabindex={placeholder ? '-1' : '0'}\n      >{placeholder ? <Skeleton width=\"4em\" /> : choice.content ?? <span>{choice.label}</span>}</button>;\n    })}\n  </div>;\n}\n"]}

package/dist/chunk-YKUUZPED.js

@@ -1,24 +0,0 @@
-import { filterDataAttributes } from './chunk-7BR3DO2A.js';
-import { Skeleton } from './chunk-B24C4A6T.js';
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
-  "data-component",
-  "data-action",
-  "data-item-id",
-  "data-has-icon",
-  "data-multiline",
-  "data-state"
-]);
-function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = "", style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, rootAttributes = {} }) {
-  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
-  return /* @__PURE__ */ jsxs("button", { ...extensionAttributes, type: "button", class: `kui-menu-item ${className}`.trim(), style, title: placeholder ? void 0 : title, disabled: disabled || placeholder, tabindex: placeholder ? -1 : tabIndex, "data-component": "menu-item", "data-action": placeholder ? void 0 : action, "data-item-id": itemId, "data-has-icon": String(Boolean(icon)), "data-multiline": multiline ? "true" : void 0, "data-state": state, "data-placeholder": placeholder ? "true" : void 0, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), "aria-busy": placeholder ? "true" : void 0, children: [
-    icon && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
-    /* @__PURE__ */ jsx("span", { class: "kui-menu-item__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
-    trailing && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : trailing })
-  ] });
-}
-
-export { MenuItem };
-
-//# sourceMappingURL=chunk-YKUUZPED.js.map

package/dist/chunk-YKUUZPED.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-item.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkCM,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,OAAA,EAAS,iBAAiB,KAAA,EAAO,SAAA,GAAY,KAAA,EAAO,KAAA,EAAO,QAAA,GAAW,KAAA,EAAO,QAAA,EAAU,WAAA,GAAc,KAAA,EAAO,cAAA,GAAiB,EAAC,EAAE,EAAkB;AAC3P,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AAC/F,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,mBAAA,EAAqB,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,OAAc,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,KAAA,EAAO,QAAA,EAAU,QAAA,IAAY,WAAA,EAAa,QAAA,EAAU,WAAA,GAAc,EAAA,GAAK,QAAA,EAAU,gBAAA,EAAe,WAAA,EAAY,aAAA,EAAa,WAAA,GAAc,MAAA,GAAY,QAAQ,cAAA,EAAc,MAAA,EAAQ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EAAG,gBAAA,EAAgB,SAAA,GAAY,MAAA,GAAS,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,kBAAA,EAAkB,WAAA,GAAc,SAAS,MAAA,EAAW,YAAA,EAAY,eAAA,EAAiB,cAAA,EAAc,QAAA,GAAW,MAAA,GAAS,MAAA,EAAW,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EAAG,WAAA,EAAW,WAAA,GAAc,SAAS,MAAA,EAC3oB,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,MAAA,EAAO,KAAA,EAAM,CAAA,GAAK,IAAA,EAAK,CAAA;AAAA,oBACvG,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,IAClF,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,OAAA,EAAQ,CAAA,GAAK,QAAA,EAAS;AAAA,GAAA,EAC1G,CAAA;AACF","file":"chunk-YKUUZPED.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-state',\n]);\n\ntype MenuItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-state'?: never;\n  }\n>;\n\nexport interface MenuItemProps {\n  label: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  style?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action. */\n  placeholder?: boolean;\n  rootAttributes?: MenuItemRootAttributes;\n}\n\nexport function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = '', style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, rootAttributes = {} }: MenuItemProps) {\n  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  return <button {...extensionAttributes} type=\"button\" class={`kui-menu-item ${className}`.trim()} style={style} title={placeholder ? undefined : title} disabled={disabled || placeholder} tabindex={placeholder ? -1 : tabIndex} data-component=\"menu-item\" data-action={placeholder ? undefined : action} data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} data-placeholder={placeholder ? 'true' : undefined} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)} aria-busy={placeholder ? 'true' : undefined}>\n    {icon && <span class=\"kui-menu-item__icon\">{placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}</span>}\n    <span class=\"kui-menu-item__label\">{placeholder ? <Skeleton width=\"9em\" /> : label}</span>\n    {trailing && <span class=\"kui-menu-item__trailing\">{placeholder ? <Skeleton width=\"2.5em\" /> : trailing}</span>}\n  </button>;\n}\n"]}

package/dist/menu-action-row.js

@@ -1,5 +0,0 @@
-export { MenuActionRow } from './chunk-3YD6ZNRA.js';
-
-
-
-//# sourceMappingURL=menu-action-row.js.map

package/dist/menu-action-row.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-action-row.js"}

package/dist/menu-header.d.ts

@@ -1,43 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-type MenuHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-component'?: never;
-    'data-action'?: never;
-    'data-has-badge'?: never;
-    'data-has-count'?: never;
-    'data-toggle'?: never;
-}>;
-type MenuHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-action'?: never;
-    popoverTarget?: string;
-    popoverTargetAction?: 'toggle' | 'show' | 'hide';
-    'aria-controls'?: string;
-    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
-}>;
-interface MenuHeaderBaseProps {
-    label: string;
-    action?: string;
-    actionLabel?: string;
-    actionIcon?: SafeHtml;
-    actionDisabled?: boolean;
-    disabledReason?: string;
-    expanded?: boolean;
-    toggle?: boolean;
-    /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
-    placeholder?: boolean;
-    rootAttributes?: MenuHeaderRootAttributes;
-    triggerAttributes?: MenuHeaderTriggerAttributes;
-}
-type MenuHeaderIndicatorProps = {
-    count: number;
-    countLabel: string;
-    badge?: never;
-} | {
-    count?: never;
-    countLabel?: never;
-    badge?: SafeHtml;
-};
-type MenuHeaderProps = MenuHeaderBaseProps & MenuHeaderIndicatorProps;
-declare function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: MenuHeaderProps): SafeHtml;
-
-export { MenuHeader, type MenuHeaderProps };

package/dist/menu-header.js

@@ -1,7 +0,0 @@
-export { MenuHeader } from './chunk-H6URQGJI.js';
-
-
-
-
-
-//# sourceMappingURL=menu-header.js.map

package/dist/menu-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-header.js"}

package/dist/menu-item.d.ts

@@ -1,33 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-type MenuItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-component'?: never;
-    'data-action'?: never;
-    'data-item-id'?: never;
-    'data-has-icon'?: never;
-    'data-multiline'?: never;
-    'data-state'?: never;
-}>;
-interface MenuItemProps {
-    label: string | SafeHtml;
-    icon?: SafeHtml;
-    trailing?: SafeHtml;
-    selected?: boolean;
-    action: string;
-    itemId?: string;
-    className?: string;
-    style?: string;
-    pressed?: boolean;
-    accessibleLabel?: string;
-    title?: string;
-    multiline?: boolean;
-    state?: string;
-    disabled?: boolean;
-    tabIndex?: number;
-    /** Render the row as an unanimated loading skeleton, disabling its action. */
-    placeholder?: boolean;
-    rootAttributes?: MenuItemRootAttributes;
-}
-declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: MenuItemProps): SafeHtml;
-
-export { MenuItem, type MenuItemProps };

package/dist/menu-item.js

@@ -1,5 +0,0 @@
-export { MenuItem } from './chunk-YKUUZPED.js';
-
-
-
-//# sourceMappingURL=menu-item.js.map

package/dist/menu-item.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-item.js"}

package/dist/panel-header.d.ts

@@ -1,36 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-import { HeadingLevel } from './toolbar-text.js';
-
-interface PanelHeaderProps {
-    title: string;
-    titleId: string;
-    summary?: string;
-    summaryId?: string;
-    icon?: SafeHtml;
-    iconClassName?: string;
-    actions?: SafeHtml;
-    /**
-     * Expose the title as a heading landmark (`role="heading"` + `aria-level`). Set it
-     * for a PAGE or view heading so screen-reader heading navigation works and the view
-     * has a primary heading; omit it (the default) for a dialog title, which is instead
-     * referenced via `aria-labelledby={titleId}` and needs no heading landmark.
-     */
-    headingLevel?: HeadingLevel;
-    /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */
-    placeholder?: boolean;
-}
-/**
- * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone
- * holds an optional icon control group and the title as extra-large `ToolbarText`,
- * whose trailing zone holds the app's action controls, and with an optional
- * subtitle on its own row, left-aligned with the title.
- *
- * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.
- * The only styling it adds is the icon group's fill/border color and the subtitle.
- * When no icon is provided, the icon group is omitted entirely. The `actions` slot
- * is passed straight into the toolbar's trailing zone; the app supplies whatever
- * trailing controls it needs (typically a `ToolbarControlGroup`).
- */
-declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, headingLevel, placeholder }: PanelHeaderProps): SafeHtml;
-
-export { PanelHeader, type PanelHeaderProps };

package/dist/panel-header.js

@@ -1,7 +0,0 @@
-export { PanelHeader } from './chunk-BNQ2YDV4.js';
-
-
-
-
-
-//# sourceMappingURL=panel-header.js.map

package/dist/panel-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"panel-header.js"}

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