@ixfx/components 0.14.6 → 0.15.0

package/bundle/style.css

@@ -43,8 +43,8 @@
   --radius-m: 4px;
   --radius-l: 6px;
   --radius-xl: 8px;
-  --shadow-m: light-dark(0 2px 8px #0000001a, 0 4px 12px #0000004d);
-  --shadow-l: light-dark(0 4px 16px #00000026, 0 4px 24px #00000080);
+  --shadow-m: 0 3px 10px light-dark(#0000001a, #0000004d);
+  --shadow-l: 0 4px 20px light-dark(#00000026, #00000080);
   --disabled-opacity: .5;
   --transition: .15s ease-out;
   --prominence-idle-opacity: light-dark(.55, .6);
@@ -96,83 +96,3 @@
 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/ac-text.d.ts

@@ -1,4 +1,4 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/ac-text/ac-text.d.ts
 type AcTextItem = {

package/dist/{ac-token--_vCHXWw.d.ts → ac-token-Cq7lsYf-.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/ac-token/types.d.ts
@@ -10,6 +10,14 @@ type AcTokenItem = {
   readonly data?: unknown;
   readonly positions?: ReadonlySet<number>;
 };
+/** Per-token visual overrides. Any CSS colour value. Ignored while the chip is selected. */
+type AcTokenStyle = {
+  readonly background?: string;
+  readonly color?: string;
+  readonly borderColor?: string;
+};
+/** Given a committed token, returns style overrides for its chip (or undefined for default). */
+type AcTokenStyleFn = (item: AcTokenItem) => AcTokenStyle | undefined;
 type AcTokenizerFn = (text: string) => string[];
 type AcTokensChangeDetail = {
   readonly tokens: readonly AcTokenItem[];
@@ -54,6 +62,12 @@ declare class AcTokenElement extends LitElement {
   completionProvider: IDataProvider<string, AcTokenItem> | undefined;
   /** Custom tokenizer — defaults to splitting on space, comma, semicolon. */
   tokenizer: AcTokenizerFn | undefined;
+  /**
+   * Optional per-token styling. Called when rendering each committed chip;
+   * return `{ background, color, borderColor }` overrides, or undefined for
+   * the default look. Selected chips keep the selected style.
+   */
+  tokenStyle: AcTokenStyleFn | undefined;
   /** Placeholder text shown when no tokens or draft text are present. */
   placeholder: string;
   /** Maximum number of query results to cache (LRU). */
@@ -103,4 +117,4 @@ interface AcTokenElement {
   addEventListener: (<K extends keyof AcTokenElementEventMap>(type: K, listener: (this: AcTokenElement, event: AcTokenElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
 }
 //#endregion
-export { AcTokenItem as a, AcTokenizerFn as c, AcTokenElementEventMap as i, AcTokensChangeDetail as l, AcTokenAddDetail as n, AcTokenRemoveDetail as o, AcTokenAddEvent as r, AcTokenRemoveEvent as s, AcTokenElement as t, AcTokensChangeEvent as u };
+export { AcTokenItem as a, AcTokenStyle as c, AcTokensChangeDetail as d, AcTokensChangeEvent as f, AcTokenElementEventMap as i, AcTokenStyleFn as l, AcTokenAddDetail as n, AcTokenRemoveDetail as o, AcTokenAddEvent as r, AcTokenRemoveEvent as s, AcTokenElement as t, AcTokenizerFn as u };

package/dist/ac-token.d.ts

@@ -1,2 +1,2 @@
-import { a as AcTokenItem, c as AcTokenizerFn, i as AcTokenElementEventMap, l as AcTokensChangeDetail, n as AcTokenAddDetail, o as AcTokenRemoveDetail, r as AcTokenAddEvent, s as AcTokenRemoveEvent, t as AcTokenElement, u as AcTokensChangeEvent } from "./ac-token--_vCHXWw.js";
-export { type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent };
+import { a as AcTokenItem, c as AcTokenStyle, d as AcTokensChangeDetail, f as AcTokensChangeEvent, i as AcTokenElementEventMap, l as AcTokenStyleFn, n as AcTokenAddDetail, o as AcTokenRemoveDetail, r as AcTokenAddEvent, s as AcTokenRemoveEvent, t as AcTokenElement, u as AcTokenizerFn } from "./ac-token-Cq7lsYf-.js";
+export { type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenStyle, type AcTokenStyleFn, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent };

package/dist/ac-token.js

@@ -7,6 +7,7 @@ import { t as DataController } from "./data-controller-DOlmqNKb.js";
 import { m as createAcCompletionProvider } from "./incr-search-JIhwB49y.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 //#region src/ac-token/ac-token.ts
 const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
 function makeLruCache(maxSize) {
@@ -370,9 +371,15 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 	}
 	#renderChip(item, index) {
 		const isSelected = this._selectedTokenIndex === index;
+		const style = isSelected ? void 0 : this.tokenStyle?.(item);
 		return html`
       <span
         class="token-chip ${isSelected ? `selected` : ``}"
+        style=${styleMap({
+			"background": style?.background,
+			"color": style?.color,
+			"border-color": style?.borderColor
+		})}
         title=${item.subLabel ?? nothing}
         @pointerdown=${(e) => this.#onChipPointerDown(e, index)}
       >
@@ -622,6 +629,7 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 };
 __decorate([property({ type: Object })], AcTokenElement.prototype, "completionProvider", void 0);
 __decorate([property({ type: Object })], AcTokenElement.prototype, "tokenizer", void 0);
+__decorate([property({ attribute: false })], AcTokenElement.prototype, "tokenStyle", void 0);
 __decorate([property({ type: String })], AcTokenElement.prototype, "placeholder", void 0);
 __decorate([property({
 	type: Number,

package/dist/{button-BYuf72aR.d.ts → button-D1sPDUCM.d.ts}

@@ -43,7 +43,14 @@ declare class ButtonElement extends LitElement {
    * attribute).
    */
   value: boolean;
-  protected _renderIcon(): typeof nothing | import("lit").TemplateResult<1>;
+  /**
+   * What clicking does inside a `<form>` (including `ixfx-form`): `submit`
+   * submits it, `reset` resets it. The default, `button`, does nothing.
+   */
+  type: `button` | `submit` | `reset`;
+  static formAssociated: boolean;
+  formDisabledCallback(disabled: boolean): void;
+  protected _renderIcon(): import("lit").TemplateResult<1> | typeof nothing;
   protected render(): import("lit").TemplateResult<1>;
   static styles: import("lit").CSSResult[];
 }

package/dist/{button-B7mgqtxR.js → button-ikByJJPN.js}

@@ -123,16 +123,33 @@ let ButtonElement = class ButtonElement extends LitElement {
 		this.subtle = false;
 		this.toggleable = false;
 		this.value = false;
+		this.type = `button`;
+		this.#internals = this.attachInternals?.();
+		this.#formDisabled = false;
 		this.#handleClick = () => {
-			if (!this.toggleable || this.disabled) return;
-			this.value = !this.value;
-			this.dispatchEvent(new CustomEvent(`toggle`, {
-				detail: { value: this.value },
-				bubbles: true,
-				composed: true
-			}));
+			if (this.disabled || this.#formDisabled) return;
+			if (this.toggleable) {
+				this.value = !this.value;
+				this.dispatchEvent(new CustomEvent(`toggle`, {
+					detail: { value: this.value },
+					bubbles: true,
+					composed: true
+				}));
+			}
+			const form = this.#internals?.form ?? this.closest(`form`);
+			if (this.type === `submit`) form?.requestSubmit();
+			else if (this.type === `reset`) form?.reset();
 		};
 	}
+	static {
+		this.formAssociated = true;
+	}
+	#internals;
+	#formDisabled;
+	formDisabledCallback(disabled) {
+		this.#formDisabled = disabled;
+		this.requestUpdate();
+	}
 	#handleClick;
 	_renderIcon() {
 		if (this.hideIcon || !this.icon) return nothing;
@@ -143,7 +160,7 @@ let ButtonElement = class ButtonElement extends LitElement {
 	render() {
 		this.hasIcon = !this.hideIcon && !!this.icon;
 		const label = this.hideLabel ? nothing : html`<span class="button-label"><slot></slot></span>`;
-		return html`<button ?disabled=${this.disabled} @click=${this.#handleClick}>${this._renderIcon()}${label}</button>`;
+		return html`<button ?disabled=${this.disabled || this.#formDisabled} @click=${this.#handleClick}>${this._renderIcon()}${label}</button>`;
 	}
 	static {
 		this.styles = [prominenceStyles, buttonStyles];
@@ -178,6 +195,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], ButtonElement.prototype, "value", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], ButtonElement.prototype, "type", void 0);
 ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 export { buttonStyles as n, ButtonElement as t };

package/dist/button.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonElementEventMap, t as ButtonElement } from "./button-BYuf72aR.js";
+import { n as ButtonElementEventMap, t as ButtonElement } from "./button-D1sPDUCM.js";
 export { ButtonElement, ButtonElementEventMap };

package/dist/button.js

@@ -1,2 +1,2 @@
-import { t as ButtonElement } from "./button-B7mgqtxR.js";
+import { t as ButtonElement } from "./button-ikByJJPN.js";
 export { ButtonElement };

package/dist/{colour-picker-BCMU7W7R.js → colour-picker-DwAa6RDh.js}

@@ -595,6 +595,7 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
 		this.size = `medium`;
 		this._isOpen = false;
 		this._everOpened = false;
+		this._hasAction = false;
 		this._pendingL = this.l;
 		this._pendingC = this.c;
 		this._pendingH = this.h;
@@ -662,6 +663,9 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
 				this._popupEl.hidePopover();
 			} catch {}
 		};
+		this._onActionSlotChange = (e) => {
+			this._hasAction = e.target.assignedNodes().length > 0;
+		};
 		this._onSwatchClick = async () => {
 			if (!this._everOpened) {
 				this._everOpened = true;
@@ -714,6 +718,11 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
 		const swatch = this.shadowRoot?.querySelector(`.swatch`);
 		if (swatch) swatch.style.background = swatchBackground(this.l, this.c, this.h, this.a);
 	}
+	close() {
+		try {
+			this._popupEl.hidePopover();
+		} catch {}
+	}
 	_dispatchInput() {
 		const detail = {
 			l: this.l,
@@ -779,11 +788,14 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
             @input=${this._onPickerInput}
             @change=${this._onPickerChange}
           ></ixfx-colour-picker>
-          ${this.mode === `confirm` ? html`
-            <button class="confirm-btn" @click=${this._onConfirm} aria-label="Confirm colour" title="Confirm colour">
-              ${unsafeHTML(ICON_CHECK)}
-            </button>
-          ` : nothing}
+          <div class="footer" ?hidden=${this.mode !== `confirm` && !this._hasAction}>
+            <slot name="action" @slotchange=${this._onActionSlotChange}></slot>
+            ${this.mode === `confirm` ? html`
+              <button class="confirm-btn" @click=${this._onConfirm} aria-label="Confirm colour" title="Confirm colour">
+                ${unsafeHTML(ICON_CHECK)}
+              </button>
+            ` : nothing}
+          </div>
         ` : nothing}
       </div>
     `;
@@ -831,11 +843,22 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
       min-width: var(--cp-popup-min-width);
       min-height: var(--cp-popup-min-height);
 
-      /* CSS anchor positioning — position-anchor set via inline style in JS */
+      /* CSS anchor positioning — position-anchor set via inline style in JS.
+         Preferred: centred horizontally below the swatch. Fallbacks: above,
+         then right/left of the swatch, vertically centred.
+         Centring uses anchor-center (not translate) so the browser's overflow
+         check for the fallbacks sees the popup's real position. */
       position: fixed;
-      position-area: block-end span-inline-start;
-      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      top: anchor(bottom);
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: max-content;
+      height: max-content;
+      justify-self: unsafe anchor-center;
+      align-self: start;
       margin-block-start: 4px;
+      position-try-fallbacks: --cp-above, --cp-right, --cp-left;
 
       padding: var(--space-l);
       z-index: 100;
@@ -847,6 +870,30 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
       transition: opacity 0.12s ease, scale 0.12s ease;
     }
 
+    @position-try --cp-above {
+      inset: 0;
+      bottom: anchor(top);
+      justify-self: unsafe anchor-center;
+      align-self: end;
+      margin: 0 0 4px;
+    }
+
+    @position-try --cp-right {
+      inset: 0;
+      left: anchor(right);
+      justify-self: start;
+      align-self: anchor-center;
+      margin: 0 0 0 4px;
+    }
+
+    @position-try --cp-left {
+      inset: 0;
+      right: anchor(left);
+      justify-self: end;
+      align-self: anchor-center;
+      margin: 0 4px 0 0;
+    }
+
     .popup:popover-open {
       opacity: 1;
       scale: 1;
@@ -857,11 +904,27 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
       display: block;
     }
 
+    .footer {
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      margin-block-start: var(--space-s);
+    }
+
+    .footer[hidden] {
+      display: none;
+    }
+
+    .footer slot[name='action'] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+    }
+
     .confirm-btn {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-block-start: var(--space-s);
       margin-inline-start: auto;
       width: 1.8em;
       height: 1.8em;
@@ -927,6 +990,7 @@ __decorate([property({
 __decorate([property({ type: String })], ColourPickerPopup.prototype, "size", void 0);
 __decorate([state()], ColourPickerPopup.prototype, "_isOpen", void 0);
 __decorate([state()], ColourPickerPopup.prototype, "_everOpened", void 0);
+__decorate([state()], ColourPickerPopup.prototype, "_hasAction", void 0);
 __decorate([query(`.popup`)], ColourPickerPopup.prototype, "_popupEl", void 0);
 __decorate([query(`ixfx-colour-picker`)], ColourPickerPopup.prototype, "_pickerEl", void 0);
 ColourPickerPopup = __decorate([safeCustomElement(`ixfx-colour-picker-popup`)], ColourPickerPopup);

package/dist/colour-picker.d.ts

@@ -1,2 +1,2 @@
-import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-tq6f8007.js";
+import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-Bz3loIAf.js";
 export { ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, type OklchValue };

package/dist/colour-picker.js

@@ -1,2 +1,2 @@
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BCMU7W7R.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-DwAa6RDh.js";
 export { ColourPicker, ColourPickerPopup };

package/dist/crumbs.d.ts

@@ -1,6 +1,6 @@
 import { A as TreeTickleEvent, O as TreeSelectEvent, a as TreeComponent, j as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-CDsYTBDi.js";
 import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
-import "./menu-item-bF6narIz.js";
+import "./menu-item-B0zqw2xp.js";
 import "./index-o-CWDt11.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/crumbs/crumb-navigation.d.ts

package/dist/{data-grid-DmkId8bu.d.ts → data-grid-_BmlhuUu.d.ts}

@@ -1,8 +1,8 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-CDsYTBDi.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-BvoXLnBf.js";
-import "./index-DxyyVqzA.js";
+import { S as ListSearchController } from "./index-ChdhB7RK.js";
+import "./index-cnaRPQPp.js";
 import "./pan-text-CoYmt2qd.js";
 import { LitElement } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";

package/dist/data-grid.d.ts

@@ -1,3 +1,3 @@
 import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-CDsYTBDi.js";
-import { A as DataGridEditorFactory, B as GlobalFormatter, C as BuiltInFormatterName, D as DataGridDataType, E as DataGridColumnMenu, F as DataGridInteractionMode, I as DataGridRowLook, L as DataGridSelectionMode, M as DataGridGetRowKey, N as DataGridGroupBy, O as DataGridEditability, P as DataGridGroupLabel, R as DataGridSortDirection, S as DataGridViewportChangeEvent, T as DataGridColumn, _ as DataGridSelectDetail, a as DataGridColumnReorderDetail, b as DataGridSortEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridRowActivateEvent, h as DataGridRowActivateDetail, i as DataGridCellEditEvent, j as DataGridEditorType, k as DataGridEditorContext, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSelectEvent, w as BuiltInFormatterOptions, x as DataGridViewportChangeDetail, y as DataGridSortDetail, z as DataGridSortState } from "./data-grid-DmkId8bu.js";
+import { A as DataGridEditorFactory, B as GlobalFormatter, C as BuiltInFormatterName, D as DataGridDataType, E as DataGridColumnMenu, F as DataGridInteractionMode, I as DataGridRowLook, L as DataGridSelectionMode, M as DataGridGetRowKey, N as DataGridGroupBy, O as DataGridEditability, P as DataGridGroupLabel, R as DataGridSortDirection, S as DataGridViewportChangeEvent, T as DataGridColumn, _ as DataGridSelectDetail, a as DataGridColumnReorderDetail, b as DataGridSortEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridRowActivateEvent, h as DataGridRowActivateDetail, i as DataGridCellEditEvent, j as DataGridEditorType, k as DataGridEditorContext, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSelectEvent, w as BuiltInFormatterOptions, x as DataGridViewportChangeDetail, y as DataGridSortDetail, z as DataGridSortState } from "./data-grid-_BmlhuUu.js";
 export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, type DataGridRowLook, DataGridSelectDetail, DataGridSelectEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };

package/dist/{detail-list-CmQqeXvp.d.ts → detail-list-DXMnTrYm.d.ts}

@@ -1,11 +1,11 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
 import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-CDsYTBDi.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-BvoXLnBf.js";
+import { S as ListSearchController } from "./index-ChdhB7RK.js";
 import { a as ListGroupEventMap, o as ListGroupInfo, s as ListGroupLabel } from "./grouping-CUKgmkMm.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
-import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-ztrdFvyT.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-BYyb2n4x.js";
 import "./list-group-header.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";

package/dist/detail-list.d.ts

@@ -1,6 +1,6 @@
 import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-CDsYTBDi.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
 import { i as ListGroupChangeEvent, l as ListGroupToggleDetail, n as ListGroupBy, o as ListGroupInfo, r as ListGroupChangeDetail, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
-import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-ztrdFvyT.js";
-import { a as DetailSortComparator, i as DetailGroupBy, n as DetailListElementEventMap, o as DetailSortItem, r as DetailFormatter, s as DetailSortMode, t as DetailListElement } from "./detail-list-CmQqeXvp.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-BYyb2n4x.js";
+import { a as DetailSortComparator, i as DetailGroupBy, n as DetailListElementEventMap, o as DetailSortItem, r as DetailFormatter, s as DetailSortMode, t as DetailListElement } from "./detail-list-DXMnTrYm.js";
 export { type AddItemOptions, type CustomCheckboxOptions, type DetailFormatter, type DetailGroupBy, DetailListElement, DetailListElementEventMap, type DetailSortComparator, type DetailSortItem, type DetailSortMode, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListGroupBy, type ListGroupChangeDetail, type ListGroupChangeEvent, type ListGroupInfo, type ListGroupLabel, type ListGroupToggleDetail, type ListGroupToggleEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListViewportChangeDetail, type ListViewportChangeEvent };

package/dist/{flat-list-BmQBB3ZC.d.ts → flat-list-JfozgW7d.d.ts}

@@ -1,9 +1,9 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { j as TreeDataModel } from "./tree-component-CDsYTBDi.js";
 import { o as TreeNode, r as TreeFilterPredicate, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
 import "./crumbs.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
-import { r as VerticalListElement } from "./vertical-list-ztrdFvyT.js";
+import { r as VerticalListElement } from "./vertical-list-BYyb2n4x.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/flat-list/types.d.ts
 /** How branches and leaves are ordered within one level. */

package/dist/flat-list.d.ts

@@ -1,2 +1,2 @@
-import { _ as FlatListSelectEvent, a as FlatListContextMenuDetail, c as FlatListDropEvent, d as FlatListEditCommitDetail, f as FlatListEditCommitEvent, g as FlatListSelectDetail, h as FlatListNavigateEvent, i as FlatListBranchOrder, l as FlatListEditCancelDetail, m as FlatListNavigateDetail, n as FlatListActivateDetail, o as FlatListContextMenuEvent, p as FlatListElementEventMap, r as FlatListActivateEvent, s as FlatListDropDetail, t as FlatListElement, u as FlatListEditCancelEvent } from "./flat-list-BmQBB3ZC.js";
+import { _ as FlatListSelectEvent, a as FlatListContextMenuDetail, c as FlatListDropEvent, d as FlatListEditCommitDetail, f as FlatListEditCommitEvent, g as FlatListSelectDetail, h as FlatListNavigateEvent, i as FlatListBranchOrder, l as FlatListEditCancelDetail, m as FlatListNavigateDetail, n as FlatListActivateDetail, o as FlatListContextMenuEvent, p as FlatListElementEventMap, r as FlatListActivateEvent, s as FlatListDropDetail, t as FlatListElement, u as FlatListEditCancelEvent } from "./flat-list-JfozgW7d.js";
 export { type FlatListActivateDetail, type FlatListActivateEvent, type FlatListBranchOrder, type FlatListContextMenuDetail, type FlatListContextMenuEvent, type FlatListDropDetail, type FlatListDropEvent, type FlatListEditCancelDetail, type FlatListEditCancelEvent, type FlatListEditCommitDetail, type FlatListEditCommitEvent, FlatListElement, type FlatListElementEventMap, type FlatListNavigateDetail, type FlatListNavigateEvent, type FlatListSelectDetail, type FlatListSelectEvent };

package/dist/form-BGZK3jZd.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from "lit";
+//#region src/form/form-values.d.ts
+type CollectFormValuesOptions = {
+  /** Return numbers (or `null` when empty) for `number` and `range` inputs, instead of strings. */
+  typed?: boolean;
+};
+//#endregion
+//#region src/form/form.d.ts
+/**
+ * Wraps its content in a native `<form>`, so submit, Enter-to-submit,
+ * validation, `FormData` and `form.elements` behave as they do for any form.
+ * Submitting never navigates: listen for the standard `submit` event.
+ */
+declare class FormElement extends LitElement {
+  /** Label justification in the wide layout. Groups can override. */
+  labelAlign: `left` | `right`;
+  /** Skip validation when submitting (like `<form novalidate>`). `reportValidity()` still validates. */
+  noValidate: boolean;
+  private _form?;
+  private _observer?;
+  protected createRenderRoot(): this;
+  /** The native form element that holds the content. */
+  get form(): HTMLFormElement;
+  /** Native controls in the form. Components with their own shadow root are not included. */
+  get elements(): HTMLFormControlsCollection;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(): void;
+  /** Moves everything into the native form. Nodes (not just elements) move so Lit's markers stay with their content. */
+  private _adoptChildren;
+  /**
+   * Browsers only submit on Enter when the form has a native submit button
+   * or a single text field. Cover the other cases (e.g. an `ixfx-button`).
+   */
+  private readonly _onKeydown;
+  /** Validates (unless `novalidate`), then fires `submit`. */
+  requestSubmit(): void;
+  /** Resets native controls. Components with their own shadow root are not reset. */
+  reset(): void;
+  /** True if all native controls are valid. Shows nothing. */
+  checkValidity(): boolean;
+  /** True if all native controls are valid. Otherwise shows the browser's message on the first invalid one. */
+  reportValidity(): boolean;
+  /** Values of all named controls, including components with their own shadow root. Numbers are strings unless `typed`. */
+  getValues(options?: CollectFormValuesOptions): Record<string, unknown>;
+  setValues(data: Record<string, unknown>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-form': FormElement;
+  }
+}
+//#endregion
+export { FormElement as t };