@transcodes/ui-components 0.4.4 → 0.4.6

package/CHANGELOG.md

@@ -5,6 +5,21 @@ 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.6] - 2026-01-13
+
+### Added
+
+- **tc-text**: `for` 속성 지원 추가 (label 접근성 개선)
+  - `tag="label"`일 때 `for` 속성으로 form control과 연결 가능
+  - 스크린 리더 및 키보드 네비게이션 접근성 향상
+  - Storybook `LabelWithFor` 스토리 추가
+
+## [0.4.5] - 2025-12-23
+
+### Fixed
+
+- **tc-success-screen**: 아이콘 배경색 복구 (`background: var(--alpha-primary10)`)
+
 ## [0.4.4] - 2025-12-23
 
 ### Added

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

@@ -18,6 +18,7 @@ export declare class TcText extends LitElement {
     weight?: TextWeight;
     color?: TextColor | string;
     sx: SxProps;
+    for: string;
     static styles: import('lit').CSSResult[];
     private getColorClass;
     private getColorStyle;

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,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"}

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 { 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;
+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;
 };
-let t = class extends p {
+let t = class extends x {
   constructor() {
-    super(...arguments), this.tag = "p", this.sx = {};
+    super(...arguments), this.tag = "p", this.sx = {}, this.for = "";
   }
   getColorClass() {
     return this.color && {
@@ -30,25 +30,30 @@ let t = class extends p {
       return this.color;
   }
   render() {
-    const r = f(this.tag), o = [
+    const o = m(this.tag), s = [
       "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)}>
+    return y`
+      <${o}
+        part="text"
+        class=${s}
+        style=${g(n)}
+        for=${this.tag === "label" && this.for ? this.for : p}
+      >
         <slot></slot>
-      </${r}>
+      </${o}>
     `;
   }
 };
 t.styles = [
-  y,
-  x`
+  v,
+  h`
       :host {
         display: contents;
       }
@@ -122,23 +127,26 @@ t.styles = [
       }
     `
 ];
-n([
+r([
   a({ type: String })
 ], t.prototype, "tag", 2);
-n([
+r([
   a({ type: String })
 ], t.prototype, "size", 2);
-n([
+r([
   a({ type: String })
 ], t.prototype, "weight", 2);
-n([
+r([
   a({ type: String })
 ], t.prototype, "color", 2);
-n([
+r([
   a({ type: Object })
 ], t.prototype, "sx", 2);
-t = n([
-  g("tc-text")
+r([
+  a({ type: String })
+], t.prototype, "for", 2);
+t = r([
+  f("tc-text")
 ], t);
 export {
   t as TcText

package/dist/screens/tc-success-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAkGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/screens/tc-success-screen.js

@@ -7,9 +7,9 @@ import "../primitives/tc-text.js";
 import "../primitives/tc-button.js";
 import "../primitives/tc-container.js";
 import "../primitives/tc-section.js";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (a, n, o, r) => {
-  for (var e = r > 1 ? void 0 : r ? v(n, o) : n, c = a.length - 1, l; c >= 0; c--)
-    (l = a[c]) && (e = (r ? l(n, o, e) : l(e)) || e);
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (i, n, o, r) => {
+  for (var e = r > 1 ? void 0 : r ? v(n, o) : n, c = i.length - 1, l; c >= 0; c--)
+    (l = i[c]) && (e = (r ? l(n, o, e) : l(e)) || e);
   return r && e && g(n, o, e), e;
 };
 let t = class extends d {
@@ -36,12 +36,12 @@ let t = class extends d {
     );
   }
   render() {
-    const a = this.isAnimated ? "animated" : "";
+    const i = this.isAnimated ? "animated" : "";
     return m`
       <div part="screen" class="screen" style=${y(this.sx)}>
         <tc-container>
           <div part="content" class="content">
-            <div part="icon" class="icon-container ${a}">
+            <div part="icon" class="icon-container ${i}">
               <svg
                 class="checkmark"
                 viewBox="0 0 24 24"
@@ -54,7 +54,7 @@ let t = class extends d {
                 <polyline points="20 6 9 17 4 12"></polyline>
               </svg>
             </div>
-            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${a}">
+            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${i}">
               <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
                 ${this.title}
               </tc-text>
@@ -63,7 +63,7 @@ let t = class extends d {
               </tc-text>
             </tc-section>
             ${this.actionLabel ? m`
-                  <div part="action" class="action ${a}">
+                  <div part="action" class="action ${i}">
                     <tc-button variant="primary" @tc-click=${this.handleAction}>
                       ${this.actionLabel}
                     </tc-button>
@@ -110,6 +110,7 @@ t.styles = p`
       align-items: center;
       justify-content: center;
       padding: var(--space-md);
+      background: var(--alpha-primary10);
       border-radius: var(--radius-full);
       color: var(--accent-primary);
       transform: scale(0);
@@ -174,25 +175,25 @@ t.styles = p`
       transform: translateY(0);
     }
   `;
-i([
+a([
   s({ type: String })
 ], t.prototype, "title", 2);
-i([
+a([
   s({ type: String })
 ], t.prototype, "message", 2);
-i([
+a([
   s({ type: String, attribute: "action-label" })
 ], t.prototype, "actionLabel", 2);
-i([
+a([
   s({ type: Boolean, attribute: "auto-animate" })
 ], t.prototype, "autoAnimate", 2);
-i([
+a([
   s({ type: Object })
 ], t.prototype, "sx", 2);
-i([
+a([
   h()
 ], t.prototype, "isAnimated", 2);
-t = i([
+t = a([
   u("tc-success-screen")
 ], t);
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcodes/ui-components",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "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.4"
+    "@transcodes/design-tokens": "^0.4.6"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.9",