@tedi-design-system/angular 8.2.0-rc.5 → 8.2.0-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/angular",
-  "version": "8.2.0-rc.5",
+  "version": "8.2.0-rc.7",
   "type": "module",
   "main": "community.mjs",
   "module": "fesm2022/tedi-design-system-angular.mjs",

package/tedi/index.d.ts

@@ -2212,56 +2212,6 @@ declare class CollapseButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapseButtonComponent, "button[tedi-collapse-button]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "openText": { "alias": "openText"; "required": false; "isSignal": true; }; "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "hideText": { "alias": "hideText"; "required": false; "isSignal": true; }; "arrowType": { "alias": "arrowType"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>;
 }
 
-type ArrowType = CollapseButtonArrowType;
-type CollapseSize = CollapseButtonSize;
-declare class CollapseComponent implements AfterViewInit {
-    /**
-     * The title/header element for the collapsible section.
-     * Rendered inside the toggle button.
-     */
-    openText: _angular_core.InputSignal<string | undefined>;
-    /**
-     * Text shown on the toggle button when the content is expanded.
-     */
-    closeText: _angular_core.InputSignal<string | undefined>;
-    /**
-     * Whether the collapse should be initially open.
-     * @default false
-     */
-    defaultOpen: _angular_core.InputSignal<boolean>;
-    /**
-     * To show or hide the openText and closeText.
-     * @default "false"
-     */
-    hideCollapseText: _angular_core.InputSignal<boolean>;
-    /**
-     * Option for toggling different arrow styles.
-     * @default "default"
-     */
-    arrowType: _angular_core.InputSignal<CollapseButtonArrowType>;
-    /**
-     * Visual size of the toggle button.
-     * @default "default"
-     */
-    size: _angular_core.InputSignal<CollapseButtonSize>;
-    /**
-     * Inverted color palette — flips the link / icon colors to their
-     * inverted-surface equivalents (white text + icon), for use on top of dark
-     * backgrounds. Pairs with both the text and icon-only variants; the
-     * secondary-arrow style has no inverted form in the design and the flag is
-     * ignored when `arrowType === 'secondary'`.
-     * @default false
-     */
-    inverted: _angular_core.InputSignal<boolean>;
-    collapseContentId: string;
-    isOpen: _angular_core.WritableSignal<boolean>;
-    protected readonly isInvertedActive: _angular_core.Signal<boolean>;
-    toggleCollapse(): void;
-    ngAfterViewInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapseComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapseComponent, "tedi-collapse", never, { "openText": { "alias": "openText"; "required": false; "isSignal": true; }; "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "hideCollapseText": { "alias": "hideCollapseText"; "required": false; "isSignal": true; }; "arrowType": { "alias": "arrowType"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
 type ClosingButtonSize = "default" | "small";
 type ClosingButtonIconSize = 18 | 24;
 declare class ClosingButtonComponent {
@@ -2848,6 +2798,108 @@ declare class CardHeaderComponent extends CardContentComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeaderComponent, "tedi-card-header", never, {}, {}, never, ["*"], true, never>;
 }
 
+type ArrowType = CollapseButtonArrowType;
+type CollapseSize = CollapseButtonSize;
+declare class CollapseComponent implements AfterViewInit {
+    /**
+     * The title/header element for the collapsible section.
+     * Rendered inside the toggle button.
+     */
+    openText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Text shown on the toggle button when the content is expanded.
+     */
+    closeText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the collapse should be initially open.
+     * @default false
+     */
+    defaultOpen: _angular_core.InputSignal<boolean>;
+    /**
+     * To show or hide the openText and closeText.
+     * @default "false"
+     */
+    hideCollapseText: _angular_core.InputSignal<boolean>;
+    /**
+     * Option for toggling different arrow styles.
+     * @default "default"
+     */
+    arrowType: _angular_core.InputSignal<CollapseButtonArrowType>;
+    /**
+     * Visual size of the toggle button.
+     * @default "default"
+     */
+    size: _angular_core.InputSignal<CollapseButtonSize>;
+    /**
+     * Inverted color palette — flips the link / icon colors to their
+     * inverted-surface equivalents (white text + icon), for use on top of dark
+     * backgrounds. Pairs with both the text and icon-only variants; the
+     * secondary-arrow style has no inverted form in the design and the flag is
+     * ignored when `arrowType === 'secondary'`.
+     * @default false
+     */
+    inverted: _angular_core.InputSignal<boolean>;
+    collapseContentId: string;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly isInvertedActive: _angular_core.Signal<boolean>;
+    toggleCollapse(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapseComponent, "tedi-collapse", never, { "openText": { "alias": "openText"; "required": false; "isSignal": true; }; "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "hideCollapseText": { "alias": "hideCollapseText"; "required": false; "isSignal": true; }; "arrowType": { "alias": "arrowType"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type EmptyStateType = "separate" | "attached" | "inside";
+type EmptyStateSize = "default" | "small";
+/**
+ * Communicates that there is nothing to display — empty search results, an
+ * unpopulated list, a freshly-created workspace — and optionally guides the
+ * user toward the next step via action buttons or a link.
+ *
+ * Description is projected via `<ng-content>`. Actions are projected via
+ * `<ng-content select="[tedi-empty-state-actions]">`.
+ */
+declare class EmptyStateComponent {
+    /**
+     * Container variant — matches the Figma "Types" section.
+     * - `'separate'` (default) — full border + radius, stands on its own.
+     * - `'attached'` — top border omitted so the block sits flush beneath a
+     *   preceding card or table (same width + same bottom-radius).
+     * - `'inside'` — no border, no radius; intended to be placed inside another
+     *   container such as a `<tedi-card>` or `<tedi-table>`.
+     * @default separate
+     */
+    readonly type: _angular_core.InputSignal<EmptyStateType>;
+    /**
+     * Padding scale. `default` = 24px, `small` = 16px.
+     * @default default
+     */
+    readonly size: _angular_core.InputSignal<EmptyStateSize>;
+    /**
+     * Material icon name rendered above the text block. Pass `null` to hide.
+     * @default spa
+     */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /**
+     * Color of the icon. Defaults to brand so the empty state reads as a
+     * "fresh canvas" cue rather than a destructive state.
+     * @default brand
+     */
+    readonly iconColor: _angular_core.InputSignal<IconColor>;
+    /**
+     * Size of the icon, in pixels.
+     * @default 36
+     */
+    readonly iconSize: _angular_core.InputSignal<IconSize>;
+    /**
+     * Optional heading rendered above the description — appears as an `<h3>` in
+     * brand-primary text color.
+     */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStateComponent, "tedi-empty-state", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tedi-empty-state-actions]"], true, never>;
+}
+
 declare class HeadingWithIconComponent {
     /**
      * Name of the Material Icon
@@ -2895,6 +2947,40 @@ declare class HeadingWithIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeadingWithIconComponent, "tedi-heading-with-icon", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "element": { "alias": "element"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; "headingColor": { "alias": "headingColor"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type LabelSize = "small" | "default";
+type LabelColor = "primary" | "secondary";
+type LabelVisuallyHidden = boolean | "reserve-space";
+declare class LabelComponent {
+    private readonly field;
+    /**
+     * Size of the label. Falls back to the size of a wrapping `tedi-form-field`,
+     * so the label and the control scale together without being set twice.
+     * @default default
+     */
+    size: _angular_core.InputSignal<LabelSize | undefined>;
+    readonly resolvedSize: _angular_core.Signal<LabelSize>;
+    /**
+     * Whether label is required.
+     * @default false
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Color of the label.
+     * @default secondary
+     */
+    color: _angular_core.InputSignal<LabelColor>;
+    /**
+     * Hides the label visually while keeping it in the accessibility tree, so the
+     * control it names stays named. `"reserve-space"` also keeps the label's line
+     * of layout, to align the field with labelled siblings in the same row.
+     * @default false
+     */
+    visuallyHidden: _angular_core.InputSignal<LabelVisuallyHidden>;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LabelComponent, "[tedi-label]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "visuallyHidden": { "alias": "visuallyHidden"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type BulletColor = "primary" | "secondary" | "tertiary" | "brand" | "brand-dark" | "success" | "warning" | "warning-dark" | "danger" | "white";
 declare class ListComponent {
     /**
@@ -2965,6 +3051,12 @@ declare class CarouselContentComponent implements AfterViewInit, OnDestroy {
     readonly fade: _angular_core.InputSignal<boolean>;
     /** Transition duration in ms */
     readonly transitionMs: _angular_core.InputSignal<number>;
+    /**
+     * Whether navigation wraps around at the ends. When `false`, it stops at the
+     * first and last reachable positions and disables the corresponding arrow.
+     * @default true
+     */
+    readonly loop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Accessible label for the carousel region. Falls back to the `carousel` translation. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly translationService: TediTranslationService;
@@ -2982,8 +3074,17 @@ declare class CarouselContentComponent implements AfterViewInit, OnDestroy {
     readonly currentSlidesPerView: _angular_core.Signal<number>;
     readonly currentGap: _angular_core.Signal<number>;
     readonly buffer: _angular_core.Signal<number>;
+    /** Furthest track position in bounded mode; may be fractional to show the last slide fully. */
+    readonly maxIndex: _angular_core.Signal<number>;
+    /** Number of indicator positions: one per slide when looping, or one per reachable stop when bounded. */
+    readonly positionCount: _angular_core.Signal<number>;
+    /** Index of the active indicator; a fractional final stop gets its own index. */
+    readonly activePosition: _angular_core.Signal<number>;
+    /** Index of the leftmost visible slide, skipping a partially visible one in bounded mode. */
     readonly slideIndex: _angular_core.Signal<number>;
     readonly renderedActiveIndex: _angular_core.Signal<number>;
+    readonly canPrev: _angular_core.Signal<boolean>;
+    readonly canNext: _angular_core.Signal<boolean>;
     /**
      * Checks if a slide at the given rendered index is currently visible in the viewport.
      * Used to determine which slides should be accessible to screen readers.
@@ -2997,6 +3098,7 @@ declare class CarouselContentComponent implements AfterViewInit, OnDestroy {
         transform: string;
         transition: string;
     }>;
+    constructor();
     locked: boolean;
     dragging: boolean;
     private pendingFocus;
@@ -3024,20 +3126,25 @@ declare class CarouselContentComponent implements AfterViewInit, OnDestroy {
      */
     focusActiveSlide(): void;
     onTransitionEnd(e: TransitionEvent): void;
-    lockNavigation(): void;
+    private clampIntoRange;
+    private clampIndex;
+    /** Snap to the nearest reachable position, including a fractional end. */
+    private snap;
     /**
-     * Announces the current slide position to screen readers via LiveAnnouncer.
-     * Called after navigation to inform users of the slide change.
+     * Range the track may be dragged or wheeled within. A looping track stays inside
+     * its rendered duplicate buffer around `base`; a bounded one stops at the ends.
      */
+    private dragBounds;
+    lockNavigation(): void;
     announceSlideChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselContentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselContentComponent, "tedi-carousel-content", never, { "slidesPerView": { "alias": "slidesPerView"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "fade": { "alias": "fade"; "required": false; "isSignal": true; }; "transitionMs": { "alias": "transitionMs"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["slides"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselContentComponent, "tedi-carousel-content", never, { "slidesPerView": { "alias": "slidesPerView"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "fade": { "alias": "fade"; "required": false; "isSignal": true; }; "transitionMs": { "alias": "transitionMs"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["slides"], never, true, never>;
 }
 
 declare class CarouselComponent {
     carouselContent: _angular_core.Signal<CarouselContentComponent>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselComponent, "tedi-carousel", never, {}, {}, ["carouselContent"], ["tedi-carousel-header", "tedi-carousel-content", "tedi-carousel-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselComponent, "tedi-carousel", never, {}, {}, ["carouselContent"], ["tedi-carousel-header", "tedi-carousel-content", "tedi-carousel-navigation", "tedi-carousel-footer"], true, never>;
 }
 
 declare class CarouselFooterComponent {
@@ -3071,12 +3178,20 @@ declare class CarouselIndicatorsComponent {
 }
 
 declare class CarouselNavigationComponent {
+    /**
+     * Shows floating navigation buttons over the slides. Place navigation directly
+     * inside `tedi-carousel`, outside the header and footer.
+     * @default false
+     */
+    readonly overlay: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly translationService: TediTranslationService;
     private readonly carousel;
+    readonly canPrev: _angular_core.Signal<boolean>;
+    readonly canNext: _angular_core.Signal<boolean>;
     handleNext(): void;
     handlePrev(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselNavigationComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselNavigationComponent, "tedi-carousel-navigation", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselNavigationComponent, "tedi-carousel-navigation", never, { "overlay": { "alias": "overlay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -6810,40 +6925,6 @@ declare class FeedbackTextComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeedbackTextComponent, "tedi-feedback-text", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type LabelSize = "small" | "default";
-type LabelColor = "primary" | "secondary";
-type LabelVisuallyHidden = boolean | "reserve-space";
-declare class LabelComponent {
-    private readonly field;
-    /**
-     * Size of the label. Falls back to the size of a wrapping `tedi-form-field`,
-     * so the label and the control scale together without being set twice.
-     * @default default
-     */
-    size: _angular_core.InputSignal<LabelSize | undefined>;
-    readonly resolvedSize: _angular_core.Signal<LabelSize>;
-    /**
-     * Whether label is required.
-     * @default false
-     */
-    required: _angular_core.InputSignal<boolean>;
-    /**
-     * Color of the label.
-     * @default secondary
-     */
-    color: _angular_core.InputSignal<LabelColor>;
-    /**
-     * Hides the label visually while keeping it in the accessibility tree, so the
-     * control it names stays named. `"reserve-space"` also keeps the label's line
-     * of layout, to align the field with labelled siblings in the same row.
-     * @default false
-     */
-    visuallyHidden: _angular_core.InputSignal<LabelVisuallyHidden>;
-    classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LabelComponent, "[tedi-label]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "visuallyHidden": { "alias": "visuallyHidden"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
 declare class LabelRowComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelRowComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LabelRowComponent, "tedi-label-row", never, {}, {}, never, ["*"], true, never>;
@@ -6964,6 +7045,12 @@ declare class FormFieldComponent implements FieldContext {
      * @default false
      */
     clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Show the clear button only while the filled field is hovered or focused.
+     * Requires `clearable`.
+     * @default false
+     */
+    showClearOnInteraction: _angular_core.InputSignal<boolean>;
     /**
      * Custom CSS classes for the field box.
      *
@@ -7018,11 +7105,12 @@ declare class FormFieldComponent implements FieldContext {
         "tedi-form-field--valid": boolean;
         "tedi-form-field--invalid": boolean;
         "tedi-form-field--disabled": boolean;
+        "tedi-form-field--clear-on-interaction": boolean;
         "tedi-form-field--small": boolean;
         "tedi-form-field--large": boolean;
     }>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "tedi-form-field", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "characterLimit": { "alias": "characterLimit"; "required": false; "isSignal": true; }; }, {}, ["control", "feedback"], ["label[tedi-label], tedi-label-row", "*", "tedi-feedback-text", "[tediFormFieldExtra]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "tedi-form-field", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showClearOnInteraction": { "alias": "showClearOnInteraction"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "characterLimit": { "alias": "characterLimit"; "required": false; "isSignal": true; }; }, {}, ["control", "feedback"], ["label[tedi-label], tedi-label-row", "*", "tedi-feedback-text", "[tediFormFieldExtra]"], true, never>;
 }
 
 /**
@@ -7145,6 +7233,12 @@ declare class SearchComponent<T = unknown> implements ControlValueAccessor {
      * @default true
      */
     clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Show the clear button only while the filled search field is hovered or focused.
+     * Requires `clearable`.
+     * @default false
+     */
+    showClearOnInteraction: _angular_core.InputSignal<boolean>;
     /**
      * Icon shown inside the input. Ignored when `button` is set.
      * @default "search"
@@ -7350,7 +7444,7 @@ declare class SearchComponent<T = unknown> implements ControlValueAccessor {
     private panelElement;
     private resetActiveOption;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchComponent<any>, "tedi-search", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "button": { "alias": "button"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindDescription": { "alias": "bindDescription"; "required": false; "isSignal": true; }; "bindDisabled": { "alias": "bindDisabled"; "required": false; "isSignal": true; }; "minQueryLength": { "alias": "minQueryLength"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "panelOpen": { "alias": "panelOpen"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "resultsCountText": { "alias": "resultsCountText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "panelOpen": "panelOpenChange"; "searchEvent": "searchEvent"; "clear": "clear"; "suggestionSelect": "suggestionSelect"; }, ["suggestionTemplate", "footerTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchComponent<any>, "tedi-search", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showClearOnInteraction": { "alias": "showClearOnInteraction"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "button": { "alias": "button"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindDescription": { "alias": "bindDescription"; "required": false; "isSignal": true; }; "bindDisabled": { "alias": "bindDisabled"; "required": false; "isSignal": true; }; "minQueryLength": { "alias": "minQueryLength"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "panelOpen": { "alias": "panelOpen"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "resultsCountText": { "alias": "resultsCountText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "panelOpen": "panelOpenChange"; "searchEvent": "searchEvent"; "clear": "clear"; "suggestionSelect": "suggestionSelect"; }, ["suggestionTemplate", "footerTemplate"], never, true, never>;
 }
 
 declare class SearchSuggestionComponent implements Highlightable {
@@ -7565,6 +7659,12 @@ declare class SelectComponent<T = unknown> implements AfterContentChecked, After
      * @default false
      */
     clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Show the clear button only while the filled select is hovered or focused.
+     * Requires `clearable`.
+     * @default false
+     */
+    showClearOnInteraction: _angular_core.InputSignal<boolean>;
     /**
      * Element reference used to determine dropdown width.
      * When null, dropdown width matches the host element.
@@ -7934,7 +8034,7 @@ declare class SelectComponent<T = unknown> implements AfterContentChecked, After
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tedi-select", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "dropdownWidthRef": { "alias": "dropdownWidthRef"; "required": false; "isSignal": true; }; "dropdownAlign": { "alias": "dropdownAlign"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "selectableGroups": { "alias": "selectableGroups"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "tagEllipsis": { "alias": "tagEllipsis"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "disabledKey": { "alias": "disabledKey"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "maxDropdownHeight": { "alias": "maxDropdownHeight"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "dropdownType": { "alias": "dropdownType"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualItemSize": { "alias": "virtualItemSize"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "clearSearchOnSelect": { "alias": "clearSearchOnSelect"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; }, ["optionTemplate", "valueTemplate", "tooltipTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tedi-select", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showClearOnInteraction": { "alias": "showClearOnInteraction"; "required": false; "isSignal": true; }; "dropdownWidthRef": { "alias": "dropdownWidthRef"; "required": false; "isSignal": true; }; "dropdownAlign": { "alias": "dropdownAlign"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "selectableGroups": { "alias": "selectableGroups"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "tagEllipsis": { "alias": "tagEllipsis"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "disabledKey": { "alias": "disabledKey"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "maxDropdownHeight": { "alias": "maxDropdownHeight"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "dropdownType": { "alias": "dropdownType"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualItemSize": { "alias": "virtualItemSize"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "clearSearchOnSelect": { "alias": "clearSearchOnSelect"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; }, ["optionTemplate", "valueTemplate", "tooltipTemplate"], never, true, never>;
 }
 
 type SliderHideLabel = boolean | "keep-space";
@@ -8859,58 +8959,6 @@ declare class AttachmentActionsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AttachmentActionsComponent, "tedi-attachment-actions", never, { "padded": { "alias": "padded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type EmptyStateType = "separate" | "attached" | "inside";
-type EmptyStateSize = "default" | "small";
-/**
- * Communicates that there is nothing to display — empty search results, an
- * unpopulated list, a freshly-created workspace — and optionally guides the
- * user toward the next step via action buttons or a link.
- *
- * Description is projected via `<ng-content>`. Actions are projected via
- * `<ng-content select="[tedi-empty-state-actions]">`.
- */
-declare class EmptyStateComponent {
-    /**
-     * Container variant — matches the Figma "Types" section.
-     * - `'separate'` (default) — full border + radius, stands on its own.
-     * - `'attached'` — top border omitted so the block sits flush beneath a
-     *   preceding card or table (same width + same bottom-radius).
-     * - `'inside'` — no border, no radius; intended to be placed inside another
-     *   container such as a `<tedi-card>` or `<tedi-table>`.
-     * @default separate
-     */
-    readonly type: _angular_core.InputSignal<EmptyStateType>;
-    /**
-     * Padding scale. `default` = 24px, `small` = 16px.
-     * @default default
-     */
-    readonly size: _angular_core.InputSignal<EmptyStateSize>;
-    /**
-     * Material icon name rendered above the text block. Pass `null` to hide.
-     * @default spa
-     */
-    readonly icon: _angular_core.InputSignal<string | null>;
-    /**
-     * Color of the icon. Defaults to brand so the empty state reads as a
-     * "fresh canvas" cue rather than a destructive state.
-     * @default brand
-     */
-    readonly iconColor: _angular_core.InputSignal<IconColor>;
-    /**
-     * Size of the icon, in pixels.
-     * @default 36
-     */
-    readonly iconSize: _angular_core.InputSignal<IconSize>;
-    /**
-     * Optional heading rendered above the description — appears as an `<h3>` in
-     * brand-primary text color.
-     */
-    readonly heading: _angular_core.InputSignal<string | undefined>;
-    protected readonly hostClasses: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStateComponent, "tedi-empty-state", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tedi-empty-state-actions]"], true, never>;
-}
-
 type ColWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type JustifySelf = "start" | "end" | "center" | "stretch";
 type AlignSelf = "start" | "end" | "center" | "stretch";