chore: update changelog for version 1.0.1 with bug fixes and dependency changes

Author: iujunhyung

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.0.1 (2026-04-01)
+
+### Bug Fixes
+
+- **`UIcon`**: Auto-apply `fill="currentColor"` only for fill-based icons; skip when `stroke="currentColor"` is set. Removed global `fill: currentColor` CSS rule.
+- **`URadio`** / **`USelect`**: `options` field is now a `@state()` so UI re-renders when options change. `onChangeValue()` is now triggered on both `value` and `options` changes.
+- **`UTextarea`**: Replaced `all: unset` with explicit CSS reset for better cross-browser compatibility. Height recalculation moved inside `requestAnimationFrame` to stabilize auto-resize.
+- **`Dialog`**: Fixed `prompt()` input not capturing user text — switched to property binding (`.value`) and native `@input` event.
+
+### Dependencies
+
+- **`@lit/react`**: Moved from `dependencies` to optional `peerDependencies`.
+
+---
+
 ## 1.0.0 (2026-04-01)
 
 ### Breaking Changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "keywords": [
     "iyulab",
     "components",
@@ -45,17 +45,16 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@lit/react": "^1.0.8",
     "focus-trap": "^8.0.1",
     "lit": "^3.3.2"
   },
   "peerDependencies": {
+    "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
+    "@lit/react": { "optional": true },
+    "react": { "optional": true }
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

skills/iyulab-components/SKILL.md

@@ -4,7 +4,7 @@ description: Web component library built on Lit. Covers all u-* custom elements
 license: MIT
 metadata:
   author: iyulab
-  version: "1.0.0"
+  version: "1.0.1"
 ---
 
 # @iyulab/components

src/components/icon/UIcon.styles.ts

@@ -10,6 +10,5 @@ export const styles = css`
   svg {
     width: 1em;
     height: 1em;
-    fill: currentColor;
   }
 `;

src/components/icon/UIcon.ts

@@ -72,6 +72,12 @@ export class UIcon extends UElement {
       if (svg?.tagName.toLowerCase() !== "svg") return undefined;
 
       svg.setAttribute("part", "svg");
+
+      // stroke 기반 아이콘이 아니면 fill 적용
+      if (svg.getAttribute("stroke") !== "currentColor") {
+        svg.setAttribute("fill", "currentColor");
+      }
+
       return svg.outerHTML;
     } catch {
       return undefined;

src/components/radio/URadio.ts

@@ -1,5 +1,5 @@
 import { html, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import '../field/UField.js';
 
 import { UFormControlElement } from "../UFormControlElement.js";
@@ -31,7 +31,7 @@ export class URadio extends UFormControlElement<string> {
   /** 배치 방향 */
   @property({ type: String, reflect: true }) orientation: RadioOrientation = "vertical";
 
-  private options: UOption[] = [];
+  @state() private options: UOption[] = [];
 
   disconnectedCallback(): void {
     this.cleanup(this.options);
@@ -48,7 +48,7 @@ export class URadio extends UFormControlElement<string> {
         if (this.readonly) option.disabled = true;
       });
     }
-    if (changedProperties.has('value')) {
+    if (['value','options'].some(k => changedProperties.has(k))) {
       this.onChangeValue();
     }
   }

src/components/select/USelect.ts

@@ -1,5 +1,5 @@
 import { html, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import '../field/UField.js';
 import '../icon/UIcon.js';
 import '../spinner/USpinner.js';
@@ -54,7 +54,7 @@ export class USelect extends UFormControlElement<string | string[]> {
   @query('.container', true) containerEl?: HTMLElement;
   @query('u-popover', true) popoverEl?: UPopover;
 
-  private options: UOption[] = [];
+  @state() private options: UOption[] = [];
 
   private get valueAsString(): string {
     return Array.isArray(this.value) ? this.value.join(',') : this.value ?? '';
@@ -76,7 +76,7 @@ export class USelect extends UFormControlElement<string | string[]> {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
-    if (changedProperties.has('value')) {
+    if (['value','options'].some(k => changedProperties.has(k))) {
       this.onChangeValue();
     }
   }

src/components/textarea/UTextarea.styles.ts

@@ -101,7 +101,14 @@ export const styles = css`
 
   /* ===== Textarea 요소 ===== */
   textarea {
-    all: unset;
+    display: block;
+    border: none;
+    background: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
     flex: 1;
     min-width: 0;
     font-size: 1em;

src/components/textarea/UTextarea.ts

@@ -61,8 +61,9 @@ export class UTextarea extends UFormControlElement<string> {
 
   @query('textarea', true) textareaEl?: HTMLTextAreaElement;
 
-  protected updated(changedProperties: PropertyValues): void {
+  protected async updated(changedProperties: PropertyValues): Promise<void> {
     super.updated(changedProperties);
+    await this.updateComplete;
 
     if (this.resize === 'auto' && (['value','minRows','maxRows','resize']
       .some(k => changedProperties.has(k))
@@ -145,11 +146,13 @@ export class UTextarea extends UFormControlElement<string> {
       : Infinity;
 
     textarea.style.height = 'auto';
-    const scrollHeight = textarea.scrollHeight;
-    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+    requestAnimationFrame(() => {
+      const scrollHeight = textarea.scrollHeight;
+      const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
 
-    textarea.style.height = `${newHeight}px`;
-    textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+      textarea.style.height = `${newHeight}px`;
+      textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+    });
   }
 
   private handleTextareaInput = (e: InputEvent) => {

src/utilities/Dialog.ts

@@ -112,8 +112,8 @@ export class Dialog {
           <u-input
             type=${(options?.type || 'text') as any}
             placeholder=${options?.placeholder || ''}
-            value=${inputValue}
-            @u-input=${(e: CustomEvent) => { 
+            .value=${inputValue as any}
+            @input=${(e: InputEvent) => { 
               const input = e.target as any;
               inputValue = input.value || '';
             }}