@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/chunk-ZX2QQJXD.js

@@ -0,0 +1,249 @@
+import { summarizeSelection } from './chunk-TUID42UE.js';
+import { PopupCaretGlyph } from './chunk-AYPGXR2E.js';
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { Badge } from './chunk-RMWNO6BA.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { em } from './chunk-IQSRHXZR.js';
+import { Check } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+function ChoiceIcon({
+  choice,
+  icon,
+  selected = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-select__icon${selected ? " kui-select__icon--selected" : ""}`,
+      style: choice.color ? `color:${choice.color}` : void 0,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        LucideIcon,
+        {
+          icon,
+          name: choice.iconName ?? choice.label.toLowerCase().replaceAll(" ", "-")
+        }
+      )
+    }
+  );
+}
+function Caret() {
+  return /* @__PURE__ */ jsx("span", { class: "kui-select__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopupCaretGlyph, {}) });
+}
+function Select(props) {
+  const {
+    name,
+    label,
+    ariaLabel,
+    choices,
+    className = "",
+    placeholderText,
+    hint,
+    disabled = false,
+    fitMenu = false,
+    placeholder = false,
+    presentation = "form",
+    size = "default",
+    triggerWidth,
+    maxTriggerWidth,
+    minTriggerWidth,
+    caret = true,
+    focusRingOwner = "select",
+    focusRingInset = false,
+    labelMaxWidth,
+    slot
+  } = props;
+  const multiple = props.multiple === true;
+  const values = props.multiple ? props.value : [props.value];
+  const renderSelected = props.multiple ? void 0 : props.renderSelected;
+  const selectedPresentation = props.selectedPresentation ?? "label";
+  const iconTrigger = props.multiple && props.selectedPresentation === "icon-only";
+  const accessibleName = label || ariaLabel;
+  const style = [
+    labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
+    maxTriggerWidth === void 0 ? void 0 : `--_kui-select-trigger-max:${maxTriggerWidth}`,
+    minTriggerWidth === void 0 ? void 0 : `--_kui-select-trigger-min:${minTriggerWidth}`
+  ].filter(Boolean).join(";") || void 0;
+  const rootData = {
+    "data-component": "select",
+    "data-presentation": presentation,
+    "data-size": size,
+    "data-trigger-width": triggerWidth,
+    "data-trigger-max": maxTriggerWidth === void 0 ? void 0 : "",
+    "data-trigger-min": minTriggerWidth === void 0 ? void 0 : "",
+    "data-caret": caret ? void 0 : "false",
+    "data-selected-presentation": selectedPresentation,
+    "data-focus-ring-owner": focusRingOwner,
+    "data-focus-ring-inset": focusRingInset ? "true" : void 0
+  };
+  if (placeholder) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: `kui-select kui-select--placeholder ${className}`.trim(),
+        ...rootData,
+        "data-placeholder": "true",
+        "aria-busy": "true",
+        style,
+        slot,
+        children: [
+          label && /* @__PURE__ */ jsx("span", { class: "kui-select__label", children: label }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              class: "kui-select__placeholder-box",
+              "aria-label": ariaLabel,
+              role: "img",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: em(10) }),
+                caret ? /* @__PURE__ */ jsx(Caret, {}) : null
+              ]
+            }
+          ),
+          hint && /* @__PURE__ */ jsx("span", { class: "kui-select__hint", children: hint })
+        ]
+      }
+    );
+  }
+  const enabledChosen = choices.filter(
+    (choice) => !choice.disabled && values.includes(choice.value)
+  );
+  const selected = multiple ? void 0 : enabledChosen[0];
+  const summary = multiple ? summarizeSelection(enabledChosen.map((choice) => choice.label)) : "";
+  const triggerName = iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;
+  const valueText = multiple ? iconTrigger ? "" : summary : selected?.label ?? "";
+  const option = (choice, index) => {
+    const chosen = !choice.disabled && values.includes(choice.value);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      choice.separatorBefore && index > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-select__separator", role: "separator" }) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          class: "kui-select__option",
+          role: "option",
+          tabindex: -1,
+          "data-value": choice.value,
+          "data-default-selected": chosen ? "" : void 0,
+          "aria-selected": String(chosen),
+          "aria-disabled": choice.disabled ? "true" : void 0,
+          title: choice.disabled ? choice.disabledReason : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { class: "kui-select__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: Check, name: "check" }) }),
+            choice.icon ? /* @__PURE__ */ jsx(ChoiceIcon, { choice, icon: choice.icon }) : null,
+            /* @__PURE__ */ jsx("span", { class: "kui-select__option-label", children: choice.label })
+          ]
+        }
+      )
+    ] });
+  };
+  const groups = [
+    ...new Set(
+      choices.map((choice) => choice.group).filter((group) => Boolean(group))
+    )
+  ];
+  const ungrouped = choices.filter((choice) => !choice.group);
+  return /* @__PURE__ */ jsxs(
+    "kui-select",
+    {
+      class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(),
+      ...rootData,
+      name,
+      value: multiple ? void 0 : selected?.value ?? "",
+      multiple,
+      disabled,
+      style,
+      slot,
+      children: [
+        label ? /* @__PURE__ */ jsx("span", { class: "kui-select__label", "aria-hidden": "true", children: label }) : null,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-select__trigger",
+            role: "combobox",
+            tabindex: 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": "false",
+            "aria-label": triggerName,
+            "aria-description": hint,
+            disabled,
+            children: [
+              iconTrigger ? /* @__PURE__ */ jsx("span", { class: "kui-select__icon kui-select__icon--selected kui-select__trigger-icon", children: props.triggerIcon }) : selected && renderSelected ? /* @__PURE__ */ jsx("span", { class: "kui-select__custom-selected", children: /* @__PURE__ */ jsx("span", { class: "kui-select__custom-selected-content", children: renderSelected(selected) }) }) : selected?.icon ? /* @__PURE__ */ jsx(ChoiceIcon, { choice: selected, icon: selected.icon, selected: true }) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-select__value",
+                  "data-placeholder": valueText ? void 0 : "true",
+                  "data-placeholder-text": placeholderText,
+                  children: valueText || placeholderText || ""
+                }
+              ),
+              iconTrigger && enabledChosen.length > 0 ? /* @__PURE__ */ jsx(Badge, { tone: "info", size: "compact", ariaHidden: true, children: enabledChosen.length }) : null,
+              caret ? /* @__PURE__ */ jsx(Caret, {}) : null
+            ]
+          }
+        ),
+        hint ? /* @__PURE__ */ jsx("span", { class: "kui-select__hint", "aria-hidden": "true", children: hint }) : null,
+        /* @__PURE__ */ jsxs("div", { class: "kui-select__popup", popover: "manual", tabindex: -1, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "kui-select__listbox",
+              role: "listbox",
+              "aria-label": accessibleName,
+              "aria-multiselectable": multiple ? "true" : void 0,
+              children: [
+                ungrouped.map(option),
+                groups.map((group, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    class: `kui-select__group${index > 0 || ungrouped.length > 0 ? " kui-select__group--separated" : ""}`,
+                    role: "group",
+                    "aria-label": group,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { class: "kui-select__group-title", "aria-hidden": "true", children: group }),
+                      choices.filter((choice) => choice.group === group).map(option)
+                    ]
+                  }
+                ))
+              ]
+            }
+          ),
+          props.multiple && (props.selectAllLabel || props.clearLabel) ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "kui-select__actions",
+              role: "group",
+              "aria-label": accessibleName,
+              children: [
+                props.selectAllLabel ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    class: "kui-select__action",
+                    type: "button",
+                    "data-select-action": "all",
+                    children: props.selectAllLabel
+                  }
+                ) : null,
+                props.clearLabel ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    class: "kui-select__action",
+                    type: "button",
+                    "data-select-action": "clear",
+                    children: props.clearLabel
+                  }
+                ) : null
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+
+export { Select };
+
+//# sourceMappingURL=chunk-ZX2QQJXD.js.map

package/dist/chunk-ZX2QQJXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-ZX2QQJXD.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport type { KerfCustomElement } from 'kerfjs/jsx-runtime';\nimport { Check } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { PopupCaretGlyph } from '../../../shared/popup/popup-glyphs.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport {\n  type CssForegroundColor,\n  em,\n} from '../../../shared/styles/css-values.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\nimport { summarizeSelection } from './model/select-summary.js';\n\ndeclare module 'kerfjs/jsx-runtime' {\n  // Module augmentation requires the namespace form expected by the JSX runtime.\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      /** The Select root: a light-DOM form control defined by `select/register`. */\n      'kui-select': KerfCustomElement & {\n        class?: string;\n        name?: string;\n        value?: string;\n        multiple?: boolean;\n        disabled?: boolean;\n        style?: string;\n        slot?: string;\n      };\n    }\n  }\n}\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  /**\n   * Foreground color for the optional icon: a semantic foreground token such\n   * as `uiColor('success-on-quiet')`, or an application-owned\n   * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n   * `uiColor('success-fill-quiet')` are pale background tints and do not\n   * type-check.\n   */\n  color?: CssForegroundColor;\n  group?: string;\n  /** Keep an unavailable choice visible but prevent selection. */\n  disabled?: boolean;\n  /** Optional explanation exposed as the disabled option's native tooltip. */\n  disabledReason?: string;\n  /**\n   * Draw a divider between this choice and the previous choice in the same\n   * list. A group boundary is already a separator, so the first choice of a\n   * group (or of the whole menu) never draws a second one.\n   */\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n  'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control. */\n  placeholderText?: string;\n  /** Supporting text shown below the control and announced as its description. */\n  hint?: string;\n  disabled?: boolean;\n  /** Match menu width to the trigger; default menus grow to content within viewport gutters. */\n  fitMenu?: boolean;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n  presentation?: SelectPresentation;\n  size?: SelectSize;\n  /** Closed trigger width; omit to keep the presentation's default. */\n  triggerWidth?: SelectTriggerWidth;\n  /**\n   * The widest the closed trigger grows, under any presentation; its value\n   * (or `renderSelected` content) ellipsizes inside it and the caret stays.\n   */\n  maxTriggerWidth?: CssLength;\n  /** The narrowest the closed trigger gets. */\n  minTriggerWidth?: CssLength;\n  /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n  caret?: boolean;\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: SelectFocusRingOwner;\n  /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n  focusRingInset?: boolean;\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n  multiple?: false;\n  value: NoInfer<Value>;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: SelectSelectedPresentation;\n  triggerIcon?: never;\n  selectAllLabel?: never;\n  clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside press, Escape, or Tab; the closed control\n * summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation?: 'label';\n  triggerIcon?: never;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the trigger's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation: 'icon-only';\n  /**\n   * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n   * purpose (a funnel for a filter), independent of the selection.\n   */\n  triggerIcon: KerfUiContent;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n  SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> &\n    SelectAccessibleName &\n    (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n/**\n * A choice's icon, in the listbox or (`selected`) in the closed trigger.\n * Rendered only for a choice that has one.\n */\nfunction ChoiceIcon<Value extends string>({\n  choice,\n  icon,\n  selected = false,\n}: {\n  choice: SelectChoice<Value>;\n  icon: LucideNode;\n  selected?: boolean;\n}) {\n  return (\n    <span\n      class={`kui-select__icon${selected ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n      aria-hidden=\"true\"\n    >\n      <LucideIcon\n        icon={icon}\n        name={\n          choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n        }\n      />\n    </span>\n  );\n}\n\nfunction Caret() {\n  return (\n    <span class=\"kui-select__caret\" aria-hidden=\"true\">\n      <PopupCaretGlyph />\n    </span>\n  );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n  const {\n    name,\n    label,\n    ariaLabel,\n    choices,\n    className = '',\n    placeholderText,\n    hint,\n    disabled = false,\n    fitMenu = false,\n    placeholder = false,\n    presentation = 'form',\n    size = 'default',\n    triggerWidth,\n    maxTriggerWidth,\n    minTriggerWidth,\n    caret = true,\n    focusRingOwner = 'select',\n    focusRingInset = false,\n    labelMaxWidth,\n    slot,\n  } = props;\n  const multiple = props.multiple === true;\n  const values: readonly Value[] = props.multiple ? props.value : [props.value];\n  const renderSelected = props.multiple ? undefined : props.renderSelected;\n  const selectedPresentation: SelectSelectedPresentation =\n    props.selectedPresentation ?? 'label';\n  // A multiple icon-only trigger shows a fixed icon naming the menu's\n  // purpose instead of a selected choice's icon.\n  const iconTrigger =\n    props.multiple && props.selectedPresentation === 'icon-only';\n  const accessibleName = label || ariaLabel;\n  const style =\n    [\n      labelMaxWidth === undefined\n        ? undefined\n        : `--kui-select-label-max-width:${labelMaxWidth}px`,\n      maxTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-max:${maxTriggerWidth}`,\n      minTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-min:${minTriggerWidth}`,\n    ]\n      .filter(Boolean)\n      .join(';') || undefined;\n  const rootData = {\n    'data-component': 'select',\n    'data-presentation': presentation,\n    'data-size': size,\n    'data-trigger-width': triggerWidth,\n    'data-trigger-max': maxTriggerWidth === undefined ? undefined : '',\n    'data-trigger-min': minTriggerWidth === undefined ? undefined : '',\n    'data-caret': caret ? undefined : 'false',\n    'data-selected-presentation': selectedPresentation,\n    'data-focus-ring-owner': focusRingOwner,\n    'data-focus-ring-inset': focusRingInset ? 'true' : undefined,\n  } as const;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        {...rootData}\n        data-placeholder=\"true\"\n        aria-busy=\"true\"\n        style={style}\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width={em(10)} />\n          {caret ? <Caret /> : null}\n        </span>\n        {hint && <span class=\"kui-select__hint\">{hint}</span>}\n      </div>\n    );\n  }\n  const enabledChosen = choices.filter(\n    (choice) => !choice.disabled && values.includes(choice.value),\n  );\n  const selected = multiple ? undefined : enabledChosen[0];\n  // A multiple Select summarizes its chosen labels, in choice order; an\n  // icon-only trigger (whose value text is hidden) ends its name with them.\n  const summary = multiple\n    ? summarizeSelection(enabledChosen.map((choice) => choice.label))\n    : '';\n  const triggerName =\n    iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;\n  const valueText = multiple\n    ? iconTrigger\n      ? ''\n      : summary\n    : (selected?.label ?? '');\n  const option = (choice: SelectChoice<Value>, index: number) => {\n    const chosen = !choice.disabled && values.includes(choice.value);\n    return (\n      <>\n        {choice.separatorBefore && index > 0 ? (\n          <div class=\"kui-select__separator\" role=\"separator\" />\n        ) : null}\n        <div\n          class=\"kui-select__option\"\n          role=\"option\"\n          tabindex={-1}\n          data-value={choice.value}\n          data-default-selected={chosen ? '' : undefined}\n          aria-selected={String(chosen)}\n          aria-disabled={choice.disabled ? 'true' : undefined}\n          title={choice.disabled ? choice.disabledReason : undefined}\n        >\n          <span class=\"kui-select__check\" aria-hidden=\"true\">\n            <LucideIcon icon={Check} name=\"check\" />\n          </span>\n          {choice.icon ? (\n            <ChoiceIcon choice={choice} icon={choice.icon} />\n          ) : null}\n          <span class=\"kui-select__option-label\">{choice.label}</span>\n        </div>\n      </>\n    );\n  };\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  return (\n    <kui-select\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()}\n      {...rootData}\n      name={name}\n      value={multiple ? undefined : (selected?.value ?? '')}\n      multiple={multiple}\n      disabled={disabled}\n      style={style}\n      slot={slot}\n    >\n      {label ? (\n        <span class=\"kui-select__label\" aria-hidden=\"true\">\n          {label}\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        class=\"kui-select__trigger\"\n        role=\"combobox\"\n        // Safari's default Tab order skips buttons; a select stays in it.\n        tabindex={0}\n        aria-haspopup=\"listbox\"\n        aria-expanded=\"false\"\n        aria-label={triggerName}\n        aria-description={hint}\n        disabled={disabled}\n      >\n        {iconTrigger ? (\n          <span class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\">\n            {props.triggerIcon}\n          </span>\n        ) : selected && renderSelected ? (\n          <span class=\"kui-select__custom-selected\">\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected?.icon ? (\n          <ChoiceIcon choice={selected} icon={selected.icon} selected />\n        ) : null}\n        <span\n          class=\"kui-select__value\"\n          data-placeholder={valueText ? undefined : 'true'}\n          data-placeholder-text={placeholderText}\n        >\n          {valueText || placeholderText || ''}\n        </span>\n        {iconTrigger && enabledChosen.length > 0 ? (\n          <Badge tone=\"info\" size=\"compact\" ariaHidden>\n            {enabledChosen.length}\n          </Badge>\n        ) : null}\n        {caret ? <Caret /> : null}\n      </button>\n      {hint ? (\n        <span class=\"kui-select__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      ) : null}\n      <div class=\"kui-select__popup\" popover=\"manual\" tabindex={-1}>\n        <div\n          class=\"kui-select__listbox\"\n          role=\"listbox\"\n          aria-label={accessibleName}\n          aria-multiselectable={multiple ? 'true' : undefined}\n        >\n          {ungrouped.map(option)}\n          {groups.map((group, index) => (\n            <div\n              class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n              role=\"group\"\n              aria-label={group}\n            >\n              <span class=\"kui-select__group-title\" aria-hidden=\"true\">\n                {group}\n              </span>\n              {choices.filter((choice) => choice.group === group).map(option)}\n            </div>\n          ))}\n        </div>\n        {props.multiple && (props.selectAllLabel || props.clearLabel) ? (\n          <div\n            class=\"kui-select__actions\"\n            role=\"group\"\n            aria-label={accessibleName}\n          >\n            {props.selectAllLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"all\"\n              >\n                {props.selectAllLabel}\n              </button>\n            ) : null}\n            {props.clearLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"clear\"\n              >\n                {props.clearLabel}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </kui-select>\n  );\n}\n"]}

package/dist/collapsible-panel.d.ts

@@ -1,20 +1,32 @@
 import { SafeHtml } from 'kerfjs';
-import { LucideIcon } from './lucide-icon.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { P as PanelSide, a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-vg6Ir5Dy.js';
+export { e as collapsiblePanelToggleIcon } from './panel-toolbar-vg6Ir5Dy.js';
+import { ToolbarConfig } from './toolbar.js';
+import { ListConfig } from './list.js';
+import { PaneConfig } from './pane.js';
+import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
+import './lucide-icon.js';
 import 'lucide';
+import './css-values.js';
+import './sides-BPSWde0A.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './scroll-clearance-BikHljTc.js';
 
 /** Which edge a {@link CollapsiblePanel} docks to. */
-type CollapsiblePanelSide = 'left' | 'right' | 'bottom';
+type CollapsiblePanelSide = PanelSide;
+/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */
+type CollapsiblePanelToolbarToggle = PanelToggle;
 /**
- * The standard collapse/expand icon for a panel `side` and `collapsed` state,
- * so every app's sidebars and drawers use one recognizable convention:
- * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
- * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
- * collapsed. Exposed so an app can render its own toggle affordance.
+ * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and
+ * `trailing` while open; groups marked `relocateOnCollapse` and the standard
+ * toggle move to the work-area toolbar through
+ * {@link CollapsiblePanelRelocated} while it is collapsed.
  */
-declare function collapsiblePanelToggleIcon(side: CollapsiblePanelSide, collapsed: boolean): {
-    icon: Parameters<typeof LucideIcon>[0]['icon'];
-    name: string;
-};
+type CollapsiblePanelToolbar = PanelToolbar;
+type CollapsiblePanelBottomToolbar = PanelBottomToolbar;
+type CollapsiblePanelChromePlacement = PanelChromePlacement;
 interface CollapsiblePanelToggleProps {
     /** The panel this toggle controls. */
     side: CollapsiblePanelSide;
@@ -27,6 +39,8 @@ interface CollapsiblePanelToggleProps {
     /** Accessible label; defaults to "Collapse"/"Expand". */
     label?: string;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the
@@ -35,7 +49,7 @@ interface CollapsiblePanelToggleProps {
  * put it in the panel's own header (to collapse) and somewhere always-visible
  * (to expand while collapsed).
  */
-declare function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className }: CollapsiblePanelToggleProps): SafeHtml;
+declare function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className, slot, }: CollapsiblePanelToggleProps): SafeHtml;
 interface CollapsiblePanelProps {
     /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */
     id: string;
@@ -47,8 +61,43 @@ interface CollapsiblePanelProps {
     size?: number;
     /** Accessible label for the panel region. */
     label?: string;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */
+    tabIndex?: 0 | -1;
+    /** Keep the standard focus outline visible while the panel is expanded. */
+    outlined?: boolean;
     /** Panel content. */
-    children?: SafeHtml | readonly SafeHtml[];
+    children?: KerfUiContent;
+    /**
+     * The panel's top toolbar, composed so its groups follow the panel's open
+     * state. With it, `children` renders in a `Pane` below the toolbar; render
+     * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the
+     * marked groups and toggle stay reachable while the panel is collapsed.
+     */
+    toolbar?: CollapsiblePanelToolbar;
+    /** Fixed content below a toolbar panel's top toolbar. */
+    header?: KerfUiContent;
+    headerList?: ListConfig;
+    headerPlacement?: CollapsiblePanelChromePlacement;
+    /** Fixed content above a toolbar panel's bottom toolbar. */
+    footer?: KerfUiContent;
+    footerList?: ListConfig;
+    bottomToolbar?: CollapsiblePanelBottomToolbar;
+    footerPlacement?: CollapsiblePanelChromePlacement;
+    /**
+     * Configuration for a `toolbar` panel's `Pane` (`contentElement`,
+     * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example
+     * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation
+     * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored
+     * without a `toolbar`, where `children` renders as given.
+     */
+    pane?: PaneConfig;
+    separator?: ResizableRegionSeparator;
+    collapseMotion?: ResizableRegionCollapseMotion;
+    contentOverflow?: ResizableRegionContentOverflow;
+    presentation?: ResizableRegionPresentation;
+    /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */
+    restoreControl?: SafeHtml;
+    restorePosition?: ResizableRegionRestorePosition;
     className?: string;
 }
 /**
@@ -56,11 +105,41 @@ interface CollapsiblePanelProps {
  * {@link Workbench} shell. It owns only the presentation: a fixed-size content
  * area that stays laid out while the panel's track snaps to zero and the content
  * slides out via `transform` (one reflow, composited — the same technique
- * `Workbench` and the catalog sidebar use). The app owns the `collapsed` signal;
+ * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored
+ * to the panel's fixed bottom edge, so the track cannot move its layout origin
+ * underneath the transform transition. A collapsed panel renders `inert` (with
+ * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches
+ * content that has slid out of view; its `restoreControl` renders outside the
+ * panel and stays reachable.
+ * The app owns the `collapsed` signal;
  * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,
  * and persistence semantics, and with `CollapsiblePanelToggle` for the standard
- * affordance. See `docs/24-collapsible-panel.md`.
+ * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
  */
-declare function CollapsiblePanel({ id, side, collapsed, size, label, children, className }: CollapsiblePanelProps): SafeHtml;
+declare function CollapsiblePanel({ id, side, collapsed, size, label, tabIndex, outlined, children, toolbar, header, headerList, headerPlacement, footer, footerList, bottomToolbar, footerPlacement, pane, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+interface CollapsiblePanelRelocatedProps {
+    /** The panel's `id`. */
+    panelId: string;
+    side: CollapsiblePanelSide;
+    /** The panel's current collapsed state. */
+    collapsed: boolean;
+    /** The same `toolbar` the panel receives. */
+    toolbar: CollapsiblePanelToolbar;
+    /**
+     * Density of the toolbar the groups are placed in, so the standard toggle
+     * fits it (`compact` in a `density="compact"` toolbar). Defaults to
+     * `default`.
+     */
+    density?: ToolbarConfig['density'];
+}
+/**
+ * A collapsed {@link CollapsiblePanel}'s marked groups and standard
+ * toggle, for the app's work-area toolbar — nothing while the panel is open.
+ * Put it first in the leading zone for a left rail, last in the trailing zone
+ * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`
+ * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when
+ * the panel closes from its own toggle.
+ */
+declare function CollapsiblePanelRelocated({ panelId, side, collapsed, toolbar, density, }: CollapsiblePanelRelocatedProps): SafeHtml;
 
-export { CollapsiblePanel, type CollapsiblePanelProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, type CollapsiblePanelBottomToolbar, type CollapsiblePanelChromePlacement, type CollapsiblePanelProps, CollapsiblePanelRelocated, type CollapsiblePanelRelocatedProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, type CollapsiblePanelToolbar, type CollapsiblePanelToolbarToggle };

package/dist/collapsible-panel.js

@@ -1,22 +1,141 @@
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
-import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
-import { jsx } from 'kerfjs/jsx-runtime';
-
-function collapsiblePanelToggleIcon(side, collapsed) {
-  if (side === "left") return collapsed ? { icon: PanelLeftOpen, name: "panel-left-open" } : { icon: PanelLeftClose, name: "panel-left-close" };
-  if (side === "right") return collapsed ? { icon: PanelRightOpen, name: "panel-right-open" } : { icon: PanelRightClose, name: "panel-right-close" };
-  return collapsed ? { icon: PanelBottomOpen, name: "panel-bottom-open" } : { icon: PanelBottomClose, name: "panel-bottom-close" };
-}
-function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className = "" }) {
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups, groupSizeFor } from './chunk-WSEJ2FDE.js';
+export { collapsiblePanelToggleIcon } from './chunk-WSEJ2FDE.js';
+
+
+
+
+
+
+
+
+
+
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+
+
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var toggleAttributes = (panelId) => ({
+  "data-collapsible-target": panelId,
+  // Keyed, so the morph never reuses a (possibly focused) toggle's button for
+  // another control as the toggle moves between toolbars.
+  "data-key": `${panelId}-toggle`
+});
+function CollapsiblePanelToggle({
+  side,
+  collapsed,
+  action,
+  panelId,
+  label,
+  className = "",
+  slot
+}) {
   const glyph = collapsiblePanelToggleIcon(side, collapsed);
   const accessible = label ?? (collapsed ? "Expand" : "Collapse");
-  return /* @__PURE__ */ jsx("button", { type: "button", class: `kui-collapsible-panel__toggle ${className}`.trim(), "data-action": action, "data-collapsible-target": panelId, "aria-expanded": String(!collapsed), "aria-label": accessible, children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name }) });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      class: `kui-collapsible-panel__toggle ${className}`.trim(),
+      "data-action": action,
+      "data-collapsible-target": panelId,
+      "aria-expanded": String(!collapsed),
+      "aria-label": accessible,
+      slot,
+      children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+    }
+  );
 }
-function CollapsiblePanel({ id, side, collapsed = false, size, label, children, className = "" }) {
+function CollapsiblePanel({
+  id,
+  side,
+  collapsed = false,
+  size,
+  label,
+  tabIndex,
+  outlined = false,
+  children,
+  toolbar,
+  header,
+  headerList,
+  headerPlacement,
+  footer,
+  footerList,
+  bottomToolbar,
+  footerPlacement,
+  pane,
+  separator = "auto",
+  collapseMotion = "slide",
+  contentOverflow = "clip",
+  presentation = "inline",
+  restoreControl,
+  restorePosition = side === "left" ? "bottom-start" : "bottom-end",
+  className = ""
+}) {
   const sizeVar = side === "bottom" ? "--kui-collapsible-panel-height" : "--kui-collapsible-panel-width";
-  return /* @__PURE__ */ jsx("aside", { class: `kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim(), "data-component": "collapsible-panel", "data-collapsible-panel": id, "data-side": side, "data-collapsed": String(collapsed), "aria-label": label || void 0, "aria-hidden": collapsed ? "true" : void 0, style: size ? `${sizeVar}: ${size}px` : void 0, children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        class: `kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim(),
+        "data-component": "collapsible-panel",
+        "data-collapsible-panel": id,
+        "data-side": side,
+        "data-collapsed": String(collapsed),
+        "data-outlined": !collapsed && presentation !== "hidden" && outlined ? "true" : void 0,
+        "data-separator": separator,
+        "data-collapse-motion": collapseMotion,
+        "data-content-overflow": contentOverflow,
+        "data-presentation": presentation,
+        "aria-label": label || void 0,
+        "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
+        tabindex: collapsed || presentation === "hidden" ? tabIndex === void 0 ? void 0 : -1 : tabIndex,
+        inert: collapsed,
+        style: size ? `${sizeVar}: ${size}px` : void 0,
+        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children: toolbar ? composedPanelBody({
+          toolbar,
+          side,
+          collapsed,
+          attributes: toggleAttributes(id),
+          pane,
+          header,
+          headerList,
+          headerPlacement,
+          footer,
+          footerList,
+          bottomToolbar,
+          footerPlacement,
+          content: children
+        }) : children })
+      }
+    ),
+    collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-collapsible-panel__restore",
+        "data-panel-restore": id,
+        "data-position": restorePosition,
+        children: restoreControl
+      }
+    )
+  ] });
+}
+function CollapsiblePanelRelocated({
+  panelId,
+  side,
+  collapsed,
+  toolbar,
+  density
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: relocatedPanelGroups(
+    toolbar,
+    side,
+    collapsed,
+    toggleAttributes(panelId),
+    groupSizeFor(density)
+  ) });
 }
 
-export { CollapsiblePanel, CollapsiblePanelToggle, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, CollapsiblePanelRelocated, CollapsiblePanelToggle };
 
 //# sourceMappingURL=collapsible-panel.js.map