@iyulab/modern-app 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.2.2 (2025-11-17)
+- added `fallback` config in `AppConfig` type
+- improved route-progress handling in layout component
+
 ## 0.2.1 (2025-11-13)
 - Fixed few component and sidebar styles
 - removed `theme` setter property in `app` instance

package/dist/app.d.ts

@@ -7,8 +7,8 @@ import { NotificationOptions } from './types/AppOptions.js';
 declare class App {
     private static _instance;
     private _config?;
+    private _layout?;
     private _router?;
-    private _root?;
     private constructor();
     /** 싱글톤 인스턴스 반환 */
     static get instance(): App;
@@ -18,18 +18,14 @@ declare class App {
     get router(): Router | undefined;
     /** 스타일 테마 관리 유틸리티 객체 반환 */
     get theme(): import('@iyulab/components/dist/utilities/theme.js').Theme;
-    /** 현재 언어 코드 반환 (i18next.language) */
-    get language(): string;
+    /** 다국어 로컬라이저(i18next) 반환 */
+    get localizer(): import('i18next').i18n;
     /** 앱 로드 및 초기화 */
     load(config: AppConfig): Promise<void>;
     /** 앱 언로드 */
     unload(): void;
     /** 페이지 이동 */
     navigate(path: string): void;
-    /** 언어 설정 변경(i18next.changeLanguage 호출) */
-    setLanguage(lang: string): Promise<void>;
-    /** 레이아웃 진행바 설정 */
-    progress(value: number): void;
     /** 공지 메시지 */
     notice(message: string, options?: NotificationOptions): Promise<void>;
     /** 정보 메시지 */

package/dist/app.js

@@ -1,16 +1,16 @@
-import { runInAction as r } from "mobx";
+import { runInAction as u } from "mobx";
 import n from "i18next";
 import { Router as l } from "@iyulab/router";
-import { notifier as c } from "@iyulab/components/dist/utilities/notifier.js";
-import { theme as u } from "@iyulab/components/dist/utilities/theme.js";
-import { screen as s, progress as d } from "./internals/observables.js";
+import { theme as s } from "@iyulab/components/dist/utilities/theme.js";
+import { notifier as d } from "@iyulab/components/dist/utilities/notifier.js";
+import { screen as r } from "./internals/observables.js";
 class o {
   // private 생성자로 외부에서 인스턴스 생성 방지
   constructor() {
     this.handleWindowResize = (t) => {
       const e = window.innerWidth, [i, a] = this._config?.layout.breakpoints || [768, 1024];
-      r(() => {
-        e < i ? s.set("small") : e < a ? s.set("medium") : s.set("large");
+      u(() => {
+        e < i ? r.set("small") : e < a ? r.set("medium") : r.set("large");
       });
     };
   }
@@ -28,43 +28,34 @@ class o {
   }
   /** 스타일 테마 관리 유틸리티 객체 반환 */
   get theme() {
-    return u;
+    return s;
   }
-  /** 현재 언어 코드 반환 (i18next.language) */
-  get language() {
-    return n.language;
+  /** 다국어 로컬라이저(i18next) 반환 */
+  get localizer() {
+    return n;
   }
   /** 앱 로드 및 초기화 */
   async load(t) {
-    if (this.unload(), this._config = t, await u.init(t.theme), t.localization) {
+    if (this.unload(), this._config = t, await s.init(t.theme), t.localization) {
       for (const e of t.localization.plugins || [])
         n.use(e);
       await n.init(t.localization);
     }
-    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize")), this._root = await this.createLayout(t.layout), this._router = new l({
-      root: this._root,
+    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize")), this._layout = await this.createLayout(t.layout), this._router = new l({
+      root: this._layout,
       basepath: t.basepath,
-      routes: t.routes
-    }), console.log("✅ App loaded successfully");
+      routes: t.routes,
+      fallback: t.fallback
+    });
   }
   /** 앱 언로드 */
   unload() {
-    window.removeEventListener("resize", this.handleWindowResize), this._root && (this._root.remove(), this._root = void 0), this._router && (this._router.destroy(), this._router = void 0), this._config && (this._config = void 0);
+    window.removeEventListener("resize", this.handleWindowResize), this._layout && (this._layout.remove(), this._layout = void 0), this._router && (this._router.destroy(), this._router = void 0), this._config && (this._config = void 0);
   }
   /** 페이지 이동 */
   navigate(t) {
     this._router?.go(t);
   }
-  /** 언어 설정 변경(i18next.changeLanguage 호출) */
-  async setLanguage(t) {
-    await n.changeLanguage(t);
-  }
-  /** 레이아웃 진행바 설정 */
-  progress(t) {
-    r(() => {
-      d.set(t);
-    });
-  }
   /** 공지 메시지 */
   async notice(t, e) {
     await this.notify("notice", t, e);
@@ -97,7 +88,7 @@ class o {
   }
   /** 알림 표시 */
   async notify(t, e, i) {
-    await c.toast({
+    await d.toast({
       type: t,
       content: e,
       label: i?.title,
@@ -106,7 +97,7 @@ class o {
     });
   }
 }
-const g = o.instance;
+const p = o.instance;
 export {
-  g as app
+  p as app
 };

package/dist/components/SidebarLink.js

@@ -3,15 +3,15 @@ import { property as e } from "lit/decorators.js";
 import { Icon as l } from "@iyulab/components/dist/components/Icon/Icon.js";
 import { ExtendedBaseElement as h } from "../internals/ExtendedBaseElement.js";
 import { styles as d } from "./SidebarLink.styles.js";
-var u = Object.defineProperty, n = (o, r, a, f) => {
+var m = Object.defineProperty, n = (o, r, a, u) => {
   for (var t = void 0, s = o.length - 1, p; s >= 0; s--)
     (p = o[s]) && (t = p(r, a, t) || t);
-  return t && u(r, a, t), t;
+  return t && m(r, a, t), t;
 };
 class i extends h {
   constructor() {
     super(...arguments), this.selected = !1, this.compact = !1, this.handleRouteBegin = (r) => {
-      this.pattern ||= this.href, this.pattern ? (this.pattern = typeof this.pattern == "string" ? new URLPattern(this.pattern, window.location.origin) : this.pattern, this.selected = this.pattern.test(r.routeInfo.path, window.location.origin)) : this.selected = !1;
+      this.pattern ||= this.href, this.pattern ? (this.pattern = typeof this.pattern == "string" ? new URLPattern(this.pattern, window.location.origin) : this.pattern, this.selected = this.pattern.test(r.context.path, window.location.origin)) : this.selected = !1;
     };
   }
   static {

package/dist/internals/observables.d.ts

@@ -5,7 +5,3 @@ export type ScreenSize = 'small' | 'medium' | 'large';
  * 현재 화면 크기 상태
  */
 export declare const screen: IObservableValue<ScreenSize>;
-/**
- * 로딩 진행 상태 (0 - 100)
- */
-export declare const progress: IObservableValue<number>;

package/dist/internals/observables.js

@@ -1,6 +1,5 @@
-import { observable as o } from "mobx";
-const e = o.box("large"), s = o.box(0);
+import { observable as e } from "mobx";
+const r = e.box("large");
 export {
-  s as progress,
-  e as screen
+  r as screen
 };

package/dist/layouts/SidebarLayout.d.ts

@@ -1,16 +1,18 @@
 import { nothing, PropertyValues } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { IconButton } from '@iyulab/components/dist/components/icon-button/IconButton.js';
+import { ProgressBar } from '@iyulab/components/dist/components/progress-bar/ProgressBar.js';
 import { ExtendedBaseElement } from '../internals/ExtendedBaseElement';
-import { ProgressBar } from '../components/ProgressBar';
 import { SidebarLogo } from '../components/SidebarLogo';
 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 deveveloper experience) */
 declare global {
     interface HTMLElementTagNameMap {
+        'u-icon-button': IconButton;
         'u-progress-bar': ProgressBar;
         'u-sidebar-logo': SidebarLogo;
         'u-sidebar-section': SidebarSection;
@@ -35,7 +37,7 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
     static dependencies: Record<string, typeof BaseElement>;
     /** 반응형 상태 관리를 위한 MobX 반응 해제 함수들 */
     private disposers;
-    progressEl?: ProgressBar;
+    progressBarEl: ProgressBar;
     /** 사이드바 상태 */
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
@@ -55,4 +57,10 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
      * 백드롭 클릭 or 라우트 변경 시
      */
     private toggleStateIfModalState;
+    /** 라우트 변경 시작 핸들러 */
+    private handleRouteBegin;
+    /** 라우트 변경 진행 핸들러 */
+    private handleRouteProgress;
+    /** 라우트 변경 완료 핸들러 */
+    private handleRouteDone;
 }

package/dist/layouts/SidebarLayout.js

@@ -1,44 +1,47 @@
-import { nothing as p, html as i } from "lit";
-import { query as f, state as b, property as h, customElement as m } from "lit/decorators.js";
-import { repeat as l } from "lit/directives/repeat.js";
-import { autorun as g } from "mobx";
-import { IconButton as $ } from "@iyulab/components/dist/components/icon-button/IconButton.js";
-import { screen as u, progress as y } from "../internals/observables.js";
-import { ExtendedBaseElement as v } from "../internals/ExtendedBaseElement.js";
-import { ProgressBar as S } from "../components/ProgressBar.js";
+import { nothing as u, html as i } from "lit";
+import { query as h, state as g, property as b, customElement as f } from "lit/decorators.js";
+import { unsafeHTML as m } from "lit/directives/unsafe-html.js";
+import { repeat as n } from "lit/directives/repeat.js";
+import { autorun as $ } from "mobx";
+import { IconButton as v } from "@iyulab/components/dist/components/icon-button/IconButton.js";
+import { ProgressBar as y } from "@iyulab/components/dist/components/progress-bar/ProgressBar.js";
+import { screen as p } from "../internals/observables.js";
+import { ExtendedBaseElement as S } from "../internals/ExtendedBaseElement.js";
 import { SidebarLogo as _ } from "../components/SidebarLogo.js";
-import { SidebarSection as k } from "../components/SidebarSection.js";
-import { SidebarGroup as w } from "../components/SidebarGroup.js";
-import { SidebarLink as I } from "../components/SidebarLink.js";
-import { SidebarButton as E } from "../components/SidebarButton.js";
-import { styles as C } from "./SidebarLayout.styles.js";
-import { unsafeHTML as O } from "lit/directives/unsafe-html.js";
-var M = Object.defineProperty, L = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, B = Reflect.get, n = (e, t, s, a) => {
-  for (var r = a > 1 ? void 0 : a ? L(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+import { SidebarSection as w } from "../components/SidebarSection.js";
+import { SidebarGroup as k } from "../components/SidebarGroup.js";
+import { SidebarLink as E } from "../components/SidebarLink.js";
+import { SidebarButton as B } from "../components/SidebarButton.js";
+import { styles as L } from "./SidebarLayout.styles.js";
+var R = Object.defineProperty, I = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, C = Reflect.get, l = (e, t, s, a) => {
+  for (var r = a > 1 ? void 0 : a ? I(t, s) : t, d = e.length - 1, c; d >= 0; d--)
     (c = e[d]) && (r = (a ? c(t, s, r) : c(r)) || r);
-  return a && r && M(t, s, r), r;
-}, j = (e, t, s) => B(P(e), s, t);
-let o = class extends v {
+  return a && r && R(t, s, r), r;
+}, O = (e, t, s) => C(P(e), s, t);
+let o = class extends S {
   constructor() {
     super(...arguments), this.disposers = [], this.state = "docked", this.toggleState = () => {
-      const e = u.get();
+      const e = p.get();
       e === "large" ? this.state = this.state === "docked" ? "slim" : "docked" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "closed" ? "modal" : "closed" : console.warn("Unknown screen size:", e);
     }, this.toggleStateIfModalState = () => {
-      const e = u.get();
+      const e = p.get();
       this.state === "modal" && (e === "medium" ? this.state = "slim" : e === "small" && (this.state = "closed"));
+    }, this.handleRouteBegin = (e) => {
+      this.progressBarEl.value = 0, this.toggleStateIfModalState();
+    }, this.handleRouteProgress = (e) => {
+      this.progressBarEl.value = e.progress;
+    }, this.handleRouteDone = (e) => {
+      this.progressBarEl.value = 100;
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.disposers.push(g(() => {
-      const e = u.get();
+    super.connectedCallback(), this.disposers.push($(() => {
+      const e = p.get();
       this.updateState(e);
-    })), this.disposers.push(g(() => {
-      const e = y.get();
-      this.progressEl && (this.progressEl.value = e);
-    })), window.addEventListener("route-begin", this.toggleStateIfModalState);
+    })), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress);
   }
   disconnectedCallback() {
-    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.toggleStateIfModalState), super.disconnectedCallback();
+    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), super.disconnectedCallback();
   }
   updated(e) {
     super.updated(e), e.has("config") && (this.styles = this.config?.styles);
@@ -51,12 +54,12 @@ let o = class extends v {
         <div class="sidebar-header" part="sidebar-header">
           <u-sidebar-logo
             .compact="${this.state === "slim"}"
-            .type=${this.config.logo.type}
-            .image="${this.config.logo.image}"
-            .icon="${this.config.logo.icon}"
-            .label="${this.config.logo.label}"
-            .styles="${this.config.logo.styles}"
-            @click="${this.config.logo.onClick}"
+            .type=${this.config.logo?.type || "icon"}
+            .image="${this.config.logo?.image}"
+            .icon="${this.config.logo?.icon}"
+            .label="${this.config.logo?.label}"
+            .styles="${this.config.logo?.styles}"
+            @click="${this.config.logo?.onClick}"
           ></u-sidebar-logo>
           <u-icon-button class="sidebar-toggler" part="sidebar-toggler"
             name=${this.state === "closed" ? "chevron-right" : "layout-sidebar"}
@@ -66,7 +69,7 @@ let o = class extends v {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-menu" part="sidebar-menu">
-          ${l(
+          ${n(
       this.config.menu ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
@@ -76,7 +79,7 @@ let o = class extends v {
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer"
           ?hidden="${!this.config.footer || this.config.footer.length === 0}">
-          ${l(
+          ${n(
       this.config.footer ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
@@ -96,11 +99,11 @@ let o = class extends v {
         ?hidden="${this.state !== "modal"}"
         @click="${this.toggleStateIfModalState}"
       ></div>
-    ` : p;
+    ` : u;
   }
   /** 사이드바 아이템 렌더링 */
   renderItem(e) {
-    return e ? e.type === "content" ? this.state === "slim" ? p : O(e.content) : e.type === "button" ? i`
+    return e ? e.type === "content" ? this.state === "slim" ? u : m(e.content) : e.type === "button" ? i`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -115,7 +118,7 @@ let o = class extends v {
           .subTitle="${e.subTitle}"
           .items="${e.items}"
           .styles="${e.styles}">
-          ${l(
+          ${n(
       e.items,
       (t, s) => s,
       (t, s) => this.renderItem(t)
@@ -129,7 +132,7 @@ let o = class extends v {
           .label="${e.label}"
           .items="${e.items}"
           .styles="${e.styles}">
-          ${l(
+          ${n(
       e.items,
       (t, s) => s,
       (t, s) => this.renderItem(t)
@@ -144,34 +147,34 @@ let o = class extends v {
           .pattern="${e.pattern}"
           .styles="${e.styles}"
         ></u-sidebar-link>
-      ` : p;
+      ` : u;
   }
   /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
   updateState(e) {
     e === "large" ? this.state = "docked" : e === "medium" ? this.state = "slim" : e === "small" ? this.state = "closed" : console.warn("Unknown screen size:", e);
   }
 };
-o.styles = [j(o, o, "styles"), C];
+o.styles = [O(o, o, "styles"), L];
 o.dependencies = {
-  "u-icon-button": $,
-  "u-progress-bar": S,
+  "u-icon-button": v,
+  "u-progress-bar": y,
   "u-sidebar-logo": _,
-  "u-sidebar-section": k,
-  "u-sidebar-group": w,
-  "u-sidebar-link": I,
-  "u-sidebar-button": E
+  "u-sidebar-section": w,
+  "u-sidebar-group": k,
+  "u-sidebar-link": E,
+  "u-sidebar-button": B
 };
-n([
-  f("u-progress-bar")
-], o.prototype, "progressEl", 2);
-n([
-  b()
+l([
+  h("u-progress-bar")
+], o.prototype, "progressBarEl", 2);
+l([
+  g()
 ], o.prototype, "state", 2);
-n([
-  h({ type: Object })
+l([
+  b({ type: Object })
 ], o.prototype, "config", 2);
-o = n([
-  m("app-sidebar-layout")
+o = l([
+  f("app-sidebar-layout")
 ], o);
 export {
   o as SidebarLayout

package/dist/layouts/SidebarLayout.styles.js

@@ -100,6 +100,25 @@ const r = o`
     border-top: 1px solid var(--u-border-color-weak);
   }
 
+  /* Main Content */
+  .main {
+    position: relative;
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    background: var(--u-bg-color);
+  }
+
+  .main u-progress-bar {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    height: 4px;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
   /* Backdrop for modal mode */
   .backdrop {
     content: '';
@@ -111,15 +130,6 @@ const r = o`
     bottom: 0;
     background: var(--u-overlay-bg-color);
   }
-
-  /* Main Content */
-  .main {
-    position: relative;
-    flex: 1;
-    display: block;
-    overflow: hidden;
-    background: var(--u-bg-color);
-  }
 `;
 export {
   r as styles

package/dist/layouts/SidebarLayout.types.d.ts

@@ -19,7 +19,7 @@ export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGro
 export interface SidebarLayoutConfig {
     type: 'sidebar';
     /** 최상단 앱 로고 */
-    logo: SidebarLogoConfig;
+    logo?: SidebarLogoConfig;
     /** 상단/메인 메뉴 항목들 */
     menu?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */

package/dist/types/AppConfigs.d.ts

@@ -1,5 +1,5 @@
 import { InitOptions, Module, Newable, NewableModule } from 'i18next';
-import { RouteConfig } from '@iyulab/router';
+import { RouteConfig, FallbackRouteConfig } from '@iyulab/router';
 import { ThemeInitOptions } from '@iyulab/components/dist/utilities/theme.js';
 import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 /**
@@ -8,7 +8,7 @@ import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 export type LocalizationInitOptions = InitOptions & {
     /**
      * i18next 플러그인 배열
-     * @description i18next.use() 메서드에 전달될 플러그인들의 배열입니다.
+     * @description i18next.use() 메서드에 전달되는 플러그인들의 배열입니다.
      */
     plugins?: (Module | NewableModule<Module> | Newable<Module>)[];
 };
@@ -35,7 +35,11 @@ export interface AppConfig {
     /**
      * 클라이언트 사이드 라우팅을 위한 설정 배열
      */
-    routes: RouteConfig[];
+    routes?: RouteConfig[];
+    /**
+     * 라우팅 실패 시 대체 컨텐츠 설정
+     */
+    fallback?: FallbackRouteConfig;
     /**
      * 애플리케이션의 스타일 테마 설정
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on react, lit-element",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -38,8 +38,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.1.2",
-    "@iyulab/router": "^0.5.1",
+    "@iyulab/components": "^0.1.3",
+    "@iyulab/router": "^0.5.2",
     "lit": "^3.3.1",
     "mobx": "^6.15.0",
     "i18next": "^25.6.2"

package/dist/components/ProgressBar.d.ts

@@ -1,22 +0,0 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-/**
- * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
- * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.
- */
-export declare class ProgressBar extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 불확정 상태 (로딩 애니메이션 표시) */
-    indeterminate: boolean;
-    /** 최소값 (기본값: 0) */
-    minValue: number;
-    /** 최대값 (기본값: 100) */
-    maxValue: number;
-    /** 현재값 */
-    value: number;
-    connectedCallback(): void;
-    protected updated(changedProperties: Map<string, unknown>): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 진행 상태 업데이트 */
-    private updateProgress;
-}

package/dist/components/ProgressBar.js

@@ -1,54 +0,0 @@
-import { html as h } from "lit";
-import { property as i } from "lit/decorators.js";
-import { BaseElement as n } from "@iyulab/components/dist/components/BaseElement.js";
-import { styles as p } from "./ProgressBar.styles.js";
-var v = Object.defineProperty, a = (u, t, s, o) => {
-  for (var e = void 0, l = u.length - 1, m; l >= 0; l--)
-    (m = u[l]) && (e = m(t, s, e) || e);
-  return e && v(t, s, e), e;
-};
-class r extends n {
-  constructor() {
-    super(...arguments), this.indeterminate = !1, this.minValue = 0, this.maxValue = 100, this.value = 0;
-  }
-  static {
-    this.styles = [super.styles, p];
-  }
-  static {
-    this.dependencies = {};
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "progressbar");
-  }
-  updated(t) {
-    super.updated(t), t.has("value") && (this.updateProgress(t.get("value"), this.value), this.setAttribute("aria-valuenow", this.value.toString())), t.has("minValue") && (this.updateProgress(this.value, this.value), this.setAttribute("aria-valuemax", this.maxValue.toString())), t.has("maxValue") && (this.updateProgress(this.value, this.value), this.setAttribute("aria-valuemin", this.minValue.toString())), t.has("indeterminate") && (this.updateProgress(this.value, this.value), this.indeterminate ? (this.removeAttribute("aria-valuenow"), this.setAttribute("aria-busy", "true")) : this.removeAttribute("aria-busy"));
-  }
-  render() {
-    return h`<slot></slot>`;
-  }
-  /** 진행 상태 업데이트 */
-  updateProgress(t, s) {
-    if (this.indeterminate) return;
-    const e = (Math.min(Math.max(s, this.minValue), this.maxValue) - this.minValue) / (this.maxValue - this.minValue);
-    t < s ? (this.style.transform = `scaleX(${e})`, s >= this.maxValue && setTimeout(() => {
-      this.style.opacity = "0";
-    }, 300)) : (this.style.opacity = "0", this.style.transform = "scaleX(0)", setTimeout(() => {
-      this.style.opacity = "1", this.style.transform = `scaleX(${e})`;
-    }, 300));
-  }
-}
-a([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "indeterminate");
-a([
-  i({ type: Number })
-], r.prototype, "minValue");
-a([
-  i({ type: Number })
-], r.prototype, "maxValue");
-a([
-  i({ type: Number })
-], r.prototype, "value");
-export {
-  r as ProgressBar
-};

package/dist/components/ProgressBar.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import('lit').CSSResult;

package/dist/components/ProgressBar.styles.js

@@ -1,31 +0,0 @@
-import { css as t } from "lit";
-const a = t`
-  :host {
-    display: block;
-    position: absolute;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background-color: var(--u-blue-600);
-    transform-origin: left;
-    transition: all 0.3s ease-out;
-    box-shadow: 0 2px 4px var(--u-shadow-weak);
-  }
-  :host([indeterminate]) {
-    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-  }
-
-  @keyframes indeterminate {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-`;
-export {
-  a as styles
-};