@transcodes/ui-components 0.3.6 → 0.4.1

package/CHANGELOG.md

@@ -5,6 +5,47 @@ 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.1] - 2025-12-23
+
+### Changed
+
+- **tc-chip**: 텍스트에 `text-transform: uppercase` 적용
+- **tc-success-screen**: 아이콘 색상을 `--accent-primary` 기반으로 변경
+  - 외부에서 `--accent-primary` 커스텀 시 아이콘 배경/색상 변경 가능
+  - `--alpha-success10` → `--alpha-primary10`
+  - `--accent-success` → `--accent-primary`
+
+### Removed
+
+- **tc-success-screen**: `.icon-container` 배경색 제거 (tc-loading-screen과 일관성 유지)
+
+## [0.4.0] - 2025-12-17
+
+### Changed
+
+- **인터페이스 통합**: 모든 컴포넌트의 스타일 커스터마이징을 `sx` prop으로 일원화
+  - Raw CSS props 제거 (tc-box, tc-container, tc-icon 등)
+  - SxProps 타입의 일관된 적용
+- 문서 간소화 및 API Reference 강화
+
+### Removed
+
+- **Raw CSS props 제거** (Breaking Change):
+  - tc-box: `width`, `height`, `padding`, `margin`, `background`, `border-radius`, `box-shadow`, `display`, `flex-direction`, `align-items`, `justify-content`, `gap`
+  - tc-container: `padding`
+  - tc-icon: `size`, `color`
+  - tc-section: `gap`
+  - tc-divider: `color`, `thickness`, `margin`
+
+**Migration**: Raw CSS props를 사용하던 코드는 `.sx` prop으로 변경하세요.
+```typescript
+// Before
+<tc-box padding="2rem" background="var(--paper-warm)">
+
+// After
+<tc-box .sx=${{ padding: '2rem', background: 'var(--paper-warm)' }}>
+```
+
 ## [0.3.6] - 2025-12-17
 
 ### Changed

package/README.md

@@ -1,6 +1,6 @@
 # @transcodes/ui-components
 
-A modern web component library built with [Lit 3.x](https://lit.dev/). Features a comprehensive set of UI primitives, complex widgets, full-screen components, and reusable Reactive Controllers.
+A modern web component library built with [Lit 3.x](https://lit.dev/). Features a comprehensive set of UI primitives, full-screen components, and reusable Reactive Controllers.
 
 [![npm version](https://img.shields.io/npm/v/@transcodes/ui-components.svg)](https://www.npmjs.com/package/@transcodes/ui-components)
 [![license](https://img.shields.io/npm/l/@transcodes/ui-components.svg)](https://github.com/transcodings/transcodes-ui/blob/main/packages/ui-components/LICENSE)
@@ -57,7 +57,7 @@ import '@transcodes/design-tokens';
 
 // Import specific component categories
 import { TcButton, TcInput } from '@transcodes/ui-components/primitives';
-import { TcModal } from '@transcodes/ui-components/widgets';
+import { TcLoadingScreen } from '@transcodes/ui-components/screens';
 import { LoadingController } from '@transcodes/ui-components/controllers';
 ```
 
@@ -69,7 +69,7 @@ import { LoadingController } from '@transcodes/ui-components/controllers';
 
 ## Components
 
-### Primitives (19)
+### Primitives (22)
 
 Core UI building blocks with consistent styling and behavior.
 
@@ -85,31 +85,18 @@ Core UI building blocks with consistent styling and behavior.
 | `<tc-spinner>` | Loading indicator |
 | `<tc-toast>` | Toast notification |
 | `<tc-callout>` | Alert/info box with icon slot |
+| `<tc-error-message>` | Error/warning/info message (callout wrapper) |
 | `<tc-divider>` | Visual separator with optional text |
 | `<tc-card>` | Card container |
 | `<tc-box>` | Flexible box wrapper |
 | `<tc-container>` | Layout container |
 | `<tc-section>` | Page section |
+| `<tc-layout>` | Flex/grid layout wrapper |
 | `<tc-item>` | List item |
 | `<tc-item-button>` | Clickable list item |
 | `<tc-symbol>` | Symbol/logo display |
 | `<tc-form-header>` | Form header with title and description |
-| `<tc-error-message>` | Error/warning/info message (callout wrapper) |
-
-### Widgets (8)
-
-Complex components composed of primitives.
-
-| Component | Description |
-|-----------|-------------|
-| `<tc-notification-modal>` | Modal dialog for notifications |
-| `<tc-offline-modal>` | Offline state indicator modal |
-| `<tc-iframe-modal>` | Modal with embedded iframe |
-| `<tc-floating-button>` | Floating action button |
-| `<tc-installation-banner>` | PWA installation prompt |
-| `<tc-ios-installation-guide>` | iOS PWA installation guide |
-| `<tc-page-decoration>` | Page background decoration |
-| `<tc-authenticator-card>` | Authenticator info card (passkey, TOTP, USB) |
+| `<tc-page-decoration>` | Page background decoration (gradient, dots, grid) |
 
 ### Screens (3)
 
@@ -198,9 +185,8 @@ All components accept an `sx` prop for inline style overrides:
 
 | Path | Description | Bundle Impact |
 |------|-------------|---------------|
-| `@transcodes/ui-components` | All components | ~252 KB |
-| `@transcodes/ui-components/primitives` | Primitive components only | ~120 KB |
-| `@transcodes/ui-components/widgets` | Widget components only | ~50 KB |
+| `@transcodes/ui-components` | All components | ~80 KB |
+| `@transcodes/ui-components/primitives` | Primitive components only | ~65 KB |
 | `@transcodes/ui-components/screens` | Screen components only | ~10 KB |
 | `@transcodes/ui-components/controllers` | Reactive Controllers | ~7 KB |
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './controllers/index.js';
 export * from './primitives/index.js';
 export * from './screens/index.js';
+export * from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AAGvC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,wBAAwB,CAAC;AAEvC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A simple container component without default flex layout.
  * Use for wrapping content with custom styles.
@@ -7,7 +8,7 @@ import { LitElement } from 'lit';
  * @csspart box - The container element
  */
 export declare class TcBox extends LitElement {
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tc-box.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACP,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,0BAQpB;IAEO,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
+{"version":3,"file":"tc-box.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACP,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAQpB;IAEO,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * Primary button component with loading states.
  * Uses design-tokens component classes (.button, .button-primary, etc.)
@@ -12,7 +13,7 @@ export declare class TcButton extends LitElement {
     disabled: boolean;
     loading: boolean;
     variant: 'primary' | 'secondary' | 'success';
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
     private handleClick;

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;AAM5C;;;;;;;;GAQG;AACH,qBACa,QAAS,SAAQ,UAAU;IACT,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAC5D;IACgB,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,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;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"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A callout/alert component for messages and notices.
  * Uses design-tokens notice classes (.notice, .notice-info, .notice-success, etc.)
@@ -11,6 +12,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcCallout extends LitElement {
     variant: 'info' | 'success' | 'warning' | 'error';
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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;;;;;;;;;GASG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IAErB,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;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"}

package/dist/primitives/tc-callout.js

@@ -1,26 +1,27 @@
-import { css as c, LitElement as m, html as p } from "lit";
-import { property as v, customElement as d } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { sharedStyles as f } from "../styles/shared.js";
-var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (n, e, s, r) => {
-  for (var t = r > 1 ? void 0 : r ? y(e, s) : e, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (t = (r ? a(e, s, t) : a(t)) || t);
-  return r && t && h(e, s, t), t;
+import { css as p, LitElement as m, html as v } from "lit";
+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;
 };
 let o = class extends m {
   constructor() {
-    super(...arguments), this.variant = "info";
+    super(...arguments), this.variant = "info", this.sx = {};
   }
   render() {
-    const n = this.variant === "error", e = {
-      notice: !n,
+    const s = this.variant === "error", e = {
+      notice: !s,
       "notice-info": this.variant === "info",
       "notice-success": this.variant === "success",
       "notice-warning": this.variant === "warning",
-      "error-message": n
+      "error-message": s
     };
-    return p`
-      <div part="callout" class=${u(e)} role="alert">
+    return v`
+      <div part="callout" class=${f(e)} style=${u(this.sx)} role="alert">
         <div class="callout-inner">
           <div part="icon" class="callout-icon">
             <slot name="icon"></slot>
@@ -34,8 +35,8 @@ let o = class extends m {
   }
 };
 o.styles = [
-  f,
-  c`
+  y,
+  p`
       :host {
         display: block;
         width: 100%;
@@ -77,8 +78,11 @@ o.styles = [
     `
 ];
 l([
-  v({ type: String })
+  c({ type: String })
 ], o.prototype, "variant", 2);
+l([
+  c({ type: Object })
+], o.prototype, "sx", 2);
 o = l([
   d("tc-callout")
 ], o);

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * Card component with layered shadows and optional inner border effect.
  * Uses design-tokens .card class.
@@ -8,7 +9,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcCard extends LitElement {
     noBorder: boolean;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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;AAM5C;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACiB,QAAQ,UAAS;IAC1C,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,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;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"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A chip/tag component for labels and badges.
  *
@@ -8,6 +9,7 @@ import { LitElement } from 'lit';
 export declare class TcChip extends LitElement {
     variant: 'default' | 'success' | 'error' | 'info';
     size: 'sm' | 'md';
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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;;;;;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;IAErD,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAOhB;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;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"}

package/dist/primitives/tc-chip.js

@@ -1,25 +1,30 @@
-import { css as l, LitElement as h, html as d } from "lit";
-import { property as o, customElement as f } from "lit/decorators.js";
-import { sharedStyles as m } from "../styles/shared.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (p, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? u(t, s) : t, a = p.length - 1, c; a >= 0; a--)
-    (c = p[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
-  return i && r && v(t, s, r), r;
+import { css as l, LitElement as h, html as f } from "lit";
+import { property as c, 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;
 };
 let e = class extends h {
   constructor() {
-    super(...arguments), this.variant = "default", this.size = "md";
+    super(...arguments), this.variant = "default", this.size = "md", this.sx = {};
   }
   render() {
-    return d`
-      <span part="chip" class="chip chip--${this.variant} chip--${this.size}">
+    return f`
+      <span
+        part="chip"
+        class="chip chip--${this.variant} chip--${this.size}"
+        style=${d(this.sx)}
+      >
         <slot></slot>
       </span>
     `;
   }
 };
 e.styles = [
-  m,
+  v,
   l`
       :host {
         display: inline-flex;
@@ -34,6 +39,7 @@ e.styles = [
         border-radius: var(--radius-full);
         font-family: var(--font-body);
         font-weight: 500;
+        text-transform: uppercase;
       }
 
       .chip--sm {
@@ -67,14 +73,17 @@ e.styles = [
       }
     `
 ];
-n([
-  o({ type: String })
+i([
+  c({ type: String })
 ], e.prototype, "variant", 2);
-n([
-  o({ type: String })
+i([
+  c({ type: String })
 ], e.prototype, "size", 2);
-e = n([
-  f("tc-chip")
+i([
+  c({ type: Object })
+], e.prototype, "sx", 2);
+e = i([
+  m("tc-chip")
 ], e);
 export {
   e as TcChip

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A flex container component with column layout by default.
  *
@@ -7,7 +8,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcContainer extends LitElement {
     wide: boolean;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     private defaultStyles;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;

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;AAI5C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACZ,IAAI,UAAS;IACd,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,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;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"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A horizontal divider line with optional text.
  *
@@ -8,9 +9,8 @@ import { LitElement } from 'lit';
  * @csspart text - The text element (text mode)
  */
 export declare class TcDivider extends LitElement {
-    color: string;
-    spacing: string;
     text: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;
 }

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;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,KAAK,SAAsB;IAC3B,OAAO,SAAqB;IAC5B,IAAI,SAAM;IAEtC,OAAgB,MAAM,0BAqCpB;IAEO,MAAM;CAiBhB;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;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"}

package/dist/primitives/tc-divider.js

@@ -1,24 +1,28 @@
-import { css as c, LitElement as v, html as p } from "lit";
-import { property as l, customElement as h } from "lit/decorators.js";
-var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? m(t, o) : t, d = e.length - 1, a; d >= 0; d--)
-    (a = e[d]) && (r = (s ? a(t, o, r) : a(r)) || r);
-  return s && r && g(t, o, r), r;
+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--)
+    (o = s[n]) && (r = (t ? o(e, d, r) : o(r)) || r);
+  return t && r && x(e, d, r), r;
 };
-let i = class extends v {
+let i = class extends m {
   constructor() {
-    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
+    super(...arguments), this.text = "", this.sx = {};
   }
   render() {
-    const e = `--divider-color: ${this.color}; --divider-spacing: ${this.spacing};`;
-    return this.text ? p`
-        <div part="container" class="divider-container" style=${e}>
+    const e = { ...{
+      "--divider-color": "var(--ink-faint)",
+      "--divider-spacing": "var(--space-md)"
+    }, ...this.sx };
+    return this.text ? l`
+        <div part="container" class="divider-container" style=${v(e)}>
           <hr part="line" class="divider-line" />
           <span part="text" class="divider-text">${this.text}</span>
           <hr part="line" class="divider-line" />
         </div>
-      ` : p`
-      <hr part="divider" class="divider" style=${e} />
+      ` : l`
+      <hr part="divider" class="divider" style=${v(e)} />
     `;
   }
 };
@@ -60,16 +64,13 @@ i.styles = c`
       font-family: var(--font-body);
     }
   `;
-n([
-  l({ type: String })
-], i.prototype, "color", 2);
-n([
-  l({ type: String })
-], i.prototype, "spacing", 2);
-n([
-  l({ type: String })
+a([
+  p({ type: String })
 ], i.prototype, "text", 2);
-i = n([
+a([
+  p({ type: Object })
+], i.prototype, "sx", 2);
+i = a([
   h("tc-divider")
 ], i);
 export {

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A simplified error/warning/info message component.
  * Wraps tc-callout with appropriate icon and text styling.
@@ -10,6 +11,7 @@ import { LitElement } from 'lit';
 export declare class TcErrorMessage extends LitElement {
     variant: 'warning' | 'info' | 'error';
     message: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     private getIconName;
     private getIconColor;

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

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

@@ -1,16 +1,16 @@
-import { css as m, LitElement as p, html as g } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
+import { css as p, LitElement as m, html as g } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
 import "./tc-callout.js";
 import "./tc-icon.js";
 import "./tc-text.js";
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (c, r, s, a) => {
-  for (var t = a > 1 ? void 0 : a ? v(r, s) : r, i = c.length - 1, n; i >= 0; i--)
-    (n = c[i]) && (t = (a ? n(r, s, t) : n(t)) || t);
-  return a && t && h(r, s, t), t;
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, r, i, s) => {
+  for (var t = s > 1 ? void 0 : s ? v(r, i) : r, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (t = (s ? o(r, i, t) : o(t)) || t);
+  return s && t && h(r, i, t), t;
 };
-let e = class extends p {
+let e = class extends m {
   constructor() {
-    super(...arguments), this.variant = "error", this.message = "";
+    super(...arguments), this.variant = "error", this.message = "", this.sx = {};
   }
   getIconName() {
     switch (this.variant) {
@@ -34,7 +34,7 @@ let e = class extends p {
   }
   render() {
     return this.message ? g`
-      <tc-callout part="callout" variant=${this.variant}>
+      <tc-callout part="callout" variant=${this.variant} .sx=${this.sx}>
         <tc-icon
           slot="icon"
           part="icon"
@@ -49,7 +49,7 @@ let e = class extends p {
     ` : null;
   }
 };
-e.styles = m`
+e.styles = p`
     :host {
       display: block;
       width: 100%;
@@ -64,13 +64,16 @@ e.styles = m`
       line-height: 1.4;
     }
   `;
-o([
-  l({ type: String })
+a([
+  c({ type: String })
 ], e.prototype, "variant", 2);
-o([
-  l({ type: String })
+a([
+  c({ type: String })
 ], e.prototype, "message", 2);
-e = o([
+a([
+  c({ type: Object })
+], e.prototype, "sx", 2);
+e = a([
   u("tc-error-message")
 ], e);
 export {

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * Form header component with animated title, subtitle, and optional notice.
  * Uses design-tokens form classes (.form-title, .form-subtitle).
@@ -13,7 +14,7 @@ export declare class TcFormHeader extends LitElement {
     subtitle: string;
     notice: string;
     noAnimation: boolean;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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;AAK5C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,MAAM,SAAM;IACgB,WAAW,UAAS;IAChD,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,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;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"}

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

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
+import { SxProps } from '../types.js';
 export type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' | 'chevron-right' | 'chevron-left' | 'error' | 'alert-circle' | 'info' | 'warning' | 'loading' | 'loader' | 'biometric' | 'email' | 'passkey' | 'bell' | 'download' | 'wifi-off' | 'apple' | 'google' | 'windows' | 'samsung' | 'phone' | 'success' | 'lock' | 'person' | 'device' | 'totp' | 'email-otp' | 'qrcode' | 'key';
 /**
  * An icon component with built-in icon set.
@@ -7,8 +8,7 @@ export type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' |
  */
 export declare class TcIcon extends LitElement {
     name: IconName;
-    size: string;
-    color: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): TemplateResult<1>;
 }

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,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,IAAI,SAAY;IAChB,KAAK,SAAkB;IAEnD,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAkBhB;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;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"}