@ixfx/components 0.15.1 → 0.15.3

package/dist/index.d.ts

@@ -2664,6 +2664,11 @@ declare class PanelGroupElement extends LitElement {
   collapsible: boolean;
   accordion: boolean;
   allowReorder: boolean;
+  /**
+   * Pin each panel's titlebar to the top (or left, for vertical titlebars) of the scroll area
+   * while its content is in view. On by default; set `sticky-headers="false"` to disable.
+   */
+  stickyHeaders: boolean;
   /** Explicit gap between panels. When unset, `--group-gap` (falling back to `--space-l`) controls the gap. */
   gap?: string;
   private _panels;

package/dist/index.js

@@ -75,6 +75,7 @@ import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, scaler } from "@ixfx/numbers";
+import { live } from "lit/directives/live.js";
 //#region src/bottom-drawer/bottom-drawer.ts
 /** Builds the command id for a named drawer's command, e.g. `inspector.expand`. */
 function bottomDrawerCommandId(name, command) {
@@ -5255,7 +5256,7 @@ let DockHostElement = class DockHostElement extends LitElement {
       <ixfx-split-layout
         class="split"
         direction=${node.direction}
-        size=${size === void 0 ? nothing : String(size)}
+        size=${size === void 0 ? nothing : live(String(size))}
         style=${`--split-gutter-size: var(--dock-split-bar-size, 2px); --split-collapsed-size: var(--dock-collapsed-size, 40px)`}
         data-dock-path=${pathStr}
         data-dock-gen=${this._loadGeneration}
@@ -5278,7 +5279,7 @@ let DockHostElement = class DockHostElement extends LitElement {
         class="leaf"
         data-dock-path=${pathStr}
         data-dock-name=${stack.name ?? nothing}
-        size=${size === void 0 ? nothing : String(size)}
+        size=${size === void 0 ? nothing : live(String(size))}
         min=${collapsible ? `1px` : nothing}
         when-small=${collapsible ? `collapse` : nothing}
         ?collapsed=${stack.collapsed === true}
@@ -11050,6 +11051,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 		this.collapsible = true;
 		this.accordion = false;
 		this.allowReorder = false;
+		this.stickyHeaders = true;
 		this._dragState = null;
 		this._suppressNextClick = false;
 		this._onClickCapture = (event) => {
@@ -11147,7 +11149,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 			if (this.gap !== void 0) this.style.setProperty(`--group-gap`, this.gap);
 			else this.style.removeProperty(`--group-gap`);
 		}
-		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`)) this.updateComplete.then(() => {
+		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`) || changed.has(`stickyHeaders`)) this.updateComplete.then(() => {
 			this._propagateAll();
 		});
 	}
@@ -11157,6 +11159,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 			panel.setAttribute(`variant`, this.variant);
 			panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
 			panel.setAttribute(`orientation`, invertedOrientation);
+			panel.toggleAttribute(`sticky-header`, this.stickyHeaders);
 			if (this.collapsible) panel.setAttribute(`collapsible`, ``);
 			else panel.removeAttribute(`collapsible`);
 		}
@@ -11395,6 +11398,14 @@ __decorate([property({
 	attribute: `allow-reorder`,
 	reflect: true
 })], PanelGroupElement.prototype, "allowReorder", void 0);
+__decorate([property({
+	attribute: `sticky-headers`,
+	reflect: true,
+	converter: {
+		fromAttribute: (value) => value !== `false`,
+		toAttribute: (value) => value ? `true` : `false`
+	}
+})], PanelGroupElement.prototype, "stickyHeaders", void 0);
 __decorate([property()], PanelGroupElement.prototype, "gap", void 0);
 __decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
 PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);

package/dist/panel.d.ts

@@ -26,6 +26,11 @@ declare class PanelElement extends LitElement {
   hideTitlebar: boolean;
   /** Keep the toolbar visible even when the panel is collapsed. */
   keepToolbar: boolean;
+  /**
+   * Keep the titlebar pinned to the edge of the nearest scrolling ancestor while this panel
+   * is in view (top for horizontal titlebars, left for vertical). Normally set by `ixfx-panel-group`.
+   */
+  stickyHeader: boolean;
   private _onTitlebarToggle;
   private _onCloseClick;
   protected render(): import("lit").TemplateResult<1>;

package/dist/panel.js

@@ -17,6 +17,7 @@ let PanelElement = class PanelElement extends LitElement {
 		this.variant = `titlebar`;
 		this.hideTitlebar = false;
 		this.keepToolbar = false;
+		this.stickyHeader = false;
 	}
 	_onTitlebarToggle(event) {
 		event.stopPropagation();
@@ -85,6 +86,23 @@ let PanelElement = class PanelElement extends LitElement {
       flex-shrink: 0;
     }
 
+    /* \`overflow: clip\` (unlike \`hidden\`) does not create a scroll container, so the
+       titlebar can stick to the outer scroll area. Sticking is bounded by the panel itself. */
+    :host([sticky-header]) {
+      overflow: clip;
+    }
+
+    :host([sticky-header]) ixfx-titlebar {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+
+    :host([sticky-header][orientation="vertical"]) ixfx-titlebar {
+      top: auto;
+      left: 0;
+    }
+
     .content-wrapper {
       interpolate-size: allow-keywords;
       overflow: hidden;
@@ -108,7 +126,8 @@ let PanelElement = class PanelElement extends LitElement {
     }
 
     .content-inner {
-      box-shadow: var(--deboss-3);
+      box-shadow: var(--panel-content-shadow, var(--deboss-3));
+      border: var(--panel-content-border, none);
       min-height: 0;
       min-width: 0;
       overflow: hidden;
@@ -214,6 +233,11 @@ __decorate([property({
 	type: Boolean,
 	attribute: `keep-toolbar`
 })], PanelElement.prototype, "keepToolbar", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `sticky-header`,
+	reflect: true
+})], PanelElement.prototype, "stickyHeader", void 0);
 PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 export { PanelElement };

package/dist/titlebar.js

@@ -157,7 +157,6 @@ let TitlebarElement = class TitlebarElement extends LitElement {
 
     .title-text {
       flex: 1;
-      padding-left: 1ch;
       font-family: var(--font-family);
       font-size: var(--text-m);
       font-weight: var(--font-weight-bold, 600);
@@ -175,7 +174,6 @@ let TitlebarElement = class TitlebarElement extends LitElement {
 
     :host([orientation="vertical"]) .title-text {
       writing-mode: vertical-rl;
-      padding-left: 0;
       padding-bottom: 1ch;
       text-orientation: mixed;
       transform: rotate(180deg);

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.15.1",
-  "generated": "2026-10-18T18:06:38.222Z",
+  "version": "0.15.3",
+  "generated": "2026-10-18T19:35:32.045Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/panel.md

@@ -189,6 +189,8 @@ Use the `collapsed` attribute to start the panel in collapsed state:
 | `--transition`           | `0.15s ease-out`        | Animation transition duration                    |
 | `--panel-width`         | `auto`                   | Width for vertical panels                       |
 | `--panel-height`        | `auto`                   | Height for horizontal panels                    |
+| `--panel-content-shadow`| `var(--deboss-3)`        | `box-shadow` of the content area (the inset 3D effect). `none` removes it |
+| `--panel-content-border`| `none`                   | `border` of the content area                    |
 | `--prominence-idle-opacity` | `0.6`             | Opacity of caret when idle                     |
 | `--prominence-tickled-opacity` | `1.0`         | Opacity of caret on hover                      |
 
@@ -215,6 +217,7 @@ A container component that manages multiple panels with flexible open behavior.
 | `collapsible`          | boolean                                           | `true`         | Collapse behaviour propagated to child panels                |
 | `gap`                  | string                                            | (unset)        | Explicit gap between panels; sets `--group-gap` when provided |
 | `orientation`          | `'horizontal'` \| `'vertical'`                   | `'horizontal'` | Layout direction of the group                                 |
+| `sticky-headers`       | boolean (`"false"` disables)                      | `true`         | Pin each panel's titlebar to the scroll area edge (top, or left for vertical titlebars) |
 | `toggle-interaction`   | `'implicit'` \| `'explicit'` \| `'disabled'`     | `'implicit'`   | Toggle behavior applied to all child panels                   |
 | `variant`              | `'titlebar'` \| `'midline'` \| `'tree'`          | `'titlebar'`   | Visual style applied to all child panels                     |
 
@@ -255,6 +258,12 @@ By default, multiple panels can be open at the same time. Add `accordion` to res
 </ixfx-panel-group>
 ```
 
+### Sticky headers
+
+Panels in a group keep their titlebar pinned to the nearest scrolling ancestor while the panel is in view, so you don't lose track of which panel you're in. The titlebar stops sticking when the panel ends. Horizontal titlebars stick to the top, vertical titlebars to the left. Disable with `sticky-headers="false"`. A standalone `ixfx-panel` can opt in with `sticky-header`.
+
+Sticking activates `overflow: clip` on the panel instead of `overflow: hidden`.
+
 ### Reordering
 
 Set `allow-reorder` to let users rearrange panels by dragging their titlebars (pointer-only in v1; keyboard reorder is not included):
@@ -294,6 +303,18 @@ ixfx-panel-group {
 
 Alternatively set the `gap` property/attribute for the same effect (it mirrors its value into `--group-gap`).
 
+### Content area styling
+
+Inherited custom properties, so setting them on a group styles all its panels. To remove the inset effect or use your own:
+
+```css
+ixfx-panel-group {
+  --panel-content-shadow: none;
+  --panel-content-border: 1px solid var(--surface-4);
+}
+```
+
+
 ### Group-propagated properties
 
 When you set `variant`, `toggle-interaction` or `collapsible` on the group, those values are automatically applied to all child panels that don't have an explicit value set. This simplifies declaration when all panels in a group share the same styling:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.15.1",
+  "version": "0.15.3",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",