@iyulab/components 1.2.1 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [1.3.3] - 2026-07-03
+
+### Fixed
+- `UCheckbox`: 클래스 JSDoc에 `@event change` 태그 누락으로 공식 React 래퍼(`@iyulab/components/react`)의 `UCheckbox` props가 빈 `{}`로 생성되어 `onChange`가 노출되지 않던 결함 수정. 런타임은 `this.relay(e)`로 `change`를 정상 발생시키지만, 래퍼 생성기가 `@event` 태그(또는 `this.fire<T>('name')` 리터럴)로만 이벤트 맵을 도출하므로 태그가 없으면 이벤트가 누락된다. (`USwitch`/`UInput`/`UTextarea`는 태그 보유 — `relay()`를 쓰는 폼 컨트롤 중 `UCheckbox`만 누락되어 있었음.) yesung-oms dogfooding에서 발견.
+
+### Changed
+- `plugins/vite-plugin-react-wrapper.ts`: `@customElement` 컴포넌트가 `this.relay(...)`/`this.dispatchEvent(...)`로 이벤트를 발생시키지만 수집된 이벤트가 0건이면 빌드 시 경고를 출력하도록 개선 — 위 `UCheckbox`류의 "태그 누락으로 이벤트가 조용히 사라지는" 결함 재발 방지. (`this.fire<T>('name')`은 이름이 정적으로 잡히므로 경고 대상이 아님.)
+
+## [1.3.2] - 2026-07-02
+
+### Documentation
+- `docs/form-controls.md`: `UCheckbox`의 `label` attribute가 다른 폼 컨트롤과 달리 default slot의 fallback content로 쓰인다는 점(slot이 있으면 attribute보다 우선)을 "Common Properties" 표 아래에 명시.
+
+## [1.3.1] - 2026-07-02
+
+### Added
+- `UInput`: `--u-input-display` CSS 커스텀 프로퍼티 추가(기본값 `inline-block`, 기존과 동일). 폼/그리드 셀에서 전체 폭을 채우려는 소비자는 `u-input { --u-input-display: block; }`로 오버라이드 가능 — 이전에는 전역 `u-input{ display:block; width:100% }` 같은 하드코딩 우회가 필요했다.
+
+## [1.3.0] - 2026-07-02
+
+### Fixed
+- `UFloatingElement.strategy`에 `reflect: true` 누락 수정 — JS로 `.strategy = 'fixed'`를 설정해도 host 속성이 갱신되지 않아 `:host([strategy="fixed"])` CSS 셀렉터가 매치되지 않던 버그.
+
+### Changed
+- `USelect` 내부 `<u-popover>`의 기본 위치 전략을 `strategy="fixed"`로 변경. 기존 `absolute` 기본값은 `UDrawer` body(`overflow:auto`)처럼 스크롤 컨테이너 안에 `u-select`가 놓이면 팝오버가 잘리는 문제가 있었다(흔한 "폼 드로어 + 셀렉트" 조합에서 재현). `fixed`는 뷰포트 기준으로 그려져 조상의 `overflow`에 클리핑되지 않으며, `@floating-ui/dom`의 `autoUpdate`가 스크롤/리사이즈 시 위치를 계속 재계산하므로 기존 동작과 시각적으로 동일하게 보인다.
+
 ## [1.2.1] - 2026-07-02
 
 ### Fixed

package/README.md

@@ -100,6 +100,7 @@ Theme.set('system');
 | [docs/theming.md](./docs/theming.md) | 테마 및 CSS 변수 |
 | [docs/form-controls.md](./docs/form-controls.md) | 폼 연동 및 검증 API |
 | [docs/icons.md](./docs/icons.md) | 아이콘 등록 및 사용 |
+| [docs/native-event.md](./docs/native-event.md) | 컴포넌트가 다루는 네이티브 DOM 이벤트 목록 |
 
 ## License
 

package/dist/components/UFloatingElement.js

@@ -220,7 +220,10 @@ __decorate([property({
 	type: String,
 	reflect: true
 }), __decorateMetadata("design:type", String)], UFloatingElement.prototype, "for", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "strategy", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "strategy", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "placement", void 0);
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "offset", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UFloatingElement.prototype, "shift", void 0);

package/dist/components/checkbox/UCheckbox.d.ts

@@ -16,6 +16,8 @@ export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan
  * @cssprop --checkbox-color - 체크 표시 색상 (outline variant)
  * @cssprop --checkbox-border-color - 체크박스 테두리 색상
  * @cssprop --checkbox-background-color - 체크박스 배경색 (filled variant)
+ *
+ * @event change - 체크 상태 변경 시 발생
  */
 export declare class UCheckbox extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/input/UInput.styles.js

@@ -10,7 +10,7 @@ var styles = css`
 
   :host {
     position: relative;
-    display: inline-block;
+    display: var(--u-input-display, inline-block);
     color: var(--u-txt-color);
     font-size: inherit;
     font-family: var(--u-font-base);

package/dist/components/select/USelect.js

@@ -180,6 +180,7 @@ var USelect = class USelect extends UFormControlElement {
         trigger="click"
         placement="bottom-start"
         offset="1"
+        strategy="fixed"
         @show=${this.handlePopoverEvent}
         @hide=${this.handlePopoverEvent}
       >

package/dist/react/UCheckbox.d.ts

@@ -3,6 +3,7 @@ import { UCheckbox as UCheckboxElement } from '../components/checkbox/UCheckbox'
 
 export declare const UCheckbox: React.ForwardRefExoticComponent<
   Partial<UCheckboxElement> & React.HTMLAttributes<UCheckboxElement> & {
+  onChange?: (event: CustomEvent) => void;
   }
 >;
 

package/dist/react/UCheckbox.js

@@ -6,5 +6,7 @@ export const UCheckbox = createComponent({
   react: React,
   tagName: 'u-checkbox',
   elementClass: UCheckboxElement,
-  events: {},
+  events: {
+    onChange: 'change',
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.2.1",
+  "version": "1.3.3",
   "keywords": [
     "iyulab",
     "components",
@@ -42,6 +42,7 @@
     "dev": "vite --force",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:browser": "vitest run --project=browser",
     "build:plugins": "tsc -p plugins/tsconfig.json",
     "build": "eslint && vite build && npm run build:plugins"
   },
@@ -65,6 +66,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@types/node": "^25.8.0",
+    "@vitest/browser-playwright": "^4.1.8",
     "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.3.1",
     "glob": "^13.0.6",

package/plugins/vite-plugin-react-wrapper.js

@@ -63,6 +63,14 @@ function parseComponent(filePath) {
     if (!classMatch)
         return [];
     const events = collectEvents(content);
+    // 이벤트를 발생시키지만(relay/dispatchEvent) 정적으로 이름을 도출할 수 없는 컴포넌트가
+    // @event 태그도 없으면 events 맵이 빈 채로 생성되어 React 소비자가 이벤트를 구독할 수 없다.
+    // (this.fire<T>('name')은 이름이 문자열 리터럴로 잡히므로 이 경고 대상이 아님)
+    if (events.length === 0 && /this\.(relay|dispatchEvent)\s*\(/.test(content)) {
+        console.warn(`\x1b[33m[react-wrapper]\x1b[0m ${classMatch[1]} (${tagMatch[1]}): ` +
+            `이벤트를 발생시키지만(relay/dispatchEvent) @event 태그가 없어 React 래퍼에 이벤트 prop이 노출되지 않습니다. ` +
+            `클래스 JSDoc에 '@event <name>'을 추가하세요.`);
+    }
     return [{
             className: classMatch[1],
             tagName: tagMatch[1],