@ixfx/components 0.5.1 → 0.5.2

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

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

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
+import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.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(): import("lit").TemplateResult<1> | typeof nothing;
+  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
   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,uCAAqB,2BAAA;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,gCAAqB,wBAAA;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-BUB5SICW.js";
+import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
 export { LabelledRangeInput };

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

@@ -1,4 +1,4 @@
-import "./icon-BUwP1CZ1.js";
+import "./icon-DpA9x2Ve.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-CQ4Qg731.d.ts.map
+//# sourceMappingURL=menu-item-DSyf9f_L.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"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"}

package/dist/menu.d.ts

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

package/dist/style.css

@@ -141,3 +141,83 @@
 ixfx-grouped-item-lister {
   display: block;
 }
+ixfx-form {
+  display: block;
+}
+
+ixfx-form-group {
+  display: block;
+  container-type: inline-size;
+}
+
+ixfx-form-group fieldset {
+  gap: var(--space-m) var(--space-l);
+  margin: 0;
+  border: 0;
+  grid-template-columns: 1fr;
+  min-inline-size: 0;
+  margin-block-start: var(--space-m);
+  margin-block-end: var(--space-m);
+  padding: 0;
+  display: grid;
+}
+
+ixfx-form-group fieldset > legend:empty {
+  display: none;
+}
+
+ixfx-form-group fieldset > legend {
+  font-weight: var(--font-weight-bold);
+  grid-column: 1 / -1;
+  margin-block-start: var(--space-m);
+  margin-block-end: var(--space-s);
+  padding: 0;
+}
+
+ixfx-form-group fieldset > :not(ixfx-form-part) {
+  grid-column: 1 / -1;
+}
+
+ixfx-form-part {
+  grid-column: 1 / -1;
+  grid-template-columns: 1fr;
+  align-items: start;
+  display: grid;
+}
+
+ixfx-form-part > label {
+  font-size: var(--ixfx-form-label-font-size, var(--text-s));
+  font-weight: var(--ixfx-form-label-font-weight, inherit);
+  font-family: var(--ixfx-form-label-font-family, inherit);
+  color: var(--ixfx-form-label-color, inherit);
+  text-transform: var(--ixfx-form-label-text-transform, uppercase);
+  padding-bottom: var(--space-xs);
+  grid-area: 1 / 1;
+}
+
+ixfx-form-part > input, ixfx-form-part > select, ixfx-form-part > textarea {
+  grid-area: 2 / 1;
+}
+
+@container (width >= 30rem) {
+  ixfx-form-group fieldset {
+    grid-template-columns: max-content 1fr;
+  }
+
+  ixfx-form-part {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: baseline;
+    display: grid;
+  }
+
+  ixfx-form-part > label {
+    padding-right: var(--space-xs);
+    grid-area: 1 / 1;
+    padding-bottom: 0;
+  }
+
+  ixfx-form-part > input, ixfx-form-part > select, ixfx-form-part > textarea {
+    grid-area: 1 / 2;
+  }
+}

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

@@ -1,4 +1,4 @@
-import "./icon-BUwP1CZ1.js";
+import "./icon-DpA9x2Ve.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-VtWT-_FG.d.ts.map
+//# sourceMappingURL=tab-list-BohmbvqF.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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-VtWT-_FG.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-BohmbvqF.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/docs-user/README.md

@@ -12,6 +12,7 @@ This directory contains documentation for each component and some architectural
 - [crumbs](./crumbs.md)
 - [data-display](./data-display.md)
 - [editable-label](./editable-label.md)
+- [form](./form.md)
 - [grouped-item-lister](./grouped-item-lister.md)
 - [icons](./icons.md)
 - [incr-search](./incr-search.md)

package/docs-user/form.md

@@ -0,0 +1,108 @@
+# Form layout components
+
+Primitives for typical form layout with responsive label positioning and data binding.
+
+---
+
+## `ixfx-form`
+
+Main container for form sections. Provides `getValues()` and `setValues()` methods for data binding.
+
+```html
+<ixfx-form>
+  <ixfx-form-group label="Section A">
+    <p>Preamble text for section A...</p>
+    <ixfx-form-part label="Some text">
+      <input type="text" name="input1" />
+    </ixfx-form-part>
+    <ixfx-form-part label="Some other text">
+      <input type="text" name="input2" />
+    </ixfx-form-part>
+  </ixfx-form-group>
+</ixfx-form>
+```
+
+### Properties / attributes
+
+`ixfx-form` has no attributes — it is a pure layout and data-binding container.
+
+### Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `getValues()` | `Record<string, unknown>` | Collects values from all named inputs within the form |
+| `setValues(data)` | `void` | Applies values to named inputs. Keys absent from `data` are left untouched. |
+
+### Value collection rules
+
+- Native `<input type=radio>` sharing a `name` → value of the checked one
+- Native/checked-bearing checkbox → boolean
+- `<select multiple>` → array of selected values
+- Everything else with a `.value` property → used as-is
+
+---
+
+## `ixfx-form-group`
+
+A section within the form, backed by a `<fieldset>`/`<legend>` for proper accessibility semantics.
+
+```html
+<ixfx-form-group label="Personal Information">
+  <ixfx-form-part label="Full Name">
+    <input type="text" name="name" />
+  </ixfx-form-part>
+  <ixfx-form-part label="Email">
+    <input type="email" name="email" />
+  </ixfx-form-part>
+</ixfx-form-group>
+```
+
+### Properties / attributes
+
+| Attribute / Property | Type   | Default | Description |
+|---------------------|--------|---------|-------------|
+| `label`            | string | `''`    | Section heading text |
+
+---
+
+## `ixfx-form-part`
+
+Wraps a form control with a label. Uses light DOM so the `<label for>` natively associates with the slotted input.
+
+```html
+<ixfx-form-part label="Username">
+  <input type="text" name="username" />
+</ixfx-form-part>
+```
+
+### Properties / attributes
+
+| Attribute / Property | Type   | Default | Description |
+|---------------------|--------|---------|-------------|
+| `label`            | string | `''`    | Label text displayed for the control |
+
+### How it works
+
+`ixfx-form-part` generates an `<label for="...">` element that is associated with the first control-like child (`<input>`, `<select>`, `<textarea>`, or element with a `name` attribute). The association works natively because both elements live in the same light DOM tree — no shadow boundary to work around.
+
+An `id` is generated for the control if it doesn't already have one.
+
+---
+
+## Responsive behaviour
+
+The layout switches between two modes based on available width (via CSS container queries):
+
+**Narrow (< 30rem):** Label appears above the input, single-column stacked layout.
+
+**Wide (≥ 30rem):** Label appears to the left of the input, two-column grid. All labels in a group share the width of the widest label (right-justified).
+
+Resize the container to see the transition.
+
+---
+
+## TypeScript types
+
+```ts
+import type { FormElement, FormGroupElement, FormPartElement } from 'ixfxfun-components';
+```

package/docs-user/tabs.md

@@ -27,10 +27,18 @@ Wire them together:
 const tabList = document.querySelector('ixfx-tab-list');
 const tabPanels = document.querySelector('ixfx-tab-panels');
 tabList.addEventListener('change', e => {
-  tabPanels.selectPanel(e.detail.selected);
+  tabPanels.selectPanel(e.detail.for);
 });
 ```
 
+Select a tab programmatically — same effect as clicking it (header + content):
+
+```js
+tabPanels.syncWithList(tabList);
+tabPanels.selectTab('Home');        // by label text
+tabPanels.selectTab('panel-home');  // by the panel id a tab's `for` points at
+```
+
 ---
 
 ## `ixfx-tab-list`
@@ -252,4 +260,5 @@ 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 |
-| `syncWithList(el)`  | `TabListElement` | `void` | Sync panel selection to tab list |
+| `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 |

package/package.json

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

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

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