@blotch/dolan 22.2.6 → 22.2.7

package/dist/ui/components/alert/alert.ts

@@ -1,11 +1,11 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   computed,
   effect,
+  inject,
   input,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { cva, type VariantProps } from 'class-variance-authority';
@@ -53,21 +53,30 @@ export type AlertVariant = NonNullable<
   VariantProps<typeof alertVariants>['variant']
 >;
 
+/**
+ * The alert is its host, styled through `host`. Angular gives a component's
+ * host every static attribute the app writes on it, so a class on <ui-alert>
+ * lands on the host whatever the component does: with a styled view inside as
+ * well, the padding and border applied twice. Its title lands there too, and
+ * goes: it's shown in a <text>, and on the web preview a `title` attribute is
+ * a tooltip (and a second match for getByTitle).
+ */
 @Component({
   selector: 'ui-alert',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.title]': 'null',
+  },
   template: `
-    <view #container [class]="containerClass()">
-      @if (title()) {
-        <text [class]="titleClass()">{{ title() }}</text>
-      }
-      @if (description()) {
-        <text [class]="descriptionClass()">{{ description() }}</text>
-      }
-      <ng-content />
-    </view>
+    @if (title()) {
+      <text [class]="titleClass()">{{ title() }}</text>
+    }
+    @if (description()) {
+      <text [class]="descriptionClass()">{{ description() }}</text>
+    }
+    <ng-content />
   `,
 })
 export class UiAlert {
@@ -76,7 +85,7 @@ export class UiAlert {
   readonly description = input<string>('');
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild.required<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
 
   /**
    * Reveals the alert with a subtle entrance on first render. A field rather
@@ -85,7 +94,7 @@ export class UiAlert {
    * as uncovered.
    */
   protected readonly entrance = effect(() => {
-    revealIn(this.containerRef().nativeElement, { fromY: 4 });
+    revealIn(this.#host, { fromY: 4 });
   });
 
   protected readonly containerClass = computed(() =>

package/dist/ui/components/alert-dialog/alert-dialog.test.ts

@@ -139,7 +139,6 @@ describe('UiAlertDialog', () => {
     expect(getByText('Sure?').classList).toContain('text-xl');
     expect(getByText('Cannot undo').classList).toContain('text-sm');
     expect(getByText('Cannot undo').classList).toContain('italic');
-    // Each part's own view, not its host element, which keeps the bare class.
     const header = container.querySelector('.flex-col.gap-2');
     expect(header?.classList).not.toContain('gap-1.5');
     const footer = container.querySelector('.pt-4');
@@ -147,6 +146,23 @@ describe('UiAlertDialog', () => {
     expect(footer?.classList).not.toContain('justify-end');
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181), so each class also styled a host: the dialog's in the page,
+  // where it is written, and each part's around its own view or text.
+  it('puts each class on one element: the panel, or the part', async () => {
+    const { container, getByText, panel } = await renderAlertDialog();
+    expect([...container.querySelectorAll('.max-w-sm')]).toEqual([panel()]);
+    // The header's: the footer has a gap-2 of its own.
+    expect(container.querySelectorAll('.flex-col.gap-2')).toHaveLength(1);
+    expect(container.querySelectorAll('.justify-start')).toHaveLength(1);
+    expect([...container.querySelectorAll('.text-xl')]).toEqual([
+      getByText('Sure?'),
+    ]);
+    expect([...container.querySelectorAll('.italic')]).toEqual([
+      getByText('Cannot undo'),
+    ]);
+  });
+
   it('stays hidden until it is opened', async () => {
     const { host, overlay, panel } = await renderAlertDialog();
     await after(CLOSED);
@@ -793,7 +809,6 @@ it("draws an alert dialog's parts in the default look outside one", async () =>
   expect(getByText('Alone').classList).toContain('text-lg');
   expect(getByText('Outside a dialog').classList).toContain('text-sm');
   expect(getByText('Footer').parentElement!.classList).toContain('pt-4');
-  expect(getByText('Alone').parentElement!.parentElement!.classList).toContain(
-    'gap-1.5',
-  );
+  // The title is the header's own child: the header is its host.
+  expect(getByText('Alone').parentElement!.classList).toContain('gap-1.5');
 });

package/dist/ui/components/alert-dialog/alert-dialog.ts

@@ -15,7 +15,11 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
+import {
+  LYNX_ELEMENTS,
+  LynxAccessibilitySettings,
+  registerHostElement,
+} from '@blotch/angular-lynx';
 
 import {
   type AnimationHandle,
@@ -173,6 +177,14 @@ const METRICS: Readonly<Record<GlassDesign, AlertMetrics>> = {
   selector: 'ui-alert-dialog',
   imports: [LYNX_ELEMENTS, NgTemplateOutlet, UiGlass],
   encapsulation: ViewEncapsulation.None,
+  // The dialog's class is its panel's, inside the overlay. Angular also gives
+  // the host every static attribute the app writes on <ui-alert-dialog>, and
+  // the host sits in the page's layout where the dialog is written, so a
+  // `class="p-8"` padded the page there too. The host drops it. The parts
+  // below are their host elements for the same reason: a class on a part
+  // lands on its host anyway, so a view or text inside it styled with the
+  // same class applied it twice.
+  host: { '[attr.class]': 'null' },
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
       <!-- The overlay sizes only its first child, to the screen. With the
@@ -473,13 +485,9 @@ const injectAlertLook = () => {
 
 @Component({
   selector: 'ui-alert-dialog-header',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiAlertDialogHeader {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -507,9 +515,9 @@ export class UiAlertDialogHeader {
 
 @Component({
   selector: 'ui-alert-dialog-title',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiAlertDialogTitle {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -534,11 +542,13 @@ export class UiAlertDialogTitle {
   );
 }
 
+registerHostElement(UiAlertDialogTitle, 'text');
+
 @Component({
   selector: 'ui-alert-dialog-description',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiAlertDialogDescription {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -562,6 +572,8 @@ export class UiAlertDialogDescription {
   );
 }
 
+registerHostElement(UiAlertDialogDescription, 'text');
+
 /**
  * `UiAlertDialogAction`, for `contentChildren()`. A call rather than the
  * class itself: the query's metadata keeps an arrow function of its own for
@@ -574,16 +586,15 @@ const actionType = () => UiAlertDialogAction;
   selector: 'ui-alert-dialog-footer',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  host: { '[class]': 'containerClass()' },
   template: `
-    <view [class]="containerClass()">
-      @if (separated()) {
-        <!-- The hairline over the buttons of Apple's alerts before iOS 26. -->
-        <view
-          class="h-[0.5px] w-full bg-glass-foreground opacity-20 absolute left-0 top-0"
-        ></view>
-      }
-      <ng-content />
-    </view>
+    @if (separated()) {
+      <!-- The hairline over the buttons of Apple's alerts before iOS 26. -->
+      <view
+        class="h-[0.5px] w-full bg-glass-foreground opacity-20 absolute left-0 top-0"
+      ></view>
+    }
+    <ng-content />
   `,
 })
 export class UiAlertDialogFooter {

package/dist/ui/components/aspect-ratio/aspect-ratio.test.ts

@@ -1,10 +1,46 @@
+import { Component } from '@angular/core';
 import { render } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { describe, expect, it } from 'vitest';
 import { UiAspectRatio } from './aspect-ratio';
 
+@Component({
+  imports: [UiAspectRatio, LYNX_ELEMENTS],
+  template: `
+    <ui-aspect-ratio [ratio]="16 / 9" class="rounded-md">
+      <text>Media</text>
+    </ui-aspect-ratio>
+  `,
+})
+class AspectRatioHost {}
+
+@Component({
+  imports: [UiAspectRatio],
+  template: `<ui-aspect-ratio />`,
+})
+class DefaultHost {}
+
+/**
+ * The ratio the box's inline style holds. jsdom writes `aspect-ratio: 1` back
+ * as `1` or, in newer versions (an app's), as `1 / 1`.
+ */
+const ratioOf = (box: HTMLElement) =>
+  parseFloat(box.style.getPropertyValue('aspect-ratio'));
+
 describe('UiAspectRatio', () => {
   it('renders with the default 1:1 ratio', async () => {
-    const { container } = await render(UiAspectRatio);
-    expect(container).toBeTruthy();
+    const { container } = await render(DefaultHost);
+    const box = container.querySelector('.overflow-hidden') as HTMLElement;
+    expect(ratioOf(box)).toBe(1);
+  });
+
+  // A class on a component lands on its host too (issue #181): the host is
+  // the box, so the class styles one element, the one with the ratio.
+  it('is one box, with the ratio and the class written on it', async () => {
+    const { container, getByText } = await render(AspectRatioHost);
+    const box = getByText('Media').parentElement as HTMLElement;
+    expect([...container.querySelectorAll('.rounded-md')]).toEqual([box]);
+    expect(box.classList).toContain('overflow-hidden');
+    expect(ratioOf(box)).toBe(16 / 9);
   });
 });

package/dist/ui/components/aspect-ratio/aspect-ratio.ts

@@ -1,18 +1,21 @@
 import { Component, ViewEncapsulation, computed, input } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
 
+/**
+ * The box is the host, styled through `host`. Angular gives a component's
+ * host every static attribute the app writes on it, so a class on
+ * <ui-aspect-ratio> lands on the host whatever the component does: with a
+ * styled view inside as well, a margin or padding applied twice.
+ */
 @Component({
   selector: 'ui-aspect-ratio',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()" [style]="containerStyle()">
-      <ng-content />
-    </view>
-  `,
+  host: {
+    '[class]': 'containerClass()',
+    '[style]': 'containerStyle()',
+  },
+  template: '<ng-content />',
 })
 export class UiAspectRatio {
   readonly ratio = input(1);

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

@@ -41,6 +41,13 @@ describe('UiAvatar', () => {
     expect(avatar().classList).toContain('border');
   });
 
+  // A class on a component lands on its host too (issue #181): the host is
+  // the circle, so the border is drawn once.
+  it('puts its class on one element, the circle', async () => {
+    const { container, avatar } = await renderAvatar();
+    expect([...container.querySelectorAll('.border')]).toEqual([avatar()]);
+  });
+
   it('covers the image with a placeholder while it loads', async () => {
     const { image, skeleton, initials } = await renderAvatar(
       'https://example.com/avatar.png',

package/dist/ui/components/avatar/avatar.ts

@@ -10,42 +10,47 @@ import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { UiSkeleton } from '../skeleton/skeleton';
 import { cn } from '../../utils/cn';
 
+/**
+ * The avatar's circle is its host, styled through `host`, with the image or
+ * initials inside. Angular gives a component's host every static attribute the
+ * app writes on it, so a class on <ui-avatar> lands on the host whatever the
+ * component does: with a styled circle inside as well, a margin or border
+ * applied twice.
+ */
 @Component({
   selector: 'ui-avatar',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiSkeleton],
   encapsulation: ViewEncapsulation.None,
+  host: { '[class]': 'containerClass()' },
   template: `
-    <view [class]="containerClass()">
-      @if (src() && !errored()) {
-        <!-- The <image> stays mounted whenever src is set so its bindload /
-             binderror events can fire — an @if-swapped-out image would never
-             start loading, so the load event that reveals it would never come.
-             Native Lynx <image> renders nothing until loaded (there is no
-             broken-image glyph like the web), so while loading the box is
-             simply empty; the skeleton below sits on top of it as a placeholder.
-             onImageLoad() flips the loaded state, removing the skeleton to
-             reveal the image underneath. -->
-        <image
-          [attr.src]="src()"
-          [class]="imageClass()"
-          (bindload)="onImageLoad()"
-          (binderror)="onImageError()"
-        />
-        <!-- Overlay placeholder shown only while the image is loading. It paints
-             above the <image> because it comes later in source order (Lynx paint
-             order follows the DOM, so no z-index is needed). -->
-        @if (!loaded()) {
-          <ui-skeleton [class]="skeletonClass()" />
-        }
-      } @else {
-        <!-- Shared by the no-src case and the load-error case: initials if a
-             fallback was provided, otherwise a plain muted circle. -->
-        <view [class]="fallbackClass()">
-          <text [class]="initialsClass()">{{ fallback() }}</text>
-        </view>
+    @if (src() && !errored()) {
+      <!-- The <image> stays mounted whenever src is set so its bindload /
+           binderror events can fire — an @if-swapped-out image would never
+           start loading, so the load event that reveals it would never come.
+           Native Lynx <image> renders nothing until loaded (there is no
+           broken-image glyph like the web), so while loading the box is
+           simply empty; the skeleton below sits on top of it as a placeholder.
+           onImageLoad() flips the loaded state, removing the skeleton to
+           reveal the image underneath. -->
+      <image
+        [attr.src]="src()"
+        [class]="imageClass()"
+        (bindload)="onImageLoad()"
+        (binderror)="onImageError()"
+      />
+      <!-- Overlay placeholder shown only while the image is loading. It paints
+           above the <image> because it comes later in source order (Lynx paint
+           order follows the DOM, so no z-index is needed). -->
+      @if (!loaded()) {
+        <ui-skeleton [class]="skeletonClass()" />
       }
-    </view>
+    } @else {
+      <!-- Shared by the no-src case and the load-error case: initials if a
+           fallback was provided, otherwise a plain muted circle. -->
+      <view [class]="fallbackClass()">
+        <text [class]="initialsClass()">{{ fallback() }}</text>
+      </view>
+    }
   `,
 })
 export class UiAvatar {

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

@@ -53,6 +53,15 @@ describe('UiBadge', () => {
     expect(label.parentElement?.classList).toContain('border-border');
   });
 
+  // A class on a component lands on its host too (issue #181): the host is
+  // the pill, so the margin applies once.
+  it('puts its class on one element, the pill', async () => {
+    const { container, getByText } = await render(BadgeHost);
+    expect([...container.querySelectorAll('.ml-1')]).toEqual([
+      getByText('Status').parentElement,
+    ]);
+  });
+
   it('pops in on first render', async () => {
     const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
     const { getByText } = await render(BadgeHost);

package/dist/ui/components/badge/badge.ts

@@ -1,12 +1,12 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
   effect,
+  inject,
   input,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { cva, type VariantProps } from 'class-variance-authority';
@@ -53,16 +53,18 @@ export type BadgeVariant = NonNullable<
   VariantProps<typeof badgeVariants>['variant']
 >;
 
+/**
+ * The badge's pill is its host, styled through `host`, with its label inside.
+ * Angular gives a component's host every static attribute the app writes on
+ * it, so a class on <ui-badge> lands on the host whatever the component does:
+ * with a styled pill inside as well, a margin applied twice.
+ */
 @Component({
   selector: 'ui-badge',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view #container [class]="containerClass()">
-      <text [class]="labelClass()"><ng-content /></text>
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: `<text [class]="labelClass()"><ng-content /></text>`,
 })
 export class UiBadge {
   readonly variant = input<BadgeVariant>('default');
@@ -72,7 +74,7 @@ export class UiBadge {
   readonly animated = input(true, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild.required<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
 
   /**
    * Pops the badge in on first render, unless `animated` is off. A field
@@ -82,7 +84,7 @@ export class UiBadge {
    */
   protected readonly entrance = effect(() => {
     if (this.animated()) {
-      popIn(this.containerRef().nativeElement, { duration: 200 });
+      popIn(this.#host, { duration: 200 });
     }
   });
 

package/dist/ui/components/bottom-sheet/bottom-sheet.test.ts

@@ -132,6 +132,13 @@ describe('UiBottomSheet', () => {
     expect(panel.classList).toContain('bg-background');
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the class also styled the sheet's host, in the page.
+  it('puts its class on the panel alone', async () => {
+    const { container, panel } = await renderSheet();
+    expect([...container.querySelectorAll('.max-h-96')]).toEqual([panel]);
+  });
+
   it('fades the backdrop in and slides the panel up when opened', async () => {
     const { host, backdrop, panel } = await renderSheet();
     await openSheet(host);

package/dist/ui/components/bottom-sheet/bottom-sheet.ts

@@ -263,6 +263,11 @@ const layoutWidth = (event: unknown): number =>
   selector: 'ui-bottom-sheet',
   imports: [LYNX_ELEMENTS, UiGlass],
   encapsulation: ViewEncapsulation.None,
+  // The sheet's class is its panel's, inside the overlay. Angular also gives
+  // the host every static attribute the app writes on <ui-bottom-sheet>, and
+  // the host sits in the page's layout where the sheet is written, so a
+  // `class="px-8"` padded the page there too. The host drops it.
+  host: { '[attr.class]': 'null' },
   template: `
     <!-- Android's back button closes the sheet: while an overlay shows, it
          takes the press and fires requestclose. -->

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

@@ -77,10 +77,10 @@ const renderButton = async (
     ...result,
     host,
     /**
-     * The button's own box, the first child of its host: it takes the
-     * presses, and holds the glass on a glass variant.
+     * The button's box, its host: it takes the presses, and holds the glass
+     * on a glass variant.
      */
-    button: () => result.container.firstElementChild!.firstElementChild!,
+    button: () => result.container.firstElementChild!,
     glass: () => result.container.querySelector('blur-view')!,
     spinner: () => result.container.querySelector('svg'),
     icon: () => result.container.querySelector('svg')!,
@@ -92,6 +92,16 @@ const renderButton = async (
   };
 };
 
+@Component({
+  imports: [UiButton, UiIcon],
+  template: `
+    <ui-button size="icon" accessibility-label="Search" class="mt-2">
+      <ui-icon name="search" />
+    </ui-button>
+  `,
+})
+class StaticAttributesHost {}
+
 const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
 const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
 const ANDROID = { platform: 'Android', osVersion: '15' };
@@ -118,6 +128,22 @@ afterEach(() => {
 });
 
 describe('UiButton', () => {
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the class styled a box inside the host as well, and the
+  // label named two elements.
+  it('puts its class and accessibility label on one element, the button', async () => {
+    vi.stubGlobal('SystemInfo', undefined);
+    const { container, getAllByAccessibilityLabel } = await render(
+      StaticAttributesHost,
+      {
+        providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
+      },
+    );
+    const button = container.firstElementChild!;
+    expect([...container.querySelectorAll('.mt-2')]).toEqual([button]);
+    expect(getAllByAccessibilityLabel('Search')).toEqual([button]);
+  });
+
   it('renders its label with the classes for its variant and size', async () => {
     const { button, getByText } = await renderButton();
     expect(button().classList).toContain('bg-primary');