@tedi-design-system/angular 7.0.0-rc.2 → 7.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/angular",
-  "version": "7.0.0-rc.2",
+  "version": "7.0.0-rc.4",
   "type": "module",
   "main": "community.mjs",
   "module": "fesm2022/tedi-design-system-angular.mjs",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
-    "@tedi-design-system/core": "^6.4.1",
+    "@tedi-design-system/core": "^6.4.3",
     "tslib": "^2.3.0"
   },
   "commitlint": {

package/tedi/index.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentChecked, AfterViewInit, InputSignal, Signal, PipeTransform, ElementRef, TemplateRef, OnDestroy, Injector, InjectionToken, WritableSignal, OnInit, AfterViewChecked, AfterContentInit, QueryList, EnvironmentProviders } from '@angular/core';
+import { AfterContentChecked, AfterViewInit, InputSignal, Signal, PipeTransform, OnInit, OnDestroy, ElementRef, TemplateRef, Injector, InjectionToken, WritableSignal, AfterViewChecked, AfterContentInit, QueryList, EnvironmentProviders } from '@angular/core';
+import { _IdGenerator } from '@angular/cdk/a11y';
 import * as _tedi_design_system_angular_tedi from '@tedi-design-system/angular/tedi';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import * as _tanstack_table_core from '@tanstack/table-core';
@@ -7,7 +8,6 @@ import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Table, VisibilityState, ColumnOrderState, ColumnSizingState, RowSelectionState, ExpandedState, ColumnFiltersState, SortingState, PaginationState, ColumnDef, CellContext, Row, Column } from '@tanstack/angular-table';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { ConnectedOverlayPositionChange, ConnectedPosition, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
-import { _IdGenerator } from '@angular/cdk/a11y';
 import { CdkListbox } from '@angular/cdk/listbox';
 import { Observable } from 'rxjs';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -1622,6 +1622,7 @@ type AlertRole = "alert" | "status" | "none";
 type AlertType = "info" | "success" | "warning" | "danger";
 type AlertTitleType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
 type AlertVariant = "default" | "global" | "noSideBorders";
+type AlertSize = "default" | "small";
 declare class AlertComponent {
     /**
      * An optional title for the alert, typically used to summarize the message's purpose.
@@ -1661,6 +1662,13 @@ declare class AlertComponent {
      * For example, 'global' for full-width alerts or 'noSideBorders' for alerts without side borders.
      */
     variant: _angular_core.InputSignal<AlertVariant>;
+    /**
+     * Alert size variant.
+     * - 'default': standard padding and body text size.
+     * - 'small': reduced padding and smaller body text.
+     * @default default
+     */
+    size: _angular_core.InputSignal<AlertSize>;
     /**
      * The HTML tag to be used for the alert title.
      * @default h2
@@ -1690,7 +1698,7 @@ declare class AlertComponent {
     }>;
     handleClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "tedi-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "titleElement": { "alias": "titleElement"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closeClick": "closeClick"; }, never, ["[tedi-alert-action]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "tedi-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "titleElement": { "alias": "titleElement"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closeClick": "closeClick"; }, never, ["[tedi-alert-action]", "*"], true, never>;
 }
 
 declare const TOAST_DEFAULT_DURATION = 6000;
@@ -1902,9 +1910,14 @@ declare class InfoButtonComponent {
      * InfoButton ARIA label
      */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Color variant. Use `inverted` on dark or colored backgrounds.
+     * @default primary
+     */
+    readonly color: _angular_core.InputSignal<"primary" | "inverted">;
     private readonly _defaultLabel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InfoButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InfoButtonComponent, "button[tedi-info-button]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InfoButtonComponent, "button[tedi-info-button]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type CollapseButtonArrowType = "default" | "secondary";
@@ -1947,6 +1960,12 @@ declare class CollapseButtonComponent {
      * @default false
      */
     inverted: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to underline the text label.
+     * Has no effect in icon-only mode.
+     * @default true
+     */
+    underline: _angular_core.InputSignal<boolean>;
     /**
      * ID of the disclosed region. Forwarded to `aria-controls`.
      */
@@ -1978,7 +1997,7 @@ declare class CollapseButtonComponent {
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapseButtonComponent, never>;
-    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; }; "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>;
+    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;
@@ -2074,6 +2093,257 @@ declare class ClosingButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClosingButtonComponent, "button[tedi-closing-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * A single item inside a `tedi-accordion`. Owns the item's state (expanded)
+ * and the inputs shared by header and content (selected, showIconCard,
+ * defaultExpanded, disabled).
+ *
+ * Header-related configuration lives on `tedi-accordion-item-header`; body
+ * styling lives on `tedi-accordion-item-content`.
+ *
+ * Use together with the header and content children:
+ *
+ * ```html
+ * <tedi-accordion-item>
+ *   <tedi-accordion-item-header>
+ *     <span tedi-accordion-title>Title</span>
+ *   </tedi-accordion-item-header>
+ *   <tedi-accordion-item-content>Content</tedi-accordion-item-content>
+ * </tedi-accordion-item>
+ * ```
+ *
+ * The optional `[tedi-accordion-icon-card]` slot is projected as a direct
+ * child of the item (not inside the header), because it occupies its own
+ * column in the item's grid layout.
+ */
+declare class AccordionItemComponent implements OnInit, OnDestroy {
+    readonly idGenerator: _IdGenerator;
+    readonly contentId: string;
+    readonly headerId: string;
+    /**
+     * Whether the accordion item is expanded initially.
+     * Does not control the expanded state after initialization.
+     *
+     * When omitted, falls back to the parent `tedi-accordion`'s `defaultExpanded`
+     * (or `false`). Pass an explicit boolean to override the group default —
+     * including `false` to keep an individual item collapsed when the group
+     * default is `true`.
+     */
+    defaultExpanded: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Enables the icon-card layout variant. Affects both header and content
+     * styling, so it lives on the item.
+     */
+    showIconCard: _angular_core.InputSignal<boolean>;
+    /**
+     * Marks the accordion item as selected.
+     */
+    selected: _angular_core.InputSignal<boolean>;
+    /**
+     * Disables the item — the header trigger becomes non-interactive and the
+     * expanded state can no longer be toggled by user interaction. The current
+     * state is preserved (e.g. a disabled item that's `defaultExpanded` stays open).
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Stable id used for hash-based deep-linking. Pair with `openOnHashMatch`.
+     * Not the same as the auto-generated `headerId` / `contentId` used for ARIA.
+     */
+    itemId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * When `true`, auto-expands the item if `window.location.hash` matches
+     * `itemId` (e.g. `https://example.com/page#my-item`). Re-runs on
+     * `hashchange` so navigating between in-page links updates which item is
+     * open. No-op when `itemId` is omitted or the item is disabled.
+     */
+    openOnHashMatch: _angular_core.InputSignal<boolean>;
+    expanded: _angular_core.ModelSignal<boolean>;
+    private readonly accordion;
+    private hashChangeHandler?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    toggle(): void;
+    setExpanded(value: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "tedi-accordion-item", never, { "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "showIconCard": { "alias": "showIconCard"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "itemId": { "alias": "itemId"; "required": false; "isSignal": true; }; "openOnHashMatch": { "alias": "openOnHashMatch"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["[tedi-accordion-icon-card]", "tedi-accordion-item-header", "tedi-accordion-item-content"], true, never>;
+}
+
+/**
+ * Breakpoint-aware inputs of the Accordion. Consumers can override each of
+ * these per breakpoint via the `xs` / `sm` / `md` / `lg` / `xl` / `xxl` inputs:
+ *
+ * ```html
+ * <tedi-accordion
+ *   [allowMultiple]="false"
+ *   [lg]="{ allowMultiple: true }"
+ * >...</tedi-accordion>
+ * ```
+ */
+type AccordionInputs = {
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same
+     * time. If false, opening one item collapses the others automatically.
+     * @default false
+     */
+    allowMultiple: boolean;
+    /**
+     * Group-level default for items' initial expanded state. Sets the initial
+     * `defaultExpanded` for every child `tedi-accordion-item` that doesn't
+     * specify its own. Per-item `defaultExpanded` (including an explicit
+     * `false`) takes precedence.
+     *
+     * Typically combined with `allowMultiple` to start with all items open.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Vertical gap between sibling `tedi-accordion-item` components, in **rem**
+     * (so the value scales with the user's font-size preferences and matches
+     * the rest of TEDI's layout spacing convention). Accepts any number, not
+     * limited to a fixed scale.
+     *
+     * Forwarded as the `--tedi-accordion-item-gap` CSS variable, so consumers
+     * can also override it from any ancestor class — or set a px value there
+     * directly when an exact-pixel override is needed.
+     *
+     * When omitted, falls back to the design-token default
+     * (`var(--layout-grid-gutters-08)` = 0.5rem).
+     */
+    itemGap?: number;
+};
+declare class AccordionComponent implements BreakpointInputs<AccordionInputs> {
+    allowMultiple: _angular_core.InputSignal<boolean>;
+    defaultExpanded: _angular_core.InputSignal<boolean | undefined>;
+    itemGap: _angular_core.InputSignal<number | undefined>;
+    xs: _angular_core.InputSignal<AccordionInputs | undefined>;
+    sm: _angular_core.InputSignal<AccordionInputs | undefined>;
+    md: _angular_core.InputSignal<AccordionInputs | undefined>;
+    lg: _angular_core.InputSignal<AccordionInputs | undefined>;
+    xl: _angular_core.InputSignal<AccordionInputs | undefined>;
+    xxl: _angular_core.InputSignal<AccordionInputs | undefined>;
+    private readonly breakpointService;
+    breakpointInputs: _angular_core.Signal<AccordionInputs>;
+    protected readonly itemGapStyle: _angular_core.Signal<string | null>;
+    items: _angular_core.Signal<readonly AccordionItemComponent[]>;
+    onItemToggled(activeItem: AccordionItemComponent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "tedi-accordion", never, { "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "itemGap": { "alias": "itemGap"; "required": false; "isSignal": true; }; "xs": { "alias": "xs"; "required": false; "isSignal": true; }; "sm": { "alias": "sm"; "required": false; "isSignal": true; }; "md": { "alias": "md"; "required": false; "isSignal": true; }; "lg": { "alias": "lg"; "required": false; "isSignal": true; }; "xl": { "alias": "xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "xxl"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+declare class AccordionItemHeaderComponent {
+    protected readonly item: AccordionItemComponent;
+    private readonly translationService;
+    private readonly defaultOpenLabel;
+    private readonly defaultCloseLabel;
+    /**
+     * If false, disables header toggling and enables using interactive elements in the accordion header.
+     */
+    headerClickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Sets how the accordion title stretches horizontally.
+     * `hug` - container sizes to its content.
+     * `fill` - container expands to available space, moving any trailing elements to the end.
+     */
+    titleLayout: _angular_core.InputSignal<"fill" | "hug">;
+    /**
+     * Text shown when accordion is collapsed. Rendered literally — translate
+     * at the call site if needed. When omitted, falls back to the translated
+     * `"open"` label from `TediTranslationService`.
+     */
+    openText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Text shown when accordion is expanded. Rendered literally — translate
+     * at the call site if needed. When omitted, falls back to the translated
+     * `"close"` label from `TediTranslationService`.
+     */
+    closeText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Controls whether the expand/collapse label is shown.
+     */
+    showExpandLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Controls whether the default expand/collapse action is shown.
+     */
+    showDefaultExpandAction: _angular_core.InputSignal<boolean>;
+    /**
+     * Position of the expand action relative to the header content.
+     */
+    expandActionPosition: _angular_core.InputSignal<"start" | "end">;
+    /**
+     * Custom CSS classes for the accordion header.
+     */
+    headerClass: _angular_core.InputSignal<string | null>;
+    /**
+     * When set, wraps the header trigger in a semantic `<h1>`–`<h6>` element
+     * following the WAI-ARIA Accordion Pattern. Improves accessibility for
+     * documents with a heading hierarchy (FAQ pages, docs). The wrapper uses
+     * `display: contents` so it doesn't affect the visual layout — it only adds
+     * semantic information for assistive technologies and TOC tools.
+     */
+    headingLevel: _angular_core.InputSignal<1 | 3 | 5 | 4 | 2 | 6 | undefined>;
+    /**
+     * Chevron style of the default expand action.
+     * Only effective when `headerClickable` is `false` (otherwise the
+     * default expand action isn't a `CollapseButton`) and `showExpandLabel`
+     * is `false` (only icon-only mode honours `arrowType` — see the
+     * `CollapseButton` docs).
+     * @default "default"
+     */
+    expandActionArrowType: _angular_core.InputSignal<CollapseButtonArrowType>;
+    /**
+     * Visual size of the default expand action. Only effective when
+     * `headerClickable` is `false`.
+     *
+     * When omitted, the size is derived from `showExpandLabel`:
+     * - `showExpandLabel === true`  → `"default"`
+     * - `showExpandLabel === false` → `"small"` (icon-only mode reads
+     *   better at the smaller chevron size).
+     *
+     * Pass an explicit value to override the derived default.
+     */
+    expandActionSize: _angular_core.InputSignal<CollapseButtonSize | undefined>;
+    /**
+     * Use the inverted (light-on-dark) palette for the default expand
+     * action, for placement on a dark or brand background. Only effective
+     * when `headerClickable` is `false`.
+     * @default false
+     */
+    expandActionInverted: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the default expand action's label is underlined. Defaults to
+     * `false` so the chevron stays the sole affordance — an underlined
+     * label inside the accordion header reads as a stray link. Set to
+     * `true` for contexts that want link-style styling. Only effective
+     * when `headerClickable` is `false` and the expand action is not in
+     * icon-only mode (i.e. `showExpandLabel` is `true`).
+     * @default false
+     */
+    expandActionUnderline: _angular_core.InputSignal<boolean>;
+    readonly headerId: string;
+    readonly contentId: string;
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.Signal<boolean>;
+    readonly expandLabel: _angular_core.Signal<string>;
+    readonly showStartExpandAction: _angular_core.Signal<boolean>;
+    readonly showEndExpandAction: _angular_core.Signal<boolean>;
+    readonly resolvedExpandActionSize: _angular_core.Signal<CollapseButtonSize>;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemHeaderComponent, "tedi-accordion-item-header", never, { "headerClickable": { "alias": "headerClickable"; "required": false; "isSignal": true; }; "titleLayout": { "alias": "titleLayout"; "required": false; "isSignal": true; }; "openText": { "alias": "openText"; "required": false; "isSignal": true; }; "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "showExpandLabel": { "alias": "showExpandLabel"; "required": false; "isSignal": true; }; "showDefaultExpandAction": { "alias": "showDefaultExpandAction"; "required": false; "isSignal": true; }; "expandActionPosition": { "alias": "expandActionPosition"; "required": false; "isSignal": true; }; "headerClass": { "alias": "headerClass"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "expandActionArrowType": { "alias": "expandActionArrowType"; "required": false; "isSignal": true; }; "expandActionSize": { "alias": "expandActionSize"; "required": false; "isSignal": true; }; "expandActionInverted": { "alias": "expandActionInverted"; "required": false; "isSignal": true; }; "expandActionUnderline": { "alias": "expandActionUnderline"; "required": false; "isSignal": true; }; }, {}, never, ["[tedi-accordion-start-action]", "[tedi-accordion-before-title]", "[tedi-accordion-title]", "[tedi-accordion-start-description]", "[tedi-accordion-after-title]", "[tedi-accordion-end-description]", "[tedi-accordion-end-action]"], true, never>;
+}
+
+declare class AccordionItemContentComponent {
+    protected readonly item: AccordionItemComponent;
+    /**
+     * Custom CSS classes for the accordion content.
+     */
+    contentClass: _angular_core.InputSignal<string | null>;
+    readonly headerId: string;
+    readonly contentId: string;
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemContentComponent, "tedi-accordion-item-content", never, { "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type CardBorderPlacement = "top" | "left";
 type CardBackground = "primary" | "secondary" | "tertiary" | "accent" | "brand-primary" | "brand-secondary" | "brand-tertiary" | "brand-quaternary" | "danger-primary" | "danger-secondary" | "success-primary" | "success-secondary" | "info-primary" | "info-secondary" | "warning-primary" | "warning-secondary" | "neutral-primary" | "neutral-secondary";
 type CardBorderType = `${CardBorderPlacement}-${CardBackground}` | CardBackground;
@@ -6792,6 +7062,10 @@ type SeparatorDotSize = "large" | "medium" | "small" | "extra-small";
 type SeparatorThickness = 1 | 2;
 type SeparatorSpacingValue = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2 | 2.5 | 5;
 type SeparatorSpacing = {
+    /** Shorthand for `left` and `right`. Overridden by an explicit side. */
+    x?: SeparatorSpacingValue;
+    /** Shorthand for `top` and `bottom`. Overridden by an explicit side. */
+    y?: SeparatorSpacingValue;
     top?: SeparatorSpacingValue;
     bottom?: SeparatorSpacingValue;
     left?: SeparatorSpacingValue;
@@ -6824,9 +7098,11 @@ declare class SeparatorComponent {
      */
     thickness: _angular_core.InputSignal<SeparatorThickness>;
     /**
-     * Spacing applied based on the axis:
-     * - For horizontal axis, spacing is applied to top and bottom of the separator.
-     * - For vertical axis, spacing is applied to left and right of the separator.
+     * Spacing applied as margins around the separator.
+     * - Horizontal axis supports y-spacing only: a number sets top and bottom; the object form's `y` (or `top`/`bottom`) set each side. `x`/`left`/`right` are ignored.
+     * - Vertical axis supports both x- and y-spacing: a number sets left and right; the object form accepts `x`/`y` shorthands or explicit `top`/`bottom`/`left`/`right`.
+     *
+     * In the object form, `x` is shorthand for `left`+`right` and `y` for `top`+`bottom`; an explicit side overrides the matching shorthand.
      */
     spacing: _angular_core.InputSignal<SeparatorSpacingValue | SeparatorSpacing | undefined>;
     /**
@@ -8268,124 +8544,6 @@ declare class StatusBadgeComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusBadgeComponent, "tedi-status-badge", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * A single item inside a `tedi-accordion`. Owns the item's state (expanded)
- * and the inputs shared by header and content (selected, showIconCard,
- * defaultExpanded).
- *
- * Header-related configuration lives on `tedi-accordion-item-header`; body
- * styling lives on `tedi-accordion-item-content`.
- *
- * Use together with the header and content children:
- *
- * ```html
- * <tedi-accordion-item>
- *   <tedi-accordion-item-header>
- *     <span tedi-accordion-title>Title</span>
- *   </tedi-accordion-item-header>
- *   <tedi-accordion-item-content>Content</tedi-accordion-item-content>
- * </tedi-accordion-item>
- * ```
- *
- * The optional `[tedi-accordion-icon-card]` slot is projected as a direct
- * child of the item (not inside the header), because it occupies its own
- * column in the item's grid layout.
- */
-declare class AccordionItemComponent implements OnInit {
-    readonly idGenerator: _IdGenerator;
-    readonly contentId: string;
-    readonly headerId: string;
-    /**
-     * Whether the accordion item is expanded initially.
-     * Does not control the expanded state after initialization.
-     */
-    defaultExpanded: _angular_core.InputSignal<boolean>;
-    /**
-     * Enables the icon-card layout variant. Affects both header and content
-     * styling, so it lives on the item.
-     */
-    showIconCard: _angular_core.InputSignal<boolean>;
-    /**
-     * Marks the accordion item as selected.
-     */
-    selected: _angular_core.InputSignal<boolean>;
-    expanded: _angular_core.ModelSignal<boolean>;
-    private readonly accordion;
-    ngOnInit(): void;
-    toggle(): void;
-    setExpanded(value: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "tedi-accordion-item", never, { "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "showIconCard": { "alias": "showIconCard"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["[tedi-accordion-icon-card]", "tedi-accordion-item-header", "tedi-accordion-item-content"], true, never>;
-}
-
-declare class AccordionComponent {
-    /**
-     * Whether the accordion allows multiple items to be expanded at the same time.
-     * If false, opening one item will collapse the others automatically.
-     */
-    allowMultiple: _angular_core.InputSignal<boolean>;
-    items: _angular_core.Signal<readonly AccordionItemComponent[]>;
-    onItemToggled(activeItem: AccordionItemComponent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "tedi-accordion", never, { "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
-}
-
-declare class AccordionItemHeaderComponent {
-    protected readonly item: AccordionItemComponent;
-    /**
-     * If false, disables header toggling and enables using interactive elements in the accordion header.
-     */
-    headerClickable: _angular_core.InputSignal<boolean>;
-    /**
-     * Sets how the accordion title stretches horizontally.
-     * `hug` - container sizes to its content.
-     * `fill` - container expands to available space, moving any trailing elements to the end.
-     */
-    titleLayout: _angular_core.InputSignal<"fill" | "hug">;
-    /** Label shown when accordion is collapsed */
-    openLabel: _angular_core.InputSignal<string>;
-    /** Label shown when accordion is expanded */
-    closeLabel: _angular_core.InputSignal<string>;
-    /**
-     * Controls whether the expand/collapse label is shown.
-     */
-    showExpandLabel: _angular_core.InputSignal<boolean>;
-    /**
-     * Controls whether the default expand/collapse action is shown.
-     */
-    showDefaultExpandAction: _angular_core.InputSignal<boolean>;
-    /**
-     * Position of the expand action relative to the header content.
-     */
-    expandActionPosition: _angular_core.InputSignal<"start" | "end">;
-    /**
-     * Custom CSS classes for the accordion header.
-     */
-    headerClass: _angular_core.InputSignal<string | null>;
-    readonly headerId: string;
-    readonly contentId: string;
-    readonly expanded: _angular_core.ModelSignal<boolean>;
-    readonly expandLabel: _angular_core.Signal<string>;
-    readonly showStartExpandAction: _angular_core.Signal<boolean>;
-    readonly showEndExpandAction: _angular_core.Signal<boolean>;
-    toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemHeaderComponent, "tedi-accordion-item-header", never, { "headerClickable": { "alias": "headerClickable"; "required": false; "isSignal": true; }; "titleLayout": { "alias": "titleLayout"; "required": false; "isSignal": true; }; "openLabel": { "alias": "openLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "showExpandLabel": { "alias": "showExpandLabel"; "required": false; "isSignal": true; }; "showDefaultExpandAction": { "alias": "showDefaultExpandAction"; "required": false; "isSignal": true; }; "expandActionPosition": { "alias": "expandActionPosition"; "required": false; "isSignal": true; }; "headerClass": { "alias": "headerClass"; "required": false; "isSignal": true; }; }, {}, never, ["[tedi-accordion-start-action]", "[tedi-accordion-before-title]", "[tedi-accordion-title]", "[tedi-accordion-start-description]", "[tedi-accordion-after-title]", "[tedi-accordion-end-description]", "[tedi-accordion-end-action]"], true, never>;
-}
-
-declare class AccordionItemContentComponent {
-    protected readonly item: AccordionItemComponent;
-    /**
-     * Custom CSS classes for the accordion content.
-     */
-    contentClass: _angular_core.InputSignal<string | null>;
-    readonly headerId: string;
-    readonly contentId: string;
-    readonly expanded: _angular_core.ModelSignal<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemContentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemContentComponent, "tedi-accordion-item-content", never, { "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
 declare class HideAtDirective {
     hideAt: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl" | "xxl">;
     private templateRef;
@@ -8506,5 +8664,5 @@ declare function isValidTime(time: string | null | undefined): boolean;
 declare function normalizeTime(input: string): string | null;
 
 export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
-export type { AlertRole, AlertTitleType, AlertType, AlertVariant, AlignItems, AlignSelf, ArrowOffset, ArrowType, AttachmentDirection, Breakpoint, BreakpointFlag, BreakpointInput, BreakpointInputs, BreakpointInputsWithoutSignals, BreakpointObject, BulletColor, ButtonGroupDropdownLabelMode, ButtonSize, ButtonVariant, CalendarView, CardBackground, CardBorderPlacement, CardBorderRadius, CardBorderType, CardContentInputs, CardIconSize, CardIconType, CardInputs, CardPadding, CardPaddingNumber, CardResolvedCorners, CarouselIndicatorsVariant, CheckboxCardVariant, CheckboxGroupDirection, CheckboxSize, ClosingButtonIconSize, ClosingButtonSize, ColInputs, ColWidth, CollapseButtonArrowType, CollapseButtonSize, CollapseSize, Cols, ColumnReorderPhase, CompareWithFn, ComponentInputs, DateAfter, DateBefore, DateFieldMode, DateInterval, DatePickerDay, DatePickerInputSize, DatePickerInputState, DatePickerMatcher, DatePickerSelectorMode, DatePickerView, DateRange, DayOfWeek, DropdownApi, DropdownContentApi, DropdownItemValueLayout, DropdownItemValueType, DropdownPosition, DropdownRole, DropdownTriggerAriaHasPopup, EllipsisPosition, EmptyStateSize, EmptyStateType, FeedbackTextPosition, FeedbackTextType, FilterOption, FilterSize, FilterVariant, FooterSidePlacement, FooterSidePosition, FormFieldControl, FormFieldIcon, Gap, GroupByFn, HeaderContentAlignment, HeaderLanguage, HeaderLoginInputs, HeaderLoginSize, HeaderLogoutInputs, HeaderLogoutSize, HeaderProfileInputs, HeaderProfileSize, HeaderSearchMobileLabels, HeaderSearchMobileVariant, HorizontalStepperBackground, IconBackgroundColor, IconColor, IconSize, IconType, IconVariant, InputSize, InputState, JustifyItems, JustifySelf, LabelColor, LabelSize, Language, LinkInputs, LinkSize, LinkVariant, Matcher, ModalConfig, ModalFullscreen, ModalPosition, ModalScrollBehavior, ModalSize, ModalWidth, ModalWidthPreset, NumberFieldSize, OverlayPosition, OverlaySide, PaginationBackground, PaginationDividerPosition, PaginationItem, PaginationItemType, PaginationLabels, PaginationVisibility, PopoverPosition, PopoverWidth, ProgressBarInputs, ProgressBarLabelPosition, ProgressBarSize, ProgressBarValuePosition, RadioCardVariant, RadioGroupDirection, RadioSize, Representative, RepresentativeIcon, RowInputs, ScrollFadePosition, ScrollFadeScrollbar, ScrollFadeSize, SelectInputSize, SelectOption, SelectOptionContext, SelectOptionGroup, SelectValueContext, SeparatorAxis, SeparatorColor, SeparatorDotSize, SeparatorSpacing, SeparatorSpacingValue, SeparatorThickness, SeparatorVariant, SideNavItemSize, SpinnerColor, SpinnerSize, StatusBadgeColor, StatusBadgeSize, StatusBadgeStatus, StatusBadgeVariant, StatusIndicatorPosition, StatusIndicatorSize, StatusIndicatorType, TEDITheme, TableColumnMeta, TableControlColumn, TableExpandTrigger, TableFilterOptions, TablePaginationOptions, TablePersistOptions, TablePersistenceController, TableSelectionMode, TableSize, TableState, TableStatePatch, TabsOverflowMode, TagEllipsis, TagOverflowOptions, TagType, TediColumnDef, TediConfig, TediTableContextValue, TediTableFilterContext, TextColor, TextGroupInputs, TextGroupType, TextModifiers, Theme, TimeFieldFullscreen, TimeFieldModal, TimeFieldPickerTrigger, TimeFieldPickerVariant, TimeFieldUseNativePicker, TimePickerVariant, TimelineCardPadding, TimelineVariant, ToastConfig, ToastPosition, ToastRole, ToastType, ToggleSize, ToggleType, ToggleVariant, TooltipOpenWith, TooltipPosition, TooltipWidth, UsePaginationArgs, VerticalSpacingSize };
+export type { AccordionInputs, AlertRole, AlertSize, AlertTitleType, AlertType, AlertVariant, AlignItems, AlignSelf, ArrowOffset, ArrowType, AttachmentDirection, Breakpoint, BreakpointFlag, BreakpointInput, BreakpointInputs, BreakpointInputsWithoutSignals, BreakpointObject, BulletColor, ButtonGroupDropdownLabelMode, ButtonSize, ButtonVariant, CalendarView, CardBackground, CardBorderPlacement, CardBorderRadius, CardBorderType, CardContentInputs, CardIconSize, CardIconType, CardInputs, CardPadding, CardPaddingNumber, CardResolvedCorners, CarouselIndicatorsVariant, CheckboxCardVariant, CheckboxGroupDirection, CheckboxSize, ClosingButtonIconSize, ClosingButtonSize, ColInputs, ColWidth, CollapseButtonArrowType, CollapseButtonSize, CollapseSize, Cols, ColumnReorderPhase, CompareWithFn, ComponentInputs, DateAfter, DateBefore, DateFieldMode, DateInterval, DatePickerDay, DatePickerInputSize, DatePickerInputState, DatePickerMatcher, DatePickerSelectorMode, DatePickerView, DateRange, DayOfWeek, DropdownApi, DropdownContentApi, DropdownItemValueLayout, DropdownItemValueType, DropdownPosition, DropdownRole, DropdownTriggerAriaHasPopup, EllipsisPosition, EmptyStateSize, EmptyStateType, FeedbackTextPosition, FeedbackTextType, FilterOption, FilterSize, FilterVariant, FooterSidePlacement, FooterSidePosition, FormFieldControl, FormFieldIcon, Gap, GroupByFn, HeaderContentAlignment, HeaderLanguage, HeaderLoginInputs, HeaderLoginSize, HeaderLogoutInputs, HeaderLogoutSize, HeaderProfileInputs, HeaderProfileSize, HeaderSearchMobileLabels, HeaderSearchMobileVariant, HorizontalStepperBackground, IconBackgroundColor, IconColor, IconSize, IconType, IconVariant, InputSize, InputState, JustifyItems, JustifySelf, LabelColor, LabelSize, Language, LinkInputs, LinkSize, LinkVariant, Matcher, ModalConfig, ModalFullscreen, ModalPosition, ModalScrollBehavior, ModalSize, ModalWidth, ModalWidthPreset, NumberFieldSize, OverlayPosition, OverlaySide, PaginationBackground, PaginationDividerPosition, PaginationItem, PaginationItemType, PaginationLabels, PaginationVisibility, PopoverPosition, PopoverWidth, ProgressBarInputs, ProgressBarLabelPosition, ProgressBarSize, ProgressBarValuePosition, RadioCardVariant, RadioGroupDirection, RadioSize, Representative, RepresentativeIcon, RowInputs, ScrollFadePosition, ScrollFadeScrollbar, ScrollFadeSize, SelectInputSize, SelectOption, SelectOptionContext, SelectOptionGroup, SelectValueContext, SeparatorAxis, SeparatorColor, SeparatorDotSize, SeparatorSpacing, SeparatorSpacingValue, SeparatorThickness, SeparatorVariant, SideNavItemSize, SpinnerColor, SpinnerSize, StatusBadgeColor, StatusBadgeSize, StatusBadgeStatus, StatusBadgeVariant, StatusIndicatorPosition, StatusIndicatorSize, StatusIndicatorType, TEDITheme, TableColumnMeta, TableControlColumn, TableExpandTrigger, TableFilterOptions, TablePaginationOptions, TablePersistOptions, TablePersistenceController, TableSelectionMode, TableSize, TableState, TableStatePatch, TabsOverflowMode, TagEllipsis, TagOverflowOptions, TagType, TediColumnDef, TediConfig, TediTableContextValue, TediTableFilterContext, TextColor, TextGroupInputs, TextGroupType, TextModifiers, Theme, TimeFieldFullscreen, TimeFieldModal, TimeFieldPickerTrigger, TimeFieldPickerVariant, TimeFieldUseNativePicker, TimePickerVariant, TimelineCardPadding, TimelineVariant, ToastConfig, ToastPosition, ToastRole, ToastType, ToggleSize, ToggleType, ToggleVariant, TooltipOpenWith, TooltipPosition, TooltipWidth, UsePaginationArgs, VerticalSpacingSize };
 //# sourceMappingURL=index.d.ts.map