@ixfx/components 0.6.2 → 0.7.1

package/docs-user/toolbar.md

@@ -26,13 +26,14 @@ A responsive toolbar container that handles overflow by moving items to a popove
 
 ### Properties / attributes
 
-| Attribute / Property | Type                                              | Default        | Description                                          |
-|---------------------|---------------------------------------------------|----------------|------------------------------------------------------|
-| `orientation`       | `'horizontal'` \| `'vertical-left'` \| `'vertical-right'` | `'horizontal'` | Layout direction. `vertical-left` flips text upward. |
-| `layout`            | `'one-line'` \| `'wrap'`                          | `'one-line'`   | Whether items wrap or overflow                        |
-| `vertical-writing`   | `'auto'` \| `'up'` \| `'down'` \| `'none'`       | `'auto'`       | Writing mode for vertical orientations               |
-| `show-group-labels` | boolean                                           | `false`        | Show labels as rows above group content              |
-| `invisible-groups`   | boolean                                           | `false`        | Hide group borders and backgrounds                   |
+| Attribute / Property | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `orientation` | `'horizontal'` \| `'vertical-left'` \| `'vertical-right'` | `'horizontal'` | Layout direction. `vertical-left` flips text upward. |
+| `layout` | `'one-line'` \| `'wrap'` | `'one-line'` | `'one-line'` enables overflow handling; `'wrap'` allows items to wrap to multiple lines |
+| `vertical-writing` | `'auto'` \| `'up'` \| `'down'` \| `'none'` | `'auto'` | Writing mode for vertical orientations |
+| `toolbar-align` | `'near'` \| `'far'` | `'near'` | Horizontal justification: `near` = left, `far` = right |
+| `show-group-labels` | boolean | `false` | Show labels as rows above group content |
+| `invisible-groups` | boolean | `false` | Hide group borders and backgrounds |
 
 ### Slots
 
@@ -43,12 +44,35 @@ A responsive toolbar container that handles overflow by moving items to a popove
 
 ### CSS custom properties
 
-| Property | Default | Description                          |
-|----------|---------|--------------------------------------|
-| `--toolbar-gap`      | `var(--space-s)` | Gap between toolbar items |
-| `--toolbar-bg`      | `var(--surface-2)` | Toolbar background |
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--toolbar-gap` | `var(--space-s)` | Gap between toolbar items |
+| `--toolbar-group-gap` | `var(--space-m)` | Gap between nested `ixfx-toolbar-group` elements |
+| `--toolbar-bg` | `var(--surface-2)` | Toolbar background |
 | `--toolbar-padding` | `var(--space-s)` | Toolbar padding |
-| `--toolbar-border`  | `var(--border-subtle)` | Toolbar border |
+| `--toolbar-border` | `var(--border-subtle)` | Toolbar border |
+| `--toolbar-group-padding` | `var(--space-xs)` | Padding for nested `ixfx-toolbar-group` elements (set here to affect all groups) |
+| `--toolbar-overflow` | `'auto'` | Overflow mode: `'auto'` (show items, hide overflow button when not needed), `'collapsed'` (all items in overflow, button always visible), `'disabled'` (no overflow, items always visible) |
+
+### Alignment
+
+`toolbar-align` controls justification along the main axis. For horizontal toolbars (the default orientation), `near` (default) left-justifies content (`justify-content: flex-start`) and `far` right-justifies it (`justify-content: flex-end`). The attribute is ignored for vertical orientations. Overflow handling (`layout="one-line"`) works with both values — the overflow popover remains right-aligned when `far` is set.
+
+```html
+<!-- Left-aligned (default) -->
+<ixfx-toolbar toolbar-align="near">
+  <ixfx-button>Save</ixfx-button>
+  <ixfx-button>Cancel</ixfx-button>
+</ixfx-toolbar>
+
+<!-- Right-aligned horizontal toolbar -->
+<ixfx-toolbar toolbar-align="far">
+  <ixfx-button>Save</ixfx-button>
+  <ixfx-button>Cancel</ixfx-button>
+</ixfx-toolbar>
+```
+
+See `demo/toolbar.html` “Alignment – toolbar-align” for a live demo: side-by-side `near` vs `far` comparison, a `far` toolbar with many groups (resize to see overflow stay right-aligned), and an interactive toggle (`select#select-align` driving `toolbar#toolbar-align-demo`).
 
 ### Writing mode
 
@@ -59,6 +83,22 @@ For vertical toolbars, `vertical-writing` controls how text is displayed:
 - `'down'` — Forces `vertical-lr` (text runs downward)
 - `'none'` — Forces `horizontal-tb` (no vertical writing)
 
+### Layout mode
+
+The `layout` attribute controls how items handle available space:
+
+- `'one-line'` (default): Items stay on a single line. Items that don't fit are moved to an overflow popover.
+- `'wrap'`: Items wrap to multiple lines as needed. No overflow handling occurs.
+
+```html
+<!-- Items wrap to new lines when they don't fit -->
+<ixfx-toolbar layout="wrap">
+  <ixfx-button>A</ixfx-button>
+  <ixfx-button>B</ixfx-button>
+  <ixfx-button>C</ixfx-button>
+</ixfx-toolbar>
+```
+
 ### Overflow handling
 
 When `layout="one-line"` and items exceed available space, excess items are moved to an overflow popover. The popover is positioned using CSS Anchor Positioning relative to the overflow button.
@@ -72,6 +112,30 @@ When `layout="one-line"` and items exceed available space, excess items are move
 </ixfx-toolbar>
 ```
 
+#### Overflow modes
+
+The `--toolbar-overflow` CSS variable controls how overflow behaves:
+
+- `'auto'` (default): Items are shown initially. When they don't fit, they move to overflow and the overflow button appears.
+- `'collapsed'`: All items start in overflow. The overflow button is always visible.
+- `'disabled'`: Overflow is disabled. Items always remain visible and may overflow the container.
+
+```css
+/* All items hidden behind overflow button */
+ixfx-toolbar {
+  --toolbar-overflow: collapsed;
+}
+
+/* Never collapse - always show all items */
+ixfx-toolbar {
+  --toolbar-overflow: disabled;
+}
+```
+
+#### Groups and overflow
+
+Items with the `grow` attribute never go into overflow — they always remain visible and take remaining space.
+
 ---
 
 ## `ixfx-toolbar-group`
@@ -91,17 +155,23 @@ A grouping container for toolbar items. Groups can have a label and support grow
 
 ### Properties / attributes
 
-| Attribute / Property | Type    | Default | Description                              |
-|---------------------|---------|---------|------------------------------------------|
-| `label`            | string  | `''`    | Label text displayed above content        |
-| `grow`             | boolean | `false` | Group grows to fill remaining space      |
+| Attribute / Property | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `label` | string | `''` | Label text displayed above content |
+| `grow` | boolean | `false` | Group grows to fill remaining space |
+
+The `show-group-labels` attribute on the parent `ixfx-toolbar` controls whether group labels are displayed as rows above the group content.
 
 ### CSS custom properties
 
-| Property                          | Default      | Description                                  |
-|-----------------------------------|-------------|----------------------------------------------|
-| `--toolbar-group-justify-content` | `flex-start` | Horizontal alignment of group contents      |
-| `--toolbar-group-align-items`     | `center`     | Vertical alignment of group contents        |
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--toolbar-group-padding` | `var(--space-xs)` | Padding inside the group (can be set on parent `ixfx-toolbar`) |
+| `--toolbar-group-justify-content` | `flex-start` | Horizontal alignment of group contents |
+| `--toolbar-group-align-items` | `center` | Vertical alignment of group contents |
+| `--toolbar-group-border` | `var(--border-subtle)` | Border around the group (set to `none` with `invisible-groups` on parent to hide borders) |
+
+The `--toolbar-gap` property is inherited from the parent `ixfx-toolbar`.
 
 ```html
 <!-- Right-align items within a group -->
@@ -118,9 +188,11 @@ See `demo/toolbar.html` for complete examples including:
 
 - Word-style horizontal toolbar with font selection, formatting buttons, and paragraph controls
 - Chrome-style toolbar with a growable search input
-- Vertical toolbars with different writing modes
+- Vertical toolbars with different orientations (`vertical-right`, `vertical-left`) and writing modes
+- Horizontal alignment – `toolbar-align="near"` (left) vs `far` (right) with static examples, overflow example, and interactive toggle
 - Footer toolbar with far-right justified group
 - Toolbar with group labels displayed as rows
+- Overflow modes: `collapsed` and `disabled` examples
 
 ---
 
@@ -130,6 +202,7 @@ See `demo/toolbar.html` for complete examples including:
 import type {
   ToolbarOrientation, // 'horizontal' | 'vertical-left' | 'vertical-right'
   ToolbarLayout,      // 'one-line' | 'wrap'
-  ToolbarVerticalWriting // 'auto' | 'up' | 'down' | 'none'
+  ToolbarVerticalWriting, // 'auto' | 'up' | 'down' | 'none'
+  ToolbarAlign // 'near' | 'far'
 } from 'ixfxfun-components';
 ```

package/docs-user/twosplit-layout.md

@@ -0,0 +1,254 @@
+# Two-Way Split Layout
+
+A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
+
+---
+
+## `ixfx-twosplit-layout`
+
+### Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `layout` | `vertical` \| `horizontal` | `vertical` | Split orientation. `vertical` creates left/right panels, `horizontal` creates top/bottom panels. |
+| `sizeA` | `String` | `""` | CSS size for panel A (slot `a`). Can use relative (`50%`) or absolute (`100px`) values. Empty string defaults to `auto`. |
+| `sizeB` | `String` | `""` | CSS size for panel B (slot `b`). Same format as `sizeA`. |
+| `fixedA` | `Boolean` | `false` | If `true`, `sizeA` is calculated in pixels rather than percentage of whole. |
+| `fixedB` | `Boolean` | `false` | If `true`, `sizeB` is calculated in pixels rather than percentage of whole. |
+| `collapsible` | `Boolean` | `false` | If `true`, panels can be collapsed by dragging the handle to the edge. The other panel expands to fill the space. |
+| `minSizeA` | `String` | `""` | Minimum size for panel A (e.g., `"100px"` or `"20%"`). Empty means no minimum. |
+| `maxSizeA` | `String` | `""` | Maximum size for panel A. Empty means no maximum. |
+| `minSizeB` | `String` | `""` | Minimum size for panel B. |
+| `maxSizeB` | `String` | `""` | Maximum size for panel B. |
+
+### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `collapsedA` | `Boolean` (reflects attribute) | `true` if panel A is currently collapsed. |
+| `collapsedB` | `Boolean` (reflects attribute) | `true` if panel B is currently collapsed. |
+
+### CSS Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--handle-size` | `2px` | Width/height of the split bar |
+| `--handle-colour` | `transparent` | Colour of the split bar |
+| `--handle-hover-colour` | `var(--surface-6)` | Colour of handle when hovering |
+| `--handle-active-colour` | `var(--accent)` | Colour of handle when being dragged |
+| `--handle-bg` | `var(--handle-colour)` | Background colour of the grab handle rectangle |
+| `--handle-grab-colour` | `var(--surface-muted-text)` | Colour of the grab handle dots |
+| `--handle-grab-dot-size` | `3px` | Diameter of each grab handle dot |
+| `--handle-grab-size` | `16px` | Length of the grab handle |
+| `--handle-grab-thickness` | `8px` | Thickness of the grab handle |
+
+### Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `ixfx-split-collapsed` | `{ panel: 'A' \| 'B', collapsed: boolean }` | Fired when a panel is collapsed or uncollapsed via drag. |
+
+---
+
+## Basic Usage
+
+### Vertical Split (Left/Right)
+
+```html
+<ixfx-twosplit-layout layout="vertical" style="width: 100%; height: 400px;">
+  <div slot="a" style="background: var(--surface-3);">Left Panel</div>
+  <div slot="b" style="background: var(--surface-5);">Right Panel</div>
+</ixfx-twosplit-layout>
+```
+
+### Horizontal Split (Top/Bottom)
+
+```html
+<ixfx-twosplit-layout layout="horizontal" style="width: 100%; height: 400px;">
+  <div slot="a" style="background: var(--surface-3);">Top Panel</div>
+  <div slot="b" style="background: var(--surface-5);">Bottom Panel</div>
+</ixfx-twosplit-layout>
+```
+
+### With Fixed Panel
+
+```html
+<!-- Left panel fixed at 200px, right panel takes remaining space -->
+<ixfx-twosplit-layout fixedA layout="vertical" style="width: 100%; height: 400px;">
+  <div slot="a" style="background: var(--surface-3);">Left Panel (200px)</div>
+  <div slot="b" style="background: var(--surface-5);">Right Panel (flexible)</div>
+</ixfx-twosplit-layout>
+```
+
+---
+
+## Collapsible Panels
+
+When `collapsible` is set, dragging a split bar to the edge collapses that panel. The other panel expands to fill the space. Dragging away from the edge uncollapses the panel.
+
+```html
+<ixfx-twosplit-layout collapsible layout="horizontal" style="width: 100%; height: 400px;">
+  <div slot="a" style="background: var(--surface-3);">Top Panel</div>
+  <div slot="b" style="background: var(--surface-5);">Bottom Panel</div>
+</ixfx-twosplit-layout>
+```
+
+### Collapse Events
+
+```javascript
+const split = document.querySelector('ixfx-twosplit-layout[collapsible]');
+
+split.addEventListener('ixfx-split-collapsed', ({ detail }) => {
+  console.log(`Panel ${detail.panel} is now ${detail.collapsed ? 'collapsed' : 'uncollapsed'}`);
+});
+```
+
+---
+
+## Min/Max Size Constraints
+
+Use `minSizeA`, `maxSizeA`, `minSizeB`, and `maxSizeB` to constrain panel sizes:
+
+```html
+<ixfx-twosplit-layout
+  minSizeA="100px"
+  maxSizeA="70%"
+  minSizeB="50px"
+  layout="horizontal"
+  style="width: 100%; height: 400px;">
+  <div slot="a" style="background: var(--surface-3);">Top Panel</div>
+  <div slot="b" style="background: var(--surface-5);">Bottom Panel</div>
+</ixfx-twosplit-layout>
+```
+
+**Constraint rules:**
+- **Min constraints take precedence**: If both panels' minimums exceed 100% combined, they're scaled proportionally
+- **Max constraints are secondary**: If a max constraint conflicts with a min constraint, the max is ignored to satisfy the min
+- **The constrained panel gets clamped**: The other panel receives the remaining space
+
+---
+
+## Nested Splits with Two-Way Corner Resize
+
+When a `ixfx-twosplit-layout` is nested inside slot A of an outer split, a corner zone appears at the intersection of the two split bars. This enables simultaneous resize of both splits.
+
+```
+┌─────────────────┬────────────┐
+│                 │            │
+│   ┌─────────────┤            │
+│   │   Editor    │            │
+│   │             │            │
+│   ├─────────────┤  Sidebar   │
+│   │  Terminal   │            │
+│   │             │            │
+│   └─────────────┘            │
+└─────────────────┴────────────┘
+         ↑
+    Corner Zone
+    (drag here for two-way resize)
+```
+
+### Structure
+
+```html
+<ixfx-twosplit-layout layout="vertical" style="width: 100%; height: 400px;">
+  <!-- Nested split is a direct child of slot A -->
+  <ixfx-twosplit-layout slot="a" layout="horizontal" style="width: 100%; height: 100%;">
+    <div slot="a" style="background: var(--surface);">Editor</div>
+    <div slot="b" style="background: var(--surface-3);">Terminal</div>
+  </ixfx-twosplit-layout>
+  <div slot="b" style="background: var(--surface-5);">Sidebar</div>
+</ixfx-twosplit-layout>
+```
+
+**Note**: For the corner zone to appear, the nested split must be a direct child of slot A (no wrapper elements between the split and slot A).
+
+### Corner Zone Behavior
+
+- **Visual indicator**: A small magenta circle (12px) appears at the intersection point
+- **Cursor change**: Shows `nwse-resize` cursor when hovering over the corner zone (for vertical-outer/horizontal-inner splits)
+- **Two-way resize**: Dragging the corner zone adjusts both the outer vertical split and the inner horizontal split simultaneously
+- **Position tracking**: The corner zone follows the split bars as they move, staying at their intersection
+
+---
+
+## CSS Customisation
+
+### Handle Styling
+
+```css
+ixfx-twosplit-layout {
+  --handle-size: 4px;
+  --handle-colour: var(--surface-4);
+  --handle-hover-colour: var(--surface-6);
+  --handle-active-colour: var(--accent);
+}
+```
+
+### Grab Handle
+
+When `--handle-size` is greater than `5px`, a grab handle appears in the center of the split bar. The grab handle consists of a rectangle with three dots arranged perpendicular to the split direction:
+
+- **Vertical split**: Rectangle with 3 vertical dots (⋮)
+- **Horizontal split**: Rectangle with 3 horizontal dots (⁝)
+
+```css
+ixfx-twosplit-layout {
+  --handle-bg: var(--handle-colour);         /* Rectangle background */
+  --handle-grab-colour: var(--surface-muted-text); /* Dot colour */
+  --handle-grab-dot-size: 3px;               /* Dot diameter */
+  --handle-grab-size: 16px;                 /* Rectangle length */
+  --handle-grab-thickness: 8px;             /* Rectangle thickness */
+}
+```
+
+### Hide Collapsed Panels Completely
+
+```css
+ixfx-twosplit-layout[data-collapsed-a] slot[name="a"] {
+  display: none;
+}
+```
+
+---
+
+## Programmatic Control
+
+### Setting Sizes
+
+```javascript
+const split = document.querySelector('ixfx-twosplit-layout');
+
+// Set to 30% / 70%
+split.sizeA = '30%';
+split.sizeB = '70%';
+
+// Set to fixed pixel widths
+split.fixedA = true;
+split.sizeA = '200px'; // Panel A is 200px
+// Panel B automatically gets remaining space
+
+// Collapse a panel programmatically
+split.collapsedA = true;
+split.collapsedB = false;
+```
+
+### Reading State
+
+```javascript
+console.log('Panel A size:', split.sizeA);
+console.log('Panel B size:', split.sizeB);
+console.log('Is A collapsed?', split.collapsedA);
+console.log('Is B collapsed?', split.collapsedB);
+```
+
+---
+
+## Implementation Notes
+
+- Uses Shadow DOM for style encapsulation
+- Slots use `display: block` and `overflow: hidden` by default
+- When no size is specified for a panel, it defaults to `auto` (fill remaining space)
+- When both sizes are empty, both default to `50%`
+- The split bar is `flex-shrink: 0` to prevent it from collapsing
+- Nested splits detect their parent through slot assignment and automatically enable corner resize

package/docs-user/user-catalog.md

@@ -27,6 +27,9 @@ Combines a range slider with a label and optional input field for precise value
 ### ixfx-labelled-radial-input
 A circular input control for selecting values in a rotational manner. Ideal for color pickers, angle selectors, or any cyclical value selection.
 
+### ixfx-labelled-slider-input
+Combines a linear SVG slider with a label and optional input field for precise value entry. Use when users need to select from a continuous range of values with both coarse and fine control, with marker and value-bar styling options.
+
 ### ixfx-ac-text
 An autocomplete text input that suggests options as the user type. Perfect for search boxes, tag entry, or any field where you want to assist users with predefined options.
 
@@ -120,8 +123,11 @@ A meta-component that renders a typed item list using any sub-component you supp
 
 ## Layout Components
 
+### ixfx-dock-host / ixfx-dock-panel
+A dockable panel system in the style of VS Code. Author a flat pool of `ixfx-dock-panel` elements inside an `ixfx-dock-host`; drag panels by titlebar or tab to tab them together, split panels horizontally/vertically, or drag between hosts. Layouts serialize via `saveLayout()` / `loadLayout()` for persistence. Drop restrictions are available per host (`accepts` attribute, `canAccept()` callback) and per panel (`accepts`). Use for IDE-like workspaces, dashboards, or any composable multi-panel UI.
+
 ### ixfx-split-layout
-A resizable split pane that allows users to adjust the proportion between two adjacent sections. Use for editor layouts, file explorers with previews, or any interface where users need to control space allocation.
+A resizable n-way split pane that allows users to adjust the proportion between adjacent sections. Supports `row`/`column` directions, positional `sizes` weights, per-child `size`/`min`/`collapsed` attributes, and nested splits for cross-axis layouts. Use for editor layouts, file explorers with previews, or any interface where users need to control space allocation.
 
 ### ixfx-snap-container
 A container that snaps child elements to specific positions or alignments. Useful for creating custom layouts, dashboards, or any interface where precise element positioning is needed.
@@ -186,6 +192,7 @@ When choosing components for your application, consider these patterns:
 - Use `ixfx-checkbox` for binary options
 - Use `ixfx-radio-group` for mutually exclusive choices
 - Use `ixfx-labelled-range-input` for numerical parameters with labels
+- Use `ixfx-labelled-slider-input` for numerical parameters with labels and slider styling options
 - Use `ixfx-toggle-switch` for settings with clear on/off states
 - Use `ixfx-range-input` or `ixfx-slider-input` for plain slider-style numeric entry
 - Use `ixfx-editable-number` for values that benefit from both typing and dragging

package/docs-user/user-theming.md

@@ -116,6 +116,113 @@ Customize individual components using inline styles:
 </ixfx-button>
 ```
 
+## Icons
+
+### Built-in Icons
+
+The library ships with a set of SVG icons registered by default. All use `fill="currentColor"` so they inherit CSS color automatically.
+
+| Name | Description |
+|---|---|
+| `add` | Plus / add icon |
+| `caret-right` | Caret pointing right (used by tree expand indicators) |
+| `check` | Checkmark |
+| `chevron-down` | Chevron pointing down (used by split-button dropdowns) |
+| `chevron-right` | Chevron pointing right |
+| `close` | X / close icon |
+| `error` | Error/warning icon |
+| `folder-up` | Folder with up-arrow |
+| `info` | Info icon |
+| `warning` | Warning icon |
+
+### `<ixfx-icon>` Element
+
+Render any registered icon by name:
+
+```html
+<ixfx-icon name="check"></ixfx-icon>
+<ixfx-icon name="chevron-down" size="24"></ixfx-icon>
+<ixfx-icon name="close" label="Dismiss dialog"></ixfx-icon>
+<ixfx-icon name="check" rotate="45deg"></ixfx-icon>
+<ixfx-icon name="settings" prominence></ixfx-icon>
+```
+
+**Attributes:**
+
+| Attribute | Type | Description |
+|---|---|---|
+| `name` | `string` | Registry name of the icon |
+| `size` | `number` | Fixed pixel size |
+| `label` | `string` | Accessible label; adds `aria-label` |
+| `rotate` | `string` | CSS angle (e.g. `"90deg"`) |
+| `prominence` | `boolean` | Enables idle/hover/disabled opacity |
+
+Icon sizing is `1em × 1em` by default — override with CSS or the `size` attribute:
+
+```css
+ixfx-icon { width: 24px; height: 24px; }
+```
+
+### Adding a Custom SVG Icon
+
+Register an icon before use — it can be done at any time; components update automatically.
+
+```ts
+import { registerIcon } from '@ixfx/components';
+
+registerIcon('my-logo', `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 2L4 12h5v8h6v-8h5L12 2z"/>
+</svg>`);
+```
+
+```html
+<ixfx-icon name="my-logo"></ixfx-icon>
+```
+
+### Font Icons (Icon Fonts)
+
+Icon fonts such as Nerd Fonts are supported alongside SVG icons. Set the font family globally once, then register individual icons by name and code point.
+
+```ts
+import { setIconFont, registerFontIcon } from '@ixfx/components';
+
+// Set the font family (load it via CSS first)
+setIconFont('"Font Awesome 6 Free"');
+
+// Register a gear icon by code point
+registerFontIcon('gear', 0xf013);
+
+// Or by literal character
+registerFontIcon('heart', '\uf004');
+```
+
+Use font icons exactly like SVG icons — no API change:
+
+```html
+<ixfx-icon name="gear"></ixfx-icon>
+<ixfx-button icon="gear">Settings</ixfx-button>
+```
+
+Font icons inherit `color` and size to `1em` automatically. Rotation and prominence attributes work the same as for SVG icons.
+
+> **Different fonts, different code points.** Icon fonts use different Private Use Area code points for the same glyphs. Switching fonts requires re-registering icons with the appropriate code points for that font. See the [icons demo](/demo/loader.html?demo=icons) for a live example of font switching.
+
+### Overriding a Built-in Icon
+
+Both `registerIcon` (SVG) and `registerFontIcon` overwrite any existing entry for the same name. To swap a built-in icon globally:
+
+```ts
+// Replace the built-in chevron-down with a custom SVG
+registerIcon('chevron-down', `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M7 10l5 5 5-5H7z"/>
+</svg>`);
+
+// Replace it with a font icon instead
+registerFontIcon('chevron-down', 0xe0b0);
+```
+
+All components that use the overridden name update automatically on the next render.
+
 ## Complete Base Theme Reference
 
 Below is the full set of CSS variables used by the library. Copy this into your own stylesheet as a starting point and override the values you want to change.
@@ -375,5 +482,7 @@ If you're upgrading from previous versions:
 
 For implementation details, see:
 - [`docs/infra-theming.md`](infra-theming.md) - Internal theming specification
+- [`docs-user/icons.md`](/docs-user/icons.md) - Full icon registry reference
+- [`demo/loader.html?demo=icons`](/demo/loader.html?demo=icons) - Interactive icons demo
 - [`src/style.css`] - Base theme definitions
 - [`demo/shared/`] - Example theme implementations

package/llms.txt

@@ -19,6 +19,8 @@ import '@ixfx/components/data-grid';
 - [crumbs](docs-user/crumbs.md): Breadcrumb navigation with lazy-loading child support. Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`, allowing easy swapping between the two components.
 - [data-display](docs-user/data-display.md): A debug data display component that renders key-value pairs from a plain object. Supports 7 inline render modes (`led`, `plot`, `plot-xy`, `plot-heat`, `plot-histogram`, `time-elapsed`, `hide`) via `c
 - [data-grid](docs-user/data-grid.md): A virtualised data grid with sortable/resizable/reorderable columns, single/multi selection, grouping, and inline cell editing. Handles 200+ rows with windowed rendering and keyboard navigation.
+- [detail-list](docs-user/detail-list.md): A list that scales horizontally, not vertically. Items are laid out in equal-width columns; they flow top→bottom down a column, then wrap to the top of the next column to the right. The component has 
+- [dock](docs-user/dock.md): Dockable, movable panels like VS Code / Photoshop. Drag a panel by its
 - [editable-label](docs-user/editable-label.md): Inline editable text components. `ixfx-editable-number` extends `ixfx-editable-label` with drag-to-adjust and fill-bar visualization.
 - [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
 - [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
@@ -26,6 +28,7 @@ import '@ixfx/components/data-grid';
 - [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.
 - [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 
 - [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
+- [labelled-slider-input](docs-user/labelled-slider-input.md): A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and ed
 - [led](docs-user/led.md): An LED indicator component with color mixing and optional blinking animation.
 - [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
@@ -42,13 +45,15 @@ import '@ixfx/components/data-grid';
 - [slider-input](docs-user/slider-input.md): A linear SVG-based slider. Supports horizontal and vertical orientations, three value modes (single/dual/triple), three single-mode styles (range/bipolar/unipolar), triangle/needle/dot markers, and `v
 - [snackbar](docs-user/snackbar.md): A small floating toolbar anchored in visual proximity to another element on the page (the "target"), built on the native Popover and CSS Anchor Positioning APIs.
 - [snap-container](docs-user/snap-container.md): A container that positions its child element at configurable snap positions along an axis. The child can be dragged, clicked to snap, or controlled via keyboard.
-- [split-layout](docs-user/split-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
+- [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
 - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
+- [titlebar](docs-user/titlebar.md): Standalone titlebar chrome extracted from `ixfx-panel`: title text, icon, toolbar slot, close button and an optional collapse/expand caret. Use it when you need a panel-style header without the collap
 - [toolbar](docs-user/toolbar.md): Two components for building toolbars:
 - [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
+- [twosplit-layout](docs-user/twosplit-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
 - [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically.
 - [xy-pad](docs-user/xy-pad.md): A 2D touch-friendly XY pad for controlling two parameters simultaneously. Each axis supports independent linear/logarithmic scaling.

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
   "license": "MIT",
   "keywords": ["web-components", "lit", "ixfx", "ui"],
-  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/dist/button-Bn0BuLpO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-Bn0BuLpO.js","names":["customElement"],"sources":["../src/button/button-styles.ts","../src/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n    vertical-align: middle;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  button {\n    cursor: pointer;\n    appearance: none;\n    background: var(--surface-4, #ccc);\n    color: var(--surface-3-text, #000);\n    border: var(--border, 1px solid #999);\n    outline: var(--ixfx-button-outline, none);\n    border-radius: var(--radius-xl, 8px);\n    corner-shape: superellipse(1);\n    padding: var(--space-m, 8px) var(--space-l, 12px);\n    font-family: var(--font-family, inherit);\n    font-size: var(--text-m, 14px);\n    margin: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    box-shadow: \n      var(--ixfx-button-shade, none),\n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);\n    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  button:hover:not(:disabled) {\n    background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n    border-color: var(--accent, #666);\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), \n      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--surface-2, #aaa);\n    transform: translateY(1px);\n    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);\n  }\n\n  .button-icon {\n    display: var(--ixfx-button-hide-icon, inline-flex);\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button-label {\n    white-space: nowrap;\n  }\n\n  :host([has-icon]) .button-label {\n    display: var(--ixfx-button-hide-label, inline);\n  }\n\n  :host([hide-label]) .button-label {\n    display: none;\n  }\n\n  :host([hide-icon]) .button-icon {\n    display: none;\n  }\n\n  :host([subtle]) button {\n    background: color-mix(in oklch, var(--surface-4, #ccc) 40%, transparent);\n  }\n\n  :host([subtle]) button:hover:not(:disabled),\n  :host([subtle]) button:focus-visible:not(:disabled) {\n    background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);\n  }\n`;\n","import { html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { getIcon } from \"../icons/index.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\nimport { buttonStyles } from \"./button-styles.js\";\n\n@customElement(`ixfx-button`)\nexport class ButtonElement extends LitElement {\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  icon?: string;\n\n  @property({ type: Boolean, attribute: `hide-icon`, reflect: true })\n  hideIcon = false;\n\n  @property({ type: Boolean, attribute: `hide-label`, reflect: true })\n  hideLabel = false;\n\n  @property({ type: Boolean, attribute: `has-icon`, reflect: true })\n  hasIcon = false;\n\n  @property({ type: Boolean, reflect: true })\n  subtle = false;\n\n  protected _renderIcon() {\n    if (this.hideIcon || !this.icon)\n      return nothing;\n\n    if (this.icon.startsWith(`<svg`)) {\n      return html`<span class=\"button-icon\">${unsafeHTML(this.icon)}</span>`;\n    }\n\n    const svg = getIcon(this.icon);\n\n    if (!svg)\n      return nothing;\n\n    return html`<ixfx-icon class=\"button-icon\" name=\"${this.icon}\"></ixfx-icon>`;\n  }\n\n  protected render() {\n    this.hasIcon = !this.hideIcon && !!this.icon;\n    const label = this.hideLabel\n      ? nothing\n      : html`<span class=\"button-label\"><slot></slot></span>`;\n    return html`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;\n  }\n\n  static styles = [\n    prominenceStyles,\n    buttonStyles,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-button\": ButtonElement;\n  }\n}\n"],"mappings":";;;;;;;AAEA,MAAa,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOxB,IAAM,gBAAN,MAAM,sBAAsB,WAAW;;;EAEjC,KAAA,WAAA;EAMA,KAAA,WAAA;EAGC,KAAA,YAAA;EAGF,KAAA,UAAA;EAGD,KAAA,SAAA;;CAET,cAAwB;EACtB,IAAI,KAAK,YAAY,CAAC,KAAK,MACzB,OAAO;EAET,IAAI,KAAK,KAAK,WAAW,MAAM,GAC7B,OAAO,IAAI,6BAA6B,WAAW,KAAK,IAAI,EAAE;EAKhE,IAAI,CAFQ,QAAQ,KAAK,IAElB,GACL,OAAO;EAET,OAAO,IAAI,wCAAwC,KAAK,KAAK;CAC/D;CAEA,SAAmB;EACjB,KAAK,UAAU,CAAC,KAAK,YAAY,CAAC,CAAC,KAAK;EACxC,MAAM,QAAQ,KAAK,YACf,UACA,IAAI;EACR,OAAO,IAAI,qBAAqB,KAAK,SAAS,GAAG,KAAK,YAAY,IAAI,MAAM;CAC9E;;EAEgB,KAAA,SAAA,CACd,kBACA,YACF;;AACF;AA9CG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAGjE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AAGlE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,WAAA,KAAA,CAAA;AAGhE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AAjB3CA,gBAAAA,WAAAA,CAAAA,kBAAc,aAAa,CAAA,GAAA,aAAA"}