@ixfx/components 0.2.2 → 0.2.4

package/dist/button/button.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, nothing } from "lit";
+export declare class ButtonElement extends LitElement {
+    disabled: boolean;
+    icon?: string;
+    hideIcon: boolean;
+    hideLabel: 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;
+    }
+}
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOhD,qBACa,aAAc,SAAQ,UAAU;IAE3C,QAAQ,UAAS;IAGjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAElB,SAAS,CAAC,WAAW;IAgBrB,SAAS,CAAC,MAAM;IAOhB,MAAM,CAAC,MAAM,4BAGX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,aAAa,CAAC;KAC9B;CACF"}

package/dist/button/button.js

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { getIcon } from "../icons/index.js";
+import { prominenceStyles } from "../styles/prominence.js";
+import { buttonStyles } from "./button-styles.js";
+let ButtonElement = class ButtonElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.hideIcon = false;
+        this.hideLabel = false;
+    }
+    _renderIcon() {
+        if (this.hideIcon || !this.icon)
+            return nothing;
+        if (this.icon.startsWith(`<svg`)) {
+            return html `<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
+        }
+        const svg = getIcon(this.icon);
+        if (!svg)
+            return nothing;
+        return html `<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
+    }
+    render() {
+        const label = this.hideLabel
+            ? nothing
+            : html `<span class="button-label"><slot></slot></span>`;
+        return html `<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;
+    }
+    static { this.styles = [
+        prominenceStyles,
+        buttonStyles,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean })
+], ButtonElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], ButtonElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-icon`, reflect: true })
+], ButtonElement.prototype, "hideIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-label`, reflect: true })
+], ButtonElement.prototype, "hideLabel", void 0);
+ButtonElement = __decorate([
+    customElement(`ixfx-button`)
+], ButtonElement);
+export { ButtonElement };
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAEL,aAAQ,GAAG,KAAK,CAAC;QAMjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,cAAS,GAAG,KAAK,CAAC;IA6BpB,CAAC;IA3BW,WAAW;QACnB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI;YAC7B,OAAO,OAAO,CAAC;QAEjB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;YACjC,OAAO,IAAI,CAAA,6BAA6B,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QACzE,CAAC;QAED,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,CAAC,GAAG;YACN,OAAO,OAAO,CAAC;QAEjB,OAAO,IAAI,CAAA,wCAAwC,IAAI,CAAC,IAAI,gBAAgB,CAAC;IAC/E,CAAC;IAES,MAAM;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS;YAC1B,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC;QAC1D,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,GAAG,KAAK,WAAW,CAAC;IACzF,CAAC;aAEM,WAAM,GAAG;QACd,gBAAgB;QAChB,YAAY;KACb,AAHY,CAGX;;AArCF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAClD;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAClD;AAXP,aAAa;IADzB,aAAa,CAAC,aAAa,CAAC;GAChB,aAAa,CAwCzB"}

package/dist/button/radio-group.d.ts

@@ -0,0 +1,44 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+import '../icons/icon.js';
+export type RadioGroupMode = `compact` | `max`;
+export type RadioItem = Readonly<{
+    value: string;
+    label: string;
+    disabled?: boolean;
+    iconName?: string;
+    iconNameOff?: string;
+}>;
+export declare class RadioGroup extends LitElement {
+    #private;
+    value: string;
+    orientation: `horizontal` | `vertical`;
+    items: RadioItem[];
+    name: string;
+    mode: RadioGroupMode;
+    checked: boolean;
+    valueOff: string;
+    iconName: string;
+    iconNameOff: string;
+    hideLabels: boolean;
+    private _computedItems;
+    private _icons;
+    private _slot?;
+    private get _isSingleToggle();
+    private get _singleToggleIconName();
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    protected render(): unknown;
+    static styles: import("lit").CSSResult[];
+}
+export type RadioGroupChangeDetail = {
+    readonly checked: boolean;
+    readonly value: string | undefined;
+};
+export type RadioGroupChangeEvent = CustomEvent<RadioGroupChangeDetail>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-radio-group': RadioGroup;
+    }
+}
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/button/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/button/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,qBACa,UAAW,SAAQ,UAAU;;IACZ,KAAK,SAAM;IACX,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACvD,KAAK,EAAE,SAAS,EAAE,CAAM;IACvB,IAAI,SAAM;IACV,IAAI,EAAE,cAAc,CAAa;IAChC,OAAO,UAAS;IACO,QAAQ,SAAM;IACd,QAAQ,SAAM;IACV,WAAW,SAAM;IAClB,UAAU,UAAS;IAEjE,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,MAAM,CAAkC;IAC1C,OAAO,CAAC,KAAK,CAAC,CAAkB;IAE/C,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,qBAAqB,GAIhC;cAEkB,YAAY,IAAI,IAAI;cAIpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;cAyGhD,MAAM,IAAI,OAAO;IA2DpC,OAAgB,MAAM,4BAqJnB;CACJ;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;AAExE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,UAAU,CAAC;KAChC;CACF"}

package/dist/button/radio-group.js

@@ -0,0 +1,385 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { prominenceStyles } from '../styles/prominence.js';
+import '../icons/icon.js';
+let RadioGroup = class RadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = ``;
+        this.orientation = `horizontal`;
+        this.items = [];
+        this.name = ``;
+        this.mode = `compact`;
+        this.checked = false;
+        this.valueOff = ``;
+        this.iconName = ``;
+        this.iconNameOff = ``;
+        this.hideLabels = false;
+        this._computedItems = [];
+        this._icons = new Map();
+    }
+    get _isSingleToggle() {
+        return this._computedItems.length === 0 && Boolean(this.textContent?.trim());
+    }
+    get _singleToggleIconName() {
+        if (!this.iconName && !this.iconNameOff)
+            return null;
+        return this.checked ? this.iconName : (this.iconNameOff || this.iconName);
+    }
+    firstUpdated() {
+        this.#updateComputedItems();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has(`checked`)) {
+            const input = this.shadowRoot?.querySelector(`.radio-toggle-input`);
+            if (input && input.checked !== this.checked) {
+                input.checked = this.checked;
+                const newValue = this.checked
+                    ? (this.value || `on`)
+                    : (this.valueOff || undefined);
+                this.dispatchEvent(new CustomEvent(`change`, {
+                    detail: { checked: this.checked, value: newValue },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        if (changedProperties.has(`value`) && !this._isSingleToggle) {
+            const inputs = this.shadowRoot?.querySelectorAll(`.radio-input`);
+            if (inputs) {
+                for (const input of inputs) {
+                    if (input.checked !== (input.value === this.value)) {
+                        input.checked = input.value === this.value;
+                    }
+                }
+            }
+        }
+    }
+    #updateComputedItems() {
+        const options = this.querySelectorAll(`option`);
+        const icons = new Map();
+        if (options.length > 0) {
+            this._computedItems = Array.from(options, (el) => {
+                const tempDiv = document.createElement(`div`);
+                tempDiv.innerHTML = el.innerHTML;
+                const iconEl = tempDiv.querySelector(`svg`);
+                if (iconEl) {
+                    icons.set(el.getAttribute(`value`) || ``, iconEl.outerHTML);
+                }
+                return {
+                    value: el.getAttribute(`value`) || ``,
+                    label: el.textContent?.trim() || ``,
+                    disabled: el.hasAttribute(`disabled`),
+                    iconName: el.getAttribute(`icon-name`) || undefined,
+                    iconNameOff: el.getAttribute(`icon-name-off`) || undefined,
+                };
+            });
+            this._icons = icons;
+        }
+        else {
+            this._computedItems = [...this.items];
+        }
+    }
+    // #handleItemClick(item: RadioItem): void {
+    //   if (item.disabled || item.value === this.value)
+    //     return;
+    //   this.value = item.value;
+    //   this.dispatchEvent(new CustomEvent<RadioGroupChangeDetail>(`change`, {
+    //     detail: { checked: true, value: item.value },
+    //     bubbles: true,
+    //     composed: true,
+    //   }));
+    // }
+    #handleRadioChange(e) {
+        e.stopImmediatePropagation();
+        const input = e.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: { checked: true, value: input.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #handleToggleChange(e) {
+        e.stopImmediatePropagation();
+        const input = e.target;
+        this.checked = input.checked;
+        const newValue = this.checked
+            ? (this.value || `on`)
+            : (this.valueOff || undefined);
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: { checked: this.checked, value: newValue },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #renderIcon(item) {
+        const isSelected = item.value === this.value;
+        const iconName = isSelected ? (item.iconName || null) : (item.iconNameOff || item.iconName || null);
+        if (iconName) {
+            return html `<ixfx-icon class="radio-icon" name="${iconName}"></ixfx-icon>`;
+        }
+        const iconHtml = this._icons.get(item.value);
+        if (!iconHtml)
+            return null;
+        return html `<span class="radio-icon">${unsafeHTML(iconHtml)}</span>`;
+    }
+    render() {
+        if (this._isSingleToggle) {
+            const iconName = this._singleToggleIconName;
+            const showIcon = iconName || this.hideLabels;
+            const iconPart = showIcon
+                ? html `<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>`
+                : null;
+            const labelPart = !this.hideLabels
+                ? html `<span class="radio-label" data-text="${this.textContent?.trim()}">${this.textContent?.trim()}</span>`
+                : null;
+            return html `
+        <label class="radio-item ${this.checked ? `selected` : ``}">
+          <input
+            type="checkbox"
+            class="radio-toggle-input"
+            ?checked=${this.checked}
+            @change=${this.#handleToggleChange}
+          />
+          ${iconPart}
+          ${labelPart}
+        </label>
+      `;
+        }
+        return html `
+      <slot @slotchange=${this.#updateComputedItems} style="display: none;"></slot>
+      <div class="radio-group ${this.orientation} ${this.mode}" role="radiogroup" aria-label=${this.name}>
+        ${this._computedItems.map((item) => {
+            const isSelected = item.value === this.value;
+            const iconName = isSelected
+                ? (item.iconName || null)
+                : (item.iconNameOff || item.iconName || null);
+            const showIcon = iconName || this.hideLabels;
+            const iconPart = showIcon
+                ? html `<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>`
+                : null;
+            const labelPart = !this.hideLabels
+                ? html `<span class="radio-label" data-text="${item.label}">${item.label}</span>`
+                : null;
+            return html `
+            <label class="radio-item ${item.value === this.value ? `selected` : ``}" ?disabled=${item.disabled}>
+              <input
+                type="radio"
+                class="radio-input"
+                name=${this.name}
+                value=${item.value}
+                ?disabled=${item.disabled}
+                ?checked=${item.value === this.value}
+                @change=${this.#handleRadioChange}
+              />
+              ${iconPart}
+              ${labelPart}
+            </label>
+          `;
+        })}
+      </div>
+    `;
+    }
+    static { this.styles = [prominenceStyles, css `
+    :host {
+      display: inline-flex;
+      min-width: min-content;
+      box-sizing: border-box;
+      /* Default to looking like a cohesive control group */
+      background: var(--surface-3, transparent);
+      border: var(--border, none);
+      border-radius: var(--radius-m, 4px);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .radio-toggle-input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    .radio-input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    .radio-group {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      gap: var(--item-spacing, 0);
+      overflow: hidden;
+      border-radius: inherit;
+    }
+
+    .radio-group.horizontal {
+      flex-direction: row;
+    }
+
+    .radio-group.vertical {
+      flex-direction: column;
+    }
+
+    .radio-group.max.horizontal .radio-item {
+      flex: 1;
+      justify-content: center;
+    }
+
+    .radio-group.max.vertical .radio-item {
+      flex: 1;
+      justify-content: flex-start;
+    }
+
+    .radio-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--icon-label-spacing, 0.5rem);
+      padding: var(--space-m, 0.5rem) var(--space-l, 1rem);
+      border: none;
+      background: transparent;
+      color: var(--color-fg-fade, var(--surface-muted-text));
+      font-family: inherit;
+      font-size: var(--text-m, inherit);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      cursor: pointer;
+      transition: all var(--transition, 0.1s) ease;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .radio-item:hover:not([disabled]) {
+      opacity: 0.9;
+      background: var(--surface-4, rgba(255,255,255,0.05));
+    }
+
+    .radio-item.selected {
+      font-weight: bold;
+      color: var(--color-fg-accent, var(--surface-2-text));
+      background: var(--surface-6, rgba(255,255,255,0.1));
+    }
+
+    .radio-item[disabled] {
+      cursor: not-allowed;
+    }
+
+    .radio-item:has(input:focus-visible) {
+      outline: 2px solid var(--accent, #666);
+      outline-offset: -2px;
+    }
+
+    .radio-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--icon-size, 1.2rem);
+      height: var(--icon-size, 1.2rem);
+      flex-shrink: 0;
+    }
+
+    .radio-icon svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .radio-label {
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 0;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .radio-label::after {
+      content: attr(data-text);
+      content: attr(data-text)/"";
+      font-weight: bold;
+      height: 0;
+      visibility: hidden;
+      overflow: hidden;
+      user-select: none;
+      pointer-events: none;
+      @media speech {
+        display: none;
+      }
+    }
+
+    .radio-group.vertical .radio-item {
+      width: 100%;
+    }
+
+    .radio-group.horizontal .radio-item {
+      flex-shrink: 0;
+    }
+
+    .radio-group.compact .radio-label {
+      display: var(--show-labels, inline-flex);
+    }
+
+    .radio-group.compact.horizontal .radio-item {
+      padding: var(--compact-padding, 0.5rem);
+    }
+  `]; }
+};
+__decorate([
+    property({ type: String })
+], RadioGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], RadioGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Array })
+], RadioGroup.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], RadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], RadioGroup.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioGroup.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, attribute: `value-off` })
+], RadioGroup.prototype, "valueOff", void 0);
+__decorate([
+    property({ type: String, attribute: `icon-name` })
+], RadioGroup.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String, attribute: `icon-name-off` })
+], RadioGroup.prototype, "iconNameOff", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-labels` })
+], RadioGroup.prototype, "hideLabels", void 0);
+__decorate([
+    state()
+], RadioGroup.prototype, "_computedItems", void 0);
+__decorate([
+    state()
+], RadioGroup.prototype, "_icons", void 0);
+__decorate([
+    query(`slot`)
+], RadioGroup.prototype, "_slot", void 0);
+RadioGroup = __decorate([
+    customElement(`ixfx-radio-group`)
+], RadioGroup);
+export { RadioGroup };
+//# sourceMappingURL=radio-group.js.map

package/dist/button/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/button/radio-group.ts"],"names":[],"mappings":"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"}

package/dist/button/split-button.d.ts

@@ -0,0 +1,59 @@
+import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';
+import type { ItemsProvider, PopupItem } from './types.js';
+import { ButtonElement } from './button.js';
+import '../menu/menu-trigger.js';
+import '../menu/menu-container.js';
+import '../menu/menu-item.js';
+import '../icons/icon.js';
+export type SplitButtonMode = `default` | `switcher`;
+export declare class SplitButton extends ButtonElement {
+    registry?: CommandRegistry<unknown>;
+    keyboardManager?: KeyboardManager;
+    mode: SplitButtonMode;
+    defaultValue: string;
+    /** When set, called each time the popup is opened; its return value replaces declarative items. */
+    itemsProvider?: ItemsProvider;
+    /** Directly set popup items. Ignored when itemsProvider is also set. */
+    items?: PopupItem[];
+    private _menuTrigger;
+    private _compact;
+    private _selectedCommand;
+    private _selectedLabel;
+    private _selectedIcon;
+    private _switcherItems;
+    private _dynamicItems;
+    private _loadingItems;
+    private _menuHasItems;
+    private _resizeObserver?;
+    private _widthNeeded;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _checkOverflow;
+    private _applyItems;
+    /** In switcher mode, programmatically select the active command. Returns false if not found. */
+    selectCommand(command: string): boolean;
+    /** True when there is (or will be) popup content. Used to dim the caret visually. */
+    private get _caretHasContent();
+    private _onDefaultMenuSlotChange;
+    private _onSwitcherSlotChange;
+    private _applySwitcherItems;
+    private _handleSwitcherMenuCommand;
+    private _handleSwitcherPrimaryClick;
+    private _handleCaretClick;
+    private _handlePrimaryKeyDown;
+    private _handleCaretKeyDown;
+    protected render(): import("lit").TemplateResult<1>;
+    private _renderCaret;
+    private _renderLoadingOrItems;
+    private _renderDefault;
+    private _renderSwitcher;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-split-button': SplitButton;
+    }
+}
+//# sourceMappingURL=split-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/button/split-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE5E,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAgB,MAAM,YAAY,CAAC;AAIzE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,qBACa,WAAY,SAAQ,aAAa;IACZ,QAAQ,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IACtC,IAAI,EAAE,eAAe,CAAa;IACN,YAAY,SAAM;IAC1E,mGAAmG;IACnE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9D,wEAAwE;IACxC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IAExB,OAAO,CAAC,YAAY,CAAe;IAEtD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,aAAa,CAAmB;IACxC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,YAAY,CAAK;IAIhB,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU/D,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,WAAW;IASnB,gGAAgG;IAChG,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAWvC,qFAAqF;IACrF,OAAO,KAAK,gBAAgB,GAK3B;IAID,OAAO,CAAC,wBAAwB,CAG9B;IAIF,OAAO,CAAC,qBAAqB,CAa3B;IAEF,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,0BAA0B,CAkBhC;IAEF,OAAO,CAAC,2BAA2B,CAOjC;IAIF,OAAO,CAAC,iBAAiB,CA4BvB;IAEF,OAAO,CAAC,qBAAqB,CAK3B;IAEF,OAAO,CAAC,mBAAmB,CAKzB;cAIiB,MAAM;IAMzB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,eAAe;IAgDvB,OAAgB,MAAM,4BAqHpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,WAAW,CAAC;KAClC;CACF"}