@area8975/ui 0.1.1-dev.17 → 0.1.1-dev.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.1.1-dev.17",
+  "version": "0.1.1-dev.19",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/theme.css

@@ -13,7 +13,6 @@
 /* Defaults hover styles on all devices */
 @custom-variant hover (&:hover);
 
-/* dark: follows a .dark class on <html> rather than the media query, so an app can offer System, Light and Dark */
 @custom-variant dark (&:where(.dark, .dark *));
 
 
@@ -116,7 +115,6 @@
 }
 
 
-/* Paints the page, otherwise the browser's white shows through whatever --background is */
 @layer base {
     body {
         background-color: var(--background);
@@ -124,10 +122,6 @@
     }
 }
 
-/*
- * Softer light theme. The page is a light grey so white cards and the sidebar
- * stand off it, edged with a slightly stronger line. Dark mode keeps Preline's.
- */
 :root:not(.dark) {
     --background: oklch(0.948 0.005 264);
     --sidebar: var(--card);
@@ -135,23 +129,18 @@
     --card-line: oklch(0.9 0.006 264);
 }
 
-/* Dark to match, a deeper page with the cards and sidebar raised off it */
 .dark {
     --background: var(--color-neutral-900);
     --sidebar: var(--card);
     --sidebar-line: var(--card-line);
 
-    /* menus sit on cards, Preline's item hover is the card's own colour so it never showed */
+    /* Preline's item hover matches the card colour in dark */
     --dropdown-item-hover: var(--color-neutral-700);
     --dropdown-item-focus: var(--color-neutral-700);
     --dropdown-item-active: var(--color-neutral-700);
 }
 
-/*
- * Dark tints. Soft fills, borders and focus rings use the 50 to 200 shades and
- * soft text the 800 one, so in dark those become see-through tints of the
- * colour and a light text shade. Solid colours stay as they are.
- */
+/* soft fills use the 50 to 200 shades and 800 text, so those become tints in dark */
 .dark {
     --color-primary-50: color-mix(in oklab, var(--color-blue-500) 12%, transparent);
     --color-primary-100: color-mix(in oklab, var(--color-blue-500) 20%, transparent);

package/types/area8975-ui.d.ts

@@ -30,10 +30,7 @@ export type ChartLegendPosition = 'auto' | 'none';
  * Keep the order, a series takes the next slot, never a generated colour.
  */
 export declare const CHART_PALETTE: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#008300", "#4a3aa7", "#e34948"];
-/**
- * The palette for dark mode. Violet and green are lightened so every slot
- * keeps 3:1 contrast on a dark card, the rest already do.
- */
+/** Violet and green are lightened to keep 3:1 contrast on a dark card. */
 export declare const CHART_PALETTE_DARK: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#2e9e2e", "#8a7cf0", "#e34948"];
 /** Past eight series, fold the rest into "Other" instead of reusing a colour. */
 export declare const CHART_MAX_SERIES: 8;
@@ -45,7 +42,6 @@ export interface ChartInk {
   muted: string;
   grid: string;
   surface: string;
-  /** Series that are there for context. */
   context: string;
 }
 export declare const CHART_INK: ChartInk;
@@ -73,11 +69,7 @@ export interface ChartSeries {
   /** Draws the line dashed, e.g. to set projected figures apart from actual ones. Bars ignore it. */
   dashed?: boolean;
 }
-/**
- * Pixels, or `fill` to take the height of the chart's host, which then has to
- * get its height from layout (a grid row, a flex parent, `h-full` under a sized
- * parent). Clamp it with `min-h-*` and `max-h-*` on the host.
- */
+/** `fill` takes the host's height, which has to come from layout. */
 export type ChartHeight = number | 'fill';
 /** Turns a raw value into what the axis, tooltip and table show, e.g. money. */
 export type ChartValueFormatter = (value: number) => string;
@@ -106,10 +98,6 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
    * matter stand out. The way to show more series than there are colours.
    */
   readonly highlight: import("@angular/core").InputSignal<string[] | null>;
-  /**
-   * Highlighted series keep the colour they'd have with nothing highlighted,
-   * so picking one out of many doesn't change what colour it is.
-   */
   readonly highlightKeepsColours: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** `none` leaves the legend out, for when a `ui-chart-legend` is linked with `for`. */
   readonly legend: import("@angular/core").InputSignal<ChartLegendPosition>;
@@ -440,10 +428,7 @@ export declare class UiChartLegendComponent {
   readonly note: import("@angular/core").InputSignal<string>;
   /** A chart to take items from and hide or fade series on, set its `legend` to `none`. */
   readonly for: import("@angular/core").InputSignal<ChartLegendSource | null>;
-  /**
-   * Adjusts the items taken from `for`, e.g. to relabel or reorder them.
-   * Keep each item's `name`, toggling and fading find the series by it.
-   */
+  /** Adjusts the linked chart's items, e.g. to relabel them. Keep each `name`. */
   readonly itemsWith: import("@angular/core").InputSignal<((items: ChartLegendItem[]) => ChartLegendItem[]) | null>;
   /** Names of items switched off, bound two-way when `toggleable`. */
   readonly hidden: import("@angular/core").ModelSignal<string[]>;
@@ -512,7 +497,6 @@ export declare class UiLineChartComponent extends UiAxisChartBase {
   readonly showPoints: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Shades this category and everything after it as a forecast. */
   readonly projectedFrom: import("@angular/core").InputSignal<string | null>;
-  /** Names the `projectedFrom` band. */
   readonly projectedLabel: import("@angular/core").InputSignal<string>;
   private readonly projectedAnnotations;
   protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
@@ -584,26 +568,16 @@ export declare class UiPieChartComponent extends UiAxisChartBase {
 export declare const PieChartVariants: readonly ["pie", "donut"];
 /** @see {@link PieChartVariants} */
 export type PieChartVariant = typeof PieChartVariants[number];
-/** Currency and locale shared by everything in the library that formats numbers. */
 export interface UiFormat {
   /** ISO 4217 code, e.g. "GBP". */
   currency: string;
   /** BCP 47 tag, e.g. "en-GB". */
   locale: string;
 }
-/** What the library uses when nothing is provided. */
 export declare const UI_FORMAT_DEFAULTS: UiFormat;
 export declare const UI_FORMAT: InjectionToken<UiFormat>;
-/**
- * Sets the currency and locale once, in the app config or on a component for
- * just its part of the page. Inputs on a component still win over it.
- */
 export declare function provideUiFormat(format: Partial<UiFormat>): Provider;
-/**
- * Formats money in the provided currency and locale, made for a chart's
- * `valueFormatter`. Needs an injection context, e.g. a component field.
- * `options` tweaks the output, e.g. `{ maximumFractionDigits: 0 }` for axes.
- */
+/** Needs an injection context, e.g. a component field. */
 export declare function injectMoneyFormatter(options?: Intl.NumberFormatOptions): (value: number) => string;
 /** Native type values ui-input supports. File/checkbox/radio/range need their own components. */
 export declare const InputTypes: readonly ["text", "email", "tel", "url", "search", "password", "number", "date", "time", "datetime-local", "month", "week", "color"];
@@ -1252,6 +1226,7 @@ export declare class UiSelectComponent<Model = unknown> {
   readonly listId: string;
   readonly hasSelection: import("@angular/core").Signal<boolean>;
   readonly triggerLabel: import("@angular/core").Signal<string>;
+  readonly isEmpty: import("@angular/core").Signal<boolean>;
   /** Tags only replace the trigger text when there's no inline search box. */
   readonly showTags: import("@angular/core").Signal<boolean>;
   /** The text to create from, or null when there's nothing to offer. */
@@ -1568,12 +1543,7 @@ export declare const AlertIntents: string[];
 export declare const AlertAppearances: readonly ["soft", "bordered"];
 export type AlertIntent = typeof AlertIntents[number];
 export type AlertAppearance = typeof AlertAppearances[number];
-/**
- * A small round picture of a person, their initials until `src` is set or
- * when the image fails to load. Screen readers hear the name, not the initials.
- */
 export declare class UiAvatarComponent {
-  /** Who it shows, the initials come from it. */
   readonly name: import("@angular/core").InputSignal<string>;
   readonly src: import("@angular/core").InputSignal<string | null>;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
@@ -1601,7 +1571,6 @@ export declare class UiAvatarComponent {
     };
   }, {}, never, never, true, never>;
 }
-/** sm for dense rows, md for menus and lists, lg for a profile header. */
 export declare const AvatarSizes: readonly ["sm", "md", "lg"];
 /** @see {@link AvatarSizes} */
 export type AvatarSize = typeof AvatarSizes[number];
@@ -1868,11 +1837,6 @@ export declare const CardRadii: readonly ["none", "sm", "md", "lg", "xl"];
 /** @see {@link CardRadii} */
 export type CardRadius = typeof CardRadii[number];
 export declare const radiusClasses: Record<CardRadius, string>;
-/**
- * The title row at the top of a card, with an optional muted subtitle.
- * Anything projected goes on the right as actions, e.g. buttons or a picker,
- * and wraps under the title when there isn't room.
- */
 export declare class UiCardHeaderComponent {
   readonly heading: import("@angular/core").InputSignal<string>;
   readonly subtitle: import("@angular/core").InputSignal<string>;
@@ -1897,7 +1861,6 @@ export declare class UiCardHeaderComponent {
     };
   }, {}, never, ["*"], true, never>;
 }
-/** Heading levels a card title can use. */
 export declare const CardHeadingLevels: readonly [2, 3, 4];
 /** @see {@link CardHeadingLevels} */
 export type CardHeadingLevel = typeof CardHeadingLevels[number];
@@ -1927,7 +1890,7 @@ export declare class UiDrawerComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+  }, {}, never, ["[drawer-actions]", "*"], true, never>;
 }
 export declare class UiDropdownDirective {
   readonly element: ElementRef<any>;
@@ -2299,18 +2262,12 @@ export declare class UiProgressComponent {
     };
   }, {}, never, never, true, never>;
 }
-/** One choice in a segmented control. */
 export interface SegmentedOption<T> {
   value: T;
   label: string;
   /** Read out instead of `label`, for when the label is abbreviated, e.g. "6M". */
   ariaLabel?: string;
 }
-/**
- * A row of options where exactly one is picked, e.g. a time range or a view
- * toggle. Built on native radios, so arrow keys move between options and
- * screen readers hear a radio group.
- */
 export declare class UiSegmentedComponent<T> {
   readonly options: import("@angular/core").InputSignal<SegmentedOption<T>[]>;
   readonly value: import("@angular/core").ModelSignal<T>;
@@ -2379,13 +2336,7 @@ export declare class UiSkeletonComponent {
 export declare const SkeletonShapes: readonly ["text", "circle", "rect"];
 /** @see {@link SkeletonShapes} */
 export type SkeletonShape = typeof SkeletonShapes[number];
-/**
- * A muted label over a large figure, for the numbers inside a card. Project
- * the value, e.g. a `ui-money`, and optionally a change or badge beside it
- * with `stat-change` and a small line under it with `stat-note`.
- *
- * Each stat is its own `dl`, so put a row of them in a plain flex or grid wrapper.
- */
+/** Each stat is its own `dl`, so wrap a row of them in a plain div. */
 export declare class UiStatComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiStatComponent, never>;
@@ -2521,6 +2472,8 @@ interface ColumnDragPreview {
 }
 export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestroy {
   readonly classes: import("@angular/core").InputSignal<string>;
+  /** Lets controls elsewhere on the page link to this table, e.g. `<ui-search [table]="'transactions'">`. */
+  readonly tableId: import("@angular/core").InputSignal<string | null>;
   readonly columns: import("@angular/core").InputSignal<TableColumn<Row>[]>;
   readonly dataSource: import("@angular/core").InputSignal<TableDataSource<Row>>;
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
@@ -2576,6 +2529,9 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   private readonly load$;
   private readonly destroyRef;
   private readonly cdr;
+  private readonly registry;
+  private loadedQuery;
+  private loadedFilters;
   private resizeState;
   private columnDragState;
   private readonly filterDataSources;
@@ -2628,6 +2584,11 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
       "required": false;
       "isSignal": true;
     };
+    "tableId": {
+      "alias": "tableId";
+      "required": false;
+      "isSignal": true;
+    };
     "columns": {
       "alias": "columns";
       "required": true;
@@ -2720,6 +2681,18 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
     "rowsReordered": "rowsReordered";
   }, never, never, true, never>;
 }
+export interface UiLinkedTable {
+  readonly query: WritableSignal<string>;
+  readonly filters: WritableSignal<Record<string, unknown>>;
+}
+export declare class UiTableRegistry {
+  private readonly tables;
+  get(id: string): UiLinkedTable | null;
+  register(id: string, table: UiLinkedTable): void;
+  unregister(id: string, table: UiLinkedTable): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTableRegistry, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
 export declare class UiToastComponent {
   readonly intent: import("@angular/core").InputSignal<"success" | "warning" | "danger" | "info">;
   readonly classes: import("@angular/core").InputSignal<string>;
@@ -2926,11 +2899,6 @@ export declare class UiOverlayComponent implements UiOverlayStackEntry {
 }
 export declare class UiSidebarComponent {
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
-  /**
-   * True while the sidebar is narrow, so content projected into the footer can
-   * shrink to an icon or avatar. Read it with `#sidebar="uiSidebar"` or by
-   * injecting UiSidebarComponent.
-   */
   readonly isCollapsed: import("@angular/core").Signal<boolean>;
   readonly toggle: () => void;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiSidebarComponent, never>;
@@ -2944,11 +2912,6 @@ export declare class UiSidebarComponent {
     "isOpen": "isOpenChange";
   }, never, ["*", "[sidebar-footer]"], true, never>;
 }
-/**
- * A labelled section of sidebar items. The label shows while the sidebar is
- * open and turns into a divider when it's collapsed, screen readers get the
- * name either way.
- */
 export declare class UiSidebarGroupComponent {
   private readonly sidebar;
   readonly label: import("@angular/core").InputSignal<string>;
@@ -3428,6 +3391,61 @@ export declare class UiFileInputComponent {
     "rejected": "rejected";
   }, never, never, true, never>;
 }
+export declare class UiSearchComponent {
+  private readonly host;
+  private readonly registry;
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** How long typing has to pause before `searched` fires, in milliseconds. */
+  readonly debounce: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The `tableId` of a ui-table to search, it can render before or after this. */
+  readonly table: import("@angular/core").InputSignal<string | null>;
+  /** The value once typing pauses, for running a search. Clearing fires straight away. */
+  readonly searched: import("@angular/core").OutputEmitterRef<string>;
+  private readonly linked;
+  private timer;
+  constructor();
+  protected onInput(value: string): void;
+  protected clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiSearchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiSearchComponent, "ui-search", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "debounce": {
+      "alias": "debounce";
+      "required": false;
+      "isSignal": true;
+    };
+    "table": {
+      "alias": "table";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "searched": "searched";
+  }, never, never, true, never>;
+}
 export declare class UiSwitchComponent {
   readonly value: import("@angular/core").ModelSignal<boolean>;
   readonly id: import("@angular/core").InputSignal<string>;
@@ -3459,6 +3477,104 @@ export declare class UiSwitchComponent {
     "value": "valueChange";
   }, never, ["*"], true, never>;
 }
+export declare const TableFiltersBreakpoints: {
+  readonly sm: "40rem";
+  readonly md: "48rem";
+  readonly lg: "64rem";
+  readonly xl: "80rem";
+  readonly '2xl': "96rem";
+};
+/** @see {@link TableFiltersBreakpoints} */
+export type TableFiltersBreakpoint = keyof typeof TableFiltersBreakpoints;
+export interface TableFacetOption {
+  value: unknown;
+  label: string;
+}
+/** Writes the picked value, or an array when `multiple`, under `id`. */
+export interface TableOptionsFacet {
+  id: string;
+  label: string;
+  kind: 'options';
+  options: TableFacetOption[];
+  multiple?: boolean;
+}
+/** Writes `{ start, end }` ISO dates under `id`. */
+export interface TableDateRangeFacet {
+  id: string;
+  label: string;
+  kind: 'dateRange';
+  /** Quick picks, see date-range-presets.ts for ready made ones. */
+  presets?: DateRangePreset[];
+  placeholder?: string;
+  min?: IsoDate | null;
+  max?: IsoDate | null;
+}
+export type TableFacet = TableOptionsFacet | TableDateRangeFacet;
+export type TableFacetDateRange = DateRange;
+type Filters = Record<string, unknown>;
+type DateMode = 'any' | 'custom' | number;
+export declare class UiTableFiltersComponent {
+  private readonly registry;
+  readonly facets: import("@angular/core").InputSignal<TableFacet[]>;
+  /** The `tableId` of a ui-table to filter, it can render before or after this. */
+  readonly table: import("@angular/core").InputSignal<string | null>;
+  readonly value: import("@angular/core").ModelSignal<Filters>;
+  /** Below this breakpoint the panel becomes a Filters button and a drawer. */
+  readonly collapseBelow: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl" | "2xl">;
+  protected readonly idPrefix: string;
+  protected readonly anyDate: DateMode;
+  protected readonly customDate: DateMode;
+  private readonly customDates;
+  private readonly linked;
+  protected readonly appliedCount: import("@angular/core").Signal<number>;
+  protected readonly anyApplied: import("@angular/core").Signal<boolean>;
+  private readonly window;
+  protected readonly wide: import("@angular/core").WritableSignal<boolean>;
+  constructor();
+  protected groupName(facet: TableFacet): string;
+  protected choiceId(facet: TableFacet, choice: number | string): string;
+  protected picked(facet: TableOptionsFacet): unknown;
+  protected pick(facet: TableOptionsFacet, value: unknown): void;
+  protected isChecked(facet: TableOptionsFacet, option: TableFacetOption): boolean;
+  protected check(facet: TableOptionsFacet, option: TableFacetOption, checked: boolean): void;
+  protected range(facet: TableDateRangeFacet): DateRange;
+  protected dateMode(facet: TableDateRangeFacet): DateMode;
+  protected pickDate(facet: TableDateRangeFacet, mode: DateMode): void;
+  protected setRange(facet: TableDateRangeFacet, range: DateRange): void;
+  protected clearAll(): void;
+  private setCustom;
+  private apply;
+  private write;
+  private currentFilters;
+  private ownFilters;
+  private withoutOwn;
+  private hasAny;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTableFiltersComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiTableFiltersComponent, "ui-table-filters", never, {
+    "facets": {
+      "alias": "facets";
+      "required": true;
+      "isSignal": true;
+    };
+    "table": {
+      "alias": "table";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseBelow": {
+      "alias": "collapseBelow";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
 export declare class UiTimeSelectComponent {
   /** 24 hour "HH:mm" string. */
   readonly value: import("@angular/core").ModelSignal<string>;
@@ -3492,22 +3608,14 @@ export declare class UiTimeSelectComponent {
     "value": "valueChange";
   }, never, never, true, never>;
 }
-/**
- * The signed in person and their options, e.g. Settings and Log out, with a
- * theme switch. Goes inside a dropdown's `uiDropdownContent`, the same as
- * `ui-dropdown-menu`. Give that dropdown `closeBehaviour="whenClickOutside"`
- * so picking a theme doesn't close it, picking an item still does.
- */
+/** Give the dropdown it sits in `closeBehaviour="whenClickOutside"`. */
 export declare class UiUserMenuComponent {
   private readonly dropdown;
   readonly name: import("@angular/core").InputSignal<string>;
   /** A second line under the name, e.g. an email address. */
   readonly detail: import("@angular/core").InputSignal<string>;
   readonly src: import("@angular/core").InputSignal<string | null>;
-  /** The same items as `ui-dropdown-menu`, buttons, labelled groups and dividers. */
   readonly items: import("@angular/core").InputSignal<DropdownMenuItem[]>;
-  /** Shows the System, Light and Dark switch, which needs `provideUiTheme()`. */
-  readonly themeSwitch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   protected readonly menuItems: import("@angular/core").Signal<DropdownMenuItem[]>;
   protected isDivider(item: DropdownMenuItem): boolean;
   protected group(item: DropdownMenuItem): DropdownMenuCategory | null;
@@ -3535,26 +3643,16 @@ export declare class UiUserMenuComponent {
       "required": false;
       "isSignal": true;
     };
-    "themeSwitch": {
-      "alias": "themeSwitch";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {}, never, never, true, never>;
+  }, {}, never, ["*"], true, never>;
 }
 /** What the user picked, `system` follows the OS setting. */
 export type UiThemePreference = 'system' | 'light' | 'dark';
 export interface UiThemeConfig {
-  /** localStorage key the preference is kept under. */
   storageKey: string;
 }
 export declare const UI_THEME_CONFIG: InjectionToken<UiThemeConfig>;
 /**
- * Switches between light and dark by toggling `.dark` on `<html>`, which the
- * library's tokens key off. Add it with `provideUiTheme()`.
- *
- * To stop the page flashing the wrong theme before the app boots, apply the
- * stored class early with a small inline script in `index.html`'s `<head>`:
+ * Add this to `index.html`'s `<head>` so the stored theme applies before boot:
  *
  * ```html
  * <script>
@@ -3573,24 +3671,16 @@ export declare class UiThemeService {
   private readonly media;
   readonly preference: import("@angular/core").WritableSignal<UiThemePreference>;
   private readonly systemDark;
-  /** Whether dark is showing now, resolved from the preference and the OS setting. */
   readonly isDark: import("@angular/core").Signal<boolean>;
   constructor();
   private stored;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeService, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
-/** Starts theme switching at boot. Read or change it through `UiThemeService`. */
 export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
-/**
- * Picks System, Light or Dark through UiThemeService, so the choice is stored
- * and applied straight away. Add `provideUiTheme()` so the stored choice is
- * applied at boot, not only once this has rendered.
- */
 export declare class UiThemeSwitchComponent {
   protected readonly theme: UiThemeService;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
-  /** Stretches to the container's width, see `ui-segmented`. */
   readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   protected readonly options: SegmentedOption<UiThemePreference>[];
   static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeSwitchComponent, never>;