@transcodes/ui-components 0.4.6 → 0.4.8

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.8] - 2026-01-24
+
+### Changed
+
+- 모든 컴포넌트의 `@property` 데코레이터에 `reflect: true` 옵션 추가
+  - 속성 값이 DOM 어트리뷰트에 자동으로 반영되어 CSS 어트리뷰트 선택자로 스타일링 가능
+  - 외부에서 컴포넌트 상태를 쿼리하거나 디버깅이 용이해짐
+  - tc-button, tc-callout, tc-card, tc-chip, tc-container, tc-divider, tc-error-message, tc-form-header, tc-icon, tc-input, tc-input-with-chip, tc-item-button, tc-otp-input, tc-page-decoration, tc-spinner, tc-text, tc-toast, tc-error-screen, tc-loading-screen 대상
+
+### Added
+
+- **tc-loading-screen**: `submessage` 속성 추가
+
+## [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-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,QAAS,SAAQ,UAAU;IACT,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAC5D;IACgB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoGpB;IAEO,MAAM;IA4Bf,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"tc-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,QAAS,SAAQ,UAAU;IACM,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjB,OAAO,EAC9C,SAAS,GACT,WAAW,GACX,SAAS,CAAa;IACE,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoGpB;IAEO,MAAM;IA4Bf,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/primitives/tc-button.js

@@ -1,12 +1,12 @@
 import { css as p, LitElement as u, html as l } from "lit";
-import { property as r, customElement as b } from "lit/decorators.js";
+import { property as a, customElement as b } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { styleMap as v } from "lit/directives/style-map.js";
 import { sharedStyles as y } from "../styles/shared.js";
-var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (n, i, s, a) => {
-  for (var t = a > 1 ? void 0 : a ? f(i, s) : i, d = n.length - 1, c; d >= 0; d--)
-    (c = n[d]) && (t = (a ? c(i, s, t) : c(t)) || t);
-  return a && t && h(i, s, t), t;
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (n, i, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? f(i, s) : i, c = n.length - 1, d; c >= 0; c--)
+    (d = n[c]) && (t = (r ? d(i, s, t) : d(t)) || t);
+  return r && t && h(i, s, t), t;
 };
 let e = class extends u {
   constructor() {
@@ -149,16 +149,16 @@ e.styles = [
     `
 ];
 o([
-  r({ type: Boolean })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 o([
-  r({ type: Boolean })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "loading", 2);
 o([
-  r({ type: String })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 o([
-  r({ type: Object })
+  a({ type: Object })
 ], e.prototype, "sx", 2);
 e = o([
   b("tc-button")

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

@@ -1 +1 @@
-{"version":3,"file":"tc-callout.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;GASG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA0CpB;IAEO,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tc-callout.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;GASG;AACH,qBACa,SAAU,SAAQ,UAAU;IACI,OAAO,EAC9C,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA0CpB;IAEO,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-callout.js

@@ -3,12 +3,12 @@ import { property as c, customElement as d } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { styleMap as u } from "lit/directives/style-map.js";
 import { sharedStyles as y } from "../styles/shared.js";
-var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (s, e, i, r) => {
-  for (var t = r > 1 ? void 0 : r ? g(e, i) : e, n = s.length - 1, a; n >= 0; n--)
-    (a = s[n]) && (t = (r ? a(e, i, t) : a(t)) || t);
-  return r && t && h(e, i, t), t;
+var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (s, e, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? g(e, i) : e, n = s.length - 1, a; n >= 0; n--)
+    (a = s[n]) && (t = (o ? a(e, i, t) : a(t)) || t);
+  return o && t && h(e, i, t), t;
 };
-let o = class extends m {
+let r = class extends m {
   constructor() {
     super(...arguments), this.variant = "info", this.sx = {};
   }
@@ -34,7 +34,7 @@ let o = class extends m {
     `;
   }
 };
-o.styles = [
+r.styles = [
   y,
   p`
       :host {
@@ -78,14 +78,14 @@ o.styles = [
     `
 ];
 l([
-  c({ type: String })
-], o.prototype, "variant", 2);
+  c({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
 l([
   c({ type: Object })
-], o.prototype, "sx", 2);
-o = l([
+], r.prototype, "sx", 2);
+r = l([
   d("tc-callout")
-], o);
+], r);
 export {
-  o as TcCallout
+  r as TcCallout
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tc-card.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACiB,QAAQ,UAAS;IAC1C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoCpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-card.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACgC,QAAQ,UACpE;IACoB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoCpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-card.js

@@ -1,14 +1,14 @@
-import { css as p, LitElement as l, html as f } from "lit";
+import { css as l, LitElement as p, html as f } from "lit";
 import { property as c, customElement as m } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-import { sharedStyles as u } from "../styles/shared.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { sharedStyles as h } from "../styles/shared.js";
 var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, o, n, s) => {
   for (var e = s > 1 ? void 0 : s ? y(o, n) : o, a = t.length - 1, i; a >= 0; a--)
     (i = t[a]) && (e = (s ? i(o, n, e) : i(e)) || e);
   return s && e && v(o, n, e), e;
 };
-let r = class extends l {
+let r = class extends p {
   constructor() {
     super(...arguments), this.noBorder = !1, this.sx = {};
   }
@@ -18,7 +18,7 @@ let r = class extends l {
       "card--no-border": this.noBorder
     };
     return f`
-      <div part="card" class=${b(t)} style=${h(this.sx)}>
+      <div part="card" class=${b(t)} style=${u(this.sx)}>
         <div class="card-content">
           <slot></slot>
         </div>
@@ -27,8 +27,8 @@ let r = class extends l {
   }
 };
 r.styles = [
-  u,
-  p`
+  h,
+  l`
       :host {
         display: block;
         min-width: 0;
@@ -64,7 +64,7 @@ r.styles = [
     `
 ];
 d([
-  c({ type: Boolean, attribute: "no-border" })
+  c({ type: Boolean, reflect: !0, attribute: "no-border" })
 ], r.prototype, "noBorder", 2);
 d([
   c({ type: Object })

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

@@ -1 +1 @@
-{"version":3,"file":"tc-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,OAAO,EAC/B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAiDpB;IAEO,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,MAAO,SAAQ,UAAU;IACO,OAAO,EAC9C,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACoB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACxC,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAiDpB;IAEO,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-chip.js

@@ -1,18 +1,18 @@
-import { css as l, LitElement as h, html as f } from "lit";
-import { property as c, customElement as m } from "lit/decorators.js";
+import { css as l, LitElement as f, html as h } from "lit";
+import { property as o, customElement as m } from "lit/decorators.js";
 import { styleMap as d } from "lit/directives/style-map.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (n, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? y(t, a) : t, p = n.length - 1, o; p >= 0; p--)
-    (o = n[p]) && (r = (s ? o(t, a, r) : o(r)) || r);
-  return s && r && u(t, a, r), r;
+import { sharedStyles as u } from "../styles/shared.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (n, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(t, a) : t, p = n.length - 1, c; p >= 0; p--)
+    (c = n[p]) && (r = (s ? c(t, a, r) : c(r)) || r);
+  return s && r && v(t, a, r), r;
 };
-let e = class extends h {
+let e = class extends f {
   constructor() {
     super(...arguments), this.variant = "default", this.size = "md", this.sx = {};
   }
   render() {
-    return f`
+    return h`
       <span
         part="chip"
         class="chip chip--${this.variant} chip--${this.size}"
@@ -24,7 +24,7 @@ let e = class extends h {
   }
 };
 e.styles = [
-  v,
+  u,
   l`
       :host {
         display: inline-flex;
@@ -74,13 +74,13 @@ e.styles = [
     `
 ];
 i([
-  c({ type: String })
+  o({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 i([
-  c({ type: String })
+  o({ type: String, reflect: !0 })
 ], e.prototype, "size", 2);
 i([
-  c({ type: Object })
+  o({ type: Object })
 ], e.prototype, "sx", 2);
 e = i([
   m("tc-chip")

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

@@ -1 +1 @@
-{"version":3,"file":"tc-container.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACZ,IAAI,UAAS;IACd,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"tc-container.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACG,IAAI,UAAS;IAC7B,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/primitives/tc-container.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as d, html as m } from "lit";
-import { property as c, customElement as h } from "lit/decorators.js";
-import { styleMap as f } from "lit/directives/style-map.js";
+import { property as c, customElement as f } from "lit/decorators.js";
+import { styleMap as h } from "lit/directives/style-map.js";
 var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, i, o, s) => {
   for (var t = s > 1 ? void 0 : s ? x(i, o) : i, n = r.length - 1, a; n >= 0; n--)
     (a = r[n]) && (t = (s ? a(i, o, t) : a(t)) || t);
@@ -24,7 +24,7 @@ let e = class extends d {
       <div
         part="container"
         class="container ${this.wide ? "container--wide" : ""}"
-        style=${f(r)}
+        style=${h(r)}
       >
         <slot></slot>
       </div>
@@ -51,13 +51,13 @@ e.styles = p`
     }
   `;
 l([
-  c({ type: Boolean })
+  c({ type: Boolean, reflect: !0 })
 ], e.prototype, "wide", 2);
 l([
   c({ type: Object })
 ], e.prototype, "sx", 2);
 e = l([
-  h("tc-container")
+  f("tc-container")
 ], e);
 export {
   e as TcContainer

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

@@ -1 +1 @@
-{"version":3,"file":"tc-divider.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAM;IACV,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAqCpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tc-divider.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACI,IAAI,SAAM;IACzB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAqCpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-divider.js

@@ -1,10 +1,10 @@
 import { css as c, LitElement as m, html as l } from "lit";
 import { property as p, customElement as h } from "lit/decorators.js";
 import { styleMap as v } from "lit/directives/style-map.js";
-var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (s, e, d, t) => {
-  for (var r = t > 1 ? void 0 : t ? f(e, d) : e, n = s.length - 1, o; n >= 0; n--)
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (s, e, d, t) => {
+  for (var r = t > 1 ? void 0 : t ? x(e, d) : e, n = s.length - 1, o; n >= 0; n--)
     (o = s[n]) && (r = (t ? o(e, d, r) : o(r)) || r);
-  return t && r && x(e, d, r), r;
+  return t && r && f(e, d, r), r;
 };
 let i = class extends m {
   constructor() {
@@ -65,7 +65,7 @@ i.styles = c`
     }
   `;
 a([
-  p({ type: String })
+  p({ type: String, reflect: !0 })
 ], i.prototype, "text", 2);
 a([
   p({ type: Object })

package/dist/primitives/tc-error-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-error-message.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-error-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,UAAU;IAChB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAW;IAChD,OAAO,SAAM;IACb,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAcpB;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAWX,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"tc-error-message.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-error-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,UAAU;IACD,OAAO,EAC9C,SAAS,GACT,MAAM,GACN,OAAO,CAAW;IACqB,OAAO,SAAM;IAC5B,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAcpB;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAWX,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/primitives/tc-error-message.js

@@ -1,5 +1,5 @@
-import { css as p, LitElement as m, html as g } from "lit";
-import { property as c, customElement as u } from "lit/decorators.js";
+import { css as p, LitElement as m, html as u } from "lit";
+import { property as c, customElement as g } from "lit/decorators.js";
 import "./tc-callout.js";
 import "./tc-icon.js";
 import "./tc-text.js";
@@ -33,7 +33,7 @@ let e = class extends m {
     }
   }
   render() {
-    return this.message ? g`
+    return this.message ? u`
       <tc-callout part="callout" variant=${this.variant} .sx=${this.sx}>
         <tc-icon
           slot="icon"
@@ -65,16 +65,16 @@ e.styles = p`
     }
   `;
 a([
-  c({ type: String })
+  c({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 a([
-  c({ type: String })
+  c({ type: String, reflect: !0 })
 ], e.prototype, "message", 2);
 a([
   c({ type: Object })
 ], e.prototype, "sx", 2);
 e = a([
-  u("tc-error-message")
+  g("tc-error-message")
 ], e);
 export {
   e as TcErrorMessage

package/dist/primitives/tc-form-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-form-header.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-form-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,MAAM,SAAM;IACgB,WAAW,UAAS;IAChD,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAsEpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"tc-form-header.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-form-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IACC,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,MAAM,SAAM;IAEvD,WAAW,UAAS;IACQ,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAsEpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/primitives/tc-form-header.js

@@ -1,20 +1,20 @@
-import { css as p, LitElement as c, html as n } from "lit";
+import { css as d, LitElement as p, html as n } from "lit";
 import { property as r, customElement as f } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-import { sharedStyles as u } from "../styles/shared.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { sharedStyles as h } from "../styles/shared.js";
 var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (i, o, m, s) => {
-  for (var e = s > 1 ? void 0 : s ? b(o, m) : o, l = i.length - 1, d; l >= 0; l--)
-    (d = i[l]) && (e = (s ? d(o, m, e) : d(e)) || e);
+  for (var e = s > 1 ? void 0 : s ? b(o, m) : o, l = i.length - 1, c; l >= 0; l--)
+    (c = i[l]) && (e = (s ? c(o, m, e) : c(e)) || e);
   return s && e && v(o, m, e), e;
 };
-let t = class extends c {
+let t = class extends p {
   constructor() {
     super(...arguments), this.title = "", this.subtitle = "", this.notice = "", this.noAnimation = !1, this.sx = {};
   }
   render() {
     const i = !this.noAnimation;
     return n`
-      <header part="header" class="header" style=${h(this.sx)}>
+      <header part="header" class="header" style=${u(this.sx)}>
         ${this.title ? n`<h1 part="title" class="form-title ${i ? "form-title--animated" : ""}">
               ${this.title}
             </h1>` : ""}
@@ -29,8 +29,8 @@ let t = class extends c {
   }
 };
 t.styles = [
-  u,
-  p`
+  h,
+  d`
       :host {
         display: block;
         width: 100%;
@@ -100,16 +100,16 @@ t.styles = [
     `
 ];
 a([
-  r({ type: String })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "title", 2);
 a([
-  r({ type: String })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "subtitle", 2);
 a([
-  r({ type: String })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "notice", 2);
 a([
-  r({ type: Boolean, attribute: "no-animation" })
+  r({ type: Boolean, reflect: !0, attribute: "no-animation" })
 ], t.prototype, "noAnimation", 2);
 a([
   r({ type: Object })

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

@@ -1 +1 @@
-{"version":3,"file":"tc-icon.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAChB,YAAY,GACZ,aAAa,GACb,OAAO,GACP,GAAG,GACH,OAAO,GACP,eAAe,GACf,cAAc,GACd,OAAO,GACP,cAAc,GACd,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GAEV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GAET,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GAER,MAAM,GACN,WAAW,GACX,QAAQ,GACR,KAAK,CAAC;AAwCV;;;;GAIG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,CAAU;IACxB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-icon.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAChB,YAAY,GACZ,aAAa,GACb,OAAO,GACP,GAAG,GACH,OAAO,GACP,eAAe,GACf,cAAc,GACd,OAAO,GACP,cAAc,GACd,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GAEV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GAET,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GAER,MAAM,GACN,WAAW,GACX,QAAQ,GACR,KAAK,CAAC;AAwCV;;;;GAIG;AACH,qBACa,MAAO,SAAQ,UAAU;IACO,IAAI,EAAE,QAAQ,CAAU;IACvC,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-icon.js

@@ -82,7 +82,7 @@ n.styles = a`
     }
   `;
 c([
-  h({ type: String })
+  h({ type: String, reflect: !0 })
 ], n.prototype, "name", 2);
 c([
   h({ type: Object })

package/dist/primitives/tc-input-with-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-input-with-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input-with-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACO,SAAS,SAAM;IAChB,QAAQ,SAAM;IACX,WAAW,EAC9D,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACK,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,OAAO,CACiC;IAChD,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IAoEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}
+{"version":3,"file":"tc-input-with-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input-with-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACF,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE7D,SAAS,SAAM;IACoD,QAAQ,SACtE;IAEL,WAAW,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IACtC,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,OAAO,CACiC;IAChD,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IAoEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/dist/primitives/tc-input-with-chip.js

@@ -1,8 +1,8 @@
-import { css as u, LitElement as v, html as n } from "lit";
-import { property as a, state as h, customElement as b } from "lit/decorators.js";
+import { css as h, LitElement as f, html as n } from "lit";
+import { property as a, state as u, customElement as v } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { sharedStyles as f } from "../styles/shared.js";
+import { styleMap as b } from "lit/directives/style-map.js";
+import { sharedStyles as y } from "../styles/shared.js";
 import "./tc-chip.js";
 import "./tc-icon.js";
 var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, i, s, p) => {
@@ -10,7 +10,7 @@ var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, i, s
     (c = t[l]) && (o = (p ? c(i, s, o) : c(o)) || o);
   return p && o && m(i, s, o), o;
 };
-let e = class extends v {
+let e = class extends f {
   constructor() {
     super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.readonly = !1, this.chipLabel = "", this.chipIcon = "", this.chipVariant = "default", this.sx = {}, this.inputId = `tc-input-chip-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
   }
@@ -24,7 +24,7 @@ let e = class extends v {
       "has-error": t
     };
     return n`
-      <div class=${d(i)} style=${y(this.sx)}>
+      <div class=${d(i)} style=${b(this.sx)}>
         ${this.label ? n`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
         <div part="wrapper" class=${d(s)}>
           <input
@@ -97,8 +97,8 @@ let e = class extends v {
   }
 };
 e.styles = [
-  f,
-  u`
+  y,
+  h`
       :host {
         display: block;
         width: 100%;
@@ -207,43 +207,43 @@ e.styles = [
     `
 ];
 r([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "label", 2);
 r([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "placeholder", 2);
 r([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "value", 2);
 r([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "error", 2);
 r([
-  a({ type: Boolean })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 r([
-  a({ type: Boolean })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "readonly", 2);
 r([
-  a({ type: String, attribute: "chip-label" })
+  a({ type: String, reflect: !0, attribute: "chip-label" })
 ], e.prototype, "chipLabel", 2);
 r([
-  a({ type: String, attribute: "chip-icon" })
+  a({ type: String, reflect: !0, attribute: "chip-icon" })
 ], e.prototype, "chipIcon", 2);
 r([
-  a({ type: String, attribute: "chip-variant" })
+  a({ type: String, reflect: !0, attribute: "chip-variant" })
 ], e.prototype, "chipVariant", 2);
 r([
   a({ type: Object })
 ], e.prototype, "sx", 2);
 r([
-  h()
+  u()
 ], e.prototype, "inputId", 2);
 r([
-  h()
+  u()
 ], e.prototype, "isFocused", 2);
 e = r([
-  b("tc-input-with-chip")
+  v("tc-input-with-chip")
 ], e);
 export {
   e as TcInputWithChip

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

@@ -1 +1 @@
-{"version":3,"file":"tc-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,KAAK,SAAM;IACX,IAAI,SAAU;IACd,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,IAAI,SAAM;IACV,YAAY,SAAM;IAClB,SAAS,SAAM;IACf,SAAS,SAAK;IACd,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,OAAO,CAAqD;IACpE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IA+Df,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"tc-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACM,KAAK,SAAM;IACX,IAAI,SAAU;IACd,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,IAAI,SAAM;IACV,YAAY,SAAM;IAClB,SAAS,SAAM;IACf,SAAS,SAAK;IAC7B,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,OAAO,CAAqD;IACpE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IA+Df,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/primitives/tc-input.js

@@ -1,12 +1,12 @@
-import { css as c, LitElement as m, html as d } from "lit";
-import { property as i, state as h, customElement as b } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { styleMap as v } from "lit/directives/style-map.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, o, n, a) => {
+import { css as h, LitElement as m, html as u } from "lit";
+import { property as i, state as c, customElement as b } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { sharedStyles as v } from "../styles/shared.js";
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, o, n, a) => {
   for (var s = a > 1 ? void 0 : a ? g(o, n) : o, l = e.length - 1, p; l >= 0; l--)
     (p = e[l]) && (s = (a ? p(o, n, s) : p(s)) || s);
-  return a && s && f(o, n, s), s;
+  return a && s && y(o, n, s), s;
 };
 let t = class extends m {
   constructor() {
@@ -25,14 +25,14 @@ let t = class extends m {
       input: !0,
       "has-error": e
     };
-    return d`
-      <div class=${u(o)}>
-        ${this.label ? d`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
-        <div part="wrapper" class=${u(n)}>
+    return u`
+      <div class=${d(o)}>
+        ${this.label ? u`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
+        <div part="wrapper" class=${d(n)}>
           <input
             part="input"
             id=${this.inputId}
-            class=${u(a)}
+            class=${d(a)}
             type=${this.type}
             name=${this.name}
             placeholder=${this.placeholder}
@@ -44,7 +44,7 @@ let t = class extends m {
             maxlength=${this.maxlength || ""}
             aria-invalid=${e ? "true" : "false"}
             aria-describedby=${e ? `${this.inputId}-error` : ""}
-            style=${v(this.sx)}
+            style=${f(this.sx)}
             @input=${this.handleInput}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
@@ -53,7 +53,7 @@ let t = class extends m {
           />
           <div part="ink-line" class="ink-line"></div>
         </div>
-        ${e ? d`<p part="error" id="${this.inputId}-error" class="input-error-text" role="alert">
+        ${e ? u`<p part="error" id="${this.inputId}-error" class="input-error-text" role="alert">
               ${this.error}
             </p>` : ""}
       </div>
@@ -105,8 +105,8 @@ let t = class extends m {
   }
 };
 t.styles = [
-  y,
-  c`
+  v,
+  h`
       :host {
         display: block;
         width: 100%;
@@ -215,46 +215,46 @@ t.styles = [
     `
 ];
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "label", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "type", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "placeholder", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "value", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "error", 2);
 r([
-  i({ type: Boolean })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
 r([
-  i({ type: Boolean })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "name", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "autocomplete", 2);
 r([
-  i({ type: String })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "inputmode", 2);
 r([
-  i({ type: Number })
+  i({ type: Number, reflect: !0 })
 ], t.prototype, "maxlength", 2);
 r([
   i({ type: Object })
 ], t.prototype, "sx", 2);
 r([
-  h()
+  c()
 ], t.prototype, "inputId", 2);
 r([
-  h()
+  c()
 ], t.prototype, "isFocused", 2);
 t = r([
   b("tc-input")

package/dist/primitives/tc-item-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-item-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,qBACa,YAAa,SAAQ,UAAU;IACb,QAAQ,UAAS;IACQ,SAAS,UAAQ;IAC3C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAsFpB;IAEF,OAAO,CAAC,WAAW;IAWV,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"tc-item-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,qBACa,YAAa,SAAQ,UAAU;IACE,QAAQ,UAAS;IAE7D,SAAS,UAAQ;IACW,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAsFpB;IAEF,OAAO,CAAC,WAAW;IAWV,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/primitives/tc-item-button.js

@@ -147,10 +147,10 @@ e.styles = c`
     }
   `;
 s([
-  d({ type: Boolean })
+  d({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 s([
-  d({ type: Boolean, attribute: "show-arrow" })
+  d({ type: Boolean, reflect: !0, attribute: "show-arrow" })
 ], e.prototype, "showArrow", 2);
 s([
   d({ type: Object })

package/dist/primitives/tc-otp-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-otp-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACZ,MAAM,SAAK;IACV,KAAK,UAAS;IACd,QAAQ,UAAS;IACW,YAAY,UAAQ;IACjD,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,MAAM,CAAgB;IAEvC,OAAgB,MAAM,4BA2FpB;IAEO,iBAAiB;IAKjB,MAAM;IAoDf,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,SAAS;IASjB,kDAAkD;IAClD,KAAK;IAML,uBAAuB;IACvB,KAAK;IAKL,gCAAgC;IAChC,QAAQ,IAAI,MAAM;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
+{"version":3,"file":"tc-otp-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACG,MAAM,SAAK;IACV,KAAK,UAAS;IACd,QAAQ,UAAS;IAE7D,YAAY,UAAQ;IACQ,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,MAAM,CAAgB;IAEvC,OAAgB,MAAM,4BA2FpB;IAEO,iBAAiB;IAKjB,MAAM;IAoDf,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,SAAS;IASjB,kDAAkD;IAClD,KAAK;IAML,uBAAuB;IACvB,KAAK;IAKL,gCAAgC;IAChC,QAAQ,IAAI,MAAM;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/primitives/tc-otp-input.js

@@ -1,11 +1,11 @@
 import { css as u, LitElement as p, html as h } from "lit";
 import { property as c, state as d, customElement as v } from "lit/decorators.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { sharedStyles as g } from "../styles/shared.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? b(e, s) : e, o = t.length - 1, l; o >= 0; o--)
-    (l = t[o]) && (a = (r ? l(e, s, a) : l(a)) || a);
-  return r && a && f(e, s, a), a;
+import { sharedStyles as f } from "../styles/shared.js";
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
+  for (var l = r > 1 ? void 0 : r ? b(e, s) : e, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (l = (r ? a(e, s, l) : a(l)) || l);
+  return r && l && g(e, s, l), l;
 };
 let i = class extends p {
   constructor() {
@@ -36,9 +36,9 @@ let i = class extends p {
                 .value=${s}
                 ?disabled=${this.disabled}
                 aria-label="Digit ${r + 1}"
-                @input=${(l) => this.handleInput(l, r)}
-                @keydown=${(l) => this.handleKeydown(l, r)}
-                @paste=${(l) => this.handlePaste(l)}
+                @input=${(a) => this.handleInput(a, r)}
+                @keydown=${(a) => this.handleKeydown(a, r)}
+                @paste=${(a) => this.handlePaste(a)}
               />
             `;
     })}
@@ -63,7 +63,7 @@ let i = class extends p {
         composed: !0,
         detail: { value: this.values.join(""), values: [...this.values] }
       })
-    ), r && e < this.length - 1 && this.focusCell(e + 1), this.values.every((a) => a.length > 0) && this.dispatchEvent(
+    ), r && e < this.length - 1 && this.focusCell(e + 1), this.values.every((l) => l.length > 0) && this.dispatchEvent(
       new CustomEvent("tc-complete", {
         bubbles: !0,
         composed: !0,
@@ -78,8 +78,8 @@ let i = class extends p {
     t.preventDefault();
     const s = (t.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, this.length);
     if (s) {
-      this.values = new Array(this.length).fill(""), s.split("").forEach((a, o) => {
-        this.values[o] = a;
+      this.values = new Array(this.length).fill(""), s.split("").forEach((l, o) => {
+        this.values[o] = l;
       }), this.values = [...this.values];
       const r = Math.min(s.length, this.length - 1);
       this.focusCell(r), this.dispatchEvent(
@@ -119,7 +119,7 @@ let i = class extends p {
   }
 };
 i.styles = [
-  g,
+  f,
   u`
       :host {
         display: block;
@@ -211,16 +211,16 @@ i.styles = [
     `
 ];
 n([
-  c({ type: Number })
+  c({ type: Number, reflect: !0 })
 ], i.prototype, "length", 2);
 n([
-  c({ type: Boolean })
+  c({ type: Boolean, reflect: !0 })
 ], i.prototype, "error", 2);
 n([
-  c({ type: Boolean })
+  c({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
 n([
-  c({ type: Boolean, attribute: "show-progress" })
+  c({ type: Boolean, reflect: !0, attribute: "show-progress" })
 ], i.prototype, "showProgress", 2);
 n([
   c({ type: Object })

package/dist/primitives/tc-page-decoration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-page-decoration.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-page-decoration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAClB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CACxD;IACgB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA8FpB;IAEO,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"tc-page-decoration.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-page-decoration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACH,OAAO,EAC9C,SAAS,GACT,SAAS,GACT,OAAO,CAAa;IACI,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA8FpB;IAEO,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/primitives/tc-page-decoration.js

@@ -1,5 +1,5 @@
-import { css as c, LitElement as d, html as m } from "lit";
-import { property as b, customElement as p } from "lit/decorators.js";
+import { css as b, LitElement as d, html as m } from "lit";
+import { property as c, customElement as p } from "lit/decorators.js";
 import { styleMap as v } from "lit/directives/style-map.js";
 import { sharedStyles as u } from "../styles/shared.js";
 var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (l, t, o, a) => {
@@ -23,7 +23,7 @@ let e = class extends d {
 };
 e.styles = [
   u,
-  c`
+  b`
     :host {
       position: absolute;
       inset: 0;
@@ -117,10 +117,10 @@ e.styles = [
   `
 ];
 n([
-  b({ type: String })
+  c({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 n([
-  b({ type: Object })
+  c({ type: Object })
 ], e.prototype, "sx", 2);
 e = n([
   p("tc-page-decoration")

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

@@ -1 +1 @@
-{"version":3,"file":"tc-spinner.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAO,CAAC,MAAM,CAAwD;IAE1C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IAC3C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tc-spinner.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAO,CAAC,MAAM,CAAwD;IAE3B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CACnE;IACmB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-spinner.js

@@ -3,8 +3,8 @@ import { property as l, customElement as v } from "lit/decorators.js";
 import { styleMap as b } from "lit/directives/style-map.js";
 import { MatchMediaController as c } from "../controllers/match-media.controller.js";
 import { sharedStyles as w } from "../styles/shared.js";
-var z = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (r, i, s, n) => {
-  for (var e = n > 1 ? void 0 : n ? y(i, s) : i, o = r.length - 1, a; o >= 0; o--)
+var z = Object.defineProperty, u = Object.getOwnPropertyDescriptor, p = (r, i, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? u(i, s) : i, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (e = (n ? a(i, s, e) : a(e)) || e);
   return n && e && z(i, s, e), e;
 };
@@ -77,7 +77,7 @@ t.styles = [
     `
 ];
 p([
-  l({ type: String })
+  l({ type: String, reflect: !0 })
 ], t.prototype, "size", 2);
 p([
   l({ type: Object })

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;IACO,GAAG,EAAE,OAAO,CAAO;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1C,EAAE,EAAE,OAAO,CAAM;IACF,GAAG,SAAM;IAEpD,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 f, LitElement as p } 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 u = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (r, t, i, n) => {
+  for (var o = n > 1 ? void 0 : n ? v(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 && u(t, i, o), o;
 };
-let t = class extends x {
+let e = class extends p {
   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,
+  f`
       :host {
         display: contents;
       }
@@ -127,27 +133,27 @@ t.styles = [
       }
     `
 ];
-r([
-  a({ type: String })
-], t.prototype, "tag", 2);
-r([
-  a({ type: String })
-], t.prototype, "size", 2);
-r([
-  a({ type: String })
-], t.prototype, "weight", 2);
-r([
-  a({ type: String })
-], t.prototype, "color", 2);
-r([
+s([
+  a({ type: String, reflect: !0 })
+], e.prototype, "tag", 2);
+s([
+  a({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+s([
+  a({ type: String, reflect: !0 })
+], e.prototype, "weight", 2);
+s([
+  a({ type: String, reflect: !0 })
+], e.prototype, "color", 2);
+s([
   a({ type: Object })
-], t.prototype, "sx", 2);
-r([
-  a({ type: String })
-], t.prototype, "for", 2);
-t = r([
-  f("tc-text")
-], t);
+], e.prototype, "sx", 2);
+s([
+  a({ type: String, reflect: !0 })
+], e.prototype, "for", 2);
+e = s([
+  h("tc-text")
+], e);
 export {
-  t as TcText
+  e as TcText
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,QAAQ,SAAQ;IACY,WAAW,UAAQ;IAC9C,WAAW,UAAQ;IACpB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACM,OAAO,EAC9C,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACsB,QAAQ,SAAQ;IAE3D,WAAW,UAAQ;IACyB,WAAW,UAAQ;IACnC,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/primitives/tc-toast.js

@@ -2,11 +2,11 @@ import { css as h, LitElement as m, html as d } from "lit";
 import { property as e, customElement as p } from "lit/decorators.js";
 import { styleMap as u } from "lit/directives/style-map.js";
 import { AnimationController as v } from "../controllers/animation.controller.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (c, a, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? b(a, r) : a, n = c.length - 1, l; n >= 0; n--)
-    (l = c[n]) && (s = (o ? l(a, r, s) : l(s)) || s);
-  return o && s && f(a, r, s), s;
+import { sharedStyles as f } from "../styles/shared.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (c, a, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? b(a, o) : a, n = c.length - 1, l; n >= 0; n--)
+    (l = c[n]) && (s = (r ? l(a, o, s) : l(s)) || s);
+  return r && s && y(a, o, s), s;
 };
 let t = class extends m {
   constructor() {
@@ -83,7 +83,7 @@ let t = class extends m {
   }
 };
 t.styles = [
-  y,
+  f,
   h`
     :host {
       display: block;
@@ -177,16 +177,16 @@ t.styles = [
   `
 ];
 i([
-  e({ type: String })
+  e({ type: String, reflect: !0 })
 ], t.prototype, "variant", 2);
 i([
-  e({ type: Number })
+  e({ type: Number, reflect: !0 })
 ], t.prototype, "duration", 2);
 i([
-  e({ type: Boolean, attribute: "auto-dismiss" })
+  e({ type: Boolean, reflect: !0, attribute: "auto-dismiss" })
 ], t.prototype, "autoDismiss", 2);
 i([
-  e({ type: Boolean })
+  e({ type: Boolean, reflect: !0 })
 ], t.prototype, "dismissible", 2);
 i([
   e({ type: Object })

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

@@ -1 +1 @@
-{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-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,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAkFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-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,aAAc,SAAQ,UAAU;IACA,KAAK,SAA0B;IAC/B,OAAO,SACE;IAEpD,UAAU,SAAe;IAEzB,SAAS,UAAQ;IAEjB,WAAW,UAAQ;IACS,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAkFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -1,20 +1,20 @@
 import { css as m, LitElement as d, html as p } from "lit";
 import { property as a, state as y, customElement as h } from "lit/decorators.js";
 import { styleMap as u } from "lit/directives/style-map.js";
-import { AnimationController as g } from "../controllers/animation.controller.js";
+import { AnimationController as f } from "../controllers/animation.controller.js";
 import "../primitives/tc-icon.js";
 import "../primitives/tc-text.js";
 import "../primitives/tc-button.js";
 import "../primitives/tc-container.js";
 import "../primitives/tc-section.js";
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (r, s, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? v(s, o) : s, c = r.length - 1, l; c >= 0; c--)
-    (l = r[c]) && (i = (n ? l(s, o, i) : l(i)) || i);
-  return n && i && f(s, o, i), i;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (i, s, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? v(s, o) : s, c = i.length - 1, l; c >= 0; c--)
+    (l = i[c]) && (r = (n ? l(s, o, r) : l(r)) || r);
+  return n && r && g(s, o, r), r;
 };
 let t = class extends d {
   constructor() {
-    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.sx = {}, this.isAnimated = !1, this.animation = new g(this, {
+    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.sx = {}, this.isAnimated = !1, this.animation = new f(this, {
       showDuration: 600,
       hideDuration: 300
     });
@@ -36,15 +36,15 @@ let t = class extends d {
     );
   }
   render() {
-    const r = this.isAnimated ? "animated" : "";
+    const i = this.isAnimated ? "animated" : "";
     return p`
       <div part="screen" class="screen" style=${u(this.sx)}>
         <tc-container>
           <div part="content" class="content">
-            <div part="icon" class="icon-container ${r}">
+            <div part="icon" class="icon-container ${i}">
               <tc-icon name="alert-circle" .sx=${{ "--icon-size": "var(--size-icon-xl)" }}></tc-icon>
             </div>
-            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${r}">
+            <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>
@@ -53,7 +53,7 @@ let t = class extends d {
               </tc-text>
             </tc-section>
             ${this.showRetry ? p`
-                  <div part="action" class="action ${r}">
+                  <div part="action" class="action ${i}">
                     <tc-button variant="primary" @tc-click=${this.handleRetry}>
                       ${this.retryLabel}
                     </tc-button>
@@ -149,19 +149,19 @@ t.styles = m`
     }
   `;
 e([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], t.prototype, "title", 2);
 e([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], t.prototype, "message", 2);
 e([
-  a({ type: String, attribute: "retry-label" })
+  a({ type: String, reflect: !0, attribute: "retry-label" })
 ], t.prototype, "retryLabel", 2);
 e([
-  a({ type: Boolean, attribute: "show-retry" })
+  a({ type: Boolean, reflect: !0, attribute: "show-retry" })
 ], t.prototype, "showRetry", 2);
 e([
-  a({ type: Boolean, attribute: "auto-animate" })
+  a({ type: Boolean, reflect: !0, attribute: "auto-animate" })
 ], t.prototype, "autoAnimate", 2);
 e([
   a({ type: Object })

package/dist/screens/tc-loading-screen.d.ts

@@ -10,6 +10,7 @@ import { SxProps } from '../types.js';
  */
 export declare class TcLoadingScreen extends LitElement {
     message: string;
+    submessage: string;
     spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
     sx: SxProps;
     private loading;

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

@@ -1 +1 @@
-{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IACU,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAiCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACF,OAAO,SAAM;IACb,UAAU,SAAM;IAE3D,WAAW,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACpB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAiCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

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

@@ -1,18 +1,18 @@
 import { css as m, LitElement as g, html as l } from "lit";
-import { property as a, customElement as h } from "lit/decorators.js";
+import { property as n, customElement as h } from "lit/decorators.js";
 import { styleMap as d } from "lit/directives/style-map.js";
-import { LoadingController as y } from "../controllers/loading.controller.js";
+import { LoadingController as f } from "../controllers/loading.controller.js";
 import "../primitives/tc-spinner.js";
 import "../primitives/tc-text.js";
 import "../primitives/tc-container.js";
-var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (p, s, n, i) => {
-  for (var e = i > 1 ? void 0 : i ? x(s, n) : s, o = p.length - 1, c; o >= 0; o--)
-    (c = p[o]) && (e = (i ? c(s, n, e) : c(e)) || e);
-  return i && e && f(s, n, e), e;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (p, s, c, i) => {
+  for (var e = i > 1 ? void 0 : i ? y(s, c) : s, o = p.length - 1, a; o >= 0; o--)
+    (a = p[o]) && (e = (i ? a(s, c, e) : a(e)) || e);
+  return i && e && u(s, c, e), e;
 };
 let t = class extends g {
   constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "md", this.sx = {}, this.loading = new y(this);
+    super(...arguments), this.message = "", this.submessage = "", this.spinnerSize = "md", this.sx = {}, this.loading = new f(this);
   }
   connectedCallback() {
     super.connectedCallback(), this.loading.start();
@@ -69,13 +69,16 @@ t.styles = m`
     }
   `;
 r([
-  a({ type: String })
+  n({ type: String, reflect: !0 })
 ], t.prototype, "message", 2);
 r([
-  a({ type: String, attribute: "spinner-size" })
+  n({ type: String, reflect: !0 })
+], t.prototype, "submessage", 2);
+r([
+  n({ type: String, reflect: !0, attribute: "spinner-size" })
 ], t.prototype, "spinnerSize", 2);
 r([
-  a({ type: Object })
+  n({ type: Object })
 ], t.prototype, "sx", 2);
 t = r([
   h("tc-loading-screen")

package/package.json

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