@akcelik/strct 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "6.2.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/_tokens.scss

@@ -104,6 +104,11 @@
   --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;
@@ -174,6 +179,11 @@
   --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;
@@ -244,6 +254,11 @@
   --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;
@@ -314,6 +329,11 @@
   --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;
@@ -384,6 +404,11 @@
   --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;
@@ -454,6 +479,11 @@
   --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

@@ -108,6 +108,12 @@ export interface StrctThresholds {
 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.
  *
@@ -126,6 +132,7 @@ 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": {
@@ -414,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). */
@@ -447,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. */
@@ -4220,6 +4235,8 @@ export declare class StrctSearchbox implements ControlValueAccessor {
   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>;
@@ -4874,6 +4891,8 @@ export declare class StrctInput {
   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>;
@@ -5283,6 +5302,8 @@ export declare class StrctPassword implements ControlValueAccessor {
   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. */
@@ -5726,6 +5747,8 @@ export declare class StrctInputMask implements ControlValueAccessor {
   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. */
@@ -5815,6 +5838,8 @@ export declare class StrctCombobox implements ControlValueAccessor {
   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;
@@ -6011,6 +6036,8 @@ export declare class StrctSelect implements ControlValueAccessor {
   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). */
@@ -6138,6 +6165,8 @@ export declare class StrctDatepicker implements ControlValueAccessor {
   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>;
@@ -6256,6 +6285,8 @@ export declare class StrctColorPicker implements ControlValueAccessor {
   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[]>;
@@ -6388,6 +6419,8 @@ export declare class StrctCascadeSelect extends StrctCascadeHost implements Cont
   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[]>;
@@ -12203,6 +12236,8 @@ export declare class StrctNumber implements ControlValueAccessor {
   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. */
@@ -12484,6 +12519,8 @@ export declare class StrctTreeSelect implements ControlValueAccessor {
   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[]>;
@@ -12603,6 +12640,8 @@ export declare class StrctDatetimePicker implements ControlValueAccessor {
   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). */