@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/framework/page.js

@@ -0,0 +1,151 @@
+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 { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Framework-level route container that renders the matched page component.
+ * 框架级路由容器，渲染匹配到的页面组件。
+ *
+ * Connects to a `Router` instance, listens for route changes, and dynamically renders
+ * the component specified by the matched route's `component` field.
+ * 连接到 `Router` 实例，监听路由变更，动态渲染匹配路由的 `component` 字段指定的组件。
+ *
+ * Route params and query are passed to the rendered component as properties:
+ * 路由参数和查询参数会作为属性传递给渲染的组件：
+ * - `.params` — path parameters (e.g. `{ id: '42' }` for `/user/:id`)
+ * - `.query` — query parameters (e.g. `{ a: '1' }` for `?a=1`)
+ * - `.route` — the matched `RouteConfig` object
+ * - `.location` — the full `RouteLocation` object
+ *
+ * @slot - Fallback content when no route matches. 无匹配路由时的回退内容。
+ *
+ * @csspart container - The container element. 容器元素。
+ *
+ * @fires aithe-route-change - Emitted when the route changes with `{ location }`. 路由变更时发出 `{ location }`。
+ *
+ * @example
+ * ```html
+ * <aithe-page
+ *   .router=${myRouter}
+ * ></aithe-page>
+ * ```
+ */
+let AithePage = class AithePage extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Router instance to connect to. 要连接的 Router 实例。 */
+        this.router = null;
+        /** Fallback component tag name when no route matches (404). 无匹配路由时的回退组件标签名。 */
+        this.notFoundComponent = '';
+        this.location = null;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .page-container {
+        width: 100%;
+        height: 100%;
+      }
+
+      .not-found {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 400px;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.subscribeRouter();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribeRouter();
+    }
+    updated(changed) {
+        if (changed.has('router')) {
+            this.unsubscribeRouter();
+            this.subscribeRouter();
+        }
+    }
+    subscribeRouter() {
+        if (!this.router)
+            return;
+        this.unsubscribe = this.router.onChange((loc) => {
+            this.location = loc;
+            this.emit('aithe-route-change', { location: loc });
+        });
+    }
+    unsubscribeRouter() {
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    render() {
+        if (!this.location || !this.router) {
+            return html `
+        <div class="page-container" part="container"><slot></slot></div>
+      `;
+        }
+        const route = this.location.route;
+        if (!route) {
+            if (this.notFoundComponent) {
+                const Tag = unsafeStatic(this.notFoundComponent);
+                return staticHtml `
+          <div class="page-container" part="container">
+            <${Tag}
+              .params=${this.location.params}
+              .query=${this.location.query}
+              .route=${null}
+              .location=${this.location}
+            ></${Tag}>
+          </div>
+        `;
+            }
+            return html `
+        <div class="page-container" part="container">
+          <div class="not-found">
+            <aithe-empty></aithe-empty>
+          </div>
+        </div>
+      `;
+        }
+        const Tag = unsafeStatic(route.component);
+        return staticHtml `
+      <div class="page-container" part="container">
+        <${Tag}
+          .params=${this.location.params}
+          .query=${this.location.query}
+          .route=${route}
+          .location=${this.location}
+        ></${Tag}>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], AithePage.prototype, "router", void 0);
+__decorate([
+    property({ type: String, attribute: 'not-found-component' })
+], AithePage.prototype, "notFoundComponent", void 0);
+__decorate([
+    state()
+], AithePage.prototype, "location", void 0);
+AithePage = __decorate([
+    customElement('aithe-page')
+], AithePage);
+export { AithePage };

package/dist/components/framework/sidebar.d.ts

@@ -1,6 +1,6 @@
 import type { TemplateResult } from 'lit';
 import { AitheElement } from '../../core/aithe-element';
-import type { AitheTreeNodeMeta, AitheSidebarItemFilter } from '../../core/types';
+import type { AitheTreeNodeMeta, AitheTreeNodeFilter } from '../../core/types';
 /**
  * Framework-level sidebar with three zones: top (brand), center (menu tree), bottom (action buttons).
  * 框架级侧边栏，包含三个区域：顶部（品牌）、中间（菜单树）、底部（操作按钮）。
@@ -57,7 +57,7 @@ export declare class AitheSidebar extends AitheElement {
      * Useful for permission-based access control.
      * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
      */
-    itemFilter: AitheSidebarItemFilter | null;
+    itemFilter: AitheTreeNodeFilter | null;
     /** Whether the sidebar uses overlay mode (floats above content instead of pushing it).
      * 侧边栏是否使用覆盖模式（浮在内容上方而非挤压内容）。 */
     overlay: boolean;
@@ -71,7 +71,6 @@ export declare class AitheSidebar extends AitheElement {
     expandedWidth: string;
     /** Sidebar width when collapsed (CSS value). 收起时的侧边栏宽度。 */
     collapsedWidth: string;
-    private expanded;
     private isMobile;
     private mql?;
     private unsubscribeLocale?;
@@ -83,16 +82,11 @@ export declare class AitheSidebar extends AitheElement {
     protected willUpdate(changed: Map<string, unknown>): void;
     protected updated(changed: Map<string, unknown>): void;
     private applyWidth;
-    private collectKeys;
-    private isGroupActive;
-    private toggleExpand;
-    private selectItem;
+    private renderTopIcon;
     private readonly handleCollapseToggle;
     private readonly handleOverlayClose;
     private readonly handleFloatToggle;
-    private renderIcon;
-    private renderTopIcon;
-    private renderItems;
+    private readonly handleTreeSelect;
     render(): TemplateResult<1>;
 }
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/components/framework/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/framework/sidebar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,yDAAyD;IAC7B,KAAK,SAAM;IAEvC,0EAA0E;IAC9C,IAAI,SAAM;IAEtC,mFAAmF;IACnC,SAAS,SAAM;IAE/D,sFAAsF;IACtD,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAEhE,oDAAoD;IACxB,MAAM,SAAM;IAExC,qEAAqE;IACf,SAAS,UAAS;IAExE,wEAAwE;IAC3C,WAAW,UAAS;IAEjD,6DAA6D;IACjB,SAAS,UAAS;IAE9D;;;;OAIG;IAC6B,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAEjF;oCACgC;IACY,OAAO,UAAS;IAE5D;wDACoD;IACI,YAAY,SAAU;IAE9E;8CAC0C;IACkB,gBAAgB,SAAO;IAEnF,0DAA0D;IACD,aAAa,SAAW;IAEjF,2DAA2D;IACD,cAAc,SAAU;IAEzE,OAAO,CAAC,QAAQ,CAAqB;IAErC,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,GAAG,CAAC,CAAiB;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiWpB;IAEF,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CASjC;IAEF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUzD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAMnC;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAKhC;IAEF,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,WAAW;IAiDnB,MAAM;CA0DP"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/framework/sidebar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAI1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,yDAAyD;IAC7B,KAAK,SAAM;IAEvC,0EAA0E;IAC9C,IAAI,SAAM;IAEtC,mFAAmF;IACnC,SAAS,SAAM;IAE/D,sFAAsF;IACtD,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAEhE,oDAAoD;IACxB,MAAM,SAAM;IAExC,qEAAqE;IACf,SAAS,UAAS;IAExE,wEAAwE;IAC3C,WAAW,UAAS;IAEjD,6DAA6D;IACjB,SAAS,UAAS;IAE9D;;;;OAIG;IAC6B,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAE9E;oCACgC;IACY,OAAO,UAAS;IAE5D;wDACoD;IACI,YAAY,SAAU;IAE9E;8CAC0C;IACkB,gBAAgB,SAAO;IAEnF,0DAA0D;IACD,aAAa,SAAW;IAEjF,2DAA2D;IACD,cAAc,SAAU;IAEzE,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,GAAG,CAAC,CAAiB;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA0LpB;IAEF,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CASjC;IAEF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUzD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAYtD,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAMnC;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAKhC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAE/B;IAEF,MAAM;CAoEP"}

package/dist/components/framework/sidebar.js

@@ -0,0 +1,477 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t, onAitheLocaleChange } from '../../styles/i18n';
+/**
+ * Framework-level sidebar with three zones: top (brand), center (menu tree), bottom (action buttons).
+ * 框架级侧边栏，包含三个区域：顶部（品牌）、中间（菜单树）、底部（操作按钮）。
+ *
+ * Supports collapsible mode: when collapsed, only icons are shown; when expanded, icons and labels are shown.
+ * 支持菜单伸缩：收起时仅显示图标，展开时显示图标和标签。
+ *
+ * The center zone supports data-driven menu trees via `AitheTreeNodeMeta[]` (same type as `aithe-tree-menu`).
+ * 中间区域支持通过 `AitheTreeNodeMeta[]` 数据驱动的菜单树（与 `aithe-tree-menu` 相同类型）。
+ *
+ * @slot top - Custom top area content (overrides `brand` and `icon` properties). 自定义顶部区域内容。
+ * @slot center - Custom center menu content (overrides data-driven menu). 自定义中间菜单内容。
+ * @slot bottom - Extra action buttons in the bottom bar (before built-in buttons). 底部栏中的额外操作按钮。
+ *
+ * @csspart top - The top container. 顶部容器。
+ * @csspart center - The center container. 中间容器。
+ * @csspart bottom - The bottom container. 底部容器。
+ *
+ * @fires aithe-select - Emitted when a menu item is selected with `{ value }`. 菜单项选中时发出 `{ value }`。
+ * @fires aithe-collapse-change - Emitted when sidebar collapse state changes with `{ collapsed }`.
+ *   侧边栏伸缩状态变更时发出 `{ collapsed }`。Call `preventDefault()` to suppress the built-in toggle.
+ *   调用 `preventDefault()` 可阻止内置伸缩切换。
+ *
+ * @example
+ * ```html
+ * <aithe-sidebar
+ *   brand="My App"
+ *   icon="home"
+ *   items='[{"label":"Dashboard","id":"dashboard","icon":"home"},{"label":"Settings","id":"settings","icon":"settings","children":[{"label":"Profile","id":"profile"},{"label":"Security","id":"security"}]}]'
+ *   active="dashboard"
+ *   collapsible
+ * ></aithe-sidebar>
+ * ```
+ */
+let AitheSidebar = class AitheSidebar extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Brand name displayed in the top zone. 顶部区域显示的品牌名称。 */
+        this.brand = '';
+        /** Icon name displayed before the brand in the top zone. 顶部区域品牌前的图标名称。 */
+        this.icon = '';
+        /** JSON string of menu items (parsed into `items`). 菜单项的 JSON 字符串（解析为 `items`）。 */
+        this.itemsJson = '';
+        /** Array of menu items (prefer this over `itemsJson` in JS). 菜单项数组（在 JS 中优先使用此属性）。 */
+        this.items = [];
+        /** Active (selected) menu item value. 当前选中的菜单项值。 */
+        this.active = '';
+        /** Whether all menu groups are expanded by default. 是否默认展开所有菜单分组。 */
+        this.expandAll = false;
+        /** Whether the sidebar supports collapse/expand toggle. 侧边栏是否支持伸缩切换。 */
+        this.collapsible = false;
+        /** Whether the sidebar is currently collapsed. 侧边栏当前是否收起。 */
+        this.collapsed = false;
+        /**
+         * Filter callback for menu items. Return `true` to show the item, `false` to hide it.
+         * Useful for permission-based access control.
+         * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
+         */
+        this.itemFilter = null;
+        /** Whether the sidebar uses overlay mode (floats above content instead of pushing it).
+         * 侧边栏是否使用覆盖模式（浮在内容上方而非挤压内容）。 */
+        this.overlay = false;
+        /** Header height in CSS value, used to offset overlay sidebar below the header.
+         * Header 高度（CSS 值），用于让 overlay 侧边栏从 header 下方开始。 */
+        this.headerHeight = '56px';
+        /** Mobile breakpoint in pixels; when viewport width ≤ this value, overlay mode is auto-enabled.
+         * 移动端断点（像素）；视口宽度 ≤ 此值时自动启用 overlay 模式。 */
+        this.mobileBreakpoint = 768;
+        /** Sidebar width when expanded (CSS value). 展开时的侧边栏宽度。 */
+        this.expandedWidth = '260px';
+        /** Sidebar width when collapsed (CSS value). 收起时的侧边栏宽度。 */
+        this.collapsedWidth = '64px';
+        this.isMobile = false;
+        this.handleMobileChange = (e) => {
+            const wasMobile = this.isMobile;
+            this.isMobile = e.matches;
+            if (this.isMobile && !wasMobile) {
+                this.overlay = true;
+                this.collapsed = true;
+            }
+            else if (!this.isMobile && wasMobile) {
+                this.overlay = false;
+            }
+        };
+        this.handleCollapseToggle = () => {
+            const nextCollapsed = !this.collapsed;
+            const notPrevented = this.emit('aithe-collapse-change', { collapsed: nextCollapsed });
+            if (notPrevented) {
+                this.collapsed = nextCollapsed;
+            }
+        };
+        this.handleOverlayClose = () => {
+            if (this.overlay && !this.collapsed) {
+                const notPrevented = this.emit('aithe-collapse-change', { collapsed: true });
+                if (notPrevented) {
+                    this.collapsed = true;
+                }
+            }
+        };
+        this.handleFloatToggle = () => {
+            const notPrevented = this.emit('aithe-collapse-change', { collapsed: false });
+            if (notPrevented) {
+                this.collapsed = false;
+            }
+        };
+        this.handleTreeSelect = (e) => {
+            this.active = e.detail.value;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: var(--aithe-sidebar-width, 260px);
+        height: 100%;
+        border-right: 1px solid var(--aithe-color-border);
+        background: var(--aithe-color-surface);
+        overflow: hidden;
+        transition: width var(--aithe-duration-base, 0.2s) var(--aithe-ease-standard, ease);
+      }
+
+      :host([collapsed]) {
+        width: var(--aithe-sidebar-collapsed-width, 64px);
+        overflow: visible;
+      }
+
+      :host([overlay]) {
+        position: fixed;
+        top: var(--aithe-sidebar-overlay-top, 56px);
+        left: 0;
+        z-index: var(--aithe-z-modal, 1050);
+        height: calc(100vh - var(--aithe-sidebar-overlay-top, 56px));
+      }
+
+      :host([overlay][collapsed]) {
+        width: 0;
+        overflow: hidden;
+        border-right: none;
+      }
+
+      .overlay-backdrop {
+        display: none;
+      }
+
+      :host([overlay]:not([collapsed])) .overlay-backdrop {
+        display: block;
+        position: fixed;
+        top: var(--aithe-sidebar-overlay-top, 56px);
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--aithe-color-surface, #fff);
+        z-index: -1;
+      }
+
+      .float-toggle {
+        display: none;
+        position: fixed;
+        left: var(--aithe-space-3, 12px);
+        bottom: var(--aithe-space-5, 20px);
+        z-index: var(--aithe-z-dropdown, 1000);
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text-muted);
+        box-shadow: var(--aithe-shadow-2);
+        cursor: pointer;
+        transition:
+          border-color 0.15s,
+          color 0.15s,
+          background 0.15s;
+      }
+
+      .float-toggle:hover {
+        border-color: var(--aithe-primary-6);
+        color: var(--aithe-primary-6);
+        background: var(--aithe-color-surface-muted);
+      }
+
+      :host([overlay][collapsed]) .float-toggle {
+        display: inline-flex;
+      }
+
+      .top {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-4);
+        border-bottom: 1px solid var(--aithe-color-border);
+        min-height: 56px;
+        flex-shrink: 0;
+      }
+
+      .top-icon {
+        flex-shrink: 0;
+        color: var(--aithe-primary-6);
+      }
+
+      .top-fallback-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        font-size: 15px;
+        font-weight: var(--aithe-font-weight-bold);
+        line-height: 1;
+        border-radius: var(--aithe-radius-md, 6px);
+        background: linear-gradient(135deg, var(--aithe-primary-5), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        flex-shrink: 0;
+      }
+
+      .top-brand {
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-bold);
+        color: var(--aithe-color-text);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      :host([collapsed]) .top {
+        justify-content: center;
+        padding: var(--aithe-space-3);
+      }
+
+      :host([collapsed]) .top-brand {
+        display: none;
+      }
+
+      .center {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: var(--aithe-space-2) 0;
+      }
+
+      :host([collapsed]) .center {
+        padding: var(--aithe-space-2) 0;
+        overflow: visible;
+      }
+
+      .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--aithe-space-2);
+        padding: var(--aithe-space-3);
+        border-top: 1px solid var(--aithe-color-border);
+        flex-shrink: 0;
+      }
+
+      .collapse-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text-muted);
+        cursor: pointer;
+        transition:
+          border-color 0.15s,
+          color 0.15s,
+          background 0.15s;
+      }
+
+      .collapse-btn:hover {
+        border-color: var(--aithe-primary-6);
+        color: var(--aithe-primary-6);
+        background: var(--aithe-color-surface-muted);
+      }
+
+      ::slotted([slot='bottom']) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text-muted);
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupMobileListener();
+        this.unsubscribeLocale = onAitheLocaleChange(() => this.requestUpdate());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mql?.removeEventListener('change', this.handleMobileChange);
+        this.unsubscribeLocale?.();
+    }
+    setupMobileListener() {
+        this.mql = globalThis.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
+        this.handleMobileChange(this.mql);
+        this.mql.addEventListener('change', this.handleMobileChange);
+    }
+    willUpdate(changed) {
+        if (changed.has('itemsJson') && this.itemsJson) {
+            try {
+                this.items = JSON.parse(this.itemsJson);
+            }
+            catch {
+                this.items = [];
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has('collapsed')) {
+            this.applyWidth();
+        }
+        if (changed.has('expandedWidth') || changed.has('collapsedWidth')) {
+            this.applyWidth();
+        }
+        if (changed.has('headerHeight')) {
+            this.style.setProperty('--aithe-sidebar-overlay-top', this.headerHeight);
+        }
+    }
+    applyWidth() {
+        if (this.collapsed) {
+            this.style.setProperty('--aithe-sidebar-collapsed-width', this.collapsedWidth);
+        }
+        else {
+            this.style.setProperty('--aithe-sidebar-width', this.expandedWidth);
+        }
+    }
+    renderTopIcon() {
+        if (this.icon) {
+            return html `
+        <aithe-icon class="top-icon" name=${this.icon} size="20"></aithe-icon>
+      `;
+        }
+        if (this.collapsed && this.brand) {
+            return html `
+        <span class="top-fallback-icon">${this.brand.charAt(0).toUpperCase()}</span>
+      `;
+        }
+        return html ``;
+    }
+    render() {
+        const topContent = html `
+      <div class="top" part="top">
+        <slot name="top">
+          ${this.renderTopIcon()}
+          ${this.brand
+            ? html `
+                <span class="top-brand">${this.brand}</span>
+              `
+            : nothing}
+        </slot>
+      </div>
+    `;
+        const centerContent = html `
+      <div class="center" part="center">
+        <slot name="center">
+          <aithe-tree-menu
+            .items=${this.items}
+            active=${this.active}
+            ?expand-all=${this.expandAll}
+            ?collapsible=${this.collapsible}
+            ?collapsed=${this.collapsed}
+            .itemFilter=${this.itemFilter}
+            collapsed-width=${this.collapsedWidth}
+            expanded-width=${this.expandedWidth}
+            @aithe-select=${this.handleTreeSelect}
+          ></aithe-tree-menu>
+        </slot>
+      </div>
+    `;
+        const collapseTitle = this.collapsed ? t('sidebar.expand') : t('sidebar.collapse');
+        const collapseIcon = this.collapsed ? 'chevronRight' : 'chevronLeft';
+        const collapseBtn = this.collapsible
+            ? html `
+          <button
+            class="collapse-btn"
+            type="button"
+            title=${collapseTitle}
+            @click=${this.handleCollapseToggle}
+          >
+            <aithe-icon name=${collapseIcon} size="16"></aithe-icon>
+          </button>
+        `
+            : nothing;
+        const bottomContent = html `
+      <div class="bottom" part="bottom">
+        <slot name="bottom"></slot>
+        ${collapseBtn}
+      </div>
+    `;
+        return html `
+      <div class="overlay-backdrop" @click=${this.handleOverlayClose}></div>
+      ${topContent} ${centerContent} ${bottomContent}
+      <button
+        class="float-toggle"
+        type="button"
+        title=${t('sidebar.expand')}
+        @click=${this.handleFloatToggle}
+      >
+        <aithe-icon name="menu" size="18"></aithe-icon>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSidebar.prototype, "brand", void 0);
+__decorate([
+    property({ type: String })
+], AitheSidebar.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'items' })
+], AitheSidebar.prototype, "itemsJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSidebar.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], AitheSidebar.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'expand-all' })
+], AitheSidebar.prototype, "expandAll", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheSidebar.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSidebar.prototype, "collapsed", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSidebar.prototype, "itemFilter", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSidebar.prototype, "overlay", void 0);
+__decorate([
+    property({ type: String, attribute: 'header-height' })
+], AitheSidebar.prototype, "headerHeight", void 0);
+__decorate([
+    property({ type: Number, attribute: 'mobile-breakpoint' })
+], AitheSidebar.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    property({ type: String, attribute: 'expanded-width' })
+], AitheSidebar.prototype, "expandedWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'collapsed-width' })
+], AitheSidebar.prototype, "collapsedWidth", void 0);
+__decorate([
+    state()
+], AitheSidebar.prototype, "isMobile", void 0);
+AitheSidebar = __decorate([
+    customElement('aithe-sidebar')
+], AitheSidebar);
+export { AitheSidebar };