@iyulab/components 1.24.0 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.25.0] - 2026-08-05
+
+### Fixed
+
+- 🔴**`u-field`: the documented `validation-message` attribute never applied.** Lit derives
+  the default attribute name by **lowercasing** the property name — not by kebab-casing it —
+  so `validationMessage` was only reachable as `validationmessage`. Every usage in the
+  documentation and examples wrote `validation-message`, which set nothing and left the
+  error text invisible. The attribute name is now declared explicitly, matching the
+  convention already used elsewhere (`show-delay`, `hide-delay`).
+
+  ```html
+  <u-field label="Name" invalid validation-message="Name is required.">
+    <u-input></u-input>
+  </u-field>
+  ```
+
+  Property bindings (`.validationMessage=${…}`) are unaffected.
+
 ## [1.24.0] - 2026-08-04
 
 ### Added

package/dist/components/field/UField.d.ts

@@ -18,7 +18,14 @@ export declare class UField extends UElement {
     label?: string;
     /** 하단 설명 텍스트 */
     description?: string;
-    /** 유효성 검사 실패 시 표시할 메시지 */
+    /**
+     * 유효성 검사 실패 시 표시할 메시지.
+     *
+     * ⚠**속성 이름을 명시한다.** Lit 의 기본 속성명은 프로퍼티명을 **소문자화**한 것이라
+     * (kebab 이 아니다) 그대로 두면 `validationmessage` 가 되는데, 문서·샘플·소비 코드가
+     * 전부 `validation-message` 로 적고 있었고 그 형태는 **아무것도 설정하지 않았다**.
+     * 형제 프로퍼티들도 명시형을 쓴다(`show-delay`·`hide-delay`).
+     */
     validationMessage?: string;
     render(): import('lit-html').TemplateResult<1>;
     private renderFooter;

package/dist/components/field/UField.js

@@ -58,7 +58,10 @@ __decorate([property({
 }), __decorateMetadata("design:type", Boolean)], UField.prototype, "invalid", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UField.prototype, "label", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UField.prototype, "description", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UField.prototype, "validationMessage", void 0);
+__decorate([property({
+	type: String,
+	attribute: "validation-message"
+}), __decorateMetadata("design:type", String)], UField.prototype, "validationMessage", void 0);
 UField = __decorate([customElement("u-field")], UField);
 //#endregion
 export { UField };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "keywords": [
     "iyulab",
     "components",
@@ -25,6 +25,13 @@
   ],
   "type": "module",
   "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": [
+    "./src/components/*/U*.ts",
+    "./dist/components/*/U*.js"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/skills/iyulab-components/references/components/checkbox.md

@@ -34,7 +34,7 @@ Checkbox with `indeterminate` state support. Form-associated (`formAssociated =
 | `checked` | `boolean` | `false` | ✓ | Checked state |
 | `indeterminate` | `boolean` | `false` | ✓ | Partial / indeterminate state |
 | `variant` | `'filled'\|'outline'` | `'filled'` | ✓ | Visual style |
-| `color` | `'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'\|'neutral'` | `'blue'` | ✓ | Accent color |
+| `color` | `'primary'\|'info'\|'success'\|'warning'\|'danger'\|'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'\|'neutral'` | `'blue'` | ✓ | Accent color — role axis (`primary`…`danger`, follows rebranding) and decorative axis (`blue`…, immune to it) |
 | `disabled` | `boolean` | `false` | ✓ | Disable the control |
 | `readonly` | `boolean` | `false` | ✓ | Read-only |
 | `required` | `boolean` | `false` | ✓ | Required field |

package/skills/iyulab-components/references/components/spinner.md

@@ -28,7 +28,7 @@ Animated circular spinner for loading states. Optional label below the spinner v
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `color` | `'neutral'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | — | ✓ | Spinner color preset |
+| `color` | `'neutral'\|'primary'\|'info'\|'success'\|'warning'\|'danger'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | — | ✓ | Spinner color preset — role axis (`primary`…`danger`, follows rebranding) and decorative axis (`blue`…, immune to it) |
 
 ## CSS Parts