@akcelik/strct 6.0.2 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "6.0.2",
+  "version": "6.2.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/styles/_forms.scss

@@ -2,6 +2,22 @@
 // (which simply applies the `.strct-control` class). Kept in the theme layer so
 // inputs / selects / textareas share one definition.
 
+/* One height per size, for every single-line control.
+ *
+ * Each control used to work its own height out from its padding, its
+ * line-height and whatever it held: measured in Chrome, a field stood 34.9px
+ * (13px over a 1.3 line, plus 8+8 of padding and the border) beside a small
+ * button's 22px, a searchbox's 28px and a segmented control's 31px. Nothing
+ * could make them agree, because there was no height to agree on, and only
+ * two controls even had a `size` (FR-63-01). Now the height is the token,
+ * the box is border-box and the vertical padding is zero, so what a control
+ * holds — an icon, a spinner, a longer word — cannot change how tall it is.
+ *
+ * `--control-h` is what a control without a size uses; `size` and
+ * `[strctControlSize]` set it to one of the three below. A whole application
+ * changes density by overriding the tokens in one place.
+ *
+ * A textarea is not a single-line control and keeps its own height. */
 .strct-control {
   display: block;
   width: 100%;
@@ -66,6 +82,19 @@ select.strct-control {
   background-position: right 9px center;
 }
 
+.strct-control:not(textarea) {
+  box-sizing: border-box;
+  height: var(--control-h);
+  padding-block: 0;
+}
+/* The ones that are a box around a control rather than the control itself —
+   a select's trigger, a number's field with its steppers — centre what they
+   hold in that height instead of stretching to it. */
+.strct-control:not(textarea, input, select) {
+  display: flex;
+  align-items: center;
+}
+
 textarea.strct-control {
   min-height: 76px;
   resize: vertical;

package/styles/_tokens.scss

@@ -99,6 +99,11 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
+  /* One height per size, for every single-line control (see _forms.scss). */
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --control-h: var(--control-h-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -164,6 +169,11 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
+  /* One height per size, for every single-line control (see _forms.scss). */
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --control-h: var(--control-h-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -229,6 +239,11 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
+  /* One height per size, for every single-line control (see _forms.scss). */
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --control-h: var(--control-h-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -294,6 +309,11 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
+  /* One height per size, for every single-line control (see _forms.scss). */
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --control-h: var(--control-h-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -359,6 +379,11 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
+  /* One height per size, for every single-line control (see _forms.scss). */
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --control-h: var(--control-h-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -424,6 +449,11 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
+  /* One height per size, for every single-line control (see _forms.scss). */
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --control-h: var(--control-h-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;

package/types/akcelik-strct.d.ts

@@ -95,6 +95,46 @@ export interface StrctThresholds {
   warning?: number;
   critical?: number;
 }
+/**
+ * The one size scale every single-line control shares — a field, a button, a
+ * select's trigger, a searchbox, a segmented track.
+ *
+ * Each size is a height token (`--control-h-sm` / `-md` / `-lg`, see
+ * `_forms.scss`), so controls of one size are exactly as tall as each other
+ * whatever they hold. Before 6.2.0 only `strct-button` and `strct-segmented`
+ * had a size at all, and a `size="sm"` button stood 13px shorter than the
+ * field beside it with nothing able to close the gap (FR-63-02).
+ */
+export type StrctControlSize = 'sm' | 'md' | 'lg';
+/** The custom property a size sets, for a host binding. */
+export declare function strctControlHeight(size: StrctControlSize): string;
+/**
+ * Sets the control size for everything inside it.
+ *
+ * ```html
+ * <div strctControlSize="sm">
+ *   <input strctInput /> <strct-select /> <button strct-button>Apply</button>
+ * </div>
+ * ```
+ *
+ * It sets `--control-h`, which every control reads, so a row of them agrees
+ * without each one being told. A control that states its own `size` wins,
+ * because that sets the same property on itself and the nearer declaration
+ * is the one that applies.
+ */
+export declare class StrctControlSizeDirective {
+  /** The size for the controls inside. */
+  readonly strctControlSize: import("@angular/core").InputSignal<StrctControlSize>;
+  protected readonly height: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StrctControlSizeDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StrctControlSizeDirective, "[strctControlSize]", never, {
+    "strctControlSize": {
+      "alias": "strctControlSize";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * Inner markup (path/shape contents) for each icon, drawn on a 0 0 16 16
  * viewBox with `currentColor` stroke. Keep strokes at 1.3–1.5 for crispness.
@@ -1369,8 +1409,12 @@ export declare class StrctTooltip implements OnDestroy {
 }
 /** Button visual variants. */
 export type StrctButtonVariant = 'primary' | 'critical' | 'outline' | 'flat' | 'neutral' | 'link';
-/** Button size variants. */
-export type StrctButtonSize = 'md' | 'sm' | 'mini';
+/**
+ * The shared control sizes, plus the button's own `mini` — a 22px chip for a
+ * toolbar's corner, below the scale on purpose and the one size that does not
+ * line up with a field.
+ */
+export type StrctButtonSize = StrctControlSize | 'mini';
 /**
  * Styles a native `<button>` / `<a>` so it stays fully accessible and form-aware.
  *
@@ -4168,6 +4212,14 @@ export declare class StrctKbd {
  *      <strct-searchbox trigger hint="⌘K" (activated)="palette.open.set(true)" />
  */
 export declare class StrctSearchbox implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly host;
   /** Placeholder text (and the trigger mode's label). */
   readonly placeholder: import("@angular/core").InputSignal<string>;
@@ -4217,6 +4269,11 @@ export declare class StrctSearchbox implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctSearchbox, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctSearchbox, "strct-searchbox", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "placeholder": {
       "alias": "placeholder";
       "required": false;
@@ -4809,10 +4866,23 @@ export declare class StrctField {
  * identifier — the three things consumers were restyling by hand.
  */
 export declare class StrctInput {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   /** Monospace text with tabular figures — a PEM block, an id, a mapping. */
   readonly mono: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctInput, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<StrctInput, "input[strctInput], textarea[strctInput], select[strctInput], input[strct-input], textarea[strct-input], select[strct-input]", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "mono": {
       "alias": "mono";
       "required": false;
@@ -5070,7 +5140,8 @@ export interface StrctSegmentedOption {
   countLabel?: (count: number) => string;
 }
 /** Segment size. */
-export type StrctSegmentedSize = 'sm' | 'md';
+/** The shared control scale, so a segmented track lines up with the row. */
+export type StrctSegmentedSize = StrctControlSize;
 /**
  * One-of-N selection rendered as a joined segmented control with managed
  * selected state — distinct from `StrctTabs` (panel switching) and
@@ -5085,7 +5156,7 @@ export declare class StrctSegmented implements ControlValueAccessor {
   /** The selectable segments. */
   readonly options: import("@angular/core").InputSignal<StrctSegmentedOption[]>;
   /** Segment size. */
-  readonly size: import("@angular/core").InputSignal<StrctSegmentedSize>;
+  readonly size: import("@angular/core").InputSignal<StrctControlSize>;
   /** Stretch to the full width of the container. */
   readonly block: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Static disable; forms' setDisabledState also drives the disabled state. */
@@ -5204,6 +5275,14 @@ export declare class StrctRange implements ControlValueAccessor {
  *   <strct-password [(ngModel)]="pw" meter />
  */
 export declare class StrctPassword implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   /** Placeholder text when empty. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
   /** Show a strength meter. */
@@ -5235,6 +5314,11 @@ export declare class StrctPassword implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctPassword, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctPassword, "strct-password", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "placeholder": {
       "alias": "placeholder";
       "required": false;
@@ -5634,6 +5718,14 @@ export declare const STRCT_MASKS: {
  *   <strct-input-mask mask="HH:HH:HH:HH:HH:HH" uppercase [(ngModel)]="mac" />
  */
 export declare class StrctInputMask implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   /** Mask pattern (9=digit, A=letter, H=hex, *=alnum). */
   readonly mask: import("@angular/core").InputSignal<string>;
   /** Placeholder text when empty. */
@@ -5654,6 +5746,11 @@ export declare class StrctInputMask implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctInputMask, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctInputMask, "strct-input-mask", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "mask": {
       "alias": "mask";
       "required": true;
@@ -5710,6 +5807,14 @@ interface CbxRow {
  * text itself can be committed as a free-form value.
  */
 export declare class StrctCombobox implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly host;
   private readonly inputEl;
   protected readonly listId: string;
@@ -5812,6 +5917,11 @@ export declare class StrctCombobox implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctCombobox, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctCombobox, "strct-combobox", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "options": {
       "alias": "options";
       "required": false;
@@ -5893,6 +6003,14 @@ export declare class StrctCombobox implements ControlValueAccessor {
  * [selected]`.
  */
 export declare class StrctSelect implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly host;
   protected readonly listId: string;
   /** Available options (set `disabled: true` on an option to gray it out). */
@@ -5952,6 +6070,11 @@ export declare class StrctSelect implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctSelect, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctSelect, "strct-select", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "options": {
       "alias": "options";
       "required": false;
@@ -6007,6 +6130,14 @@ export declare const strctDpPad: (n: number) => string;
  *   <strct-datepicker [(ngModel)]="date" />
  */
 export declare class StrctDatepicker implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly host;
   /** Placeholder text when empty. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
@@ -6065,6 +6196,11 @@ export declare class StrctDatepicker implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctDatepicker, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctDatepicker, "strct-datepicker", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "placeholder": {
       "alias": "placeholder";
       "required": false;
@@ -6112,6 +6248,14 @@ export declare class StrctDatepicker implements ControlValueAccessor {
  *   <strct-color-picker [(ngModel)]="color" />
  */
 export declare class StrctColorPicker implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly host;
   /** Custom palette swatches. */
   readonly swatches: import("@angular/core").InputSignal<string[]>;
@@ -6140,6 +6284,11 @@ export declare class StrctColorPicker implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctColorPicker, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctColorPicker, "strct-color-picker", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "swatches": {
       "alias": "swatches";
       "required": false;
@@ -6231,6 +6380,14 @@ export declare class StrctCascadeColumn {
  * the trigger on close.
  */
 export declare class StrctCascadeSelect extends StrctCascadeHost implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly elementRef;
   /** Available options. */
   readonly options: import("@angular/core").InputSignal<StrctCascadeOption[]>;
@@ -6273,6 +6430,11 @@ export declare class StrctCascadeSelect extends StrctCascadeHost implements Cont
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctCascadeSelect, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctCascadeSelect, "strct-cascade-select", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "options": {
       "alias": "options";
       "required": false;
@@ -6652,6 +6814,12 @@ export interface StrctDatagridColumn {
   label: string;
   sortable?: boolean;
   align?: 'start' | 'center' | 'end';
+  /**
+   * The column's width — a CSS length. Stating one puts the table's widths in
+   * charge of its layout (as `resizable` does), so the column is this wide
+   * rather than as wide as its content needs; the rest of the columns keep
+   * the widths they were drawing. Before 6.1.0 the content could outvote it.
+   */
   width?: string;
   /** Allow the user to resize this column by dragging its right edge.
    *  Defaults to the global {@link StrctDatagrid#resizable} setting. */
@@ -6948,7 +7116,16 @@ export declare class StrctDatagrid {
   readonly emptyText: import("@angular/core").InputSignal<string>;
   /** Show skeleton rows while data is loading. */
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Enable column resizing by dragging column headers. */
+  /**
+   * Enable column resizing by dragging column headers.
+   *
+   * It also puts the widths in charge of the table's layout, because a drag
+   * is worth nothing otherwise: under `table-layout: auto` the content could
+   * outvote the width, so a handle could only ever widen a column and the
+   * table could overflow its container (BUG-62-01, 6.1.0). The widths the
+   * content asked for are measured once and kept, so the grid looks the same
+   * until someone drags something.
+   */
   readonly resizable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Show a column-chooser dropdown in the footer. */
   readonly columnChooser: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -7275,6 +7452,35 @@ export declare class StrctDatagrid {
   private readonly onMove;
   private readonly onUp;
   colWidth(key: string): string | null;
+  /**
+   * Whether the columns' widths lay the table out instead of their content.
+   *
+   * Under `table-layout: auto` a width was a hint: measured in Chrome, a
+   * column asked for 120px and drew 323px because its text did, dragging its
+   * handle 120px to the left left it at 323px, and the table stood 836px wide
+   * in a 600px pane with no ellipsis anywhere (BUG-62-01). With the widths in
+   * charge the same drag lands on 88px exactly and the table is 600px in a
+   * 600px pane. A grid opts in by being `resizable`, or by stating a width on
+   * a column — in both cases someone has said what a width should mean.
+   */
+  protected readonly fixedColumns: import("@angular/core").Signal<boolean>;
+  /**
+   * Fixed layout splits the space equally between columns that state no
+   * width, which is not what this grid looked like a frame ago. So the widths
+   * the content asked for are swept first (see {@link sweepHeaderWidths}) and
+   * the mode waits for them: the grid draws exactly as it always did until
+   * someone drags a handle.
+   */
+  protected readonly widthsApplied: import("@angular/core").Signal<boolean>;
+  /**
+   * The width the header cell gets: what was dragged, else what the column
+   * stated, else what the content asked for on the first pass. Every column
+   * keeps its own width — the leftover goes to the filler cell at the end of
+   * the row, which is why none of them has to give any of it back.
+   */
+  protected headerWidth(col: StrctDatagridColumn): string | null;
+  /** A utility column's swept width, under the keys the sweep stores them by. */
+  protected utilWidth(key: string): number | null;
   /**
    * A focusable separator owes ARIA a value, and a column that has never been
    * resized has no stored width — so the header's real width is swept after
@@ -9012,7 +9218,7 @@ export declare class StrctMetricTile {
    * `sm` is the verdict-band size: six counters beside a one-line verdict at
    * 1440px, where the dashboard size fits three.
    */
-  readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
   /**
    * What a plain click on an `href` tile does. `browser` follows the link, as
    * today. `app` belongs to a single-page app: the click is prevented and
@@ -9456,7 +9662,7 @@ export declare class StrctEmptyState {
    * `sm` is the inline row a 240px frame wants: a 16px icon with the title and
    * description on one line. A page-sized empty state stays `md`.
    */
-  readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
   readonly description: import("@angular/core").InputSignal<string>;
   protected readonly resolvedIcon: import("@angular/core").Signal<string>;
   protected readonly toneClass: import("@angular/core").Signal<string>;
@@ -9583,7 +9789,7 @@ export declare class StrctTimeRangePicker {
   /** Popover alignment, as in strct-dropdown. */
   readonly align: import("@angular/core").InputSignal<"end" | "start">;
   /** Trigger size — match it to the toolbar's buttons (sm strips). */
-  readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
   /** Localizable strings. */
   readonly dialogLabel: import("@angular/core").InputSignal<string>;
   readonly quickLabel: import("@angular/core").InputSignal<string>;
@@ -11989,6 +12195,14 @@ export declare class StrctChange {
  * aria-valuemin/max/now so assistive tech announces it as a number control.
  */
 export declare class StrctNumber implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   /** Minimum allowed value; null = unbounded. */
   readonly min: import("@angular/core").InputSignal<number | null>;
   /** Maximum allowed value; null = unbounded. */
@@ -12036,6 +12250,11 @@ export declare class StrctNumber implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctNumber, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctNumber, "strct-number", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "min": {
       "alias": "min";
       "required": false;
@@ -12257,6 +12476,14 @@ export declare class StrctConfirmOutlet {
  * modal/drawer stays open); focus returns to the trigger on close.
  */
 export declare class StrctTreeSelect implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   private readonly host;
   /** Root nodes rendered by the embedded `<strct-tree>` (data-driven mode). */
   readonly nodes: import("@angular/core").InputSignal<StrctTreeNodeData[]>;
@@ -12316,6 +12543,11 @@ export declare class StrctTreeSelect implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctTreeSelect, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctTreeSelect, "strct-tree-select", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "nodes": {
       "alias": "nodes";
       "required": false;
@@ -12363,6 +12595,14 @@ export declare class StrctTreeSelect implements ControlValueAccessor {
  * date keeps the value empty until a date is picked.
  */
 export declare class StrctDatetimePicker implements ControlValueAccessor {
+  /**
+   * Control size — the shared scale, so this lines up with the buttons and
+   * fields beside it. Left unset it follows an enclosing [strctControlSize],
+   * or the default height when there is none.
+   */
+  readonly size: import("@angular/core").InputSignal<StrctControlSize | undefined>;
+  /** The height its size asks for; nothing while it states no size. */
+  protected readonly controlHeight: import("@angular/core").Signal<string | null>;
   /** Placeholder text of the date input when empty (localizable). */
   readonly placeholder: import("@angular/core").InputSignal<string>;
   /** Minute granularity of the minute select (1 = every minute). */
@@ -12407,6 +12647,11 @@ export declare class StrctDatetimePicker implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctDatetimePicker, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctDatetimePicker, "strct-datetime-picker", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "placeholder": {
       "alias": "placeholder";
       "required": false;