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

package/dist/chunk-CNM6ZWP2.js

@@ -0,0 +1,38 @@
+// src/components/forms/checkbox/wiring/wire-checkboxes.ts
+var MIXED = 'input[type="checkbox"][data-indeterminate]';
+function sync(input) {
+  input.indeterminate = input.hasAttribute("data-indeterminate");
+}
+function wireCheckboxes(root) {
+  for (const input of root.querySelectorAll(MIXED))
+    sync(input);
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") {
+        const target = record.target;
+        if (target.matches('input[type="checkbox"]'))
+          sync(target);
+        continue;
+      }
+      for (const node of record.addedNodes) {
+        if (!(node instanceof Element)) continue;
+        if (node.matches(MIXED)) sync(node);
+        for (const input of node.querySelectorAll(MIXED))
+          sync(input);
+      }
+    }
+  });
+  observer.observe(root, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-indeterminate"]
+  });
+  return () => {
+    observer.disconnect();
+  };
+}
+
+export { wireCheckboxes };
+
+//# sourceMappingURL=chunk-CNM6ZWP2.js.map

package/dist/chunk-CNM6ZWP2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/checkbox/wiring/wire-checkboxes.ts"],"names":[],"mappings":";AAEA,IAAM,KAAA,GAAQ,4CAAA;AAEd,SAAS,KAAK,KAAA,EAAyB;AACrC,EAAA,KAAA,CAAM,aAAA,GAAgB,KAAA,CAAM,YAAA,CAAa,oBAAoB,CAAA;AAC/D;AAQO,SAAS,eAAe,IAAA,EAAwB;AACrD,EAAA,KAAA,MAAW,KAAA,IAAS,IAAA,CAAK,gBAAA,CAAmC,KAAK,CAAA;AAC/D,IAAA,IAAA,CAAK,KAAK,CAAA;AACZ,EAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,CAAC,OAAA,KAAY;AACjD,IAAA,KAAA,MAAW,UAAU,OAAA,EAAS;AAC5B,MAAA,IAAI,MAAA,CAAO,SAAS,YAAA,EAAc;AAChC,QAAA,MAAM,SAAS,MAAA,CAAO,MAAA;AACtB,QAAA,IAAI,MAAA,CAAO,QAAQ,wBAAwB,CAAA;AACzC,UAAA,IAAA,CAAK,MAA0B,CAAA;AACjC,QAAA;AAAA,MACF;AACA,MAAA,KAAA,MAAW,IAAA,IAAQ,OAAO,UAAA,EAAY;AACpC,QAAA,IAAI,EAAE,gBAAgB,OAAA,CAAA,EAAU;AAChC,QAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,KAAK,CAAA,OAAQ,IAAwB,CAAA;AACtD,QAAA,KAAA,MAAW,KAAA,IAAS,IAAA,CAAK,gBAAA,CAAmC,KAAK,CAAA;AAC/D,UAAA,IAAA,CAAK,KAAK,CAAA;AAAA,MACd;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AACD,EAAA,QAAA,CAAS,QAAQ,IAAA,EAAM;AAAA,IACrB,OAAA,EAAS,IAAA;AAAA,IACT,SAAA,EAAW,IAAA;AAAA,IACX,UAAA,EAAY,IAAA;AAAA,IACZ,eAAA,EAAiB,CAAC,oBAAoB;AAAA,GACvC,CAAA;AACD,EAAA,OAAO,MAAM;AACX,IAAA,QAAA,CAAS,UAAA,EAAW;AAAA,EACtB,CAAA;AACF","file":"chunk-CNM6ZWP2.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst MIXED = 'input[type=\"checkbox\"][data-indeterminate]';\n\nfunction sync(input: HTMLInputElement) {\n  input.indeterminate = input.hasAttribute('data-indeterminate');\n}\n\n/**\n * Give every `Checkbox` below root rendered with `indeterminate` its native\n * mixed state, which only script can set, and keep it in step as renders add\n * or remove the marker. A click clears the mixed state natively; the app's\n * next render decides it again. Dispose with the owning application.\n */\nexport function wireCheckboxes(root: Root): () => void {\n  for (const input of root.querySelectorAll<HTMLInputElement>(MIXED))\n    sync(input);\n  const observer = new MutationObserver((records) => {\n    for (const record of records) {\n      if (record.type === 'attributes') {\n        const target = record.target as Element;\n        if (target.matches('input[type=\"checkbox\"]'))\n          sync(target as HTMLInputElement);\n        continue;\n      }\n      for (const node of record.addedNodes) {\n        if (!(node instanceof Element)) continue;\n        if (node.matches(MIXED)) sync(node as HTMLInputElement);\n        for (const input of node.querySelectorAll<HTMLInputElement>(MIXED))\n          sync(input);\n      }\n    }\n  });\n  observer.observe(root, {\n    subtree: true,\n    childList: true,\n    attributes: true,\n    attributeFilter: ['data-indeterminate'],\n  });\n  return () => {\n    observer.disconnect();\n  };\n}\n"]}

package/dist/chunk-CPSGUGAY.js

@@ -0,0 +1,527 @@
+import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId, WORKBENCH_RESIZE_DEFAULTS } from './chunk-S4ZGTDSG.js';
+import { NavStack } from './chunk-SOFPUW3O.js';
+import { clampRegionSize, ResizeGrip } from './chunk-Y6KT7ZTR.js';
+import { FloatingToolbar } from './chunk-S3ECMF23.js';
+import { panelToggleGroup, groupSizeFor, composedPanelBody, relocatedPanelGroups } from './chunk-WSEJ2FDE.js';
+import { paneConfigProps } from './chunk-CTQUDCY5.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
+import { Pane } from './chunk-HQZG3OFL.js';
+import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+import { List } from './chunk-NB6POCFH.js';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+var SIDES = {
+  leftRail: "left",
+  rightRail: "right",
+  bottomDrawer: "bottom"
+};
+var toggleAttributes = (workbenchId, key) => ({
+  "data-workbench-toggle": SIDES[key],
+  // Keyed, so the morph removes a toggle that leaves a toolbar instead of
+  // reusing its (possibly focused) button for a different control.
+  "data-key": `${workbenchRegionId(workbenchId, key)}-toggle`,
+  "aria-controls": workbenchRegionId(workbenchId, key)
+});
+function relocatedGroups(workbenchId, key, panel, density) {
+  const active = panel?.navStack?.views.at(-1);
+  const toolbar = active && panel?.toolbar ? {
+    ...panel.toolbar,
+    leading: active.toolbar?.leading,
+    center: active.toolbar?.center,
+    trailing: active.toolbar?.trailing
+  } : panel?.toolbar;
+  return relocatedPanelGroups(
+    toolbar,
+    SIDES[key],
+    Boolean(panel?.collapsed),
+    toggleAttributes(workbenchId, key),
+    groupSizeFor(density)
+  );
+}
+function panelBody(workbenchId, key, panel) {
+  const toolbar = panel.toolbar;
+  if (panel.navStack) {
+    const stack = panel.navStack;
+    return NavStack({
+      ...stack,
+      toolbarConfig: {
+        label: stack.toolbarConfig?.label ?? toolbar?.label,
+        density: stack.toolbarConfig?.density ?? toolbar?.density,
+        dividerSides: stack.toolbarConfig?.dividerSides ?? toolbar?.dividerSides,
+        centerAlign: stack.toolbarConfig?.centerAlign ?? toolbar?.centerAlign,
+        responsive: stack.toolbarConfig?.responsive ?? toolbar?.responsive,
+        responsiveAt: stack.toolbarConfig?.responsiveAt ?? toolbar?.responsiveAt,
+        safeAreaEdges: stack.toolbarConfig?.safeAreaEdges ?? toolbar?.safeAreaEdges,
+        // A rail or drawer is peripheral to the work area's xlarge title, so
+        // its stack keeps the large title at every depth.
+        titleSize: stack.toolbarConfig?.titleSize ?? "large",
+        headingLevel: stack.toolbarConfig?.headingLevel
+      },
+      panelToggle: toolbar?.toggle ? panelToggleGroup(
+        SIDES[key],
+        toolbar.toggle,
+        Boolean(panel.collapsed),
+        toggleAttributes(workbenchId, key),
+        groupSizeFor(stack.toolbarConfig?.density ?? toolbar.density)
+      ) : void 0
+    });
+  }
+  if (!toolbar) return panel.content;
+  return composedPanelBody({
+    toolbar,
+    side: SIDES[key],
+    collapsed: Boolean(panel.collapsed),
+    attributes: toggleAttributes(workbenchId, key),
+    pane: panel.pane,
+    header: panel.header,
+    headerList: panel.headerList,
+    headerPlacement: panel.headerPlacement,
+    footer: panel.footer,
+    footerList: panel.footerList,
+    bottomToolbar: panel.bottomToolbar,
+    footerPlacement: panel.footerPlacement,
+    content: panel.content ?? null
+  });
+}
+function chromeList(content, config) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dividerSides: config?.dividerSides,
+      gap: config?.gap,
+      hAlign: config?.hAlign,
+      vAlign: config?.vAlign,
+      textInsets: config?.textInsets,
+      controlInsets: config?.controlInsets,
+      children: content
+    }
+  );
+}
+function mainBody({
+  workbenchId,
+  main,
+  mainToolbar,
+  mainHeader,
+  mainFooter,
+  mainBottomToolbar,
+  mainHeaderPlacement = "fixed",
+  mainFooterPlacement = "fixed",
+  mainPane,
+  mainHeaderList,
+  mainFooterList,
+  leftRail,
+  rightRail,
+  bottomDrawer
+}) {
+  if (!mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter)
+    return main;
+  const left = relocatedGroups(
+    workbenchId,
+    "leftRail",
+    leftRail,
+    mainToolbar?.density
+  );
+  const right = relocatedGroups(
+    workbenchId,
+    "rightRail",
+    rightRail,
+    mainToolbar?.density
+  );
+  const drawer = mainBottomToolbar ? relocatedGroups(
+    workbenchId,
+    "bottomDrawer",
+    bottomDrawer,
+    mainBottomToolbar.density
+  ) : [];
+  const header = !mainToolbar && !mainHeader ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+    mainToolbar ? /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        label: mainToolbar.label,
+        density: mainToolbar.density,
+        dividerSides: mainToolbar.dividerSides,
+        centerAlign: mainToolbar.centerAlign,
+        responsive: mainToolbar.responsive,
+        responsiveAt: mainToolbar.responsiveAt,
+        safeAreaEdges: mainToolbar.safeAreaEdges,
+        leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+          left,
+          mainToolbar.title,
+          mainToolbar.leading
+        ] }),
+        center: mainToolbar.center,
+        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+          mainToolbar.trailing,
+          right,
+          mainToolbar.end
+        ] })
+      }
+    ) : null,
+    mainHeader ? chromeList(mainHeader, mainHeaderList) : null
+  ] });
+  const footer = !mainFooter && !mainBottomToolbar ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+    mainFooter ? chromeList(mainFooter, mainFooterList) : null,
+    mainBottomToolbar ? /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        position: "footer",
+        label: mainBottomToolbar.label,
+        density: mainBottomToolbar.density,
+        dividerSides: mainBottomToolbar.dividerSides,
+        centerAlign: mainBottomToolbar.centerAlign,
+        responsive: mainBottomToolbar.responsive,
+        responsiveAt: mainBottomToolbar.responsiveAt,
+        safeAreaEdges: mainBottomToolbar.safeAreaEdges,
+        leading: mainBottomToolbar.leading,
+        center: mainBottomToolbar.center,
+        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+          mainBottomToolbar.trailing,
+          drawer
+        ] })
+      }
+    ) : null
+  ] });
+  const scrollHeader = mainHeaderPlacement === "scroll";
+  const scrollFooter = mainFooterPlacement === "scroll";
+  return /* @__PURE__ */ jsx(
+    Pane,
+    {
+      header: scrollHeader ? void 0 : header,
+      footer: scrollFooter ? void 0 : footer,
+      chromePlacement: mainHeaderPlacement === "auto" || mainFooterPlacement === "auto" ? "auto" : "fixed",
+      ...paneConfigProps(mainPane),
+      children: scrollHeader || scrollFooter ? (
+        // Chrome that scrolls joins the content in one gapless column that
+        // fills the scroller, so it scrolls away with the content.
+        /* @__PURE__ */ jsxs(List, { flex: true, children: [
+          scrollHeader ? header : null,
+          main,
+          scrollFooter ? footer : null
+        ] })
+      ) : main
+    }
+  );
+}
+function floatingRestore(workbenchId, key, panel, hasTargetToolbar) {
+  if (hasTargetToolbar) return void 0;
+  const groups = relocatedGroups(workbenchId, key, panel);
+  if (groups.length === 0) return void 0;
+  return /* @__PURE__ */ jsx(
+    FloatingToolbar,
+    {
+      label: panel.toolbar.label,
+      position: panel.restorePosition ?? (key === "leftRail" ? "bottom-start" : "bottom-end"),
+      children: groups
+    }
+  );
+}
+var EDGES = {
+  leftRail: "end",
+  rightRail: "start",
+  bottomDrawer: "start"
+};
+var DEFAULT_LABELS = {
+  leftRail: "Left Rail",
+  rightRail: "Right Rail",
+  bottomDrawer: "Bottom Drawer"
+};
+function resolveResize(id, key, panel) {
+  if (!panel.resizable) return void 0;
+  const defaults = WORKBENCH_RESIZE_DEFAULTS[key];
+  const limits = panel.resizable === true ? {} : panel.resizable;
+  const min = limits.min ?? defaults.min;
+  const max = Math.max(min, limits.max ?? defaults.max);
+  return {
+    regionId: workbenchRegionId(id, key),
+    axis: key === "bottomDrawer" ? "vertical" : "horizontal",
+    edge: EDGES[key],
+    size: clampRegionSize(panel.size ?? defaults.size, min, max),
+    min,
+    max
+  };
+}
+var resizeAttributes = (resize) => resize ? {
+  "data-resizable": "true",
+  "data-region-id": resize.regionId,
+  "data-axis": resize.axis,
+  "data-edge": resize.edge
+} : {};
+function panelStyle(panel, resize, sizeProperty) {
+  if (resize) return `--kui-resizable-region-size:${resize.size}px`;
+  return panel.size ? `${sizeProperty}: ${panel.size}px` : void 0;
+}
+function PanelHandle({
+  panel,
+  resize,
+  label
+}) {
+  const inert = Boolean(panel.collapsed) || (panel.presentation ?? "inline") !== "inline";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-workbench__handle",
+      role: "separator",
+      tabindex: inert ? "-1" : "0",
+      "aria-label": `Resize ${label}`,
+      "aria-orientation": resize.axis === "horizontal" ? "vertical" : "horizontal",
+      "aria-valuemin": resize.min,
+      "aria-valuemax": resize.max,
+      "aria-valuenow": resize.size,
+      "aria-hidden": inert ? "true" : void 0,
+      "data-kui-resize-handle": true,
+      "data-region-id": resize.regionId,
+      children: /* @__PURE__ */ jsx("span", { class: "kui-workbench__handle-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ResizeGrip, { axis: resize.axis }) })
+    }
+  );
+}
+function hiddenFromAccessibility(panel) {
+  return panel.collapsed || panel.presentation === "hidden" ? "true" : void 0;
+}
+var responsiveAt = (at) => at === "never" ? void 0 : at;
+var inline = (panel) => Boolean(panel && (panel.presentation ?? "inline") === "inline");
+var expanded = (panel) => Boolean(panel && !panel.collapsed);
+var responsiveRail = (panel) => panel ? responsiveAt(panel.responsiveOverlayAt ?? "narrow") : void 0;
+var responsiveDrawer = (panel) => panel ? responsiveAt(panel.responsiveOverlayAt) : void 0;
+function Rail({
+  id,
+  side,
+  panel
+}) {
+  const key = side === "left" ? "leftRail" : "rightRail";
+  const resize = resolveResize(id, key, panel);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      id: workbenchRegionId(id, key),
+      class: `kui-workbench__rail kui-workbench__rail--${side}`,
+      "data-workbench-rail": side,
+      "data-appearance": !panel.toolbar && panel.pane?.appearance === "sunken" ? "sunken" : void 0,
+      "data-collapsed": String(panel.collapsed ?? false),
+      "data-outlined": !panel.collapsed && panel.presentation !== "hidden" && panel.outlined ? "true" : void 0,
+      "data-separator": panel.separator ?? "auto",
+      "data-collapse-motion": panel.collapseMotion ?? "slide",
+      "data-content-overflow": panel.contentOverflow ?? "clip",
+      "data-presentation": panel.presentation ?? "inline",
+      "data-responsive-overlay-at": responsiveAt(
+        panel.responsiveOverlayAt ?? "narrow"
+      ),
+      "data-compact-overlay": panel.compactOverlay ?? "inset",
+      ...resizeAttributes(resize),
+      "aria-label": panel.label || void 0,
+      "aria-hidden": hiddenFromAccessibility(panel),
+      tabindex: panel.collapsed || panel.presentation === "hidden" ? panel.tabIndex === void 0 ? void 0 : -1 : panel.tabIndex,
+      inert: Boolean(panel.collapsed),
+      style: panelStyle(panel, resize, "--kui-workbench-rail-width"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__panel-content",
+            "data-workbench-panel-content": true,
+            inert: Boolean(panel.collapsed),
+            children: panelBody(id, key, panel)
+          }
+        ),
+        resize && /* @__PURE__ */ jsx(
+          PanelHandle,
+          {
+            panel,
+            resize,
+            label: panel.label || DEFAULT_LABELS[key]
+          }
+        )
+      ]
+    }
+  );
+}
+function Drawer({ id, panel }) {
+  const resize = resolveResize(id, "bottomDrawer", panel);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: workbenchRegionId(id, "bottomDrawer"),
+      class: "kui-workbench__drawer",
+      "data-workbench-drawer": true,
+      "data-appearance": !panel.toolbar && panel.pane?.appearance === "sunken" ? "sunken" : void 0,
+      "data-collapsed": String(panel.collapsed ?? false),
+      "data-outlined": !panel.collapsed && panel.presentation !== "hidden" && panel.outlined ? "true" : void 0,
+      "data-separator": panel.separator ?? "auto",
+      "data-collapse-motion": panel.collapseMotion ?? "slide",
+      "data-content-overflow": panel.contentOverflow ?? "clip",
+      "data-presentation": panel.presentation ?? "inline",
+      "data-responsive-overlay-at": responsiveAt(panel.responsiveOverlayAt),
+      ...resizeAttributes(resize),
+      "aria-label": panel.label || void 0,
+      "aria-hidden": hiddenFromAccessibility(panel),
+      tabindex: panel.collapsed || panel.presentation === "hidden" ? panel.tabIndex === void 0 ? void 0 : -1 : panel.tabIndex,
+      inert: Boolean(panel.collapsed),
+      style: panelStyle(panel, resize, "--kui-workbench-drawer-height"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__panel-content",
+            "data-workbench-panel-content": true,
+            inert: Boolean(panel.collapsed),
+            children: panelBody(id, "bottomDrawer", panel)
+          }
+        ),
+        resize && /* @__PURE__ */ jsx(
+          PanelHandle,
+          {
+            panel,
+            resize,
+            label: panel.label || DEFAULT_LABELS.bottomDrawer
+          }
+        )
+      ]
+    }
+  );
+}
+function restore(panel, side, position, generated) {
+  const control = panel?.restoreControl ?? generated;
+  if (!panel?.collapsed || !control || panel.presentation === "hidden")
+    return "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-workbench__restore",
+      "data-panel": side,
+      "data-position": panel.restorePosition ?? position,
+      children: control
+    }
+  );
+}
+function Workbench({
+  id,
+  label,
+  main,
+  leftRail,
+  rightRail,
+  bottomDrawer,
+  mainToolbar,
+  mainHeader,
+  mainFooter,
+  mainBottomToolbar,
+  mainHeaderPlacement,
+  mainFooterPlacement,
+  mainPane,
+  mainLabel,
+  mainTabIndex,
+  mainOutlined = false,
+  mainHeaderList,
+  mainFooterList,
+  mainMinSize = WORKBENCH_MAIN_MIN_SIZE,
+  mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,
+  overlayBackdrop = false,
+  className = "",
+  slot
+}) {
+  const px = (value) => Math.max(0, Math.round(value));
+  const mainMin = leftRail || rightRail ? px(mainMinSize) : void 0;
+  const mainMinBlock = bottomDrawer ? px(mainMinHeight) : void 0;
+  const style = [
+    mainMin === void 0 ? "" : `--_kui-workbench-main-min-width:${mainMin}px`,
+    mainMinBlock === void 0 ? "" : `--_kui-workbench-main-min-height:${mainMinBlock}px`
+  ].filter(Boolean).join(";");
+  if ([leftRail, rightRail, bottomDrawer].some(
+    (panel) => panel?.pane?.appearance === "sunken"
+  ) || mainPane?.appearance === "sunken")
+    ensureSunkenTexture();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-workbench ${className}`.trim(),
+      id,
+      "data-component": "workbench",
+      "data-main-min-size": mainMin === void 0 ? void 0 : String(mainMin),
+      "data-main-min-height": mainMinBlock === void 0 ? void 0 : String(mainMinBlock),
+      "data-left-inline-expanded": inline(leftRail) && expanded(leftRail) ? "true" : void 0,
+      "data-right-inline-expanded": inline(rightRail) && expanded(rightRail) ? "true" : void 0,
+      "data-left-responsive-inline": inline(leftRail) ? responsiveRail(leftRail) : void 0,
+      "data-right-responsive-inline": inline(rightRail) ? responsiveRail(rightRail) : void 0,
+      "data-left-responsive-expanded": inline(leftRail) && expanded(leftRail) ? responsiveRail(leftRail) : void 0,
+      "data-right-responsive-expanded": inline(rightRail) && expanded(rightRail) ? responsiveRail(rightRail) : void 0,
+      "data-rail-overlay-expanded": leftRail?.presentation === "overlay" && expanded(leftRail) || rightRail?.presentation === "overlay" && expanded(rightRail) ? "true" : void 0,
+      "data-drawer-overlay-expanded": bottomDrawer?.presentation === "overlay" && expanded(bottomDrawer) ? "true" : void 0,
+      "data-drawer-responsive-expanded": inline(bottomDrawer) && expanded(bottomDrawer) ? responsiveDrawer(bottomDrawer) : void 0,
+      "data-overlay-backdrop": overlayBackdrop ? "true" : void 0,
+      "data-responsive-overlay": responsiveRail(leftRail) || responsiveRail(rightRail) || responsiveDrawer(bottomDrawer) ? "true" : void 0,
+      style: style || void 0,
+      "aria-label": label,
+      slot,
+      children: [
+        leftRail && /* @__PURE__ */ jsx(Rail, { id, side: "left", panel: leftRail }),
+        restore(
+          leftRail,
+          "left",
+          "bottom-start",
+          floatingRestore(id, "leftRail", leftRail, Boolean(mainToolbar))
+        ),
+        /* @__PURE__ */ jsxs("div", { class: "kui-workbench__center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "kui-workbench__main",
+              "data-workbench-main": true,
+              "data-outlined": mainOutlined ? "true" : void 0,
+              role: mainLabel ? "region" : void 0,
+              "aria-label": mainLabel,
+              tabindex: mainTabIndex,
+              "data-drawer-inline-expanded": inline(bottomDrawer) && expanded(bottomDrawer) ? "true" : void 0,
+              "data-drawer-responsive-inline": inline(bottomDrawer) ? responsiveDrawer(bottomDrawer) : void 0,
+              "data-appearance": !mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter && mainPane?.appearance === "sunken" ? "sunken" : void 0,
+              children: mainBody({
+                workbenchId: id,
+                main,
+                mainToolbar,
+                mainHeader,
+                mainFooter,
+                mainBottomToolbar,
+                mainHeaderPlacement,
+                mainFooterPlacement,
+                mainPane,
+                mainHeaderList,
+                mainFooterList,
+                leftRail,
+                rightRail,
+                bottomDrawer
+              })
+            }
+          ),
+          bottomDrawer && /* @__PURE__ */ jsx(Drawer, { id, panel: bottomDrawer }),
+          restore(
+            bottomDrawer,
+            "bottom",
+            "bottom-end",
+            floatingRestore(
+              id,
+              "bottomDrawer",
+              bottomDrawer,
+              Boolean(mainBottomToolbar)
+            )
+          )
+        ] }),
+        rightRail && /* @__PURE__ */ jsx(Rail, { id, side: "right", panel: rightRail }),
+        restore(
+          rightRail,
+          "right",
+          "bottom-end",
+          floatingRestore(id, "rightRail", rightRail, Boolean(mainToolbar))
+        ),
+        overlayBackdrop ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__backdrop",
+            "data-workbench-backdrop": true,
+            "aria-hidden": "true"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { Workbench };
+
+//# sourceMappingURL=chunk-CPSGUGAY.js.map