@iyulab/modern-app 0.3.0 → 0.3.2

package/dist/components/SidebarSection.js

@@ -1,24 +1,19 @@
-import { html as n } from "lit";
-import { property as i } from "lit/decorators.js";
-import { StyledElement as d } from "../internals/StyledElement.js";
-import { styles as m } from "./SidebarSection.styles.js";
-var c = Object.defineProperty, r = (e, a, l, h) => {
-  for (var t = void 0, s = e.length - 1, o; s >= 0; s--)
-    (o = e[s]) && (t = o(a, l, t) || t);
-  return t && c(a, l, t), t;
-};
-class p extends d {
-  constructor() {
-    super(...arguments), this.compact = !1;
-  }
-  static {
-    this.styles = [super.styles, m];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    return n`
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { styles as r } from "./SidebarSection.styles.js";
+import { html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/SidebarSection.ts
+var s = class extends n {
+	constructor(...e) {
+		super(...e), this.compact = !1;
+	}
+	static {
+		this.styles = [super.styles, r];
+	}
+	render() {
+		return i`
       <div class="header" part="header" ?hidden=${this.compact}>
         <span class="title" part="title">
           ${this.mainTitle}
@@ -32,17 +27,7 @@ class p extends d {
         <slot></slot>
       </div>
     `;
-  }
-}
-r([
-  i({ type: Boolean })
-], p.prototype, "compact");
-r([
-  i({ type: String })
-], p.prototype, "mainTitle");
-r([
-  i({ type: String })
-], p.prototype, "subTitle");
-export {
-  p as SidebarSection
+	}
 };
+t([o({ type: Boolean }), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "mainTitle", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "subTitle", void 0), s = t([a("sidebar-section")], s);
+//#endregion

package/dist/components/SidebarSection.styles.js

@@ -1,5 +1,6 @@
 import { css as e } from "lit";
-const i = e`
+//#region src/components/SidebarSection.styles.ts
+var t = e`
   :host {
     display: flex;
     flex-direction: column;
@@ -34,6 +35,5 @@ const i = e`
     flex-direction: column;
   }
 `;
-export {
-  i as styles
-};
+//#endregion
+export { t as styles };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { app as a } from "./App.js";
-export {
-  a as app,
-  a as default
-};
+import { app as e } from "./App.js";
+//#region src/index.ts
+var t = e;
+//#endregion
+export { e as app, t as default };

package/dist/internals/ScreenObserver.js

@@ -1,37 +1,23 @@
-class c {
-  /**
-   * ScreenObserver 생성자
-   * @param config - 스크린 옵저버 설정
-   */
-  constructor(e) {
-    this._breakpoints = e.breakpoints, this._observer = new ResizeObserver((s) => {
-      const r = s[0], i = this.calculate(r.contentRect.width);
-      this._size !== i && (this._size = i, window.dispatchEvent(new CustomEvent("screen-resize", {
-        detail: { size: this._size }
-      })));
-    }), this._observer.observe(e.element);
-    const t = e.element.getBoundingClientRect();
-    this._size = this.calculate(t.width), window.dispatchEvent(new CustomEvent("screen-resize", {
-      detail: { size: this._size }
-    }));
-  }
-  destroy() {
-    this._observer && this._observer.disconnect();
-  }
-  /** 현재 화면 크기 반환 */
-  get() {
-    return this._size;
-  }
-  /**
-   * 너비를 기준으로 화면 크기를 반환
-   * @param width - 엘리먼트의 너비
-   * @return 화면 크기
-   */
-  calculate(e) {
-    const [t, s] = this._breakpoints;
-    return e < t ? "small" : e < s ? "medium" : "large";
-  }
-}
-export {
-  c as ScreenObserver
+//#region src/internals/ScreenObserver.ts
+var e = class {
+	constructor(e) {
+		this._breakpoints = e.breakpoints, this._observer = new ResizeObserver((e) => {
+			let t = e[0], n = this.calculate(t.contentRect.width);
+			this._size !== n && (this._size = n, window.dispatchEvent(new CustomEvent("screen-resize", { detail: { size: this._size } })));
+		}), this._observer.observe(e.element);
+		let t = e.element.getBoundingClientRect();
+		this._size = this.calculate(t.width), window.dispatchEvent(new CustomEvent("screen-resize", { detail: { size: this._size } }));
+	}
+	destroy() {
+		this._observer && this._observer.disconnect();
+	}
+	get() {
+		return this._size;
+	}
+	calculate(e) {
+		let [t, n] = this._breakpoints;
+		return e < t ? "small" : e < n ? "medium" : "large";
+	}
 };
+//#endregion
+export { e as ScreenObserver };

package/dist/internals/StyledElement.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /** 스타일 값 타입 */
 export type StyleValue = Record<string, string> | Partial<CSSStyleDeclaration>;
 /** 스타일 맵 타입 */
@@ -7,9 +7,8 @@ export type StyleMap<T extends string> = Partial<Record<T, StyleValue>>;
 /**
  * StyledBaseElement - BaseElement의 확장으로 부분별 스타일링 기능 추가
  */
-export declare class StyledElement<T extends string> extends BaseElement {
+export declare class StyledElement<T extends string> extends UElement {
     static styles: import('lit').CSSResultGroup;
-    static dependencies: Record<string, typeof BaseElement>;
     /** 부분별 스타일 구성 */
     styles?: StyleMap<T>;
     protected updated(changedProperties: PropertyValues): void;

package/dist/internals/StyledElement.js

@@ -1,58 +1,44 @@
-import { property as l } from "lit/decorators.js";
-import { BaseElement as c } from "@iyulab/components/dist/components/BaseElement.js";
-var p = Object.defineProperty, y = (n, e, i, r) => {
-  for (var t = void 0, s = n.length - 1, o; s >= 0; s--)
-    (o = n[s]) && (t = o(e, i, t) || t);
-  return t && p(e, i, t), t;
-};
-class f extends c {
-  static {
-    this.styles = super.styles;
-  }
-  static {
-    this.dependencies = {};
-  }
-  updated(e) {
-    super.updated(e), e.has("styles") && this.styles && this.applyToParts(this.styles);
-  }
-  /**
-   * 현재 스타일 구성을 각 파트에 적용, host 포함
-   */
-  applyToParts(e) {
-    const i = Object.entries(e);
-    for (const [r, t] of i)
-      if (t)
-        if (r === "host")
-          this.assignToObject(this, t);
-        else {
-          const s = this.renderRoot?.querySelector(`[part="${String(r)}"]`);
-          if (!s) continue;
-          this.assignToObject(s, t);
-        }
-  }
-  /** 
-   * 스타일 객체를 개별 프로퍼티 단위로 적용 (camelCase / kebab-case / custom props 처리) 
-   */
-  assignToObject(e, i) {
-    for (const [r, t] of Object.entries(i)) {
-      if (t == null) continue;
-      const s = String(t);
-      if (r.startsWith("--") || r.includes("-")) {
-        e.style.setProperty(r, s);
-        continue;
-      }
-      try {
-        e.style[r] = s;
-      } catch {
-        const o = r.replace(/[A-Z]/g, (a) => "-" + a.toLowerCase());
-        e.style.setProperty(o, s);
-      }
-    }
-  }
-}
-y([
-  l({ type: Object, attribute: !1 })
-], f.prototype, "styles");
-export {
-  f as StyledElement
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { property as n } from "lit/decorators.js";
+import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
+//#region src/internals/StyledElement.ts
+var i = class extends r {
+	static {
+		this.styles = super.styles;
+	}
+	updated(e) {
+		super.updated(e), e.has("styles") && this.styles && this.applyToParts(this.styles);
+	}
+	applyToParts(e) {
+		let t = Object.entries(e);
+		for (let [e, n] of t) if (n) if (e === "host") this.assignToObject(this, n);
+		else {
+			let t = this.renderRoot?.querySelector(`[part="${String(e)}"]`);
+			if (!t) continue;
+			this.assignToObject(t, n);
+		}
+	}
+	assignToObject(e, t) {
+		for (let [n, r] of Object.entries(t)) {
+			if (r == null) continue;
+			let t = String(r);
+			if (n.startsWith("--") || n.includes("-")) {
+				e.style.setProperty(n, t);
+				continue;
+			}
+			try {
+				e.style[n] = t;
+			} catch {
+				let r = n.replace(/[A-Z]/g, (e) => "-" + e.toLowerCase());
+				e.style.setProperty(r, t);
+			}
+		}
+	}
 };
+t([n({
+	type: Object,
+	attribute: !1
+}), e("design:type", Object)], i.prototype, "styles", void 0);
+//#endregion
+export { i as StyledElement };

package/dist/layouts/SidebarLayout.d.ts

@@ -1,27 +1,8 @@
 import { nothing, PropertyValues } from 'lit';
+import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.js';
 import { RouteContext } from '@iyulab/router';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
-import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.component.js';
 import { StyledElement } from '../internals/StyledElement.js';
-import { SidebarSection } from '../components/SidebarSection';
-import { SidebarGroup } from '../components/SidebarGroup';
-import { SidebarLink } from '../components/SidebarLink';
-import { SidebarButton } from '../components/SidebarButton';
 import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
-/** 엘리먼트 타입 매핑 (for devevelop experience) */
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-icon': UIcon;
-        'u-button': UButton;
-        'u-progress-bar': UProgressBar;
-        'u-sidebar-section': SidebarSection;
-        'u-sidebar-group': SidebarGroup;
-        'u-sidebar-link': SidebarLink;
-        'u-sidebar-button': SidebarButton;
-    }
-}
 /**
  * 반응형 사이드바 레이아웃 컴포넌트
  *
@@ -39,17 +20,16 @@ declare global {
  */
 export declare class SidebarLayout extends StyledElement<SidebarParts> {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    progressBarEl: UProgressBar;
-    /** 현재 라우터 컨텍스트 */
-    context: RouteContext | null;
     /** 사이드바 상태 */
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
     config?: SidebarLayoutConfig;
+    progressBarEl: UProgressBar;
+    /** 현재 라우터 컨텍스트 */
+    context: RouteContext | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1> | typeof nothing;
     /** 사이드바 아이템 렌더링 */
     private renderItem;

package/dist/layouts/SidebarLayout.js

@@ -1,55 +1,54 @@
-import { nothing as h, html as a } from "lit";
-import { query as b, state as g, property as p, customElement as f } from "lit/decorators.js";
-import { unsafeHTML as m } from "lit/directives/unsafe-html.js";
-import { repeat as l } from "lit/directives/repeat.js";
-import { UIcon as v } from "@iyulab/components/dist/components/icon/UIcon.component.js";
-import { UButton as $ } from "@iyulab/components/dist/components/button/UButton.component.js";
-import { UProgressBar as y } from "@iyulab/components/dist/components/progress-bar/UProgressBar.component.js";
-import { app as u } from "../App.js";
-import { StyledElement as w } from "../internals/StyledElement.js";
-import { SidebarSection as k } from "../components/SidebarSection.js";
-import { SidebarGroup as B } from "../components/SidebarGroup.js";
-import { SidebarLink as L } from "../components/SidebarLink.js";
-import { SidebarButton as _ } from "../components/SidebarButton.js";
-import { styles as C } from "./SidebarLayout.styles.js";
-import { IconRegistry as R } from "@iyulab/components/dist/utilities/IconRegistry.js";
-var S = Object.defineProperty, z = Object.getOwnPropertyDescriptor, E = Object.getPrototypeOf, x = Reflect.get, n = (e, t, s, r) => {
-  for (var o = r > 1 ? void 0 : r ? z(t, s) : t, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (o = (r ? c(t, s, o) : c(o)) || o);
-  return r && o && S(t, s, o), o;
-}, M = (e, t, s) => x(E(e), s, t);
-R.register("sidebar-app", (e) => e === "layout-sidebar" ? '<svg viewBox="0 0 16 16"><path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"/></svg>' : e === "list" ? '<svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1 m0 5a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1 m0 5a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1"/></svg>' : e === "x-lg" ? '<svg viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>' : "");
-let i = class extends w {
-  constructor() {
-    super(...arguments), this.context = null, this.state = "default", this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = () => {
-      u.navigate("");
-    }, this.handleToggleButtonClick = () => {
-      const e = u.screen ?? "large";
-      e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", e);
-    }, this.handleBackdropClick = () => {
-      this.state = "slim";
-    }, this.handleRouteBegin = (e) => {
-      this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.context = e.context;
-    }, this.handleRouteProgress = (e) => {
-      this.progressBarEl.value = e.progress;
-    }, this.handleRouteDone = (e) => {
-      this.progressBarEl.value = 100;
-    }, this.handleScreenResize = (e) => {
-      const t = e.detail.size;
-      t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("screen-resize", this.handleScreenResize);
-  }
-  disconnectedCallback() {
-    window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("screen-resize", this.handleScreenResize), super.disconnectedCallback();
-  }
-  updated(e) {
-    super.updated(e), e.has("config") && (this.styles = this.config?.styles);
-  }
-  render() {
-    return this.config ? a`
+import { app as e } from "../App.js";
+import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { StyledElement as r } from "../internals/StyledElement.js";
+import "../components/SidebarSection.js";
+import "../components/SidebarLink.js";
+import "../components/SidebarGroup.js";
+import "../components/SidebarButton.js";
+import { styles as i } from "./SidebarLayout.styles.js";
+import { html as a, nothing as o } from "lit";
+import { customElement as s, property as c, query as l, state as u } from "lit/decorators.js";
+import { unsafeHTML as d } from "lit/directives/unsafe-html.js";
+import { repeat as f } from "lit/directives/repeat.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UProgressBar as p } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+//#region src/layouts/SidebarLayout.ts
+var m, h = class extends r {
+	constructor(...t) {
+		super(...t), this.state = "default", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = () => {
+			e.navigate("");
+		}, this.handleToggleButtonClick = () => {
+			let t = e.screen ?? "large";
+			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
+		}, this.handleBackdropClick = () => {
+			this.state = "slim";
+		}, this.handleRouteBegin = (e) => {
+			this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.context = e.context;
+		}, this.handleRouteProgress = (e) => {
+			this.progressBarEl.value = e.progress;
+		}, this.handleRouteDone = (e) => {
+			this.progressBarEl.value = 100;
+		}, this.handleScreenResize = (e) => {
+			let t = e.detail.size;
+			t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
+		};
+	}
+	static {
+		this.styles = [super.styles, i];
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("screen-resize", this.handleScreenResize);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("screen-resize", this.handleScreenResize), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
+	}
+	render() {
+		return this.config ? a`
       <!-- Mobile Header -->
       <div class="mobile-header" part="mobile-header" ?hidden="${!this.state.startsWith("mobile")}">
         <u-icon class="logo"
@@ -62,7 +61,7 @@ let i = class extends w {
         <u-button class="toggler"
           @click=${this.handleToggleButtonClick}>
           <u-icon 
-            lib="sidebar-app" 
+            lib="bootstrap" 
             name=${this.state === "mobile-open" ? "x-lg" : "list"}
           ></u-icon>
         </u-button>
@@ -82,7 +81,7 @@ let i = class extends w {
           <u-button class="toggler"
             @click=${this.handleToggleButtonClick}>
             <u-icon 
-              lib="sidebar-app" 
+              lib="bootstrap" 
               name="layout-sidebar"
             ></u-icon>
           </u-button>
@@ -90,20 +89,12 @@ let i = class extends w {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable>
-          ${l(
-      this.config.main ?? [],
-      (e, t) => t,
-      (e, t) => this.renderItem(e)
-    )}
+          ${f(this.config.main ?? [], (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${l(
-      this.config.footer ?? [],
-      (e, t) => t,
-      (e, t) => this.renderItem(e)
-    )}
+          ${f(this.config.footer ?? [], (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -111,24 +102,21 @@ let i = class extends w {
       <div class="main" part="main" scrollable>
         <u-progress-bar part="progress"></u-progress-bar>
 
-        <u-outlet></u-outlet>
+        <slot></slot>
       </div>
 
       <!-- Backdrop for modal state -->
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : h;
-  }
-  /** 사이드바 아이템 렌더링 */
-  renderItem(e) {
-    if (!e) return h;
-    if (e.type === "html") {
-      const t = e.render(this.state);
-      return typeof t == "string" ? m(t) : a`${t}`;
-    } else {
-      if (e.type === "button")
-        return a`
+    ` : o;
+	}
+	renderItem(e) {
+		if (!e) return o;
+		if (e.type === "html") {
+			let t = e.render(this.state);
+			return typeof t == "string" ? d(t) : a`${t}`;
+		} else if (e.type === "button") return a`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -137,9 +125,9 @@ let i = class extends w {
           @click="${e.onClick}"
         ></u-sidebar-button>
       `;
-      if (e.type === "link") {
-        const t = this.isMatchedLink(e.pattern || e.href);
-        return a`
+		else if (e.type === "link") {
+			let t = this.isMatchedLink(e.pattern || e.href);
+			return a`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -150,24 +138,18 @@ let i = class extends w {
           .styles="${e.styles}"
         ></u-sidebar-link>
       `;
-      } else {
-        if (e.type === "section")
-          return a`
+		} else if (e.type === "section") return a`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${l(
-            e.items,
-            (t, s) => s,
-            (t, s) => this.renderItem(t)
-          )}
+          ${f(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
-        if (e.type === "group") {
-          const t = e.items.some((s) => this.isMatchedLink(s.pattern || s.href));
-          return a`
+		else if (e.type === "group") {
+			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
+			return a`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -175,44 +157,15 @@ let i = class extends w {
           .icon="${e.icon}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${l(
-            e.items,
-            (s, r) => r,
-            (s, r) => this.renderItem(s)
-          )}
+          ${f(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
-        } else
-          return h;
-      }
-    }
-  }
-};
-i.styles = [M(i, i, "styles"), C];
-i.dependencies = {
-  "u-icon": v,
-  "u-button": $,
-  "u-progress-bar": y,
-  "u-sidebar-section": k,
-  "u-sidebar-group": B,
-  "u-sidebar-link": L,
-  "u-sidebar-button": _
-};
-n([
-  b("u-progress-bar")
-], i.prototype, "progressBarEl", 2);
-n([
-  g()
-], i.prototype, "context", 2);
-n([
-  p({ type: String, reflect: !0 })
-], i.prototype, "state", 2);
-n([
-  p({ type: Object })
-], i.prototype, "config", 2);
-i = n([
-  f("u-sidebar-layout")
-], i);
-export {
-  i as SidebarLayout
+		} else return o;
+	}
 };
+n([c({
+	type: String,
+	reflect: !0
+}), t("design:type", Object)], h.prototype, "state", void 0), n([c({ type: Object }), t("design:type", Object)], h.prototype, "config", void 0), n([l("u-progress-bar"), t("design:type", typeof (m = p !== void 0 && p) == "function" ? m : Object)], h.prototype, "progressBarEl", void 0), n([u(), t("design:type", Object)], h.prototype, "context", void 0), h = n([s("u-sidebar-layout")], h);
+//#endregion
+export { h as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -1,5 +1,6 @@
 import { css as e } from "lit";
-const r = e`
+//#region src/layouts/SidebarLayout.styles.ts
+var t = e`
   :host {
     position: relative;
     display: flex;
@@ -171,6 +172,5 @@ const r = e`
     background: var(--u-overlay-bg-color);
   }
 `;
-export {
-  r as styles
-};
+//#endregion
+export { t as styles };

package/dist/types/AppConfigs.d.ts

@@ -1,6 +1,6 @@
 import { InitOptions, Module, Newable, NewableModule } from 'i18next';
 import { RouteConfig, FallbackRouteConfig } from '@iyulab/router';
-import { ThemeInitOptions } from '@iyulab/components/dist/utilities/theme.js';
+import { ThemeInitOptions } from '@iyulab/components/dist/utilities/Theme.js';
 import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 /**
  * i18next의 초기화 옵션과 플러그인 배열을 포함한 다국어 설정