@ixfx/components 0.10.3 → 0.10.5

package/dist/ac-text.d.ts

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

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

@@ -1,4 +1,4 @@
-import "./icon-DR_3rSyZ.js";
+import "./icon-CDGprSdE.js";
 import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/ac-token/types.d.ts
@@ -104,4 +104,4 @@ interface AcTokenElement {
 }
 //#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 };
-//# sourceMappingURL=ac-token-TCLAZeVg.d.ts.map
+//# sourceMappingURL=ac-token--_vCHXWw.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ac-token-TCLAZeVg.d.ts","names":[],"sources":["../src/ac-token/types.ts","../src/ac-token/ac-token.ts"],"mappings":";;;;KAAY;WACD;WACA;WACA;WACA;WACA;WACA,YAAY;;KAGX,iBAAiB;KAEjB;WACD,iBAAiB;;KAEhB,sBAAsB,YAAY;KAElC;WACD,MAAM;WACN;;KAEC,kBAAkB,YAAY;KAE9B;WACD,MAAM;WACN;;KAEC,qBAAqB,YAAY;UAE5B;EACf,mBAAmB;EACnB,gBAAgB;EAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;cCgDR,uBAAuB;;;EAGlC,oBAAoB,sBAAsB;;EAI1C,WAAW;;EAIX;;EAIA;;EAIA;;;;;EAOA;;;;;;EAQA;UAEiB;UACA;UACA;UACA;UAET;;MAqBJ,mBAAmB;MAInB,OAAO,gBAAgB;;;;;;;EAW3B,UAAU,gBAAgB;;MAKtB;EAMK;EAKA;YASU,QAAQ,cAAc;YA6btB,wBAAM;SA+BT,sBAAM;;QAkLhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,wBAClC,MAAM,GACN,WAAW,MAAM,gBAAgB,OAAO,uBAAuB,aAC/D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"ac-token--_vCHXWw.d.ts","names":[],"sources":["../src/ac-token/types.ts","../src/ac-token/ac-token.ts"],"mappings":";;;;KAAY;WACD;WACA;WACA;WACA;WACA;WACA,YAAY;;KAGX,iBAAiB;KAEjB;WACD,iBAAiB;;KAEhB,sBAAsB,YAAY;KAElC;WACD,MAAM;WACN;;KAEC,kBAAkB,YAAY;KAE9B;WACD,MAAM;WACN;;KAEC,qBAAqB,YAAY;UAE5B;EACf,mBAAmB;EACnB,gBAAgB;EAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;cCgDR,uBAAuB;;;EAGlC,oBAAoB,sBAAsB;;EAI1C,WAAW;;EAIX;;EAIA;;EAIA;;;;;EAOA;;;;;;EAQA;UAEiB;UACA;UACA;UACA;UAET;;MAqBJ,mBAAmB;MAInB,OAAO,gBAAgB;;;;;;;EAW3B,UAAU,gBAAgB;;MAKtB;EAMK;EAKA;YASU,QAAQ,cAAc;YA6btB,wBAAM;SA+BT,sBAAM;;QAkLhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,wBAClC,MAAM,GACN,WAAW,MAAM,gBAAgB,OAAO,uBAAuB,aAC/D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

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-TCLAZeVg.js";
+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 };

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

@@ -96,6 +96,20 @@ const buttonStyles = css`
   :host([subtle]) button:focus-visible:not(:disabled) {
     background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);
   }
+
+  :host([toggleable]) button:not(:disabled) {
+    opacity: 0.7;
+  }
+
+  :host([toggleable]) button:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+
+  :host([toggleable][value]) button:not(:disabled) {
+    opacity: 1;
+    outline: var(--ixfx-button-toggle-outline-width, 2px) solid var(--ixfx-button-toggle-outline-color, oklch(from var(--accent, #666) l c calc(h + 130)));
+    outline-offset: var(--ixfx-button-toggle-outline-offset, 2px);
+  }
 `;
 //#endregion
 //#region src/button/button.ts
@@ -107,7 +121,19 @@ let ButtonElement = class ButtonElement extends LitElement {
 		this.hideLabel = false;
 		this.hasIcon = false;
 		this.subtle = false;
+		this.toggleable = false;
+		this.value = 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
+			}));
+		};
 	}
+	#handleClick;
 	_renderIcon() {
 		if (this.hideIcon || !this.icon) return nothing;
 		if (this.icon.startsWith(`<svg`)) return html`<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
@@ -117,7 +143,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}>${this._renderIcon()}${label}</button>`;
+		return html`<button ?disabled=${this.disabled} @click=${this.#handleClick}>${this._renderIcon()}${label}</button>`;
 	}
 	static {
 		this.styles = [prominenceStyles, buttonStyles];
@@ -144,8 +170,16 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], ButtonElement.prototype, "subtle", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonElement.prototype, "toggleable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonElement.prototype, "value", void 0);
 ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 export { buttonStyles as n, ButtonElement as t };
 
-//# sourceMappingURL=button-DsFbV4XD.js.map
+//# sourceMappingURL=button-B7mgqtxR.js.map

package/dist/button-B7mgqtxR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-B7mgqtxR.js","names":["#handleClick","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(--ixfx-button-padding-block, var(--space-m, 8px)) var(--ixfx-button-padding-inline, 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  :host([toggleable]) button:not(:disabled) {\n    opacity: 0.7;\n  }\n\n  :host([toggleable]) button:hover:not(:disabled) {\n    opacity: 0.85;\n  }\n\n  :host([toggleable][value]) button:not(:disabled) {\n    opacity: 1;\n    outline: var(--ixfx-button-toggle-outline-width, 2px) solid var(--ixfx-button-toggle-outline-color, oklch(from var(--accent, #666) l c calc(h + 130)));\n    outline-offset: var(--ixfx-button-toggle-outline-offset, 2px);\n  }\n`;\n","/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type { ButtonToggleDetail, ButtonToggleEvent } from \"./types.js\";\nimport { html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { hasIcon } 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  /**\n   * When true, this button acts as a toggle: clicking it flips `value`\n   * between `true` and `false` instead of (or in addition to) firing a\n   * regular click.\n   */\n  @property({ type: Boolean, reflect: true })\n  toggleable = false;\n\n  /**\n   * Current on/off state of a toggleable button. Ignored when `toggleable`\n   * is false. Can be set programmatically or declaratively (`value`\n   * attribute).\n   */\n  @property({ type: Boolean, reflect: true })\n  value = false;\n\n  #handleClick = (): void => {\n    if (!this.toggleable || this.disabled)\n      return;\n    this.value = !this.value;\n    this.dispatchEvent(new CustomEvent<ButtonToggleDetail>(`toggle`, {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\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    if (!hasIcon(this.icon))\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} @click=${this.#handleClick}>${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\nexport interface ButtonElementEventMap {\n  toggle: ButtonToggleEvent;\n}\n\nexport interface ButtonElement {\n  addEventListener: (<K extends keyof ButtonElementEventMap>(\n    type: K,\n    listener: (this: ButtonElement, event: ButtonElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;AAEA,MAAa,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACSxB,IAAM,gBAAN,MAAM,sBAAsB,WAAW;;;EAEjC,KAAA,WAAA;EAMA,KAAA,WAAA;EAGC,KAAA,YAAA;EAGF,KAAA,UAAA;EAGD,KAAA,SAAA;EAQI,KAAA,aAAA;EAQL,KAAA,QAAA;EAEmB,KAAA,qBAAA;GACzB,IAAI,CAAC,KAAK,cAAc,KAAK,UAC3B;GACF,KAAK,QAAQ,CAAC,KAAK;GACnB,KAAK,cAAc,IAAI,YAAgC,UAAU;IAC/D,QAAQ,EAAE,OAAO,KAAK,MAAM;IAC5B,SAAS;IACT,UAAU;GACZ,CAAC,CAAC;EACJ;;CATA;CAWA,cAAwB;EACtB,IAAI,KAAK,YAAY,CAAC,KAAK,MACzB,OAAO;EAET,IAAI,KAAK,KAAK,WAAW,MAAM,GAC7B,OAAO,IAAI,6BAA6B,WAAW,KAAK,IAAI,EAAE;EAGhE,IAAI,CAAC,QAAQ,KAAK,IAAI,GACpB,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,UAAU,KAAKA,aAAa,GAAG,KAAK,YAAY,IAAI,MAAM;CAC1G;;EAEgB,KAAA,SAAA,CACd,kBACA,YACF;;AACF;AAvEG,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;AAQzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAQzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA;AAjC3CC,gBAAAA,WAAAA,CAAAA,kBAAc,aAAa,CAAA,GAAA,aAAA"}

package/dist/button-BYuf72aR.d.ts

@@ -0,0 +1,63 @@
+import { LitElement, nothing } from "lit";
+//#region src/button/types.d.ts
+type SplitButtonSelectDetail = {
+  readonly value: string;
+  readonly label: string;
+};
+type SplitButtonSelectEvent = CustomEvent<SplitButtonSelectDetail>;
+type SwitcherItem = {
+  readonly command: string;
+  readonly label: string;
+  readonly icon: string;
+};
+type PopupItem = {
+  readonly command: string;
+  readonly label: string;
+  readonly icon?: string;
+  readonly disabled?: boolean;
+};
+type ItemsProvider = () => PopupItem[] | Promise<PopupItem[]>;
+type ButtonToggleDetail = {
+  readonly value: boolean;
+};
+type ButtonToggleEvent = CustomEvent<ButtonToggleDetail>;
+//#endregion
+//#region src/button/button.d.ts
+declare class ButtonElement extends LitElement {
+  #private;
+  disabled: boolean;
+  icon?: string;
+  hideIcon: boolean;
+  hideLabel: boolean;
+  hasIcon: boolean;
+  subtle: boolean;
+  /**
+   * When true, this button acts as a toggle: clicking it flips `value`
+   * between `true` and `false` instead of (or in addition to) firing a
+   * regular click.
+   */
+  toggleable: boolean;
+  /**
+   * Current on/off state of a toggleable button. Ignored when `toggleable`
+   * is false. Can be set programmatically or declaratively (`value`
+   * attribute).
+   */
+  value: boolean;
+  protected _renderIcon(): typeof nothing | import("lit").TemplateResult<1>;
+  protected render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-button": ButtonElement;
+  }
+}
+interface ButtonElementEventMap {
+  toggle: ButtonToggleEvent;
+}
+interface ButtonElement {
+  addEventListener: (<K extends keyof ButtonElementEventMap>(type: K, listener: (this: ButtonElement, event: ButtonElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+export { ItemsProvider as a, SplitButtonSelectEvent as c, ButtonToggleEvent as i, SwitcherItem as l, ButtonElementEventMap as n, PopupItem as o, ButtonToggleDetail as r, SplitButtonSelectDetail as s, ButtonElement as t };
+//# sourceMappingURL=button-BYuf72aR.d.ts.map

package/dist/button-BYuf72aR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-BYuf72aR.d.ts","names":[],"sources":["../src/button/types.ts","../src/button/button.ts"],"mappings":";;KAAY;WACD;WACA;;KAGC,yBAAyB,YAAY;KAErC;WACD;WACA;WACA;;KAGC;WACD;WACA;WACA;WACA;;KAGC,sBAAsB,cAAc,QAAQ;KAE5C;WACD;;KAGC,oBAAoB,YAAY;;;cCf/B,sBAAsB;;EAEjC;EAGA;EAGA;EAGA;EAGA;EAGA;;;;;;EAQA;;;;;;EAQA;YAaU,sBAAW,wBAAA;YAcX,wBAAM;SAQT,sBAAM;;QAMP;YACI;IACR,eAAe;;;UAIF;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,uBAClC,MAAM,GACN,WAAW,MAAM,eAAe,OAAO,sBAAsB,aAC7D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/button.d.ts

@@ -1,21 +1,2 @@
-import { LitElement, nothing } from "lit";
-//#region src/button/button.d.ts
-declare class ButtonElement extends LitElement {
-  disabled: boolean;
-  icon?: string;
-  hideIcon: boolean;
-  hideLabel: boolean;
-  hasIcon: boolean;
-  subtle: boolean;
-  protected _renderIcon(): import("lit").TemplateResult<1> | typeof nothing;
-  protected render(): import("lit").TemplateResult<1>;
-  static styles: import("lit").CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "ixfx-button": ButtonElement;
-  }
-}
-//#endregion
-export { ButtonElement };
-//# sourceMappingURL=button.d.ts.map
+import { n as ButtonElementEventMap, t as ButtonElement } from "./button-BYuf72aR.js";
+export { ButtonElement, ButtonElementEventMap };

package/dist/button.js

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

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-BOUaDIW-.js";
+import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-tq6f8007.js";
 export { ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, type OklchValue };

package/dist/crumbs.d.ts

@@ -1,6 +1,6 @@
 import { E as TreeSelectEvent, O as TreeTickleEvent, a as TreeComponent, k as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-DGmKBbpy.js";
 import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Bc23SI94.js";
-import "./menu-item-ZmkXNjek.js";
+import "./menu-item-CZi9vy5O.js";
 import "./narrowed-text.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/crumbs/crumb-navigation.d.ts

package/dist/{data-grid-f9W2uzaR.d.ts → data-grid-DE1_gZNk.d.ts}

@@ -1,7 +1,8 @@
-import "./icon-DR_3rSyZ.js";
+import "./icon-CDGprSdE.js";
 import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-DGmKBbpy.js";
-import { S as ListSearchController } from "./index-BXafRK-_.js";
-import "./index-C59-JEPl.js";
+import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
+import { S as ListSearchController } from "./index-CsaQwNkz.js";
+import "./index-9AhaHIT2.js";
 import "./pan-text-CoYmt2qd.js";
 import { LitElement } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -117,6 +118,9 @@ type DataGridRowActivateDetail = {
   readonly rowIndex: number;
 };
 type DataGridRowActivateEvent = CustomEvent<DataGridRowActivateDetail>;
+/** Same shape as the list components' shared `ListViewportChangeDetail`. */
+type DataGridViewportChangeDetail = ListViewportChangeDetail;
+type DataGridViewportChangeEvent = ListViewportChangeEvent;
 interface DataGridElementEventMap {
   'datagrid-sort': DataGridSortEvent;
   'datagrid-select': DataGridSelectEvent;
@@ -127,6 +131,7 @@ interface DataGridElementEventMap {
   'datagrid-cell-edit': DataGridCellEditEvent;
   'datagrid-group-change': DataGridGroupChangeEvent;
   'datagrid-row-activate': DataGridRowActivateEvent;
+  'datagrid-viewport-change': DataGridViewportChangeEvent;
   'list-native-drag-start': ListNativeDragStartEvent<unknown>;
 }
 declare class DataGridElement extends LitElement {
@@ -330,5 +335,5 @@ interface DataGridElement {
   removeEventListener: (<K extends keyof DataGridElementEventMap>(type: K, listener: (this: DataGridElement, event: DataGridElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
 }
 //#endregion
-export { DataGridGroupBy as A, DataGridColumn as C, DataGridEditorFactory as D, DataGridEditorContext as E, DataGridSortState as F, GlobalFormatter as I, DataGridInteractionMode as M, DataGridSelectionMode as N, DataGridEditorType as O, DataGridSortDirection as P, BuiltInFormatterOptions as S, DataGridEditability as T, DataGridSelectDetail as _, DataGridColumnReorderDetail as a, DataGridSortEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridRowActivateEvent as g, DataGridRowActivateDetail as h, DataGridCellEditEvent as i, DataGridGroupLabel as j, DataGridGetRowKey as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridSelectEvent as v, DataGridColumnMenu as w, BuiltInFormatterName as x, DataGridSortDetail as y };
-//# sourceMappingURL=data-grid-f9W2uzaR.d.ts.map
+export { DataGridEditorType as A, BuiltInFormatterName as C, DataGridEditability as D, DataGridColumnMenu as E, DataGridSelectionMode as F, DataGridSortDirection as I, DataGridSortState as L, DataGridGroupBy as M, DataGridGroupLabel as N, DataGridEditorContext as O, DataGridInteractionMode as P, GlobalFormatter as R, DataGridViewportChangeEvent as S, DataGridColumn as T, DataGridSelectDetail as _, DataGridColumnReorderDetail as a, DataGridSortEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridRowActivateEvent as g, DataGridRowActivateDetail as h, DataGridCellEditEvent as i, DataGridGetRowKey as j, DataGridEditorFactory as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridSelectEvent as v, BuiltInFormatterOptions as w, DataGridViewportChangeDetail as x, DataGridSortDetail as y };
+//# sourceMappingURL=data-grid-DE1_gZNk.d.ts.map

package/dist/data-grid-DE1_gZNk.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-DE1_gZNk.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":"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"}

package/dist/data-grid.d.ts

@@ -1,3 +1,3 @@
 import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-DGmKBbpy.js";
-import { A as DataGridGroupBy, C as DataGridColumn, D as DataGridEditorFactory, E as DataGridEditorContext, F as DataGridSortState, I as GlobalFormatter, M as DataGridInteractionMode, N as DataGridSelectionMode, O as DataGridEditorType, P as DataGridSortDirection, S as BuiltInFormatterOptions, T as DataGridEditability, _ 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 DataGridGroupLabel, k as DataGridGetRowKey, 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 DataGridColumnMenu, x as BuiltInFormatterName, y as DataGridSortDetail } from "./data-grid-f9W2uzaR.js";
-export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, DataGridSelectDetail, DataGridSelectEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };
+import { A as DataGridEditorType, C as BuiltInFormatterName, D as DataGridEditability, E as DataGridColumnMenu, F as DataGridSelectionMode, I as DataGridSortDirection, L as DataGridSortState, M as DataGridGroupBy, N as DataGridGroupLabel, O as DataGridEditorContext, P as DataGridInteractionMode, R as GlobalFormatter, 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 DataGridGetRowKey, k as DataGridEditorFactory, 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 } from "./data-grid-DE1_gZNk.js";
+export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, 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/data-grid.js

@@ -17,6 +17,12 @@ import { property, query, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 //#region src/data-grid/data-grid.ts
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
 let DataGridElement = class DataGridElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -109,6 +115,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._colOffsets = [];
 		this._colWidthSum = 0;
 		this._raf = 0;
+		this.#viewportChangeRaf = 0;
 		this.#appendInProgress = false;
 		this.#resortRaf = 0;
 		this._drag = null;
@@ -130,6 +137,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 				this._scrollLeft = el.scrollLeft;
 				if (this._headerScrollEl) this._headerScrollEl.scrollLeft = el.scrollLeft;
 				this.requestUpdate();
+				cancelAnimationFrame(this.#viewportChangeRaf);
+				this.#viewportChangeRaf = 0;
+				this.#emitViewportChangeIfChanged();
 			});
 		};
 		this._onKeyDown = (e) => {
@@ -563,6 +573,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 	#enteringRowKeys;
 	#rowReflowTimer;
 	#dataGridRenderedOnce;
+	#viewportChangeRaf;
+	/** Key sets as of the last `datagrid-viewport-change` dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
 	#appendInProgress;
 	#resortRaf;
 	connectedCallback() {
@@ -578,6 +592,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		cancelAnimationFrame(this.#viewportChangeRaf);
+		this.#viewportChangeRaf = 0;
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
@@ -618,6 +634,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		if (w === this._viewportW && h === this._viewportH) return;
 		this._viewportW = w;
 		this._viewportH = h;
+		this.#scheduleViewportChangeEmit();
 	}
 	/**
 	* Force a fresh re-measure of the viewport and re-render. Normally
@@ -632,6 +649,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`filterPredicate`) || changed.has(`rowHeight`)) this.#scheduleViewportChangeEmit();
 		if (changed.has(`_editing`) || changed.has(`_editingRow`)) requestAnimationFrame(() => {
 			let sel = null;
 			if (this._editing) sel = `.row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] input, .row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] select`;
@@ -1411,6 +1429,44 @@ let DataGridElement = class DataGridElement extends LitElement {
 		const { startRow, endRow } = this.getVisibleRange();
 		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
 	}
+	/**
+	* Row keys strictly intersecting the viewport (no overscan), mirroring
+	* `ixfx-grid-list.visibleKeys()` for the `datagrid-viewport-change` detail.
+	*/
+	#visibleKeys() {
+		const rh = this.rowHeight;
+		const startRow = Math.max(0, Math.floor(this._scrollTop / rh));
+		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh));
+		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
+	}
+	/** Coalesce viewport-change dispatches to at most one per animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#viewportChangeRaf !== 0) return;
+		this.#viewportChangeRaf = requestAnimationFrame(() => {
+			this.#viewportChangeRaf = 0;
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Dispatch `datagrid-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.renderedKeys();
+		const visibleKeys = this.#visibleKeys();
+		if (sameKeys(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this.dispatchEvent(new CustomEvent(`datagrid-viewport-change`, {
+			detail: {
+				renderedKeys,
+				visibleKeys
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	_findFirstVisibleCol(scrollLeft) {
 		let lo = 0;
 		let hi = this._colOffsets.length - 1;