@akcelik/strct 6.1.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "6.1.0",
+  "version": "6.3.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,16 @@
   --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);
+  /* The icon that sits in a control of that size (see icon.ts). */
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 18px;
+  --icon-size: var(--icon-size-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -164,6 +174,16 @@
   --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);
+  /* The icon that sits in a control of that size (see icon.ts). */
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 18px;
+  --icon-size: var(--icon-size-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -229,6 +249,16 @@
   --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);
+  /* The icon that sits in a control of that size (see icon.ts). */
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 18px;
+  --icon-size: var(--icon-size-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -294,6 +324,16 @@
   --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);
+  /* The icon that sits in a control of that size (see icon.ts). */
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 18px;
+  --icon-size: var(--icon-size-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -359,6 +399,16 @@
   --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);
+  /* The icon that sits in a control of that size (see icon.ts). */
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 18px;
+  --icon-size: var(--icon-size-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;
@@ -424,6 +474,16 @@
   --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);
+  /* The icon that sits in a control of that size (see icon.ts). */
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 18px;
+  --icon-size: var(--icon-size-md);
   --radius-sm: 2px;
   --radius-md: 3px;
   --radius-lg: 4px;

package/types/akcelik-strct.d.ts

@@ -95,6 +95,53 @@ 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;
+/**
+ * The icon size that goes with a control size — 14px at sm, 16px at md, 18px
+ * at lg. A control sets this beside its height so an icon inside it needs no
+ * size of its own; an icon that states one still wins (FR-64-01).
+ */
+export declare function strctIconSize(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>;
+  protected readonly iconSize: 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.
@@ -374,8 +421,17 @@ export declare class StrctIcon {
    * are set. Use `name` for runtime-registered custom icons.
    */
   readonly strictName: import("@angular/core").InputSignal<StrctIconName | null>;
-  /** Icon size in pixels. */
-  readonly size: import("@angular/core").InputSignal<number>;
+  /**
+   * Icon size in pixels.
+   *
+   * Left unset, the icon is the size its surroundings ask for: a control
+   * sets `--icon-size` beside its `--control-h`, so an icon in a small
+   * button is 14px and the same icon in a large one is 18px without either
+   * call site saying so. With no control around it the icon is 16px, as it
+   * always was. Setting this still wins — it writes the same property on the
+   * icon itself, which is nearer than anything enclosing it (FR-64-01).
+   */
+  readonly size: import("@angular/core").InputSignal<number | undefined>;
   /** Stroke width for outline icons. */
   readonly strokeWidth: import("@angular/core").InputSignal<number>;
   /** Optional status dot overlaid on the glyph (object state). */
@@ -407,7 +463,6 @@ export declare class StrctIcon {
   /** The badge's text, or null when there is nothing to say. */
   protected readonly countText: import("@angular/core").Signal<string | null>;
   /** 1.2em of the icon size, floored at 14px, as the badge's box. */
-  protected readonly countFontSize: import("@angular/core").Signal<number>;
   /** The mode as drawn. */
   readonly shownMode: import("@angular/core").Signal<StrctIconMode>;
   /** The badge as drawn. */
@@ -1369,8 +1424,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 +4227,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: 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 +4286,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 +4883,25 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: 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 +5159,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 +5175,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 +5294,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: import("@angular/core").Signal<string | null>;
   /** Placeholder text when empty. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
   /** Show a strength meter. */
@@ -5235,6 +5335,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 +5739,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: 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 +5769,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 +5830,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: import("@angular/core").Signal<string | null>;
   private readonly host;
   private readonly inputEl;
   protected readonly listId: string;
@@ -5812,6 +5942,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 +6028,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: 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 +6097,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 +6157,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: import("@angular/core").Signal<string | null>;
   private readonly host;
   /** Placeholder text when empty. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
@@ -6065,6 +6225,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 +6277,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: import("@angular/core").Signal<string | null>;
   private readonly host;
   /** Custom palette swatches. */
   readonly swatches: import("@angular/core").InputSignal<string[]>;
@@ -6140,6 +6315,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 +6411,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: import("@angular/core").Signal<string | null>;
   private readonly elementRef;
   /** Available options. */
   readonly options: import("@angular/core").InputSignal<StrctCascadeOption[]>;
@@ -6273,6 +6463,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;
@@ -9056,7 +9251,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
@@ -9500,7 +9695,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>;
@@ -9627,7 +9822,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>;
@@ -12033,6 +12228,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: import("@angular/core").Signal<string | null>;
   /** Minimum allowed value; null = unbounded. */
   readonly min: import("@angular/core").InputSignal<number | null>;
   /** Maximum allowed value; null = unbounded. */
@@ -12080,6 +12285,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;
@@ -12301,6 +12511,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: 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[]>;
@@ -12360,6 +12580,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;
@@ -12407,6 +12632,16 @@ 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>;
+  /** And the icon size that goes with it, for the icons it holds. */
+  protected readonly controlIconSize: 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). */
@@ -12451,6 +12686,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;