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

package/dist/chunk-VIGVNDXZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-header/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-VIGVNDXZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { HeadingLevel } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\nimport { Text } from '../../typography/text/text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-size',\n  'data-divider',\n  'data-inline',\n  'data-width',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n  'data-action',\n  'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-size'?: never;\n    'data-divider'?: never;\n    'data-inline'?: never;\n    'data-width'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\ninterface ListHeaderBaseProps {\n  label: string;\n  /** Visual label size, independent of the native heading level. Default `sm`. */\n  size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Shrink-wrap the header without its default outer margin, border, or padding. */\n  inline?: boolean;\n  /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n  width?: 'fill' | 'content';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      /** A toggle's label is its button text, not a heading. */\n      headingLevel?: never;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      /**\n       * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n       * document outline; the visual treatment does not change.\n       */\n      headingLevel?: HeadingLevel;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      /**\n       * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n       * document outline; the visual treatment does not change.\n       */\n      headingLevel?: HeadingLevel;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | {\n      count?: never;\n      countLabel?: never;\n      badge?: SafeHtml | undefined;\n      status?: SafeHtml | undefined;\n    };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  size = 'sm',\n  headingLevel = 2,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  inline = false,\n  width = 'fill',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n  slot,\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge = normalizedCount === undefined ? badge : undefined;\n  const renderedStatus = normalizedCount === undefined ? status : undefined;\n  const hasBadge = Boolean(renderedBadge || renderedStatus);\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const badgeTone: SemanticTone =\n    indicatorTone === 'accent' ? 'info' : indicatorTone;\n  const indicator =\n    normalizedCount !== undefined ? (\n      <Badge size=\"compact\" tone={badgeTone} ariaHidden={!placeholder}>\n        {placeholder ? <Skeleton width={em(1.75)} /> : normalizedCount}\n      </Badge>\n    ) : (\n      <>\n        {renderedBadge && (\n          <Badge size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : renderedBadge}\n          </Badge>\n        )}\n        {renderedStatus && (\n          <Badge size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : renderedStatus}\n          </Badge>\n        )}\n      </>\n    );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(hasBadge)}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-size={size}\n        data-divider={divider}\n        data-inline={String(inline)}\n        data-width={width}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n        slot={slot}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <Text variant=\"span\">{label}</Text>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(hasBadge)}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-size={size}\n      data-divider={divider}\n      data-inline={String(inline)}\n      data-width={width}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n      slot={slot}\n    >\n      <div class=\"kui-list-header__title\">\n        <Text\n          variant={`h${headingLevel}`}\n          border=\"none\"\n          aria-label={accessibleLabel}\n        >\n          {label}\n        </Text>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}

package/dist/chunk-VR7MWD2X.js

@@ -0,0 +1,91 @@
+import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { space } from './chunk-LRAIS3YB.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var gridProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-columns",
+  "data-min-column-width",
+  "data-auto-fill",
+  "data-flex",
+  "data-fill",
+  "data-text-insets",
+  "data-control-insets"
+]);
+var spaceNames = [
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl"
+];
+function Grid({
+  children,
+  selectionMode,
+  ariaLabel,
+  columns,
+  minColumnWidth,
+  autoFill = false,
+  gap = "xs",
+  flex = false,
+  fill = false,
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  if (selectionMode === "multiple" && !ariaLabel) {
+    throw new Error("Multi-select Grid requires an ariaLabel");
+  }
+  if (minColumnWidth !== void 0 && columns !== void 0) {
+    throw new RangeError(
+      "Grid columns and minColumnWidth are mutually exclusive"
+    );
+  }
+  if (autoFill && minColumnWidth === void 0) {
+    throw new RangeError("Grid autoFill requires minColumnWidth");
+  }
+  if (minColumnWidth === void 0 && (columns === void 0 || !Number.isSafeInteger(columns) || columns < 1)) {
+    throw new RangeError("Grid columns must be a positive safe integer");
+  }
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    gridProtectedAttributes
+  );
+  const gapValue = spaceNames.includes(gap) ? space(gap) : gap;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    columns === void 0 ? "" : `--_kui-grid-columns:${columns}`,
+    minColumnWidth === void 0 ? "" : `--_kui-grid-min-column-width:${minColumnWidth}`,
+    `--_kui-grid-gap:${gapValue}`,
+    flexValue ? `--_kui-grid-flex:${flexValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: `kui-grid ${className}`.trim(),
+      "data-component": "grid",
+      role: selectionMode === "multiple" ? "grid" : void 0,
+      "aria-label": selectionMode === "multiple" ? ariaLabel : void 0,
+      "aria-multiselectable": selectionMode === "multiple" ? "true" : void 0,
+      "data-columns": columns === void 0 ? void 0 : String(columns),
+      "data-min-column-width": minColumnWidth === void 0 ? void 0 : "true",
+      "data-auto-fill": autoFill ? "true" : void 0,
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style,
+      slot,
+      children
+    }
+  );
+}
+
+export { Grid };
+
+//# sourceMappingURL=chunk-VR7MWD2X.js.map

package/dist/chunk-VR7MWD2X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"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","file":"chunk-VR7MWD2X.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n\nconst gridProtectedAttributes = new Set([\n  'data-component',\n  'data-columns',\n  'data-min-column-width',\n  'data-auto-fill',\n  'data-flex',\n  'data-fill',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype GridRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-columns'?: never;\n    'data-min-column-width'?: never;\n    'data-auto-fill'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\ninterface GridCommonProps {\n  children?: KerfUiContent;\n  /** Make this a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` tiles. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this grid is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */\n  rootAttributes?: GridRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type GridProps = GridCommonProps &\n  (\n    | {\n        /** Number of equal-width columns. Must be a positive safe integer. */\n        columns: number;\n        minColumnWidth?: never;\n        autoFill?: never;\n      }\n    | {\n        columns?: never;\n        /** Fit equal columns of at least this width; collapse as the container narrows. */\n        minColumnWidth: CssLength;\n        /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */\n        autoFill?: boolean;\n      }\n  );\n\n/** Render equal tracks with a fixed count or a responsive minimum width. */\nexport function Grid({\n  children,\n  selectionMode,\n  ariaLabel,\n  columns,\n  minColumnWidth,\n  autoFill = false,\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: GridProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select Grid requires an ariaLabel');\n  }\n  if (minColumnWidth !== undefined && columns !== undefined) {\n    throw new RangeError(\n      'Grid columns and minColumnWidth are mutually exclusive',\n    );\n  }\n  if (autoFill && minColumnWidth === undefined) {\n    throw new RangeError('Grid autoFill requires minColumnWidth');\n  }\n  if (\n    minColumnWidth === undefined &&\n    (columns === undefined || !Number.isSafeInteger(columns) || columns < 1)\n  ) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    gridProtectedAttributes,\n  );\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    columns === undefined ? '' : `--_kui-grid-columns:${columns}`,\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-grid-min-column-width:${minColumnWidth}`,\n    `--_kui-grid-gap:${gapValue}`,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-columns={columns === undefined ? undefined : String(columns)}\n      data-min-column-width={minColumnWidth === undefined ? undefined : 'true'}\n      data-auto-fill={autoFill ? 'true' : undefined}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}

package/dist/chunk-Y6KT7ZTR.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/components/layout/resizable-region/internal/resize-grip.tsx
+function ResizeGrip({ axis }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      children: axis === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M9 6v12" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 6v12" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 9h12" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 15h12" })
+      ] })
+    }
+  );
+}
+var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
+var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
+function ResizableRegion({
+  id,
+  label,
+  size,
+  min,
+  max,
+  axis = "horizontal",
+  edge = "end",
+  collapsed = false,
+  transitioning = false,
+  separator = "auto",
+  collapseMotion = "slide",
+  contentOverflow = "clip",
+  presentation = "inline",
+  restoreControl,
+  restorePosition = axis === "horizontal" && edge === "end" ? "bottom-start" : "bottom-end",
+  restorePlacement = "corner",
+  restoreInset,
+  responsiveFillAt,
+  handleIcon,
+  children
+}) {
+  const expandedSize = clampRegionSize(size, min, max);
+  const resolved = collapsed ? 0 : expandedSize;
+  const orientation = axis === "horizontal" ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        class: "kui-resizable-region",
+        "data-component": "resizable-region",
+        "data-region-id": id,
+        "data-axis": axis,
+        "data-edge": edge,
+        "data-collapsed": String(collapsed),
+        "data-transitioning": String(transitioning),
+        "data-separator": separator,
+        "data-collapse-motion": collapseMotion,
+        "data-content-overflow": contentOverflow,
+        "data-presentation": presentation,
+        "data-responsive-fill-at": responsiveFillAt,
+        style: `--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`,
+        "aria-label": label,
+        "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
+        inert: collapsed,
+        children: [
+          /* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", inert: collapsed, children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "kui-resizable-region__handle",
+              role: "separator",
+              tabindex: collapsed || presentation !== "inline" ? "-1" : "0",
+              "aria-label": `Resize ${label}`,
+              "aria-orientation": orientation,
+              "aria-valuemin": collapsed ? 0 : min,
+              "aria-valuemax": max,
+              "aria-valuenow": resolved,
+              "aria-hidden": collapsed || presentation !== "inline" ? "true" : void 0,
+              "data-kui-resize-handle": true,
+              "data-region-id": id,
+              children: /* @__PURE__ */ jsx("span", { class: "kui-resizable-region__handle-icon", "aria-hidden": "true", children: handleIcon ?? /* @__PURE__ */ jsx(ResizeGrip, { axis }) })
+            }
+          )
+        ]
+      }
+    ),
+    collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-resizable-region__restore",
+        "data-region-restore": id,
+        "data-position": restorePosition,
+        "data-placement": restorePlacement,
+        style: restoreInset ? `--kui-resizable-region-restore-inset:${restoreInset}` : void 0,
+        children: restoreControl
+      }
+    )
+  ] });
+}
+
+export { ResizableRegion, ResizeGrip, clampRegionSize, resizeRegionFromPointer };
+
+//# sourceMappingURL=chunk-Y6KT7ZTR.js.map

package/dist/chunk-Y6KT7ZTR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/resizable-region/internal/resize-grip.tsx","../src/components/layout/resizable-region/resizable-region.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-Y6KT7ZTR.js","sourcesContent":["import type { ResizableRegionAxis } from '../resizable-region.js';\n\n/**\n * The dormant two-line grip a resize separator shows on hover and focus. Shared\n * by `ResizableRegion` and resizable `Workbench` panels so both separators read\n * the same. Internal.\n */\nexport function ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    >\n      {axis === 'horizontal' ? (\n        <>\n          <path d=\"M9 6v12\" />\n          <path d=\"M15 6v12\" />\n        </>\n      ) : (\n        <>\n          <path d=\"M6 9h12\" />\n          <path d=\"M6 15h12\" />\n        </>\n      )}\n    </svg>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { ResizeGrip } from './internal/resize-grip.js';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\nexport type ResizableRegionSeparator = 'auto' | 'hidden';\nexport type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';\nexport type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';\nexport type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';\nexport type ResizableRegionRestorePosition =\n  'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\nexport type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';\n\nexport interface ResizableRegionProps {\n  id: string;\n  label: string;\n  size: number;\n  min: number;\n  max: number;\n  axis?: ResizableRegionAxis;\n  edge?: ResizableRegionEdge;\n  /** Snap the track to zero. The region renders `inert` and `aria-hidden`\n   * while collapsed, so neither Tab nor assistive technology reaches it or\n   * lands on an empty landmark; `restoreControl` renders outside the region. */\n  collapsed?: boolean;\n  transitioning?: boolean;\n  /** Whether the separator line is painted. The resize hit target remains available. */\n  separator?: ResizableRegionSeparator;\n  /** Keep the track change instant while optionally sliding the fixed-size content. */\n  collapseMotion?: ResizableRegionCollapseMotion;\n  /** Use `visible` while an anchored popup must escape the content box; it raises the region to the popup layer. */\n  contentOverflow?: ResizableRegionContentOverflow;\n  /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */\n  presentation?: ResizableRegionPresentation;\n  /** Always-available control rendered while collapsed, outside the clipped region. */\n  restoreControl?: SafeHtml;\n  /** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */\n  restorePosition?: ResizableRegionRestorePosition;\n  /** Position a restore control in its container corner or leave it in normal flow. */\n  restorePlacement?: 'corner' | 'inline';\n  /** Corner distance before the container's safe-area inset. */\n  restoreInset?: CssLength;\n  /** Fill the available inline track and hide the separator below a container breakpoint. */\n  responsiveFillAt?: ResizableRegionResponsiveFillAt;\n  /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */\n  handleIcon?: SafeHtml;\n  children: KerfUiContent;\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) =>\n  Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (\n  startSize: number,\n  delta: number,\n  edge: ResizableRegionEdge,\n) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nexport function ResizableRegion({\n  id,\n  label,\n  size,\n  min,\n  max,\n  axis = 'horizontal',\n  edge = 'end',\n  collapsed = false,\n  transitioning = false,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = axis === 'horizontal' && edge === 'end'\n    ? 'bottom-start'\n    : 'bottom-end',\n  restorePlacement = 'corner',\n  restoreInset,\n  responsiveFillAt,\n  handleIcon,\n  children,\n}: ResizableRegionProps) {\n  const expandedSize = clampRegionSize(size, min, max);\n  const resolved = collapsed ? 0 : expandedSize;\n  const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n  return (\n    <>\n      <section\n        class=\"kui-resizable-region\"\n        data-component=\"resizable-region\"\n        data-region-id={id}\n        data-axis={axis}\n        data-edge={edge}\n        data-collapsed={String(collapsed)}\n        data-transitioning={String(transitioning)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        data-responsive-fill-at={responsiveFillAt}\n        style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`}\n        aria-label={label}\n        // Collapsed, the labeled region leaves the accessibility tree whole\n        // (its content is inert and its separator already hidden), so no\n        // empty landmark stays behind; the restore control is a sibling.\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n      >\n        <div class=\"kui-resizable-region__content\" inert={collapsed}>\n          {children}\n        </div>\n        <div\n          class=\"kui-resizable-region__handle\"\n          role=\"separator\"\n          tabindex={collapsed || presentation !== 'inline' ? '-1' : '0'}\n          aria-label={`Resize ${label}`}\n          aria-orientation={orientation}\n          aria-valuemin={collapsed ? 0 : min}\n          aria-valuemax={max}\n          aria-valuenow={resolved}\n          aria-hidden={\n            collapsed || presentation !== 'inline' ? 'true' : undefined\n          }\n          data-kui-resize-handle\n          data-region-id={id}\n        >\n          <span class=\"kui-resizable-region__handle-icon\" aria-hidden=\"true\">\n            {handleIcon ?? <ResizeGrip axis={axis} />}\n          </span>\n        </div>\n      </section>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-resizable-region__restore\"\n          data-region-restore={id}\n          data-position={restorePosition}\n          data-placement={restorePlacement}\n          style={\n            restoreInset\n              ? `--kui-resizable-region-restore-inset:${restoreInset}`\n              : undefined\n          }\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/dist/chunk-YLJ6X3AC.js

@@ -0,0 +1,34 @@
+import { LoadingSpinner } from './chunk-3RE2JMZU.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function EmptyState({
+  title,
+  detail,
+  icon,
+  action,
+  busy = false,
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-empty-state ${className}`.trim(),
+      "data-component": "empty-state",
+      "data-busy": String(busy),
+      role: "status",
+      "aria-busy": String(busy),
+      slot,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-empty-state__icon", children: busy ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : icon }),
+        /* @__PURE__ */ jsx("strong", { children: title }),
+        detail && /* @__PURE__ */ jsx("span", { children: detail }),
+        action && /* @__PURE__ */ jsx("div", { class: "kui-empty-state__action", children: action })
+      ]
+    }
+  );
+}
+
+export { EmptyState };
+
+//# sourceMappingURL=chunk-YLJ6X3AC.js.map

package/dist/chunk-YLJ6X3AC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/empty-state/empty-state.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,uBAAA,EACR,iCAAO,GAAA,CAAC,cAAA,EAAA,EAAe,IAAK,IAAA,EAC/B,CAAA;AAAA,wBACA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACd,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACxB,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D;AAEJ","file":"chunk-YLJ6X3AC.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LoadingSpinner } from '../loading-spinner/loading-spinner.js';\n\nexport interface EmptyStateProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  busy?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function EmptyState({\n  title,\n  detail,\n  icon,\n  action,\n  busy = false,\n  className = '',\n  slot,\n}: EmptyStateProps) {\n  return (\n    <section\n      class={`kui-empty-state ${className}`.trim()}\n      data-component=\"empty-state\"\n      data-busy={String(busy)}\n      role=\"status\"\n      aria-busy={String(busy)}\n      slot={slot}\n    >\n      <div class=\"kui-empty-state__icon\">\n        {busy ? <LoadingSpinner /> : icon}\n      </div>\n      <strong>{title}</strong>\n      {detail && <span>{detail}</span>}\n      {action && <div class=\"kui-empty-state__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/collapsible-panel.d.ts

@@ -0,0 +1,137 @@
+import { SafeHtml } from 'kerfjs';
+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-CL9tYOkh.js';
+export { e as collapsiblePanelToggleIcon } from './panel-toolbar-CL9tYOkh.js';
+import { ListConfig } from './list.js';
+import { PaneConfig } from './pane.js';
+import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
+import './toolbar.js';
+import './sides-BPSWde0A.js';
+import './lucide-icon.js';
+import 'lucide';
+import './css-values.js';
+import './flex-alignment-4ms8ZbV8.js';
+
+/** Which edge a {@link CollapsiblePanel} docks to. */
+type CollapsiblePanelSide = PanelSide;
+/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */
+type CollapsiblePanelToolbarToggle = PanelToggle;
+/**
+ * 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.
+ */
+type CollapsiblePanelToolbar = PanelToolbar;
+type CollapsiblePanelBottomToolbar = PanelBottomToolbar;
+type CollapsiblePanelChromePlacement = PanelChromePlacement;
+interface CollapsiblePanelToggleProps {
+    /** The panel this toggle controls. */
+    side: CollapsiblePanelSide;
+    /** The panel's current collapsed state (drives the icon direction). */
+    collapsed: boolean;
+    /** `data-action` the button carries so `wireSidebar` can delegate its click. */
+    action: string;
+    /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */
+    panelId?: string;
+    /** 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
+ * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the
+ * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —
+ * 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, slot, }: CollapsiblePanelToggleProps): SafeHtml;
+interface CollapsiblePanelProps {
+    /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */
+    id: string;
+    /** Which edge the panel docks to: a left/right rail or a bottom drawer. */
+    side: CollapsiblePanelSide;
+    /** Whether the panel is currently collapsed (the app owns this signal). */
+    collapsed?: boolean;
+    /** Rail width or drawer height in px. Overrides the CSS default. */
+    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?: 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;
+}
+/**
+ * A standalone collapsible side rail or bottom drawer, outside the full
+ * {@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). 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 `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
+ */
+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;
+}
+/**
+ * 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, }: CollapsiblePanelRelocatedProps): SafeHtml;
+
+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

@@ -0,0 +1,135 @@
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-JZM3G6RT.js';
+export { collapsiblePanelToggleIcon } from './chunk-JZM3G6RT.js';
+
+
+
+
+
+import { LucideIcon } from './chunk-PQQQXJGV.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,
+      slot,
+      children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+    }
+  );
+}
+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__ */ 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
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: relocatedPanelGroups(
+    toolbar,
+    side,
+    collapsed,
+    toggleAttributes(panelId)
+  ) });
+}
+
+export { CollapsiblePanel, CollapsiblePanelRelocated, CollapsiblePanelToggle };
+
+//# sourceMappingURL=collapsible-panel.js.map

package/dist/collapsible-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  collapsiblePanelToggleIcon,\n  composedPanelBody,\n  type PanelBottomToolbar,\n  type PanelChromePlacement,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n  'data-collapsible-target': panelId,\n  // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n  // another control as the toggle moves between toolbars.\n  'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while the panel is expanded. */\n  outlined?: boolean;\n  /** Panel content. */\n  children?: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed so its groups follow the panel's open\n   * state. With it, `children` renders in a `Pane` below the toolbar; render\n   * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n   * marked groups and toggle stay reachable while the panel is collapsed.\n   */\n  toolbar?: CollapsiblePanelToolbar;\n  /** Fixed content below a toolbar panel's top toolbar. */\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: CollapsiblePanelChromePlacement;\n  /** Fixed content above a toolbar panel's bottom toolbar. */\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: CollapsiblePanelBottomToolbar;\n  footerPlacement?: CollapsiblePanelChromePlacement;\n  /**\n   * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n   * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n   * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n   * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n   * without a `toolbar`, where `children` renders as given.\n   */\n  pane?: PaneConfig;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  tabIndex,\n  outlined = false,\n  children,\n  toolbar,\n  header,\n  headerList,\n  headerPlacement,\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement,\n  pane,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-outlined={\n          !collapsed && presentation !== 'hidden' && outlined\n            ? 'true'\n            : undefined\n        }\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        tabindex={\n          collapsed || presentation === 'hidden'\n            ? tabIndex === undefined\n              ? undefined\n              : -1\n            : tabIndex\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">\n          {toolbar\n            ? composedPanelBody({\n                toolbar,\n                side,\n                collapsed,\n                attributes: toggleAttributes(id),\n                pane,\n                header,\n                headerList,\n                headerPlacement,\n                footer,\n                footerList,\n                bottomToolbar,\n                footerPlacement,\n                content: children,\n              })\n            : children}\n        </div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n  /** The panel's `id`. */\n  panelId: string;\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state. */\n  collapsed: boolean;\n  /** The same `toolbar` the panel receives. */\n  toolbar: CollapsiblePanelToolbar;\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n  panelId,\n  side,\n  collapsed,\n  toolbar,\n}: CollapsiblePanelRelocatedProps) {\n  return (\n    <>\n      {relocatedPanelGroups(\n        toolbar,\n        side,\n        collapsed,\n        toggleAttributes(panelId),\n      )}\n    </>\n  );\n}\n"]}