@blotch/dolan 22.2.6 → 22.2.7

package/dist/ui/components/button/button.ts

@@ -1,7 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   Injector,
   ViewEncapsulation,
   booleanAttribute,
@@ -11,7 +11,6 @@ import {
   input,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import {
   LYNX_ELEMENTS,
@@ -233,63 +232,69 @@ const buttonIconColor = () => inject(UiButton).foreground;
   // inside the template provides one too, but only for the template's own
   // nodes.
   providers: [{ provide: UI_ICON_COLOR, useFactory: buttonIconColor }],
+  // The host is the button's box. Angular gives a component's host every
+  // static attribute the app writes on it, so a class on <ui-button> lands
+  // there whatever the component does: on a box inside the host as well, a
+  // margin or padding applied twice. An accessibility-label lands there too,
+  // which is where it belongs: the box is the button a screen reader reads.
+  //
+  // Press feedback binds BOTH touch and mouse events on purpose. Native
+  // (iOS/Android) only ever fires touch; Lynx web runs in the browser, where a
+  // cursor press fires mousedown/up and NEVER touchstart — so touch-only
+  // bindings gave zero visual feedback on web while (bindtap) still fired the
+  // action (a "the button works but doesn't react" split). Binding both makes
+  // the press-and-hold identical on every platform; mouse events are inert on
+  // touch devices, so there's no double-fire. The scale animation itself lives
+  // in pressDown/pressRelease — see their JSDoc for why it's a CSS transition
+  // (which serializes to the DOM on Lynx web) and not el.animate() (whose Web
+  // Animation runs on web-core's offscreen node and never reaches the screen).
+  //
+  // An icon-only button has no text for a screen reader to read, so with an
+  // accessibility-label the whole button becomes one element that says it.
+  // Without one, the label's own text is read, as a button. The attributes
+  // are attribute bindings: a property binding on a component's host is
+  // checked against the DOM schema, which has no `accessibility-label`.
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.accessibility-element]': "accessibilityLabel() ? 'true' : null",
+    '[attr.accessibility-traits]': "accessibilityLabel() ? 'button' : null",
+    '[attr.accessibility-label]': 'accessibilityLabel() || null',
+    '(bindtouchstart)': 'onPressStart()',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart()',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPressCancel()',
+    '(bindtap)': 'onTap()',
+  },
   template: `
-    <!-- Press feedback binds BOTH touch and mouse events on purpose. Native
-         (iOS/Android) only ever fires touch; Lynx web runs in the browser, where
-         a cursor press fires mousedown/up and NEVER touchstart — so touch-only
-         bindings gave zero visual feedback on web while (bindtap) still fired the
-         action (a "the button works but doesn't react" split). Binding both makes
-         the press-and-hold identical on every platform; mouse events are inert on
-         touch devices, so there's no double-fire. The scale animation itself lives
-         in pressDown/pressRelease — see their JSDoc for why it's a CSS transition
-         (which serializes to the DOM on Lynx web) and not el.animate() (whose Web
-         Animation runs on web-core's offscreen node and never reaches the screen).
-
-         An icon-only button has no text for a screen reader to read, so with
-         an accessibility-label the whole button becomes one element that says
-         it. Without one, the label's own text is read, as a button. -->
-    <view
-      #container
-      [class]="containerClass()"
-      [attr.accessibility-element]="accessibilityLabel() ? 'true' : null"
-      [attr.accessibility-traits]="accessibilityLabel() ? 'button' : null"
-      [attr.accessibility-label]="accessibilityLabel() || null"
-      (bindtouchstart)="onPressStart()"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
-      (bindtap)="onTap()"
-    >
-      @if (look() === 'glass') {
-        <!-- The container is the button's box, and the glass fills it. Under
-             clear glass the container is the dimming layer (see dimmed).
-             The content sits in the glass, where iOS's interactive glass
-             reacts to touches on it, and is what dims when disabled, as a
-             disabled SwiftUI glass button dims its label: glass under a
-             faded parent turns into a washed-out patch on iOS. -->
-        <blur-view
-          ui-glass
-          [variant]="variant() === 'glass-clear' ? 'clear' : 'regular'"
-          material="thin"
-          [tint]="
-            variant() === 'glass-prominent' ? 'var(--glass-tint)' : undefined
-          "
-          [interactive]="interactive()"
-          [class]="glassClass()"
-        >
-          <view [class]="glassContentClass()">
-            <ng-container [ngTemplateOutlet]="content" />
-          </view>
-        </blur-view>
-      } @else {
-        @if (stateLayerClass(); as layer) {
-          <view [class]="layer"></view>
-        }
-        <ng-container [ngTemplateOutlet]="content" />
+    @if (look() === 'glass') {
+      <!-- The host is the button's box, and the glass fills it. Under
+           clear glass the host is the dimming layer (see dimmed).
+           The content sits in the glass, where iOS's interactive glass
+           reacts to touches on it, and is what dims when disabled, as a
+           disabled SwiftUI glass button dims its label: glass under a
+           faded parent turns into a washed-out patch on iOS. -->
+      <blur-view
+        ui-glass
+        [variant]="variant() === 'glass-clear' ? 'clear' : 'regular'"
+        material="thin"
+        [tint]="
+          variant() === 'glass-prominent' ? 'var(--glass-tint)' : undefined
+        "
+        [interactive]="interactive()"
+        [class]="glassClass()"
+      >
+        <view [class]="glassContentClass()">
+          <ng-container [ngTemplateOutlet]="content" />
+        </view>
+      </blur-view>
+    } @else {
+      @if (stateLayerClass(); as layer) {
+        <view [class]="layer"></view>
       }
-    </view>
+      <ng-container [ngTemplateOutlet]="content" />
+    }
 
     <!-- One copy of the content, for whichever form the button takes: Angular
          projects content once, so it can't be in both branches above.
@@ -340,13 +345,13 @@ export class UiButton {
 
   readonly pressed = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
   /**
    * A `<ui-icon>` projected into the button, which sits before the label, or
    * after it when it's marked `trailing`.
    */
   readonly projectedIcon = contentChild(iconType());
 
+  readonly #host = inject(ElementRef).nativeElement;
   readonly #settings = inject(LynxAccessibilitySettings);
   readonly #design = injectGlassDesign();
   readonly #systemDrawsGlass = injectSystemDrawsGlass();
@@ -417,7 +422,7 @@ export class UiButton {
   /**
    * Clear glass sits on a dark layer at about a third, so its white label
    * stays legible over bright photos and video: Apple's rule for clear
-   * glass. The layer is the container, under the glass.
+   * glass. The layer is the host, under the glass.
    */
   readonly #dimmed = computed(
     () => this.variant() === 'glass-clear' && this.#seeThrough(),
@@ -534,9 +539,9 @@ export class UiButton {
     this.pressing.set(true);
     if (this.#feedback() !== 'scale') return;
     // pressDown/pressRelease drive el.setStyle() based CSS transitions on the
-    // container ref (see pressDown for why it isn't el.animate()).
+    // host (see pressDown for why it isn't el.animate()).
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressDown(this.#host);
   }
 
   protected onPressEnd(): void {
@@ -560,6 +565,6 @@ export class UiButton {
     this.pressing.set(false);
     if (this.#feedback() !== 'scale') return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 }

package/dist/ui/components/button-group/button-group.test.ts

@@ -61,6 +61,18 @@ class ButtonGroupHost {
   readonly presses: string[] = [];
 }
 
+@Component({
+  imports: [UiButtonGroup, UiButtonGroupItem, UiIcon],
+  template: `
+    <ui-button-group size="icon">
+      <ui-button-group-item accessibility-label="Copy">
+        <ui-icon name="copy" />
+      </ui-button-group-item>
+    </ui-button-group>
+  `,
+})
+class StaticLabelHost {}
+
 /** Accessibility settings a test can change, as the host app would. */
 const settings = {
   reduceMotion: signal(false),
@@ -87,16 +99,15 @@ const renderGroup = async (
     ...result,
     host: result.componentRef.instance as ButtonGroupHost,
     /**
-     * The group's own box, around the items' hosts: the bar of the solid
+     * The group's box, its host, around the items: the bar of the solid
      * variants, Material's connected group, or the glass's frame.
      */
     group: (): HTMLElement => {
-      const parent =
-        result.getByText('Paste').parentElement!.parentElement!.parentElement!;
+      const parent = result.getByText('Paste').parentElement!.parentElement!;
       return parent.localName === 'blur-view' ? parent.parentElement! : parent;
     },
     glass: () => result.container.querySelector<HTMLElement>('blur-view')!,
-    // An item's view (the one that takes presses) holds its label.
+    // An item (its host, which takes presses) holds its label.
     item: (label: string) => result.getByText(label).parentElement!,
     icon: () => result.container.querySelector('svg')!,
     update: async (change: () => void) => {
@@ -141,6 +152,28 @@ afterEach(() => {
 });
 
 describe('UiButtonGroup', () => {
+  // Angular gives a component's host every static attribute written on it,
+  // so a group or item that also styled a view inside its host applied the
+  // class twice, and the label named two elements (issue #181).
+  it('puts a class written on the group or an item on that one element', async () => {
+    const { container, group, item } = await renderGroup();
+    expect([...container.querySelectorAll('.w-full')]).toEqual([group()]);
+    expect([...container.querySelectorAll('.flex-1')]).toEqual([item('Copy')]);
+  });
+
+  it('names one element with an accessibility label written on an item', async () => {
+    vi.stubGlobal('SystemInfo', undefined);
+    const { container, getAllByAccessibilityLabel } = await render(
+      StaticLabelHost,
+      {
+        providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
+      },
+    );
+    expect(getAllByAccessibilityLabel('Copy')).toEqual([
+      container.querySelector('.h-10'),
+    ]);
+  });
+
   it('lays its items out in a row, or in a column when vertical', async () => {
     const { host, group } = await renderGroup();
     expect(group().classList).toContain('flex-row');

package/dist/ui/components/button-group/button-group.ts

@@ -1,7 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
@@ -11,7 +11,6 @@ import {
   input,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
 import { cva, type VariantProps } from 'class-variance-authority';
@@ -174,28 +173,37 @@ const groupIconColor = () => inject(UiButtonGroup).foreground;
   // Icons projected into the items inject this: they're declared inside the
   // group, so the group's element injector is one of theirs.
   providers: [{ provide: UI_ICON_COLOR, useFactory: groupIconColor }],
+  // The group and each item are their host elements, styled through `host`,
+  // rather than a view inside the host. Angular gives a component's host
+  // every static attribute the app writes on it, so `<ui-button-group
+  // class="mt-4">` puts `mt-4` on the host whatever the component does with
+  // its `class` input: with a styled view inside as well, the margin applied
+  // twice. On the host alone, a class also acts where the group sits in its
+  // parent's layout (`w-full`), and an item's accessibility-label names one
+  // element.
+  //
+  // Under glass the host is the frame: the group's box and, under clear
+  // glass, its dimming layer, in the glass's shape. Before iOS 26 the glass
+  // is the thin material, as the buttons' is.
+  host: {
+    '[class]': "look() === 'glass' ? frameClass() : containerClass()",
+    '[style.border-radius.px]': "look() === 'glass' ? cornerRadius() : null",
+  },
   template: `
     @if (look() === 'glass') {
-      <!-- The frame is the group's box and, under clear glass, its dimming
-           layer, in the glass's shape. Before iOS 26 the glass is the thin
-           material, as the buttons' is. -->
-      <view [class]="frameClass()" [style.border-radius.px]="cornerRadius()">
-        <blur-view
-          ui-glass
-          [shape]="capsule() ? 'capsule' : 'rounded'"
-          [radius]="radius()"
-          [variant]="variant() === 'glass-clear' ? 'clear' : 'regular'"
-          material="thin"
-          [interactive]="interactive()"
-          [class]="glassClass()"
-        >
-          <ng-container [ngTemplateOutlet]="items" />
-        </blur-view>
-      </view>
-    } @else {
-      <view [class]="containerClass()">
+      <blur-view
+        ui-glass
+        [shape]="capsule() ? 'capsule' : 'rounded'"
+        [radius]="radius()"
+        [variant]="variant() === 'glass-clear' ? 'clear' : 'regular'"
+        material="thin"
+        [interactive]="interactive()"
+        [class]="glassClass()"
+      >
         <ng-container [ngTemplateOutlet]="items" />
-      </view>
+      </blur-view>
+    } @else {
+      <ng-container [ngTemplateOutlet]="items" />
     }
 
     <!-- One copy of the items, for whichever form the group takes: Angular
@@ -356,34 +364,35 @@ export class UiButtonGroup {
   selector: 'ui-button-group-item',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The accessibility attributes are attribute bindings: a property binding
+  // on a component's host is checked against the DOM schema, which has no
+  // `accessibility-label`.
+  host: {
+    '[class]': 'containerClass()',
+    '[style]': 'cornerStyle()',
+    '[attr.accessibility-element]': "accessibilityLabel() ? 'true' : null",
+    '[attr.accessibility-traits]': "accessibilityLabel() ? 'button' : null",
+    '[attr.accessibility-label]': 'accessibilityLabel() || null',
+    '(bindtouchstart)': 'onPressStart()',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart()',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPressCancel()',
+    '(bindtap)': 'onTap()',
+  },
   template: `
-    <view
-      #container
-      [class]="containerClass()"
-      [style]="cornerStyle()"
-      [attr.accessibility-element]="accessibilityLabel() ? 'true' : null"
-      [attr.accessibility-traits]="accessibilityLabel() ? 'button' : null"
-      [attr.accessibility-label]="accessibilityLabel() || null"
-      (bindtouchstart)="onPressStart()"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
-      (bindtap)="onTap()"
-    >
-      @if (highlightClass(); as highlight) {
-        <view [class]="highlight" [style.border-radius.px]="radius()"></view>
-      }
-      <ng-content select="ui-icon" />
-      @if (showLabel()) {
-        <text
-          [attr.accessibility-traits]="accessibilityLabel() ? null : 'button'"
-          [class]="labelClass()"
-          ><ng-content
-        /></text>
-      }
-    </view>
+    @if (highlightClass(); as highlight) {
+      <view [class]="highlight" [style.border-radius.px]="radius()"></view>
+    }
+    <ng-content select="ui-icon" />
+    @if (showLabel()) {
+      <text
+        [attr.accessibility-traits]="accessibilityLabel() ? null : 'button'"
+        [class]="labelClass()"
+        ><ng-content
+      /></text>
+    }
   `,
 })
 export class UiButtonGroupItem {
@@ -402,7 +411,7 @@ export class UiButtonGroupItem {
 
   readonly pressed = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   /** A `<ui-icon>` projected into the item, which sits before the label. */
   readonly projectedIcon = contentChild(iconType());
   #pressAnim?: AnimationHandle;
@@ -531,7 +540,7 @@ export class UiButtonGroupItem {
     if (!this.#scales()) return;
     // See UiButton: press feedback is an el.setStyle()-driven CSS transition.
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressDown(this.#host);
   }
 
   protected onPressEnd(): void {
@@ -562,6 +571,6 @@ export class UiButtonGroupItem {
     this.pressing.set(false);
     if (!this.#scales()) return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 }

package/dist/ui/components/card/card.test.ts

@@ -46,9 +46,19 @@ class CardHost {
 })
 class BarePressableHost {}
 
+@Component({
+  imports: [UiCardContent, UiCardTitle, LYNX_ELEMENTS],
+  template: `
+    <ui-card-content class="pt-6"><text>Body</text></ui-card-content>
+    <ui-card-content class="p-2"><text>Tight</text></ui-card-content>
+    <ui-card-title class="mb-2">Title</ui-card-title>
+  `,
+})
+class StaticClassHost {}
+
 /**
- * The card's own view. Each component's host element renders as a view too,
- * so it's found by the card's class rather than by being the first.
+ * The card: its host, found by the card's class rather than by being the
+ * first view (the test host renders as a view too).
  */
 const cardView = (container: Element) => container.querySelector('.bg-card')!;
 
@@ -88,6 +98,29 @@ describe('UiCard', () => {
     expect(getByText('Desc').getAttribute('class')).toContain('italic');
   });
 
+  // Angular gives a component's host every static attribute written on it,
+  // so a part that also styled a view inside its host applied the class
+  // twice: double the padding (issue #181).
+  it('puts a class written on a part on that one element', async () => {
+    const { container, getByText } = await render(StaticClassHost);
+    expect(container.querySelectorAll('.pt-6')).toHaveLength(1);
+    expect(container.querySelectorAll('.mb-2')).toHaveLength(1);
+    // The title is a single <text>, with the class.
+    expect(getByText('Title').tagName.toLowerCase()).toBe('text');
+    expect(getByText('Title').getAttribute('class')).toContain('mb-2');
+  });
+
+  it("lets a part's class override its own", async () => {
+    const { getByText } = await render(StaticClassHost);
+    const tight = getByText('Tight').parentElement!;
+    expect(tight.getAttribute('class')).toContain('p-2');
+    expect(tight.getAttribute('class')).not.toContain('p-6');
+    const body = getByText('Body').parentElement!;
+    expect(body.getAttribute('class')).toContain('p-6');
+    expect(body.getAttribute('class')).toContain('pt-6');
+    expect(body.getAttribute('class')).not.toContain('pt-0');
+  });
+
   it("doesn't respond to presses unless it's pressable", async () => {
     const { container } = await render(CardHost);
     const view = cardView(container);

package/dist/ui/components/card/card.ts

@@ -1,13 +1,13 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
+  inject,
   input,
-  viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { registerHostElement } from '@blotch/angular-lynx';
 
 import {
   type AnimationHandle,
@@ -17,25 +17,29 @@ import {
 } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
+/**
+ * Each part is its host element, styled through `host`, rather than a view
+ * (or text) inside the host. Angular gives a component's host every static
+ * attribute the app writes on it, so `<ui-card-content class="pt-6">` puts
+ * `pt-6` on the host whatever the component does with its `class` input: with
+ * a styled view inside as well, the padding applied twice. On the host alone,
+ * a class also acts where the part sits in its parent's layout (`flex-1`,
+ * margins). The title and description are text, so their hosts are `<text>`
+ * elements (registerHostElement, below).
+ */
 @Component({
   selector: 'ui-card',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view
-      #container
-      [class]="containerClass()"
-      (bindtouchstart)="onPressStart()"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
-    >
-      <ng-content />
-    </view>
-  `,
+  host: {
+    '[class]': 'containerClass()',
+    '(bindtouchstart)': 'onPressStart()',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart()',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPressCancel()',
+  },
+  template: '<ng-content />',
 })
 export class UiCard {
   /**
@@ -44,7 +48,7 @@ export class UiCard {
   readonly pressable = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   #pressAnim?: AnimationHandle;
 
   protected readonly containerClass = computed(() =>
@@ -54,16 +58,13 @@ export class UiCard {
   protected onPressStart(): void {
     if (!this.pressable()) return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(
-      this.containerRef()?.nativeElement,
-      SCALE.pressDownLight,
-    );
+    this.#pressAnim = pressDown(this.#host, SCALE.pressDownLight);
   }
 
   protected onPressEnd(): void {
     if (!this.pressable()) return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onPressCancel(): void {
@@ -71,20 +72,15 @@ export class UiCard {
     // mid-press would leave the card stuck in its pressed-down state.
     if (!this.pressable()) return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 }
 
 @Component({
   selector: 'ui-card-header',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiCardHeader {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -96,10 +92,9 @@ export class UiCardHeader {
 
 @Component({
   selector: 'ui-card-title',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiCardTitle {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -109,12 +104,13 @@ export class UiCardTitle {
   );
 }
 
+registerHostElement(UiCardTitle, 'text');
+
 @Component({
   selector: 'ui-card-description',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiCardDescription {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -124,16 +120,13 @@ export class UiCardDescription {
   );
 }
 
+registerHostElement(UiCardDescription, 'text');
+
 @Component({
   selector: 'ui-card-content',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiCardContent {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -145,14 +138,9 @@ export class UiCardContent {
 
 @Component({
   selector: 'ui-card-footer',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiCardFooter {
   readonly userClass = input<string>('', { alias: 'class' });