@lifecorner/angular-ui-kit 3.10.1 → 3.11.1

package/fesm2022/lifecorner-angular-ui-kit-timeline.mjs

@@ -177,7 +177,8 @@ var TimelineComponent = class TimelineComponent {
 					"variant",
 					"size",
 					"rounded",
-					"dot"
+					"dot",
+					"wrap"
 				]
 			},
 			{

package/fesm2022/lifecorner-angular-ui-kit-timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-timeline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/timeline/timeline-templates.directive.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport type { TimelineItem } from './timeline.component';\n\n/** Template context for the per-item timeline templates. */\nexport interface TimelineTemplateContext {\n  $implicit: TimelineItem;\n}\n\n/**\n * Free content slot rendered below an entry's header line — arbitrary markup\n * per item (code block, prose, collapsible text, diff), not just a\n * description string. The template receives the item as `$implicit`.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineContent let-item>\n *     @if (item.state === 'failed') {\n *       <lc-code-block [code]=\"item.command\" language=\"bash\" />\n *     }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineContent]',\n  standalone: true,\n})\nexport class TimelineContentDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n\n/**\n * Live meta slot rendered right-aligned in an entry's header line — for\n * values the app keeps ticking itself (\"läuft seit 42 s\"). Takes precedence\n * over the item's static `meta` string.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineMeta let-item>\n *     @if (item.state === 'running') { {{ elapsed() }} }\n *     @else { {{ item.meta }} }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineMeta]',\n  standalone: true,\n})\nexport class TimelineMetaDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  computed,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\nimport {\n  TimelineContentDirective,\n  TimelineMetaDirective,\n} from './timeline-templates.directive';\n\n/**\n * Semantic state of a timeline entry (e.g. one step of a run transcript).\n * Drives the marker color via the semantic tokens; `running` additionally\n * pulses (respecting `prefers-reduced-motion`).\n */\nexport type TimelineItemState = 'success' | 'running' | 'failed' | 'pending';\n\n/** Heading level of the item titles (3.3, G-11). */\nexport type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface TimelineItem {\n  /** Optional stable identity for rendering (falls back to the list index). */\n  id?: string;\n  /** Title of the event */\n  title: string;\n  /** Optional monospace suffix after the title (e.g. a tool id like `gate_test`). */\n  titleMono?: string;\n  /** Optional badge label in the header line (e.g. \"Fehlgeschlagen\"). */\n  badge?: string;\n  /** Variant of the header badge. @default 'default' */\n  badgeVariant?: BadgeVariant;\n  /** Optional right-aligned header meta (duration / time). */\n  meta?: string;\n  /** Optional description */\n  description?: string;\n  /** Optional timestamp string */\n  timestamp?: string;\n  /**\n   * Machine-readable moment of the timestamp (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`), set as the `<time datetime>` attribute so\n   * „heute 18:05“ carries its exact date (3.3, G-11).\n   */\n  datetime?: string;\n  /** Optional icon name (heroicon) */\n  icon?: string;\n  /** Optional color for the dot/icon */\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';\n  /**\n   * Semantic entry state — colors the marker from the semantic tokens and\n   * takes precedence over `color`. `running` pulses the marker.\n   */\n  state?: TimelineItemState;\n}\n\nexport type TimelineOrientation = 'vertical' | 'horizontal';\n\n/** Marker color class per entry state. */\nconst STATE_COLORS: Record<TimelineItemState, string> = {\n  success: 'success',\n  running: 'primary',\n  failed: 'error',\n  pending: 'neutral',\n};\n\n/**\n * Timeline component for chronological event display.\n *\n * Features:\n * - Vertical timeline with connecting line\n * - Semantic status colors per event (info, success, warning, error)\n * - Entry states (`success | running | failed | pending`); `running` pulses\n * - Composable header line: title + monospace suffix (`titleMono`) + badge\n *   (`badge`/`badgeVariant`) + right-aligned meta (`meta` or the\n *   `lcTimelineMeta` template for live values)\n * - Free content per entry below the header via the `lcTimelineContent`\n *   template (code blocks, prose, diffs, …)\n * - Date and description display per item\n * - Icon support for timeline markers\n * - Dark mode support\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"events\"></lc-timeline>\n * ```\n */\n@Component({\n  selector: 'lc-timeline',\n  standalone: true,\n  imports: [IconComponent, BadgeComponent, NgTemplateOutlet],\n  templateUrl: './timeline.component.html',\n  styleUrls: ['./timeline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimelineComponent {\n  /**\n   * List of timeline events.\n   */\n  items = input.required<TimelineItem[]>();\n\n  /**\n   * Layout orientation.\n   * @default 'vertical'\n   */\n  orientation = input<TimelineOrientation>('vertical');\n\n  /**\n   * Compact mode reduces spacing.\n   * @default false\n   */\n  compact = input<boolean>(false);\n\n  /**\n   * Heading level of the item titles (`h2`–`h6`), so each event is reachable\n   * by heading navigation. Unset: a plain paragraph (3.2). Semantics only,\n   * the look stays the same.\n   */\n  headingLevel = input<TimelineHeadingLevel | undefined>(undefined);\n\n  /** Optional per-item content template (below the header line). */\n  protected contentTemplate = contentChild(TimelineContentDirective);\n\n  /** Optional per-item live meta template (right-aligned in the header). */\n  protected metaTemplate = contentChild(TimelineMetaDirective);\n\n  protected timelineClasses = computed(() => {\n    return [\n      'timeline',\n      `timeline--${this.orientation()}`,\n      this.compact() ? 'timeline--compact' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  protected markerClasses(item: TimelineItem): string {\n    const color = item.state ? STATE_COLORS[item.state] : item.color || 'primary';\n    return [\n      'timeline__marker',\n      `timeline__marker--${color}`,\n      item.state === 'running' ? 'timeline__marker--running' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n}\n","<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-timeline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/timeline/timeline-templates.directive.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport type { TimelineItem } from './timeline.component';\n\n/** Template context for the per-item timeline templates. */\nexport interface TimelineTemplateContext {\n  $implicit: TimelineItem;\n}\n\n/**\n * Free content slot rendered below an entry's header line — arbitrary markup\n * per item (code block, prose, collapsible text, diff), not just a\n * description string. The template receives the item as `$implicit`.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineContent let-item>\n *     @if (item.state === 'failed') {\n *       <lc-code-block [code]=\"item.command\" language=\"bash\" />\n *     }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineContent]',\n  standalone: true,\n})\nexport class TimelineContentDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n\n/**\n * Live meta slot rendered right-aligned in an entry's header line — for\n * values the app keeps ticking itself (\"läuft seit 42 s\"). Takes precedence\n * over the item's static `meta` string.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineMeta let-item>\n *     @if (item.state === 'running') { {{ elapsed() }} }\n *     @else { {{ item.meta }} }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineMeta]',\n  standalone: true,\n})\nexport class TimelineMetaDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  computed,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\nimport {\n  TimelineContentDirective,\n  TimelineMetaDirective,\n} from './timeline-templates.directive';\n\n/**\n * Semantic state of a timeline entry (e.g. one step of a run transcript).\n * Drives the marker color via the semantic tokens; `running` additionally\n * pulses (respecting `prefers-reduced-motion`).\n */\nexport type TimelineItemState = 'success' | 'running' | 'failed' | 'pending';\n\n/** Heading level of the item titles (3.3, G-11). */\nexport type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface TimelineItem {\n  /** Optional stable identity for rendering (falls back to the list index). */\n  id?: string;\n  /** Title of the event */\n  title: string;\n  /** Optional monospace suffix after the title (e.g. a tool id like `gate_test`). */\n  titleMono?: string;\n  /** Optional badge label in the header line (e.g. \"Fehlgeschlagen\"). */\n  badge?: string;\n  /** Variant of the header badge. @default 'default' */\n  badgeVariant?: BadgeVariant;\n  /** Optional right-aligned header meta (duration / time). */\n  meta?: string;\n  /** Optional description */\n  description?: string;\n  /** Optional timestamp string */\n  timestamp?: string;\n  /**\n   * Machine-readable moment of the timestamp (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`), set as the `<time datetime>` attribute so\n   * „heute 18:05“ carries its exact date (3.3, G-11).\n   */\n  datetime?: string;\n  /** Optional icon name (heroicon) */\n  icon?: string;\n  /** Optional color for the dot/icon */\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';\n  /**\n   * Semantic entry state — colors the marker from the semantic tokens and\n   * takes precedence over `color`. `running` pulses the marker.\n   */\n  state?: TimelineItemState;\n}\n\nexport type TimelineOrientation = 'vertical' | 'horizontal';\n\n/** Marker color class per entry state. */\nconst STATE_COLORS: Record<TimelineItemState, string> = {\n  success: 'success',\n  running: 'primary',\n  failed: 'error',\n  pending: 'neutral',\n};\n\n/**\n * Timeline component for chronological event display.\n *\n * Features:\n * - Vertical timeline with connecting line\n * - Semantic status colors per event (info, success, warning, error)\n * - Entry states (`success | running | failed | pending`); `running` pulses\n * - Composable header line: title + monospace suffix (`titleMono`) + badge\n *   (`badge`/`badgeVariant`) + right-aligned meta (`meta` or the\n *   `lcTimelineMeta` template for live values)\n * - Free content per entry below the header via the `lcTimelineContent`\n *   template (code blocks, prose, diffs, …)\n * - Date and description display per item\n * - Icon support for timeline markers\n * - Dark mode support\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"events\"></lc-timeline>\n * ```\n */\n@Component({\n  selector: 'lc-timeline',\n  standalone: true,\n  imports: [IconComponent, BadgeComponent, NgTemplateOutlet],\n  templateUrl: './timeline.component.html',\n  styleUrls: ['./timeline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimelineComponent {\n  /**\n   * List of timeline events.\n   */\n  items = input.required<TimelineItem[]>();\n\n  /**\n   * Layout orientation.\n   * @default 'vertical'\n   */\n  orientation = input<TimelineOrientation>('vertical');\n\n  /**\n   * Compact mode reduces spacing.\n   * @default false\n   */\n  compact = input<boolean>(false);\n\n  /**\n   * Heading level of the item titles (`h2`–`h6`), so each event is reachable\n   * by heading navigation. Unset: a plain paragraph (3.2). Semantics only,\n   * the look stays the same.\n   */\n  headingLevel = input<TimelineHeadingLevel | undefined>(undefined);\n\n  /** Optional per-item content template (below the header line). */\n  protected contentTemplate = contentChild(TimelineContentDirective);\n\n  /** Optional per-item live meta template (right-aligned in the header). */\n  protected metaTemplate = contentChild(TimelineMetaDirective);\n\n  protected timelineClasses = computed(() => {\n    return [\n      'timeline',\n      `timeline--${this.orientation()}`,\n      this.compact() ? 'timeline--compact' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  protected markerClasses(item: TimelineItem): string {\n    const color = item.state ? STATE_COLORS[item.state] : item.color || 'primary';\n    return [\n      'timeline__marker',\n      `timeline__marker--${color}`,\n      item.state === 'running' ? 'timeline__marker--running' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n}\n","<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.10.1",
+  "version": "3.11.1",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit-badge.d.ts

@@ -8,6 +8,7 @@ export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
  * - Semantic color variants (primary, secondary, success, warning, error, info, neutral)
  * - Multiple size options (xs, sm, md, lg)
  * - Pill-shaped rounded mode
+ * - Optional wrapping for long, sentence-like labels (`wrap`)
  * - Content projection for labels or count values
  *
  * @example
@@ -29,6 +30,16 @@ export declare class BadgeComponent {
    * @default false
    */
   dot: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Let a long label wrap onto centred lines instead of staying on one line:
+   * the fixed height becomes a minimum height, lines are 1.25 high, and the
+   * badge is never wider than its container (a word wider than the container
+   * breaks). With `rounded`, the corners keep the one-line pill radius, so a
+   * two-line badge isn't clipped by half-circle ends. A label that fits looks
+   * as before. Use it for sentence-like status labels (SI-15), not for counts.
+   * @default false
+   */
+  wrap: import("@angular/core").InputSignal<boolean>;
   /**
    * Computed CSS classes for the badge
    */
@@ -55,5 +66,10 @@ export declare class BadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "wrap": {
+      "alias": "wrap";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }

package/types/lifecorner-angular-ui-kit-button.d.ts

@@ -139,6 +139,15 @@ export declare class ButtonComponent {
  * cannot be disabled or busy — render plain text or an `lc-button` for those
  * states. An `iconOnly` link needs an `aria-label`.
  *
+ * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default
+ * `break-word`): `anywhere` lets a single word wider than the button's line
+ * break inside the word, so the button stays inside its container (WCAG 1.4.10
+ * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an
+ * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a
+ * one-word button shrink with its neighbours, which is why the default stays
+ * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header
+ * actions and the next-step-card's narrow actions.
+ *
  * @example
  * ```html
  * <a lcButton variant="primary" size="lg" href="/de/neuigkeiten">Schau uns beim Bauen zu</a>

package/types/lifecorner-angular-ui-kit-icon.d.ts

@@ -123,15 +123,25 @@ export declare class IconComponent {
    * - md: 24px (default)
    * - lg: 32px
    * - xl: 40px
+   *
+   * Set by the `icon-<size>` class in the component stylesheet; `lc-icon`
+   * writes no inline size (3.11.1).
    * @default "md"
    */
   readonly size: import("@angular/core").InputSignal<IconSize>;
   /**
-   * Icon color
-   * Can be:
-   * - CSS color: "#FF5733", "rgb(255, 87, 51)"
-   * - CSS variable: "var(--color-primary-500)"
-   * - "currentColor" (default - inherits from parent)
+   * Icon colour. By default the icon takes the text colour of its parent
+   * (`currentColor`, through the stylesheet) and `lc-icon` renders **no
+   * `style` attribute**, so it works under a `style-src 'self'` CSP (3.11.1).
+   *
+   * Any other value, a CSS colour (`#FF5733`, `rgb(…)`) or a variable
+   * (`var(--color-primary-500)`), becomes the `<svg>`'s inline `color`, set
+   * through CSSOM, which such a CSP allows in the browser. In prerendered HTML
+   * it is a `style` attribute, which that CSP blocks until the app hydrates,
+   * so the icon shows the parent's colour until then. Under a strict CSP,
+   * colour the icon from your stylesheet instead: set `color` on `lc-icon` or
+   * on its parent. `currentColor` in any letter case, and an empty string,
+   * mean the default.
    * @default "currentColor"
    */
   readonly color: import("@angular/core").InputSignal<string>;
@@ -172,7 +182,8 @@ export declare class IconComponent {
    */
   readonly iconPath: import("@angular/core").Signal<string>;
   /**
-   * Computed size in pixels
+   * Computed size in pixels, for the svg's `width`/`height` attributes; the
+   * same values as the `icon-<size>` rules in icon.component.scss
    * @internal
    */
   readonly sizeInPixels: import("@angular/core").Signal<string>;
@@ -182,7 +193,8 @@ export declare class IconComponent {
    */
   readonly computedClasses: import("@angular/core").Signal<string>;
   /**
-   * Computed inline color style
+   * The `color` input as handed to the svg: a custom value becomes its inline
+   * colour (CSSOM), the default writes nothing (see `decorateSvg`)
    * @internal
    */
   readonly colorStyle: import("@angular/core").Signal<string>;