@life-cockpit/angular-ui-kit 2.8.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "Life Cockpit Design System - Angular UI component library",
   "license": "MIT",
   "repository": {

package/src/styles/_theme-dark.scss

@@ -212,6 +212,9 @@
   --color-surface: #{$color-surface-dark-base};
   --color-surface-2: #{$color-surface-dark-raised};
   --color-surface-sunken: #{$color-surface-dark-sunken};
+  // Darkest shell layer — the nav rail / sidebar sits below the app background,
+  // giving the two-tone shell (dark sidebar, slightly lighter content area).
+  --color-sidebar: #{$color-sidebar-dark};
   --color-surface-hover: rgba(132, 199, 212, 0.06);
   --color-surface-selected: rgba(32, 132, 151, 0.12);
   --color-surface-muted: rgba(255, 255, 255, 0.02);

package/src/styles/_theme-light.scss

@@ -206,6 +206,8 @@
   --color-surface: #ffffff;
   --color-surface-2: #{$color-neutral-50};
   --color-surface-sunken: #{$color-neutral-100};
+  // Sidebar reads as a subtle off-white rail against the white content area.
+  --color-sidebar: #{$color-neutral-50};
   --color-surface-hover: #{$color-neutral-100};
   --color-surface-selected: #{$color-primary-50};
   --color-surface-muted: #{$color-neutral-50};

package/src/styles/tokens/_all.scss

@@ -51,7 +51,8 @@ $color-accent-violet: #4e3f84;
 $color-surface-dark-base: #14222e; // DS2.0 dark card surface
 $color-surface-dark-raised: #1a2c3a; // DS2.0 raised dark surface
 $color-surface-dark-sunken: #0c1722; // DS2.0 sunken dark surface
-$color-background-dark: #111827; // DS2.0 dark app background (== neutral-900)
+$color-background-dark: #0a121b; // DS2.0 dark app background — deep teal-black, sits below the raised card surfaces
+$color-sidebar-dark: #070e15; // DS2.0 dark sidebar/nav rail — darkest shell layer (below app background)
 $color-text-dark-primary: #eef4f6; // DS2.0 dark primary text
 $color-text-dark-secondary: #aebfc7; // DS2.0 dark secondary text
 $color-text-dark-tertiary: #71858f; // DS2.0 dark muted text

package/src/styles/tokens/_colors.scss

@@ -51,7 +51,8 @@ $color-accent-violet: #4e3f84;
 $color-surface-dark-base: #14222e; // DS2.0 dark card surface
 $color-surface-dark-raised: #1a2c3a; // DS2.0 raised dark surface
 $color-surface-dark-sunken: #0c1722; // DS2.0 sunken dark surface
-$color-background-dark: #111827; // DS2.0 dark app background (== neutral-900)
+$color-background-dark: #0a121b; // DS2.0 dark app background — deep teal-black, sits below the raised card surfaces
+$color-sidebar-dark: #070e15; // DS2.0 dark sidebar/nav rail — darkest shell layer (below app background)
 $color-text-dark-primary: #eef4f6; // DS2.0 dark primary text
 $color-text-dark-secondary: #aebfc7; // DS2.0 dark secondary text
 $color-text-dark-tertiary: #71858f; // DS2.0 dark muted text

package/types/life-cockpit-angular-ui-kit.d.ts

@@ -57,7 +57,8 @@ declare const ColorAccentViolet = "#4e3f84";
 declare const ColorSurfaceDarkBase = "#14222e";
 declare const ColorSurfaceDarkRaised = "#1a2c3a";
 declare const ColorSurfaceDarkSunken = "#0c1722";
-declare const ColorBackgroundDark = "#111827";
+declare const ColorBackgroundDark = "#0a121b";
+declare const ColorSidebarDark = "#070e15";
 declare const ColorTextDarkPrimary = "#eef4f6";
 declare const ColorTextDarkSecondary = "#aebfc7";
 declare const ColorTextDarkTertiary = "#71858f";
@@ -449,7 +450,7 @@ declare class ButtonComponent {
  * - Variant styles (elevated, outlined, filled)
  * - Configurable padding (none, sm, md, lg)
  * - Border radius options (none, sm, md, lg, xl)
- * - Optional title display
+ * - Optional title display, with an optional leading icon tile
  * - Content projection for flexible body content
  *
  * @example
@@ -457,6 +458,11 @@ declare class ButtonComponent {
  * <lc-card title="Card Title" variant="elevated" padding="md">
  *   <p>Card body content</p>
  * </lc-card>
+ *
+ * <!-- With a leading brand-tile icon in the header -->
+ * <lc-card title="Repository" subtitle="Checkout &amp; profile" icon="git-branch">
+ *   ...
+ * </lc-card>
  * ```
  */
 declare class CardComponent {
@@ -469,8 +475,29 @@ declare class CardComponent {
      * Optional subtitle rendered below the title.
      */
     subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional leading icon (Tabler icon name) rendered as a teal brand tile to
+     * the left of the title. Only shown when `title` is set.
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Visual treatment of the leading icon tile.
+     * - brand: gradient teal tile with light ink (default)
+     * - subtle: translucent surface tile with brand-teal ink
+     * @default 'brand'
+     */
+    iconVariant: _angular_core.InputSignal<"brand" | "subtle">;
+    /**
+     * Size of the leading icon tile.
+     * - md: 2.25rem tile (default)
+     * - sm: compact ~1.75rem chip for dense card headers
+     * @default 'md'
+     */
+    iconSize: _angular_core.InputSignal<"sm" | "md">;
     /**
      * Optional badge text/count shown next to the title (e.g. item count).
+     * For a richer status badge (e.g. a leading status dot), project an
+     * `lc-badge` into the `card-badge` slot instead — the slot takes precedence.
      */
     badge: _angular_core.InputSignal<string | undefined>;
     /**
@@ -531,7 +558,7 @@ declare class CardComponent {
      */
     protected handleKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-badge]", "[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
 }
 
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -2469,10 +2496,12 @@ declare class ContainerComponent {
  * to get consistent rhythm between title, metadata and content below.
  *
  * Slots:
- *  - `[slot="breadcrumbs"]` — rendered above the title (e.g. `<lc-breadcrumbs>`)
- *  - `[slot="actions"]`     — right-aligned actions (buttons, menus)
- *  - `[slot="meta"]`        — secondary metadata under the title row (chips, tags)
- *  - default                — short header-internal description text
+ *  - `[slot="breadcrumbs"]`   — rendered above the title (e.g. `<lc-breadcrumbs>`)
+ *  - `[slot="title-suffix"]`  — inline beside the title, after the optional `badge`
+ *                               (for one or more status chips/badges)
+ *  - `[slot="actions"]`       — right-aligned actions (buttons, menus)
+ *  - `[slot="meta"]`          — secondary metadata under the title row (chips, tags)
+ *  - default                  — short header-internal description text
  *
  * Full-blown navigation primitives like `lc-tabs` — which render both the tab
  * strip **and** their panel content — belong **below** the page header, never
@@ -2486,6 +2515,8 @@ declare class ContainerComponent {
  *   [showDivider]="true"
  * >
  *   <lc-breadcrumbs slot="breadcrumbs" [items]="crumbs" />
+ *   <lc-chip slot="title-suffix" size="sm">Beta</lc-chip>
+ *   <lc-chip slot="title-suffix" size="sm" variant="success">Ready</lc-chip>
  *   <lc-button slot="actions" variant="primary">New report</lc-button>
  *   <lc-chip slot="meta">12 active</lc-chip>
  * </lc-page-header>
@@ -2494,6 +2525,23 @@ declare class ContainerComponent {
 declare class PageHeaderComponent {
     /** Main heading text. */
     title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional leading icon (Tabler icon name) rendered as a brand tile to the
+     * left of the title block, mirroring `lc-card`'s header icon. Purely additive.
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Visual treatment of the leading icon tile.
+     * - brand: gradient teal tile with light ink (default)
+     * - subtle: translucent surface tile with brand-teal ink
+     * @default 'brand'
+     */
+    iconVariant: _angular_core.InputSignal<"brand" | "subtle">;
+    /**
+     * Size of the leading icon tile.
+     * @default 'md'
+     */
+    iconSize: _angular_core.InputSignal<"sm" | "md">;
     /** Short supporting line below the title. */
     subtitle: _angular_core.InputSignal<string | undefined>;
     /**
@@ -2525,7 +2573,7 @@ declare class PageHeaderComponent {
     noPaddingX: _angular_core.InputSignal<boolean>;
     protected hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "lc-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "noPaddingX": { "alias": "noPaddingX"; "required": false; "isSignal": true; }; }, {}, never, ["[slot='breadcrumbs']", "[slot='actions']", "[slot='meta']", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "lc-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "noPaddingX": { "alias": "noPaddingX"; "required": false; "isSignal": true; }; }, {}, never, ["[slot='breadcrumbs']", "[slot='title-suffix']", "[slot='title-suffix']", "[slot='title-suffix']", "[slot='actions']", "[slot='meta']", "*"], true, never>;
 }
 
 /** Where the layout takes its height from. */
@@ -3734,12 +3782,18 @@ declare class BadgeComponent {
     size: _angular_core.InputSignal<BadgeSize>;
     /** Whether the badge has fully rounded corners (pill shape) */
     rounded: _angular_core.InputSignal<boolean>;
+    /**
+     * Render a small leading status dot, filled in the variant's `currentColor`,
+     * before the label (the "● label" pattern). Purely additive.
+     * @default false
+     */
+    dot: _angular_core.InputSignal<boolean>;
     /**
      * Computed CSS classes for the badge
      */
     badgeClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "lc-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "lc-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 interface ToggleOption {
@@ -7417,5 +7471,158 @@ declare class StageListComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StageListComponent, "lc-stage-list", never, { "stages": { "alias": "stages"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showBar": { "alias": "showBar"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "stageClick": "stageClick"; }, never, never, true, never>;
 }
 
-export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resolveFileIcon };
-export type { AccordionChevronPosition, ActionClickEvent, AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatAttachment, ChatFileAttachEvent, ChatMessage, ChatMessageRole, ChatMessageStatus, ChatRenderMarkdown, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ComboboxOption, ComboboxSize, ComboboxValue, ConfirmDialogVariant, ConfirmOptions, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconName, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, LogLevel, LogLine, LogViewerVariant, MarkdownChangesHighlighted, MarkdownHeading, MarkdownLinkClick, MarkdownRendered, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PageLayoutFill, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RenderPart, RequireTextConfig, RichTextEditorMode, RowToggleEvent, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StageItem, StageListSize, StatTrendDirection, StepState, StepperStep, TabOrientation, TableAction, TableActionsAlign, TableColumn, TableSize, TableTreeConfig, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, TreeNode, TreeNodeType, WaterfallItem };
+/**
+ * Emphasis treatment applied to a row's value.
+ * - `mono` renders the value in the monospace font (paths, URLs, hashes).
+ */
+type DescriptionListEmphasis = 'default' | 'strong' | 'muted' | 'primary' | 'mono';
+interface DescriptionListItem {
+    /** Label shown on the term side of the row. */
+    term: string;
+    /** Value shown on the description side of the row. */
+    value: string;
+    /**
+     * Optional qualifying suffix appended after the value on the same line and
+     * rendered muted (e.g. a rating grade or "last checked" hint). Wraps if the
+     * combined value + suffix exceed the available width.
+     */
+    valueSuffix?: string;
+    /** Optional link — renders the value as an anchor. */
+    href?: string;
+    /** Optional visual emphasis for the value. @default 'default' */
+    emphasis?: DescriptionListEmphasis;
+    /** Optional opaque payload echoed back in `itemClick`. */
+    id?: string;
+}
+type DescriptionListLayout = 'rows' | 'stacked';
+type DescriptionListSize = 'sm' | 'md';
+/**
+ * Per-row separator style (applies to the `rows` layout).
+ * - `line`    solid hairline under each row (default — unchanged look)
+ * - `divider` subtle dashed line, for the dense card look
+ * - `none`    no row separator
+ *
+ * Orthogonal to `leaders`, which draws dotted leaders *between* term and value.
+ */
+type DescriptionListSeparator = 'line' | 'divider' | 'none';
+/**
+ * Description list for key/value metadata (a styled `<dl>`).
+ *
+ * Features:
+ * - `rows` layout: term on the left, value on the right, with an optional
+ *   dotted leader line connecting them (the DS2.0 "spec sheet" look).
+ * - `stacked` layout: term above value, for narrow columns.
+ * - Per-row value emphasis and optional links.
+ * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility.
+ *
+ * @example
+ * ```html
+ * <lc-description-list
+ *   [items]="[
+ *     { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },
+ *     { term: 'Access', value: 'Token stored · read only' },
+ *     { term: 'Status', value: 'Maintained', emphasis: 'strong' }
+ *   ]"
+ *   [leaders]="true" />
+ * ```
+ */
+declare class DescriptionListComponent {
+    /** Rows to render. */
+    readonly items: _angular_core.InputSignal<readonly DescriptionListItem[]>;
+    /**
+     * Row layout.
+     * - rows: term left / value right (default)
+     * - stacked: term above value
+     * @default 'rows'
+     */
+    readonly layout: _angular_core.InputSignal<DescriptionListLayout>;
+    /**
+     * Draw a dotted leader line between term and value. Only applies to the
+     * `rows` layout.
+     * @default false
+     */
+    readonly leaders: _angular_core.InputSignal<boolean>;
+    /** Density of the rows. @default 'md' */
+    readonly size: _angular_core.InputSignal<DescriptionListSize>;
+    /**
+     * Per-row separator style for the `rows` layout. Defaults to `line`, which is
+     * identical to the previous behavior. Orthogonal to `leaders`.
+     * @default 'line'
+     */
+    readonly separator: _angular_core.InputSignal<DescriptionListSeparator>;
+    /** Emitted when a row is clicked. */
+    readonly itemClick: _angular_core.OutputEmitterRef<DescriptionListItem>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected valueClass(item: DescriptionListItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DescriptionListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DescriptionListComponent, "lc-description-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "leaders": { "alias": "leaders"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+/**
+ * Status of a single pipeline node.
+ * - complete: finished (teal check)
+ * - current:  in progress / active (teal, subtle pulse)
+ * - pending:  not started yet (muted, hollow)
+ * - warning:  needs attention (amber)
+ * - error:    failed (red)
+ */
+type PipelineStatus = 'complete' | 'current' | 'pending' | 'warning' | 'error';
+interface PipelineStep {
+    /** Node label. */
+    label: string;
+    /** Optional secondary line under the label. */
+    caption?: string;
+    /** Status that drives the node color and default icon. */
+    status: PipelineStatus;
+    /** Optional icon (Tabler name) overriding the status default. */
+    icon?: string;
+    /** Optional opaque payload echoed back in `stepClick`. */
+    id?: string;
+}
+type PipelineOrientation = 'horizontal' | 'vertical';
+type PipelineSize = 'sm' | 'md';
+/**
+ * Pipeline — a status timeline of connected process nodes.
+ *
+ * Unlike {@link StepperComponent} (a navigation stepper whose states derive
+ * from the active index), each pipeline node carries its own explicit status,
+ * so it can show completed, current, pending, warning and error nodes in the
+ * same chain — with an optional caption under each label.
+ *
+ * @example
+ * ```html
+ * <lc-pipeline
+ *   [steps]="[
+ *     { label: 'Connect', caption: 'Token valid', status: 'complete' },
+ *     { label: 'Checkout', caption: '2 hours ago', status: 'complete' },
+ *     { label: 'Analyze', caption: 'Running…', status: 'current' },
+ *     { label: 'Graph', caption: 'Out of date', status: 'warning' }
+ *   ]" />
+ * ```
+ */
+declare class PipelineComponent {
+    /** Ordered pipeline nodes. */
+    readonly steps: _angular_core.InputSignal<readonly PipelineStep[]>;
+    /** Layout direction. @default 'horizontal' */
+    readonly orientation: _angular_core.InputSignal<PipelineOrientation>;
+    /**
+     * Node/connector scale.
+     * - md: default nodes (1.75rem)
+     * - sm: compact spine — smaller nodes, thinner connectors, tighter grid
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<PipelineSize>;
+    /** Whether nodes are clickable (emits `stepClick`). @default false */
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    /** Emitted when a node is activated (only when `clickable`). */
+    readonly stepClick: _angular_core.OutputEmitterRef<PipelineStep>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    protected iconFor(step: PipelineStep): string;
+    protected stepClass(step: PipelineStep): string;
+    protected onActivate(step: PipelineStep): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PipelineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PipelineComponent, "lc-pipeline", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
+}
+
+export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resolveFileIcon };
+export type { AccordionChevronPosition, ActionClickEvent, AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatAttachment, ChatFileAttachEvent, ChatMessage, ChatMessageRole, ChatMessageStatus, ChatRenderMarkdown, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ComboboxOption, ComboboxSize, ComboboxValue, ConfirmDialogVariant, ConfirmOptions, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DescriptionListEmphasis, DescriptionListItem, DescriptionListLayout, DescriptionListSeparator, DescriptionListSize, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconName, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, LogLevel, LogLine, LogViewerVariant, MarkdownChangesHighlighted, MarkdownHeading, MarkdownLinkClick, MarkdownRendered, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PageLayoutFill, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PipelineOrientation, PipelineSize, PipelineStatus, PipelineStep, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RenderPart, RequireTextConfig, RichTextEditorMode, RowToggleEvent, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StageItem, StageListSize, StatTrendDirection, StepState, StepperStep, TabOrientation, TableAction, TableActionsAlign, TableColumn, TableSize, TableTreeConfig, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, TreeNode, TreeNodeType, WaterfallItem };