@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/theme/locale-switch.js

@@ -0,0 +1,241 @@
+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;
+};
+/**
+ * aithe-locale-switch 组件
+ * Locale switcher dropdown for toggling between supported locales.
+ *
+ * 基于 floating overlay 模式实现，支持 placement 属性控制弹出方向。
+ * Built on the floating overlay pattern, supports placement prop for dropdown direction.
+ *
+ * Use the `locales` property to limit which locales appear in the dropdown.
+ * When `locales` is empty (default), all registered locales are shown.
+ * 使用 `locales` 属性可限定下拉菜单中显示的语言。
+ * 当 `locales` 为空（默认）时，显示所有已注册的语言。
+ *
+ * @fires aithe-locale-change - Emitted when a locale is selected. 选择语言时发出，detail 包含 `{ locale: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in locale switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { localeMenu } from '../../styles/i18n';
+let AitheLocaleSwitch = class AitheLocaleSwitch extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        /**
+         * JSON string of locale identifiers to show in the dropdown.
+         * When empty or unset, all registered locales are displayed.
+         * 下拉菜单中显示的语言标识 JSON 字符串。为空时显示所有已注册语言。
+         *
+         * @example
+         * ```html
+         * <aithe-locale-switch locales='["en-US","zh-CN","ja-JP"]'></aithe-locale-switch>
+         * ```
+         */
+        this.locales = '';
+        this.open = false;
+        this.currentLocale = aitheUI.getLocale();
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const locale = event.detail.value;
+            if (!locale)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-locale-change', { locale });
+            if (notPrevented) {
+                aitheUI.setLocale(locale);
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .icon {
+        font-size: 14px;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 140px;
+        padding: var(--aithe-space-2);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onLocaleChange(() => {
+            this.currentLocale = aitheUI.getLocale();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+        this.unsubscribe?.();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    getFilteredMenu() {
+        if (!this.locales)
+            return localeMenu;
+        const allowed = JSON.parse(this.locales);
+        return localeMenu.filter((item) => allowed.includes(item.id));
+    }
+    render() {
+        const displayLabel = this.currentLocale;
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="icon">🌐</span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${this.getFilteredMenu()}
+                .active=${this.currentLocale}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheLocaleSwitch.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheLocaleSwitch.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheLocaleSwitch.prototype, "locales", void 0);
+__decorate([
+    state()
+], AitheLocaleSwitch.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheLocaleSwitch.prototype, "currentLocale", void 0);
+__decorate([
+    query('.trigger')
+], AitheLocaleSwitch.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheLocaleSwitch.prototype, "overlayEl", void 0);
+AitheLocaleSwitch = __decorate([
+    customElement('aithe-locale-switch')
+], AitheLocaleSwitch);
+export { AitheLocaleSwitch };

package/dist/components/theme/shadow-picker.js

@@ -0,0 +1,233 @@
+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;
+};
+/**
+ * aithe-shadow-picker 组件
+ * Shadow style picker dropdown for toggling between built-in shadow styles.
+ *
+ * 基于 floating overlay 模式实现，支持 placement 属性控制弹出方向。
+ * Built on the floating overlay pattern, supports placement prop for dropdown direction.
+ *
+ * 阴影风格与颜色主题、形状相互独立，可自由组合（Theme × Shape × Shadow）。
+ * Shadow style is orthogonal to color themes and shapes and can be freely combined (Theme × Shape × Shadow).
+ *
+ * @fires aithe-shadow-change - Emitted when a shadow is selected. 选择阴影风格时发出，detail 包含 `{ shadow: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in shadow switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { shadowMenu } from '../../styles/shadow';
+import { t } from '../../styles/i18n';
+let AitheShadowPicker = class AitheShadowPicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        this.currentShadow = aitheUI.getShadow();
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const shadow = event.detail.value;
+            if (!shadow)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-shadow-change', { shadow });
+            if (notPrevented) {
+                aitheUI.setShadow(shadow);
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .icon {
+        font-size: 14px;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 220px;
+        padding: var(--aithe-space-2);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    getEffectiveShadow() {
+        return this.value ?? this.currentShadow;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onShadowChange(() => {
+            this.currentShadow = aitheUI.getShadow();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+        this.unsubscribe?.();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    render() {
+        const effectiveShadow = this.getEffectiveShadow();
+        const shadowKey = effectiveShadow === 'sharp-business' ? 'sharpBusiness' : effectiveShadow;
+        const displayLabel = t(`shadowPicker.${shadowKey}`, effectiveShadow === 'sharp-business' ? 'Sharp Business' : effectiveShadow.charAt(0).toUpperCase() + effectiveShadow.slice(1));
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="icon">◈</span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${shadowMenu}
+                .active=${effectiveShadow}
+                .itemRenderer=${(item) => item.icon
+                ? html `<span
+                        style="display:inline-block;width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--aithe-color-text-muted)"
+                      >${item.icon}</span>`
+                : nothing}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheShadowPicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheShadowPicker.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheShadowPicker.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheShadowPicker.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheShadowPicker.prototype, "currentShadow", void 0);
+__decorate([
+    query('.trigger')
+], AitheShadowPicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheShadowPicker.prototype, "overlayEl", void 0);
+AitheShadowPicker = __decorate([
+    customElement('aithe-shadow-picker')
+], AitheShadowPicker);
+export { AitheShadowPicker };

package/dist/components/theme/shape-picker.js

@@ -0,0 +1,232 @@
+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;
+};
+/**
+ * aithe-shape-picker 组件
+ * Shape style picker dropdown for toggling between built-in shape styles.
+ *
+ * 基于 floating overlay 模式实现，支持 placement 属性控制弹出方向。
+ * Built on the floating overlay pattern, supports placement prop for dropdown direction.
+ *
+ * 形状风格与颜色主题相互独立，可自由组合（Theme × Shape）。
+ * Shape style is orthogonal to color themes and can be freely combined (Theme × Shape).
+ *
+ * @fires aithe-shape-change - Emitted when a shape is selected. 选择形状风格时发出，detail 包含 `{ shape: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in shape switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { shapeMenu } from '../../styles/shape';
+import { t } from '../../styles/i18n';
+let AitheShapePicker = class AitheShapePicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        this.currentShape = aitheUI.getShape();
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const shape = event.detail.value;
+            if (!shape)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-shape-change', { shape });
+            if (notPrevented) {
+                aitheUI.setShape(shape);
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .icon {
+        font-size: 14px;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 200px;
+        padding: var(--aithe-space-2);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    getEffectiveShape() {
+        return this.value ?? this.currentShape;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onShapeChange(() => {
+            this.currentShape = aitheUI.getShape();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+        this.unsubscribe?.();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    render() {
+        const effectiveShape = this.getEffectiveShape();
+        const displayLabel = t(`shapePicker.${effectiveShape}`, effectiveShape.charAt(0).toUpperCase() + effectiveShape.slice(1));
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="icon">⬡</span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${shapeMenu}
+                .active=${effectiveShape}
+                .itemRenderer=${(item) => item.preview
+                ? html `<span
+                        style="display:inline-block;width:24px;height:24px;flex-shrink:0;border:2px solid var(--aithe-color-border);background:var(--aithe-color-surface-muted);border-radius:${item.preview}"
+                      ></span>`
+                : nothing}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheShapePicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheShapePicker.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheShapePicker.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheShapePicker.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheShapePicker.prototype, "currentShape", void 0);
+__decorate([
+    query('.trigger')
+], AitheShapePicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheShapePicker.prototype, "overlayEl", void 0);
+AitheShapePicker = __decorate([
+    customElement('aithe-shape-picker')
+], AitheShapePicker);
+export { AitheShapePicker };