@kerfjs/ui 5.0.0-beta.53 → 5.0.0-beta.55

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-KPNTVB7A.js';
+export { ListHeader } from './chunk-R754MHXX.js';
 
 
 

package/dist/list-inset-text.d.ts

@@ -2,6 +2,10 @@ import * as kerfjs from 'kerfjs';
 import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type ListInsetTextRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-sides'?: never;
+}>;
 interface ListInsetTextProps {
     /** Text (or inline content) that carries no margin, border, or padding of its own. */
     children: KerfUiContent | string;
@@ -15,6 +19,8 @@ interface ListInsetTextProps {
      */
     horizontalOnly?: boolean;
     className?: string;
+    /** Safe `data-*` metadata; component-owned structural attributes stay protected. */
+    rootAttributes?: ListInsetTextRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
@@ -26,6 +32,6 @@ interface ListInsetTextProps {
  * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
  * space for tight text layout.
  */
-declare function ListInsetText({ children, sides, horizontalOnly, className, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
+declare function ListInsetText({ children, sides, horizontalOnly, className, rootAttributes, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

@@ -1,3 +1,4 @@
-export { ListInsetText } from './chunk-ZK5EGVFP.js';
+export { ListInsetText } from './chunk-5OLVUEND.js';
+
 
 //# sourceMappingURL=list-inset-text.js.map

package/dist/panel-toolbar-BFQxFITu.d.ts

@@ -0,0 +1,52 @@
+import { LucideIcon } from './lucide-icon.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** Which edge a collapsible panel docks to. */
+type PanelSide = 'left' | 'right' | 'bottom';
+/**
+ * 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.
+ */
+declare function collapsiblePanelToggleIcon(side: PanelSide, collapsed: boolean): {
+    icon: Parameters<typeof LucideIcon>[0]['icon'];
+    name: string;
+};
+/**
+ * The standard collapse toggle a panel toolbar renders. The app handles the
+ * button's `data-action` and flips its own `collapsed` flag.
+ */
+interface PanelToggle {
+    /** The `data-action` the toggle button carries. */
+    action: string;
+    /** The panel's short name, for the accessible "Show …" / "Hide …" label. */
+    name: string;
+}
+/**
+ * A collapsible panel's top toolbar, composed so its groups follow the
+ * panel's open state.
+ *
+ * - `title` (a `ToolbarText`) and `panelOnly` groups lead the toolbar and are
+ *   available only while the panel is open.
+ * - `constant` groups stay available either way: they trail the panel's
+ *   toolbar while it is open and move to the work area's toolbar while it is
+ *   collapsed.
+ * - `toggle` is always the last group: in the panel's toolbar while it is
+ *   open, and right after the `constant` groups in the work area's toolbar
+ *   while it is collapsed.
+ *
+ * `constant` content renders in both places while the panel is collapsed (the
+ * panel's copy is inert), so give it no `id`s.
+ */
+interface PanelToolbar {
+    /** Accessible name of the panel's toolbar. */
+    label: string;
+    title?: KerfUiContent;
+    panelOnly?: KerfUiContent;
+    constant?: KerfUiContent;
+    toggle?: PanelToggle;
+}
+
+export { type PanelSide as P, type PanelToolbar as a, type PanelToggle as b, collapsiblePanelToggleIcon as c };

package/dist/popup-menu-register.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Marker export for tests and tooling; importing this module registers the
+ * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,
+ * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard
+ * choice through the item's click so delegated `data-action`s run.
+ */
+declare const popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };

package/dist/popup-menu-register.js

@@ -0,0 +1,30 @@
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/divider/divider.js';
+import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
+import WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+
+// src/popup-menu-register.ts
+
+// src/install-popup-menu-keyboard.ts
+var installed = /* @__PURE__ */ new WeakSet();
+function installPopupMenuKeyboard(prototype) {
+  if (installed.has(prototype)) return;
+  installed.add(prototype);
+  const target = prototype;
+  const makeSelection = target.makeSelection;
+  target.makeSelection = function(item, event) {
+    if (event instanceof KeyboardEvent && this.classList.contains("kui-popup-menu") && !item.disabled) {
+      item.click();
+      return;
+    }
+    makeSelection.call(this, item, event);
+  };
+}
+
+// src/popup-menu-register.ts
+installPopupMenuKeyboard(WaDropdown.prototype);
+var popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };
+
+//# sourceMappingURL=popup-menu-register.js.map

package/dist/popup-menu-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/install-popup-menu-keyboard.ts","../src/popup-menu-register.ts"],"names":[],"mappings":";;;;;;;;AAOA,IAAM,SAAA,uBAAgB,OAAA,EAAgB;AAW/B,SAAS,yBAAyB,SAAA,EAAyB;AAChE,EAAA,IAAI,SAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAA,SAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,gBAAgB,MAAA,CAAO,aAAA;AAC7B,EAAA,MAAA,CAAO,aAAA,GAAgB,SAAmC,IAAA,EAAM,KAAA,EAAa;AAC3E,IAAA,IACE,KAAA,YAAiB,iBACjB,IAAA,CAAK,SAAA,CAAU,SAAS,gBAAgB,CAAA,IACxC,CAAC,IAAA,CAAK,QAAA,EACN;AACA,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA;AAAA,IACF;AACA,IAAA,aAAA,CAAc,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,KAAK,CAAA;AAAA,EACtC,CAAA;AACF;;;AC1BA,wBAAA,CAAyB,WAAW,SAAS,CAAA;AAQtC,IAAM,2BAAA,GAA8B","file":"popup-menu-register.js","sourcesContent":["interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\n\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}

package/dist/popup-menu.d.ts

@@ -0,0 +1,71 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type PopupMenuPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';
+type PopupMenuDataAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip-children'?: never;
+}>;
+/** One command in the menu. */
+interface PopupMenuItem {
+    kind?: 'item';
+    label: string;
+    /** Delegated `data-action` the app handles when the item is chosen. */
+    action?: string;
+    /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */
+    value?: string;
+    /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */
+    icon?: SafeHtml;
+    disabled?: boolean;
+    /** Application `data-*` metadata such as a record id. */
+    attributes?: PopupMenuDataAttributes;
+}
+/** A labeled group heading; items that follow it belong to the group. */
+interface PopupMenuHeading {
+    kind: 'heading';
+    label: string;
+}
+/** A separator between groups of items. */
+interface PopupMenuDivider {
+    kind: 'divider';
+}
+type PopupMenuEntry = PopupMenuItem | PopupMenuHeading | PopupMenuDivider;
+type PopupMenuTriggerName = {
+    /** Visible trigger text, which is also its accessible name. */
+    text: string;
+    label?: never;
+} | {
+    text?: never;
+    /**
+     * Accessible name of an icon-only trigger, rendered as visually hidden
+     * slotted text (a Web Awesome button takes its name from its content).
+     */
+    label: string;
+};
+type PopupMenuProps = PopupMenuTriggerName & {
+    /** Trigger icon, typically a `LucideIcon`, before any visible text. */
+    icon?: KerfUiContent;
+    items: readonly PopupMenuEntry[];
+    /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */
+    placement?: PopupMenuPlacement;
+    /** Show the disclosure caret after the trigger content. Defaults to true. */
+    caret?: boolean;
+    disabled?: boolean;
+    /** Application `data-*` metadata on the menu root. */
+    rootAttributes?: PopupMenuDataAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+};
+/**
+ * An action menu: a trigger button that opens a list of commands. Renders the
+ * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with
+ * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items
+ * dispatch through delegated `data-action`s; the app owns the commands and any
+ * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register
+ * the Web Awesome elements.
+ */
+declare function PopupMenu({ text, label, icon, items, placement, caret, disabled, rootAttributes, slot, }: PopupMenuProps): SafeHtml;
+
+export { PopupMenu, type PopupMenuDivider, type PopupMenuEntry, type PopupMenuHeading, type PopupMenuItem, type PopupMenuPlacement, type PopupMenuProps };

package/dist/popup-menu.js

@@ -0,0 +1,3 @@
+export { PopupMenu } from './chunk-4BIMLITI.js';
+
+//# sourceMappingURL=popup-menu.js.map

package/dist/popup-menu.js.map

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

package/dist/resizable-region.d.ts

@@ -17,6 +17,9 @@ interface ResizableRegionProps {
     max: number;
     axis?: ResizableRegionAxis;
     edge?: ResizableRegionEdge;
+    /** Snap the track to zero. The region renders `inert` and `aria-hidden`
+     * while collapsed, so neither Tab nor assistive technology reaches it or
+     * lands on an empty landmark; `restoreControl` renders outside the region. */
     collapsed?: boolean;
     transitioning?: boolean;
     /** Whether the separator line is painted. The resize hit target remains available. */
@@ -29,7 +32,7 @@ interface ResizableRegionProps {
     presentation?: ResizableRegionPresentation;
     /** Always-available control rendered while collapsed, outside the clipped region. */
     restoreControl?: SafeHtml;
-    /** Safe-area-aware viewport corner for `restoreControl`. */
+    /** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */
     restorePosition?: ResizableRegionRestorePosition;
     /** Fill the available inline track and hide the separator below a container breakpoint. */
     responsiveFillAt?: ResizableRegionResponsiveFillAt;

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VOCPXGQN.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/split-view.js

@@ -1,5 +1,5 @@
 import { NavStack } from './chunk-DQA5FMOX.js';
-import { ResizableRegion } from './chunk-VOCPXGQN.js';
+import { ResizableRegion } from './chunk-VHADGP3B.js';
 
 
 

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-BJJKFVWW.js';
+export { StateBanner } from './chunk-LZXQVUGN.js';
 
 
 

package/dist/styles/catalog/components/catalog-example.css

@@ -8,19 +8,6 @@
   gap: 0.5rem;
 }
 
-.kui-catalog-example__note {
-  margin: 0;
-  padding-block: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline: calc(
-    var(--kui-layout-inline-margin, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-xs);
-}
-
 .kui-catalog-example__viewport {
   position: relative;
   max-width: 100%;
@@ -139,9 +126,6 @@
 
 .kui-catalog-example__compact-fallback {
   display: none;
-  margin: 0;
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-s);
 }
 
 @media ((max-width: 52rem)) {

package/dist/styles/catalog/components/catalog-stage.css

@@ -1,13 +1,18 @@
+/* The preview stage fills the work area's scroller — and grows with a taller
+   specimen, never shrinking under it — behind a transparency checkerboard,
+   so a specimen's own surface (or lack of one) stays visible. */
 .kui-catalog__stage {
-  width: 100%;
-  min-height: 0;
   flex: 1 0 auto;
+  background-color: var(--kui-color-surface-lowered);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
+  background-size: 1.5rem 1.5rem;
 }
 
+/* The centered specimen canvas, at the catalog's reading measure. */
 .kui-catalog__canvas {
   position: relative;
   display: grid;
-  width: min(100%, var(--kui-catalog-content-measure, 70rem));
+  width: min(100%, 70rem);
   min-width: 0;
   min-height: 100%;
   margin-inline: auto;
@@ -48,13 +53,3 @@
 .kui-catalog__geometry-margin {
   background: color-mix(in srgb, #f6a94c 55%, transparent);
 }
-
-@media (max-width: 52rem) {
-  .kui-catalog__stage {
-    min-height: 24rem;
-  }
-
-  .kui-catalog__canvas {
-    min-height: 16rem;
-  }
-}

package/dist/styles/catalog/components/catalog.css

@@ -1,22 +1,12 @@
+/* The catalog fills its container, which must have a definite height (the
+   `document.css` baseline's `.kui-app-root`, as for any Workbench). */
 .kui-catalog {
-  --kui-catalog-sidebar-width: 18rem;
-  --kui-catalog-content-measure: 70rem;
-
-  display: grid;
-  height: 100vh;
-  grid-template-columns: var(--kui-catalog-sidebar-width) minmax(0, 1fr);
-  overflow: hidden;
-}
-
-.kui-catalog[data-sidebar-collapsed="true"] {
-  grid-template-columns: 0 minmax(0, 1fr);
+  height: 100%;
 }
 
-@media (max-width: 52rem) {
-  .kui-catalog,
-  .kui-catalog[data-sidebar-collapsed="true"] {
-    height: auto;
-    min-height: 100vh;
-    grid-template-columns: 1fr;
-  }
+/* The brand mark, sized to sit inside a toolbar group. */
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
 }

package/dist/styles/catalog.css

@@ -1,10 +1,5 @@
 /* Public compatibility entrypoint. Each catalog component owns its styles. */
 @import "./catalog/components/catalog.css";
-@import "./catalog/components/catalog-sidebar.css";
-@import "./catalog/components/catalog-section-list.css";
-@import "./catalog/components/catalog-secondary-sections.css";
-@import "./catalog/components/catalog-detail.css";
 @import "./catalog/components/catalog-stage.css";
-@import "./catalog/components/catalog-resource-footer.css";
 @import "./catalog/components/catalog-example.css";
 @import "./catalog/components/catalog-example-stack.css";

package/dist/styles/collapsible-panel.css

@@ -25,6 +25,12 @@
     --kui-edge-inset-inline-end,
     var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
   );
+  /* The content keeps its fixed expanded size (collapsing slides it rather
+     than squeezing it), so a flex parent must never shrink the track below
+     that size: a shrunk track only clips the content's trailing edge (a
+     rail's row badges, a drawer's last row). The panel holds its size and
+     the sibling work area gives way. */
+  flex-shrink: 0;
   overflow: hidden;
   background: var(--kui-color-surface);
 }
@@ -265,37 +271,109 @@
   display: none;
 }
 
+/* A collapsed panel's restore control floats in a corner of the panel's own
+   container, never of the viewport, so a panel embedded in a page cannot float
+   it over page content outside that container. The container becomes the
+   corner's containing block and isolates its stacking only while a restore
+   control is shown, at zero specificity so an app's own positioning of that
+   container wins. The corner is inset from the container's edges plus the
+   unsafe area of each edge it reaches. The control belongs to the layer
+   beneath open overlays, two below the overlay z-index and so below the
+   compact overlay's backdrop: an open overlay covers it as it covers the rest
+   of the page, the Workbench rule. A collapsed overlay passes pointer events
+   through, so the control is usable again as soon as the overlay closes. */
+:where(:has(> .kui-collapsible-panel__restore)) {
+  position: relative;
+  isolation: isolate;
+  anchor-scope: --kui-restore-drawer;
+}
+
+/* An expanded bottom drawer beside the collapsed panel — a direct child of
+   that container or of one of its direct children (the app's work-area
+   column) — owns the container's bottom, so the corner floats above the
+   drawer's top edge instead of over it. The drawer publishes that edge as an
+   anchor; a drawer nested deeper, inside the work area's own content, belongs
+   to another layout and is scoped out. Without anchor positioning the corner
+   keeps the container's bottom edge. */
+.kui-collapsible-panel--bottom[data-presentation="inline"]:not(
+    [data-collapsed="true"],
+    [data-collapsible-overlay="true"] *,
+    [data-collapsible-responsive="hidden"] *
+  ) {
+  anchor-name: --kui-restore-drawer;
+}
+
+:where(:has(> .kui-collapsible-panel__restore)) > * > * > * {
+  anchor-scope: --kui-restore-drawer;
+}
+
 .kui-collapsible-panel__restore {
-  position: fixed;
-  z-index: var(--kui-collapsible-panel-restore-z, 42);
+  --_kui-collapsible-panel-restore-inset: var(
+    --kui-collapsible-panel-restore-inset,
+    1rem
+  );
+  /* The corner owns the inset, so a FloatingToolbar composed here floats
+     from this point instead of adding its own inset on top. */
+  --kui-floating-toolbar-inset: 0px;
+  position: absolute;
+  z-index: var(
+    --kui-collapsible-panel-restore-z,
+    calc(var(--kui-collapsible-panel-overlay-z, 40) - 2)
+  );
+  position-visibility: always;
   inset-block-end: calc(
-    var(--kui-collapsible-panel-restore-inset, 1rem) +
-      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+    var(--_kui-collapsible-panel-restore-inset) +
+      var(
+        --kui-edge-inset-block-end,
+        var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+      )
+  );
+  /* Above an expanded drawer's top edge when one is in scope (see above). */
+  inset-block-end: calc(
+    var(--_kui-collapsible-panel-restore-inset) +
+      anchor(
+        --kui-restore-drawer top,
+        var(
+          --kui-edge-inset-block-end,
+          var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+        )
+      )
   );
 }
 
 .kui-collapsible-panel__restore[data-position="bottom-start"] {
   inset-inline-start: calc(
-    var(--kui-collapsible-panel-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+    var(--_kui-collapsible-panel-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
   );
 }
 
 .kui-collapsible-panel__restore[data-position="bottom-end"] {
   inset-inline-end: calc(
-    var(--kui-collapsible-panel-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+    var(--_kui-collapsible-panel-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
   );
 }
 
 /* A button does not stretch between its insets the way a div does, so the
-   backdrop sizes itself to its containing block explicitly. */
+   backdrop sizes itself to its containing block explicitly. It sits one below
+   the overlay z-index, so an app that moves the overlay moves the backdrop
+   with it, and the restore controls stay beneath both. */
 .kui-collapsible-panel__backdrop {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
-  z-index: var(--kui-collapsible-panel-backdrop-z, 39);
+  z-index: var(
+    --kui-collapsible-panel-backdrop-z,
+    calc(var(--kui-collapsible-panel-overlay-z, 40) - 1)
+  );
   border: 0;
   padding: 0;
   background: var(--kui-color-scrim, rgb(0 0 0 / 32%));

package/dist/styles/floating-toolbar.css

@@ -1,7 +1,12 @@
 .kui-floating-toolbar {
   /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
-     extra 8px past that (--kui-space-m = 16px). Override the token to reposition. */
-  --kui-floating-toolbar-inset: var(--kui-space-m, 1rem);
+     extra 8px past that (--kui-space-m = 16px). Override the token to reposition,
+     on the toolbar or on an ancestor composition boundary: a Workbench restore
+     corner sets it to 0 because the corner already owns the inset. */
+  --_kui-floating-toolbar-inset: var(
+    --kui-floating-toolbar-inset,
+    var(--kui-space-m, 1rem)
+  );
 
   /* Floats above the main content of its nearest positioned ancestor. z-index
      stays low so it never covers dialogs/overlays (it is not top-layer). Forced
@@ -15,19 +20,19 @@
 }
 
 .kui-floating-toolbar[data-position^="bottom"] {
-  inset-block-end: var(--kui-floating-toolbar-inset);
+  inset-block-end: var(--_kui-floating-toolbar-inset);
 }
 
 .kui-floating-toolbar[data-position^="top"] {
-  inset-block-start: var(--kui-floating-toolbar-inset);
+  inset-block-start: var(--_kui-floating-toolbar-inset);
 }
 
 .kui-floating-toolbar[data-position$="-end"] {
-  inset-inline-end: var(--kui-floating-toolbar-inset);
+  inset-inline-end: var(--_kui-floating-toolbar-inset);
 }
 
 .kui-floating-toolbar[data-position$="-start"] {
-  inset-inline-start: var(--kui-floating-toolbar-inset);
+  inset-inline-start: var(--_kui-floating-toolbar-inset);
 }
 
 /* The centered edges span from the middle rather than an inline edge. */

package/dist/styles/popup-menu.css

@@ -0,0 +1,12 @@
+/* An icon-only trigger's accessible name: Web Awesome names its button from the
+   slotted content, so the label is present but visually hidden. */
+.kui-popup-menu__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}