@iyulab/modern-app 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.14.0] - 2026-08-10
+
+### Added
+
+- **`SidebarButtonConfig`, `SidebarLinkConfig`, and `SidebarGroupConfig` accept `lib?: string`.**
+  When set, `icon` resolves through `@iyulab/components`' `IconRegistry.resolve(lib, name)`
+  (a named, registered icon library) instead of only the default URL-fetch fallback path.
+  Existing usage without `lib` is unaffected.
+
+### Fixed
+
+- **`SidebarLink` selected-state icon color no longer gets overridden by a consumer-set
+  icon tint.** Adds a `--link-icon-color` custom property and a `:host([selected]) u-icon`
+  rule so the selected state's contrast wins regardless of an inherited or inline icon
+  color.
+
 ## [0.13.0] - 2026-08-08
 
 ### Added

package/dist/components/SidebarButton.d.ts

@@ -7,6 +7,9 @@ type ElementParts = 'host' | 'base' | 'icon' | 'label';
 export interface SidebarButtonConfig extends SidebarPermissionGuard {
     type: 'button';
     icon?: string;
+    /** `icon`을 어느 등록 라이브러리에서 찾을지. 미지정 시 `u-icon`의 기본 URL 경로로
+     *  해석된다(`IconRegistry.register()`로 등록한 이름 있는 세트를 쓰려면 지정해야 함). */
+    lib?: string;
     label?: string | DirectiveResult;
     styles?: StyleMap<ElementParts>;
     onClick?: (event?: Event) => void;
@@ -20,6 +23,8 @@ export declare class SidebarButton extends StyledElement<ElementParts> {
     compact: boolean;
     /** 기본 u-icon 경로의 아이콘 이름 */
     icon?: string;
+    /** `icon`을 해석할 등록 라이브러리 이름 */
+    lib?: string;
     /** 버튼 텍스트 라벨 */
     label?: string | DirectiveResult;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/SidebarButton.js

@@ -18,6 +18,7 @@ var c = class extends n {
 		return a`
       <button part="base" ?compact=${this.compact}>
         <u-icon part="icon"
+          .lib=${this.lib}
           .name=${this.icon}
           .fallback=${r}
         ></u-icon>
@@ -31,6 +32,6 @@ var c = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-button")], c);
+}), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "lib", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-button")], c);
 //#endregion
 export { c as SidebarButton };

package/dist/components/SidebarGroup.d.ts

@@ -9,6 +9,7 @@ export interface SidebarGroupConfig extends SidebarPermissionGuard {
     /** 기본 접힘 상태 */
     collapsed?: boolean;
     icon: string;
+    lib?: string;
     label: string | DirectiveResult;
     items: SidebarLinkConfig[];
     styles?: StyleMap<ElementParts>;
@@ -26,6 +27,8 @@ export declare class SidebarGroup extends StyledElement<ElementParts> {
     collapsed: boolean;
     /** 네비게이션 아이템 데이터 */
     icon?: string;
+    /** `icon`을 해석할 등록 라이브러리 이름 */
+    lib?: string;
     /** 네비게이션 아이템 데이터 */
     label?: string | DirectiveResult;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/SidebarGroup.js

@@ -30,6 +30,7 @@ var l = class extends n {
             빠져 있었다.
         -->
         <u-icon class="icon" part="icon"
+          .lib=${this.lib}
           .name=${this.icon}
           .fallback=${r}
         ></u-icon>
@@ -59,6 +60,6 @@ t([c({
 }), e("design:type", Boolean)], l.prototype, "selected", void 0), t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
+}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
 //#endregion
 export { l as SidebarGroup };

package/dist/components/SidebarLink.d.ts

@@ -6,6 +6,7 @@ type ElementParts = 'host' | 'base' | 'icon' | 'label';
 export interface SidebarLinkConfig extends SidebarPermissionGuard {
     type: 'link';
     icon?: string;
+    lib?: string;
     label: string | DirectiveResult;
     href: string;
     pattern?: string | URLPattern;
@@ -42,6 +43,8 @@ export declare class SidebarLink extends StyledElement<ElementParts> {
     compact: boolean;
     /** 네비게이션 아이템 데이터 */
     icon?: string;
+    /** `icon`을 해석할 등록 라이브러리 이름 */
+    lib?: string;
     /** 네비게이션 아이템 데이터 */
     label?: string | DirectiveResult;
     /** 네비게이션 링크 */

package/dist/components/SidebarLink.js

@@ -23,6 +23,7 @@ var c = class extends n {
       >
         <div class="container" part="base" ?compact=${this.compact}>
           <u-icon part="icon"
+            .lib=${this.lib}
             .name=${this.icon}
             .fallback=${r}
           ></u-icon>
@@ -37,6 +38,6 @@ var c = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], c.prototype, "selected", void 0), t([s({ type: Boolean }), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "href", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "pattern", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "navigate", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "target", void 0), c = t([o("u-sidebar-link")], c);
+}), e("design:type", Object)], c.prototype, "selected", void 0), t([s({ type: Boolean }), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "lib", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "href", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "pattern", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "navigate", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "target", void 0), c = t([o("u-sidebar-link")], c);
 //#endregion
 export { c as SidebarLink };

package/dist/components/SidebarLink.styles.js

@@ -46,9 +46,14 @@ var t = e`
 
   u-icon {
     flex-shrink: 0;
-    color: inherit;
+    color: var(--link-icon-color, inherit);
     font-size: 20px;
   }
+  /* Selected always wins over any consumer-supplied --link-icon-color — a
+   * high-contrast icon on the active background matters more than a brand tint. */
+  :host([selected]) u-icon {
+    color: var(--app-sidebar-active-fg, var(--u-txt-color-inverse, #FFFFFF));
+  }
 
   /*
    * ★내비 항목은 «대상의 짧은 이름» = label 단이다(용도 배정 — DL-157-4).

package/dist/layouts/SidebarLayout.js

@@ -157,6 +157,7 @@ var g = class extends i {
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
+          .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}"
           @click="${e.onClick}"
@@ -169,6 +170,7 @@ var g = class extends i {
           ?compact=${this.state === "slim"}
           ?selected=${t}
           .icon="${e.icon}"
+          .lib="${e.lib}"
           .label="${e.label}"
           .href="${e.href}"
           .pattern="${e.pattern}"
@@ -195,6 +197,7 @@ var g = class extends i {
           ?selected=${t}
           ?collapsed="${e.collapsed ?? !1}"
           .icon="${e.icon}"
+          .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
           ${p(e.items, (e, t) => t, (e) => this.renderItem(e))}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/references/layout.md

@@ -39,6 +39,7 @@ interface SidebarLinkConfig {
   label: string | DirectiveResult;
   href: string;
   icon?: string;
+  lib?: string;
   /** Override the URL matching pattern. Accepts a string or URLPattern. */
   pattern?: string | URLPattern;
   /** Let the browser navigate instead of the router. For same-origin, non-SPA paths. */
@@ -81,6 +82,7 @@ Collapsible group that contains links.
 interface SidebarGroupConfig {
   type: 'group';
   icon: string;
+  lib?: string;
   label: string | DirectiveResult;
   items: SidebarLinkConfig[];
   /** Start collapsed. Default: true */
@@ -143,6 +145,7 @@ Action button — triggers a callback instead of navigating.
 interface SidebarButtonConfig {
   type: 'button';
   icon?: string;
+  lib?: string;
   label: string | DirectiveResult;
   onClick: () => void;
   styles?: StyleMap<string>;