@transcodes/ui-components 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.7] - 2026-01-13
+
+### Fixed
+
+- **tc-text**: Shadow DOM 환경에서 `for` 속성이 정상 작동하도록 수정
+  - Shadow DOM의 label[for]는 Light DOM input을 참조할 수 없는 웹 표준 제약 해결
+  - JavaScript로 커스텀 구현: label 클릭 시 자동으로 target input에 포커스
+  - checkbox/radio는 자동 클릭도 지원하여 네이티브 HTML과 동일한 UX 제공
+  - 사용자 API는 변경 없음 (`<tc-text tag="label" for="id">` 그대로 사용)
+
+## [0.4.6] - 2026-01-13
+
+### Added
+
+- **tc-text**: `for` 속성 지원 추가 (label 접근성 개선)
+  - `tag="label"`일 때 `for` 속성으로 form control과 연결 가능
+  - 스크린 리더 및 키보드 네비게이션 접근성 향상
+  - Storybook `LabelWithFor` 스토리 추가
+
 ## [0.4.5] - 2025-12-23
 
 ### Fixed

package/dist/primitives/tc-text.d.ts

@@ -18,9 +18,11 @@ export declare class TcText extends LitElement {
     weight?: TextWeight;
     color?: TextColor | string;
     sx: SxProps;
+    for: string;
     static styles: import('lit').CSSResult[];
     private getColorClass;
     private getColorStyle;
+    firstUpdated(): void;
     render(): import('lit').TemplateResult;
 }
 declare global {

package/dist/primitives/tc-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-text.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,OAAO,GACR,GAAG,GACH,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,CAAC;AAEZ,KAAK,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACpD,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAChD,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,EAAE,OAAO,CAAO;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA2EpB;IAEF,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAgBZ,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-text.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,OAAO,GACR,GAAG,GACH,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,CAAC;AAEZ,KAAK,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACpD,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAChD,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,EAAE,OAAO,CAAO;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,EAAE,EAAE,OAAO,CAAM;IACjB,GAAG,SAAM;IAErC,OAAgB,MAAM,4BA2EpB;IAEF,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAgBZ,YAAY;IAyBZ,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-text.js

@@ -1,16 +1,16 @@
-import { css as x, LitElement as p } from "lit";
-import { property as a, customElement as g } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-import { unsafeStatic as f, html as m } from "lit/static-html.js";
+import { css as p, LitElement as f } from "lit";
+import { property as a, customElement as h } from "lit/decorators.js";
+import { styleMap as x } from "lit/directives/style-map.js";
+import { unsafeStatic as g, html as m } from "lit/static-html.js";
 import { sharedStyles as y } from "../styles/shared.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (r, o, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? u(o, s) : o, c = r.length - 1, l; c >= 0; c--)
-    (l = r[c]) && (e = (i ? l(o, s, e) : l(e)) || e);
-  return i && e && v(o, s, e), e;
+var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (r, t, i, n) => {
+  for (var o = n > 1 ? void 0 : n ? u(t, i) : t, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (o = (n ? l(t, i, o) : l(o)) || o);
+  return n && o && v(t, i, o), o;
 };
-let t = class extends p {
+let e = class extends f {
   constructor() {
-    super(...arguments), this.tag = "p", this.sx = {};
+    super(...arguments), this.tag = "p", this.sx = {}, this.for = "";
   }
   getColorClass() {
     return this.color && {
@@ -29,26 +29,37 @@ let t = class extends p {
     if (this.color && (this.color.startsWith("var(") || this.color.startsWith("#") || this.color.startsWith("rgb")))
       return this.color;
   }
+  firstUpdated() {
+    this.tag === "label" && this.for && this.addEventListener("click", (r) => {
+      r.preventDefault();
+      const t = document.getElementById(this.for);
+      t && (t.focus(), t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") && t.click());
+    });
+  }
   render() {
-    const r = f(this.tag), o = [
+    const r = g(this.tag), t = [
       "text",
       this.size ? `text--${this.size}` : "",
       this.weight ? `text--w${this.weight}` : "",
       this.getColorClass()
-    ].filter(Boolean).join(" "), s = this.getColorStyle(), i = {
-      ...s ? { color: s } : {},
+    ].filter(Boolean).join(" "), i = this.getColorStyle(), n = {
+      ...i ? { color: i } : {},
       ...this.sx
     };
     return m`
-      <${r} part="text" class=${o} style=${h(i)}>
+      <${r}
+        part="text"
+        class=${t}
+        style=${x(n)}
+      >
         <slot></slot>
       </${r}>
     `;
   }
 };
-t.styles = [
+e.styles = [
   y,
-  x`
+  p`
       :host {
         display: contents;
       }
@@ -122,24 +133,27 @@ t.styles = [
       }
     `
 ];
-n([
+s([
   a({ type: String })
-], t.prototype, "tag", 2);
-n([
+], e.prototype, "tag", 2);
+s([
   a({ type: String })
-], t.prototype, "size", 2);
-n([
+], e.prototype, "size", 2);
+s([
   a({ type: String })
-], t.prototype, "weight", 2);
-n([
+], e.prototype, "weight", 2);
+s([
   a({ type: String })
-], t.prototype, "color", 2);
-n([
+], e.prototype, "color", 2);
+s([
   a({ type: Object })
-], t.prototype, "sx", 2);
-t = n([
-  g("tc-text")
-], t);
+], e.prototype, "sx", 2);
+s([
+  a({ type: String })
+], e.prototype, "for", 2);
+e = s([
+  h("tc-text")
+], e);
 export {
-  t as TcText
+  e as TcText
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcodes/ui-components",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "private": false,
   "description": "Lit 3.x component library with Reactive Controllers",
   "keywords": [
@@ -75,7 +75,7 @@
     "lit": "^3.0.0"
   },
   "dependencies": {
-    "@transcodes/design-tokens": "^0.4.5"
+    "@transcodes/design-tokens": "^0.4.7"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.9",