@blotch/dolan 22.2.6 → 22.2.8

package/dist/ui/components/textarea/textarea.ts

@@ -1,15 +1,15 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
   effect,
+  inject,
   input,
   model,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import { type FormValueControl } from '@angular/forms/signals';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
@@ -19,75 +19,82 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-textarea',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The host is the field's column. Angular gives a component's host every
+  // static attribute the app writes on it, so a class on <ui-textarea> lands
+  // there whatever the component does: a column inside the host applied it
+  // twice. A placeholder lands there too, and goes: it belongs to the
+  // <textarea>, and a second element with it is a second match for
+  // getByPlaceholderText.
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.placeholder]': 'null',
+  },
   template: `
-    <view #container [class]="containerClass()">
-      @if (label()) {
-        <text [class]="labelClass()">{{ label() }}</text>
-      }
-      <!-- The min/max height lives on this wrapper, not the textarea: a native
-           Lynx textarea only auto-grows when it drives its container's height
-           (via height:100% below). Pinning min/max-height on the textarea itself
-           locks it to a fixed box that scrolls but never grows. -->
-      <view [class]="textareaWrapperClass()" [style]="wrapperStyle()">
-        <!-- Focus ring on its own overlay layer so it can fade (see input.ts for
-             the full rationale): box-shadow is animatable:no on Lynx, opacity is,
-             so we transition the layer's opacity. First child = painted behind
-             the textarea on Lynx (strict source order). Source order alone is NOT
-             enough on web: CSS paints a positioned (absolute) sibling above a
-             static one regardless of source order, so this transparent overlay
-             would swallow every tap — no focus, no typing. The textarea below
-             carries position:relative + z-index:1 so it sits above the overlay on
-             BOTH platforms (required on web). The wrapper's z-0 makes it the
-             stacking context for that z-index; without it Lynx stacks the native
-             textarea against an ancestor outside the scroll-view, so it stays
-             fixed on screen while the page scrolls. No pointer-events
-             (which errors the Lynx build). OUTSET only; Lynx doesn't render inset
-             box-shadows. -->
-        <view
-          class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
-          [style.transition]="'opacity 150ms ease'"
-          [style.box-shadow]="ringShadow()"
-          [style.opacity]="ringVisible() ? 1 : 0"
-        ></view>
-        <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
-             removes the attribute entirely; passing 'false' would set
-             disabled="false" which Lynx still treats as disabled. -->
-        <!-- [value] not [attr.value]: same reason as UiInput — routes through
-             LynxTextarea.ngOnChanges so value changes call invoke("setValue")
-             rather than the ineffective __SetAttribute path. -->
-        <!-- [attr.enable-scroll-bar]: only surface the scrollbar once maxLines is
-             set (i.e. the field can actually scroll). Native scrolling past
-             max-height works regardless; this just shows the indicator.
-             height:100% makes the textarea fill (and grow) the wrapper; the
-             pinned line-height keeps the wrapper's line math exact. -->
-        <!-- [attr.placeholder]: suppress the placeholder whenever a value is
-             present. The browser hides a placeholder under a value automatically,
-             but Lynx's iOS textarea renders the placeholder as a separate overlay
-             view that only hides on textViewDidChange — so an initial value set via
-             the setValue UIMethod leaves the placeholder stacked on top of it. Not
-             emitting the attribute when there's a value matches web semantics and
-             avoids the overlap on all platforms. -->
-        <textarea
-          [attr.placeholder]="value() ? null : placeholder()"
-          [value]="value()"
-          [attr.disabled]="disabled() || undefined"
-          [attr.enable-scroll-bar]="maxLines() != null ? 'true' : null"
-          class="text-sm text-foreground"
-          style="border: none; background: transparent; height: 100%; width: 100%; line-height: 20px; position: relative; z-index: 1;"
-          (bindinput)="onInput($any($event))"
-          (bindfocus)="onFocus()"
-          (bindblur)="onBlur()"
-        ></textarea>
-      </view>
-      @if (error()) {
-        <text [class]="errorClass()">{{ error() }}</text>
-      } @else if (helperText()) {
-        <text [class]="helperClass()">{{ helperText() }}</text>
-      }
+    @if (label()) {
+      <text [class]="labelClass()">{{ label() }}</text>
+    }
+    <!-- The min/max height lives on this wrapper, not the textarea: a native
+         Lynx textarea only auto-grows when it drives its container's height
+         (via height:100% below). Pinning min/max-height on the textarea itself
+         locks it to a fixed box that scrolls but never grows. -->
+    <view [class]="textareaWrapperClass()" [style]="wrapperStyle()">
+      <!-- Focus ring on its own overlay layer so it can fade (see input.ts for
+           the full rationale): box-shadow is animatable:no on Lynx, opacity is,
+           so we transition the layer's opacity. First child = painted behind
+           the textarea on Lynx (strict source order). Source order alone is NOT
+           enough on web: CSS paints a positioned (absolute) sibling above a
+           static one regardless of source order, so this transparent overlay
+           would swallow every tap — no focus, no typing. The textarea below
+           carries position:relative + z-index:1 so it sits above the overlay on
+           BOTH platforms (required on web). The wrapper's z-0 makes it the
+           stacking context for that z-index; without it Lynx stacks the native
+           textarea against an ancestor outside the scroll-view, so it stays
+           fixed on screen while the page scrolls. No pointer-events
+           (which errors the Lynx build). OUTSET only; Lynx doesn't render inset
+           box-shadows. -->
+      <view
+        class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
+        [style.transition]="'opacity 150ms ease'"
+        [style.box-shadow]="ringShadow()"
+        [style.opacity]="ringVisible() ? 1 : 0"
+      ></view>
+      <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
+           removes the attribute entirely; passing 'false' would set
+           disabled="false" which Lynx still treats as disabled. -->
+      <!-- [value] not [attr.value]: same reason as UiInput — routes through
+           LynxTextarea.ngOnChanges so value changes call invoke("setValue")
+           rather than the ineffective __SetAttribute path. -->
+      <!-- [attr.enable-scroll-bar]: only surface the scrollbar once maxLines is
+           set (i.e. the field can actually scroll). Native scrolling past
+           max-height works regardless; this just shows the indicator.
+           height:100% makes the textarea fill (and grow) the wrapper; the
+           pinned line-height keeps the wrapper's line math exact. -->
+      <!-- [attr.placeholder]: suppress the placeholder whenever a value is
+           present. The browser hides a placeholder under a value automatically,
+           but Lynx's iOS textarea renders the placeholder as a separate overlay
+           view that only hides on textViewDidChange — so an initial value set via
+           the setValue UIMethod leaves the placeholder stacked on top of it. Not
+           emitting the attribute when there's a value matches web semantics and
+           avoids the overlap on all platforms. -->
+      <textarea
+        [attr.placeholder]="value() ? null : placeholder()"
+        [value]="value()"
+        [attr.disabled]="disabled() || undefined"
+        [attr.enable-scroll-bar]="maxLines() != null ? 'true' : null"
+        class="text-sm text-foreground"
+        style="border: none; background: transparent; height: 100%; width: 100%; line-height: 20px; position: relative; z-index: 1;"
+        (bindinput)="onInput($any($event))"
+        (bindfocus)="onFocus()"
+        (bindblur)="onBlur()"
+      ></textarea>
     </view>
+    @if (error()) {
+      <text [class]="errorClass()">{{ error() }}</text>
+    } @else if (helperText()) {
+      <text [class]="helperClass()">{{ helperText() }}</text>
+    }
   `,
 })
 export class UiTextarea implements FormValueControl<string> {
@@ -109,7 +116,7 @@ export class UiTextarea implements FormValueControl<string> {
   readonly focused = output<void>();
   readonly blurred = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   readonly #isFocused = signal(false);
   #shakeAnim?: AnimationHandle;
   #previousError = '';
@@ -121,10 +128,9 @@ export class UiTextarea implements FormValueControl<string> {
    */
   protected readonly shakeOnError = effect(() => {
     const err = this.error();
-    const el = this.containerRef()?.nativeElement;
-    if (err && !this.#previousError && el) {
+    if (err && !this.#previousError) {
       this.#shakeAnim?.cancel();
-      this.#shakeAnim = shake(el);
+      this.#shakeAnim = shake(this.#host);
     }
     this.#previousError = err;
   });

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

@@ -71,8 +71,8 @@ class ToggleGroupHost {
 }
 
 /**
- * The view (the one that takes presses) a toggle or toggle group item
- * projects its label into.
+ * The toggle or toggle group item a label is projected into: its host, which
+ * takes the presses.
  */
 const viewOf = (label: Element) => label.parentElement!;
 
@@ -129,6 +129,14 @@ describe('UiToggle', () => {
     };
   };
 
+  // Angular gives a component's host every static attribute written on it,
+  // so a toggle that also styled a view inside its host applied the class
+  // twice (issue #181).
+  it('puts its class on one element, the toggle', async () => {
+    const { container, toggle } = await renderToggle();
+    expect([...container.querySelectorAll('.w-20')]).toEqual([toggle()]);
+  });
+
   it('renders its content unpressed, with the given class', async () => {
     const { toggle } = await renderToggle();
     expect(toggle().classList).toContain('bg-transparent');
@@ -217,6 +225,15 @@ describe('UiToggleGroup', () => {
     expect(group().classList).toContain('w-full');
   });
 
+  // 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 (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('Left')]);
+  });
+
   it('selects one item at a time, and deselects it on a second tap', async () => {
     const { host, item } = await renderGroup();
     await tap(item('Left'));
@@ -338,6 +355,18 @@ class SegmentedGroupHost {
   readonly disabled = signal(false);
 }
 
+@Component({
+  imports: [UiToggleGroup, UiToggleGroupItem, LYNX_ELEMENTS],
+  template: `
+    <ui-toggle-group variant="segmented">
+      <ui-toggle-group-item value="bold" accessibility-label="Bold"
+        ><text>B</text></ui-toggle-group-item
+      >
+    </ui-toggle-group>
+  `,
+})
+class StaticLabelHost {}
+
 /**
  * A group inside something that colors its icons, such as glass.
  */
@@ -388,18 +417,15 @@ describe('UiToggleGroup, segmented', () => {
     const result = await render(SegmentedGroupHost, {
       providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
     });
+    const track = () => viewOf(result.getByText('Day')).parentElement!;
     /**
-     * An item's own view: around its label, or around the star icon.
+     * An item, the track's flex item: around its label, or the last, around
+     * the star icon.
      */
     const item = (label: string) =>
       label === 'Star'
-        ? result.container.querySelector('svg')!.parentElement!.parentElement!
+        ? (track().lastElementChild as HTMLElement)
         : viewOf(result.getByText(label));
-    /**
-     * An item's host, the track's flex item.
-     */
-    const slot = (label: string) => item(label).parentElement!;
-    const track = () => slot('Day').parentElement!;
     /**
      * The indicator's frame, which moves between the items.
      */
@@ -407,7 +433,7 @@ describe('UiToggleGroup, segmented', () => {
       track().querySelector<HTMLElement>('.h-full .bottom-0.top-0');
     const measure = async () => {
       for (const label of ['Day', 'Week', 'Month', 'Star']) {
-        fireEvent.layoutchange(slot(label), {
+        fireEvent.layoutchange(item(label), {
           detail: { width: label === 'Month' ? 160 : 80 },
         });
       }
@@ -417,7 +443,6 @@ describe('UiToggleGroup, segmented', () => {
       ...result,
       host: result.componentRef.instance as SegmentedGroupHost,
       item,
-      slot,
       track,
       frame,
       measure,
@@ -429,13 +454,13 @@ describe('UiToggleGroup, segmented', () => {
   };
 
   it("draws the platform's segmented control, its items sharing the track", async () => {
-    const { track, slot, item, frame } = await renderSegmented();
+    const { track, item, frame } = await renderSegmented();
     expect(track().classList).toContain('rounded-full');
     expect(track().classList).toContain('bg-muted');
-    expect(slot('Day').classList).toContain('flex-1');
-    // An item's own class sizes its slot too.
-    expect(slot('Month').classList).toContain('flex-[2]');
-    expect(slot('Month').classList).not.toContain('flex-1');
+    expect(item('Day').classList).toContain('flex-1');
+    // An item's own class sizes it in the track.
+    expect(item('Month').classList).toContain('flex-[2]');
+    expect(item('Month').classList).not.toContain('flex-1');
     expect(item('Day').classList).toContain('justify-center');
     expect(frame()).not.toBeNull();
   });
@@ -448,6 +473,12 @@ describe('UiToggleGroup, segmented', () => {
     expect(host.range()).toEqual(['Day']);
   });
 
+  // The accessibility label names one element, the item (issue #181).
+  it('names one element with an accessibility label written on an item', async () => {
+    const { getAllByAccessibilityLabel } = await render(StaticLabelHost);
+    expect(getAllByAccessibilityLabel('Bold')).toHaveLength(1);
+  });
+
   it('marks the selected item selected for screen readers', async () => {
     const { getByRole, tap } = await renderSegmented();
     expect(getByRole('button', { name: 'Week', selected: true })).toBeTruthy();

package/dist/ui/components/toggle/toggle.ts

@@ -1,16 +1,16 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
   contentChildren,
+  effect,
   inject,
   input,
   model,
-  viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { type BaseLynxElement, LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import {
@@ -86,23 +86,25 @@ const itemIconColor = () => {
 
 @Component({
   selector: 'ui-toggle',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view
-      #container
-      [class]="containerClass()"
-      (bindtouchstart)="onPressStart()"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
-      (bindtap)="onTap()"
-    >
-      <ng-content />
-    </view>
-  `,
+  // Each toggle, group and item is its host element, 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-toggle
+  // class="px-6">` puts `px-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 toggle sits in its
+  // parent's layout, and an item's accessibility-label names one element.
+  host: {
+    '[class]': 'containerClass()',
+    '(bindtouchstart)': 'onPressStart()',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart()',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPressCancel()',
+    '(bindtap)': 'onTap()',
+  },
+  template: '<ng-content />',
 })
 export class UiToggle {
   readonly pressed = model(false);
@@ -111,7 +113,7 @@ export class UiToggle {
   readonly disabled = 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(() =>
@@ -126,18 +128,18 @@ export class UiToggle {
   protected onPressStart(): void {
     if (this.disabled()) return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressDown(this.#host);
   }
 
   protected onPressEnd(): void {
     if (this.disabled()) return;
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onPressCancel(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onTap(): void {
@@ -163,7 +165,7 @@ export class UiToggle {
  */
 @Component({
   selector: 'ui-toggle-group',
-  imports: [LYNX_ELEMENTS, UiSegmentedIndicator],
+  imports: [UiSegmentedIndicator],
   encapsulation: ViewEncapsulation.None,
   providers: [
     UiSegmentedControl,
@@ -171,16 +173,15 @@ export class UiToggle {
   ],
   // The mouse leaving the row lets go of an indicator dragged in the web
   // preview, where a drag gets no touchcancel.
+  host: {
+    '[class]': 'containerClass()',
+    '(bindmouseleave)': 'segmentedControl.cancel()',
+  },
   template: `
-    <view
-      [class]="containerClass()"
-      (bindmouseleave)="segmentedControl.cancel()"
-    >
-      @if (segmentedControl.underlay()) {
-        <ui-segmented-indicator />
-      }
-      <ng-content />
-    </view>
+    @if (segmentedControl.underlay()) {
+      <ui-segmented-indicator />
+    }
+    <ng-content />
   `,
 })
 export class UiToggleGroup implements SegmentedHost {
@@ -254,38 +255,32 @@ export class UiToggleGroup implements SegmentedHost {
   encapsulation: ViewEncapsulation.None,
   // Icons projected into the item inject this: they're declared inside it.
   providers: [{ provide: UI_ICON_COLOR, useFactory: itemIconColor }],
+  // 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]': 'hostClass()',
+    '[class]': 'containerClass()',
+    '[style]': 'containerStyle()',
+    '[attr.accessibility-element]': "accessibilityLabel() ? 'true' : null",
+    '[attr.accessibility-traits]': "accessibilityLabel() ? 'button' : null",
+    '[attr.accessibility-label]': 'accessibilityLabel() || null',
     // The segmented control places its indicator from each item's width.
     '(bindlayoutchange)': 'measure($event)',
+    '(bindtouchstart)': 'onPressStart($event)',
+    '(bindtouchmove)': 'onPressMove($event)',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart($event)',
+    '(bindmousemove)': 'onPressMove($event)',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPointerLeave()',
+    '(bindtap)': 'onTap()',
   },
   template: `
-    <!-- A labeled item is selected to a screen reader while pressed, which
-         iOS reads. lynxAccessibilityTraits adds the trait to button on iOS,
-         and leaves Android, which reads one trait, with button. -->
-    <view
-      #container
-      [class]="containerClass()"
-      [style]="containerStyle()"
-      [attr.accessibility-element]="accessibilityLabel() ? 'true' : null"
-      [attr.accessibility-traits]="accessibilityLabel() ? 'button' : null"
-      [attr.accessibility-label]="accessibilityLabel() || null"
-      [lynxAccessibilityTraits]="{ selected: selectedTrait() }"
-      (bindtouchstart)="onPressStart($event)"
-      (bindtouchmove)="onPressMove($event)"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart($event)"
-      (bindmousemove)="onPressMove($event)"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPointerLeave()"
-      (bindtap)="onTap()"
-    >
-      @if (stateLayerClass(); as stateLayer) {
-        <view [class]="stateLayer"></view>
-      }
-      <ng-content />
-    </view>
+    @if (stateLayerClass(); as stateLayer) {
+      <view [class]="stateLayer"></view>
+    }
+    <ng-content />
   `,
 })
 export class UiToggleGroupItem {
@@ -303,17 +298,27 @@ export class UiToggleGroupItem {
   });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  // Required: always in the template.
-  readonly containerRef = viewChild.required<ElementRef>('container');
+  readonly #host: BaseLynxElement = inject(ElementRef).nativeElement;
   #pressAnim?: AnimationHandle;
 
   protected readonly isSelected = computed(() =>
     this.#group.isSelected(this.itemValue()),
   );
-  /** Only a labeled item is an accessibility element to be `selected`. */
-  protected readonly selectedTrait = computed(
-    () => !!this.accessibilityLabel() && this.isSelected(),
-  );
+
+  /**
+   * A labeled item is `selected` to a screen reader while pressed, which iOS
+   * reads. The trait is added to the host's own `button`, as
+   * lynxAccessibilityTraits does on an element in a template: on iOS it
+   * reads `button,selected`, and Android, which reads one trait, keeps
+   * `button`. Only a labeled item is an accessibility element to be
+   * `selected`.
+   */
+  protected readonly markingSelected = effect(() => {
+    this.#host.setAccessibilityTrait(
+      'selected',
+      !!this.accessibilityLabel() && this.isSelected(),
+    );
+  });
 
   /** Whether the item is a segment of a segmented control. */
   readonly #segment = computed(() => this.#segmented.enabled());
@@ -327,20 +332,13 @@ export class UiToggleGroupItem {
     this.#segment() ? this.#segmented.iconColor(this.itemValue()) : undefined,
   );
 
-  /**
-   * A segment's host is the track's flex item, an equal share of it. Angular
-   * puts the app's static `class` on the host as well as on the item, so the
-   * two are merged here: `class="flex-[2]"` makes a wider segment.
-   */
-  protected readonly hostClass = computed(() =>
-    this.#segment()
-      ? cn(this.#segmented.segmentHostClass, this.userClass())
-      : '',
-  );
-
   protected readonly containerClass = computed(() => {
     if (this.#segment()) {
+      // The host is both the segment's slot in the track (an equal share of
+      // it) and its own view, so an app's `class="flex-[2]"` makes a wider
+      // segment.
       return cn(
+        this.#segmented.segmentHostClass,
         this.#segmented.segmentClass(
           this.itemValue(),
           segmentPlace(this.#group.items(), this),
@@ -384,7 +382,7 @@ export class UiToggleGroupItem {
       return;
     }
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(this.containerRef().nativeElement);
+    this.#pressAnim = pressDown(this.#host);
   }
 
   protected onPressMove(event: unknown): void {
@@ -398,7 +396,7 @@ export class UiToggleGroupItem {
       return;
     }
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef().nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onPressCancel(): void {
@@ -428,6 +426,6 @@ export class UiToggleGroupItem {
 
   #release(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef().nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 }

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

@@ -22,6 +22,12 @@ class TypographyHost {
     | 'muted' = 'p';
 }
 
+@Component({
+  imports: [UiText],
+  template: `<ui-text variant="muted" class="mb-4 text-center">Note</ui-text>`,
+})
+class StaticClassHost {}
+
 describe('typographyVariants', () => {
   it('returns default variant classes', () => {
     expect(typographyVariants()).toContain('text-base');
@@ -52,4 +58,14 @@ describe('UiText', () => {
     const { getByText } = await render(UiText);
     expect(getByText).toBeTruthy();
   });
+
+  // A class on a component lands on its host too (issue #181): the text is
+  // one <text>, so the class styles one element.
+  it('is one text, with the class written on it', async () => {
+    const { container, getByText } = await render(StaticClassHost);
+    const text = getByText('Note');
+    expect(text.tagName.toLowerCase()).toBe('text');
+    expect(text.classList).toContain('text-muted-foreground');
+    expect([...container.querySelectorAll('.mb-4')]).toEqual([text]);
+  });
 });

package/dist/ui/components/typography/typography.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation, computed, input } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { registerHostElement } from '@blotch/angular-lynx';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '../../utils/cn';
@@ -27,12 +27,18 @@ export type TypographyVariant = NonNullable<
   VariantProps<typeof typographyVariants>['variant']
 >;
 
+/**
+ * The text is its host, a `<text>` (registerHostElement, below), styled
+ * through `host`. Angular gives a component's host every static attribute the
+ * app writes on it, so `<ui-text class="mb-4">` puts `mb-4` on the host
+ * whatever the component does: with a styled `<text>` inside a view host as
+ * well, the margin applied twice.
+ */
 @Component({
   selector: 'ui-text',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiText {
   readonly variant = input<TypographyVariant>('p');
@@ -42,3 +48,5 @@ export class UiText {
     cn(typographyVariants({ variant: this.variant() }), this.userClass()),
   );
 }
+
+registerHostElement(UiText, 'text');