@ixfx/components 0.2.2 → 0.2.4

package/dist/menu/menu-item.js

@@ -0,0 +1,240 @@
+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 { tickledItemStyles } from '../interaction/index.js';
+import '../icons/icon.js';
+let MenuItem = class MenuItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.command = ``;
+        this.commandArgs = ``;
+        this.label = ``;
+        this.disabled = false;
+        this.iconName = ``;
+        this._hasChildren = false;
+        this._hoverTimeout = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._hoverTimeout) {
+            clearTimeout(this._hoverTimeout);
+        }
+    }
+    _handleSlotChange() {
+        const assigned = this._slot?.assignedElements() ?? [];
+        this._hasChildren = assigned.length > 0;
+    }
+    _handleMouseEnter() {
+        if (this.disabled || !this._hasChildren || !this.submenuPopover)
+            return;
+        if (this._hoverTimeout) {
+            clearTimeout(this._hoverTimeout);
+        }
+        this._hoverTimeout = window.setTimeout(() => {
+            this._showSubmenu();
+        }, 150);
+    }
+    _handleMouseLeave() {
+        if (this._hoverTimeout) {
+            clearTimeout(this._hoverTimeout);
+            this._hoverTimeout = null;
+        }
+        this._hideSubmenu();
+    }
+    _showSubmenu() {
+        if (!this.submenuPopover?.popover)
+            return;
+        try {
+            this.submenuPopover.showPopover();
+        }
+        catch (err) {
+            console.warn(`showPopover failed:`, err);
+        }
+    }
+    _hideSubmenu() {
+        if (!this.submenuPopover?.popover)
+            return;
+        try {
+            this.submenuPopover.hidePopover();
+        }
+        catch (err) {
+            console.warn(`hidePopover failed:`, err);
+        }
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent(`command`, {
+            detail: { command: this.command, args: this.commandArgs },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _resolvedLabel() {
+        if (this.label)
+            return this.label;
+        if (this.registry && this.command) {
+            return this.registry.get(this.command)?.label ?? ``;
+        }
+        return ``;
+    }
+    _resolvedIcon() {
+        if (this.iconName)
+            return this.iconName;
+        if (this.registry && this.command) {
+            return this.registry.get(this.command)?.icon ?? null;
+        }
+        return null;
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        const resolvedIcon = this._resolvedIcon();
+        if (resolvedIcon && !this.iconName) {
+            this.setAttribute(`data-icon-section`, ``);
+        }
+        else if (!resolvedIcon && !this.iconName) {
+            this.removeAttribute(`data-icon-section`);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+    }
+    _getShortcut() {
+        if (!this.keyboardManager || !this.command)
+            return null;
+        const bindings = this.keyboardManager.getBindings?.() ?? [];
+        const binding = bindings.find((b) => b.commandId === this.command);
+        if (!binding)
+            return null;
+        const mods = Array.from(binding.modifiers ?? [], (m) => ({ ctrl: `⌃`, shift: `⇧`, alt: `⌥`, meta: `⌘` })[m] ?? m);
+        const key = binding.key?.length === 1 ? binding.key.toUpperCase() : binding.key;
+        return [...mods, key].join(``);
+    }
+    static { this.styles = [tickledItemStyles, css `
+    :host {
+      display: block;
+    }
+
+    .item {
+      display: flex !important;
+      align-items: center;
+      padding: 6px var(--space-m);
+      font-size: var(--text-m);
+      background: var(--item-bg, transparent);
+      border: var(--item-border, 1px solid transparent);
+      color: var(--item-text, inherit);
+    }
+
+    :host(.tickled) .item {
+      background: rgba(0, 0, 0, 0.06);
+      border: 1px solid var(--accent);
+      color: inherit;
+    }
+
+    :host(:focus) {
+      outline: none;
+    }
+
+    .item.disabled {
+      opacity: var(--disabled-opacity);
+      cursor: default;
+    }
+
+    .item.disabled:hover {
+      background: transparent;
+    }
+
+    .icon-slot {
+      width: 0;
+      overflow: hidden;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([icon-name]) .icon-slot,
+    :host([data-icon-section]) .icon-slot {
+      width: 1em;
+      height: 1em;
+      margin-right: var(--space-s);
+    }
+
+    .label {
+      flex: 1;
+    }
+
+    .shortcut {
+      margin-left: auto;
+      color: var(--surface-muted-text);
+      font-size: var(--text-s);
+    }
+
+    .arrow {
+      color: var(--surface-muted-text);
+      margin-left: var(--space-m);
+    }
+  `]; }
+    render() {
+        const shortcut = this._getShortcut();
+        const resolvedIcon = this._resolvedIcon();
+        return html `
+      <div 
+        class="item ${this.disabled ? `disabled` : ``}"
+        @click=${this.handleClick}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        tabindex="${this.disabled ? -1 : 0}"
+        role="menuitem"
+        aria-haspopup="${this._hasChildren ? `true` : `false`}"
+        aria-expanded="${this.submenuPopover?.matches(`:popover-open`) ?? false}"
+      >
+        <span class="icon-slot">${resolvedIcon ? html `<ixfx-icon name="${resolvedIcon}"></ixfx-icon>` : null}</span>
+        <span class="label"><slot></slot>${this._resolvedLabel()}</span>
+        ${shortcut ? html `<span class="shortcut">${shortcut}</span>` : null}
+        ${this._hasChildren ? html `<span class="arrow"><ixfx-icon name="chevron-right"></ixfx-icon></span>` : null}
+      </div>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MenuItem.prototype, "command", void 0);
+__decorate([
+    property({ type: String, attribute: `command-args` })
+], MenuItem.prototype, "commandArgs", void 0);
+__decorate([
+    property({ type: String })
+], MenuItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: `icon-name` })
+], MenuItem.prototype, "iconName", void 0);
+__decorate([
+    property({ attribute: false })
+], MenuItem.prototype, "registry", void 0);
+__decorate([
+    property({ attribute: false })
+], MenuItem.prototype, "keyboardManager", void 0);
+__decorate([
+    property({ attribute: false })
+], MenuItem.prototype, "submenuPopover", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "_hasChildren", void 0);
+__decorate([
+    query(`slot`)
+], MenuItem.prototype, "_slot", void 0);
+MenuItem = __decorate([
+    customElement(`ixfx-menu-item`)
+], MenuItem);
+export { MenuItem };
+//# sourceMappingURL=menu-item.js.map

package/dist/menu/menu-item.js.map

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

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import './menu-radio-item.js';
+export type MenuRadioGroupChangeDetail = {
+    readonly name: string;
+    readonly value: string;
+};
+export type MenuRadioGroupChangeEvent = CustomEvent<MenuRadioGroupChangeDetail>;
+export declare class MenuRadioGroup extends LitElement {
+    name: string;
+    value: string;
+    private slottedElements;
+    private handleSlotChange;
+    private updateSlottedValues;
+    private handleRadioSelect;
+    updated(changedProperties: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-menu-radio-group': MenuRadioGroup;
+    }
+}
+//# sourceMappingURL=menu-radio-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-group.d.ts","sourceRoot":"","sources":["../../src/menu/menu-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,sBAAsB,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;AAEhF,qBACa,cAAe,SAAQ,UAAU;IAChB,IAAI,SAAM;IACV,KAAK,SAAM;IAE9B,OAAO,CAAC,eAAe,CAAiB;IAEjD,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,MAAM,CAAC,MAAM,0BAQX;IAEF,MAAM;CAKP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,cAAc,CAAC;KACzC;CACF"}

package/dist/menu/menu-radio-group.js

@@ -0,0 +1,71 @@
+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, state } from 'lit/decorators.js';
+import './menu-radio-item.js';
+let MenuRadioGroup = class MenuRadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = ``;
+        this.value = ``;
+        this.slottedElements = [];
+    }
+    handleSlotChange(e) {
+        const slot = e.target;
+        this.slottedElements = slot.assignedElements();
+        this.updateSlottedValues();
+    }
+    updateSlottedValues() {
+        for (const el of this.slottedElements) {
+            el.groupValue = this.value;
+        }
+    }
+    handleRadioSelect(e) {
+        this.value = e.detail.value;
+        this.dispatchEvent(new CustomEvent(`radio-change`, {
+            detail: {
+                name: this.name,
+                value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updated(changedProperties) {
+        if (changedProperties.has(`value`)) {
+            this.updateSlottedValues();
+        }
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+
+    ::slotted(menu-radio-item) {
+      display: block;
+    }
+  `; }
+    render() {
+        return html `
+      <slot @slotchange=${this.handleSlotChange} @radio-select=${this.handleRadioSelect}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MenuRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], MenuRadioGroup.prototype, "value", void 0);
+__decorate([
+    state()
+], MenuRadioGroup.prototype, "slottedElements", void 0);
+MenuRadioGroup = __decorate([
+    customElement(`ixfx-menu-radio-group`)
+], MenuRadioGroup);
+export { MenuRadioGroup };
+//# sourceMappingURL=menu-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-group.js","sourceRoot":"","sources":["../../src/menu/menu-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,sBAAsB,CAAC;AAUvB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACuB,SAAI,GAAG,EAAE,CAAC;QACV,UAAK,GAAG,EAAE,CAAC;QAEtB,oBAAe,GAAc,EAAE,CAAC;IA+CnD,CAAC;IA7CS,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC/C,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,mBAAmB;QACzB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACrC,EAAU,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,CAAc;QACtC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAA6B,cAAc,EAAE;YAC7E,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED,OAAO,CAAC,iBAAuC;QAC7C,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;GAQlB,AARY,CAQX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,gBAAgB,kBAAkB,IAAI,CAAC,iBAAiB;KAClF,CAAC;IACJ,CAAC;;AAjD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AAEtB;IAAhB,KAAK,EAAE;uDAAyC;AAJtC,cAAc;IAD1B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,cAAc,CAmD1B"}

package/dist/menu/menu-radio-item.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import '../icons/icon.js';
+export type MenuRadioItemSelectDetail = {
+    readonly value: string;
+};
+export type MenuRadioItemSelectEvent = CustomEvent<MenuRadioItemSelectDetail>;
+export declare class MenuRadioItem extends LitElement {
+    value: string;
+    label: string;
+    disabled: boolean;
+    groupValue: string;
+    iconName: string;
+    private handleClick;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-menu-radio-item': MenuRadioItem;
+    }
+}
+//# sourceMappingURL=menu-radio-item.d.ts.map

package/dist/menu/menu-radio-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-radio-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,yBAAyB,CAAC,CAAC;AAE9E,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IAClB,UAAU,SAAM;IACQ,QAAQ,SAAM;IAElE,OAAO,CAAC,WAAW;IAWnB,OAAgB,MAAM,4BAkDnB;IAEH,MAAM;CAiBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,aAAa,CAAC;KACvC;CACF"}

package/dist/menu/menu-radio-item.js

@@ -0,0 +1,116 @@
+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 } from 'lit/decorators.js';
+import { tickledItemStyles } from '../interaction/index.js';
+import '../icons/icon.js';
+let MenuRadioItem = class MenuRadioItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = ``;
+        this.label = ``;
+        this.disabled = false;
+        this.groupValue = ``;
+        this.iconName = ``;
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent(`radio-select`, {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static { this.styles = [tickledItemStyles, css `
+    :host {
+      display: block;
+    }
+
+    .item {
+      display: flex;
+      padding: 6px var(--space-m);
+      font-size: var(--text-m);
+    }
+
+    :host(:focus) {
+      outline: none;
+    }
+
+    .item.disabled {
+      opacity: var(--disabled-opacity);
+      cursor: default;
+    }
+
+    .item.disabled:hover {
+      background: transparent;
+    }
+
+    .radio {
+      width: 16px;
+      margin-right: var(--space-s);
+      font-size: var(--text-m);
+      color: var(--accent);
+    }
+
+    .icon-slot {
+      width: 0;
+      overflow: hidden;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([icon-name]) .icon-slot,
+    :host([data-icon-section]) .icon-slot {
+      width: 1em;
+      height: 1em;
+      margin-right: var(--space-s);
+    }
+
+    .label {
+      flex: 1;
+    }
+  `]; }
+    render() {
+        const isSelected = this.groupValue === this.value;
+        return html `
+      <div 
+        class="item ${this.disabled ? `disabled` : ``}"
+        @click=${this.handleClick}
+        tabindex="${this.disabled ? -1 : 0}"
+        role="menuitemradio"
+        aria-checked="${isSelected}"
+      >
+        <span class="radio">${isSelected ? `●` : ``}</span>
+        <span class="icon-slot">${this.iconName ? html `<ixfx-icon name="${this.iconName}"></ixfx-icon>` : null}</span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MenuRadioItem.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], MenuRadioItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuRadioItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], MenuRadioItem.prototype, "groupValue", void 0);
+__decorate([
+    property({ type: String, attribute: `icon-name` })
+], MenuRadioItem.prototype, "iconName", void 0);
+MenuRadioItem = __decorate([
+    customElement(`ixfx-menu-radio-item`)
+], MenuRadioItem);
+export { MenuRadioItem };
+//# sourceMappingURL=menu-radio-item.js.map

package/dist/menu/menu-radio-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-item.js","sourceRoot":"","sources":["../../src/menu/menu-radio-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,kBAAkB,CAAC;AASnB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACuB,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACV,aAAQ,GAAG,KAAK,CAAC;QAClB,eAAU,GAAG,EAAE,CAAC;QACQ,aAAQ,GAAG,EAAE,CAAC;IAkFpE,CAAC;IAhFS,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YACf,OAAO;QAET,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAA4B,cAAc,EAAE;YAC5E,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;aAEe,WAAM,GAAG,CAAC,iBAAiB,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkD/C,CAAC,AAlDoB,CAkDnB;IAEH,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC;QAElD,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;iBACpC,IAAI,CAAC,WAAW;oBACb,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;wBAElB,UAAU;;8BAEJ,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;kCACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,QAAQ,gBAAgB,CAAC,CAAC,CAAC,IAAI;8BAChF,IAAI,CAAC,KAAK;;KAEnC,CAAC;IACJ,CAAC;;AArF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AACV;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAiB;AACQ;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CAAe;AALvD,aAAa;IADzB,aAAa,CAAC,sBAAsB,CAAC;GACzB,aAAa,CAuFzB"}

package/dist/menu/menu-separator.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class MenuSeparator extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-menu-separator': MenuSeparator;
+    }
+}
+//# sourceMappingURL=menu-separator.d.ts.map

package/dist/menu/menu-separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-separator.d.ts","sourceRoot":"","sources":["../../src/menu/menu-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAUX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,aAAa,CAAC;KACtC;CACF"}

package/dist/menu/menu-separator.js

@@ -0,0 +1,29 @@
+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 } from 'lit/decorators.js';
+let MenuSeparator = class MenuSeparator extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: block;
+      margin: var(--space-xs) 0;
+    }
+
+    .separator {
+      height: 1px;
+      background: var(--surface-4);
+    }
+  `; }
+    render() {
+        return html `<div class="separator"></div>`;
+    }
+};
+MenuSeparator = __decorate([
+    customElement(`ixfx-menu-separator`)
+], MenuSeparator);
+export { MenuSeparator };
+//# sourceMappingURL=menu-separator.js.map

package/dist/menu/menu-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-separator.js","sourceRoot":"","sources":["../../src/menu/menu-separator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;aACpC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,AAVY,CAUX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;;AAfU,aAAa;IADzB,aAAa,CAAC,qBAAqB,CAAC;GACxB,aAAa,CAgBzB"}

package/dist/menu/menu-sub-trigger.d.ts

@@ -0,0 +1,46 @@
+import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';
+import { LitElement } from 'lit';
+import '../icons/icon.js';
+export declare class MenuSubTrigger extends LitElement {
+    command: string;
+    commandArgs: string;
+    label: string;
+    disabled: boolean;
+    iconName: string;
+    registry?: CommandRegistry<unknown>;
+    keyboardManager?: KeyboardManager;
+    private _hasSubmenu;
+    private _slot;
+    private _submenuPopover;
+    private _itemEl;
+    private static _count;
+    private _anchorName;
+    private _hoverTimeout;
+    private _hideTimeout;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _propagateContext;
+    updated(changedProperties: Map<string, unknown>): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    private _resolvedIcon;
+    private _handleSlotChange;
+    private _showSubmenu;
+    private _hideSubmenu;
+    private _cancelHide;
+    private _scheduleHide;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleSubmenuMouseEnter;
+    private _handleSubmenuMouseLeave;
+    private _handleClick;
+    private _handleKeydown;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-menu-sub-trigger': MenuSubTrigger;
+    }
+}
+//# sourceMappingURL=menu-sub-trigger.d.ts.map

package/dist/menu/menu-sub-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-sub-trigger.d.ts","sourceRoot":"","sources":["../../src/menu/menu-sub-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,qBACa,cAAe,SAAQ,UAAU;IAChB,OAAO,SAAM;IACc,WAAW,SAAM;IAC5C,KAAK,SAAM;IACV,QAAQ,UAAS;IACM,QAAQ,SAAM;IAClC,QAAQ,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAEzD,OAAO,CAAC,WAAW,CAAS;IACN,OAAO,CAAC,KAAK,CAAmB;IACpC,OAAO,CAAC,eAAe,CAAe;IACjD,OAAO,CAAC,OAAO,CAAe;IAE9C,OAAO,CAAC,MAAM,CAAC,MAAM,CAAK;IAC1B,OAAO,CAAC,WAAW,CAAsC;IACzD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAuB;IAE3C,iBAAiB,IAAI,IAAI;IAKzB,YAAY,IAAI,IAAI;IAIpB,oBAAoB,IAAI,IAAI;IAW5B,OAAO,CAAC,iBAAiB;IAUhB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM/D,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUzD,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,cAAc;IAiCtB,OAAgB,MAAM,4BAiEnB;IAEH,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,cAAc,CAAC;KACzC;CACF"}