@joanroucoux/cairn-ui 0.8.2 → 0.9.0

package/types/joanroucoux-cairn-ui-field.d.ts

@@ -1,10 +1,7 @@
-import * as _joanroucoux_cairn_ui_control from '@joanroucoux/cairn-ui/control';
-import * as _angular_core from '@angular/core';
-
+import * as i0 from "@angular/core";
 /**
- * Marks an element, typically an 18px svg icon, as the leading content of a `ui-field`: it sits
- * inside the control's left edge and the control's text is inset to clear it. Decorative, so hidden
- * from assistive technologies.
+ * Marks an element, typically an 18px svg icon, as the leading content of a `ui-field`, inside the
+ * control's left edge. Decorative, so hidden from assistive technologies.
  *
  * @example
  * <ui-field label="Search" labelHidden>
@@ -12,33 +9,29 @@ import * as _angular_core from '@angular/core';
  *   <input uiInput type="search" />
  * </ui-field>
  */
-declare class UiFieldLeading {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldLeading, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldLeading, "[uiFieldLeading]", never, {}, {}, never, never, true, never>;
+export declare class UiFieldLeading {
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldLeading, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldLeading, "[uiFieldLeading]", never, {}, {}, never, never, true, never>;
 }
 /**
- * Marks an element, typically an icon button, as the trailing action of a `ui-field`: it sits on the
- * control's right edge, square to the control's height, and the control's text is padded to clear it.
+ * Marks an element, typically an icon button, as the trailing action of a `ui-field`, on the
+ * control's right edge. A toggle should carry `aria-pressed`. The slot shares the right edge with
+ * `unit`: set one or the other, not both.
  *
  * @example
  * <ui-field label="Password">
  *   <input uiInput type="password" size="xl" />
  *   <button uiFieldTrailing type="button" aria-label="Show the password" [attr.aria-pressed]="shown()">...</button>
  * </ui-field>
- *
- * A toggle such as this one should carry `aria-pressed`. The slot shares the right edge with `unit`:
- * set one or the other, not both.
  */
-declare class UiFieldTrailing {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldTrailing, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldTrailing, "[uiFieldTrailing]", never, {}, {}, never, never, true, never>;
+export declare class UiFieldTrailing {
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldTrailing, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldTrailing, "[uiFieldTrailing]", never, {}, {}, never, never, true, never>;
 }
 /**
- * Label, control, hint and error as one unit. The control stays a plain native element:
- * the field finds it in its own projected content and wires the ARIA attributes onto it.
- *
- * The message comes from the caller's `error`, or, where none is set, from the projected control's
- * own validation state once it is touched.
+ * Label, control, hint and error as one unit. The projected native control is found and wired with
+ * the ARIA attributes. The message comes from `error`, which wins, or else from the control's own
+ * validation state once touched.
  *
  * @example
  * <ui-field label="Quantity" hint="Leave empty if unknown">
@@ -55,30 +48,60 @@ declare class UiFieldTrailing {
  *   <input uiInput type="search" placeholder="Instrument or account" />
  * </ui-field>
  */
-declare class UiField {
-    #private;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly labelHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly hint: _angular_core.InputSignal<string | undefined>;
-    readonly error: _angular_core.InputSignal<string | undefined>;
-    readonly unit: _angular_core.InputSignal<string | undefined>;
-    readonly optional: _angular_core.InputSignal<string | undefined>;
-    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly hintId: string;
-    protected readonly errorId: string;
-    protected readonly control: _angular_core.Signal<_joanroucoux_cairn_ui_control.UiControl | undefined>;
-    protected readonly leading: _angular_core.Signal<UiFieldLeading | undefined>;
-    protected readonly trailing: _angular_core.Signal<UiFieldTrailing | undefined>;
-    protected readonly rowClasses: _angular_core.Signal<string>;
-    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label leading-[17px] font-medium text-(--muted-foreground)">;
-    /**
-     * The caller's own `error` wins: it is the only way to report something the control does not
-     * know about, such as a search box refusing an empty query.
-     */
-    protected readonly message: _angular_core.Signal<string | undefined>;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, ["control", "leading", "trailing"], ["[uiFieldLeading]", "*", "[uiFieldTrailing]"], true, never>;
-}
-
-export { UiField, UiFieldLeading, UiFieldTrailing };
+export declare class UiField {
+  #private;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly labelHidden: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly hint: import("@angular/core").InputSignal<string | undefined>;
+  readonly error: import("@angular/core").InputSignal<string | undefined>;
+  readonly unit: import("@angular/core").InputSignal<string | undefined>;
+  readonly optional: import("@angular/core").InputSignal<string | undefined>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly hintId: string;
+  protected readonly errorId: string;
+  protected readonly control: import("@angular/core").Signal<import("@joanroucoux/cairn-ui/control").UiControl | undefined>;
+  protected readonly leading: import("@angular/core").Signal<UiFieldLeading | undefined>;
+  protected readonly trailing: import("@angular/core").Signal<UiFieldTrailing | undefined>;
+  protected readonly rowClasses: import("@angular/core").Signal<string>;
+  protected readonly labelClasses: import("@angular/core").Signal<"sr-only" | "text-label leading-[17px] font-medium text-(--muted-foreground)">;
+  protected readonly message: import("@angular/core").Signal<string | undefined>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiField, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiField, "ui-field", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "labelHidden": {
+      "alias": "labelHidden";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "unit": {
+      "alias": "unit";
+      "required": false;
+      "isSignal": true;
+    };
+    "optional": {
+      "alias": "optional";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["control", "leading", "trailing"], ["[uiFieldLeading]", "*", "[uiFieldTrailing]"], true, never>;
+}

package/types/joanroucoux-cairn-ui-filter-chips.d.ts

@@ -1,28 +1,43 @@
-import * as _angular_core from '@angular/core';
-
+import * as i0 from "@angular/core";
 type FilterChipOption = {
-    value: string;
-    label: string;
-    count?: number | string | null;
+  value: string;
+  label: string;
+  count?: number | string | null;
 };
 /**
- * A row of single-choice filter pills, each with an optional count, that narrows a list in place:
- * an asset class, a status. On touch it scrolls on one line, bleeding to the screen edges; with a
- * fine pointer it wraps.
+ * A row of single-choice filter pills, each with an optional count, that narrows a list in place.
+ * On touch it scrolls on one line; with a fine pointer it wraps. An element marked `uiChipsLeading` is
+ * projected first, outside the chips' group, followed by a vertical rule.
  *
  * @example
  * <ui-filter-chips ariaLabel="Filter by class" [options]="classes()" [(value)]="selectedClass" />
  */
-declare class UiFilterChips {
-    readonly options: _angular_core.InputSignal<FilterChipOption[]>;
-    readonly value: _angular_core.ModelSignal<string>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly chipClasses = "flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2";
-    protected pillClasses(optionValue: string): string;
-    protected countClasses(optionValue: string): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFilterChips, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiFilterChips, "ui-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+export declare class UiFilterChips {
+  readonly options: import("@angular/core").InputSignal<FilterChipOption[]>;
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  protected readonly chipClasses = "flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2";
+  protected pillClasses(optionValue: string): string;
+  protected countClasses(optionValue: string): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFilterChips, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiFilterChips, "ui-filter-chips", never, {
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, ["[uiChipsLeading]"], true, never>;
 }
-
-export { UiFilterChips };
-export type { FilterChipOption };
+export type { FilterChipOption };

package/types/joanroucoux-cairn-ui-group-header.d.ts

@@ -0,0 +1,58 @@
+import * as i0 from "@angular/core";
+/**
+ * Header of a card on a phone: the name, its meta underneath, the projected total on the right.
+ *
+ * With `collapsible` the header is a button inside the heading, with a chevron that turns when the
+ * group is folded and a press scale. `expanded` is a model: the page keeps the fold memory and hides
+ * the card body itself. `toggleDisabled` keeps the button focusable and announced, but a click
+ * changes nothing (a filter holds the group open). `controls` is the id of the body it folds.
+ *
+ * @example
+ * <ui-group-header name="Northwind PEA" meta="PEA · 3 lignes" collapsible [(expanded)]="open">
+ *   <ui-amount [value]="total" />
+ * </ui-group-header>
+ */
+export declare class UiGroupHeader {
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly meta: import("@angular/core").InputSignal<string | undefined>;
+  readonly collapsible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
+  readonly toggleDisabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly controls: import("@angular/core").InputSignal<string | undefined>;
+  protected toggle(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiGroupHeader, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiGroupHeader, "ui-group-header", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "meta": {
+      "alias": "meta";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapsible": {
+      "alias": "collapsible";
+      "required": false;
+      "isSignal": true;
+    };
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "toggleDisabled": {
+      "alias": "toggleDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "controls": {
+      "alias": "controls";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "expanded": "expandedChange";
+  }, never, ["*"], true, never>;
+}

package/types/joanroucoux-cairn-ui-input.d.ts

@@ -1,51 +1,73 @@
-import * as _angular_core from '@angular/core';
-import { UiControl, UiControlError } from '@joanroucoux/cairn-ui/control';
-
-/** Available control sizes. `md` is the 44/40px touch target; `lg` and `xl` are the 48px sheet and sign-in fields. */
-declare const CONTROL_SIZES: readonly ["sm", "md", "lg", "xl"];
+import { UiControl, UiControlError } from "@joanroucoux/cairn-ui/control";
+import * as i0 from "@angular/core";
+/** Available control sizes. */
+export declare const CONTROL_SIZES: readonly ["sm", "md", "lg", "xl"];
 type ControlSize = (typeof CONTROL_SIZES)[number];
-declare const CONTROL_BASE_CLASSES = "w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50";
-declare const CONTROL_SURFACES: readonly ["background", "card"];
+export declare const CONTROL_BASE_CLASSES = "w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50";
+export declare const CONTROL_SURFACES: readonly ["background", "card"];
 type ControlSurface = (typeof CONTROL_SURFACES)[number];
-declare const CONTROL_SURFACE_CLASSES: Record<ControlSurface, string>;
-declare const CONTROL_SIZE_CLASSES: Record<ControlSize, string>;
+export declare const CONTROL_SURFACE_CLASSES: Record<ControlSurface, string>;
+export declare const CONTROL_SIZE_CLASSES: Record<ControlSize, string>;
 /**
- * Styled native text input. A directive (not a wrapper component) so the host
- * stays a plain <input>: every forms flavor (ngModel, reactive, signal forms)
- * and every native attribute keep working without any plumbing.
- *
- * Declares the `errors` and `touched` inputs Angular's `[formField]` fills, so a `ui-field` around
- * it can show the message without any binding here.
+ * Styled native text input. The host stays a plain `<input>`, so every forms flavor and native
+ * attribute keeps working. Declares the `errors` and `touched` inputs Angular's `[formField]` fills,
+ * so a surrounding `ui-field` can show the message.
  *
  * @example
  * <input uiInput type="email" placeholder="you@example.com" />
  */
-declare class UiInput implements UiControl {
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
-    readonly surface: _angular_core.InputSignal<"background" | "card">;
-    readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
-    readonly touched: _angular_core.InputSignal<boolean>;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiInput, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiInput, "input[uiInput]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+export declare class UiInput implements UiControl {
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;
+  readonly surface: import("@angular/core").InputSignal<"background" | "card">;
+  readonly errors: import("@angular/core").InputSignal<readonly UiControlError[]>;
+  readonly touched: import("@angular/core").InputSignal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInput, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiInput, "input[uiInput]", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "surface": {
+      "alias": "surface";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 /**
- * Styled native textarea. Lives beside the input because it shares every one of its
- * classes; it takes no size, since a textarea grows from a floor instead of sitting
- * at a fixed height.
- *
- * Declares the `errors` and `touched` inputs Angular's `[formField]` fills, so a `ui-field` around
- * it can show the message without any binding here.
+ * Styled native textarea. It takes no size: it grows from a minimum height. Declares the `errors`
+ * and `touched` inputs Angular's `[formField]` fills, so a surrounding `ui-field` can show the message.
  *
  * @example
  * <textarea uiTextarea maxlength="280"></textarea>
  */
-declare class UiTextarea implements UiControl {
-    readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
-    readonly touched: _angular_core.InputSignal<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTextarea, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTextarea, "textarea[uiTextarea]", never, { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+export declare class UiTextarea implements UiControl {
+  readonly errors: import("@angular/core").InputSignal<readonly UiControlError[]>;
+  readonly touched: import("@angular/core").InputSignal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTextarea, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiTextarea, "textarea[uiTextarea]", never, {
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
-
-export { CONTROL_BASE_CLASSES, CONTROL_SIZES, CONTROL_SIZE_CLASSES, CONTROL_SURFACES, CONTROL_SURFACE_CLASSES, UiInput, UiTextarea };
-export type { ControlSize, ControlSurface };
+export type { ControlSize, ControlSurface };