@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/apps/demo/pages/progress.js

@@ -0,0 +1,42 @@
+import { t } from '../../../styles/i18n';
+export const progressPage = {
+    key: 'progress',
+    title: () => t('demo.progress.title'),
+    description: () => t('demo.progress.description'),
+    examples: [
+        {
+            title: () => t('demo.progress.bar.title'),
+            description: () => t('demo.progress.bar.description'),
+            code: `<div style="display:grid;gap:16px;max-width:420px;">
+  <aithe-progress-bar percent="42"></aithe-progress-bar>
+  <aithe-progress-bar percent="76" status="success"></aithe-progress-bar>
+  <aithe-progress-bar percent="91" status="danger"></aithe-progress-bar>
+</div>`,
+        },
+        {
+            title: () => t('demo.progress.ring.title'),
+            description: () => t('demo.progress.ring.description'),
+            code: `<aithe-progress-ring percent="68" size="132" status="warning"></aithe-progress-ring>`,
+            previewHeight: '180px',
+        },
+        {
+            title: () => t('demo.progress.spinner.title'),
+            description: () => t('demo.progress.spinner.description'),
+            code: `<div style="display:flex;gap:16px;align-items:center;">
+  <aithe-spinner size="sm"></aithe-spinner>
+  <aithe-spinner size="md"></aithe-spinner>
+  <aithe-spinner variant="dots" color="var(--aithe-success-6)"></aithe-spinner>
+</div>`,
+        },
+        {
+            title: () => t('demo.progress.skeleton.title'),
+            description: () => t('demo.progress.skeleton.description'),
+            code: `<div style="display:grid;gap:16px;">
+  <aithe-skeleton rows="3"></aithe-skeleton>
+  <aithe-skeleton rows="1" shape="circle"></aithe-skeleton>
+  <aithe-skeleton rows="1" shape="rect"></aithe-skeleton>
+</div>`,
+            previewHeight: '320px',
+        },
+    ],
+};

package/dist/apps/demo/pages/theme.js

@@ -0,0 +1,126 @@
+import { t } from '../../../styles/i18n';
+export const themePage = {
+    key: 'theme',
+    title: () => t('demo.theme.title'),
+    description: () => t('demo.theme.description'),
+    examples: [
+        {
+            title: () => t('demo.theme.picker.title'),
+            description: () => t('demo.theme.picker.description'),
+            code: `<aithe-theme-picker value="light"></aithe-theme-picker>`,
+        },
+        {
+            title: () => t('demo.theme.pickerHandler.title'),
+            description: () => t('demo.theme.pickerHandler.description'),
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+  <aithe-theme-picker id="demo-picker" value="light"></aithe-theme-picker>
+  <span id="demo-label" style="font-size:14px;color:var(--aithe-color-text-muted);">Current: light</span>
+</div>`,
+            setup: (root) => {
+                const picker = root.querySelector('#demo-picker');
+                const label = root.querySelector('#demo-label');
+                picker?.addEventListener('aithe-theme-change', (event) => {
+                    const { theme } = event.detail;
+                    if (label)
+                        label.textContent = `Current: ${theme}`;
+                });
+            },
+        },
+        {
+            title: () => t('demo.theme.pickerPlacement.title'),
+            description: () => t('demo.theme.pickerPlacement.description'),
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+  <span style="font-size:13px;color:var(--aithe-color-text-muted);">bottom-end (default)</span>
+  <aithe-theme-picker value="light"></aithe-theme-picker>
+  <span style="font-size:13px;color:var(--aithe-color-text-muted);">bottom-start</span>
+  <aithe-theme-picker value="dark" placement="bottom-start"></aithe-theme-picker>
+</div>`,
+        },
+        {
+            title: () => t('demo.theme.preview.title'),
+            description: () => t('demo.theme.preview.description'),
+            code: `<aithe-theme-preview id="demo-preview" value="light"></aithe-theme-preview>`,
+            setup: (root) => {
+                const preview = root.querySelector('#demo-preview');
+                preview?.addEventListener('aithe-theme-apply', (event) => {
+                    const { theme } = event.detail;
+                    document.documentElement.dataset.aitheTheme = theme;
+                });
+            },
+        },
+        {
+            title: () => t('demo.theme.shapePicker.title', 'Shape Picker'),
+            description: () => t('demo.theme.shapePicker.description', 'Switch between 8 built-in shape styles (Theme × Shape).'),
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+  <aithe-shape-picker id="demo-shape"></aithe-shape-picker>
+  <span id="demo-shape-label" style="font-size:14px;color:var(--aithe-color-text-muted);">Current: rounded</span>
+</div>`,
+            setup: (root) => {
+                const picker = root.querySelector('#demo-shape');
+                const label = root.querySelector('#demo-shape-label');
+                picker?.addEventListener('aithe-shape-change', (event) => {
+                    const { shape } = event.detail;
+                    if (label)
+                        label.textContent = `Current: ${shape}`;
+                });
+            },
+        },
+        {
+            title: () => 'Shadow Picker (Standalone)',
+            description: () => 'Switch between 9 built-in shadow styles. Test with native HTML elements.',
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap; margin-bottom: 24px;">
+  <aithe-shadow-picker id="demo-shadow"></aithe-shadow-picker>
+  <span id="demo-shadow-label" style="font-size:14px;color:var(--aithe-color-text-muted);">Current: skeuomorphic</span>
+</div>
+<h4>Native HTML Elements (should inherit CSS variables):</h4>
+<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap; margin-bottom: 16px;">
+  <button class="test-btn" style="padding: 12px 20px; cursor: pointer;">Native Button</button>
+  <button class="test-btn" style="padding: 12px 20px; background: #4d8bff; color: white; border: none; cursor: pointer;">Primary</button>
+</div>
+<div class="test-panel" style="margin-top: 16px; padding: 24px; background: var(--aithe-color-surface-elevated); border-radius: 8px; box-shadow: var(--aithe-shadow-3);">
+  Panel with box-shadow: var(--aithe-shadow-3)
+</div>`,
+            setup: (root) => {
+                const picker = root.querySelector('#demo-shadow');
+                const label = root.querySelector('#demo-shadow-label');
+                if (picker && label) {
+                    picker.addEventListener('aithe-shadow-change', (event) => {
+                        const { shadow } = event.detail;
+                        label.textContent = `Current: ${shadow}`;
+                    });
+                }
+            },
+        },
+        {
+            title: () => t('demo.theme.typoPicker.title', 'Typo Picker (Standalone)'),
+            description: () => t('demo.theme.typoPicker.description', 'Switch between 4 built-in typography styles (minimal, business, luxury, compact). Observe font-size, spacing and control-height changes.'),
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap; margin-bottom: 24px;">
+  <aithe-typo-picker id="demo-typo"></aithe-typo-picker>
+  <span id="demo-typo-label" style="font-size:14px;color:var(--aithe-color-text-muted);">Current: business</span>
+</div>
+<h4>Typography Preview:</h4>
+<div style="margin-bottom: 12px;">
+  <p style="font-size:var(--aithe-font-size-2xl);font-weight:var(--aithe-font-weight-bold);line-height:var(--aithe-line-height-tight);margin:0 0 var(--aithe-space-3) 0;">Heading XL</p>
+  <p style="font-size:var(--aithe-font-size-lg);font-weight:var(--aithe-font-weight-semibold);line-height:var(--aithe-line-height-base);margin:0 0 var(--aithe-space-2) 0;">Section Title</p>
+  <p style="font-size:var(--aithe-font-size-md);line-height:var(--aithe-line-height-base);margin:0 0 var(--aithe-space-2) 0;">Body text at medium size with base line-height. Spacing and sizing adjust per typo style.</p>
+  <p style="font-size:var(--aithe-font-size-sm);line-height:var(--aithe-line-height-base);color:var(--aithe-color-text-muted);margin:0;">Small caption text for secondary info.</p>
+</div>
+<div style="display:flex;gap:var(--aithe-space-3);align-items:center;flex-wrap:wrap;">
+  <aithe-button type="primary" size="sm">Small</aithe-button>
+  <aithe-button type="primary">Medium</aithe-button>
+  <aithe-button type="primary" size="lg">Large</aithe-button>
+</div>`,
+            previewHeight: '320px',
+            setup: (root) => {
+                const picker = root.querySelector('#demo-typo');
+                const label = root.querySelector('#demo-typo-label');
+                if (picker && label) {
+                    picker.addEventListener('aithe-typo-change', (event) => {
+                        const { typo } = event.detail;
+                        label.textContent = `Current: ${typo}`;
+                    });
+                }
+            },
+        },
+    ],
+};

package/dist/apps/demo/standalone.js

@@ -0,0 +1 @@
+import './app';

package/dist/components/basic/AGENTS.md

@@ -31,4 +31,5 @@
 - 组件标签统一使用 `aithe-` 前缀
 - 事件名统一使用 `aithe-` 前缀
 - 公共属性：variant/size/theme/disabled/log（继承自基类）
+- 输入类组件（input/textarea）在原生事件处理器中调用 `event.stopPropagation()`，防止原生事件逃逸到组件外部
 - 新增组件需在 `src/index.ts` 添加导出，在 `docs/api/basic/` 添加 API 文档

package/dist/components/basic/avatar.js

@@ -0,0 +1,168 @@
+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 } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+import { IconUtil } from '../../utils';
+/**
+ * Avatar displaying an image, initials, or custom content.
+ * 头像组件，显示图片、首字母或自定义内容。
+ *
+ * The `text` property supports the extended icon format `(type)value`:
+ * - `(auto)Text` — auto-generate from first character (default for bare text)
+ * - `(url)URL|AltText` — load from URL with alt fallback
+ * - `(class)iconName` — render a built-in icon
+ * `text` 属性支持扩展图标格式 `(type)value`。
+ *
+ * For icon-format text, rendering is delegated to {@link IconUtil.render}.
+ * Size presets are resolved via {@link IconUtil.resolveSize} against {@link ICON_SIZE_MAP}.
+ * 图标格式文本委托给 {@link IconUtil.render} 渲染，尺寸预设通过 {@link IconUtil.resolveSize} 解析。
+ *
+ * @slot - Default slot for fallback content when image fails. 图片加载失败时的后备内容。
+ * @example
+ * ```html
+ * <aithe-avatar src="/photo.jpg" alt="User" shape="circle" size="md"></aithe-avatar>
+ * <aithe-avatar text="Jane Smith" shape="square" size="lg"></aithe-avatar>
+ * <aithe-avatar text="(url)https://example.com/avatar.svg|User" shape="circle" size="lg"></aithe-avatar>
+ * <aithe-avatar text="(class)user" shape="circle" size="lg"></aithe-avatar>
+ * ```
+ */
+let AitheAvatar = class AitheAvatar extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Image source URL. 图片源地址。 */
+        this.src = '';
+        /** Alt text for the image. 图片替代文本。 */
+        this.alt = '';
+        /** Text or icon descriptor used to generate fallback content. 用于生成后备内容的文本或图标描述符。 */
+        this.text = '';
+        /** Avatar shape variant. 头像形状。 */
+        this.shape = 'circle';
+        /** Avatar size preset or explicit CSS value. The inner icon is resolved via {@link IconUtil.resolveSize} against {@link ICON_SIZE_MAP}. 头像尺寸预设或显式 CSS 值，内部图标通过 {@link IconUtil.resolveSize} 结合 {@link ICON_SIZE_MAP} 解析。 */
+        this.size = 'md';
+        /** Whether the image failed to load. 图片是否加载失败。 */
+        this.imageBroken = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .avatar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        width: var(--aithe-avatar-size, 32px);
+        height: var(--aithe-avatar-size, 32px);
+        background: linear-gradient(135deg, var(--aithe-primary-4), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        font-weight: var(--aithe-font-weight-semibold);
+        box-shadow: var(--aithe-shadow-1);
+      }
+
+      .circle {
+        border-radius: 50%;
+      }
+
+      .square {
+        border-radius: var(--aithe-container-radius-lg);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .avatar-text {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `,
+    ]; }
+    /** Extracts up to two initials from the text property. 从 text 属性提取最多两个首字母。 */
+    get fallbackText() {
+        const source = this.text.trim();
+        if (!source) {
+            return '';
+        }
+        const chunks = source.split(/\s+/).slice(0, 2);
+        return chunks.map((chunk) => chunk[0]?.toUpperCase() ?? '').join('');
+    }
+    /** Whether text uses the extended icon format `(type)value`. 文本是否使用扩展图标格式。 */
+    get isIconFormat() {
+        return /^\(\w+\)/.test(this.text.trim());
+    }
+    /** Resolve avatar size to a CSS pixel value for IconUtil. 将头像尺寸解析为 CSS 像素值供 IconUtil 使用。 */
+    get iconSize() {
+        return IconUtil.resolveSize(this.size, '16px');
+    }
+    /** Compute the container size from icon size (icon + padding). 根据图标尺寸计算容器大小。 */
+    get containerSize() {
+        const raw = this.iconSize;
+        const num = Number.parseInt(raw, 10);
+        if (Number.isNaN(num))
+            return '32px';
+        return `${Math.round(num * 1.6)}px`;
+    }
+    render() {
+        const showImage = Boolean(this.src) && !this.imageBroken;
+        let content;
+        if (showImage) {
+            content = html `<img alt=${this.alt} src=${this.src} @error=${() => (this.imageBroken = true)} />`;
+        }
+        else if (this.isIconFormat) {
+            content = IconUtil.render(this.text, this.iconSize);
+        }
+        else {
+            content = html `<span class="avatar-text" style="font-size:calc(${this.iconSize} * 0.75);line-height:1;">${this.fallbackText}</span>`;
+        }
+        return html `
+      <span
+        class=${classMap({
+            avatar: true,
+            [this.shape]: true,
+        })}
+        style="--aithe-avatar-size: ${this.containerSize};"
+        aria-label=${this.alt || this.text || t('basic.avatar.ariaLabel')}
+        role="img"
+      >
+        ${content}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAvatar.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], AitheAvatar.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], AitheAvatar.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], AitheAvatar.prototype, "shape", void 0);
+__decorate([
+    property({ type: String })
+], AitheAvatar.prototype, "size", void 0);
+__decorate([
+    state()
+], AitheAvatar.prototype, "imageBroken", void 0);
+AitheAvatar = __decorate([
+    customElement('aithe-avatar')
+], AitheAvatar);
+export { AitheAvatar };

package/dist/components/basic/badge.js

@@ -0,0 +1,157 @@
+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 } from 'lit';
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Badge / count indicator overlaid on an anchor element.
+ * 徽标/计数指示器，覆盖在锚点元素上。
+ *
+ * @slot - Default slot for the anchor element. 锚点元素内容。
+ * @slot badge - Custom badge content (overrides `value` display). 自定义徽标内容。
+ * @example
+ * ```html
+ * <aithe-badge value="5">
+ *   <aithe-button type="default">Messages</aithe-button>
+ * </aithe-badge>
+ * ```
+ */
+let AitheBadge = class AitheBadge extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Badge display value (number or string). 徽标显示值（数字或字符串）。 */
+        this.value = '';
+        /** Maximum count before showing "N+" format. 超过此数值显示"N+"格式。 */
+        this.maxCount = 99;
+        /** Whether to show a small dot instead of a count. 是否显示小圆点而非数字。 */
+        this.dot = false;
+        /** Badge position relative to the anchor. 徽标相对于锚点的位置。 */
+        this.position = 'top-right';
+        this.hasBadgeSlot = false;
+        /** Syncs badge slot presence state. 同步徽标插槽状态。 */
+        this.syncSlot = () => {
+            this.hasBadgeSlot = this.badgeSlotNodes.length > 0;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: inline-flex;
+      }
+
+      .anchor {
+        position: relative;
+        display: inline-flex;
+      }
+
+      .badge {
+        position: absolute;
+        z-index: 2;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        min-height: 22px;
+        padding: 0 var(--aithe-space-2);
+        border: 2px solid var(--aithe-color-surface-elevated);
+        border-radius: var(--aithe-radius-full);
+        background: linear-gradient(180deg, var(--aithe-danger-5), var(--aithe-danger-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        font-size: var(--aithe-font-size-xs);
+        font-weight: var(--aithe-font-weight-semibold);
+        box-shadow: var(--aithe-shadow-1);
+      }
+
+      .badge.dot {
+        min-width: 12px;
+        min-height: 12px;
+        padding: 0;
+      }
+
+      .top-right {
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+      }
+
+      .top-left {
+        top: 0;
+        left: 0;
+        transform: translate(-50%, -50%);
+      }
+
+      .bottom-right {
+        right: 0;
+        bottom: 0;
+        transform: translate(50%, 50%);
+      }
+
+      .bottom-left {
+        bottom: 0;
+        left: 0;
+        transform: translate(-50%, 50%);
+      }
+    `,
+    ]; }
+    /** Computes the formatted badge display value. 计算格式化后的徽标显示值。 */
+    get displayValue() {
+        if (this.dot) {
+            return '';
+        }
+        const parsed = Number(this.value);
+        if (Number.isFinite(parsed) && this.value !== '') {
+            if (parsed === 0)
+                return '';
+            return parsed > this.maxCount ? `${this.maxCount}+` : String(parsed);
+        }
+        return this.value;
+    }
+    render() {
+        const showBadge = this.dot || this.hasBadgeSlot || Boolean(this.displayValue);
+        return html `
+      <span class="anchor">
+        <slot></slot>
+        <span
+          ?hidden=${!showBadge}
+          class=${classMap({
+            badge: true,
+            dot: this.dot,
+            [this.position]: true,
+        })}
+        >
+          <slot name="badge" @slotchange=${this.syncSlot}>${this.displayValue}</slot>
+        </span>
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBadge.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-count' })
+], AitheBadge.prototype, "maxCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheBadge.prototype, "dot", void 0);
+__decorate([
+    property({ type: String })
+], AitheBadge.prototype, "position", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'badge' })
+], AitheBadge.prototype, "badgeSlotNodes", void 0);
+__decorate([
+    state()
+], AitheBadge.prototype, "hasBadgeSlot", void 0);
+AitheBadge = __decorate([
+    customElement('aithe-badge')
+], AitheBadge);
+export { AitheBadge };

package/dist/components/basic/button-group.js

@@ -0,0 +1,70 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { normalizeCssUnit } from '../../utils';
+/**
+ * Button group layout helper for consistent spacing.
+ * 按钮组布局辅助组件，提供统一间距。
+ *
+ * @slot - Default slot for button elements. 按钮元素内容。
+ * @example
+ * ```html
+ * <aithe-button-group gap="var(--aithe-space-3)">
+ *   <aithe-button>Cancel</aithe-button>
+ *   <aithe-button type="primary">Submit</aithe-button>
+ * </aithe-button-group>
+ * ```
+ */
+let AitheButtonGroup = class AitheButtonGroup extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Gap between buttons (CSS value). 按钮间距（CSS 值）。 */
+        this.gap = 'var(--aithe-space-2)';
+        /** Whether buttons are stacked vertically. 是否垂直排列按钮。 */
+        this.vertical = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+      }
+    `,
+    ]; }
+    render() {
+        const gap = normalizeCssUnit(this.gap, 'var(--aithe-space-2)');
+        return html `
+      <div
+        style=${styleMap({
+            alignItems: 'stretch',
+            display: 'inline-flex',
+            flexDirection: this.vertical ? 'column' : 'row',
+            flexWrap: 'wrap',
+            gap,
+            maxWidth: '100%',
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheButtonGroup.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheButtonGroup.prototype, "vertical", void 0);
+AitheButtonGroup = __decorate([
+    customElement('aithe-button-group')
+], AitheButtonGroup);
+export { AitheButtonGroup };

package/dist/components/basic/button.d.ts

@@ -18,13 +18,13 @@ import { AitheElement } from '../../core/aithe-element';
  * @example
  * ```html
  * <aithe-button type="primary" size="medium">Submit</aithe-button>
- * <aithe-button type="danger" loading>Deleting...</aithe-button>
+ * <aithe-button variant="danger" loading>Deleting...</aithe-button>
  * <aithe-button type="primary" href="/dashboard">Go to Dashboard</aithe-button>
  * ```
  */
 export declare class AitheButton extends AitheElement {
     /** Visual type of the button. 按钮的视觉类型。 */
-    type: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    type: 'default' | 'dashed' | 'text' | 'link';
     /** Size scale of the button. 按钮的尺寸规格。 */
     size: 'small' | 'medium' | 'large';
     /** Display title for the button (shown as tooltip). 按钮的显示标题（作为工具提示）。 */
@@ -35,8 +35,6 @@ export declare class AitheButton extends AitheElement {
     disabled: boolean;
     /** Whether the button shows a loading spinner. 按钮是否显示加载旋转器。 */
     loading: boolean;
-    /** Whether the button uses danger styling. 按钮是否使用危险样式。 */
-    danger: boolean;
     /** Whether the button spans the full width of its container. 按钮是否占满容器宽度。 */
     block: boolean;
     /** Link URL. When set, the button renders as an `<a>` element. 链接地址。设置后按钮渲染为 `<a>` 元素。 */

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/basic/button.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C,0CAA0C;IACd,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAa;IACjG,yCAAyC;IACb,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC1E,wEAAwE;IAC5C,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,8CAA8C;IACF,QAAQ,UAAS;IAC7D,+DAA+D;IACnB,OAAO,UAAS;IAC5D,0DAA0D;IACd,MAAM,UAAS;IAC3D,4EAA4E;IAChC,KAAK,UAAS;IAC1D,0FAA0F;IAC9D,IAAI,SAAM;IACtC,wHAAwH;IAC5F,MAAM,SAAM;IAExC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqJpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,WAAW,CAoB1B;IAEF,MAAM;CAuDP"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/basic/button.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C,0CAA0C;IACd,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAa;IACrF,yCAAyC;IACb,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC1E,wEAAwE;IAC5C,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,8CAA8C;IACF,QAAQ,UAAS;IAC7D,+DAA+D;IACnB,OAAO,UAAS;IAC5D,4EAA4E;IAChC,KAAK,UAAS;IAC1D,0FAA0F;IAC9D,IAAI,SAAM;IACtC,wHAAwH;IAC5F,MAAM,SAAM;IAExC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqJpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,WAAW,CAoB1B;IAEF,MAAM;CAuDP"}