@transcodes/ui-components 0.3.4 → 0.3.6

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

@@ -0,0 +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,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

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * A simple container component without default flex layout.
+ * Use for wrapping content with custom styles.
+ *
+ * @slot - Content to display inside the box
+ * @csspart box - The container element
+ */
+export declare class TcBox extends LitElement {
+    sx: Record<string, string | number>;
+    static styles: import('lit').CSSResult;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-box': TcBox;
+    }
+}
+//# sourceMappingURL=tc-box.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Primary button component with loading states.
+ * Uses design-tokens component classes (.button, .button-primary, etc.)
+ *
+ * @fires tc-click - Fired when button is clicked
+ * @slot - Button content
+ * @csspart button - The button element
+ * @csspart spinner - The loading spinner
+ */
+export declare class TcButton extends LitElement {
+    disabled: boolean;
+    loading: boolean;
+    variant: 'primary' | 'secondary' | 'success';
+    sx: Record<string, string | number>;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+    private handleClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-button': TcButton;
+    }
+}
+//# sourceMappingURL=tc-button.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * A callout/alert component for messages and notices.
+ * Uses design-tokens notice classes (.notice, .notice-info, .notice-success, etc.)
+ *
+ * @slot - Callout content
+ * @slot icon - Optional icon slot
+ * @csspart callout - The callout container
+ * @csspart icon - The icon container
+ * @csspart content - The content container
+ */
+export declare class TcCallout extends LitElement {
+    variant: 'info' | 'success' | 'warning' | 'error';
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-callout': TcCallout;
+    }
+}
+//# sourceMappingURL=tc-callout.d.ts.map

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

@@ -0,0 +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"}

package/dist/primitives/tc-callout.js

@@ -1,4 +1,4 @@
-import { LitElement as c, html as m, css as p } from "lit";
+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";
@@ -7,7 +7,7 @@ var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (n, e, s
     (a = n[i]) && (t = (r ? a(e, s, t) : a(t)) || t);
   return r && t && h(e, s, t), t;
 };
-let o = class extends c {
+let o = class extends m {
   constructor() {
     super(...arguments), this.variant = "info";
   }
@@ -19,7 +19,7 @@ let o = class extends c {
       "notice-warning": this.variant === "warning",
       "error-message": n
     };
-    return m`
+    return p`
       <div part="callout" class=${u(e)} role="alert">
         <div class="callout-inner">
           <div part="icon" class="callout-icon">
@@ -35,10 +35,11 @@ let o = class extends c {
 };
 o.styles = [
   f,
-  p`
+  c`
       :host {
         display: block;
         width: 100%;
+        min-width: 0;
       }
 
       /* Override animation from design-tokens for immediate display */

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Card component with layered shadows and optional inner border effect.
+ * Uses design-tokens .card class.
+ *
+ * @slot - Card content
+ * @csspart card - The card container
+ */
+export declare class TcCard extends LitElement {
+    noBorder: boolean;
+    sx: Record<string, string | number>;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-card': TcCard;
+    }
+}
+//# sourceMappingURL=tc-card.d.ts.map

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

@@ -0,0 +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"}

package/dist/primitives/tc-card.js

@@ -1,14 +1,14 @@
-import { LitElement as p, html as l, css as f } from "lit";
+import { css as p, LitElement as l, 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 u } from "lit/directives/style-map.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, o, n, s) => {
+import { styleMap as h } from "lit/directives/style-map.js";
+import { sharedStyles as u } 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 && h(o, n, e), e;
+  return s && e && v(o, n, e), e;
 };
-let r = class extends p {
+let r = class extends l {
   constructor() {
     super(...arguments), this.noBorder = !1, this.sx = {};
   }
@@ -17,8 +17,8 @@ let r = class extends p {
       card: !0,
       "card--no-border": this.noBorder
     };
-    return l`
-      <div part="card" class=${b(t)} style=${u(this.sx)}>
+    return f`
+      <div part="card" class=${b(t)} style=${h(this.sx)}>
         <div class="card-content">
           <slot></slot>
         </div>
@@ -27,10 +27,11 @@ let r = class extends p {
   }
 };
 r.styles = [
-  v,
-  f`
+  u,
+  p`
       :host {
         display: block;
+        min-width: 0;
       }
 
       /* Inner border effect using mask - extends design-tokens .card */

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

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * A chip/tag component for labels and badges.
+ *
+ * @slot - Chip content
+ * @csspart chip - The chip container
+ */
+export declare class TcChip extends LitElement {
+    variant: 'default' | 'success' | 'error' | 'info';
+    size: 'sm' | 'md';
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-chip': TcChip;
+    }
+}
+//# sourceMappingURL=tc-chip.d.ts.map

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

@@ -0,0 +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"}

package/dist/primitives/tc-chip.js

@@ -1,17 +1,17 @@
-import { LitElement as l, html as h, css as d } from "lit";
-import { property as n, customElement as f } from "lit/decorators.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, i, s, t) => {
-  for (var r = t > 1 ? void 0 : t ? u(i, s) : i, a = o.length - 1, p; a >= 0; a--)
-    (p = o[a]) && (r = (t ? p(i, s, r) : p(r)) || r);
-  return t && r && m(i, s, r), r;
+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;
 };
-let e = class extends l {
+let e = class extends h {
   constructor() {
     super(...arguments), this.variant = "default", this.size = "md";
   }
   render() {
-    return h`
+    return d`
       <span part="chip" class="chip chip--${this.variant} chip--${this.size}">
         <slot></slot>
       </span>
@@ -19,10 +19,12 @@ let e = class extends l {
   }
 };
 e.styles = [
-  v,
-  d`
+  m,
+  l`
       :host {
         display: inline-flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .chip {
@@ -65,13 +67,13 @@ e.styles = [
       }
     `
 ];
-c([
-  n({ type: String })
+n([
+  o({ type: String })
 ], e.prototype, "variant", 2);
-c([
-  n({ type: String })
+n([
+  o({ type: String })
 ], e.prototype, "size", 2);
-e = c([
+e = n([
   f("tc-chip")
 ], e);
 export {

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * A flex container component with column layout by default.
+ *
+ * @slot - Content to display inside the container
+ * @csspart container - The container element
+ */
+export declare class TcContainer extends LitElement {
+    wide: boolean;
+    sx: Record<string, string | number>;
+    private defaultStyles;
+    static styles: import('lit').CSSResult;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-container': TcContainer;
+    }
+}
+//# sourceMappingURL=tc-container.d.ts.map

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

@@ -0,0 +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"}