@transcodes/ui-components 0.4.6 → 0.4.7

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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

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

@@ -22,6 +22,7 @@ export declare class TcText extends LitElement {
     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,EAAW,MAAM,KAAK,CAAC;AAK/C,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,MAAM;CA6BhB;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,14 +1,14 @@
-import { css as h, LitElement as x, nothing as p } from "lit";
-import { property as a, customElement as f } from "lit/decorators.js";
-import { styleMap as g } from "lit/directives/style-map.js";
-import { unsafeStatic as m, html as y } from "lit/static-html.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (o, s, i, n) => {
-  for (var e = n > 1 ? void 0 : n ? d(s, i) : s, c = o.length - 1, l; c >= 0; c--)
-    (l = o[c]) && (e = (n ? l(s, i, e) : l(e)) || e);
-  return n && e && u(s, i, e), e;
+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, 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 x {
+let e = class extends f {
   constructor() {
     super(...arguments), this.tag = "p", this.sx = {}, this.for = "";
   }
@@ -29,8 +29,15 @@ let t = class extends x {
     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 o = m(this.tag), s = [
+    const r = g(this.tag), t = [
       "text",
       this.size ? `text--${this.size}` : "",
       this.weight ? `text--w${this.weight}` : "",
@@ -39,21 +46,20 @@ let t = class extends x {
       ...i ? { color: i } : {},
       ...this.sx
     };
-    return y`
-      <${o}
+    return m`
+      <${r}
         part="text"
-        class=${s}
-        style=${g(n)}
-        for=${this.tag === "label" && this.for ? this.for : p}
+        class=${t}
+        style=${x(n)}
       >
         <slot></slot>
-      </${o}>
+      </${r}>
     `;
   }
 };
-t.styles = [
-  v,
-  h`
+e.styles = [
+  y,
+  p`
       :host {
         display: contents;
       }
@@ -127,27 +133,27 @@ t.styles = [
       }
     `
 ];
-r([
+s([
   a({ type: String })
-], t.prototype, "tag", 2);
-r([
+], e.prototype, "tag", 2);
+s([
   a({ type: String })
-], t.prototype, "size", 2);
-r([
+], e.prototype, "size", 2);
+s([
   a({ type: String })
-], t.prototype, "weight", 2);
-r([
+], e.prototype, "weight", 2);
+s([
   a({ type: String })
-], t.prototype, "color", 2);
-r([
+], e.prototype, "color", 2);
+s([
   a({ type: Object })
-], t.prototype, "sx", 2);
-r([
+], e.prototype, "sx", 2);
+s([
   a({ type: String })
-], t.prototype, "for", 2);
-t = r([
-  f("tc-text")
-], t);
+], 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.6",
+  "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.6"
+    "@transcodes/design-tokens": "^0.4.7"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.9",