@ixfx/components 0.5.2 → 0.5.3

package/dist/{labelled-input-base-DiTme1JO.d.ts → labelled-input-base-Dp_9KP0G.d.ts}

@@ -33,9 +33,9 @@ declare abstract class LabelledInputBase extends LitElement {
     value: number;
   }>) => void;
   protected _syncValue(v: number): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   updated(changedProperties: Map<string, unknown>): void;
 }
 //#endregion
 export { LabelledInputBase as t };
-//# sourceMappingURL=labelled-input-base-DiTme1JO.d.ts.map
+//# sourceMappingURL=labelled-input-base-Dp_9KP0G.d.ts.map

package/dist/{labelled-input-base-DiTme1JO.d.ts.map → labelled-input-base-Dp_9KP0G.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"labelled-input-base-DiTme1JO.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,gCAAqB,wBAAA;EAuBtB,QAAQ,mBAAmB"}
+{"version":3,"file":"labelled-input-base-Dp_9KP0G.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,uCAAqB,2BAAA;EAuBtB,QAAQ,mBAAmB"}

package/dist/labelled-radial-input.d.ts

@@ -1,4 +1,4 @@
-import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
+import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
 import { i as MarkerStyle, l as ValueMode } from "./radial-input-BhZeyyP-.js";
 import { CSSResultGroup, nothing } from "lit";
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
   private _isWide;
   private _getEffectivePrecision;
   protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   render(): import("lit").TemplateResult<1>;
   private _getTooltipValue;
   static styles: CSSResultGroup;

package/dist/labelled-radial-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,gCAAqB,wBAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
+{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,uCAAqB,2BAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}

package/dist/labelled-range-input.d.ts

@@ -1,2 +1,2 @@
-import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
+import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
 export { LabelledRangeInput };

package/dist/{menu-item-DSyf9f_L.d.ts → menu-item-CQ4Qg731.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-DpA9x2Ve.js";
+import "./icon-BUwP1CZ1.js";
 import { LitElement } from "lit";
 import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
 //#region src/menu/menu-container.d.ts
@@ -124,4 +124,4 @@ declare global {
 }
 //#endregion
 export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
-//# sourceMappingURL=menu-item-DSyf9f_L.d.ts.map
+//# sourceMappingURL=menu-item-CQ4Qg731.d.ts.map

package/dist/{menu-item-DSyf9f_L.d.ts.map → menu-item-CQ4Qg731.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"menu-item-DSyf9f_L.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}
+{"version":3,"file":"menu-item-CQ4Qg731.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}

package/dist/menu.d.ts

@@ -1,3 +1,3 @@
-import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-DSyf9f_L.js";
-import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-DfEkTGvT.js";
+import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-CQ4Qg731.js";
+import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-B1UKcA7l.js";
 export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, type MenuFromTreeOptions, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };

package/dist/panel.d.ts

@@ -1,4 +1,4 @@
-import "./icon-DpA9x2Ve.js";
+import "./icon-BUwP1CZ1.js";
 import { LitElement } from "lit";
 //#region src/panel/panel.d.ts
 type PanelOrientation = `horizontal` | `vertical`;

package/dist/{tab-list-BohmbvqF.d.ts → tab-list-VtWT-_FG.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-DpA9x2Ve.js";
+import "./icon-BUwP1CZ1.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 //#region src/tabs/tab-list-item.d.ts
@@ -71,4 +71,4 @@ declare global {
 }
 //#endregion
 export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
-//# sourceMappingURL=tab-list-BohmbvqF.d.ts.map
+//# sourceMappingURL=tab-list-VtWT-_FG.d.ts.map

package/dist/{tab-list-BohmbvqF.d.ts.map → tab-list-VtWT-_FG.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"tab-list-BohmbvqF.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA0GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}
+{"version":3,"file":"tab-list-VtWT-_FG.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA0GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}

package/dist/tabs.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-BohmbvqF.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-VtWT-_FG.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/docs-user/tabs.md

@@ -261,4 +261,98 @@ Manages multiple `ixfx-tab-panel` children, selecting one at a time.
 | `getSelectedElement()` | —      | `TabPanelElement \| undefined` | Get currently selected panel |
 | `selectPanel(id)`  | `string` | `boolean` | Select panel by ID; returns true if found |
 | `selectTab(nameOrTitle)` | `string` | `boolean` | Select a tab as if it was clicked: activates the matching header (via the list associated with `syncWithList`) and shows its panel. `nameOrTitle` can be a tab's label text (case-insensitive) or the panel id its `for` attribute points at. Returns true if a panel was found |
-| `syncWithList(el)`  | `TabListElement` | `void` | Associates this panels element with a tab list, syncing panel selection to it. Must be called before `selectTab()` if the tab header should be activated |
+| `syncWithList(el)`  | `TabListElement` | `void` | Associates this panels element with a tab list, syncing panel selection to it. Must be called before `selectTab()` if the tab header should be activated |
+
+---
+
+## `TabController`
+
+A class that wires an `ixfx-tab-list` to an `ixfx-tab-panels` container. It keeps track of the tabs, mirrors the selected header into the panels, and offers an API to select, add, remove, rename and reorder tabs.
+
+### Setup
+
+```js
+import { TabController } from '@ixfx/components';
+
+const controller = new TabController(
+  document.querySelector('ixfx-tab-list'),
+  document.querySelector('ixfx-tab-panels'),
+  {
+    onSelect: (tab, previous) => console.log(`selected ${tab.id}`),
+  },
+);
+controller.connect();
+```
+
+Call `connect()` to start wiring; `disconnect()` removes listeners, observers and commands.
+
+### Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `commands` | `CommandRegistry \| undefined` | When provided, a command is registered per tab (id = tab id). Invoking `commands.invoke(id)` selects the tab |
+| `onSelect` | `(tab, previous) => void` | Fired after a tab is selected (click or programmatic) |
+| `onAdd` | `(tab) => void` | Fired after a tab is added |
+| `onRemove` | `(tab) => void` | Fired after a tab is removed |
+| `onReorder` | `(tabs) => void` | Fired after tabs are reordered |
+
+### Methods
+
+| Method | Argument | Returns | Description |
+|--------|----------|---------|-------------|
+| `connect()` | — | `void` | Wire the list and panels, register commands |
+| `disconnect()` | — | `void` | Remove listeners, observers and commands |
+| `selectTab(sel)` | `string \| TabListItemElement` | `boolean` | Select a tab as if it was clicked. `sel` may be a tab id, the panel id its `for` points at, its label text (case-insensitive), or the item element |
+| `selectNext()` | — | `boolean` | Select the next tab (wraps) |
+| `selectPrevious()` | — | `boolean` | Select the previous tab (wraps) |
+| `getSelected()` | — | `Tab \| undefined` | Currently selected tab |
+| `getTabs()` | — | `Tab[]` | All managed tabs |
+| `getTab(id)` | `string` | `Tab \| undefined` | Tab by id |
+| `addTab(opts)` | `TabAddOptions` | `Tab` | Add a tab (item + panel) |
+| `removeTab(sel)` | `string \| TabListItemElement` | `boolean` | Remove a tab; selects an adjacent tab if the removed one was selected |
+| `renameTab(sel, label)` | `string \| TabListItemElement, string` | `boolean` | Change a tab's label |
+| `setTabIcon(sel, iconName?)` | `string \| TabListItemElement, string \| undefined` | `boolean` | Set or clear a tab's icon |
+
+A `Tab` is `{ id, forId, item, panel, label, iconName? }` where `item` is the `ixfx-tab-list-item` and `panel` the `ixfx-tab-panel`.
+
+### `TabAddOptions`
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `label` | `string` | *(required)* | Tab label |
+| `id` | `string` | derived from label | id for the tab item |
+| `forId` | `string` | derived from label | id for the panel (and the item's `for`) |
+| `iconName` | `string` | — | Icon to display |
+| `description` | `string` | — | Tooltip description |
+| `closeable` | `boolean` | `true` | Show the close button |
+| `toolbar` | `HTMLElement[]` | — | Elements to slot into `slot="toolbar"` |
+| `content` | `Node \| string \| (panel) => void` | — | Panel content |
+| `select` | `boolean` | `true` | Select the new tab immediately |
+| `index` | `number` | append | Insertion index among existing tabs |
+
+```js
+controller.addTab({
+  label: 'Console',
+  iconName: 'debug',
+  content: (panel) => { panel.append('Console output'); },
+});
+```
+
+### Keyboard shortcuts via commands
+
+Pass a `CommandRegistry` to the options and bind shortcuts with `KeyboardManager`. Command ids equal the tab ids:
+
+```js
+import { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';
+
+const commands = new CommandRegistry();
+const controller = new TabController(list, panels, { commands });
+
+const keyboard = new KeyboardManager();
+keyboard.bind({ key: '1', modifiers: new Set(['alt']), commandId: 'tab-home' });
+keyboard.bind({ key: '2', modifiers: new Set(['alt']), commandId: 'tab-profile' });
+keyboard.onKeyEvent((commandId) => commands.invoke(commandId));
+keyboard.attach(document.body);
+```
+
+Commands are unregistered when their tab is removed or the controller disconnects.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "author": "",
   "license": "ISC",

package/dist/icon-DpA9x2Ve.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-DpA9x2Ve.d.ts","names":[],"sources":["../src/icons/icon.ts"],"mappings":";;;;;;;;;;;;;cAoBa,wBAAwB;;EACvB;EACgB;EAChB;EAC0C;EACU;EAQvD;EAKA;YAKU,iBAAM,wBAAA;YAgBN,QAAQ,SAAS;SAWpB,sBAAM;;QAsChB;YACI;IACR,aAAa"}