@sdcorejs/angular 19.0.1 → 20.0.0-rc.2

package/README.md

@@ -1,12 +1,12 @@
 # @sdcorejs/angular
 
-> Angular UI library built on Angular Material - supports Angular 19 / 20 / 21.
+> **VI** — Thư viện UI nội bộ xây dựng trên Angular Material, hỗ trợ Angular 19+  
+> **EN** — Internal UI component library built on Angular Material, supporting Angular 19+
 
+[![Version](https://img.shields.io/badge/version-19.0.0--beta.47-blue)](./package.json)
 [![Angular](https://img.shields.io/badge/Angular-19%2B-red)](https://angular.dev)
 [![Angular Material](https://img.shields.io/badge/Angular_Material-19%2B-purple)](https://material.angular.io)
 
-**🚀 [Showcase](https://sdcorejs.github.io/sdcorejs-angular)** · **📖 [Storybook — code samples, props & API](https://sdcorejs.github.io/portal-template)**
-
 ---
 
 ## Table of Contents / Mục lục
@@ -423,18 +423,19 @@ import {
   SdSelect,       // Dropdown
   SdAutocomplete, // Autocomplete
   SdDate,         // Date picker
+  SdSearch,       // Search với debounce
 } from '@sdcorejs/angular/forms';
 ```
 
 ```html
-<sd-input [(model)]="form.name" label="Họ tên" [required]="true" />
+<sd-input [(ngModel)]="form.name" label="Họ tên" [required]="true" />
 
-<sd-input-number [(model)]="form.price" label="Đơn giá" [min]="0" suffix="VNĐ" />
+<sd-input-number [(ngModel)]="form.price" label="Đơn giá" [min]="0" suffix="VNĐ" />
 
-<sd-select [(model)]="form.status" label="Trạng thái"
+<sd-select [(ngModel)]="form.status" label="Trạng thái"
   [items]="statusList" valueField="value" displayField="label" />
 
-<sd-date [(model)]="form.birthday" label="Ngày sinh" />
+<sd-date [(ngModel)]="form.birthday" label="Ngày sinh" />
 ```
 
 ---
@@ -559,17 +560,17 @@ export class ProductListComponent implements OnInit {
       <sd-section title="Thông tin sản phẩm" icon="inventory">
         <div class="row">
           <div class="col-6">
-            <sd-input [(model)]="formData.code" label="Mã" [required]="true" />
+            <sd-input [(ngModel)]="formData.code" label="Mã" [required]="true" />
           </div>
           <div class="col-6">
-            <sd-select [(model)]="formData.status" label="Trạng thái"
+            <sd-select [(ngModel)]="formData.status" label="Trạng thái"
               [items]="STATUS_LIST" valueField="value" displayField="label" />
           </div>
           <div class="col-12">
-            <sd-input [(model)]="formData.name" label="Tên sản phẩm" [required]="true" />
+            <sd-input [(ngModel)]="formData.name" label="Tên sản phẩm" [required]="true" />
           </div>
           <div class="col-6">
-            <sd-input-number [(model)]="formData.price" label="Đơn giá" suffix="VNĐ" />
+            <sd-input-number [(ngModel)]="formData.price" label="Đơn giá" suffix="VNĐ" />
           </div>
         </div>
       </sd-section>
@@ -590,7 +591,7 @@ export class ProductListComponent implements OnInit {
 ### Cấu trúc thư viện / Project structure
 
 ```
-sdcorejs-angular/
+sd-angular/
 ├── src/
 │   └── public-api.ts           # Entry point chính
 ├── assets/
@@ -713,10 +714,10 @@ Thư viện tuân theo [Semantic Versioning](https://semver.org):
 
 ## QA / E2E
 
-Core UI components expose runtime state via lowercase `data-*` attributes for e2e selectors. The full catalog, component matrix, selector cookbook, and YAML schema for AI agents live in `docs/E2E-ATTRIBUTES.md` in the source repository.
+Core UI components expose runtime state via lowercase `data-*` attributes. See [`docs/E2E-ATTRIBUTES.md`](docs/E2E-ATTRIBUTES.md) for the full catalog, component matrix, selector cookbook, and YAML schema for AI agents.
 
 ---
 
 ## License
 
-MIT - see the LICENSE file.
+Internal use only — © SD Team

package/components/anchor/index.d.ts

@@ -1 +1,43 @@
-export * from './src';
+import * as _angular_core from '@angular/core';
+import { InputSignal, ElementRef, OnDestroy } from '@angular/core';
+import { Color } from '@sdcorejs/utils/models';
+
+interface IAnchorItem {
+    id: string;
+    title: InputSignal<string>;
+    icon: InputSignal<string | undefined>;
+    elementRef: ElementRef;
+}
+
+declare class SdAnchorItem implements IAnchorItem {
+    title: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<string | undefined>;
+    key: _angular_core.InputSignal<string | undefined>;
+    id: string;
+    elementRef: ElementRef<any>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAnchorItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAnchorItem, "sd-anchor-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class SdAnchor implements OnDestroy {
+    #private;
+    wrapper: _angular_core.Signal<ElementRef<any>>;
+    sections: _angular_core.Signal<readonly SdAnchorItem[]>;
+    readonly autoIdInput: _angular_core.InputSignal<string | null | undefined>;
+    readonly autoId: _angular_core.Signal<string | undefined>;
+    sidebarWidth: _angular_core.InputSignal<string>;
+    ellipsis: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    overScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    hideNav: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    color: _angular_core.InputSignal<Color>;
+    activeSectionId: _angular_core.WritableSignal<string>;
+    constructor();
+    scrollSectionByClick(idSectionTarget: string): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAnchor, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "overScroll": { "alias": "overScroll"; "required": false; "isSignal": true; }; "hideNav": { "alias": "hideNav"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
+}
+
+export { SdAnchor, SdAnchorItem };
+export type { IAnchorItem };

package/components/autoid-inspector/index.d.ts

@@ -1,8 +1,199 @@
-export * from './src/autoid-inspector.component';
-export * from './src/models/autoid-element.model';
-export * from './src/models/autoid-inspector-config.model';
-export * from './src/models/autoid-export-format.model';
-export * from './src/services/autoid-scanner.service';
-export * from './src/services/autoid-audit.service';
-export * from './src/services/autoid-highlight.service';
-export * from './src/services/autoid-export.service';
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+
+/**
+ * Runtime state attributes the component renders on the same anchor as `data-autoid`.
+ * Every field is OPTIONAL — only present when the component actually renders that attribute.
+ * All values are the raw DOM string (already "true"/"false" or stringified number/value).
+ */
+interface SdAutoidElementState {
+    disabled?: string;
+    loading?: string;
+    empty?: string;
+    invalid?: string;
+    opened?: string;
+    count?: string;
+    /** Serialized DOM `data-value` (NOT `input.value`). Distinct from `SdAutoidElement.text` field. */
+    dataValue?: string;
+    required?: string;
+    maxlength?: string;
+    minlength?: string;
+    pattern?: string;
+    errorMessage?: string;
+}
+interface SdAutoidElement {
+    stt: number;
+    name: string;
+    autoid: string;
+    tag: string;
+    /**
+     * Display text resolved from the DOM: `input.value` for form controls, otherwise
+     * `textContent.trim().slice(0, 80)`. Use `state.dataValue` for the serialized
+     * runtime value rendered by `@sdcorejs/angular` components.
+     */
+    text: string;
+    xpath: string;
+    duplicate: boolean;
+    /** Runtime state attributes read from the DOM. Always an object — may be empty `{}`. */
+    state: SdAutoidElementState;
+    /**
+     * `data-autoid` of the closest ancestor `<sd-table>` that contains this element,
+     * or `undefined` if this element is top-level (not inside any `sd-table`).
+     * Used by the UI to group table-scoped elements into a separate section.
+     */
+    tableScope?: string;
+}
+interface SdAutoidMissing {
+    tag: string;
+    selector: string;
+    outerHtmlPreview: string;
+    nameHint: string;
+}
+interface SdAutoidAuditResult {
+    total: number;
+    duplicates: Record<string, number>;
+    duplicateCount: number;
+    missing: SdAutoidMissing[];
+    missingCount: number;
+}
+
+interface SdAutoidInspectorConfig {
+    /** Selector phụ thêm cần audit (mặc định component đã cover sd-* form + sd-button). */
+    extraRequireSelectors?: string[];
+    /** Root scan, mặc định document.body. */
+    root?: HTMLElement;
+}
+/** Selector mặc định coi là phải có data-autoid. */
+declare const SD_AUTOID_DEFAULT_REQUIRE_SELECTORS: ReadonlyArray<string>;
+
+type Segment = 'audit' | 'elements' | 'export';
+declare class SdAutoidInspector implements OnDestroy {
+    #private;
+    enabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    config: _angular_core.InputSignal<SdAutoidInspectorConfig | undefined>;
+    open: _angular_core.WritableSignal<boolean>;
+    segment: _angular_core.WritableSignal<Segment>;
+    filter: _angular_core.WritableSignal<string>;
+    elements: _angular_core.WritableSignal<SdAutoidElement[]>;
+    audit: _angular_core.WritableSignal<SdAutoidAuditResult | null>;
+    copyOk: _angular_core.WritableSignal<boolean>;
+    highlightOn: _angular_core.WritableSignal<boolean>;
+    dismissed: _angular_core.WritableSignal<boolean>;
+    filteredElements: _angular_core.Signal<SdAutoidElement[]>;
+    /**
+     * Elements not inside any sd-table — rendered in the main "Top-level" section.
+     */
+    readonly topLevelElements: _angular_core.Signal<SdAutoidElement[]>;
+    /**
+     * Map of `sd-table` autoid → its inner autoid elements. Tables themselves
+     * stay in `topLevelElements` (the table's own autoid is top-level).
+     */
+    readonly tableGroups: _angular_core.Signal<{
+        scope: string;
+        items: SdAutoidElement[];
+    }[]>;
+    readonly dataOpened: _angular_core.Signal<"true" | "false">;
+    readonly dataHighlightOn: _angular_core.Signal<"true" | "false">;
+    readonly dataSegment: _angular_core.Signal<Segment>;
+    readonly dataElementCount: _angular_core.Signal<string>;
+    readonly dataMissingCount: _angular_core.Signal<string>;
+    readonly dataDuplicateCount: _angular_core.Signal<string>;
+    ngOnDestroy(): void;
+    togglePanel: () => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    refresh: () => void;
+    dismissFab: (event: Event) => void;
+    toggleHighlight: () => void;
+    setSegment: (seg: Segment) => void;
+    copyJson: () => Promise<void>;
+    copyXpath: (autoid: string) => Promise<void>;
+    exportCsv: () => void;
+    exportJson: () => void;
+    exportMdPom: () => void;
+    exportMdTable: () => void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAutoidInspector, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAutoidInspector, "sd-autoid-inspector", never, { "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type SdAutoidExportFormat = 'csv' | 'json' | 'md-pom' | 'md-table';
+interface SdAutoidExportMeta {
+    pageUrl: string;
+    pageTitle: string;
+    timestamp: string;
+}
+
+declare class SdAutoidScannerService {
+    /** Quét toàn bộ element có [data-autoid] trong root, gắn thông tin name/tag/value/xpath. */
+    scan(root?: HTMLElement): SdAutoidElement[];
+    /** Group element theo autoid để consumer lấy duplicate map. */
+    groupByAutoid(elements: SdAutoidElement[]): Record<string, SdAutoidElement[]>;
+    /**
+     * Read the optional `data-*` E2E state attributes off the same node.
+     * Only includes fields actually present on the DOM (skipped fields stay undefined).
+     */
+    private readState;
+    /**
+     * If the node is inside an `<sd-table>` element, return that table's `data-autoid`.
+     * Walks up via closest('sd-table') — skips the node itself if it IS the table.
+     */
+    private resolveTableScope;
+    private resolveName;
+    private resolveSdTag;
+    private resolveText;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAutoidScannerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdAutoidScannerService>;
+}
+
+declare class SdAutoidAuditService {
+    /**
+     * Audit kết quả scan + DOM:
+     * - duplicates: map autoid → count khi count > 1
+     * - missing: element khớp selector yêu cầu nhưng KHÔNG có [data-autoid]
+     */
+    audit(elements: SdAutoidElement[], options?: {
+        requireSelectors?: ReadonlyArray<string>;
+        root?: HTMLElement;
+    }): SdAutoidAuditResult;
+    private findMissing;
+    private buildSelectorPath;
+    private shortHtml;
+    private resolveNameHint;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAutoidAuditService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdAutoidAuditService>;
+}
+
+declare class SdAutoidHighlightService {
+    #private;
+    /** Apply outline cho mọi [data-autoid]: xanh nếu unique, đỏ nếu duplicate. Idempotent. */
+    apply(root?: HTMLElement): void;
+    /** Highlight tập element không có autoid (missing) bằng outline cam dashed. */
+    applyMissing(nodes: HTMLElement[]): void;
+    /** Restore inline style như trước khi apply. */
+    clear(root?: HTMLElement): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAutoidHighlightService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdAutoidHighlightService>;
+}
+
+declare class SdAutoidExportService {
+    toJson(elements: SdAutoidElement[]): string;
+    toCsv(elements: SdAutoidElement[]): string;
+    /** POM TypeScript skeleton — copy ngay vào file Playwright/Cypress. */
+    toMarkdownPom(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
+    /** Markdown reference table, group FIRST by tableScope (top-level first, then per table), then by tag. */
+    toMarkdownTable(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
+    download(content: string, filename: string, mime: string): void;
+    copyToClipboard(content: string): Promise<void>;
+    /** Build a compact state summary string from defined state keys, e.g. "disabled=false; empty=true". */
+    private buildStateSummary;
+    private q;
+    private mdCell;
+    private toCamel;
+    private toPascal;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAutoidExportService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdAutoidExportService>;
+}
+
+export { SD_AUTOID_DEFAULT_REQUIRE_SELECTORS, SdAutoidAuditService, SdAutoidExportService, SdAutoidHighlightService, SdAutoidInspector, SdAutoidScannerService };
+export type { SdAutoidAuditResult, SdAutoidElement, SdAutoidElementState, SdAutoidExportFormat, SdAutoidExportMeta, SdAutoidInspectorConfig, SdAutoidMissing };

package/components/avatar/index.d.ts

@@ -1 +1,22 @@
-export * from './src/avatar.component';
+import * as _angular_core from '@angular/core';
+
+declare class SdAvatar {
+    #private;
+    /**
+     * The source string to be used for the avatar.
+     * - If it matches a URL pattern, an image is displayed.
+     * - If it is a string representing a name, initials and a colored background are generated.
+     * - If undefined, it falls back to a neutral ? initial.
+     */
+    readonly src: _angular_core.InputSignal<string | null | undefined>;
+    readonly size: _angular_core.InputSignal<number>;
+    constructor();
+    readonly isUrl: _angular_core.Signal<boolean>;
+    readonly bgColor: _angular_core.Signal<string>;
+    readonly initials: _angular_core.Signal<string>;
+    handleError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAvatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SdAvatar };

package/components/badge/index.d.ts

@@ -1 +1,102 @@
-export * from './src/badge.component';
+import * as _angular_core from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { Color, Size } from '@sdcorejs/utils/models';
+import { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+
+type SdBadgeType = 'tag' | 'round' | 'icon';
+declare class SdBadge {
+    defaultIcon: string;
+    type: _angular_core.InputSignalWithTransform<SdBadgeType, SdBadgeType | null | undefined>;
+    color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
+    primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    secondary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    success: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    info: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    warning: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    fontSet: _angular_core.InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    title: _angular_core.InputSignal<string | number | null | undefined>;
+    description: _angular_core.InputSignal<string | null | undefined>;
+    tooltip: _angular_core.InputSignal<string | null | undefined>;
+    icon: _angular_core.InputSignal<string | null | undefined>;
+    size: _angular_core.InputSignalWithTransform<Size, Size | null | undefined>;
+    click: EventEmitter<Event>;
+    onClick: (event: Event) => void;
+    effectiveColor: _angular_core.Signal<Color>;
+    baseColorClasses: _angular_core.Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconColorClasses: _angular_core.Signal<{
+        'c-primary': boolean;
+        'c-black400': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconSizeAndFontClasses: _angular_core.Signal<{
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    containerSizeClasses: _angular_core.Signal<{
+        'c-badge--sm': boolean;
+        'c-badge--md': boolean;
+        'c-badge--lg': boolean;
+    }>;
+    tagIconCombinedClasses: _angular_core.Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    containerCombinedClasses: _angular_core.Signal<{
+        'c-badge--sm': boolean;
+        'c-badge--md': boolean;
+        'c-badge--lg': boolean;
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconCombinedClasses: _angular_core.Signal<{
+        'c-primary': boolean;
+        'c-black400': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdBadge, "sd-badge", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "warning": { "alias": "warning"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
+}
+
+export { SdBadge };
+export type { SdBadgeType };

package/components/base/index.d.ts

@@ -1 +1,11 @@
-export * from './src/base-secure.component';
+import { SdLicenseService } from '@sdcorejs/angular/services/license';
+import * as i0 from '@angular/core';
+
+declare abstract class SdBaseSecureComponent {
+    protected licenseService: SdLicenseService;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdBaseSecureComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdBaseSecureComponent, never, never, {}, {}, never, never, true, never>;
+}
+
+export { SdBaseSecureComponent };

package/components/button/index.d.ts

@@ -1 +1,46 @@
-export * from './src/button.component';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
+import { Color } from '@sdcorejs/utils/models';
+import { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+
+type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
+type SdButtonSize = 'sm' | 'md' | 'lg';
+type SdButtonHtmlType = 'button' | 'submit' | 'reset';
+declare class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {
+    #private;
+    private el;
+    autoIdInput: _angular_core.InputSignal<string | null | undefined>;
+    type: _angular_core.InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
+    color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
+    size: _angular_core.InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
+    fontSet: _angular_core.InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    title: _angular_core.InputSignal<string | null | undefined>;
+    width: _angular_core.InputSignal<string | null | undefined>;
+    tooltip: _angular_core.InputSignal<string | null | undefined>;
+    prefixIcon: _angular_core.InputSignal<string | null | undefined>;
+    suffixIcon: _angular_core.InputSignal<string | null | undefined>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    block: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    htmlType: _angular_core.InputSignalWithTransform<SdButtonHtmlType, SdButtonHtmlType | null | undefined>;
+    autoId: _angular_core.Signal<string | undefined>;
+    buttonClasses: _angular_core.Signal<{
+        'c-square': boolean | "" | null | undefined;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'c-disabled': boolean;
+        'c-block': boolean;
+    }>;
+    click: _angular_core.OutputEmitterRef<Event>;
+    constructor();
+    ngOnInit(): void;
+    onInternalClick(event: Event): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdButton, "sd-button", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "htmlType": { "alias": "htmlType"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
+}
+
+export { SdButton };
+export type { SdButtonHtmlType, SdButtonSize, SdButtonType };

package/components/chart/index.d.ts

@@ -1,4 +1,65 @@
-export * from './src/bar-chart.component';
-export * from './src/line-chart.component';
-export * from './src/pie-chart.component';
-export * from './src/doughnut-chart.component';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, InputSignal } from '@angular/core';
+import { ChartData, ChartOptions, Plugin, Chart } from 'chart.js';
+
+declare class SdBarChartComponent implements OnInit, OnDestroy {
+    #private;
+    canvas: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
+    data: InputSignal<ChartData<'bar'>>;
+    options: InputSignal<ChartOptions<'bar'> | undefined>;
+    plugins: InputSignal<Plugin<'bar'>[]>;
+    isScrollable: _angular_core.Signal<boolean>;
+    computedMinWidth: _angular_core.Signal<number | null>;
+    chart: Chart<'bar'> | undefined;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdBarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdBarChartComponent, "sd-bar-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SdLineChartComponent implements OnInit, OnDestroy {
+    #private;
+    canvas: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
+    data: InputSignal<ChartData<'line'>>;
+    options: InputSignal<ChartOptions<'line'> | undefined>;
+    plugins: InputSignal<Plugin<'line'>[]>;
+    isScrollable: _angular_core.Signal<boolean>;
+    computedMinWidth: _angular_core.Signal<number | null>;
+    chart: Chart<'line'> | undefined;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdLineChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdLineChartComponent, "sd-line-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SdPieChartComponent implements OnInit, OnDestroy {
+    #private;
+    canvas: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
+    data: InputSignal<ChartData<'pie'>>;
+    options: InputSignal<ChartOptions<'pie'> | undefined>;
+    plugins: InputSignal<Plugin<'pie'>[]>;
+    chart: Chart<'pie'> | undefined;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdPieChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdPieChartComponent, "sd-pie-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SdDoughnutChartComponent implements OnInit, OnDestroy {
+    #private;
+    canvas: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
+    data: InputSignal<ChartData<'doughnut'>>;
+    options: InputSignal<ChartOptions<'doughnut'> | undefined>;
+    plugins: InputSignal<Plugin<'doughnut'>[]>;
+    chart: Chart<'doughnut'> | undefined;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDoughnutChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDoughnutChartComponent, "sd-doughnut-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SdBarChartComponent, SdDoughnutChartComponent, SdLineChartComponent, SdPieChartComponent };

package/components/ckeditor-styles/index.d.ts

@@ -1 +1,28 @@
-export * from './src/ckeditor-styles.component';
+import * as i0 from '@angular/core';
+
+/**
+ * Styles-only component that loads the global CKEditor 5 stylesheet on demand.
+ *
+ * Why this exists:
+ * - CKEditor's CSS must be global (applies to body-rendered overlays, dialogs, balloons),
+ *   which means whichever Angular component declares it must use ViewEncapsulation.None.
+ * - Switching encapsulation on the main editor components (`<sd-editor>`, `<sd-mini-editor>`,
+ *   `<sd-document-builder>`) would un-scope all their local styles too.
+ * - Instead, this tiny no-render component owns the global CSS. The editor components embed
+ *   `<sd-ckeditor-styles>` at the top of their template; the CSS is injected once into <head>
+ *   the first time any editor instance mounts. Editor components themselves keep
+ *   ViewEncapsulation.Emulated.
+ *
+ * Behavior:
+ * - Renders nothing in the DOM (empty template).
+ * - Angular dedupes styles per component class — multiple instances inject the <style> tag
+ *   only once.
+ * - When the host editor component is lazy-loaded, this component's chunk and its CSS travel
+ *   with it.
+ */
+declare class SdCKEditorStyles {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCKEditorStyles, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCKEditorStyles, "sd-ckeditor-styles", never, {}, {}, never, never, true, never>;
+}
+
+export { SdCKEditorStyles };