@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/layout/flex.js

@@ -0,0 +1,100 @@
+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';
+/**
+ * Quick flex layout helper with declarative properties.
+ * 快速弹性布局辅助组件，支持声明式属性配置。
+ *
+ * @slot - Default slot for flex child elements. 弹性子元素内容。
+ * @example
+ * ```html
+ * <aithe-flex justify="center" align="middle" gap="var(--aithe-space-md)" direction="row">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </aithe-flex>
+ * ```
+ */
+let AitheFlex = class AitheFlex extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Flex justify-content value. flex justify-content 值。 */
+        this.justify = 'flex-start';
+        /** Flex align-items value. flex align-items 值。 */
+        this.align = 'stretch';
+        /** Flex direction. flex 方向。 */
+        this.direction = 'row';
+        /** Gap between flex items (CSS value). flex 子元素间距（CSS 值）。 */
+        this.gap = 'var(--aithe-space-md)';
+        /** Flex wrap behavior. flex 换行方式。 */
+        this.wrap = 'nowrap';
+        /** Whether the flex container is inline. 是否为内联弹性容器。 */
+        this.inline = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        min-width: 0;
+      }
+
+      .wrap {
+        min-width: 0;
+        width: 100%;
+      }
+
+      :host([inline]) .wrap {
+        width: auto;
+      }
+    `,
+    ]; }
+    render() {
+        const gap = normalizeCssUnit(this.gap, 'var(--aithe-space-md)');
+        return html `
+      <div
+        class="wrap"
+        style=${styleMap({
+            alignItems: this.align,
+            display: this.inline ? 'inline-flex' : 'flex',
+            flexDirection: this.direction,
+            flexWrap: this.wrap,
+            gap,
+            justifyContent: this.justify,
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheFlex.prototype, "justify", void 0);
+__decorate([
+    property({ type: String })
+], AitheFlex.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], AitheFlex.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], AitheFlex.prototype, "gap", void 0);
+__decorate([
+    property({ type: String })
+], AitheFlex.prototype, "wrap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheFlex.prototype, "inline", void 0);
+AitheFlex = __decorate([
+    customElement('aithe-flex')
+], AitheFlex);
+export { AitheFlex };

package/dist/components/layout/row.js

@@ -0,0 +1,103 @@
+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';
+/**
+ * 24-grid row container for grid layout system.
+ * 24栅格行容器，用于栅格布局系统。
+ *
+ * @slot - Default slot for `aithe-col` elements. aithe-col 列元素。
+ * @example
+ * ```html
+ * <aithe-row gutter="16" justify="space-between" align="center">
+ *   <aithe-col span="12">Left</aithe-col>
+ *   <aithe-col span="12">Right</aithe-col>
+ * </aithe-row>
+ * ```
+ */
+let AitheRow = class AitheRow extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Column gutter in pixels. 列间距（像素）。 */
+        this.gutter = 24;
+        /** Vertical gap between rows in pixels. 行间距（像素）。 */
+        this.rowGap = 24;
+        /** Horizontal alignment of columns. 列水平对齐方式。 */
+        this.justify = 'start';
+        /** Vertical alignment of columns. 列垂直对齐方式。 */
+        this.align = 'stretch';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        min-width: 0;
+      }
+
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        min-width: 0;
+        width: calc(100% + var(--aithe-row-gutter, 24px));
+        margin-inline: calc(var(--aithe-row-gutter, 24px) / -2);
+      }
+
+      ::slotted(aithe-col) {
+        min-width: 0;
+        padding-inline: calc(var(--aithe-row-gutter, 24px) / 2);
+      }
+    `,
+    ]; }
+    render() {
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            'space-between': 'space-between',
+            'space-around': 'space-around',
+        };
+        const alignMap = {
+            stretch: 'stretch',
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+        };
+        return html `
+      <div
+        class="row"
+        style=${styleMap({
+            '--aithe-row-gutter': `${this.gutter}px`,
+            alignItems: alignMap[this.align],
+            justifyContent: justifyMap[this.justify],
+            rowGap: `${this.rowGap}px`,
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheRow.prototype, "gutter", void 0);
+__decorate([
+    property({ type: Number, attribute: 'row-gap' })
+], AitheRow.prototype, "rowGap", void 0);
+__decorate([
+    property({ type: String })
+], AitheRow.prototype, "justify", void 0);
+__decorate([
+    property({ type: String })
+], AitheRow.prototype, "align", void 0);
+AitheRow = __decorate([
+    customElement('aithe-row')
+], AitheRow);
+export { AitheRow };

package/dist/components/layout/space.js

@@ -0,0 +1,85 @@
+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';
+/**
+ * Equal spacing helper for consistent gaps between child elements.
+ * 等间距辅助组件，为子元素提供统一间距。
+ *
+ * @slot - Default slot for spaced child elements. 需要间距的子元素内容。
+ * @example
+ * ```html
+ * <aithe-space size="var(--aithe-space-md)" direction="horizontal" wrap>
+ *   <aithe-button>Save</aithe-button>
+ *   <aithe-button>Cancel</aithe-button>
+ * </aithe-space>
+ * ```
+ */
+let AitheSpace = class AitheSpace extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Gap size between items (CSS value). 子元素间距大小（CSS 值）。 */
+        this.size = 'var(--aithe-space-md)';
+        /** Spacing direction. 间距方向。 */
+        this.direction = 'vertical';
+        /** Cross-axis alignment. 交叉轴对齐方式。 */
+        this.align = 'stretch';
+        /** Whether items wrap when overflowing. 子元素溢出时是否换行。 */
+        this.wrap = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        min-width: 0;
+      }
+
+      .wrap {
+        min-width: 0;
+        width: 100%;
+      }
+    `,
+    ]; }
+    render() {
+        const gap = normalizeCssUnit(this.size, 'var(--aithe-space-md)');
+        return html `
+      <div
+        class="wrap"
+        style=${styleMap({
+            alignItems: this.align,
+            display: 'flex',
+            flexDirection: this.direction === 'vertical' ? 'column' : 'row',
+            flexWrap: this.wrap ? 'wrap' : 'nowrap',
+            gap,
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSpace.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheSpace.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], AitheSpace.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSpace.prototype, "wrap", void 0);
+AitheSpace = __decorate([
+    customElement('aithe-space')
+], AitheSpace);
+export { AitheSpace };

package/dist/components/navigation/back-top.js

@@ -0,0 +1,127 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Back to top floating action button that appears after scrolling past a threshold.
+ * 回到顶部浮动按钮，滚动超过阈值后出现。
+ *
+ * @slot - Default slot for custom button content (overrides default arrow). 自定义按钮内容（覆盖默认箭头）。
+ * @example
+ * ```html
+ * <aithe-back-top visibility-height="300" target="#scroll-container"></aithe-back-top>
+ * ```
+ */
+let AitheBackTop = class AitheBackTop extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** CSS selector for the scroll container (defaults to window). 滚动容器的 CSS 选择器（默认为 window）。 */
+        this.target = '';
+        /** Scroll threshold in pixels before the button appears. 按钮出现前的滚动阈值（像素）。 */
+        this.visibilityHeight = 260;
+        this.visible = false;
+        this.scrollTarget = null;
+        this.handleScroll = () => {
+            const top = this.scrollTarget instanceof Window
+                ? globalThis.scrollY
+                : this.scrollTarget.scrollTop;
+            this.visible = top >= this.visibilityHeight;
+        };
+        this.scrollToTop = () => {
+            if (this.scrollTarget instanceof Window) {
+                globalThis.scrollTo({ top: 0, behavior: 'smooth' });
+                return;
+            }
+            this.scrollTarget.scrollTo({ top: 0, behavior: 'smooth' });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: fixed;
+        right: 28px;
+        bottom: 28px;
+        z-index: var(--aithe-z-dropdown);
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: 50%;
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        box-shadow: var(--aithe-shadow-2);
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.bindTarget();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unbindTarget();
+    }
+    updated(changed) {
+        if (changed.has('target')) {
+            this.unbindTarget();
+            this.bindTarget();
+        }
+    }
+    resolveTarget() {
+        const root = this.getRootNode();
+        const shadowTarget = root instanceof ShadowRoot && this.target
+            ? root.querySelector(this.target)
+            : null;
+        const target = shadowTarget ?? (this.target ? document.querySelector(this.target) : null);
+        return target ?? globalThis.window;
+    }
+    bindTarget() {
+        this.scrollTarget = this.resolveTarget();
+        this.scrollTarget.addEventListener('scroll', this.handleScroll, { passive: true });
+        this.handleScroll();
+    }
+    unbindTarget() {
+        this.scrollTarget?.removeEventListener('scroll', this.handleScroll);
+        this.scrollTarget = null;
+    }
+    render() {
+        return this.visible
+            ? html `
+          <button
+            type="button"
+            aria-label=${t('navigation.backTop.ariaLabel')}
+            @click=${this.scrollToTop}
+          >
+            ↑
+          </button>
+        `
+            : html ``;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBackTop.prototype, "target", void 0);
+__decorate([
+    property({ type: Number, attribute: 'visibility-height' })
+], AitheBackTop.prototype, "visibilityHeight", void 0);
+__decorate([
+    state()
+], AitheBackTop.prototype, "visible", void 0);
+AitheBackTop = __decorate([
+    customElement('aithe-back-top')
+], AitheBackTop);
+export { AitheBackTop };

package/dist/components/navigation/breadcrumb-item.js

@@ -0,0 +1,108 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Single breadcrumb link or text item for use inside `aithe-breadcrumb`.
+ * 单个面包屑链接或文本项，用于 aithe-breadcrumb 内部。
+ *
+ * @slot - Default slot for breadcrumb item label text. 面包屑项标签文本。
+ * @example
+ * ```html
+ * <aithe-breadcrumb-item href="/settings" target="_self">Settings</aithe-breadcrumb-item>
+ * ```
+ */
+let AitheBreadcrumbItem = class AitheBreadcrumbItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Link URL for navigable breadcrumb items. 可导航面包屑项的链接地址。 */
+        this.href = '';
+        /** Link target attribute. 链接 target 属性。 */
+        this.target = '';
+        /** Whether the breadcrumb item is disabled. 是否禁用面包屑项。 */
+        this.disabled = false;
+        /** Whether this is the current (last) breadcrumb item. 是否为当前（最后一个）面包屑项。 */
+        this.current = false;
+        /** Separator character (inherited from parent `aithe-breadcrumb`). 分隔符（从父级 aithe-breadcrumb 继承）。 */
+        this.separator = '/';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .content {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+      }
+
+      a {
+        color: var(--aithe-primary-6);
+        text-decoration: none;
+      }
+
+      .text {
+        color: var(--aithe-color-text-muted);
+      }
+
+      :host([current]) .text {
+        color: var(--aithe-color-text);
+        font-weight: var(--aithe-font-weight-medium);
+      }
+
+      .separator {
+        color: var(--aithe-color-text-subtle);
+      }
+    `,
+    ]; }
+    render() {
+        const content = this.current || !this.href || this.disabled
+            ? html `
+            <span class="text"><slot></slot></span>
+          `
+            : html `
+            <a href=${this.href} target=${this.target || '_self'}>
+              <slot></slot>
+            </a>
+          `;
+        return html `
+      <span class="content">
+        ${content}
+        ${this.current
+            ? null
+            : html `
+              <span class="separator" aria-hidden="true">${this.separator}</span>
+            `}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBreadcrumbItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], AitheBreadcrumbItem.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheBreadcrumbItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheBreadcrumbItem.prototype, "current", void 0);
+__decorate([
+    property({ type: String })
+], AitheBreadcrumbItem.prototype, "separator", void 0);
+AitheBreadcrumbItem = __decorate([
+    customElement('aithe-breadcrumb-item')
+], AitheBreadcrumbItem);
+export { AitheBreadcrumbItem };

package/dist/components/navigation/breadcrumb.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, queryAssignedElements } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Breadcrumb navigation container for showing page hierarchy.
+ * 面包屑导航容器，用于展示页面层级关系。
+ *
+ * @slot - Default slot for `aithe-breadcrumb-item` elements. aithe-breadcrumb-item 元素。
+ * @example
+ * ```html
+ * <aithe-breadcrumb separator="/">
+ *   <aithe-breadcrumb-item href="/home">Home</aithe-breadcrumb-item>
+ *   <aithe-breadcrumb-item href="/products">Products</aithe-breadcrumb-item>
+ *   <aithe-breadcrumb-item>Detail</aithe-breadcrumb-item>
+ * </aithe-breadcrumb>
+ * ```
+ */
+let AitheBreadcrumb = class AitheBreadcrumb extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Separator character between breadcrumb items. 面包屑项之间的分隔符。 */
+        this.separator = '/';
+        this.syncItems = () => {
+            const breadcrumbItems = this.items.filter((item) => item instanceof HTMLElement && item.tagName.toLowerCase() === 'aithe-breadcrumb-item');
+            for (const [index, item] of breadcrumbItems.entries()) {
+                item.current = index === breadcrumbItems.length - 1;
+                item.separator = this.separator;
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--aithe-space-2);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <nav aria-label=${t('navigation.breadcrumb.ariaLabel')}>
+        <slot @slotchange=${this.syncItems}></slot>
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBreadcrumb.prototype, "separator", void 0);
+__decorate([
+    queryAssignedElements()
+], AitheBreadcrumb.prototype, "items", void 0);
+AitheBreadcrumb = __decorate([
+    customElement('aithe-breadcrumb')
+], AitheBreadcrumb);
+export { AitheBreadcrumb };