@ixfx/components 0.14.7 → 0.15.1

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/{button-BYuf72aR.d.ts → button-N92DKoWb.d.ts}

@@ -43,6 +43,13 @@ declare class ButtonElement extends LitElement {
    * attribute).
    */
   value: boolean;
+  /**
+   * 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(): typeof nothing | import("lit").TemplateResult<1>;
   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-N92DKoWb.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-DN2BWctP.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/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 };