@pecb-ui/components 1.1.20 → 1.1.22

package/index.d.ts

@@ -7,21 +7,32 @@ import { ControlValueAccessor } from '@angular/forms';
 import * as _pecb_ui_components from '@pecb-ui/components';
 import { Observable } from 'rxjs';
 
-type ButtonVariant = 'primary' | 'primary-outline' | 'primary-2' | 'primary-2-outline' | 'neutral' | 'neutral-outline' | 'secondary' | 'text' | 'text-muted' | 'text-brand' | 'success' | 'destructive' | 'destructive-outline';
+type ButtonVariant = 'primary' | 'primary-outline' | 'primary-2' | 'primary-2-outline' | 'neutral' | 'neutral-outline' | 'secondary' | 'light-outline' | 'text' | 'text-muted' | 'text-brand' | 'success' | 'destructive' | 'destructive-outline' | 'segment';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 type ButtonIconStyle = 'none' | 'leading' | 'trailing' | 'icon-only';
+type ButtonShape = 'default' | 'pill';
 declare class ButtonComponent {
     private readonly sanitizer;
     private readonly registry;
     id: _angular_core.InputSignal<string>;
     /**
-     * The visual style variant of the button
+     * The visual style variant of the button.
+     *
+     * `segment` renders a transparent track for segmented/toggle controls; its
+     * active state is driven by `ariaPressed` (a light `#ECECEC` fill with ink
+     * text), so a segmented control is authored as a row of
+     * `<pecb-button variant="segment" [ariaPressed]="isActive">`.
      */
     variant: _angular_core.InputSignal<ButtonVariant>;
     /**
      * The size of the button
      */
     size: _angular_core.InputSignal<ButtonSize>;
+    /**
+     * Corner shape. `pill` fully rounds the rendered `<button>` while keeping the
+     * padding and height that `size` sets — use it for switcher/filter pills.
+     */
+    shape: _angular_core.InputSignal<ButtonShape>;
     /**
      * Icon placement style
      */
@@ -107,7 +118,7 @@ declare class ButtonComponent {
     onClick(event: MouseEvent): void;
     onKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "pecb-button", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconStyle": { "alias": "iconStyle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "pecb-button", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "iconStyle": { "alias": "iconStyle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 type CardElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl';
@@ -940,6 +951,20 @@ declare class InputComponent implements ControlValueAccessor {
      * Event emitted when clear button is clicked
      */
     cleared: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Raw keydown from the underlying `<input>`. Use it for key-driven entry
+     * (committing a chip on comma/Enter, submitting on Enter, and so on) — the
+     * event is emitted un-modified, so the handler decides whether to
+     * `preventDefault()`.
+     *
+     * Named `inputKeydown` rather than `keydown` so it does not shadow the native
+     * DOM event on the host element.
+     */
+    inputKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    /**
+     * Raw keyup from the underlying `<input>`. Companion to {@link inputKeydown}.
+     */
+    inputKeyup: _angular_core.OutputEmitterRef<KeyboardEvent>;
     value: _angular_core.WritableSignal<string>;
     isFocused: _angular_core.WritableSignal<boolean>;
     showPassword: _angular_core.WritableSignal<boolean>;
@@ -952,6 +977,8 @@ declare class InputComponent implements ControlValueAccessor {
     get computedLeftIcon(): string | undefined;
     get computedRightIcon(): string | undefined;
     onInput(event: Event): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onKeyUp(event: KeyboardEvent): void;
     onFocus(): void;
     onBlur(): void;
     clearValue(event: MouseEvent): void;
@@ -963,7 +990,87 @@ declare class InputComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "pecb-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "showPasswordAriaLabel": { "alias": "showPasswordAriaLabel"; "required": false; "isSignal": true; }; "hidePasswordAriaLabel": { "alias": "hidePasswordAriaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "cleared": "cleared"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "pecb-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "showPasswordAriaLabel": { "alias": "showPasswordAriaLabel"; "required": false; "isSignal": true; }; "hidePasswordAriaLabel": { "alias": "hidePasswordAriaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "cleared": "cleared"; "inputKeydown": "inputKeydown"; "inputKeyup": "inputKeyup"; }, never, never, true, never>;
+}
+
+/**
+ * A bordered, floating-label multiline field — the `pecb-input` look with a
+ * `<textarea>` behind it. Supports optional auto-resize and a character
+ * counter, and works with reactive forms via `ControlValueAccessor`.
+ *
+ * @example
+ * ```html
+ * <pecb-textarea
+ *   label="Description"
+ *   [rows]="5"
+ *   [maxLength]="500"
+ *   autoResize
+ *   formControlName="description"
+ * ></pecb-textarea>
+ * ```
+ *
+ * @publicApi
+ */
+declare class TextareaComponent implements ControlValueAccessor {
+    private readonly textareaEl;
+    /** Unique ID for the textarea element */
+    id: _angular_core.InputSignal<string>;
+    /** Floating label text */
+    label: _angular_core.InputSignal<string | undefined>;
+    /** Placeholder text (shown when the label is absent or floated) */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Visible rows — the field's resting height */
+    rows: _angular_core.InputSignal<number>;
+    /**
+     * Grow the field to fit its content instead of scrolling. The `rows` value
+     * still sets the starting height.
+     */
+    autoResize: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Hard character limit. When set, a `used / limit` counter is shown beneath
+     * the field.
+     */
+    maxLength: _angular_core.InputSignal<number | undefined>;
+    /** Width of the wrapper — any valid CSS value. Defaults to 100%. */
+    width: _angular_core.InputSignal<string | undefined>;
+    /** Whether the field is required */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the field is read-only */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the field is disabled */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /** Whether to show the error state */
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message shown beneath the field when `error` is set */
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    /** Helper text shown beneath the field */
+    helperText: _angular_core.InputSignal<string | undefined>;
+    /** Emitted whenever the value changes */
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Emitted on blur */
+    blurred: _angular_core.OutputEmitterRef<void>;
+    /** Emitted on focus */
+    focused: _angular_core.OutputEmitterRef<void>;
+    value: _angular_core.WritableSignal<string>;
+    isFocused: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    constructor();
+    get wrapperClasses(): string[];
+    /** The counter is only meaningful once a limit exists. */
+    showCharCount: _angular_core.Signal<boolean>;
+    charCount: _angular_core.Signal<number>;
+    hasDescription: _angular_core.Signal<boolean>;
+    onInput(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    focus(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "pecb-textarea", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; }, never, never, true, never>;
 }
 
 type RadioVariant = 'dot' | 'filled';
@@ -1123,10 +1230,19 @@ declare class DropdownComponent implements ControlValueAccessor {
 }
 
 type RightModalSize = 'sm' | 'md' | 'lg';
+type RightModalPosition = 'right' | 'center';
 declare class RightModalComponent implements OnDestroy {
     id: _angular_core.InputSignal<string>;
     isOpen: _angular_core.ModelSignal<boolean>;
     size: _angular_core.InputSignal<RightModalSize>;
+    /**
+     * Where the panel sits. `right` (default) is the full-height drawer;
+     * `center` is a centered dialog that sizes to its content and rounds all
+     * four corners. `size` still selects the width in both.
+     *
+     * Read when the modal opens — change it while closed, not mid-open.
+     */
+    position: _angular_core.InputSignal<RightModalPosition>;
     closeOnBackdropClick: _angular_core.InputSignal<boolean>;
     closeOnEscape: _angular_core.InputSignal<boolean>;
     showCloseButton: _angular_core.InputSignal<boolean>;
@@ -1152,7 +1268,7 @@ declare class RightModalComponent implements OnDestroy {
     private closeOverlay;
     private destroyOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
 }
 declare class RightModalHeaderDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalHeaderDirective, never>;
@@ -2519,7 +2635,7 @@ declare class MetricsCardComponent {
  * - `soft`: dot-less pill — tinted background + colored text (uses `status` for the tone)
  * - `ribbon`: colored tag with bottom-right arrow fold
  */
-type BadgeVariant = 'dot' | 'count' | 'status' | 'soft' | 'ribbon';
+type BadgeVariant = 'dot' | 'count' | 'status' | 'soft' | 'solid' | 'inverse' | 'ribbon';
 /**
  * Count badge size.
  * - `default`: 20px height, 14px font
@@ -2529,7 +2645,7 @@ type BadgeSize = 'default' | 'small';
 /**
  * Status badge type — determines the dot color.
  */
-type BadgeStatus = 'success' | 'error' | 'default' | 'processing' | 'warning';
+type BadgeStatus = 'success' | 'error' | 'default' | 'processing' | 'warning' | 'dark';
 /**
  * Ribbon badge color.
  */
@@ -2882,6 +2998,137 @@ declare class NestedTableComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NestedTableComponent, "pecb-nested-table", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "childColumns": { "alias": "childColumns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; }, { "rowToggle": "rowToggle"; "childToggle": "childToggle"; }, ["childContent"], never, true, never>;
 }
 
+type StatusBannerTone = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+type StatusBannerChipVariant = 'solid' | 'inverse' | 'soft';
+/** A pill rendered next to the banner title (e.g. a state and a product name). */
+interface StatusBannerChip {
+    label: string;
+    /** Badge colour; defaults to the banner tone's badge status. */
+    status?: BadgeStatus;
+    /** `solid` (filled) by default; `inverse` = white pill on the tinted surface. */
+    variant?: StatusBannerChipVariant;
+}
+/**
+ * Tinted, bordered banner strip: a white icon tile, a bold title with pills,
+ * a one-line description and right-aligned actions (projected).
+ * Used for plan / subscription states, account notices, etc.
+ *
+ * @example
+ * <pecb-status-banner tone="success" [iconSvg]="shield" title="Annual plan"
+ *   [chips]="[{label: 'Active'}, {label: 'Product', variant: 'inverse'}]"
+ *   description="Renews on 4 Jun 2027.">
+ *   <pecb-button bannerActions variant="neutral-outline">Manage</pecb-button>
+ * </pecb-status-banner>
+ */
+declare class StatusBannerComponent {
+    private readonly sanitizer;
+    /** Colour family of the strip (background tint, border and text). */
+    tone: _angular_core.InputSignal<StatusBannerTone>;
+    /** Inline SVG for the 44px white icon tile (stroke="currentColor" inherits the tone). */
+    iconSvg: _angular_core.InputSignal<string>;
+    title: _angular_core.InputSignal<string>;
+    description: _angular_core.InputSignal<string>;
+    /** Pills shown after the title. */
+    chips: _angular_core.InputSignal<StatusBannerChip[]>;
+    readonly safeIconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml | null>;
+    /** Badge status matching the tone (used when a chip has none). */
+    readonly toneStatus: _angular_core.Signal<BadgeStatus>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusBannerComponent, "pecb-status-banner", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "chips": { "alias": "chips"; "required": false; "isSignal": true; }; }, {}, never, ["[bannerActions]"], true, never>;
+}
+
+/**
+ * Selectable option row: radio · icon tile · title + description · optional trailing chip.
+ * A group of option cards behaves like a radio group — give them the same `name`
+ * and drive `selected` from the consumer's current value.
+ *
+ * @example
+ * <pecb-option-card name="method" [value]="1" [selected]="method === 1" [iconSvg]="card"
+ *   title="Card" description="Pay by card" chipLabel="Default" (selectionChange)="method = $event">
+ * </pecb-option-card>
+ */
+declare class OptionCardComponent {
+    private readonly sanitizer;
+    /** Radio group name shared by sibling cards. */
+    name: _angular_core.InputSignal<string>;
+    /** Value emitted when this card is chosen. */
+    value: _angular_core.InputSignal<unknown>;
+    selected: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Inline SVG for the 42px icon tile (stroke="currentColor"). */
+    iconSvg: _angular_core.InputSignal<string>;
+    title: _angular_core.InputSignal<string>;
+    description: _angular_core.InputSignal<string>;
+    /** Trailing soft chip (e.g. "Default"); hidden when empty. */
+    chipLabel: _angular_core.InputSignal<string>;
+    chipStatus: _angular_core.InputSignal<BadgeStatus>;
+    /** Emits `value` when the card is chosen. */
+    selectionChange: _angular_core.OutputEmitterRef<unknown>;
+    readonly safeIconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml | null>;
+    choose(): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OptionCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OptionCardComponent, "pecb-option-card", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "chipLabel": { "alias": "chipLabel"; "required": false; "isSignal": true; }; "chipStatus": { "alias": "chipStatus"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+/** One label-over-value cell of the record grid. */
+interface RecordCardField {
+    label: string;
+    value: string;
+}
+/**
+ * Bordered record card: icon tile · title + subtitle · projected header actions,
+ * a divider, then a label/value grid. `emphasis` outlines the card in ink
+ * (e.g. the default entry of a list).
+ *
+ * @example
+ * <pecb-record-card [iconSvg]="building" title="Company Ltd" subtitle="Company" [emphasis]="true"
+ *   [fields]="[{label: 'City', value: 'Prishtina'}, {label: 'Country', value: 'Kosovo'}]">
+ *   <pecb-badge recordActions variant="solid" status="dark" label="Default"></pecb-badge>
+ * </pecb-record-card>
+ */
+declare class RecordCardComponent {
+    private readonly sanitizer;
+    /** Inline SVG for the 38px icon tile. */
+    iconSvg: _angular_core.InputSignal<string>;
+    title: _angular_core.InputSignal<string>;
+    subtitle: _angular_core.InputSignal<string>;
+    /** Ink outline (e.g. the default record). */
+    emphasis: _angular_core.InputSignal<boolean>;
+    fields: _angular_core.InputSignal<RecordCardField[]>;
+    /** Grid columns on desktop (collapses to one column under 768px). */
+    columns: _angular_core.InputSignal<2 | 1 | 3>;
+    /** Placeholder shown for empty values. */
+    emptyValue: _angular_core.InputSignal<string>;
+    readonly safeIconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RecordCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RecordCardComponent, "pecb-record-card", never, { "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "emptyValue": { "alias": "emptyValue"; "required": false; "isSignal": true; }; }, {}, never, ["[recordActions]", "*"], true, never>;
+}
+
+interface SegmentedControlOption {
+    label: string;
+    value: unknown;
+    disabled?: boolean;
+}
+type SegmentedControlTone = 'dark' | 'brand';
+/**
+ * Equal-width segmented toggle (2–4 options, exactly one selected).
+ * `tone="dark"` (default) fills the selected segment in ink, `brand` in the brand red.
+ *
+ * @example
+ * <pecb-segmented-control [options]="[{label: 'Personal', value: 1}, {label: 'Company', value: 2}]" [(value)]="type"></pecb-segmented-control>
+ */
+declare class SegmentedControlComponent {
+    options: _angular_core.InputSignal<SegmentedControlOption[]>;
+    value: _angular_core.ModelSignal<unknown>;
+    tone: _angular_core.InputSignal<SegmentedControlTone>;
+    disabled: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    select(option: SegmentedControlOption): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedControlComponent, "pecb-segmented-control", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
 /**
  * Payment plan card — one selectable payment option (e.g. "Pay annually" vs
  * "Pay full cycle"): centered title/description, applied-benefit chips, an
@@ -3177,6 +3424,107 @@ declare class TagSelectComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagSelectComponent, "pecb-tag-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
+/** Keys that commit the pending text as a chip, by default. */
+declare const DEFAULT_TAG_INPUT_SEPARATORS: string[];
+/**
+ * Free-text chip entry: the user types a value and commits it as a chip with a
+ * separator key (comma, space or Enter by default). Distinct from
+ * `pecb-tag-select`, which picks from a fixed option list.
+ *
+ * The value is a `string[]` and the control works with reactive forms via
+ * `ControlValueAccessor`.
+ *
+ * @example
+ * ```html
+ * <pecb-tag-input
+ *   label="Accounting contacts"
+ *   placeholder="Type an email and press Enter"
+ *   [validator]="isEmail"
+ *   formControlName="accountingEmails"
+ * ></pecb-tag-input>
+ * ```
+ *
+ * @publicApi
+ */
+declare class TagInputComponent implements ControlValueAccessor {
+    private readonly inputEl;
+    /** Unique ID for the text entry element */
+    id: _angular_core.InputSignal<string>;
+    /** Floating label text */
+    label: _angular_core.InputSignal<string | undefined>;
+    /** Placeholder for the free-text entry */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Keys that commit the pending text as a chip. Values are matched against
+     * `KeyboardEvent.key`, so a space is `' '` and Enter is `'Enter'`.
+     */
+    separatorKeys: _angular_core.InputSignal<string[]>;
+    /**
+     * Optional per-chip validation. A value that fails is not committed; it stays
+     * in the entry field so the user can correct it, and `invalidEntry` fires.
+     */
+    validator: _angular_core.InputSignal<((value: string) => boolean) | undefined>;
+    /** Allow the same value to be added more than once */
+    allowDuplicates: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Cap on the number of chips. Further entries are rejected once reached. */
+    maxTags: _angular_core.InputSignal<number | undefined>;
+    /** Commit any pending text when the field loses focus */
+    addOnBlur: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Width of the wrapper — any valid CSS value. Defaults to 100%. */
+    width: _angular_core.InputSignal<string | undefined>;
+    /** Whether the field is required */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the field is disabled */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /** Whether to show the error state */
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message shown beneath the field when `error` is set */
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    /** Helper text shown beneath the field */
+    helperText: _angular_core.InputSignal<string | undefined>;
+    /** Aria-label for each chip's remove (×) button — override to localize. */
+    removeAriaLabel: _angular_core.InputSignal<string>;
+    /** Emitted with the full chip list whenever it changes */
+    valueChange: _angular_core.OutputEmitterRef<string[]>;
+    /** Emitted with the newly committed chip */
+    tagAdded: _angular_core.OutputEmitterRef<string>;
+    /** Emitted with the chip that was removed */
+    tagRemoved: _angular_core.OutputEmitterRef<string>;
+    /** Emitted with text that was rejected by `validator` or a duplicate/limit rule */
+    invalidEntry: _angular_core.OutputEmitterRef<string>;
+    /** Emitted on blur */
+    blurred: _angular_core.OutputEmitterRef<void>;
+    /** Emitted on focus */
+    focused: _angular_core.OutputEmitterRef<void>;
+    value: _angular_core.WritableSignal<string[]>;
+    draft: _angular_core.WritableSignal<string>;
+    isFocused: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    hasDescription: _angular_core.Signal<boolean>;
+    /** Once the cap is hit the entry field stops accepting new chips. */
+    isFull: _angular_core.Signal<boolean>;
+    onKeyDown(event: KeyboardEvent): void;
+    onInput(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    removeAt(index: number): void;
+    focus(): void;
+    /**
+     * Commit the pending text. Rejected text is deliberately left in the entry
+     * field so the user can fix it rather than losing what they typed.
+     */
+    private commitDraft;
+    private setValue;
+    writeValue(value: string[] | null): void;
+    registerOnChange(fn: (value: string[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagInputComponent, "pecb-tag-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "separatorKeys": { "alias": "separatorKeys"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "valueChange": "valueChange"; "tagAdded": "tagAdded"; "tagRemoved": "tagRemoved"; "invalidEntry": "invalidEntry"; "blurred": "blurred"; "focused": "focused"; }, never, never, true, never>;
+}
+
 /**
  * Form section card — a numbered, collapsible container for one repeatable
  * form section (e.g. "Activity 1 of 3"): number badge, title, subtitle,
@@ -3933,6 +4281,13 @@ declare class AdminHeaderComponent {
     addActionAriaLabel: _angular_core.InputSignal<string>;
     /** Profile configuration. When omitted, no profile row renders. */
     profile: _angular_core.InputSignal<AdminHeaderProfile | undefined>;
+    /**
+     * Show a camera (edit photo) badge on the profile avatar, mirroring
+     * `pecb-profile [badge="camera"]`. Clicking it emits `profilePhotoEdit`.
+     */
+    profilePhotoEditable: _angular_core.InputSignal<boolean>;
+    /** Aria-label for the avatar's camera button. Override to localize. */
+    editPhotoAriaLabel: _angular_core.InputSignal<string>;
     /** Action chips/buttons displayed to the right of the profile */
     actions: _angular_core.InputSignal<AdminHeaderAction[]>;
     /** Metadata items displayed to the right of the profile (alternative to actions) */
@@ -3943,6 +4298,8 @@ declare class AdminHeaderComponent {
     columns: _angular_core.InputSignal<2 | 1 | 3 | 4>;
     /** Emits when the top-right action button is clicked */
     headerActionClicked: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the avatar's camera (edit photo) badge is clicked */
+    profilePhotoEdit: _angular_core.OutputEmitterRef<void>;
     /** Emits the action id/index when an action chip is clicked */
     actionClicked: _angular_core.OutputEmitterRef<{
         action: AdminHeaderAction;
@@ -4008,7 +4365,7 @@ declare class AdminHeaderComponent {
     onDropdownChange(field: AdminHeaderField, event: Event): void;
     onFieldOptionChange(field: AdminHeaderField, value: 'yes' | 'no'): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AdminHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdminHeaderComponent, "pecb-admin-header", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "backgroundUrl": { "alias": "backgroundUrl"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "headerActionIcon": { "alias": "headerActionIcon"; "required": false; "isSignal": true; }; "headerActionLabel": { "alias": "headerActionLabel"; "required": false; "isSignal": true; }; "yesLabel": { "alias": "yesLabel"; "required": false; "isSignal": true; }; "noLabel": { "alias": "noLabel"; "required": false; "isSignal": true; }; "addActionAriaLabel": { "alias": "addActionAriaLabel"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "metadata": { "alias": "metadata"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, { "headerActionClicked": "headerActionClicked"; "actionClicked": "actionClicked"; "actionRemoved": "actionRemoved"; "linkClicked": "linkClicked"; "dropdownChanged": "dropdownChanged"; "fieldOptionChanged": "fieldOptionChanged"; }, ["fieldTemplates"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdminHeaderComponent, "pecb-admin-header", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "backgroundUrl": { "alias": "backgroundUrl"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "headerActionIcon": { "alias": "headerActionIcon"; "required": false; "isSignal": true; }; "headerActionLabel": { "alias": "headerActionLabel"; "required": false; "isSignal": true; }; "yesLabel": { "alias": "yesLabel"; "required": false; "isSignal": true; }; "noLabel": { "alias": "noLabel"; "required": false; "isSignal": true; }; "addActionAriaLabel": { "alias": "addActionAriaLabel"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "profilePhotoEditable": { "alias": "profilePhotoEditable"; "required": false; "isSignal": true; }; "editPhotoAriaLabel": { "alias": "editPhotoAriaLabel"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "metadata": { "alias": "metadata"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, { "headerActionClicked": "headerActionClicked"; "profilePhotoEdit": "profilePhotoEdit"; "actionClicked": "actionClicked"; "actionRemoved": "actionRemoved"; "linkClicked": "linkClicked"; "dropdownChanged": "dropdownChanged"; "fieldOptionChanged": "fieldOptionChanged"; }, ["fieldTemplates"], never, true, never>;
 }
 
 type SocialIconStyle = 'brand' | 'original' | 'white' | 'dark';
@@ -7146,6 +7503,45 @@ declare class SpacerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpacerComponent, "pecb-spacer", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * A read-only label/value row — the primitive that read (non-edit) views are
+ * built from. Renders a muted 12px label above a 14px value.
+ *
+ * Pass simple text through `value`; for richer values (links, tags, badges)
+ * leave `value` unset and project the content instead.
+ *
+ * @example
+ * ```html
+ * <pecb-grid [columns]="3">
+ *   <pecb-field label="Full name" value="Jane Doe"></pecb-field>
+ *   <pecb-field label="Status">
+ *     <pecb-status type="success" label="Active"></pecb-status>
+ *   </pecb-field>
+ *   <pecb-field label="Bio" fullWidth>Long-form text…</pecb-field>
+ * </pecb-grid>
+ * ```
+ *
+ * @publicApi
+ */
+declare class FieldComponent {
+    id: _angular_core.InputSignal<string>;
+    /** The muted caption shown above the value */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The value text. Leave unset and project content instead when the value is
+     * richer than a string.
+     */
+    value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Span every column of the surrounding grid. Applies when the field is a
+     * direct child of a CSS grid (e.g. `pecb-grid`); inside a `pecb-grid-item`,
+     * use that component's `span="full"` instead.
+     */
+    fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldComponent, "pecb-field", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type DashboardGridLayout = '1' | '2' | '3' | '4' | 'sidebar-1col' | 'sidebar-2col' | 'sidebar-3col' | 'sidebar-4col' | 'custom';
 type DashboardGridGap = 'none' | 'sm' | 'md' | 'lg';
 declare class DashboardGridComponent {
@@ -8586,17 +8982,31 @@ declare class TestimonialComponent {
 
 type TagStyle = 'light' | 'dark';
 type TagAction = 'none' | 'close' | 'plus';
+type TagAppearance = 'tag' | 'chip';
 declare class TagComponent {
     id: _angular_core.InputSignal<string>;
     label: _angular_core.InputSignal<string>;
     tagStyle: _angular_core.InputSignal<TagStyle>;
     action: _angular_core.InputSignal<TagAction>;
+    /**
+     * Rendering style. `tag` is the original chip-with-affordance look; `chip` is
+     * the display-only variant from the design system (`#ECECEC` / `#313131` on a
+     * 6px radius for `light`, inverted for `dark`).
+     *
+     * `chip` is non-interactive by definition, so it suppresses `action` — use
+     * the default `tag` appearance when you need the close or plus affordance.
+     */
+    appearance: _angular_core.InputSignal<TagAppearance>;
     /** Aria-label for the close (×) action — override to localize (audit F20). */
     removeAriaLabel: _angular_core.InputSignal<string>;
     tagClose: _angular_core.OutputEmitterRef<void>;
+    /** Chips render no affordance regardless of `action`. */
+    private readonly interactive;
+    showPlus: _angular_core.Signal<boolean>;
+    showClose: _angular_core.Signal<boolean>;
     tagClasses: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "pecb-tag", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "tagStyle": { "alias": "tagStyle"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "tagClose": "tagClose"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "pecb-tag", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "tagStyle": { "alias": "tagStyle"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "tagClose": "tagClose"; }, never, never, true, never>;
 }
 
 type LinkButtonType = 'go-back' | 'view-details' | 'read-more' | 'show-credential';
@@ -8880,19 +9290,39 @@ declare class CancelUpdateButtonsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CancelUpdateButtonsComponent, "pecb-cancel-update-buttons", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "updateLabel": { "alias": "updateLabel"; "required": false; "isSignal": true; }; }, { "cancelClick": "cancelClick"; "updateClick": "updateClick"; }, never, never, true, never>;
 }
 
-type InformationBoxVariant = 'default' | 'developer';
+type InformationBoxVariant = 'default' | 'developer' | 'neutral';
 declare class InformationBoxComponent {
+    private readonly sanitizer;
+    private readonly registry;
     id: _angular_core.InputSignal<string>;
+    /**
+     * Visual style. `neutral` is the muted legend bar — `#FAFAFA` background,
+     * `#ECECEC` border, `#616161` icon and text on an 8px radius — and lays the
+     * icon and text out on a single row.
+     */
     variant: _angular_core.InputSignal<InformationBoxVariant>;
     text: _angular_core.InputSignal<string>;
     title: _angular_core.InputSignal<string>;
+    /**
+     * Optional leading icon: a registered {@link IconRegistry} name or a raw
+     * inline SVG string (anything starting with `<`). `variant="neutral"` shows
+     * a default info glyph when this is unset; the other variants show no icon
+     * unless one is given here.
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
     boxClasses: _angular_core.Signal<{
         'pecb-info-box': boolean;
         'pecb-info-box--default': boolean;
         'pecb-info-box--developer': boolean;
+        'pecb-info-box--neutral': boolean;
     }>;
+    /** The icon name/SVG actually rendered, falling back to the neutral default. */
+    private readonly effectiveIcon;
+    private readonly resolvedIconSvg;
+    showIcon: _angular_core.Signal<boolean>;
+    safeIconHtml: _angular_core.Signal<SafeHtml>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InformationBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InformationBoxComponent, "pecb-information-box", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InformationBoxComponent, "pecb-information-box", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class RequestSentByComponent {
@@ -9901,5 +10331,5 @@ declare class CourseCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CourseCardComponent, "pecb-course-card", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "iconLabel": { "alias": "iconLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "statusTone": { "alias": "statusTone"; "required": false; "isSignal": true; }; "metaRows": { "alias": "metaRows"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "noteText": { "alias": "noteText"; "required": false; "isSignal": true; }; "noteTone": { "alias": "noteTone"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; "isSignal": true; }; "dimmed": { "alias": "dimmed"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["*"], true, never>;
 }
 
-export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, ActionItemComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseCardComponent, CourseContentPanelComponent, CoursePlayerComponent, CourseTileComponent, CredentialCardComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_SLIDE_VIEWER_KEY_MAP, DEFAULT_SLIDE_VIEWER_LABELS, DEFAULT_SLIDE_VIEWER_TOOLS, DEFAULT_SLIDE_VIEWER_ZOOM_STEPS, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FormSectionCardComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, HubCardComponent, HubCardGridComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, ListItemComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NestedTableComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, OutlinedFieldComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PaymentPlanCardComponent, PaymentScheduleCardComponent, PaymentSummaryComponent, PeriodPaymentModalComponent, PreviewCardComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressArcComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SlideViewerComponent, SlideViewerDayDirective, SlideViewerThumbnailDirective, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TagSelectComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, TimelineComponent, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, clampSlidePage, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
-export type { AccordionVariant, ActionItemPriority, AddButtonVariant, AdminHeaderAction, AdminHeaderActionType, AdminHeaderBadgeVariant, AdminHeaderField, AdminHeaderFieldType, AdminHeaderMetadata, AdminHeaderMetadataType, AdminHeaderProfile, AffixPosition, AlertType, AlertVariant, Alignment, AnchorDirection, AnchorItem, AnchorLevel, AnimationTiming, AppHeaderAction, AppHeaderChip, AppHeaderChipTone, AppHeaderLabels, AppHeaderNotification, AppShellLocale, AppShellTranslations, AppSidebarLabels, AppSidebarMenuItem, AppSidebarMenuOption, AppSidebarMenuOptionChange, AppSidebarMenuStrings, AppSidebarNavGroup, AppSidebarNavItem, AppSidebarProduct, AppSidebarRouterLink, AppSidebarUser, AppStatusColor, AriaAttributes, AriaLive, AriaRole, AuditorStatusType, BadgeSize, BadgeStatus, BadgeVariant, BlurSize, BreadcrumbItem, BreadcrumbSeparator, Breakpoint, ButtonGroupIconMode, ButtonGroupItemPosition, ButtonIconStyle, ButtonSize, ButtonVariant, CalendarDay, Callback, CardElevation, CardRadius, CardRole, CheckDeleteType, CheckboxDisplayState, CheckboxLabelPosition, ClosableWithHooks, CodeInputDirection, CodeInputState, CodeSnippetTheme, CodeSnippetVariant, ColorPaletteGroup, ColorPaletteItem, ColorVariant, Colorable, ColumnOption, ComponentSize, ConfirmationIconType, ContentStyle, ContentTagDisplay, ContentTagType, CourseCardAction, CourseCardMetaRow, CourseCardNoteTone, CourseCardProgress, CourseCardTone, CourseContentPanelAccent, CourseContentPanelDensity, CourseContentPanelLabels, CourseContentPanelLayout, CourseContentPanelTab, CourseLesson, CourseLessonRunView, CourseLessonStatus, CourseLessonType, CourseLessonView, CourseModule, CourseModuleStats, CourseModuleView, CoursePlayerPanelPosition, CourseProgressStats, CourseTimelineRow, CourseTranscriptCue, CourseTranscriptRow, CredentialCardAction, CredentialCardMetaRow, CredentialCardProgress, CredentialCardTone, CustomIconName, DashboardGridGap, DashboardGridLayout, DatepickerSize, Direction, Disableable, DividerType, DropdownOption, DropdownSize, EditButtonVariant, ElevationLevel, EmptyStateButton, EmptyStateIconTheme, ErrorCategory, ErrorHandler, ErrorOptions, ErrorSeverity, EventHandler, ExpandableRowColumn, ExpandableRowPageEvent, ExpandableRowProgressConfig, ExtendedColorVariant, FieldItem, FieldStyle, FileUploadEvent, FileUploadState, FileUploadVariant, FilterColumnsActiveTab, FilterColumnsApplyEvent, FilterField, FilterFieldType, FilterState, FloatButtonAction, FloatButtonPosition, Focusable, FormControlBase, GridAlign, GridColumns, GridGap, GridItemSpan, GridPadding, GridVerticalAlign, HeaderActionButton, HeaderLanguageOption, HeaderSearchCategory, HeaderSearchType, HierarchicalTableAction, HierarchicalTableColumn, HierarchicalTablePageEvent, HubCardSize, IconColor, IconName, IconShape, IconSize, IconTagType, InformationBoxVariant, InputSize, InputType, LanguageDisplayMode, LanguageOption, LinkButtonType, Loadable, LoadingState, MarkedDate, MediaGroup, MediaItem, MediaSize, MediaType, MenuItem, MessageBubbleType, MessageDirection, MessageItemStatus, MetricsCardBadgeStatus, MetricsCardIconBg, MetricsCardIconPosition, MetricsCardOrientation, MetricsCardSize, MetricsCardType, MetricsCardVariation, MiniIconAction, NestedTableCellType, NestedTableChildContext, NestedTableChildRow, NestedTableChip, NestedTableColumn, NestedTableGroup, NestedTableProgress, NestedTableRow, NonNullableProps, NoteGroup, NoteItem, NoteSidebarPosition, NoteSidebarState, Notification, NotificationConfig, NotificationPosition, NotificationStatusType, NotificationType, OptionalProps, Orientation, OverlayComponent, PageChangeEvent, PaginationSize, PaginationState, PaginationVariant, PaymentScheduleCardAction, PaymentScheduleCardMeta, PaymentScheduleCardPeriod, PaymentScheduleCardTone, PaymentSummaryRow, PdfCardVariant, PecbError, PecbTableColumn, PecbTableColumnComponent, PecbTableColumnType, PeriodPaymentModalPeriod, Position, PreviewCardAction, ProfileBadge, ProfileGroupItem, ProfileGroupSize, ProfileIndicator, ProfileSize, ProfileType, ProgressArcSize, ProgressBarSize, ProgressCircleSize, ProgressType, QuestionTagDisplay, QuestionTagType, QuizType, RadioDisplayState, RadioLabelPosition, RadioVariant, RadiusScale, RatingStyle, RequestStatusIconType, RequireProps, ResultPageAction, ResultPageIcon, RibbonColor, RightModalSize, SearchMode, SelectableItem, ShadowHardSize, ShadowSize, ShadowSoftSize, ShadowType, SidebarMenuItem, SidebarSection, Size, Sizeable, SkeletonShape, SkeletonSize, SkeletonType, SlideViewerDay, SlideViewerDayContext, SlideViewerKeyAction, SlideViewerKeyMap, SlideViewerLabels, SlideViewerMoveEvent, SlideViewerPageEvent, SlideViewerSearchEvent, SlideViewerSidebarPosition, SlideViewerSlide, SlideViewerThumbnailContext, SlideViewerTool, SlideViewerToolEvent, SortState, SpacerSize, SpacingScale, StateVariant, StatisticsIconColor, StatusColor, StatusSize, StatusType, StatusVariant, StepItem, StepOrder, StepState, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabItem, TabSize, TabStyle, TableAction, TableColumn, TableRowActionEvent, TableSelectionEvent, TableSize, TableSortEvent, TableStatusConfig, TableUserConfig, TableVariant, TagAction, TagSelectOption, TagStyle, Templatable, TestimonialData, TestimonialVariant, TextFormFieldType, ThemeConfig, ThemeMode, ThemeVariables, TimelineItem, TimelineTone, ToggleLabelPosition, ToggleSize, ToolbarButton, ToolbarTab, ToolbarVariant, TooltipPointerPosition, TooltipTheme, TourIndicatorType, TourPlacement, TourStep, TourType, TranscriptLineState, TreeNode, TypographyScaleEntry, TypographyStyleEntry, UploadedFile, Validatable, ValidationError, ValidationState, VerifyChecklistItem, VerifyItemStatus, VideoPlayerError, VideoPlayerLabels, VideoPlayerPreload, VideoPlayerSource, VideoPlayerTimeEvent, VideoPlayerTrack, VirtualTableColumn, VirtualTablePageEvent, VirtualTableProgressConfig };
+export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, ActionItemComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseCardComponent, CourseContentPanelComponent, CoursePlayerComponent, CourseTileComponent, CredentialCardComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_SLIDE_VIEWER_KEY_MAP, DEFAULT_SLIDE_VIEWER_LABELS, DEFAULT_SLIDE_VIEWER_TOOLS, DEFAULT_SLIDE_VIEWER_ZOOM_STEPS, DEFAULT_TAG_INPUT_SEPARATORS, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FieldComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FormSectionCardComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, HubCardComponent, HubCardGridComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, ListItemComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NestedTableComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, OptionCardComponent, OutlinedFieldComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PaymentPlanCardComponent, PaymentScheduleCardComponent, PaymentSummaryComponent, PeriodPaymentModalComponent, PreviewCardComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressArcComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RecordCardComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, SegmentedControlComponent, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SlideViewerComponent, SlideViewerDayDirective, SlideViewerThumbnailDirective, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusBannerComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TagInputComponent, TagSelectComponent, TestimonialComponent, TextFormFieldComponent, TextareaComponent, ThemeService, TimelineComponent, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, clampSlidePage, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
+export type { AccordionVariant, ActionItemPriority, AddButtonVariant, AdminHeaderAction, AdminHeaderActionType, AdminHeaderBadgeVariant, AdminHeaderField, AdminHeaderFieldType, AdminHeaderMetadata, AdminHeaderMetadataType, AdminHeaderProfile, AffixPosition, AlertType, AlertVariant, Alignment, AnchorDirection, AnchorItem, AnchorLevel, AnimationTiming, AppHeaderAction, AppHeaderChip, AppHeaderChipTone, AppHeaderLabels, AppHeaderNotification, AppShellLocale, AppShellTranslations, AppSidebarLabels, AppSidebarMenuItem, AppSidebarMenuOption, AppSidebarMenuOptionChange, AppSidebarMenuStrings, AppSidebarNavGroup, AppSidebarNavItem, AppSidebarProduct, AppSidebarRouterLink, AppSidebarUser, AppStatusColor, AriaAttributes, AriaLive, AriaRole, AuditorStatusType, BadgeSize, BadgeStatus, BadgeVariant, BlurSize, BreadcrumbItem, BreadcrumbSeparator, Breakpoint, ButtonGroupIconMode, ButtonGroupItemPosition, ButtonIconStyle, ButtonShape, ButtonSize, ButtonVariant, CalendarDay, Callback, CardElevation, CardRadius, CardRole, CheckDeleteType, CheckboxDisplayState, CheckboxLabelPosition, ClosableWithHooks, CodeInputDirection, CodeInputState, CodeSnippetTheme, CodeSnippetVariant, ColorPaletteGroup, ColorPaletteItem, ColorVariant, Colorable, ColumnOption, ComponentSize, ConfirmationIconType, ContentStyle, ContentTagDisplay, ContentTagType, CourseCardAction, CourseCardMetaRow, CourseCardNoteTone, CourseCardProgress, CourseCardTone, CourseContentPanelAccent, CourseContentPanelDensity, CourseContentPanelLabels, CourseContentPanelLayout, CourseContentPanelTab, CourseLesson, CourseLessonRunView, CourseLessonStatus, CourseLessonType, CourseLessonView, CourseModule, CourseModuleStats, CourseModuleView, CoursePlayerPanelPosition, CourseProgressStats, CourseTimelineRow, CourseTranscriptCue, CourseTranscriptRow, CredentialCardAction, CredentialCardMetaRow, CredentialCardProgress, CredentialCardTone, CustomIconName, DashboardGridGap, DashboardGridLayout, DatepickerSize, Direction, Disableable, DividerType, DropdownOption, DropdownSize, EditButtonVariant, ElevationLevel, EmptyStateButton, EmptyStateIconTheme, ErrorCategory, ErrorHandler, ErrorOptions, ErrorSeverity, EventHandler, ExpandableRowColumn, ExpandableRowPageEvent, ExpandableRowProgressConfig, ExtendedColorVariant, FieldItem, FieldStyle, FileUploadEvent, FileUploadState, FileUploadVariant, FilterColumnsActiveTab, FilterColumnsApplyEvent, FilterField, FilterFieldType, FilterState, FloatButtonAction, FloatButtonPosition, Focusable, FormControlBase, GridAlign, GridColumns, GridGap, GridItemSpan, GridPadding, GridVerticalAlign, HeaderActionButton, HeaderLanguageOption, HeaderSearchCategory, HeaderSearchType, HierarchicalTableAction, HierarchicalTableColumn, HierarchicalTablePageEvent, HubCardSize, IconColor, IconName, IconShape, IconSize, IconTagType, InformationBoxVariant, InputSize, InputType, LanguageDisplayMode, LanguageOption, LinkButtonType, Loadable, LoadingState, MarkedDate, MediaGroup, MediaItem, MediaSize, MediaType, MenuItem, MessageBubbleType, MessageDirection, MessageItemStatus, MetricsCardBadgeStatus, MetricsCardIconBg, MetricsCardIconPosition, MetricsCardOrientation, MetricsCardSize, MetricsCardType, MetricsCardVariation, MiniIconAction, NestedTableCellType, NestedTableChildContext, NestedTableChildRow, NestedTableChip, NestedTableColumn, NestedTableGroup, NestedTableProgress, NestedTableRow, NonNullableProps, NoteGroup, NoteItem, NoteSidebarPosition, NoteSidebarState, Notification, NotificationConfig, NotificationPosition, NotificationStatusType, NotificationType, OptionalProps, Orientation, OverlayComponent, PageChangeEvent, PaginationSize, PaginationState, PaginationVariant, PaymentScheduleCardAction, PaymentScheduleCardMeta, PaymentScheduleCardPeriod, PaymentScheduleCardTone, PaymentSummaryRow, PdfCardVariant, PecbError, PecbTableColumn, PecbTableColumnComponent, PecbTableColumnType, PeriodPaymentModalPeriod, Position, PreviewCardAction, ProfileBadge, ProfileGroupItem, ProfileGroupSize, ProfileIndicator, ProfileSize, ProfileType, ProgressArcSize, ProgressBarSize, ProgressCircleSize, ProgressType, QuestionTagDisplay, QuestionTagType, QuizType, RadioDisplayState, RadioLabelPosition, RadioVariant, RadiusScale, RatingStyle, RecordCardField, RequestStatusIconType, RequireProps, ResultPageAction, ResultPageIcon, RibbonColor, RightModalPosition, RightModalSize, SearchMode, SegmentedControlOption, SegmentedControlTone, SelectableItem, ShadowHardSize, ShadowSize, ShadowSoftSize, ShadowType, SidebarMenuItem, SidebarSection, Size, Sizeable, SkeletonShape, SkeletonSize, SkeletonType, SlideViewerDay, SlideViewerDayContext, SlideViewerKeyAction, SlideViewerKeyMap, SlideViewerLabels, SlideViewerMoveEvent, SlideViewerPageEvent, SlideViewerSearchEvent, SlideViewerSidebarPosition, SlideViewerSlide, SlideViewerThumbnailContext, SlideViewerTool, SlideViewerToolEvent, SortState, SpacerSize, SpacingScale, StateVariant, StatisticsIconColor, StatusBannerChip, StatusBannerChipVariant, StatusBannerTone, StatusColor, StatusSize, StatusType, StatusVariant, StepItem, StepOrder, StepState, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabItem, TabSize, TabStyle, TableAction, TableColumn, TableRowActionEvent, TableSelectionEvent, TableSize, TableSortEvent, TableStatusConfig, TableUserConfig, TableVariant, TagAction, TagAppearance, TagSelectOption, TagStyle, Templatable, TestimonialData, TestimonialVariant, TextFormFieldType, ThemeConfig, ThemeMode, ThemeVariables, TimelineItem, TimelineTone, ToggleLabelPosition, ToggleSize, ToolbarButton, ToolbarTab, ToolbarVariant, TooltipPointerPosition, TooltipTheme, TourIndicatorType, TourPlacement, TourStep, TourType, TranscriptLineState, TreeNode, TypographyScaleEntry, TypographyStyleEntry, UploadedFile, Validatable, ValidationError, ValidationState, VerifyChecklistItem, VerifyItemStatus, VideoPlayerError, VideoPlayerLabels, VideoPlayerPreload, VideoPlayerSource, VideoPlayerTimeEvent, VideoPlayerTrack, VirtualTableColumn, VirtualTablePageEvent, VirtualTableProgressConfig };