@tailng-ui/components 0.17.0 → 0.18.0

package/src/lib/layout/card/tng-card.component.js

@@ -1,6 +1,6 @@
-import { __decorate } from "tslib";
 import { booleanAttribute, Component, input } from '@angular/core';
 import { TngCard as TngCardPrimitive, TngCardActions as TngCardActionsPrimitive, TngCardContent as TngCardContentPrimitive, TngCardDescription as TngCardDescriptionPrimitive, TngCardDivider as TngCardDividerPrimitive, TngCardFooter as TngCardFooterPrimitive, TngCardHeader as TngCardHeaderPrimitive, TngCardLink as TngCardLinkPrimitive, TngCardMedia as TngCardMediaPrimitive, TngCardTitle as TngCardTitlePrimitive, } from '@tailng-ui/primitives';
+import * as i0 from "@angular/core";
 const cardVariants = ['ghost', 'outline', 'solid'];
 const cardTones = ['danger', 'info', 'neutral', 'primary', 'success', 'warning'];
 const cardPaddings = ['lg', 'md', 'none', 'sm'];
@@ -37,131 +37,90 @@ function coerceCardActionsAlign(value) {
     }
     return defaultCardActionsAlign;
 }
-let TngCardComponent = class TngCardComponent {
-    elevated = input(false, {
-        transform: booleanAttribute,
-    });
-    interactive = input(false, {
-        transform: booleanAttribute,
-    });
-    padding = input(defaultCardPadding, {
-        transform: coerceCardPadding,
-    });
-    tone = input(defaultCardTone, {
-        transform: coerceCardTone,
-    });
-    variant = input(defaultCardVariant, {
-        transform: coerceCardVariant,
-    });
-};
-TngCardComponent = __decorate([
-    Component({
-        selector: 'tng-card',
-        imports: [TngCardPrimitive],
-        templateUrl: './tng-card.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardComponent);
-export { TngCardComponent };
-let TngCardHeaderComponent = class TngCardHeaderComponent {
-};
-TngCardHeaderComponent = __decorate([
-    Component({
-        selector: 'tng-card-header',
-        imports: [TngCardHeaderPrimitive],
-        templateUrl: './tng-card-header.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardHeaderComponent);
-export { TngCardHeaderComponent };
-let TngCardTitleComponent = class TngCardTitleComponent {
-};
-TngCardTitleComponent = __decorate([
-    Component({
-        selector: 'tng-card-title',
-        imports: [TngCardTitlePrimitive],
-        templateUrl: './tng-card-title.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardTitleComponent);
-export { TngCardTitleComponent };
-let TngCardDescriptionComponent = class TngCardDescriptionComponent {
-};
-TngCardDescriptionComponent = __decorate([
-    Component({
-        selector: 'tng-card-description',
-        imports: [TngCardDescriptionPrimitive],
-        templateUrl: './tng-card-description.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardDescriptionComponent);
-export { TngCardDescriptionComponent };
-let TngCardContentComponent = class TngCardContentComponent {
-};
-TngCardContentComponent = __decorate([
-    Component({
-        selector: 'tng-card-content',
-        imports: [TngCardContentPrimitive],
-        templateUrl: './tng-card-content.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardContentComponent);
-export { TngCardContentComponent };
-let TngCardFooterComponent = class TngCardFooterComponent {
-};
-TngCardFooterComponent = __decorate([
-    Component({
-        selector: 'tng-card-footer',
-        imports: [TngCardFooterPrimitive],
-        templateUrl: './tng-card-footer.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardFooterComponent);
-export { TngCardFooterComponent };
-let TngCardMediaComponent = class TngCardMediaComponent {
-};
-TngCardMediaComponent = __decorate([
-    Component({
-        selector: 'tng-card-media',
-        imports: [TngCardMediaPrimitive],
-        templateUrl: './tng-card-media.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardMediaComponent);
-export { TngCardMediaComponent };
-let TngCardActionsComponent = class TngCardActionsComponent {
-    align = input(defaultCardActionsAlign, {
-        transform: coerceCardActionsAlign,
-    });
-};
-TngCardActionsComponent = __decorate([
-    Component({
-        selector: 'tng-card-actions',
-        imports: [TngCardActionsPrimitive],
-        templateUrl: './tng-card-actions.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardActionsComponent);
-export { TngCardActionsComponent };
-let TngCardDividerComponent = class TngCardDividerComponent {
-};
-TngCardDividerComponent = __decorate([
-    Component({
-        selector: 'tng-card-divider',
-        imports: [TngCardDividerPrimitive],
-        templateUrl: './tng-card-divider.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardDividerComponent);
-export { TngCardDividerComponent };
-let TngCardLinkComponent = class TngCardLinkComponent {
-    ariaLabel = input(null);
-    disabled = input(false, {
-        transform: booleanAttribute,
-    });
-    href = input('#');
-    rel = input(null);
-    target = input(null);
+export class TngCardComponent {
+    elevated = input(false, { ...(ngDevMode ? { debugName: "elevated" } : {}), transform: booleanAttribute });
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
+    padding = input(defaultCardPadding, { ...(ngDevMode ? { debugName: "padding" } : {}), transform: coerceCardPadding });
+    tone = input(defaultCardTone, { ...(ngDevMode ? { debugName: "tone" } : {}), transform: coerceCardTone });
+    variant = input(defaultCardVariant, { ...(ngDevMode ? { debugName: "variant" } : {}), transform: coerceCardVariant });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngCardComponent, isStandalone: true, selector: "tng-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n  tngCard\n  class=\"tng-card\"\n  [attr.data-padding]=\"padding()\"\n  [attr.data-tone]=\"tone()\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-elevated]=\"elevated() ? '' : null\"\n  [attr.data-interactive]=\"interactive() ? '' : null\"\n>\n  <ng-content />\n</article>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardPrimitive, selector: "[tngCard]", exportAs: ["tngCard"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card', imports: [TngCardPrimitive], template: "<article\n  tngCard\n  class=\"tng-card\"\n  [attr.data-padding]=\"padding()\"\n  [attr.data-tone]=\"tone()\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-elevated]=\"elevated() ? '' : null\"\n  [attr.data-interactive]=\"interactive() ? '' : null\"\n>\n  <ng-content />\n</article>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+export class TngCardHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardHeaderComponent, isStandalone: true, selector: "tng-card-header", ngImport: i0, template: "<header tngCardHeader class=\"tng-card-header\">\n  <ng-content />\n</header>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardHeaderPrimitive, selector: "[tngCardHeader]", exportAs: ["tngCardHeader"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-header', imports: [TngCardHeaderPrimitive], template: "<header tngCardHeader class=\"tng-card-header\">\n  <ng-content />\n</header>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardTitleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardTitleComponent, isStandalone: true, selector: "tng-card-title", ngImport: i0, template: "<h3 tngCardTitle class=\"tng-card-title\">\n  <ng-content />\n</h3>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardTitlePrimitive, selector: "[tngCardTitle]", exportAs: ["tngCardTitle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-title', imports: [TngCardTitlePrimitive], template: "<h3 tngCardTitle class=\"tng-card-title\">\n  <ng-content />\n</h3>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardDescriptionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardDescriptionComponent, isStandalone: true, selector: "tng-card-description", ngImport: i0, template: "<p tngCardDescription class=\"tng-card-description\">\n  <ng-content />\n</p>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardDescriptionPrimitive, selector: "[tngCardDescription]", exportAs: ["tngCardDescription"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-description', imports: [TngCardDescriptionPrimitive], template: "<p tngCardDescription class=\"tng-card-description\">\n  <ng-content />\n</p>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardContentComponent, isStandalone: true, selector: "tng-card-content", ngImport: i0, template: "<section tngCardContent class=\"tng-card-content\">\n  <ng-content />\n</section>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardContentPrimitive, selector: "[tngCardContent]", exportAs: ["tngCardContent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-content', imports: [TngCardContentPrimitive], template: "<section tngCardContent class=\"tng-card-content\">\n  <ng-content />\n</section>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardFooterComponent, isStandalone: true, selector: "tng-card-footer", ngImport: i0, template: "<footer tngCardFooter class=\"tng-card-footer\">\n  <ng-content />\n</footer>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardFooterPrimitive, selector: "[tngCardFooter]", exportAs: ["tngCardFooter"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-footer', imports: [TngCardFooterPrimitive], template: "<footer tngCardFooter class=\"tng-card-footer\">\n  <ng-content />\n</footer>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardMediaComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardMediaComponent, isStandalone: true, selector: "tng-card-media", ngImport: i0, template: "<div tngCardMedia class=\"tng-card-media\">\n  <ng-content />\n</div>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardMediaPrimitive, selector: "[tngCardMedia]", exportAs: ["tngCardMedia"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-media', imports: [TngCardMediaPrimitive], template: "<div tngCardMedia class=\"tng-card-media\">\n  <ng-content />\n</div>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardActionsComponent {
+    align = input(defaultCardActionsAlign, { ...(ngDevMode ? { debugName: "align" } : {}), transform: coerceCardActionsAlign });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngCardActionsComponent, isStandalone: true, selector: "tng-card-actions", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div tngCardActions class=\"tng-card-actions\" [attr.data-align]=\"align()\">\n  <ng-content />\n</div>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardActionsPrimitive, selector: "[tngCardActions]", exportAs: ["tngCardActions"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-actions', imports: [TngCardActionsPrimitive], template: "<div tngCardActions class=\"tng-card-actions\" [attr.data-align]=\"align()\">\n  <ng-content />\n</div>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+export class TngCardDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TngCardDividerComponent, isStandalone: true, selector: "tng-card-divider", ngImport: i0, template: "<hr tngCardDivider class=\"tng-card-divider\" aria-hidden=\"true\" />\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardDividerPrimitive, selector: "[tngCardDivider]", exportAs: ["tngCardDivider"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-divider', imports: [TngCardDividerPrimitive], template: "<hr tngCardDivider class=\"tng-card-divider\" aria-hidden=\"true\" />\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }] });
+export class TngCardLinkComponent {
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    href = input('#', ...(ngDevMode ? [{ debugName: "href" }] : []));
+    rel = input(null, ...(ngDevMode ? [{ debugName: "rel" }] : []));
+    target = input(null, ...(ngDevMode ? [{ debugName: "target" }] : []));
     onClick(...args) {
         if (!this.disabled()) {
             return;
@@ -173,14 +132,11 @@ let TngCardLinkComponent = class TngCardLinkComponent {
         event.preventDefault();
         event.stopImmediatePropagation();
     }
-};
-TngCardLinkComponent = __decorate([
-    Component({
-        selector: 'tng-card-link',
-        imports: [TngCardLinkPrimitive],
-        templateUrl: './tng-card-link.component.html',
-        styleUrl: './tng-card.component.css',
-    })
-], TngCardLinkComponent);
-export { TngCardLinkComponent };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngCardLinkComponent, isStandalone: true, selector: "tng-card-link", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n  tngCardLink\n  class=\"tng-card-link\"\n  [attr.href]=\"disabled() ? null : href()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.tabindex]=\"disabled() ? -1 : null\"\n  [attr.target]=\"target()\"\n  [attr.rel]=\"rel()\"\n  (click)=\"onClick($event)\"\n>\n  <ng-content />\n</a>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"], dependencies: [{ kind: "directive", type: TngCardLinkPrimitive, selector: "[tngCardLink]", exportAs: ["tngCardLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCardLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-card-link', imports: [TngCardLinkPrimitive], template: "<a\n  tngCardLink\n  class=\"tng-card-link\"\n  [attr.href]=\"disabled() ? null : href()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.tabindex]=\"disabled() ? -1 : null\"\n  [attr.target]=\"target()\"\n  [attr.rel]=\"rel()\"\n  (click)=\"onClick($event)\"\n>\n  <ng-content />\n</a>\n", styles: [":host {\n  display: block;\n}\n\n.tng-card {\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-strong);\n  border-radius: 1rem;\n  color: var(--tng-semantic-foreground-primary);\n  display: grid;\n  gap: 1rem;\n  padding: 1rem;\n  position: relative;\n}\n\n.tng-card[data-padding='none'] {\n  padding: 0;\n}\n\n.tng-card[data-padding='sm'] {\n  padding: 0.75rem;\n}\n\n.tng-card[data-padding='md'] {\n  padding: 1rem;\n}\n\n.tng-card[data-padding='lg'] {\n  padding: 1.5rem;\n}\n\n.tng-card[data-elevated] {\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--tng-semantic-foreground-primary) 12%, transparent);\n}\n\n.tng-card[data-interactive] {\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.tng-card[data-interactive]:focus-within,\n.tng-card[data-interactive]:hover {\n  border-color: var(--tng-semantic-accent-brand);\n}\n\n.tng-card[data-variant='ghost'] {\n  background: color-mix(in srgb, var(--tng-semantic-background-surface) 55%, transparent);\n}\n\n.tng-card[data-variant='outline'] {\n  background: var(--tng-semantic-background-canvas);\n}\n\n.tng-card[data-tone='primary'] {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='success'] {\n  border-color: color-mix(in srgb, #16a34a 40%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='warning'] {\n  border-color: color-mix(in srgb, #d97706 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='danger'] {\n  border-color: color-mix(in srgb, #dc2626 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card[data-tone='info'] {\n  border-color: color-mix(in srgb, #0284c7 45%, var(--tng-semantic-border-strong));\n}\n\n.tng-card-header {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.tng-card-title {\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 0;\n}\n\n.tng-card-description {\n  color: var(--tng-semantic-foreground-muted);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.tng-card-content {\n  display: grid;\n  gap: 0.75rem;\n}\n\n.tng-card-footer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n.tng-card-media {\n  border-radius: 0.75rem;\n  display: block;\n  overflow: hidden;\n}\n\n.tng-card-media :where(img, video) {\n  display: block;\n  height: auto;\n  max-width: 100%;\n  width: 100%;\n}\n\n.tng-card-actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.tng-card-actions[data-align='start'] {\n  justify-content: flex-start;\n}\n\n.tng-card-divider {\n  border: 0;\n  border-top: 1px solid var(--tng-semantic-border-subtle);\n  margin: 0;\n  pointer-events: none;\n}\n\n.tng-card-link {\n  border-radius: inherit;\n  color: inherit;\n  display: inline-flex;\n  gap: 0.375rem;\n  text-decoration: none;\n}\n\n.tng-card-link:focus-visible {\n  outline: 2px solid var(--tng-semantic-accent-brand);\n  outline-offset: 2px;\n}\n\n.tng-card-link[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.65;\n}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
 //# sourceMappingURL=tng-card.component.js.map

package/src/lib/layout/card/tng-card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tng-card.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\nimport {\n  TngCard as TngCardPrimitive,\n  TngCardActions as TngCardActionsPrimitive,\n  TngCardContent as TngCardContentPrimitive,\n  TngCardDescription as TngCardDescriptionPrimitive,\n  TngCardDivider as TngCardDividerPrimitive,\n  TngCardFooter as TngCardFooterPrimitive,\n  TngCardHeader as TngCardHeaderPrimitive,\n  TngCardLink as TngCardLinkPrimitive,\n  TngCardMedia as TngCardMediaPrimitive,\n  TngCardTitle as TngCardTitlePrimitive,\n} from '@tailng-ui/primitives';\n\nconst cardVariants = ['ghost', 'outline', 'solid'] as const;\nconst cardTones = ['danger', 'info', 'neutral', 'primary', 'success', 'warning'] as const;\nconst cardPaddings = ['lg', 'md', 'none', 'sm'] as const;\nconst cardActionAlignments = ['end', 'start'] as const;\n\nconst cardVariantSet = new Set<TngCardVariant>(cardVariants);\nconst cardToneSet = new Set<TngCardTone>(cardTones);\nconst cardPaddingSet = new Set<TngCardPadding>(cardPaddings);\nconst cardActionAlignmentSet = new Set<TngCardActionsAlign>(cardActionAlignments);\n\nconst defaultCardVariant: TngCardVariant = 'solid';\nconst defaultCardTone: TngCardTone = 'neutral';\nconst defaultCardPadding: TngCardPadding = 'md';\nconst defaultCardActionsAlign: TngCardActionsAlign = 'end';\n\nexport type TngCardVariant = (typeof cardVariants)[number];\nexport type TngCardTone = (typeof cardTones)[number];\nexport type TngCardPadding = (typeof cardPaddings)[number];\nexport type TngCardActionsAlign = (typeof cardActionAlignments)[number];\n\nfunction coerceCardVariant(value: string): TngCardVariant {\n  if (cardVariantSet.has(value as TngCardVariant)) {\n    return value as TngCardVariant;\n  }\n\n  return defaultCardVariant;\n}\n\nfunction coerceCardTone(value: string): TngCardTone {\n  if (cardToneSet.has(value as TngCardTone)) {\n    return value as TngCardTone;\n  }\n\n  return defaultCardTone;\n}\n\nfunction coerceCardPadding(value: string): TngCardPadding {\n  if (cardPaddingSet.has(value as TngCardPadding)) {\n    return value as TngCardPadding;\n  }\n\n  return defaultCardPadding;\n}\n\nfunction coerceCardActionsAlign(value: string): TngCardActionsAlign {\n  if (cardActionAlignmentSet.has(value as TngCardActionsAlign)) {\n    return value as TngCardActionsAlign;\n  }\n\n  return defaultCardActionsAlign;\n}\n\n@Component({\n  selector: 'tng-card',\n  imports: [TngCardPrimitive],\n  templateUrl: './tng-card.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardComponent {\n  public readonly elevated = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly interactive = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly padding = input<TngCardPadding, string>(defaultCardPadding, {\n    transform: coerceCardPadding,\n  });\n  public readonly tone = input<TngCardTone, string>(defaultCardTone, {\n    transform: coerceCardTone,\n  });\n  public readonly variant = input<TngCardVariant, string>(defaultCardVariant, {\n    transform: coerceCardVariant,\n  });\n}\n\n@Component({\n  selector: 'tng-card-header',\n  imports: [TngCardHeaderPrimitive],\n  templateUrl: './tng-card-header.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardHeaderComponent {\n}\n\n@Component({\n  selector: 'tng-card-title',\n  imports: [TngCardTitlePrimitive],\n  templateUrl: './tng-card-title.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardTitleComponent {\n}\n\n@Component({\n  selector: 'tng-card-description',\n  imports: [TngCardDescriptionPrimitive],\n  templateUrl: './tng-card-description.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardDescriptionComponent {\n}\n\n@Component({\n  selector: 'tng-card-content',\n  imports: [TngCardContentPrimitive],\n  templateUrl: './tng-card-content.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardContentComponent {\n}\n\n@Component({\n  selector: 'tng-card-footer',\n  imports: [TngCardFooterPrimitive],\n  templateUrl: './tng-card-footer.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardFooterComponent {\n}\n\n@Component({\n  selector: 'tng-card-media',\n  imports: [TngCardMediaPrimitive],\n  templateUrl: './tng-card-media.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardMediaComponent {\n}\n\n@Component({\n  selector: 'tng-card-actions',\n  imports: [TngCardActionsPrimitive],\n  templateUrl: './tng-card-actions.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardActionsComponent {\n  public readonly align = input<TngCardActionsAlign, string>(defaultCardActionsAlign, {\n    transform: coerceCardActionsAlign,\n  });\n}\n\n@Component({\n  selector: 'tng-card-divider',\n  imports: [TngCardDividerPrimitive],\n  templateUrl: './tng-card-divider.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardDividerComponent {\n}\n\n@Component({\n  selector: 'tng-card-link',\n  imports: [TngCardLinkPrimitive],\n  templateUrl: './tng-card-link.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardLinkComponent {\n  public readonly ariaLabel = input<string | null>(null);\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly href = input<string | null>('#');\n  public readonly rel = input<string | null>(null);\n  public readonly target = input<string | null>(null);\n\n  protected onClick(...args: readonly unknown[]): void {\n    if (!this.disabled()) {\n      return;\n    }\n\n    const [event] = args;\n    if (!(event instanceof Event)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  }\n}\n"]}
+{"version":3,"file":"tng-card.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-header.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-title.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-description.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-content.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-footer.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-media.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-actions.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-divider.component.html","../../../../../../../../libs/tailng-ui/components/src/lib/layout/card/tng-card-link.component.html"],"names":[],"mappings":"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","sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\nimport {\n  TngCard as TngCardPrimitive,\n  TngCardActions as TngCardActionsPrimitive,\n  TngCardContent as TngCardContentPrimitive,\n  TngCardDescription as TngCardDescriptionPrimitive,\n  TngCardDivider as TngCardDividerPrimitive,\n  TngCardFooter as TngCardFooterPrimitive,\n  TngCardHeader as TngCardHeaderPrimitive,\n  TngCardLink as TngCardLinkPrimitive,\n  TngCardMedia as TngCardMediaPrimitive,\n  TngCardTitle as TngCardTitlePrimitive,\n} from '@tailng-ui/primitives';\n\nconst cardVariants = ['ghost', 'outline', 'solid'] as const;\nconst cardTones = ['danger', 'info', 'neutral', 'primary', 'success', 'warning'] as const;\nconst cardPaddings = ['lg', 'md', 'none', 'sm'] as const;\nconst cardActionAlignments = ['end', 'start'] as const;\n\nconst cardVariantSet = new Set<TngCardVariant>(cardVariants);\nconst cardToneSet = new Set<TngCardTone>(cardTones);\nconst cardPaddingSet = new Set<TngCardPadding>(cardPaddings);\nconst cardActionAlignmentSet = new Set<TngCardActionsAlign>(cardActionAlignments);\n\nconst defaultCardVariant: TngCardVariant = 'solid';\nconst defaultCardTone: TngCardTone = 'neutral';\nconst defaultCardPadding: TngCardPadding = 'md';\nconst defaultCardActionsAlign: TngCardActionsAlign = 'end';\n\nexport type TngCardVariant = (typeof cardVariants)[number];\nexport type TngCardTone = (typeof cardTones)[number];\nexport type TngCardPadding = (typeof cardPaddings)[number];\nexport type TngCardActionsAlign = (typeof cardActionAlignments)[number];\n\nfunction coerceCardVariant(value: string): TngCardVariant {\n  if (cardVariantSet.has(value as TngCardVariant)) {\n    return value as TngCardVariant;\n  }\n\n  return defaultCardVariant;\n}\n\nfunction coerceCardTone(value: string): TngCardTone {\n  if (cardToneSet.has(value as TngCardTone)) {\n    return value as TngCardTone;\n  }\n\n  return defaultCardTone;\n}\n\nfunction coerceCardPadding(value: string): TngCardPadding {\n  if (cardPaddingSet.has(value as TngCardPadding)) {\n    return value as TngCardPadding;\n  }\n\n  return defaultCardPadding;\n}\n\nfunction coerceCardActionsAlign(value: string): TngCardActionsAlign {\n  if (cardActionAlignmentSet.has(value as TngCardActionsAlign)) {\n    return value as TngCardActionsAlign;\n  }\n\n  return defaultCardActionsAlign;\n}\n\n@Component({\n  selector: 'tng-card',\n  imports: [TngCardPrimitive],\n  templateUrl: './tng-card.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardComponent {\n  public readonly elevated = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly interactive = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly padding = input<TngCardPadding, string>(defaultCardPadding, {\n    transform: coerceCardPadding,\n  });\n  public readonly tone = input<TngCardTone, string>(defaultCardTone, {\n    transform: coerceCardTone,\n  });\n  public readonly variant = input<TngCardVariant, string>(defaultCardVariant, {\n    transform: coerceCardVariant,\n  });\n}\n\n@Component({\n  selector: 'tng-card-header',\n  imports: [TngCardHeaderPrimitive],\n  templateUrl: './tng-card-header.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardHeaderComponent {\n}\n\n@Component({\n  selector: 'tng-card-title',\n  imports: [TngCardTitlePrimitive],\n  templateUrl: './tng-card-title.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardTitleComponent {\n}\n\n@Component({\n  selector: 'tng-card-description',\n  imports: [TngCardDescriptionPrimitive],\n  templateUrl: './tng-card-description.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardDescriptionComponent {\n}\n\n@Component({\n  selector: 'tng-card-content',\n  imports: [TngCardContentPrimitive],\n  templateUrl: './tng-card-content.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardContentComponent {\n}\n\n@Component({\n  selector: 'tng-card-footer',\n  imports: [TngCardFooterPrimitive],\n  templateUrl: './tng-card-footer.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardFooterComponent {\n}\n\n@Component({\n  selector: 'tng-card-media',\n  imports: [TngCardMediaPrimitive],\n  templateUrl: './tng-card-media.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardMediaComponent {\n}\n\n@Component({\n  selector: 'tng-card-actions',\n  imports: [TngCardActionsPrimitive],\n  templateUrl: './tng-card-actions.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardActionsComponent {\n  public readonly align = input<TngCardActionsAlign, string>(defaultCardActionsAlign, {\n    transform: coerceCardActionsAlign,\n  });\n}\n\n@Component({\n  selector: 'tng-card-divider',\n  imports: [TngCardDividerPrimitive],\n  templateUrl: './tng-card-divider.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardDividerComponent {\n}\n\n@Component({\n  selector: 'tng-card-link',\n  imports: [TngCardLinkPrimitive],\n  templateUrl: './tng-card-link.component.html',\n  styleUrl: './tng-card.component.css',\n})\nexport class TngCardLinkComponent {\n  public readonly ariaLabel = input<string | null>(null);\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly href = input<string | null>('#');\n  public readonly rel = input<string | null>(null);\n  public readonly target = input<string | null>(null);\n\n  protected onClick(...args: readonly unknown[]): void {\n    if (!this.disabled()) {\n      return;\n    }\n\n    const [event] = args;\n    if (!(event instanceof Event)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  }\n}\n","<article\n  tngCard\n  class=\"tng-card\"\n  [attr.data-padding]=\"padding()\"\n  [attr.data-tone]=\"tone()\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-elevated]=\"elevated() ? '' : null\"\n  [attr.data-interactive]=\"interactive() ? '' : null\"\n>\n  <ng-content />\n</article>\n","<header tngCardHeader class=\"tng-card-header\">\n  <ng-content />\n</header>\n","<h3 tngCardTitle class=\"tng-card-title\">\n  <ng-content />\n</h3>\n","<p tngCardDescription class=\"tng-card-description\">\n  <ng-content />\n</p>\n","<section tngCardContent class=\"tng-card-content\">\n  <ng-content />\n</section>\n","<footer tngCardFooter class=\"tng-card-footer\">\n  <ng-content />\n</footer>\n","<div tngCardMedia class=\"tng-card-media\">\n  <ng-content />\n</div>\n","<div tngCardActions class=\"tng-card-actions\" [attr.data-align]=\"align()\">\n  <ng-content />\n</div>\n","<hr tngCardDivider class=\"tng-card-divider\" aria-hidden=\"true\" />\n","<a\n  tngCardLink\n  class=\"tng-card-link\"\n  [attr.href]=\"disabled() ? null : href()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.tabindex]=\"disabled() ? -1 : null\"\n  [attr.target]=\"target()\"\n  [attr.rel]=\"rel()\"\n  (click)=\"onClick($event)\"\n>\n  <ng-content />\n</a>\n"]}

package/src/lib/layout/collapsible/tng-collapsible.component.d.ts

@@ -1,3 +1,4 @@
+import * as i0 from "@angular/core";
 export declare function createTngCollapsibleContentId(): string;
 export declare function toggleTngCollapsibleState(open: boolean, disabled: boolean): boolean;
 export declare class TngCollapsibleComponent {
@@ -7,5 +8,7 @@ export declare class TngCollapsibleComponent {
     readonly title: import("@angular/core").InputSignal<string>;
     readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
     onToggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TngCollapsibleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TngCollapsibleComponent, "tng-collapsible", never, { "contentId": { "alias": "contentId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
 }
 //# sourceMappingURL=tng-collapsible.component.d.ts.map

package/src/lib/layout/collapsible/tng-collapsible.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tng-collapsible.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/collapsible/tng-collapsible.component.ts"],"names":[],"mappings":"AASA,wBAAgB,6BAA6B,IAAI,MAAM,CAGtD;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,OAAO,CAEnF;AAED,qBAUa,uBAAuB;IAClC,SAAgB,SAAS,8CAAkD;IAC3E,SAAgB,QAAQ,8EAErB;IACH,SAAgB,IAAI,8EAEjB;IACH,SAAgB,KAAK,8CAAgC;IAErD,SAAgB,UAAU,oDAAqB;IAExC,QAAQ,IAAI,IAAI;CAIxB"}
+{"version":3,"file":"tng-collapsible.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/collapsible/tng-collapsible.component.ts"],"names":[],"mappings":";AASA,wBAAgB,6BAA6B,IAAI,MAAM,CAGtD;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,OAAO,CAEnF;AAED,qBAUa,uBAAuB;IAClC,SAAgB,SAAS,8CAAkD;IAC3E,SAAgB,QAAQ,8EAErB;IACH,SAAgB,IAAI,8EAEjB;IACH,SAAgB,KAAK,8CAAgC;IAErD,SAAgB,UAAU,oDAAqB;IAExC,QAAQ,IAAI,IAAI;yCAZZ,uBAAuB;2CAAvB,uBAAuB;CAgBnC"}

package/src/lib/layout/collapsible/tng-collapsible.component.js

@@ -1,6 +1,6 @@
-import { __decorate } from "tslib";
 import { booleanAttribute, Component, input, output } from '@angular/core';
 import { TngCollapsible as TngCollapsiblePrimitive, TngCollapsibleContent as TngCollapsibleContentPrimitive, TngCollapsibleTrigger as TngCollapsibleTriggerPrimitive, } from '@tailng-ui/primitives';
+import * as i0 from "@angular/core";
 let nextCollapsibleContentId = 0;
 export function createTngCollapsibleContentId() {
     nextCollapsibleContentId += 1;
@@ -9,32 +9,25 @@ export function createTngCollapsibleContentId() {
 export function toggleTngCollapsibleState(open, disabled) {
     return disabled ? open : !open;
 }
-let TngCollapsibleComponent = class TngCollapsibleComponent {
-    contentId = input(createTngCollapsibleContentId());
-    disabled = input(false, {
-        transform: booleanAttribute,
-    });
-    open = input(false, {
-        transform: booleanAttribute,
-    });
-    title = input('Collapsible');
+export class TngCollapsibleComponent {
+    contentId = input(createTngCollapsibleContentId(), ...(ngDevMode ? [{ debugName: "contentId" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
+    title = input('Collapsible', ...(ngDevMode ? [{ debugName: "title" }] : []));
     openChange = output();
     onToggle() {
         const nextState = toggleTngCollapsibleState(this.open(), this.disabled());
         this.openChange.emit(nextState);
     }
-};
-TngCollapsibleComponent = __decorate([
-    Component({
-        selector: 'tng-collapsible',
-        imports: [
-            TngCollapsiblePrimitive,
-            TngCollapsibleTriggerPrimitive,
-            TngCollapsibleContentPrimitive,
-        ],
-        templateUrl: './tng-collapsible.component.html',
-        styleUrl: './tng-collapsible.component.css',
-    })
-], TngCollapsibleComponent);
-export { TngCollapsibleComponent };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngCollapsibleComponent, isStandalone: true, selector: "tng-collapsible", inputs: { contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<section tngCollapsible class=\"tng-collapsible\" [open]=\"open()\" [disabled]=\"disabled()\">\n  <button\n    tngCollapsibleTrigger\n    class=\"tng-collapsible-trigger\"\n    [open]=\"open()\"\n    [disabled]=\"disabled()\"\n    [contentId]=\"contentId()\"\n    (click)=\"onToggle()\"\n  >\n    <span class=\"tng-collapsible-title\">{{ title() }}</span>\n    <span class=\"tng-collapsible-icon\" aria-hidden=\"true\">{{ open() ? '\u2212' : '+' }}</span>\n  </button>\n\n  <div\n    tngCollapsibleContent\n    class=\"tng-collapsible-content\"\n    [id]=\"contentId()\"\n    [open]=\"open()\"\n  >\n    <ng-content />\n  </div>\n</section>\n", styles: [":host {\n  display: block;\n}\n\n.tng-collapsible {\n  border: 1px solid var(--tng-semantic-border-subtle);\n  border-radius: 0.85rem;\n  display: grid;\n  overflow: hidden;\n}\n\n.tng-collapsible-trigger {\n  align-items: center;\n  background: var(--tng-semantic-background-surface);\n  border: 0;\n  color: var(--tng-semantic-foreground-primary);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  justify-content: space-between;\n  min-height: 2.75rem;\n  padding: 0.65rem 0.9rem;\n  text-align: left;\n  width: 100%;\n}\n\n.tng-collapsible-trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.tng-collapsible-content {\n  background: var(--tng-semantic-background-muted);\n  color: var(--tng-semantic-foreground-primary);\n  padding: 0.85rem 0.95rem;\n}\n\n.tng-collapsible-icon {\n  font-size: 1.05rem;\n  line-height: 1;\n}\n"], dependencies: [{ kind: "directive", type: TngCollapsiblePrimitive, selector: "[tngCollapsible]", inputs: ["disabled", "open"], exportAs: ["tngCollapsible"] }, { kind: "directive", type: TngCollapsibleTriggerPrimitive, selector: "button[tngCollapsibleTrigger]", inputs: ["contentId", "disabled", "open"], exportAs: ["tngCollapsibleTrigger"] }, { kind: "directive", type: TngCollapsibleContentPrimitive, selector: "[tngCollapsibleContent]", inputs: ["open"], exportAs: ["tngCollapsibleContent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngCollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-collapsible', imports: [
+                        TngCollapsiblePrimitive,
+                        TngCollapsibleTriggerPrimitive,
+                        TngCollapsibleContentPrimitive,
+                    ], template: "<section tngCollapsible class=\"tng-collapsible\" [open]=\"open()\" [disabled]=\"disabled()\">\n  <button\n    tngCollapsibleTrigger\n    class=\"tng-collapsible-trigger\"\n    [open]=\"open()\"\n    [disabled]=\"disabled()\"\n    [contentId]=\"contentId()\"\n    (click)=\"onToggle()\"\n  >\n    <span class=\"tng-collapsible-title\">{{ title() }}</span>\n    <span class=\"tng-collapsible-icon\" aria-hidden=\"true\">{{ open() ? '\u2212' : '+' }}</span>\n  </button>\n\n  <div\n    tngCollapsibleContent\n    class=\"tng-collapsible-content\"\n    [id]=\"contentId()\"\n    [open]=\"open()\"\n  >\n    <ng-content />\n  </div>\n</section>\n", styles: [":host {\n  display: block;\n}\n\n.tng-collapsible {\n  border: 1px solid var(--tng-semantic-border-subtle);\n  border-radius: 0.85rem;\n  display: grid;\n  overflow: hidden;\n}\n\n.tng-collapsible-trigger {\n  align-items: center;\n  background: var(--tng-semantic-background-surface);\n  border: 0;\n  color: var(--tng-semantic-foreground-primary);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  justify-content: space-between;\n  min-height: 2.75rem;\n  padding: 0.65rem 0.9rem;\n  text-align: left;\n  width: 100%;\n}\n\n.tng-collapsible-trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.tng-collapsible-content {\n  background: var(--tng-semantic-background-muted);\n  color: var(--tng-semantic-foreground-primary);\n  padding: 0.85rem 0.95rem;\n}\n\n.tng-collapsible-icon {\n  font-size: 1.05rem;\n  line-height: 1;\n}\n"] }]
+        }], propDecorators: { contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 //# sourceMappingURL=tng-collapsible.component.js.map

package/src/lib/layout/collapsible/tng-collapsible.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tng-collapsible.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/collapsible/tng-collapsible.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EACL,cAAc,IAAI,uBAAuB,EACzC,qBAAqB,IAAI,8BAA8B,EACvD,qBAAqB,IAAI,8BAA8B,GACxD,MAAM,uBAAuB,CAAC;AAE/B,IAAI,wBAAwB,GAAG,CAAC,CAAC;AAEjC,MAAM,UAAU,6BAA6B;IAC3C,wBAAwB,IAAI,CAAC,CAAC;IAC9B,OAAO,2BAA2B,wBAAwB,EAAE,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,IAAa,EAAE,QAAiB;IACxE,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACjC,CAAC;AAYM,IAAM,uBAAuB,GAA7B,MAAM,uBAAuB;IAClB,SAAS,GAAG,KAAK,CAAS,6BAA6B,EAAE,CAAC,CAAC;IAC3D,QAAQ,GAAG,KAAK,CAA4B,KAAK,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IACa,IAAI,GAAG,KAAK,CAA4B,KAAK,EAAE;QAC7D,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IACa,KAAK,GAAG,KAAK,CAAS,aAAa,CAAC,CAAC;IAErC,UAAU,GAAG,MAAM,EAAW,CAAC;IAExC,QAAQ;QACb,MAAM,SAAS,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;CACF,CAAA;AAhBY,uBAAuB;IAVnC,SAAS,CAAC;QACT,QAAQ,EAAE,iBAAiB;QAC3B,OAAO,EAAE;YACP,uBAAuB;YACvB,8BAA8B;YAC9B,8BAA8B;SAC/B;QACD,WAAW,EAAE,kCAAkC;QAC/C,QAAQ,EAAE,iCAAiC;KAC5C,CAAC;GACW,uBAAuB,CAgBnC","sourcesContent":["import { booleanAttribute, Component, input, output } from '@angular/core';\nimport {\n  TngCollapsible as TngCollapsiblePrimitive,\n  TngCollapsibleContent as TngCollapsibleContentPrimitive,\n  TngCollapsibleTrigger as TngCollapsibleTriggerPrimitive,\n} from '@tailng-ui/primitives';\n\nlet nextCollapsibleContentId = 0;\n\nexport function createTngCollapsibleContentId(): string {\n  nextCollapsibleContentId += 1;\n  return `tng-collapsible-content-${nextCollapsibleContentId}`;\n}\n\nexport function toggleTngCollapsibleState(open: boolean, disabled: boolean): boolean {\n  return disabled ? open : !open;\n}\n\n@Component({\n  selector: 'tng-collapsible',\n  imports: [\n    TngCollapsiblePrimitive,\n    TngCollapsibleTriggerPrimitive,\n    TngCollapsibleContentPrimitive,\n  ],\n  templateUrl: './tng-collapsible.component.html',\n  styleUrl: './tng-collapsible.component.css',\n})\nexport class TngCollapsibleComponent {\n  public readonly contentId = input<string>(createTngCollapsibleContentId());\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly open = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly title = input<string>('Collapsible');\n\n  public readonly openChange = output<boolean>();\n\n  public onToggle(): void {\n    const nextState = toggleTngCollapsibleState(this.open(), this.disabled());\n    this.openChange.emit(nextState);\n  }\n}\n"]}
+{"version":3,"file":"tng-collapsible.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/collapsible/tng-collapsible.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/layout/collapsible/tng-collapsible.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EACL,cAAc,IAAI,uBAAuB,EACzC,qBAAqB,IAAI,8BAA8B,EACvD,qBAAqB,IAAI,8BAA8B,GACxD,MAAM,uBAAuB,CAAC;;AAE/B,IAAI,wBAAwB,GAAG,CAAC,CAAC;AAEjC,MAAM,UAAU,6BAA6B;IAC3C,wBAAwB,IAAI,CAAC,CAAC;IAC9B,OAAO,2BAA2B,wBAAwB,EAAE,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,IAAa,EAAE,QAAiB;IACxE,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACjC,CAAC;AAYD,MAAM,OAAO,uBAAuB;IAClB,SAAS,GAAG,KAAK,CAAS,6BAA6B,EAAE,qDAAC,CAAC;IAC3D,QAAQ,GAAG,KAAK,CAA4B,KAAK,qDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IACa,IAAI,GAAG,KAAK,CAA4B,KAAK,iDAC3D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IACa,KAAK,GAAG,KAAK,CAAS,aAAa,iDAAC,CAAC;IAErC,UAAU,GAAG,MAAM,EAAW,CAAC;IAExC,QAAQ;QACb,MAAM,SAAS,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;uGAfU,uBAAuB;2FAAvB,uBAAuB,gnBC5BpC,ooBAsBA,i5BDDI,uBAAuB,yHACvB,8BAA8B,0JAC9B,8BAA8B;;2FAKrB,uBAAuB;kBAVnC,SAAS;+BACE,iBAAiB,WAClB;wBACP,uBAAuB;wBACvB,8BAA8B;wBAC9B,8BAA8B;qBAC/B","sourcesContent":["import { booleanAttribute, Component, input, output } from '@angular/core';\nimport {\n  TngCollapsible as TngCollapsiblePrimitive,\n  TngCollapsibleContent as TngCollapsibleContentPrimitive,\n  TngCollapsibleTrigger as TngCollapsibleTriggerPrimitive,\n} from '@tailng-ui/primitives';\n\nlet nextCollapsibleContentId = 0;\n\nexport function createTngCollapsibleContentId(): string {\n  nextCollapsibleContentId += 1;\n  return `tng-collapsible-content-${nextCollapsibleContentId}`;\n}\n\nexport function toggleTngCollapsibleState(open: boolean, disabled: boolean): boolean {\n  return disabled ? open : !open;\n}\n\n@Component({\n  selector: 'tng-collapsible',\n  imports: [\n    TngCollapsiblePrimitive,\n    TngCollapsibleTriggerPrimitive,\n    TngCollapsibleContentPrimitive,\n  ],\n  templateUrl: './tng-collapsible.component.html',\n  styleUrl: './tng-collapsible.component.css',\n})\nexport class TngCollapsibleComponent {\n  public readonly contentId = input<string>(createTngCollapsibleContentId());\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly open = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly title = input<string>('Collapsible');\n\n  public readonly openChange = output<boolean>();\n\n  public onToggle(): void {\n    const nextState = toggleTngCollapsibleState(this.open(), this.disabled());\n    this.openChange.emit(nextState);\n  }\n}\n","<section tngCollapsible class=\"tng-collapsible\" [open]=\"open()\" [disabled]=\"disabled()\">\n  <button\n    tngCollapsibleTrigger\n    class=\"tng-collapsible-trigger\"\n    [open]=\"open()\"\n    [disabled]=\"disabled()\"\n    [contentId]=\"contentId()\"\n    (click)=\"onToggle()\"\n  >\n    <span class=\"tng-collapsible-title\">{{ title() }}</span>\n    <span class=\"tng-collapsible-icon\" aria-hidden=\"true\">{{ open() ? '−' : '+' }}</span>\n  </button>\n\n  <div\n    tngCollapsibleContent\n    class=\"tng-collapsible-content\"\n    [id]=\"contentId()\"\n    [open]=\"open()\"\n  >\n    <ng-content />\n  </div>\n</section>\n"]}