@transcodes/ui-components 0.3.5 → 0.4.0

package/CHANGELOG.md

@@ -5,6 +5,60 @@ 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.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
+
+- CSS 토큰 활용 강화: 하드코딩된 값을 design-tokens CSS 변수로 교체
+  - tc-error-screen, tc-success-screen: 애니메이션 오프셋 토큰화
+  - tc-input, tc-input-with-chip: focus ring, slideDown 애니메이션 토큰화
+  - tc-item-button, tc-error-message: 아이콘 크기 토큰화
+  - tc-page-decoration, tc-spinner: `border-radius: 50%` → `var(--radius-full)`
+- `:host` 스타일 일관성 통일 및 reset.css 통합
+- Storybook 설정 역할 분리 및 중복 제거
+
+### Removed
+
+- **widgets 레이어 제거**: 미사용 복합 컴포넌트 삭제
+  - tc-authenticator-card, tc-floating-button, tc-iframe-modal
+  - tc-installation-banner, tc-ios-installation-guide
+  - tc-notification-modal, tc-offline-modal
+- FormValidationController 제거 (미사용)
+- 컨트롤러 Storybook 스토리 제거 (내부 구현 세부사항)
+
+### Fixed
+
+- Storybook: sideEffects, storybookAliases, isStorybook 감지 로직 수정
+
+**Note**: 이 버전은 `@transcodes/design-tokens@^0.3.6`과 함께 사용해야 합니다.
+
 ## [0.3.5] - 2025-12-11
 
 ### Fixed

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/controllers/index.d.ts

@@ -1,8 +1,6 @@
 export type { AnimationControllerOptions, AnimationState, } from './animation.controller.js';
 export { AnimationController } from './animation.controller.js';
 export { BaseController } from './base.controller.js';
-export type { ValidationRule, ValidationType, } from './form-validation.controller.js';
-export { FormValidationController } from './form-validation.controller.js';
 export { HistoryController } from './history.controller.js';
 export { LoadingController } from './loading.controller.js';
 export { MatchMediaController } from './match-media.controller.js';

package/dist/controllers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controllers/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,0BAA0B,EAC1B,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EACV,cAAc,EACd,cAAc,GACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controllers/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,0BAA0B,EAC1B,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/controllers/index.js

@@ -1,18 +1,16 @@
 import { AnimationController as e } from "./animation.controller.js";
 import { BaseController as l } from "./base.controller.js";
-import { FormValidationController as m } from "./form-validation.controller.js";
-import { HistoryController as f } from "./history.controller.js";
-import { LoadingController as x } from "./loading.controller.js";
-import { MatchMediaController as i } from "./match-media.controller.js";
-import { MessageBusController as d } from "./message-bus.controller.js";
-import { StorageController as M } from "./storage.controller.js";
+import { HistoryController as m } from "./history.controller.js";
+import { LoadingController as f } from "./loading.controller.js";
+import { MatchMediaController as x } from "./match-media.controller.js";
+import { MessageBusController as i } from "./message-bus.controller.js";
+import { StorageController as g } from "./storage.controller.js";
 export {
   e as AnimationController,
   l as BaseController,
-  m as FormValidationController,
-  f as HistoryController,
-  x as LoadingController,
-  i as MatchMediaController,
-  d as MessageBusController,
-  M as StorageController
+  m as HistoryController,
+  f as LoadingController,
+  x as MatchMediaController,
+  i as MessageBusController,
+  g as StorageController
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from './controllers/index.js';
 export * from './primitives/index.js';
 export * from './screens/index.js';
-export * from './widgets/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;AAGnC,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/index.js

@@ -1,80 +1,64 @@
-import { AnimationController as t } from "./controllers/animation.controller.js";
-import { BaseController as m } from "./controllers/base.controller.js";
-import { FormValidationController as f } from "./controllers/form-validation.controller.js";
-import { HistoryController as x } from "./controllers/history.controller.js";
-import { LoadingController as T } from "./controllers/loading.controller.js";
-import { MatchMediaController as l } from "./controllers/match-media.controller.js";
-import { MessageBusController as C } from "./controllers/message-bus.controller.js";
-import { StorageController as d } from "./controllers/storage.controller.js";
-import { TcBox as I } from "./primitives/tc-box.js";
-import { TcButton as g } from "./primitives/tc-button.js";
-import { TcCallout as M } from "./primitives/tc-callout.js";
-import { TcCard as F } from "./primitives/tc-card.js";
-import { TcChip as A } from "./primitives/tc-chip.js";
+import { AnimationController as e } from "./controllers/animation.controller.js";
+import { BaseController as p } from "./controllers/base.controller.js";
+import { HistoryController as c } from "./controllers/history.controller.js";
+import { LoadingController as f } from "./controllers/loading.controller.js";
+import { MatchMediaController as T } from "./controllers/match-media.controller.js";
+import { MessageBusController as a } from "./controllers/message-bus.controller.js";
+import { StorageController as C } from "./controllers/storage.controller.js";
+import { TcBox as u } from "./primitives/tc-box.js";
+import { TcButton as d } from "./primitives/tc-button.js";
+import { TcCallout as I } from "./primitives/tc-callout.js";
+import { TcCard as h } from "./primitives/tc-card.js";
+import { TcChip as y } from "./primitives/tc-chip.js";
 import { TcContainer as E } from "./primitives/tc-container.js";
 import { TcDivider as L } from "./primitives/tc-divider.js";
-import { TcErrorMessage as b } from "./primitives/tc-error-message.js";
-import { TcFormHeader as G } from "./primitives/tc-form-header.js";
+import { TcErrorMessage as v } from "./primitives/tc-error-message.js";
+import { TcFormHeader as F } from "./primitives/tc-form-header.js";
 import { TcIcon as P } from "./primitives/tc-icon.js";
-import { TcInput as W } from "./primitives/tc-input.js";
-import { TcInputWithChip as k } from "./primitives/tc-input-with-chip.js";
-import { TcItem as w } from "./primitives/tc-item.js";
+import { TcInput as j } from "./primitives/tc-input.js";
+import { TcInputWithChip as q } from "./primitives/tc-input-with-chip.js";
+import { TcItem as z } from "./primitives/tc-item.js";
 import { TcItemButton as J } from "./primitives/tc-item-button.js";
-import { TcOtpInput as Q } from "./primitives/tc-otp-input.js";
-import { TcSection as U } from "./primitives/tc-section.js";
+import { TcOtpInput as N } from "./primitives/tc-otp-input.js";
+import { TcPageDecoration as R } from "./primitives/tc-page-decoration.js";
+import { TcSection as V } from "./primitives/tc-section.js";
 import { TcSpinner as Y } from "./primitives/tc-spinner.js";
 import { TcSymbol as _ } from "./primitives/tc-symbol.js";
 import { TcText as oo } from "./primitives/tc-text.js";
-import { TcToast as to } from "./primitives/tc-toast.js";
-import { TcErrorScreen as mo } from "./screens/tc-error-screen.js";
-import { TcLoadingScreen as fo } from "./screens/tc-loading-screen.js";
-import { TcSuccessScreen as xo } from "./screens/tc-success-screen.js";
-import { TcAuthenticatorCard as To } from "./widgets/tc-authenticator-card.js";
-import { TcFloatingButton as lo } from "./widgets/tc-floating-button.js";
-import { TcIframeModal as Co } from "./widgets/tc-iframe-modal.js";
-import { TcInstallationBanner as uo } from "./widgets/tc-installation-banner.js";
-import { TcIosInstallationGuide as So } from "./widgets/tc-ios-installation-guide.js";
-import { TcNotificationModal as Bo } from "./widgets/tc-notification-modal.js";
-import { TcOfflineModal as ho } from "./widgets/tc-offline-modal.js";
-import { TcPageDecoration as yo } from "./widgets/tc-page-decoration.js";
+import { TcToast as eo } from "./primitives/tc-toast.js";
+import { TcErrorScreen as po } from "./screens/tc-error-screen.js";
+import { TcLoadingScreen as co } from "./screens/tc-loading-screen.js";
+import { TcSuccessScreen as fo } from "./screens/tc-success-screen.js";
 export {
-  t as AnimationController,
-  m as BaseController,
-  f as FormValidationController,
-  x as HistoryController,
-  T as LoadingController,
-  l as MatchMediaController,
-  C as MessageBusController,
-  d as StorageController,
-  To as TcAuthenticatorCard,
-  I as TcBox,
-  g as TcButton,
-  M as TcCallout,
-  F as TcCard,
-  A as TcChip,
+  e as AnimationController,
+  p as BaseController,
+  c as HistoryController,
+  f as LoadingController,
+  T as MatchMediaController,
+  a as MessageBusController,
+  C as StorageController,
+  u as TcBox,
+  d as TcButton,
+  I as TcCallout,
+  h as TcCard,
+  y as TcChip,
   E as TcContainer,
   L as TcDivider,
-  b as TcErrorMessage,
-  mo as TcErrorScreen,
-  lo as TcFloatingButton,
-  G as TcFormHeader,
+  v as TcErrorMessage,
+  po as TcErrorScreen,
+  F as TcFormHeader,
   P as TcIcon,
-  Co as TcIframeModal,
-  W as TcInput,
-  k as TcInputWithChip,
-  uo as TcInstallationBanner,
-  So as TcIosInstallationGuide,
-  w as TcItem,
+  j as TcInput,
+  q as TcInputWithChip,
+  z as TcItem,
   J as TcItemButton,
-  fo as TcLoadingScreen,
-  Bo as TcNotificationModal,
-  ho as TcOfflineModal,
-  Q as TcOtpInput,
-  yo as TcPageDecoration,
-  U as TcSection,
+  co as TcLoadingScreen,
+  N as TcOtpInput,
+  R as TcPageDecoration,
+  V as TcSection,
   Y as TcSpinner,
-  xo as TcSuccessScreen,
+  fo as TcSuccessScreen,
   _ as TcSymbol,
   oo as TcText,
-  to as TcToast
+  eo as TcToast
 };

package/dist/primitives/index.d.ts

@@ -13,6 +13,7 @@ export { TcInputWithChip } from './tc-input-with-chip.js';
 export { TcItem } from './tc-item.js';
 export { TcItemButton } from './tc-item-button.js';
 export { TcOtpInput } from './tc-otp-input.js';
+export { TcPageDecoration } from './tc-page-decoration.js';
 export { TcSection } from './tc-section.js';
 export { TcSpinner } from './tc-spinner.js';
 export { TcSymbol } from './tc-symbol.js';

package/dist/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/primitives/index.js

@@ -8,16 +8,17 @@ import { TcDivider as I } from "./tc-divider.js";
 import { TcErrorMessage as d } from "./tc-error-message.js";
 import { TcFormHeader as l } from "./tc-form-header.js";
 import { TcIcon as B } from "./tc-icon.js";
-import { TcInput as b } from "./tc-input.js";
-import { TcInputWithChip as v } from "./tc-input-with-chip.js";
-import { TcItem as D } from "./tc-item.js";
+import { TcInput as g } from "./tc-input.js";
+import { TcInputWithChip as b } from "./tc-input-with-chip.js";
+import { TcItem as y } from "./tc-item.js";
 import { TcItemButton as F } from "./tc-item-button.js";
 import { TcOtpInput as M } from "./tc-otp-input.js";
-import { TcSection as W } from "./tc-section.js";
-import { TcSpinner as k } from "./tc-spinner.js";
-import { TcSymbol as w } from "./tc-symbol.js";
-import { TcText as A } from "./tc-text.js";
-import { TcToast as J } from "./tc-toast.js";
+import { TcPageDecoration as P } from "./tc-page-decoration.js";
+import { TcSection as j } from "./tc-section.js";
+import { TcSpinner as q } from "./tc-spinner.js";
+import { TcSymbol as z } from "./tc-symbol.js";
+import { TcText as G } from "./tc-text.js";
+import { TcToast as K } from "./tc-toast.js";
 export {
   t as TcBox,
   p as TcButton,
@@ -29,14 +30,15 @@ export {
   d as TcErrorMessage,
   l as TcFormHeader,
   B as TcIcon,
-  b as TcInput,
-  v as TcInputWithChip,
-  D as TcItem,
+  g as TcInput,
+  b as TcInputWithChip,
+  y as TcItem,
   F as TcItemButton,
   M as TcOtpInput,
-  W as TcSection,
-  k as TcSpinner,
-  w as TcSymbol,
-  A as TcText,
-  J as TcToast
+  P as TcPageDecoration,
+  j as TcSection,
+  q as TcSpinner,
+  z as TcSymbol,
+  G as TcText,
+  K as TcToast
 };

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-box.js

@@ -1,4 +1,4 @@
-import { LitElement as n, html as i, css as x } from "lit";
+import { css as n, LitElement as i, html as x } from "lit";
 import { property as a, customElement as b } from "lit/decorators.js";
 import { styleMap as f } from "lit/directives/style-map.js";
 var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, m = (c, s, o, e) => {
@@ -6,19 +6,19 @@ var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, m = (c, s, o
     (l = c[p]) && (t = (e ? l(s, o, t) : l(t)) || t);
   return e && t && v(s, o, t), t;
 };
-let r = class extends n {
+let r = class extends i {
   constructor() {
     super(...arguments), this.sx = {};
   }
   render() {
-    return i`
+    return x`
       <div part="box" class="box" style=${f(this.sx)}>
         <slot></slot>
       </div>
     `;
   }
 };
-r.styles = x`
+r.styles = n`
     :host {
       display: contents;
     }

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,4BAmGpB;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-button.js

@@ -1,19 +1,19 @@
-import { LitElement as p, html as l, css as u } from "lit";
+import { css as p, LitElement as u, html as l } from "lit";
 import { property as r, customElement as b } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { sharedStyles as m } from "../styles/shared.js";
-var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (o, i, s, a) => {
-  for (var t = a > 1 ? void 0 : a ? f(i, s) : i, d = o.length - 1, c; d >= 0; d--)
-    (c = o[d]) && (t = (a ? c(i, s, t) : c(t)) || t);
+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;
 };
-let e = class extends p {
+let e = class extends u {
   constructor() {
     super(...arguments), this.disabled = !1, this.loading = !1, this.variant = "primary", this.sx = {};
   }
   render() {
-    const o = {
+    const n = {
       button: !0,
       "button-ink": this.variant !== "secondary",
       "button-primary": this.variant === "primary",
@@ -24,8 +24,8 @@ let e = class extends p {
     return l`
       <button
         part="button"
-        class=${v(o)}
-        style=${y(this.sx)}
+        class=${m(n)}
+        style=${v(this.sx)}
         ?disabled=${this.disabled || this.loading}
         type="button"
         @click=${this.handleClick}
@@ -37,22 +37,23 @@ let e = class extends p {
       </button>
     `;
   }
-  handleClick(o) {
+  handleClick(n) {
     this.disabled || this.loading || this.dispatchEvent(
       new CustomEvent("tc-click", {
         bubbles: !0,
         composed: !0,
-        detail: { originalEvent: o }
+        detail: { originalEvent: n }
       })
     );
   }
 };
 e.styles = [
-  m,
-  u`
+  y,
+  p`
       :host {
         display: block;
         width: 100%;
+        min-width: 0;
       }
 
       /* Extend base .button from design-tokens */
@@ -147,19 +148,19 @@ e.styles = [
       }
     `
 ];
-n([
+o([
   r({ type: Boolean })
 ], e.prototype, "disabled", 2);
-n([
+o([
   r({ type: Boolean })
 ], e.prototype, "loading", 2);
-n([
+o([
   r({ type: String })
 ], e.prototype, "variant", 2);
-n([
+o([
   r({ type: Object })
 ], e.prototype, "sx", 2);
-e = n([
+e = o([
   b("tc-button")
 ], e);
 export {

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