@blotch/dolan 22.2.6 → 22.2.7

package/dist/ui/components/tabs/tabs.ts

@@ -1,6 +1,6 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   computed,
   contentChildren,
@@ -10,7 +10,6 @@ import {
   model,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
 
@@ -53,13 +52,16 @@ const tabsListHost = (): SegmentedHost => inject(UiTabsList).segmentedHost;
 
 @Component({
   selector: 'ui-tabs',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  // Each part 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-tabs-content class="p-4">` puts `p-4` 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).
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiTabs {
   readonly value = model<string>('');
@@ -139,7 +141,7 @@ export class UiTabs {
  */
 @Component({
   selector: 'ui-tabs-list',
-  imports: [LYNX_ELEMENTS, UiSegmentedIndicator],
+  imports: [UiSegmentedIndicator],
   encapsulation: ViewEncapsulation.None,
   providers: [
     UiSegmentedControl,
@@ -147,17 +149,16 @@ export class UiTabs {
   ],
   // The mouse leaving the row lets go of an indicator dragged in the web
   // preview, where a drag gets no touchcancel.
+  host: {
+    'accessibility-traits': 'tabbar',
+    '[class]': 'listClass()',
+    '(bindmouseleave)': 'segmentedControl.cancel()',
+  },
   template: `
-    <view
-      accessibility-traits="tabbar"
-      [class]="listClass()"
-      (bindmouseleave)="segmentedControl.cancel()"
-    >
-      @if (segmentedControl.underlay()) {
-        <ui-segmented-indicator />
-      }
-      <ng-content />
-    </view>
+    @if (segmentedControl.underlay()) {
+      <ui-segmented-indicator />
+    }
+    <ng-content />
   `,
 })
 export class UiTabsList {
@@ -208,9 +209,19 @@ export class UiTabsList {
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class]': 'hostClass()',
+    '[class]': 'triggerClass()',
+    '[style]': 'triggerStyle()',
     // The segmented control places its indicator from each tab's width.
     '(bindlayoutchange)': 'measure($event)',
+    '(bindtap)': 'onTap()',
+    '(bindtouchstart)': 'press($event)',
+    '(bindtouchmove)': 'move($event)',
+    '(bindtouchend)': 'release()',
+    '(bindtouchcancel)': 'cancel()',
+    '(bindmousedown)': 'press($event)',
+    '(bindmousemove)': 'move($event)',
+    '(bindmouseup)': 'release()',
+    '(bindmouseleave)': 'leave()',
   },
   // The label is the accessibility element, a button (a tab, in the list's
   // tab bar) named by its own text. A view would need a label of its own.
@@ -218,30 +229,15 @@ export class UiTabsList {
   // lynxAccessibilityTraits adds the trait to `button` on iOS, and leaves
   // Android, which reads one trait, with `button`.
   template: `
-    <view
-      #trigger
-      [class]="triggerClass()"
-      [style]="triggerStyle()"
-      (bindtap)="onTap()"
-      (bindtouchstart)="press($event)"
-      (bindtouchmove)="move($event)"
-      (bindtouchend)="release()"
-      (bindtouchcancel)="cancel()"
-      (bindmousedown)="press($event)"
-      (bindmousemove)="move($event)"
-      (bindmouseup)="release()"
-      (bindmouseleave)="leave()"
-    >
-      @if (stateLayerClass(); as stateLayer) {
-        <view [class]="stateLayer"></view>
-      }
-      <text
-        accessibility-traits="button"
-        [lynxAccessibilityTraits]="{ selected: isActive() }"
-        [class]="textClass()"
-        ><ng-content
-      /></text>
-    </view>
+    @if (stateLayerClass(); as stateLayer) {
+      <view [class]="stateLayer"></view>
+    }
+    <text
+      accessibility-traits="button"
+      [lynxAccessibilityTraits]="{ selected: isActive() }"
+      [class]="textClass()"
+      ><ng-content
+    /></text>
   `,
 })
 export class UiTabsTrigger {
@@ -254,7 +250,7 @@ export class UiTabsTrigger {
   readonly triggerValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly triggerRef = viewChild.required<ElementRef>('trigger');
+  readonly #host = inject(ElementRef).nativeElement;
   #anim?: AnimationHandle;
   #previousActive?: boolean;
 
@@ -270,16 +266,6 @@ export class UiTabsTrigger {
     this.#segmented?.enabled() ? this.#segmented : null,
   );
 
-  /**
-   * 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 trigger, so
-   * the two are merged here: `class="flex-[2]"` makes a wider tab.
-   */
-  protected readonly hostClass = computed(() => {
-    const segment = this.#segment();
-    return segment ? cn(segment.segmentHostClass, this.userClass()) : '';
-  });
-
   protected readonly triggerStyle = computed(
     () => this.#segment()?.segmentStyle(this.triggerValue()) ?? null,
   );
@@ -296,7 +282,7 @@ export class UiTabsTrigger {
   /** Animates the trigger's background when it's selected or deselected. */
   protected readonly animatingSelection = effect(() => {
     const active = this.isActive();
-    const el = this.triggerRef().nativeElement;
+    const el = this.#host;
     const wasActive = this.#previousActive;
     this.#previousActive = active;
     // The first run only records the starting state, and only a change has
@@ -348,8 +334,12 @@ export class UiTabsTrigger {
     const segment = this.#segment();
     if (segment) {
       // The list provides the segmented control, so a segment is in one.
+      // 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
+      // tab.
       const place = segmentPlace(this.#list!.triggers(), this);
       return cn(
+        segment.segmentHostClass,
         segment.segmentClass(this.triggerValue(), place),
         this.userClass(),
       );
@@ -420,34 +410,28 @@ export class UiTabsTrigger {
 
 @Component({
   selector: 'ui-tabs-content',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   host: {
+    '[class]': 'contentClass()',
     // Hide the WHOLE host when inactive so it reserves no layout space.
     //
     // The caller writes `class="flex-1"` on <ui-tabs-content>, and Angular
     // applies that to the host element. All three content hosts live as siblings
     // inside the flex-col <ui-tabs>, so three flex-1 hosts each grow to fill a
     // third of the available height — pushing each panel lower than the last
-    // (the "Done tab starts at the very bottom" stacking). Hiding only the inner
-    // view doesn't help: the flex-1 host still claims its third.
+    // (the "Done tab starts at the very bottom" stacking).
     //
     // Toggling the host's own `display` collapses inactive hosts to 0×0 (Lynx
     // `display: none`) so they claim no space at all, while the single active
-    // host keeps its flex-1 and fills the tabs area. `flex-direction: column`
-    // makes the host lay its content out vertically when shown.
+    // host keeps its flex-1 and fills the tabs area. The inline display wins
+    // over the `flex` in the host's classes.
     '[style.display]': "isActive() ? 'flex' : 'none'",
-    '[style.flexDirection]': "'column'",
     // A hidden panel's 0×0 doesn't stop iOS drawing its text: each line is
     // laid out at 0×0 too, and its glyphs spill out from the panel's corner,
     // over the tab list. Clipping the hidden host to its 0×0 hides them.
     '[style.overflow]': "isActive() ? null : 'hidden'",
   },
-  template: `
-    <view #content [class]="contentClass()">
-      <ng-content />
-    </view>
-  `,
+  template: '<ng-content />',
 })
 export class UiTabsContent {
   readonly #tabs = inject(UiTabs);
@@ -456,7 +440,7 @@ export class UiTabsContent {
   readonly contentValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly contentRef = viewChild.required<ElementRef>('content');
+  readonly #host = inject(ElementRef).nativeElement;
   #anim?: AnimationHandle;
   #isFirstRender = true;
 
@@ -476,8 +460,7 @@ export class UiTabsContent {
    * that vanished and never came back. Keeping every panel mounted and only
    * toggling `display` never destroys or re-parents anything: inactive panels
    * collapse to 0×0 (Lynx `display: none`) so they take no space, and the
-   * active one simply reappears in place. That also means the content view
-   * always exists, so `contentRef` is required.
+   * active one simply reappears in place.
    */
   protected readonly revealing = effect(() => {
     if (!this.isActive()) return;
@@ -485,7 +468,7 @@ export class UiTabsContent {
     setTimeout(() => {
       // Under Reduce Motion the panel just appears.
       if (this.#settings.reduceMotion()) return;
-      const el = this.contentRef().nativeElement;
+      const el = this.#host;
 
       this.#anim?.cancel();
 
@@ -504,8 +487,8 @@ export class UiTabsContent {
     }, 0);
   });
 
-  // Visibility is controlled at the host (see `host` block); the inner view is
-  // always a normal flex column that fills the shown host.
+  // Visibility is controlled by the host's inline display (see `host`); its
+  // classes make it a flex column when shown.
   protected readonly contentClass = computed(() =>
     cn('mt-2 flex-col flex', this.userClass()),
   );

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

@@ -56,7 +56,7 @@ const renderTextarea = async () => {
     ...result,
     host: result.componentRef.instance as TextareaHost,
     field: () => result.container.querySelector('textarea')!,
-    // The field's own column; the host element renders as a view too.
+    // The field's column: its host.
     column: () => result.container.querySelector('.flex-col')!,
     wrapper: () => result.container.querySelector('.bg-muted') as HTMLElement,
     // The layer that draws the focus ring around the field.
@@ -84,6 +84,16 @@ describe('UiTextarea', () => {
     expect(queryByText('Add a note')).toBeNull();
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the class styled the column twice, and the placeholder made
+  // a second match for getByPlaceholderText.
+  it('puts its class and placeholder on one element each', async () => {
+    const { container, field, getAllByPlaceholderText } =
+      await renderTextarea();
+    expect(container.querySelectorAll('.w-full')).toHaveLength(1);
+    expect(getAllByPlaceholderText('Add a note')).toEqual([field()]);
+  });
+
   it('shows its label', async () => {
     const { host, getByText } = await renderTextarea();
     host.label.set('Notes');

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();