@aithe/aithe-ui 26.2.3 → 26.3.2

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

@@ -0,0 +1,236 @@
+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, 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 { themeMenu, THEME_COLORS } from '../../styles/theme';
+import { t } from '../../styles/i18n';
+/**
+ * Theme picker dropdown for browsing and selecting built-in Aithe UI themes.
+ * 主题选择器下拉菜单，用于浏览和选择 Aithe UI 内置主题。
+ *
+ * Displays themes grouped by light/dark categories with color dot previews,
+ * rendered via `<aithe-tree-menu>`.
+ * 通过 `<aithe-tree-menu>` 按 Light/Dark 分组展示主题，并带有颜色圆点预览。
+ *
+ * @fires aithe-theme-change - Emitted when a theme is selected. 选择主题时发出，detail 包含 `{ theme: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in theme switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ *
+ * @example
+ * ```html
+ * <aithe-theme-picker value="light" placement="bottom-end"></aithe-theme-picker>
+ * ```
+ */
+let AitheThemePicker = class AitheThemePicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Currently selected theme name. 当前选中的主题名称。 */
+        this.value = 'light';
+        /** Placement of the dropdown overlay relative to the trigger. 下拉浮层相对于触发器的弹出位置。 */
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        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 theme = event.detail.value;
+            if (!theme || theme === 'light-group' || theme === 'dark-group' || theme === 'cloud-group')
+                return;
+            this.value = theme;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-theme-change', { theme });
+            if (notPrevented) {
+                aitheUI.setTheme(theme);
+            }
+        };
+    }
+    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;
+      }
+
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-primary-6);
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        flex-shrink: 0;
+      }
+
+      .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: 180px;
+        max-width: min(320px, calc(100vw - 24px));
+        max-height: min(70vh, 480px);
+        padding: var(--aithe-space-2);
+        overflow-y: auto;
+        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();
+        this.value = aitheUI.getTheme();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+    }
+    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 displayLabel = t(`theme.${this.value}`, this.value.charAt(0).toUpperCase() + this.value.slice(1));
+        const displayColor = THEME_COLORS[this.value] || 'var(--aithe-primary-6)';
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="dot" style="background:${displayColor}"></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=${themeMenu}
+                .active=${this.value}
+                .itemRenderer=${(item) => item.color
+                ? html `<span
+                        style="display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);flex-shrink:0;background:${item.color}"
+                      ></span>`
+                : nothing}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheThemePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheThemePicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheThemePicker.prototype, "iconOnly", void 0);
+__decorate([
+    state()
+], AitheThemePicker.prototype, "open", void 0);
+__decorate([
+    query('.trigger')
+], AitheThemePicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheThemePicker.prototype, "overlayEl", void 0);
+AitheThemePicker = __decorate([
+    customElement('aithe-theme-picker')
+], AitheThemePicker);
+export { AitheThemePicker };

package/dist/components/theme/theme-preview.d.ts

@@ -1,5 +1,4 @@
 import { AitheElement } from '../../core/aithe-element';
-import type { AitheBuiltinTheme } from '../../types';
 /**
  * Live theme preview panel with an embedded theme picker and sample components.
  * 实时主题预览面板，内嵌主题选择器和示例组件。
@@ -18,7 +17,7 @@ import type { AitheBuiltinTheme } from '../../types';
  */
 export declare class AitheThemePreview extends AitheElement {
     /** Currently applied theme name. 当前应用的主题名称。 */
-    value: AitheBuiltinTheme | string;
+    value: string;
     private previewTheme;
     private previewShape;
     private previewShadow;

package/dist/components/theme/theme-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-preview.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preview.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,OAAO,KAAK,EAAE,iBAAiB,EAAkD,MAAM,QAAQ,CAAC;AAGhG;;;;;;;;;;;;;;;GAeG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,+CAA+C;IACnB,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAAW;IAE/D,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,WAAW,CAAoC;IAEhE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAsJpB;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAEF,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIhC;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIjC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAO5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,SAAS,CAAC,YAAY,IAAI,IAAI;IAM9B,MAAM;CA0GP"}
+{"version":3,"file":"theme-preview.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preview.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAOnD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,+CAA+C;IACnB,KAAK,EAAE,MAAM,CAAW;IAE3C,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,WAAW,CAAoC;IAEhE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAsJpB;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAEF,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIhC;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIjC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAO5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,SAAS,CAAC,YAAY,IAAI,IAAI;IAM9B,MAAM;CA0GP"}

package/dist/components/theme/theme-preview.js

@@ -0,0 +1,376 @@
+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, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aitheScrollbarStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { aitheThemeText } from '../../styles/theme';
+import { t } from '../../styles/i18n';
+/**
+ * Live theme preview panel with an embedded theme picker and sample components.
+ * 实时主题预览面板，内嵌主题选择器和示例组件。
+ *
+ * Renders a mini application layout (sidebar + content area) themed with the
+ * selected preview theme, allowing users to evaluate themes before applying.
+ * 渲染一个迷你应用布局（侧边栏 + 内容区），使用所选预览主题，
+ * 允许用户在应用前评估主题效果。
+ *
+ * @fires aithe-theme-apply - Emitted when the "Apply Theme" button is clicked. 点击"应用主题"按钮时发出，detail 包含 `{ theme: string }`。
+ *
+ * @example
+ * ```html
+ * <aithe-theme-preview value="dark"></aithe-theme-preview>
+ * ```
+ */
+let AitheThemePreview = class AitheThemePreview extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Currently applied theme name. 当前应用的主题名称。 */
+        this.value = 'light';
+        this.previewTheme = this.value;
+        this.previewShape = aitheUI.getShape();
+        this.previewShadow = aitheUI.getShadow();
+        this.previewTypo = aitheUI.getTypo();
+        this.handleThemeChange = (event) => {
+            event.preventDefault();
+            this.previewTheme = event.detail.theme;
+        };
+        this.handleShapeChange = (event) => {
+            event.preventDefault();
+            this.previewShape = event.detail.shape;
+            this.applyShapeTokensLocally();
+        };
+        this.handleShadowChange = (event) => {
+            event.preventDefault();
+            this.previewShadow = event.detail.shadow;
+            this.applyShadowTokensLocally();
+        };
+        this.handleTypoChange = (event) => {
+            event.preventDefault();
+            this.previewTypo = event.detail.typo;
+            this.applyTypoTokensLocally();
+        };
+        this.handleConfirm = () => {
+            this.value = this.previewTheme;
+            aitheUI.setTheme(this.previewTheme);
+            aitheUI.setShape(this.previewShape);
+            aitheUI.setShadow(this.previewShadow);
+            aitheUI.setTypo(this.previewTypo);
+            this.emit('aithe-theme-apply', { theme: this.previewTheme });
+        };
+        this.sidebarItems = [
+            { icon: '🏠', labelKey: 'theme.preview.dashboard' },
+            { icon: '📦', labelKey: 'theme.preview.components' },
+            { icon: '🎨', labelKey: 'theme.preview.themes' },
+            { icon: '⚙️', labelKey: 'theme.preview.settings' },
+        ];
+    }
+    static { this.styles = [
+        unsafeCSS(aitheThemeText),
+        aitheBaseStyles,
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: block;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        overflow: hidden;
+        background: var(--aithe-color-surface);
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-3) var(--aithe-space-4);
+        border-bottom: 1px solid var(--aithe-color-border);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+      }
+
+      .toolbar-label {
+        font-size: var(--aithe-font-size-sm);
+        font-weight: var(--aithe-font-weight-semibold);
+        color: var(--aithe-color-text);
+      }
+
+      .confirm-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 32px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-primary-6);
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          opacity 0.15s;
+      }
+
+      .confirm-btn:hover {
+        background: var(--aithe-primary-7);
+      }
+
+      .confirm-btn:active {
+        background: var(--aithe-primary-8);
+      }
+
+      .preview-area {
+        display: flex;
+        min-height: 420px;
+        background: var(--aithe-color-bg);
+        color: var(--aithe-color-text);
+      }
+
+      .sidebar {
+        width: 220px;
+        flex-shrink: 0;
+        border-right: 1px solid var(--aithe-color-border);
+        padding: var(--aithe-space-2) 0;
+        overflow-y: auto;
+        background: var(--aithe-color-surface);
+      }
+
+      .sidebar-item {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        width: 100%;
+        min-height: 40px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: 0;
+        background: transparent;
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        text-align: left;
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          color 0.15s;
+      }
+
+      .sidebar-item:hover {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .sidebar-item.active {
+        background: var(--aithe-color-surface-muted);
+        color: var(--aithe-primary-7);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .sidebar-icon {
+        font-size: 16px;
+        width: 20px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+
+      .content {
+        flex: 1;
+        padding: var(--aithe-space-5);
+        overflow-y: auto;
+      }
+
+      .section-title {
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+        color: var(--aithe-color-text);
+        margin: 0 0 var(--aithe-space-4) 0;
+      }
+
+      .component-section {
+        margin-bottom: var(--aithe-space-6);
+      }
+
+      .component-row {
+        display: flex;
+        gap: var(--aithe-space-3);
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: var(--aithe-space-3);
+      }
+
+      .input-row {
+        display: grid;
+        gap: var(--aithe-space-3);
+        max-width: 480px;
+        margin-bottom: var(--aithe-space-3);
+      }
+
+      .table-wrapper {
+        margin-bottom: var(--aithe-space-3);
+      }
+    `,
+    ]; }
+    applyShapeTokensLocally() {
+        const tokens = aitheUI.getShapeTokens(this.previewShape);
+        if (!tokens)
+            return;
+        for (const [key, value] of Object.entries(tokens)) {
+            this.style.setProperty(key, value);
+        }
+    }
+    applyShadowTokensLocally() {
+        const tokens = aitheUI.getShadowTokens(this.previewShadow);
+        if (!tokens)
+            return;
+        for (const [key, value] of Object.entries(tokens)) {
+            this.style.setProperty(key, value);
+        }
+    }
+    applyTypoTokensLocally() {
+        const tokens = aitheUI.getTypoTokens(this.previewTypo);
+        if (!tokens)
+            return;
+        for (const [key, value] of Object.entries(tokens)) {
+            this.style.setProperty(key, value);
+        }
+    }
+    firstUpdated() {
+        this.applyShapeTokensLocally();
+        this.applyShadowTokensLocally();
+        this.applyTypoTokensLocally();
+    }
+    render() {
+        return html `
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <span class="toolbar-label">${t('theme.preview.title')}</span>
+          <aithe-theme-picker
+            .value=${this.previewTheme}
+            @aithe-theme-change=${this.handleThemeChange}
+          ></aithe-theme-picker>
+          <aithe-shape-picker
+            .value=${this.previewShape}
+            @aithe-shape-change=${this.handleShapeChange}
+          ></aithe-shape-picker>
+          <aithe-shadow-picker
+            .value=${this.previewShadow}
+            @aithe-shadow-change=${this.handleShadowChange}
+          ></aithe-shadow-picker>
+          <aithe-typo-picker
+            .value=${this.previewTypo}
+            @aithe-typo-change=${this.handleTypoChange}
+          ></aithe-typo-picker>
+        </div>
+        <button class="confirm-btn" type="button" @click=${this.handleConfirm}>
+          ${t('theme.preview.applyTheme')}
+        </button>
+      </div>
+      <div class="preview-area" data-aithe-theme=${this.previewTheme}>
+        <nav class="sidebar">
+          ${this.sidebarItems.map((item, i) => html `
+              <button class=${`sidebar-item${i === 0 ? ' active' : ''}`} type="button">
+                <span class="sidebar-icon">${item.icon}</span>
+                ${t(item.labelKey)}
+              </button>
+            `)}
+        </nav>
+        <main class="content">
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.buttons')}</h3>
+            <div class="component-row">
+              <aithe-button type="primary">${t('theme.preview.primary')}</aithe-button>
+              <aithe-button type="default">${t('theme.preview.default')}</aithe-button>
+              <aithe-button type="dashed">${t('theme.preview.dashed')}</aithe-button>
+              <aithe-button type="text">${t('theme.preview.text')}</aithe-button>
+              <aithe-button type="link">${t('theme.preview.link')}</aithe-button>
+              <aithe-button type="primary" danger>${t('theme.preview.danger')}</aithe-button>
+            </div>
+          </div>
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.input')}</h3>
+            <div class="input-row">
+              <aithe-input placeholder=${t('theme.preview.enterText')} clearable></aithe-input>
+              <aithe-input
+                placeholder=${t('theme.preview.search')}
+                status="success"
+                value=${t('theme.preview.brand')}
+              ></aithe-input>
+            </div>
+          </div>
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.tags')}</h3>
+            <div class="component-row">
+              <aithe-tag variant="primary">${t('theme.preview.primary')}</aithe-tag>
+              <aithe-tag variant="success">${t('theme.preview.success')}</aithe-tag>
+              <aithe-tag variant="warning">${t('theme.preview.warning')}</aithe-tag>
+              <aithe-tag variant="danger">${t('theme.preview.danger')}</aithe-tag>
+            </div>
+          </div>
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.table')}</h3>
+            <div class="table-wrapper">
+              <aithe-table
+                striped
+                .columns=${[
+            { id: 'name', title: t('theme.preview.name'), sortable: true },
+            { id: 'role', title: t('theme.preview.role') },
+            { id: 'status', title: t('theme.preview.status'), variant: 'success' },
+        ]}
+                .data=${[
+            {
+                id: 1,
+                name: 'Alice',
+                role: t('theme.preview.admin'),
+                status: t('theme.preview.active'),
+            },
+            {
+                id: 2,
+                name: 'Bob',
+                role: t('theme.preview.editor'),
+                status: t('theme.preview.active'),
+            },
+            {
+                id: 3,
+                name: 'Carol',
+                role: t('theme.preview.viewer'),
+                status: t('theme.preview.inactive'),
+            },
+        ]}
+              ></aithe-table>
+            </div>
+          </div>
+        </main>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheThemePreview.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewTheme", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewShape", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewShadow", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewTypo", void 0);
+AitheThemePreview = __decorate([
+    customElement('aithe-theme-preview')
+], AitheThemePreview);
+export { AitheThemePreview };

package/dist/components/theme/theme-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-switch.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-switch.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAgD9E,qBACa,gBAAiB,SAAQ,YAAY;IACpB,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAE7D,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,WAAW,CAAqB;IAE9B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyEpB;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,eAAe,CAAC,CAAa;IAErC,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAU5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAMzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAKjC;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAOzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAsC/B;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAiB9B;IAEF,MAAM;CAuBP"}
+{"version":3,"file":"theme-switch.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-switch.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAiD9E,qBACa,gBAAiB,SAAQ,YAAY;IACpB,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAE7D,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,WAAW,CAAqB;IAE9B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyEpB;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,eAAe,CAAC,CAAa;IAErC,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAU5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAMzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAKjC;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAOzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CA2B/B;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAiB9B;IAEF,MAAM;CAuBP"}