@blotch/dolan 22.2.4 → 22.2.6

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

@@ -1 +1,7 @@
-export { UiBottomSheet } from './bottom-sheet';
+export {
+  UiBottomSheet,
+  UiSheetSource,
+  type BottomSheetVariant,
+  type SheetDetent,
+  type SheetSourceTarget,
+} from './bottom-sheet';

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

@@ -33,6 +33,9 @@ import {
         <ui-icon name="search" />
       }
       Save
+      @if (withTrailingIcon()) {
+        <ui-icon name="arrow-right" trailing />
+      }
     </ui-button>
   `,
 })
@@ -43,6 +46,7 @@ class ButtonHost {
   readonly loading = signal(false);
   readonly label = signal<string | undefined>(undefined);
   readonly withIcon = signal(false);
+  readonly withTrailingIcon = signal(false);
   readonly presses = signal(0);
 }
 
@@ -80,6 +84,7 @@ const renderButton = async (
     glass: () => result.container.querySelector('blur-view')!,
     spinner: () => result.container.querySelector('svg'),
     icon: () => result.container.querySelector('svg')!,
+    icons: () => [...result.container.querySelectorAll('svg')],
     update: async (change: () => void) => {
       change();
       await waitForUpdate();
@@ -270,6 +275,35 @@ describe('UiButton', () => {
     );
   });
 
+  it('puts an icon marked trailing after the label, in the label color', async () => {
+    const { host, button, getByText, icon, update } = await renderButton();
+    await update(() => host.withTrailingIcon.set(true));
+
+    expect(button().classList).toContain('gap-2');
+    expect(icon().compareDocumentPosition(getByText('Save'))).toBe(
+      Node.DOCUMENT_POSITION_PRECEDING,
+    );
+    expect(icon().getAttribute('content')).toContain(
+      ICON_LIGHT_COLORS['primary-foreground'],
+    );
+  });
+
+  it('puts one icon on each side of the label', async () => {
+    const { host, getByText, icons, update } = await renderButton();
+    await update(() => {
+      host.withIcon.set(true);
+      host.withTrailingIcon.set(true);
+    });
+
+    const [leading, trailing] = icons();
+    expect(leading.compareDocumentPosition(getByText('Save'))).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(trailing.compareDocumentPosition(getByText('Save'))).toBe(
+      Node.DOCUMENT_POSITION_PRECEDING,
+    );
+  });
+
   it('shows only the icon in an icon size, named by its accessibility label', async () => {
     const { host, button, queryByText, getByRole, update } =
       await renderButton();
@@ -432,10 +466,11 @@ describe('UiButton glass variants', () => {
     expect(getByRole('button', { name: 'Search' })).toBe(button());
   });
 
-  it('draws the frosted material before iOS 26, and shrinks when pressed', async () => {
+  it('draws the thin material before iOS 26, and shrinks when pressed', async () => {
     const { host, button, glass, update } = await renderButton(IOS_18);
     await update(() => host.variant.set('glass'));
 
+    expect(glass().getAttribute('blur-material')).toBe('thin');
     expect(glass().getAttribute('blur-effect')).toBe('extra-light');
     fireEvent.touchstart(button());
     expect(scaleOf(button())).toBe('scale(0.97)');

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

@@ -4,6 +4,7 @@ import {
   Component,
   Injector,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChild,
   inject,
@@ -182,8 +183,8 @@ const materialButtonVariants = cva(
 
 /**
  * How a glass variant looks on this platform: `'glass'` draws it on a
- * `<blur-view ui-glass>` (Liquid Glass, or the frosted material before iOS
- * 26), `'material'` as a Material button. The solid variants are `'solid'`
+ * `<blur-view ui-glass>` (Liquid Glass, or before iOS 26 the thin material
+ * Apple used for buttons over content), `'material'` as a Material button. The solid variants are `'solid'`
  * everywhere.
  */
 type ButtonLook = 'solid' | 'glass' | 'material';
@@ -271,6 +272,7 @@ const buttonIconColor = () => inject(UiButton).foreground;
         <blur-view
           ui-glass
           [variant]="variant() === 'glass-clear' ? 'clear' : 'regular'"
+          material="thin"
           [tint]="
             variant() === 'glass-prominent' ? 'var(--glass-tint)' : undefined
           "
@@ -290,12 +292,16 @@ const buttonIconColor = () => inject(UiButton).foreground;
     </view>
 
     <!-- One copy of the content, for whichever form the button takes: Angular
-         projects content once, so it can't be in both branches above. -->
+         projects content once, so it can't be in both branches above.
+
+         The label's text has to be inside a <text>, so the content can't keep
+         its own order: an icon goes before the label, and one marked
+         trailing after it, for an icon that points onward ("Next →"). -->
     <ng-template #content>
       @if (loading()) {
         <ui-spinner [size]="spinnerSize()" [color]="foreground()" />
       } @else {
-        <ng-content select="ui-icon" />
+        <ng-content select="ui-icon:not([trailing])" />
         @if (showLabel()) {
           <text
             [attr.accessibility-traits]="accessibilityLabel() ? null : 'button'"
@@ -303,6 +309,7 @@ const buttonIconColor = () => inject(UiButton).foreground;
             ><ng-content
           /></text>
         }
+        <ng-content select="ui-icon[trailing]" />
       }
     </ng-template>
   `,
@@ -320,8 +327,8 @@ export class UiButton {
    * either).
    */
   readonly size = input<ButtonSize>('default');
-  readonly disabled = input(false);
-  readonly loading = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly loading = input(false, { transform: booleanAttribute });
   /**
    * What a screen reader says for the button. An icon-only button needs one;
    * a button with a label reads its label without it.
@@ -334,7 +341,10 @@ export class UiButton {
   readonly pressed = output<void>();
 
   readonly containerRef = viewChild<ElementRef>('container');
-  /** A `<ui-icon>` projected into the button, which sits before the label. */
+  /**
+   * 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 #settings = inject(LynxAccessibilitySettings);

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

@@ -38,6 +38,9 @@ import {
         }
         Copy
       </ui-button-group-item>
+      @if (withCut()) {
+        <ui-button-group-item>Cut</ui-button-group-item>
+      }
       <ui-button-group-item
         [disabled]="pasteDisabled()"
         (pressed)="presses.push('Paste')"
@@ -53,6 +56,7 @@ class ButtonGroupHost {
   readonly groupDisabled = signal(false);
   readonly pasteDisabled = signal(false);
   readonly withIcon = signal(false);
+  readonly withCut = signal(false);
   readonly copyLabel = signal<string | undefined>(undefined);
   readonly presses: string[] = [];
 }
@@ -103,9 +107,19 @@ const renderGroup = async (
 };
 
 const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
+const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
 const ANDROID = { platform: 'Android', osVersion: '15' };
 const WEB = { platform: 'web', osVersion: '' };
 
+/**
+ * An item's inline corner radii: top left, top right, bottom right and
+ * bottom left.
+ */
+const cornersOf = (view: HTMLElement) =>
+  ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) =>
+    view.style.getPropertyValue(`border-${corner}-radius`),
+  );
+
 /**
  * The scale an item's inline style holds, if any.
  */
@@ -328,6 +342,14 @@ describe('UiButtonGroup glass variants', () => {
     expect(glass().classList).toContain('rounded-full');
   });
 
+  it('draws the thin material before iOS 26, as the buttons do', async () => {
+    const { host, glass, update } = await renderGroup(IOS_18);
+    await update(() => host.variant.set('glass'));
+
+    expect(glass().getAttribute('blur-material')).toBe('thin');
+    expect(glass().getAttribute('blur-effect')).toBe('extra-light');
+  });
+
   it('highlights a pressed item in corners concentric with the glass', async () => {
     const { host, item, getByText, update } = await renderGroup(IOS_26);
     await update(() => host.variant.set('glass'));
@@ -426,12 +448,9 @@ describe('UiButtonGroup glass variants in Material (Android)', () => {
     });
 
     expect(glass()).toBeNull();
-    for (const name of ['gap-0.5', 'rounded-full', 'overflow-hidden']) {
-      expect(group().classList).toContain(name);
-    }
+    expect(group().classList).toContain('gap-0.5');
     expect(group().classList).not.toContain('bg-border');
     expect(item('Copy').classList).toContain('bg-secondary');
-    expect(item('Copy').classList).toContain('rounded-[8px]');
     expect(getByText('Copy').classList).toContain('text-secondary-foreground');
     expect(icon().getAttribute('content')).toContain(
       ICON_LIGHT_COLORS['secondary-foreground'],
@@ -440,14 +459,39 @@ describe('UiButtonGroup glass variants in Material (Android)', () => {
     // Clear glass is the same tonal group here.
     await update(() => host.variant.set('glass-clear'));
     expect(item('Copy').classList).toContain('bg-secondary');
+  });
 
-    // A column's ends are half an item round, or a capsule of square icons.
-    await update(() => host.orientation.set('vertical'));
+  it("rounds the group's ends on its end items, so Increase Contrast's outline follows them", async () => {
+    const { host, group, item, update } = await renderGroup(ANDROID);
+    await update(() => {
+      host.variant.set('glass');
+      settings.increaseContrast.set(true);
+    });
+    // A row is a capsule: half an item round at its ends, small between.
+    expect(cornersOf(item('Copy'))).toEqual(['20px', '8px', '8px', '20px']);
+    expect(cornersOf(item('Paste'))).toEqual(['8px', '20px', '20px', '8px']);
+    expect(item('Copy').classList).toContain('border-foreground');
+    // The group doesn't clip the ends, which would cut their outlines.
     expect(group().classList).not.toContain('rounded-full');
-    expect(group().style.borderRadius).toBe('20px');
-    await update(() => host.size.set('icon'));
-    expect(group().classList).toContain('rounded-full');
+    expect(group().classList).not.toContain('overflow-hidden');
     expect(group().style.borderRadius).toBe('');
+
+    // An item added between them has small corners all round.
+    await update(() => host.withCut.set(true));
+    expect(cornersOf(item('Cut'))).toEqual(['8px', '8px', '8px', '8px']);
+    expect(cornersOf(item('Paste'))).toEqual(['8px', '20px', '20px', '8px']);
+
+    // A column rounds its top and bottom, as much as its items are tall.
+    await update(() => {
+      host.orientation.set('vertical');
+      host.size.set('sm');
+    });
+    expect(cornersOf(item('Copy'))).toEqual(['18px', '18px', '8px', '8px']);
+    expect(cornersOf(item('Paste'))).toEqual(['8px', '8px', '18px', '18px']);
+
+    // The other looks round nothing per item.
+    await update(() => host.variant.set('default'));
+    expect(cornersOf(item('Copy'))).toEqual(['', '', '', '']);
   });
 
   it('shows the state layer on a pressed item', async () => {

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

@@ -3,8 +3,10 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChild,
+  contentChildren,
   inject,
   input,
   output,
@@ -33,10 +35,9 @@ import { UI_ICON_COLOR } from '../icon/icon-theme';
  * Per-item styling of the solid variants. Corners are intentionally left
  * square here: the group container clips the whole bar with `overflow-hidden`
  * + `rounded-md`, so only the outer edges round off while every internal seam
- * stays crisp. Rounding individual items by position would require
- * `:first-child`/`:last-child` selectors, which Lynx's CSS engine does not
- * support (no component in the library relies on positional selectors — see
- * CLAUDE.md).
+ * stays crisp, and the items need no positional styling (Lynx's CSS engine
+ * has no `:first-child`/`:last-child`). Their outline is the container's
+ * border, which the clip doesn't cut.
  */
 export const buttonGroupItemVariants = cva('items-center flex justify-center', {
   variants: {
@@ -136,6 +137,11 @@ const ITEM_SIZES: Readonly<Record<ButtonGroupSize, string>> = {
  */
 const iconType = () => UiIcon;
 
+/**
+ * `UiButtonGroupItem`, for the group's `contentChildren()` (see iconType).
+ */
+const itemType = () => UiButtonGroupItem;
+
 /**
  * The color an icon projected into an item draws with when it's given none:
  * the items' label color (see UI_ICON_COLOR). Named, not inline: the
@@ -171,13 +177,15 @@ const groupIconColor = () => inject(UiButtonGroup).foreground;
   template: `
     @if (look() === 'glass') {
       <!-- The frame is the group's box and, under clear glass, its dimming
-           layer, in the glass's shape. -->
+           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()"
         >
@@ -185,10 +193,7 @@ const groupIconColor = () => inject(UiButtonGroup).foreground;
         </blur-view>
       </view>
     } @else {
-      <view
-        [class]="containerClass()"
-        [style.border-radius.px]="materialRadius()"
-      >
+      <view [class]="containerClass()">
         <ng-container [ngTemplateOutlet]="items" />
       </view>
     }
@@ -207,13 +212,16 @@ export class UiButtonGroup {
   readonly variant = input<ButtonGroupVariant>('default');
   /** The items' height and padding; `'icon'` makes square icon-only items. */
   readonly size = input<ButtonGroupSize>('default');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly #settings = inject(LynxAccessibilitySettings);
   readonly #design = injectGlassDesign();
   readonly #systemDrawsGlass = injectSystemDrawsGlass();
 
+  /** The items in the group, in order. */
+  readonly items = contentChildren(itemType(), { descendants: true });
+
   /** The form the group takes on this platform, for its items. */
   readonly look = computed<ButtonGroupLook>(() => {
     const variant = this.variant();
@@ -234,7 +242,8 @@ export class UiButtonGroup {
    * The corner radius of an item's pressed highlight, in px. In glass it's
    * concentric with the group's corners, so the gap between them stays even
    * all the way round; in Material's connected group it's the small inner
-   * corner, and the group's round ends clip the outer ones.
+   * corner, and an item at one of the group's ends clips it to its round
+   * end (see materialEndRadius).
    */
   readonly itemRadius = computed(() =>
     this.look() === 'material'
@@ -257,12 +266,13 @@ export class UiButtonGroup {
     this.capsule() ? null : this.radius(),
   );
 
-  /** A Material column of wider items: its ends are half an item round. */
-  protected readonly materialRadius = computed(() =>
-    this.look() === 'material' && !this.capsule()
-      ? ITEM_HEIGHTS[this.size()] / 2
-      : null,
-  );
+  /**
+   * How round Material's group is at its ends, in px: half an item's
+   * height, which makes a capsule of a row or of a column of square icons,
+   * and round corners on a column of wider items. The items at the ends
+   * draw them (see UiButtonGroupItem's cornerStyle).
+   */
+  readonly materialEndRadius = computed(() => ITEM_HEIGHTS[this.size()] / 2);
 
   /**
    * As UiButton's: the glass reacts to touch, unless Reduce Motion is on
@@ -322,8 +332,9 @@ export class UiButtonGroup {
     cn(
       this.look() === 'material'
         ? // Material's connected group: the items, 2px apart, show the page
-          // between them, and the group's round ends clip the outer corners.
-          cn('gap-0.5 flex overflow-hidden', this.capsule() && 'rounded-full')
+          // between them. No clip: the end items round the group's ends
+          // themselves, and a clip would cut their outlines.
+          'gap-0.5 flex'
         : // The dividers between items are the group's own `bg-border`
           // showing through a 1px `gap-px` seam — no per-item borders needed,
           // which keeps items position-agnostic. `overflow-hidden` +
@@ -349,6 +360,7 @@ export class UiButtonGroup {
     <view
       #container
       [class]="containerClass()"
+      [style]="cornerStyle()"
       [attr.accessibility-element]="accessibilityLabel() ? 'true' : null"
       [attr.accessibility-traits]="accessibilityLabel() ? 'button' : null"
       [attr.accessibility-label]="accessibilityLabel() || null"
@@ -378,7 +390,7 @@ export class UiButtonGroupItem {
   readonly #group = inject(UiButtonGroup);
   readonly #settings = inject(LynxAccessibilitySettings);
 
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   /**
    * What a screen reader says for the item. An icon-only item needs one; an
    * item with a label reads its label without it.
@@ -405,6 +417,40 @@ export class UiButtonGroupItem {
 
   protected readonly radius = computed(() => this.#group.itemRadius());
 
+  /**
+   * Whether the item is the group's first and its last, which round the
+   * group's ends in Material. Found from the group's items, as Lynx's CSS
+   * has no `:first-child`/`:last-child`.
+   */
+  readonly #first = computed(() => this.#group.items()[0] === this);
+  readonly #last = computed(() => {
+    const items = this.#group.items();
+    return items[items.length - 1] === this;
+  });
+
+  /**
+   * A Material item's corners: small between items, and round at the
+   * group's ends, as Material's connected buttons are. The end items draw
+   * the ends themselves, rather than the group clipping them, so that the
+   * outline Increase Contrast gives them follows the curve. Inline, as how
+   * round the ends are depends on the size.
+   */
+  protected readonly cornerStyle = computed(() => {
+    if (this.#group.look() !== 'material') return null;
+    const inner = `${MATERIAL_INNER_RADIUS}px`;
+    const end = `${this.#group.materialEndRadius()}px`;
+    // The left or top corners, and the right or bottom ones.
+    const start = this.#first() ? end : inner;
+    const finish = this.#last() ? end : inner;
+    const column = this.#group.orientation() === 'vertical';
+    return {
+      'border-top-left-radius': start,
+      'border-top-right-radius': column ? start : finish,
+      'border-bottom-right-radius': finish,
+      'border-bottom-left-radius': column ? finish : start,
+    };
+  });
+
   /**
    * Glass and Material items show a highlight while pressed, in place: the
    * glass around them is what reacts on iOS, and Material marks a press with
@@ -439,7 +485,7 @@ export class UiButtonGroupItem {
       ITEM_SIZES[size],
       look === 'material' &&
         cn(
-          'rounded-[8px] bg-secondary overflow-hidden',
+          'bg-secondary overflow-hidden',
           this.#settings.increaseContrast() && 'border border-foreground',
         ),
       this.#gap(),

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

@@ -40,6 +40,12 @@ class CardHost {
   readonly pressable = signal(false);
 }
 
+@Component({
+  imports: [UiCard, LYNX_ELEMENTS],
+  template: `<ui-card pressable><text>Order</text></ui-card>`,
+})
+class BarePressableHost {}
+
 /**
  * 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.
@@ -112,6 +118,16 @@ describe('UiCard', () => {
     expect(scaleOf(view)).toBe('scale(1)');
   });
 
+  it('is pressable with a bare pressable attribute', async () => {
+    const { container } = await render(BarePressableHost);
+    const view = cardView(container);
+
+    fireEvent.touchstart(view);
+    expect(scaleOf(view)).toBe('scale(0.985)');
+    fireEvent.touchend(view);
+    expect(scaleOf(view)).toBe('scale(1)');
+  });
+
   it('scales down while pressed by mouse, and back on release or leave', async () => {
     const { container, componentRef } = await render(CardHost);
     (componentRef.instance as CardHost).pressable.set(true);

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

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   input,
   viewChild,
@@ -40,7 +41,7 @@ export class UiCard {
   /**
    * When true, the card responds to touch with a subtle scale animation
    */
-  readonly pressable = input(false);
+  readonly pressable = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly containerRef = viewChild<ElementRef>('container');

package/dist/ui/components/chart/chart-presets.ts

@@ -1,4 +1,4 @@
-import { Directive, input, viewChild } from '@angular/core';
+import { Directive, booleanAttribute, input, viewChild } from '@angular/core';
 import { scaleLinear } from '@tanstack/charts/scales/linear';
 import type {
   ChartPoint,
@@ -193,9 +193,9 @@ export abstract class UiCartesianPreset<TDatum> {
   /** Target number of ticks per axis; the axis picks nice values near it. */
   readonly tickCount = input(5);
   /** Horizontal gridlines at the y ticks. */
-  readonly showGrid = input(true);
+  readonly showGrid = input(true, { transform: booleanAttribute });
   /** Vertical gridlines at the x ticks. */
-  readonly showXGrid = input(false);
+  readonly showXGrid = input(false, { transform: booleanAttribute });
   readonly xAxisLabel = input('');
   readonly yAxisLabel = input('');
   readonly padding = input<ChartPadding>({});
@@ -206,14 +206,14 @@ export abstract class UiCartesianPreset<TDatum> {
   readonly xTickFormat = input<(value: number) => string>();
   readonly yTickFormat = input<(value: number) => string>();
   /** Shows a tooltip for the touched point; a tap pins it. */
-  readonly tooltip = input(true);
+  readonly tooltip = input(true, { transform: booleanAttribute });
   /** What a screen reader announces for the chart. */
   readonly label = input('Chart');
   /** Light, dark or `'system'` colors; the chart theme's setting when unset. */
   readonly colorScheme = input<Exclude<ChartColorSchemeOption, Function>>();
-  readonly zoomable = input(false);
+  readonly zoomable = input(false, { transform: booleanAttribute });
   readonly zoomAxes = input<ChartZoomAxes>('xy');
-  readonly showZoomControls = input(true);
+  readonly showZoomControls = input(true, { transform: booleanAttribute });
   readonly minZoom = input(1);
   readonly maxZoom = input(8);
   readonly zoomStep = input(1.4);

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

@@ -18,6 +18,7 @@ import {
 } from '@tanstack/charts/universal';
 import { describe, expect, it, vi } from 'vitest';
 import { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
+import { UI_THEME_COLORS } from '../icon/icon-theme';
 import { UiChart, UiChartTooltip, tooltip } from './chart';
 import {
   CHART_DARK_COLORS,
@@ -337,6 +338,19 @@ describe('UiChart', () => {
           await primaryFill([provideChartTheme({ colorScheme: () => 'dark' })]),
         ).toBe(CHART_DARK_COLORS['primary']);
       });
+
+      it('paints with colors set at runtime above it, such as the wallpaper’s', async () => {
+        const wallpaper = {
+          provide: UI_THEME_COLORS,
+          useValue: signal({ dark: { primary: 'rgba(208, 188, 255, 1)' } }),
+        };
+        expect(await primaryFill([wallpaper], 'dark')).toBe(
+          'rgba(208, 188, 255, 1)',
+        );
+        expect(await primaryFill([wallpaper], 'light')).toBe(
+          CHART_LIGHT_COLORS['primary'],
+        );
+      });
     });
 
     it('gives labels the foreground token when the theme sets no foreground', async () => {

package/dist/ui/components/chart/chart.ts

@@ -4,6 +4,7 @@ import {
   Directive,
   TemplateRef,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChild,
   effect,
@@ -46,6 +47,7 @@ import type {
 } from '@tanstack/charts/types';
 
 import { cn } from '../../utils/cn';
+import { UI_THEME_COLORS } from '../icon/icon-theme';
 import { adjacentFocusPoint, createChartFocusModel } from './chart-focus';
 import {
   type ChartLabel,
@@ -342,9 +344,9 @@ export class UiChart {
    * light unless the app says otherwise; see `ChartColorSchemeOption`.
    */
   readonly colorScheme = input<Exclude<ChartColorSchemeOption, Function>>();
-  readonly zoomable = input(false);
+  readonly zoomable = input(false, { transform: booleanAttribute });
   readonly zoomAxes = input<ChartZoomAxes>('xy');
-  readonly showZoomControls = input(true);
+  readonly showZoomControls = input(true, { transform: booleanAttribute });
   readonly minZoom = input(1);
   readonly maxZoom = input(8);
   /** Factor each zoom button press zooms by. */
@@ -363,6 +365,7 @@ export class UiChart {
 
   readonly #theme = inject(UI_CHART_THEME);
   readonly #appearance = inject(LynxTheme);
+  readonly #replacedColors = inject(UI_THEME_COLORS, { optional: true });
   readonly #idPrefix = `chart${nextChartId++}`;
   readonly #runtime = createChartRuntime({ defaultTheme: this.#theme.chart });
   readonly #measureText = lynxTextMeasurer();
@@ -468,7 +471,11 @@ export class UiChart {
         : typeof option === 'function'
           ? option()
           : option;
-    return scheme === 'dark' ? this.#theme.dark : this.#theme.light;
+    // Colors set at runtime above the chart, such as Android's wallpaper
+    // colors, take the place of the theme's (see UI_THEME_COLORS).
+    const replaced = this.#replacedColors?.()[scheme];
+    const colors = scheme === 'dark' ? this.#theme.dark : this.#theme.light;
+    return replaced ? { ...colors, ...replaced } : colors;
   });
 
   readonly #svgOptions = computed(() => {

package/dist/ui/components/checkbox/checkbox.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   input,
@@ -38,7 +39,7 @@ import { cn } from '../../utils/cn';
 })
 export class UiCheckbox {
   readonly checked = model(false);
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<boolean>();

package/dist/ui/components/collapsible/collapsible.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   inject,
@@ -27,7 +28,7 @@ import { cn } from '../../utils/cn';
 })
 export class UiCollapsible {
   readonly open = model(false);
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   protected readonly containerClass = computed(() =>