yukit-web 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": {
     "name": "Yurest Solutions",
     "email": "develop@yurest.com"

package/src/lib/theme/tokens/color.css

@@ -180,8 +180,8 @@
   --sidebar-foreground: var(--neutrals-element-high);
   --sidebar-primary: var(--accent-primary);
   --sidebar-primary-foreground: var(--neutrals-white);
-  --sidebar-accent: var(--neutrals-overlay-accent);
-  --sidebar-accent-foreground: var(--neutrals-element-high);
+  --sidebar-accent: #FFECEC;
+  --sidebar-accent-foreground: #F95A5C;
   --sidebar-border: var(--neutrals-outline);
   --sidebar-ring: var(--accent-primary);
 
@@ -202,6 +202,10 @@
 .dark {
   color-scheme: dark;
   --neutrals-element-high-gradient-hover: linear-gradient(to bottom, var(--neutrals-element-high-gradient-start-hover) 50%, var(--neutrals-white) 100%);
+  
+  /** || Sidebar ||  */
+  --sidebar-accent: #3A1F22;
+  --sidebar-accent-foreground: #FF7A7C;
 
   /** || Accent || */
   --accent-primary-darker-ext: oklch(0.27 0.145 281.565);

package/types/yukit-web.d.ts

@@ -115,6 +115,7 @@ type YuwColorDto = 'primary' | 'secondary' | 'destructive' | 'success' | 'warnin
 interface YuwButtonGroupItemDto {
     id: string;
     label: string;
+    kind?: 'button';
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     color?: YuwColorDto;
@@ -126,6 +127,31 @@ interface YuwButtonGroupItemDto {
     yuwDropdownMenuTrigger?: TemplateRef<unknown> | undefined;
     transparent?: boolean;
 }
+/**
+ * A static, non-interactive segment welded into the same row as the buttons — a leading caption, a
+ * trailing unit, a checkbox that applies to the whole group.
+ *
+ * A separate type rather than optional fields on `YuwButtonGroupItemDto`: a text segment honors none
+ * of that interface's button surface, and merging them would hand consumers fields that silently do
+ * nothing on half the entries.
+ *
+ * `label` renders as-is. For content a string can't express (a `yuw-checkbox`, custom markup),
+ * declare an `<ng-template yuwButtonGroupText="<id>">` whose id matches this entry; the template
+ * wins over `label` when both are present.
+ */
+interface YuwButtonGroupTextDto {
+    id: string;
+    kind: 'text';
+    label?: string;
+}
+/**
+ * What `<yuw-button>`'s `buttons` input accepts: buttons, text segments, in whatever order the
+ * consumer lists them.
+ *
+ * `kind` is optional on the button variant, so existing `{id, label}` arrays keep working: an entry
+ * without `kind` is a button.
+ */
+type YuwButtonGroupEntryDto = YuwButtonGroupItemDto | YuwButtonGroupTextDto;
 /** What `<yuw-button>` emits from `buttonClicked` in the group form. */
 interface YuwButtonGroupClickDto {
     id: string;
@@ -147,7 +173,9 @@ interface YuwButtonGroupClickDto {
  * - `class`: Extra CSS classes merged onto the inner button/anchor (single and link mode); merged last, so they win over the component's own classes.
  * - `yuwDropdownMenuTrigger`: Optional dropdown menu template reference to trigger.
  * - `ariaLabel`: Accessible label for screen readers.
- * - `buttons`: Array of button items (`YuwButtonGroupItemDto[]`) to render as a welded button group.
+ * - `buttons`: Array of group entries (`YuwButtonGroupEntryDto[]`) to render as a welded button group.
+ *   A `kind: 'text'` entry renders a static, non-interactive segment instead of a button; give it an
+ *   `<ng-template yuwButtonGroupText="<id>">` to fill it with markup rather than a plain `label`.
  * - `orientation`: Group layout orientation (`'horizontal'` or `'vertical'`). Default is `'horizontal'`.
  * - `groupAriaLabel`: Accessible name for button group container.
  *
@@ -170,6 +198,12 @@ interface YuwButtonGroupClickDto {
  * Button Group Usage:
  * ```html
  * <yuw-button [buttons]="actionList" (buttonClicked)="onAction($event)" />
+ *
+ * <yuw-button [buttons]="[{id: 'caption', kind: 'text', label: 'Sort by'}, ...sortActions]">
+ *   <ng-template yuwButtonGroupText="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button>
  * ```
  */
 declare class YuwButtonComponent {
@@ -183,7 +217,7 @@ declare class YuwButtonComponent {
     readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly yuwDropdownMenuTrigger: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
-    readonly buttons: _angular_core.InputSignal<YuwButtonGroupItemDto[] | undefined>;
+    readonly buttons: _angular_core.InputSignal<YuwButtonGroupEntryDto[] | undefined>;
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     readonly groupAriaLabel: _angular_core.InputSignal<string | undefined>;
     /**
@@ -193,11 +227,26 @@ declare class YuwButtonComponent {
     readonly userClass: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly buttonClicked: _angular_core.OutputEmitterRef<YuwButtonGroupClickDto>;
+    protected readonly _textClass = "bg-transparent text-foreground";
     protected readonly _isGroup: _angular_core.Signal<boolean>;
     protected readonly _effectiveVariant: _angular_core.Signal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
     /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
     protected readonly _btnClass: _angular_core.Signal<string>;
-    protected readonly _resolved: _angular_core.Signal<{
+    private readonly _texts;
+    /**
+     * The group's entries, each carrying everything its branch of the template needs.
+     *
+     * A text entry has no variant/size/color to fall back to, so it takes its own path rather than
+     * being run through the button resolver, which would invent fields its DTO doesn't declare. Its
+     * content template is looked up through a `Map` rather than a per-entry `.find()`, which would
+     * make an n-entry group cost n² comparisons.
+     */
+    protected readonly _resolved: _angular_core.Signal<({
+        template: TemplateRef<unknown> | undefined;
+        id: string;
+        kind: "text";
+        label?: string;
+    } | {
         variant: "secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined;
         size: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
         color: YuwColorDto;
@@ -206,16 +255,42 @@ declare class YuwButtonComponent {
         class: string;
         id: string;
         label: string;
+        kind?: "button";
         href?: string;
         target?: string;
         ariaLabel?: string;
         yuwDropdownMenuTrigger?: TemplateRef<unknown> | undefined;
         transparent?: boolean;
-    }[]>;
+    })[]>;
     protected onClick(event: MouseEvent): void;
     protected onGroupClick(button: YuwButtonGroupItemDto, event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwButtonComponent, "yuw-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "yuwDropdownMenuTrigger": { "alias": "yuwDropdownMenuTrigger"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupAriaLabel": { "alias": "groupAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, never, ["[yuwButtonIcon]", "*", "[yuwButtonIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwButtonComponent, "yuw-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "yuwDropdownMenuTrigger": { "alias": "yuwDropdownMenuTrigger"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupAriaLabel": { "alias": "groupAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, ["_texts"], ["[yuwButtonIcon]", "*", "[yuwButtonIcon]", "*"], true, never>;
+}
+
+/**
+ * Declares the content of a single text segment inside `<yuw-button>`'s button group. Apply it to
+ * an `<ng-template>` and pass the id of the `kind: 'text'` entry it belongs to, matching an entry
+ * in the `buttons` input.
+ *
+ * Exists because a text segment often isn't text — a checkbox, a badge, an icon with a count — and a
+ * component cannot travel through a data array. An entry whose id has no matching template falls
+ * back to its `label`, so the plain-string case needs no template at all.
+ *
+ * Usage:
+ * ```html
+ * <yuw-button [buttons]="entries">
+ *   <ng-template yuwButtonGroupText="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button>
+ * ```
+ */
+declare class YuwButtonGroupTextDirective {
+    readonly entryId: _angular_core.InputSignal<string>;
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwButtonGroupTextDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwButtonGroupTextDirective, "ng-template[yuwButtonGroupText]", never, { "entryId": { "alias": "yuwButtonGroupText"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -650,7 +725,15 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
 }
 
 /**
- * Search input control featuring a leading search icon, optional clear button, and form integration (`ngModel`, `formControlName`).
+ * Edge a collapsible `yuw-search-input` stays anchored to while the opposite edge travels.
+ *
+ * `'right'` keeps the right edge fixed so the field grows leftwards; `'left'` mirrors it.
+ */
+type YuwSearchInputCollapseFromDto = 'left' | 'right';
+
+/**
+ * Search input control featuring a leading search icon, optional clear button, an optional
+ * collapsible mode, and form integration (`ngModel`, `formControlName`).
  *
  * Inputs / Models:
  * - `value`: Two-way search query string.
@@ -663,6 +746,14 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `placeholder`: Hint text shown inside the empty field.
  * - `clearAriaLabel`: Accessible name for the clear button. Supplying it enables the clear button; omit to hide it.
+ * - `collapseFrom`: Enables collapsible mode and picks the anchored edge — `'right'` collapses back
+ *   towards the right edge (the field grows leftwards), `'left'` mirrors it. Omit for a field that
+ *   is always expanded.
+ * - `expandAriaLabel`: Accessible name for the collapsed search button. Required to make collapsible
+ *   mode usable, since the collapsed control has no visible text — user-facing text the consuming
+ *   app is responsible for translating.
+ * - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
+ *   Collapsible mode only.
  * - `class`: Extra classes merged onto the input group.
  *
  * Outputs:
@@ -670,9 +761,26 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
  * - `committed`: Emits the current query string when the user presses Enter — for searches that
  *   hit a server on explicit submit rather than on every keystroke.
  *
+ * ## Collapsible mode
+ *
+ * Collapsed, the control is a square icon button; activating it animates the same element out to its
+ * expanded width and focuses the field. It collapses again on Escape, or on blur while the query is
+ * empty — a blur with text still in the field keeps the field open, because collapsing would hide a
+ * query the user can no longer see or edit.
+ *
+ * Button and field are one element tree rather than two swapped views, so the transition is
+ * continuous and the input is never re-created mid-animation (which would drop focus and the caret).
+ *
  * Usage:
  * ```html
  * <yuw-search-input [(value)]="query" placeholder="Search items..." clearAriaLabel="Clear search" (searched)="onSearch($event)" />
+ *
+ * <yuw-search-input
+ *   [(value)]="query"
+ *   collapseFrom="right"
+ *  *   expandAriaLabel="Open search"
+ *   placeholder="Search items..."
+ * />
  * ```
  */
 declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> implements YuwTextFieldContract {
@@ -686,21 +794,50 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly collapseFrom: _angular_core.InputSignal<YuwSearchInputCollapseFromDto | undefined>;
+    readonly expandedWidth: _angular_core.InputSignal<string>;
+    readonly expandAriaLabel: _angular_core.InputSignal<string | undefined>;
     readonly userClass: _angular_core.InputSignal<string>;
+    private readonly _open;
+    protected readonly _autoId: string;
+    private readonly _input;
+    private readonly _injector;
     readonly searched: _angular_core.OutputEmitterRef<string>;
     readonly committed: _angular_core.OutputEmitterRef<string>;
-    protected readonly _autoId: string;
     protected readonly _inputId: _angular_core.Signal<string>;
     protected readonly _classes: _angular_core.Signal<string>;
     protected readonly _disabled: _angular_core.Signal<boolean>;
+    protected readonly _collapsible: _angular_core.Signal<boolean>;
+    protected readonly _expanded: _angular_core.Signal<boolean>;
+    protected readonly _wrapperClasses: _angular_core.Signal<string>;
+    protected readonly _wrapperMaxWidth: _angular_core.Signal<string | null>;
+    protected readonly _iconClasses: _angular_core.Signal<string>;
+    protected readonly _fieldClasses: _angular_core.Signal<string>;
+    protected readonly _showExpandButton: _angular_core.Signal<boolean>;
     protected readonly _showClear: _angular_core.Signal<boolean>;
-    private readonly _input;
     protected _emptyValue(): string;
     protected onInput(event: Event): void;
     protected onEnter(): void;
     protected onClear(): void;
+    /**
+     * Focus is deferred to the next render: while collapsed the input carries `tabindex="-1"` and
+     * `aria-hidden`, and focusing it before those bindings clear would be dropped by the browser.
+     */
+    protected onExpand(): void;
+    /**
+     * Expands when the collapsed button receives focus, so reaching it with Tab opens the field
+     * instead of leaving the user on a button they must also activate.
+     *
+     * Gated on `:focus-visible` to stay out of a focus loop: collapsing on blur remounts this button,
+     * and if the browser then lands focus on it, an ungated handler would re-expand and the control
+     * could never be tabbed past. `:focus-visible` is set for keyboard traversal but not for the
+     * programmatic/pointer focus that a collapse produces.
+     */
+    protected onExpandFocus(event: FocusEvent): void;
+    protected onEscape(): void;
+    protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSearchInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "searched": "searched"; "committed": "committed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "collapseFrom": { "alias": "collapseFrom"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "searched": "searched"; "committed": "committed"; }, never, never, true, never>;
 }
 
 /**
@@ -1504,6 +1641,10 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   User-facing text the consuming app is responsible for translating.
  * - `nextPageLabel` (required): Accessible name for the footer's next-page button. User-facing
  *   text the consuming app is responsible for translating.
+ * - `paginationEllipsisSrText` (required): Screen-reader text for the pagination ellipsis.
+ *   User-facing text the consuming app is responsible for translating.
+ * - `paginationAriaLabel` (required): Accessible name for the pagination navigation landmark.
+ *   User-facing text the consuming app is responsible for translating.
  * - `caption`: Optional `<caption>` text for the table. User-facing text the consuming app is
  *   responsible for translating; when absent, no caption is rendered.
  * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
@@ -1543,6 +1684,8 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly loadingRows: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly previousPageLabel: _angular_core.InputSignal<string>;
     readonly nextPageLabel: _angular_core.InputSignal<string>;
+    readonly paginationEllipsisSrText: _angular_core.InputSignal<string>;
+    readonly paginationAriaLabel: _angular_core.InputSignal<string>;
     readonly caption: _angular_core.InputSignal<string | undefined>;
     readonly tableClass: _angular_core.InputSignal<string | undefined>;
     readonly sorting: _angular_core.ModelSignal<SortingState>;
@@ -1550,6 +1693,9 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly columnVisibility: _angular_core.ModelSignal<ColumnVisibilityState>;
     readonly rowSelection: _angular_core.ModelSignal<RowSelectionState>;
     readonly pagination: _angular_core.ModelSignal<PaginationState>;
+    protected readonly currentPage: _angular_core.WritableSignal<number>;
+    /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
+    protected onPageChange(page: number): void;
     private readonly _options;
     protected readonly table: _tanstack_angular_table.AngularTable<YuwDatatableFeatures, TData>;
     private readonly _selectedRows;
@@ -1575,7 +1721,7 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     protected readonly _tableClass: _angular_core.Signal<string>;
     protected readonly _ariaSort: Record<'asc' | 'desc', 'ascending' | 'descending'>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwDatatableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableComponent<any>, "yuw-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": true; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": true; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "columnVisibility": { "alias": "columnVisibility"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "sorting": "sortingChange"; "columnFilters": "columnFiltersChange"; "columnVisibility": "columnVisibilityChange"; "rowSelection": "rowSelectionChange"; "pagination": "paginationChange"; "selectedRowsChange": "selectedRowsChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableComponent<any>, "yuw-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": true; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": true; "isSignal": true; }; "paginationEllipsisSrText": { "alias": "paginationEllipsisSrText"; "required": true; "isSignal": true; }; "paginationAriaLabel": { "alias": "paginationAriaLabel"; "required": true; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "columnVisibility": { "alias": "columnVisibility"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "sorting": "sortingChange"; "columnFilters": "columnFiltersChange"; "columnVisibility": "columnVisibilityChange"; "rowSelection": "rowSelectionChange"; "pagination": "paginationChange"; "selectedRowsChange": "selectedRowsChange"; }, never, never, true, never>;
 }
 
 /** A single entry in `<yuw-avatar>`'s `group` input, which turns it into a stack of overlapping avatars. */
@@ -2508,5 +2654,5 @@ declare class YuwSidebarInsetDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarInsetDirective, "main[yuwSidebarInset]", never, {}, {}, never, never, true, [{ directive: typeof i1$d.HlmSidebarInset; inputs: {}; outputs: {}; }]>;
 }
 
-export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
-export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupItemDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableColumnDef, YuwDatatableFeatures, YuwDatepickerModeDto, YuwDatepickerValue, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSheetSideDto, YuwSidebarCollapsibleDto, YuwSidebarSideDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };
+export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupEntryDto, YuwButtonGroupItemDto, YuwButtonGroupTextDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableColumnDef, YuwDatatableFeatures, YuwDatepickerModeDto, YuwDatepickerValue, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetSideDto, YuwSidebarCollapsibleDto, YuwSidebarSideDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };

package/.npm/_cacache/content-v2/sha512/e7/ea/2546081c4f18cc76dec1f07bbbef3a46a538af70d1f7c2f1efe2f2f325d44ad9fa21eed65ce5fac3286b71f23c14db4814eea212eebc2f199a0048c99e7d

@@ -1 +0,0 @@
-{"_id":"yukit-web","_rev":"2-56e566adcac00d941eb002324a6d0c04","name":"yukit-web","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"yukit-web","version":"0.0.1","author":{"name":"Yurest Solutions","email":"develop@yurest.com"},"_id":"yukit-web@0.0.1","maintainers":[{"name":"yurest","email":"develop@yurest.com"}],"dist":{"shasum":"aae5b01fbdc5a851dbeac7b3228104508f4c3255","tarball":"https://registry.npmjs.org/yukit-web/-/yukit-web-0.0.1.tgz","fileCount":196,"integrity":"sha512-GA/XJEVGUIE7hOZlyFR6O9d+YrXbg/hRyE3GpvkeWEy/r317K1SQI68JqfqKZinWl+2DQQU/akiHTmD68HiMhQ==","signatures":[{"sig":"MEUCIQDyvFOhMpQ/7BST5NC5uW1gTav581ZpB+GA148zfWlCkwIgIReIbhSN7C+c7XHEsRbfrQZnrlT42etfuv7ygEG3GzI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3002300},"type":"module","module":"fesm2022/yukit-web.mjs","exports":{".":{"types":"./types/yukit-web.d.ts","default":"./fesm2022/yukit-web.mjs"},"./helm/kbd":{"types":"./types/yukit-web-helm-kbd.d.ts","default":"./fesm2022/yukit-web-helm-kbd.mjs"},"./helm/card":{"types":"./types/yukit-web-helm-card.d.ts","default":"./fesm2022/yukit-web-helm-card.mjs"},"./helm/item":{"types":"./types/yukit-web-helm-item.d.ts","default":"./fesm2022/yukit-web-helm-item.mjs"},"./helm/tabs":{"types":"./types/yukit-web-helm-tabs.d.ts","default":"./fesm2022/yukit-web-helm-tabs.mjs"},"./theme.css":"./src/lib/theme/theme.css","./helm/alert":{"types":"./types/yukit-web-helm-alert.d.ts","default":"./fesm2022/yukit-web-helm-alert.mjs"},"./helm/badge":{"types":"./types/yukit-web-helm-badge.d.ts","default":"./fesm2022/yukit-web-helm-badge.mjs"},"./helm/empty":{"types":"./types/yukit-web-helm-empty.d.ts","default":"./fesm2022/yukit-web-helm-empty.mjs"},"./helm/field":{"types":"./types/yukit-web-helm-field.d.ts","default":"./fesm2022/yukit-web-helm-field.mjs"},"./helm/input":{"types":"./types/yukit-web-helm-input.d.ts","default":"./fesm2022/yukit-web-helm-input.mjs"},"./helm/label":{"types":"./types/yukit-web-helm-label.d.ts","default":"./fesm2022/yukit-web-helm-label.mjs"},"./helm/sheet":{"types":"./types/yukit-web-helm-sheet.d.ts","default":"./fesm2022/yukit-web-helm-sheet.mjs"},"./helm/table":{"types":"./types/yukit-web-helm-table.d.ts","default":"./fesm2022/yukit-web-helm-table.mjs"},"./helm/utils":{"types":"./types/yukit-web-helm-utils.d.ts","default":"./fesm2022/yukit-web-helm-utils.mjs"},"./helm/avatar":{"types":"./types/yukit-web-helm-avatar.d.ts","default":"./fesm2022/yukit-web-helm-avatar.mjs"},"./helm/bubble":{"types":"./types/yukit-web-helm-bubble.d.ts","default":"./fesm2022/yukit-web-helm-bubble.mjs"},"./helm/button":{"types":"./types/yukit-web-helm-button.d.ts","default":"./fesm2022/yukit-web-helm-button.mjs"},"./helm/dialog":{"types":"./types/yukit-web-helm-dialog.d.ts","default":"./fesm2022/yukit-web-helm-dialog.mjs"},"./helm/drawer":{"types":"./types/yukit-web-helm-drawer.d.ts","default":"./fesm2022/yukit-web-helm-drawer.mjs"},"./helm/marker":{"types":"./types/yukit-web-helm-marker.d.ts","default":"./fesm2022/yukit-web-helm-marker.mjs"},"./helm/select":{"types":"./types/yukit-web-helm-select.d.ts","default":"./fesm2022/yukit-web-helm-select.mjs"},"./helm/slider":{"types":"./types/yukit-web-helm-slider.d.ts","default":"./fesm2022/yukit-web-helm-slider.mjs"},"./helm/sonner":{"types":"./types/yukit-web-helm-sonner.d.ts","default":"./fesm2022/yukit-web-helm-sonner.mjs"},"./helm/switch":{"types":"./types/yukit-web-helm-switch.d.ts","default":"./fesm2022/yukit-web-helm-switch.mjs"},"./helm/toggle":{"types":"./types/yukit-web-helm-toggle.d.ts","default":"./fesm2022/yukit-web-helm-toggle.mjs"},"./helm/command":{"types":"./types/yukit-web-helm-command.d.ts","default":"./fesm2022/yukit-web-helm-command.mjs"},"./helm/menubar":{"types":"./types/yukit-web-helm-menubar.d.ts","default":"./fesm2022/yukit-web-helm-menubar.mjs"},"./helm/message":{"types":"./types/yukit-web-helm-message.d.ts","default":"./fesm2022/yukit-web-helm-message.mjs"},"./helm/popover":{"types":"./types/yukit-web-helm-popover.d.ts","default":"./fesm2022/yukit-web-helm-popover.mjs"},"./helm/sidebar":{"types":"./types/yukit-web-helm-sidebar.d.ts","default":"./fesm2022/yukit-web-helm-sidebar.mjs"},"./helm/spinner":{"types":"./types/yukit-web-helm-spinner.d.ts","default":"./fesm2022/yukit-web-helm-spinner.mjs"},"./helm/tooltip":{"types":"./types/yukit-web-helm-tooltip.d.ts","default":"./fesm2022/yukit-web-helm-tooltip.mjs"},"./package.json":{"default":"./package.json"},"./helm/calendar":{"types":"./types/yukit-web-helm-calendar.d.ts","default":"./fesm2022/yukit-web-helm-calendar.mjs"},"./helm/carousel":{"types":"./types/yukit-web-helm-carousel.d.ts","default":"./fesm2022/yukit-web-helm-carousel.mjs"},"./helm/checkbox":{"types":"./types/yukit-web-helm-checkbox.d.ts","default":"./fesm2022/yukit-web-helm-checkbox.mjs"},"./helm/combobox":{"types":"./types/yukit-web-helm-combobox.d.ts","default":"./fesm2022/yukit-web-helm-combobox.mjs"},"./helm/progress":{"types":"./types/yukit-web-helm-progress.d.ts","default":"./fesm2022/yukit-web-helm-progress.mjs"},"./helm/skeleton":{"types":"./types/yukit-web-helm-skeleton.d.ts","default":"./fesm2022/yukit-web-helm-skeleton.mjs"},"./helm/textarea":{"types":"./types/yukit-web-helm-textarea.d.ts","default":"./fesm2022/yukit-web-helm-textarea.mjs"},"./helm/accordion":{"types":"./types/yukit-web-helm-accordion.d.ts","default":"./fesm2022/yukit-web-helm-accordion.mjs"},"./helm/input-otp":{"types":"./types/yukit-web-helm-input-otp.d.ts","default":"./fesm2022/yukit-web-helm-input-otp.mjs"},"./helm/resizable":{"types":"./types/yukit-web-helm-resizable.d.ts","default":"./fesm2022/yukit-web-helm-resizable.mjs"},"./helm/separator":{"types":"./types/yukit-web-helm-separator.d.ts","default":"./fesm2022/yukit-web-helm-separator.mjs"},"./helm/attachment":{"types":"./types/yukit-web-helm-attachment.d.ts","default":"./fesm2022/yukit-web-helm-attachment.mjs"},"./helm/breadcrumb":{"types":"./types/yukit-web-helm-breadcrumb.d.ts","default":"./fesm2022/yukit-web-helm-breadcrumb.mjs"},"./helm/hover-card":{"types":"./types/yukit-web-helm-hover-card.d.ts","default":"./fesm2022/yukit-web-helm-hover-card.mjs"},"./helm/pagination":{"types":"./types/yukit-web-helm-pagination.d.ts","default":"./fesm2022/yukit-web-helm-pagination.mjs"},"./helm/typography":{"types":"./types/yukit-web-helm-typography.d.ts","default":"./fesm2022/yukit-web-helm-typography.mjs"},"./helm/collapsible":{"types":"./types/yukit-web-helm-collapsible.d.ts","default":"./fesm2022/yukit-web-helm-collapsible.mjs"},"./helm/date-picker":{"types":"./types/yukit-web-helm-date-picker.d.ts","default":"./fesm2022/yukit-web-helm-date-picker.mjs"},"./helm/input-group":{"types":"./types/yukit-web-helm-input-group.d.ts","default":"./fesm2022/yukit-web-helm-input-group.mjs"},"./helm/radio-group":{"types":"./types/yukit-web-helm-radio-group.d.ts","default":"./fesm2022/yukit-web-helm-radio-group.mjs"},"./helm/scroll-area":{"types":"./types/yukit-web-helm-scroll-area.d.ts","default":"./fesm2022/yukit-web-helm-scroll-area.mjs"},"./helm/alert-dialog":{"types":"./types/yukit-web-helm-alert-dialog.d.ts","default":"./fesm2022/yukit-web-helm-alert-dialog.mjs"},"./helm/aspect-ratio":{"types":"./types/yukit-web-helm-aspect-ratio.d.ts","default":"./fesm2022/yukit-web-helm-aspect-ratio.mjs"},"./helm/autocomplete":{"types":"./types/yukit-web-helm-autocomplete.d.ts","default":"./fesm2022/yukit-web-helm-autocomplete.mjs"},"./helm/button-group":{"types":"./types/yukit-web-helm-button-group.d.ts","default":"./fesm2022/yukit-web-helm-button-group.mjs"},"./helm/context-menu":{"types":"./types/yukit-web-helm-context-menu.d.ts","default":"./fesm2022/yukit-web-helm-context-menu.mjs"},"./helm/toggle-group":{"types":"./types/yukit-web-helm-toggle-group.d.ts","default":"./fesm2022/yukit-web-helm-toggle-group.mjs"},"./helm/dropdown-menu":{"types":"./types/yukit-web-helm-dropdown-menu.d.ts","default":"./fesm2022/yukit-web-helm-dropdown-menu.mjs"},"./helm/native-select":{"types":"./types/yukit-web-helm-native-select.d.ts","default":"./fesm2022/yukit-web-helm-native-select.mjs"},"./helm/navigation-menu":{"types":"./types/yukit-web-helm-navigation-menu.d.ts","default":"./fesm2022/yukit-web-helm-navigation-menu.mjs"}},"gitHead":"dc711071cfcb9a6c5213e39036918cd97bf8e794","typings":"types/yukit-web.d.ts","_npmUser":{"name":"yurest","email":"develop@yurest.com"},"_npmVersion":"10.9.8","description":"Angular UI component library for Yurest web applications.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"clsx":"^2.1.1","tslib":"^2.8.1","embla-carousel":">=8.0.0 <9.0.0","tailwind-merge":"^3.6.0","@tanstack/table-core":"^9.0.0","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","@angular/cdk":"^21.0.0","@angular/core":"^21.0.0","ngx-scrollbar":"^19.1.5","@angular/forms":"^21.0.0","@ng-icons/core":"^32.2.0","@angular/common":"^21.0.0","@angular/router":"^21.0.0","@ng-icons/lucide":"^32.2.0","@spartan-ng/brain":"^1.3.0","embla-carousel-angular":"^21.0.0","@tanstack/angular-table":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/yukit-web_0.0.1_1787215258302_0.8512278225069454","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-08-20T08:40:58.102Z","modified":"2026-08-20T08:43:41.787Z","0.0.1":"2026-08-20T08:40:58.450Z"},"author":{"name":"Yurest Solutions","email":"develop@yurest.com"},"description":"Angular UI component library for Yurest web applications.","maintainers":[{"email":"p.claramunt@yurest.com","name":"pabloclaramunt"},{"email":"d.sancho@yurest.com","name":"d.sancho.yurest"},{"email":"develop@yurest.com","name":"yurest"}],"readme":"# yukit-web\n\nAngular UI component library for Yurest web applications. Built on [Spartan](https://spartan.ng)\n(Tailwind CSS v4 + `@spartan-ng/brain`) and themed with the Yurest design tokens.\n\n## Table of contents\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Setup](#setup)\n- [Quick start](#quick-start)\n- [Theming](#theming)\n- [Conventions](#conventions)\n- [Components](#components)\n- [Utilities and services](#utilities-and-services)\n- [Development](#development)\n\n## Requirements\n\n| Dependency                                                        | Version   | Notes                              |\n|:------------------------------------------------------------------|:----------|:-----------------------------------|\n| [Angular](https://angular.dev/)                                   | 21+       | Standalone APIs, signal inputs      |\n| [Tailwind CSS](https://tailwindcss.com/)                          | v4        | Required — see [Setup](#setup)      |\n| [`@spartan-ng/brain`](https://spartan.ng)                         | ^1.3.0    | Headless primitives                 |\n| [`@angular/cdk`](https://material.angular.dev/cdk/categories)     | ^21.0.0   | Overlays, a11y                      |\n| [`@ng-icons/core`](https://ng-icons.github.io/ng-icons/) + lucide | ^32.2.0   | Icons                               |\n| [`@tanstack/angular-table`](https://tanstack.com/table)           | ^9.0.0    | `<yuw-datatable>`                   |\n| `embla-carousel-angular`                                          | ^21.0.0   | Carousel primitives                 |\n| `ngx-scrollbar`                                                   | ^19.1.5   | Scroll areas                        |\n\n## Installation\n\n```bash\nnpm install yukit-web \\\n  @spartan-ng/brain @angular/cdk @tanstack/angular-table \\\n  @ng-icons/core @ng-icons/lucide embla-carousel-angular ngx-scrollbar\n```\n\nPlus the Tailwind toolchain, as dev dependencies:\n\n```bash\nnpm install -D tailwindcss @tailwindcss/postcss tw-animate-css\n```\n\n`tw-animate-css` is required because `@spartan-ng/brain/hlm-tailwind-preset.css` imports it.\n\n## Setup\n\n`yukit-web` does **not** ship compiled component CSS. Its templates carry Tailwind utility classes,\nand your Tailwind build is what turns them into real styles. Two things have to be true in your\napp, or the components render unstyled.\n\n### 1. Set up `styles.css`\n\n```css\n@layer theme, base, components, utilities;\n\n@import \"tailwindcss\";\n@import \"@spartan-ng/brain/hlm-tailwind-preset.css\";\n@import \"yukit-web/theme.css\";\n\n@source \"../node_modules/yukit-web\";\n```\n\nOrder matters:\n\n| Line                    | Why                                                                                                                                                            |\n|:------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `@layer …`              | Fixes layer precedence before anything registers into a layer.                                                                                                 |\n| `@import \"tailwindcss\"` | Must come first — everything below extends it.                                                                                                                 |\n| Spartan preset          | Maps token *names* (`--primary`, `--radius`, …) onto Tailwind utilities and registers Spartan's variants (`data-open`, `data-checked`, …).                      |\n| `yukit-web/theme.css`   | Supplies the Yurest token *values*. Without the preset above it, the custom properties exist but no utilities are generated.                                    |\n| `@source`               | **Required.** Tailwind only generates the classes it can see. `yukit-web`'s classes live inside the published package, which Tailwind does not scan by default. |\n\nAdjust the `@source` path so it resolves from the file it is written in — the example assumes\n`src/styles.css` with `node_modules` one level up.\n\n**If you skip `@source`, the components render with no styling at all.** That is the expected\nfailure mode, not a bug: nothing is missing from the package, Tailwind simply never saw it.\n`node_modules` being gitignored does not prevent the scan — an explicit `@source` overrides that.\n\n### 2. Enable the Tailwind PostCSS plugin\n\n`.postcssrc.json` at the project root:\n\n```json\n{\n  \"plugins\": {\n    \"@tailwindcss/postcss\": {}\n  }\n}\n```\n\n### 3. Icons\n\nComponents register the icons they need themselves — nothing to configure for `<yuw-badge>`,\n`<yuw-dialog>`, `<yuw-pagination>` and friends to render their own glyphs.\n\nYou only need `provideIcons` for icons **you** project into a component (`[yuwAlertIcon]`,\n`[yuwItemMedia]`, a button's content, `<yuw-spinner icon=\"…\">`):\n\n```ts\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail, lucidePlus } from '@ng-icons/lucide';\n\n@Component({\n  imports: [NgIcon, YuwButtonComponent],\n  providers: [provideIcons({ lucideMail, lucidePlus })],\n  template: `<yuw-button><ng-icon name=\"lucidePlus\" /> New</yuw-button>`,\n})\nexport class ExampleComponent {}\n```\n\n## Quick start\n\nEvery export is standalone — import the component classes you use directly.\n\n```ts\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { YuwButtonComponent, YuwInputComponent, yuwToast, YuwToasterComponent } from 'yukit-web';\n\n@Component({\n  selector: 'app-login',\n  imports: [YuwInputComponent, YuwButtonComponent, YuwToasterComponent],\n  template: `\n    <yuw-input [(value)]=\"email\" type=\"email\" placeholder=\"you@yurest.com\" />\n    <yuw-button color=\"primary\" (clicked)=\"submit()\">Sign in</yuw-button>\n\n    <yuw-toaster />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoginComponent {\n  protected readonly email = signal('');\n\n  protected submit(): void {\n    yuwToast.success('Welcome back');\n  }\n}\n```\n\n## Theming\n\n`yukit-web/theme.css` is the only stylesheet the package exposes. It defines the Yurest palette in\n`oklch` under the token names Spartan expects, so `bg-primary`, `text-muted-foreground`,\n`border-border` and `rounded-lg` resolve to Yurest's design system instead of Spartan's default\nneutral gray.\n\n### Extra semantic tokens\n\nIt also adds Yurest-only semantic colors that Spartan has no equivalent for, registered so they\nbehave like any other Tailwind color:\n\n| Token                                | Utilities                                                                                                                                                |\n|:-------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `--success` / `--success-foreground` | `bg-success`, `text-success-foreground`, …                                                                                                               |\n| `--warning` / `--warning-foreground` | `bg-warning`, `text-warning-foreground`, …                                                                                                               |\n| `--info` / `--info-foreground`       | `bg-info`, `text-info-foreground`, …                                                                                                                     |\n| `--destructive-foreground`           | `text-destructive-foreground` — Spartan defines only `--destructive` and hardcodes `text-white`; Yurest names a contrast color, so the pair is completed. |\n\nTo override a token, redefine it in your own `:root` *after* importing the theme.\n\n### The `color` input\n\nComponents that carry brand color (`<yuw-button>`, `<yuw-badge>`, `<yuw-pagination>`) accept a\n`color` input typed as `YuwColorDto`:\n\n```ts\ntype YuwColorDto =\n  | 'primary' | 'secondary' | 'destructive' | 'success'\n  | 'warning' | 'info'      | 'muted'       | 'violet';\n```\n\nIt sets `data-yuw-color` on the host, and the theme remaps the Spartan semantic variables\n(`--primary`, `--secondary`, `--border`, …) for that subtree — so the whole component recolors\nconsistently instead of one class being patched.\n\n```html\n<yuw-button color=\"success\" variant=\"outline\">Approve</yuw-button>\n<yuw-badge color=\"warning\" dot />\n```\n\n### Dark mode\n\nDark mode is supported via a `.dark` class on a root element, matching Tailwind v4's default dark\nvariant. The consuming app toggles it:\n\n```ts\ndocument.documentElement.classList.toggle('dark');\n```\n\nNote that `<yuw-toaster>` defaults to `theme=\"light\"` — pass `theme=\"dark\"` or `theme=\"system\"`\nexplicitly in apps that render dark.\n\n## Conventions\n\nA few rules hold across the whole library. Knowing them removes most of the per-component surprises.\n\n**Text is always yours.** No component hardcodes a translatable string. Anything a user reads —\nlabels, empty-state messages, accessible names for icon-only controls — is an input, often a\n*required* one (`ariaLabel`, `previousLabel`, `emptyText`, `label`). Pass it already translated.\n\n**Presence implies the feature.** Instead of a `removable` flag plus a `removeLabel` string, there\nis one input: set `removeLabel` and the remove control appears, omit it and there is nothing to\nremove. The same shape applies to `clearAriaLabel` (search input, combobox), `closeLabel` (dialog,\nsheet) and `revealAriaLabel` (password input).\n\n**Two-way state uses `model()`.** `[(value)]`, `[(open)]`, `[(checked)]`, `[(page)]`,\n`[(activeTab)]` are all two-way bindable, and each also emits a `…Change` output you can listen to\none-way.\n\n**Class passthrough.** Components whose host is `display: contents` accept your classes on a\ndedicated input so they actually reach the rendered element — `class` on most components,\n`panelClass` on overlays, `tableClass` on the datatable. They are merged **last** through\n`tailwind-merge`, so your class always beats the component default without `!important`.\n\n**Forms.** `<yuw-input>`, `<yuw-textarea>`, `<yuw-search-input>`, `<yuw-password-input>`,\n`<yuw-input-otp>`, `<yuw-checkbox>`, `<yuw-switch>`, `<yuw-radio-group>`, `<yuw-combobox>` and\n`<yuw-datepicker>` implement `ControlValueAccessor`:\n\n```html\n<form [formGroup]=\"form\">\n  <label yuwLabel for=\"email\">Email</label>\n  <yuw-input inputId=\"email\" formControlName=\"email\" type=\"email\" [invalid]=\"emailInvalid()\" />\n\n  <yuw-checkbox formControlName=\"terms\">Accept terms</yuw-checkbox>\n</form>\n```\n\n`disabled` from the forms API (`control.disable()`) and the `disabled` input are OR'd together, so\nneither source silently overrides the other.\n\n## Components\n\n| Component                             | Selector                                | Import                                        |\n|:--------------------------------------|:----------------------------------------|:----------------------------------------------|\n| **Actions**                           |                                         |                                               |\n| [Button](#button)                     | `yuw-button`                            | `YuwButtonComponent`                          |\n| **Form controls**                     |                                         |                                               |\n| [Input](#input)                       | `yuw-input`                             | `YuwInputComponent`                           |\n| [Textarea](#textarea)                 | `yuw-textarea`                          | `YuwTextareaComponent`                        |\n| [Search input](#search-input)         | `yuw-search-input`                      | `YuwSearchInputComponent`                     |\n| [Password input](#password-input)     | `yuw-password-input`                    | `YuwPasswordInputComponent`                   |\n| [Input OTP](#input-otp)               | `yuw-input-otp`                         | `YuwInputOtpComponent`                        |\n| [Label](#label)                       | `label[yuwLabel]`                       | `YuwLabel`                                    |\n| [Checkbox](#checkbox)                 | `yuw-checkbox`                          | `YuwCheckboxComponent`                        |\n| [Switch](#switch)                     | `yuw-switch`                            | `YuwSwitchComponent`                          |\n| [Radio group](#radio-group)           | `yuw-radio-group`                       | `YuwRadioGroupComponent`                      |\n| [Combobox](#combobox)                 | `yuw-combobox`                          | `YuwComboboxComponent`                        |\n| [Datepicker](#datepicker)             | `yuw-datepicker`                        | `YuwDatepickerComponent`                      |\n| **Data display**                      |                                         |                                               |\n| [Avatar](#avatar)                     | `yuw-avatar`                            | `YuwAvatarComponent`                          |\n| [Badge](#badge)                       | `yuw-badge`                             | `YuwBadgeComponent`                           |\n| [Card](#card)                         | `[yuwCard]`                             | `YuwCardImports`                              |\n| [Item](#item)                         | `[yuwItem]`                             | `YuwItemImports`                              |\n| [Attachment](#attachment)             | `[yuwAttachment]`                       | `YuwAttachmentDirective`, …                   |\n| [Table](#table)                       | `[yuwTable]`                            | `YuwTableImports`                             |\n| [Datatable](#datatable)               | `yuw-datatable`                         | `YuwDatatableComponent`                       |\n| [Empty](#empty)                       | `[yuwEmpty]`                            | `YuwEmptyImports`                             |\n| [Skeleton](#skeleton)                 | `[yuwSkeleton]`                         | `YuwSkeletonDirective`                        |\n| [Spinner](#spinner)                   | `yuw-spinner`                           | `YuwSpinnerComponent`                         |\n| **Navigation**                        |                                         |                                               |\n| [Accordion](#accordion)               | `yuw-accordion`                         | `YuwAccordionImports`                         |\n| [Breadcrumb](#breadcrumb)             | `yuw-breadcrumb`                        | `YuwBreadcrumbComponent`                      |\n| [Pagination](#pagination)             | `yuw-pagination`                        | `YuwPaginationComponent`                      |\n| [Tabs](#tabs)                         | `yuw-tabs`                              | `YuwTabsComponent`, `YuwTabPanelDirective`    |\n| [Sidebar](#sidebar)                   | `yuw-sidebar`                           | `YuwSidebarComponent`, …                      |\n| **Overlays**                          |                                         |                                               |\n| [Dialog](#dialog)                     | `yuw-dialog`                            | `YuwDialogImports`                            |\n| [Alert dialog](#alert-dialog)         | `yuw-alert-dialog`                      | `YuwAlertDialogComponent`                     |\n| [Sheet](#sheet)                       | `yuw-sheet`                             | `YuwSheetImports`                             |\n| [Popover](#popover)                   | `yuw-popover`                           | `YuwPopoverComponent`                         |\n| [Tooltip](#tooltip)                   | `[yuwTooltip]`                          | `YuwTooltipDirective`                         |\n| [Context menu](#context-menu)         | `[yuwContextMenuTrigger]`               | `YuwContextMenuImports`                       |\n| **Feedback**                          |                                         |                                               |\n| [Alert](#alert)                       | `yuw-alert`                             | `YuwAlertImports`                             |\n| [Toaster](#toaster)                   | `yuw-toaster`                           | `YuwToasterComponent`, `yuwToast`             |\n\n---\n\n### Button\n\nSingle action button, link, or a welded group of buttons.\n\n```html\n<yuw-button variant=\"outline\" color=\"primary\" (clicked)=\"save()\">Save</yuw-button>\n\n<yuw-button href=\"/dashboard\" target=\"_blank\">Dashboard</yuw-button>\n\n<yuw-button size=\"icon\" ariaLabel=\"Add item\">\n  <ng-icon name=\"lucidePlus\" />\n</yuw-button>\n\n<!-- Button group -->\n<yuw-button [buttons]=\"actions\" groupAriaLabel=\"Alignment\" (buttonClicked)=\"onAction($event)\" />\n```\n\n#### Inputs\n\n| Input            | Type                                                                             | Default        |\n|:-----------------|:---------------------------------------------------------------------------------|:---------------|\n| `variant`        | `'default'｜'secondary'｜'outline'｜'destructive'｜'ghost'｜'link'`                    | `'default'`    |\n| `size`           | `'default'｜'xs'｜'sm'｜'lg'｜'icon'｜'icon-xs'｜'icon-sm'｜'icon-lg'`                   | `'default'`    |\n| `color`          | `YuwColorDto`                                                                    | `'secondary'`  |\n| `disabled`       | `boolean`                                                                        | `false`        |\n| `type`           | `'button'｜'submit'｜'reset'`                                                      | `'button'`     |\n| `href`           | `string｜undefined`                                                               | `undefined`    |\n| `target`         | `string｜undefined`                                                               | `undefined`    |\n| `transparent`    | `boolean` — removes background and border                                        | `false`        |\n| `ariaLabel`      | `string｜undefined` — required for icon-only buttons                              | `undefined`    |\n| `class`          | `string` — merged onto the inner button/anchor, wins over defaults               | `''`           |\n| `buttons`        | `YuwButtonGroupItemDto[]｜undefined` — switches to group mode                     | `undefined`    |\n| `orientation`    | `'horizontal'｜'vertical'` — group layout                                          | `'horizontal'` |\n| `groupAriaLabel` | `string｜undefined` — accessible name of the group                                | `undefined`    |\n| `yuwDropdownMenuTrigger` | `TemplateRef<unknown>｜undefined`                                         | `undefined`    |\n\n#### Outputs\n\n| Output          | Payload                 | Description                             |\n|:----------------|:------------------------|:----------------------------------------|\n| `clicked`       | `MouseEvent`            | Single-button mode.                     |\n| `buttonClicked` | `YuwButtonGroupClickDto`| Group mode — `{ id, event }`.           |\n\n#### Content slots\n\n| Slot             | Description                          |\n|:-----------------|:-------------------------------------|\n| `[yuwButtonIcon]`| Leading icon.                        |\n| *(default)*      | Button label.                        |\n\n`YuwButtonGroupItemDto` entries are `{ id, label }` plus optional `variant`, `size`, `color`,\n`disabled`, `href`, `target`, `type`, `ariaLabel`, `transparent` — each falling back to the\ncomponent-level input of the same name.\n\n---\n\n### Input\n\nSingle-line text field with addon slots and form integration.\n\n```html\n<yuw-input [(value)]=\"username\" placeholder=\"Enter username…\" />\n\n<yuw-input formControlName=\"email\" type=\"email\">\n  <yuw-left-addon><ng-icon name=\"lucideMail\" /></yuw-left-addon>\n</yuw-input>\n```\n\n#### Inputs\n\n| Input          | Type                                             | Default     |\n|:---------------|:-------------------------------------------------|:------------|\n| `value`        | `string` — two-way                               | `''`        |\n| `inputId`      | `string｜undefined` — for external `<label for>`  | `undefined` |\n| `type`         | `'text'｜'email'｜'tel'｜'url'｜'number'`            | `'text'`    |\n| `inputmode`    | `YuwInputModeDto｜undefined`                      | `undefined` |\n| `placeholder`  | `string｜undefined`                               | `undefined` |\n| `maxlength`    | `number｜undefined`                               | `undefined` |\n| `name`         | `string｜undefined`                               | `undefined` |\n| `autocomplete` | `string｜undefined`                               | `undefined` |\n| `disabled`     | `boolean`                                        | `false`     |\n| `readonly`     | `boolean`                                        | `false`     |\n| `required`     | `boolean`                                        | `false`     |\n| `invalid`      | `boolean`                                        | `false`     |\n| `class`        | `string`                                         | `''`        |\n\n#### Outputs\n\n| Output      | Payload  | Description                                     |\n|:------------|:---------|:------------------------------------------------|\n| `committed` | `string` | Current value on the native `change` (blur/enter). |\n\n#### Content slots\n\n`yuw-left-addon`, `yuw-right-addon` — import `YuwInputAddonImports`.\n\n---\n\n### Textarea\n\nMulti-line text field. Auto-grows where `field-sizing` is supported.\n\n```html\n<yuw-textarea [(value)]=\"bio\" placeholder=\"Write your biography…\" [rows]=\"4\" [maxlength]=\"500\" />\n<yuw-textarea formControlName=\"comments\" invalid />\n```\n\n#### Inputs\n\nSame contract as [Input](#input), minus `type` / `inputmode`, plus:\n\n| Input  | Type               | Default     |\n|:-------|:-------------------|:------------|\n| `rows` | `number｜undefined` | `undefined` |\n\n#### Outputs\n\n| Output      | Payload  | Description                                |\n|:------------|:---------|:-------------------------------------------|\n| `committed` | `string` | Current value on the native `change` event. |\n\n---\n\n### Search input\n\nText field with a leading search icon and an optional clear button.\n\n```html\n<yuw-search-input\n  [(value)]=\"query\"\n  placeholder=\"Search items…\"\n  clearAriaLabel=\"Clear search\"\n  (searched)=\"onSearch($event)\"\n/>\n```\n\n#### Inputs\n\nSame contract as [Input](#input), minus `type` / `inputmode` / `maxlength`, plus:\n\n| Input            | Type               | Default     |\n|:-----------------|:-------------------|:------------|\n| `clearAriaLabel` | `string｜undefined` — set it to render the clear button | `undefined` |\n\n#### Outputs\n\n| Output      | Payload  | Description                                      |\n|:------------|:---------|:--------------------------------------------------|\n| `searched`  | `string` | Emitted on every keystroke.                       |\n| `committed` | `string` | Emitted on Enter — for search-on-submit flows.    |\n\n---\n\n### Password input\n\nPassword field with an optional reveal toggle.\n\n```html\n<yuw-password-input [(value)]=\"password\" revealAriaLabel=\"Toggle password visibility\" />\n<yuw-password-input formControlName=\"password\" autocomplete=\"current-password\" />\n```\n\n#### Inputs\n\nSame contract as [Input](#input), minus `type` / `inputmode` / `maxlength`, plus:\n\n| Input             | Type                                                | Default     |\n|:------------------|:----------------------------------------------------|:------------|\n| `revealAriaLabel` | `string｜undefined` — set it to render the toggle    | `undefined` |\n| `masked`          | `boolean` — two-way; a parent can re-mask the value  | `true`      |\n\n#### Outputs\n\n| Output      | Payload  | Description                                |\n|:------------|:---------|:-------------------------------------------|\n| `committed` | `string` | Current value on the native `change` event. |\n\n---\n\n### Input OTP\n\nOne-time password / verification code field, rendered as grouped slots.\n\n```html\n<yuw-input-otp [(value)]=\"code\" [groupSizes]=\"[3, 3]\" (completed)=\"verify($event)\" />\n<yuw-input-otp formControlName=\"otpCode\" mode=\"numeric\" />\n```\n\n#### Inputs\n\n| Input            | Type                                          | Default                 |\n|:-----------------|:----------------------------------------------|:------------------------|\n| `value`          | `string` — two-way                            | `''`                    |\n| `groupSizes`     | `readonly number[]` — `[3, 3]` renders `000-000` | `[6]`                |\n| `mode`           | `'numeric'｜'text'`                            | `'numeric'`             |\n| `inputId`        | `string｜undefined`                            | `undefined`             |\n| `disabled`       | `boolean`                                     | `false`                 |\n| `invalid`        | `boolean`                                     | `false`                 |\n| `autofocus`      | `boolean`                                     | `false`                 |\n| `transformPaste` | `(pastedText: string, length: number) => string` | identity             |\n| `class`          | `string`                                      | `''`                    |\n\n#### Outputs\n\n| Output      | Payload  | Description                                        |\n|:------------|:---------|:----------------------------------------------------|\n| `completed` | `string` | The full code, once the final slot is filled.       |\n\n---\n\n### Label\n\nStyled form label, applied to a native `<label>`.\n\n```html\n<label yuwLabel for=\"username\">Username</label>\n<yuw-input inputId=\"username\" [(value)]=\"username\" />\n```\n\nAccepts the native `for` / `id` attributes.\n\n---\n\n### Checkbox\n\nProjected content becomes the clickable label — the control is wrapped in a `<label>`, so clicking\nthe text toggles it and the text is announced as the accessible name.\n\n```html\n<yuw-checkbox [(checked)]=\"acceptedTerms\">Accept terms</yuw-checkbox>\n<yuw-checkbox [(indeterminate)]=\"isMixed\" [(checked)]=\"allSelected\">Select all</yuw-checkbox>\n<yuw-checkbox formControlName=\"rememberMe\" />\n```\n\n#### Inputs\n\n| Input             | Type                       | Default     |\n|:------------------|:---------------------------|:------------|\n| `checked`         | `boolean` — two-way (alias of `value`) | `false` |\n| `indeterminate`   | `boolean` — two-way        | `false`     |\n| `secondary`       | `boolean` — secondary fill | `false`     |\n| `disabled`        | `boolean`                  | `false`     |\n| `required`        | `boolean`                  | `false`     |\n| `invalid`         | `boolean`                  | `false`     |\n| `name`            | `string｜undefined`         | `undefined` |\n| `inputId`         | `string｜undefined`         | `undefined` |\n| `ariaLabel`       | `string｜undefined`         | `undefined` |\n| `ariaLabelledby`  | `string｜undefined`         | `undefined` |\n| `ariaDescribedby` | `string｜undefined`         | `undefined` |\n\n---\n\n### Switch\n\nToggle for binary settings. Projected content becomes the clickable label.\n\n```html\n<yuw-switch [(checked)]=\"notificationsEnabled\">Enable notifications</yuw-switch>\n<yuw-switch formControlName=\"darkMode\" size=\"sm\" />\n```\n\n#### Inputs\n\n| Input             | Type               | Default     |\n|:------------------|:-------------------|:------------|\n| `checked`         | `boolean` — two-way (alias of `value`) | `false` |\n| `size`            | `'default'｜'sm'`   | `'default'` |\n| `disabled`        | `boolean`          | `false`     |\n| `inputId`         | `string｜undefined` | `undefined` |\n| `ariaLabel`       | `string｜undefined` | `undefined` |\n| `ariaLabelledby`  | `string｜undefined` | `undefined` |\n| `ariaDescribedby` | `string｜undefined` | `undefined` |\n\n---\n\n### Radio group\n\n```html\n<yuw-radio-group [options]=\"planOptions\" [(value)]=\"selectedPlan\" ariaLabel=\"Plan\" />\n<yuw-radio-group [options]=\"genderOptions\" formControlName=\"gender\" ariaLabelledby=\"gender-heading\" />\n```\n\n```ts\ninterface YuwRadioOptionDto {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n```\n\n#### Inputs\n\n| Input            | Type                                          | Default     |\n|:-----------------|:----------------------------------------------|:------------|\n| `options`        | `readonly YuwRadioOptionDto[]` — **required**  | —           |\n| `value`          | `string｜undefined` — two-way                  | `undefined` |\n| `disabled`       | `boolean` — disables the whole group           | `false`     |\n| `required`       | `boolean`                                     | `false`     |\n| `name`           | `string｜undefined` — generated when omitted   | `undefined` |\n| `ariaLabel`      | `string｜undefined`                            | `undefined` |\n| `ariaLabelledby` | `string｜undefined`                            | `undefined` |\n| `class`          | `string` — layout tweaks (`grid-cols-2`, …)   | `''`        |\n\n---\n\n### Combobox\n\nSearchable select. Single or multiple selection, in-place search or a read-only trigger, with\noptional custom option templates.\n\n```html\n<!-- Type-to-filter field -->\n<yuw-combobox\n  [options]=\"userOptions\"\n  [(value)]=\"selectedUser\"\n  placeholder=\"Select user…\"\n  emptyText=\"No user found.\"\n  triggerAriaLabel=\"Toggle options\"\n  clearAriaLabel=\"Clear selection\"\n/>\n\n<!-- Classic select shape -->\n<yuw-combobox readonlyTrigger [options]=\"colorOptions\" [(value)]=\"color\"\n              searchPlaceholder=\"Search colors…\" triggerAriaLabel=\"Toggle options\" />\n\n<!-- Multiple, with chips -->\n<yuw-combobox multiple [options]=\"categoryOptions\" [(value)]=\"categories\"\n              triggerAriaLabel=\"Toggle options\" />\n\n<!-- Custom option template -->\n<yuw-combobox [options]=\"users\" [(value)]=\"userId\" triggerAriaLabel=\"Toggle options\">\n  <ng-template yuwComboboxItem let-option let-selected=\"selected\">\n    <img [src]=\"option.data.avatar\" /> {{ option.label }}\n  </ng-template>\n</yuw-combobox>\n```\n\n```ts\ninterface YuwComboboxOptionDto<TData = unknown> {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  data?: TData;   // available as `option.data` in a custom item template\n}\n```\n\n#### Inputs\n\n| Input               | Type                                              | Default     |\n|:--------------------|:--------------------------------------------------|:------------|\n| `options`           | `YuwComboboxOptionDto<TData>[]` — **required**     | —           |\n| `value`             | `string｜string[]｜undefined` — two-way             | `undefined` |\n| `multiple`          | `boolean` — chips shape; takes precedence over `readonlyTrigger` | `false` |\n| `readonlyTrigger`   | `boolean` — button trigger, search inside popover  | `false`     |\n| `search`            | `string` — two-way filter query                    | `''`        |\n| `placeholder`       | `string｜undefined`                                 | `undefined` |\n| `searchPlaceholder` | `string｜undefined`                                 | `undefined` |\n| `emptyText`         | `string｜undefined`                                 | `undefined` |\n| `triggerAriaLabel`  | `string` — **required**                            | —           |\n| `clearAriaLabel`    | `string｜undefined` — set it to render a clear button | `undefined` |\n| `inputId`           | `string｜undefined`                                 | `undefined` |\n| `disabled`          | `boolean`                                          | `false`     |\n| `invalid`           | `boolean`                                          | `false`     |\n\n---\n\n### Datepicker\n\n```html\n<yuw-datepicker [(value)]=\"selectedDate\" placeholder=\"Select date…\" />\n<yuw-datepicker mode=\"range\" [(value)]=\"dateRange\" captionLayout=\"dropdown\" />\n<yuw-datepicker mode=\"monthYear\" [(value)]=\"selectedMonth\" />\n```\n\n#### Inputs\n\n| Input           | Type                                                            | Default     |\n|:----------------|:-----------------------------------------------------------------|:------------|\n| `mode`          | `'single'｜'range'｜'multiple'｜'monthYear'`                        | `'single'`  |\n| `value`         | `Date｜[Date, Date]｜Date[]｜null` — two-way, shape follows `mode`  | `null`      |\n| `minDate`       | `Date｜undefined`                                                 | `undefined` |\n| `maxDate`       | `Date｜undefined`                                                 | `undefined` |\n| `captionLayout` | `'label'｜'dropdown'｜'dropdown-months'｜'dropdown-years'`          | `'label'`   |\n| `align`         | `'start'｜'center'｜'end'`                                         | `'start'`   |\n| `placeholder`   | `string｜undefined`                                               | `undefined` |\n| `buttonId`      | `string｜undefined` — generated when omitted                      | `undefined` |\n| `formatDate`    | `((date: Date) => string)｜undefined`                             | `undefined` |\n| `disabled`      | `boolean`                                                        | `false`     |\n| `invalid`       | `boolean`                                                        | `false`     |\n| `class`         | `string` — merged onto the trigger button                        | `''`        |\n\n`captionLayout` is ignored in `monthYear` mode, which renders its own month/year grid.\n\n---\n\n### Avatar\n\n```html\n<yuw-avatar src=\"/user.png\" alt=\"Jane Doe\" fallback=\"JD\" />\n<yuw-avatar alt=\"Jane Doe\" fallback=\"JD\" badge />\n<yuw-avatar [group]=\"teamMembers\" alt=\"Team\" groupCount=\"+5\" />\n```\n\n```ts\ninterface YuwAvatarGroupItemDto {\n  alt: string;\n  src?: string;\n  fallback: string;\n}\n```\n\n#### Inputs\n\n| Input        | Type                                    | Default     |\n|:-------------|:----------------------------------------|:------------|\n| `alt`        | `string` — **required**                 | —           |\n| `src`        | `string｜undefined`                      | `undefined` |\n| `fallback`   | `string｜undefined` — initials           | `undefined` |\n| `size`       | `'default'｜'sm'｜'lg'`                   | `'default'` |\n| `badge`      | `boolean` — status marker, bottom-right | `false`     |\n| `group`      | `YuwAvatarGroupItemDto[]｜undefined`     | `undefined` |\n| `groupCount` | `string｜undefined` — overflow label     | `undefined` |\n| `class`      | `string`                                | `''`        |\n\n#### Content slots\n\n`[yuwAvatarBadgeIcon]` — projecting an icon turns the status dot into a role/verification marker.\n\n---\n\n### Badge\n\n```html\n<yuw-badge color=\"primary\">New</yuw-badge>\n<yuw-badge variant=\"outline\" removeLabel=\"Remove tag\" (removed)=\"onRemove()\">Category</yuw-badge>\n<yuw-badge dot color=\"success\" />\n```\n\n#### Inputs\n\n| Input         | Type                                                              | Default     |\n|:--------------|:-------------------------------------------------------------------|:------------|\n| `color`       | `YuwColorDto`                                                     | `'primary'` |\n| `variant`     | `'default'｜'secondary'｜'destructive'｜'outline'｜'ghost'｜'link'`    | `'default'` |\n| `dot`         | `boolean` — compact dot, renders no content                        | `false`     |\n| `removeLabel` | `string｜undefined` — set it to render the dismiss button           | `undefined` |\n\n#### Outputs\n\n| Output    | Payload | Description                        |\n|:----------|:--------|:-----------------------------------|\n| `removed` | `void`  | Dismiss button activated.          |\n\n#### Content slots\n\n`[yuwBadgeIcon]` — leading icon.\n\n---\n\n### Card\n\nDirectives applied to your own elements — no wrapper element is inserted.\n\n```html\n<div yuwCard size=\"sm\">\n  <div yuwCardHeader>\n    <h3 yuwCardTitle>Monthly report</h3>\n    <p yuwCardDescription>Summary of the last 30 days.</p>\n    <div yuwCardAction><yuw-button size=\"sm\" variant=\"ghost\">Export</yuw-button></div>\n  </div>\n  <div yuwCardContent>…</div>\n  <div yuwCardFooter>…</div>\n</div>\n```\n\n| Directive           | Notes                        |\n|:--------------------|:-----------------------------|\n| `[yuwCard]`         | `size`: `'default'｜'sm'`     |\n| `[yuwCardHeader]`   |                              |\n| `[yuwCardTitle]`    |                              |\n| `[yuwCardDescription]` |                           |\n| `[yuwCardAction]`   | Top-right action area.       |\n| `[yuwCardContent]`  |                              |\n| `[yuwCardFooter]`   |                              |\n\nImport them all at once with `YuwCardImports`.\n\n---\n\n### Item\n\nRow/list layout primitive.\n\n```html\n<div yuwItem variant=\"outline\" size=\"sm\">\n  <div yuwItemMedia variant=\"icon\"><ng-icon name=\"lucideMail\" /></div>\n  <div yuwItemContent>\n    <div yuwItemTitle>New message</div>\n    <div yuwItemDescription>You have a message from Ada Lovelace.</div>\n  </div>\n  <div yuwItemActions><yuw-button size=\"sm\">Open</yuw-button></div>\n</div>\n```\n\n| Directive                | Notes                                             |\n|:-------------------------|:--------------------------------------------------|\n| `[yuwItem]`              | `variant`: `'default'｜'outline'｜'muted'`, `size`: `'default'｜'sm'｜'xs'` |\n| `[yuwItemHeader]`        |                                                   |\n| `[yuwItemMedia]`         | `variant`: `'default'｜'icon'｜'image'`             |\n| `[yuwItemContent]`       |                                                   |\n| `[yuwItemTitle]`         |                                                   |\n| `[yuwItemDescription]`   |                                                   |\n| `[yuwItemActions]`       |                                                   |\n| `[yuwItemFooter]`        |                                                   |\n| `[yuwItemGroup]`         |                                                   |\n| `[yuwItemSeparator]`     |                                                   |\n\nImport them all at once with `YuwItemImports`. Each directive also accepts the `yuw-item-*` element\nform (`<yuw-item-title>`).\n\n---\n\n### Attachment\n\nFile attachment card, with upload states.\n\n```html\n<div yuwAttachment state=\"uploading\" size=\"sm\">\n  <div yuwAttachmentMedia variant=\"icon\"><ng-icon name=\"lucideFileText\" /></div>\n  <div yuwAttachmentContent>\n    <span yuwAttachmentTitle>report.pdf</span>\n    <span yuwAttachmentDescription>2.4 MB</span>\n  </div>\n  <div yuwAttachmentActions>\n    <button yuwAttachmentAction><ng-icon name=\"lucideX\" /></button>\n  </div>\n</div>\n```\n\n| Directive                     | Notes                                                                |\n|:------------------------------|:----------------------------------------------------------------------|\n| `[yuwAttachment]`             | `state`: `'idle'｜'uploading'｜'processing'｜'error'｜'done'`, `size`: `'default'｜'sm'｜'xs'`, `orientation`: `'horizontal'｜'vertical'` |\n| `[yuwAttachmentGroup]`        |                                                                      |\n| `[yuwAttachmentMedia]`        | `variant`: `'icon'｜'image'`                                          |\n| `[yuwAttachmentContent]`      |                                                                      |\n| `[yuwAttachmentTitle]`        |                                                                      |\n| `[yuwAttachmentDescription]`  |                                                                      |\n| `[yuwAttachmentActions]`      |                                                                      |\n| `button[yuwAttachmentAction]` | Action button inside the card.                                        |\n| `[yuwAttachmentTrigger]`      | Makes a `<button>` / `<a>` the card's primary trigger.                |\n\n---\n\n### Table\n\nStyling directives for a table you write yourself.\n\n```html\n<div yuwTableContainer>\n  <table yuwTable>\n    <caption yuwCaption>Team members and their roles.</caption>\n    <thead yuwTHead>\n      <tr yuwTr><th yuwTh>Name</th><th yuwTh>Role</th></tr>\n    </thead>\n    <tbody yuwTBody>\n      <tr yuwTr><td yuwTd>Ada Lovelace</td><td yuwTd>Engineer</td></tr>\n    </tbody>\n    <tfoot yuwTFoot>…</tfoot>\n  </table>\n</div>\n```\n\nImport them all at once with `YuwTableImports`.\n\n---\n\n### Datatable\n\nSorting, pagination, row selection, column visibility and a loading skeleton, over\n[TanStack Table](https://tanstack.com/table).\n\n```html\n<yuw-datatable\n  [columns]=\"columns\"\n  [data]=\"users\"\n  sortable\n  paginated\n  selectable\n  [loading]=\"loading()\"\n  [(columnVisibility)]=\"columnVisibility\"\n  emptyText=\"No users found.\"\n  previousPageLabel=\"Previous page\"\n  nextPageLabel=\"Next page\"\n  (selectedRowsChange)=\"onSelect($event)\"\n/>\n```\n\n#### Inputs\n\n| Input               | Type                                          | Default                        |\n|:--------------------|:----------------------------------------------|:-------------------------------|\n| `columns`           | `YuwDatatableColumnDef<TData>[]`              | `[]`                           |\n| `data`              | `TData[]`                                     | `[]`                           |\n| `sortable`          | `boolean`                                     | `false`                        |\n| `paginated`         | `boolean`                                     | `false`                        |\n| `selectable`        | `boolean`                                     | `false`                        |\n| `loading`           | `boolean` — renders skeleton rows             | `false`                        |\n| `loadingRows`       | `number`                                      | `5`                            |\n| `emptyText`         | `string｜undefined`                            | `undefined`                    |\n| `previousPageLabel` | `string` — **required**                       | —                              |\n| `nextPageLabel`     | `string` — **required**                       | —                              |\n| `caption`           | `string｜undefined`                            | `undefined`                    |\n| `tableClass`        | `string｜undefined` — merged onto `<table>`    | `undefined`                    |\n| `sorting`           | `SortingState` — two-way                      | `[]`                           |\n| `columnFilters`     | `ColumnFiltersState` — two-way                | `[]`                           |\n| `columnVisibility`  | `ColumnVisibilityState` — two-way             | `{}`                           |\n| `rowSelection`      | `RowSelectionState` — two-way                 | `{}`                           |\n| `pagination`        | `PaginationState` — two-way                   | `{ pageIndex: 0, pageSize: 10 }` |\n\n#### Outputs\n\n| Output               | Payload   | Description                                                    |\n|:---------------------|:----------|:----------------------------------------------------------------|\n| `selectedRowsChange` | `TData[]` | Selection changes. The initial state does not emit.             |\n\n> `selectable` enables the selection *state*; the checkbox column itself is a display column you\n> provide (`id: 'select'`, with `flexRenderComponent(...)` header/cell calling TanStack's toggle\n> handlers).\n\n---\n\n### Empty\n\nEmpty-state panel (\"no results\", \"inbox empty\").\n\n```html\n<div yuwEmpty>\n  <div yuwEmptyHeader>\n    <div yuwEmptyMedia variant=\"icon\"><ng-icon name=\"lucideFolderOpen\" /></div>\n    <h3 yuwEmptyTitle>No files found</h3>\n    <p yuwEmptyDescription>Try uploading a file or changing your query.</p>\n  </div>\n  <div yuwEmptyContent>\n    <yuw-button>Upload file</yuw-button>\n  </div>\n</div>\n```\n\n`[yuwEmptyMedia]` accepts `variant`: `'default'｜'icon'`. Import them all at once with\n`YuwEmptyImports`.\n\n---\n\n### Skeleton\n\n```html\n<div yuwSkeleton class=\"h-4 w-32 rounded\"></div>\n<div yuwSkeleton class=\"size-10 rounded-full\"></div>\n```\n\nSized with standard CSS height/width classes on the host element.\n\n---\n\n### Spinner\n\n```html\n<yuw-spinner label=\"Loading\" />\n<yuw-spinner label=\"Refreshing\" icon=\"lucideRefreshCw\" />\n```\n\n#### Inputs\n\n| Input   | Type     | Default            |\n|:--------|:---------|:-------------------|\n| `label` | `string` — **required**, the accessible name | — |\n| `icon`  | `string` — any registered icon name          | `'lucideLoader2'` |\n\nThe spinner inherits its size from the container's font size — wrap it in `text-2xl` to scale it.\n\n---\n\n### Accordion\n\n```html\n<yuw-accordion type=\"multiple\">\n  <yuw-accordion-item [disabled]=\"false\" (openedChange)=\"onToggle($event)\">\n    <yuw-accordion-trigger>Shipping</yuw-accordion-trigger>\n    <yuw-accordion-content>Delivered in 24–48 h.</yuw-accordion-content>\n  </yuw-accordion-item>\n</yuw-accordion>\n```\n\n| Element                   | Inputs / Outputs                                                     |\n|:--------------------------|:----------------------------------------------------------------------|\n| `yuw-accordion`           | `type`: `'single'｜'multiple'` (default `'single'`), `orientation`: `'vertical'｜'horizontal'` (default `'vertical'`) |\n| `yuw-accordion-item`      | `isOpened`: `boolean`, `disabled`: `boolean`; output `openedChange`  |\n| `yuw-accordion-trigger`   | `triggerClass`: `string` — merged after defaults, so it wins         |\n| `yuw-accordion-content`   | —                                                                     |\n\nImport them all at once with `YuwAccordionImports`.\n\n---\n\n### Breadcrumb\n\n```html\n<yuw-breadcrumb\n  [items]=\"[{ label: 'Home', href: '/' }, { label: 'Settings' }]\"\n  ariaLabel=\"Breadcrumb\"\n/>\n```\n\n```ts\ninterface YuwBreadcrumbItemDto {\n  label: string;\n  href?: string;\n}\n```\n\n#### Inputs\n\n| Input       | Type                                | Default |\n|:------------|:------------------------------------|:--------|\n| `items`     | `YuwBreadcrumbItemDto[]` — **required** | —   |\n| `ariaLabel` | `string` — **required**             | —       |\n| `separator` | `string`                            | `'/'`   |\n\nThe last item is announced as the current page (`aria-current=\"page\"`); intermediate items render\nas links when they have an `href`.\n\n---\n\n### Pagination\n\n```html\n<yuw-pagination\n  [(page)]=\"currentPage\"\n  [totalPages]=\"20\"\n  previousLabel=\"Previous page\"\n  nextLabel=\"Next page\"\n  ellipsisSrText=\"More pages\"\n  ariaLabel=\"Pagination\"\n/>\n```\n\n#### Inputs\n\n| Input            | Type                                                                  | Default     |\n|:-----------------|:-----------------------------------------------------------------------|:------------|\n| `page`           | `number` — two-way, **required**                                       | —           |\n| `totalPages`     | `number` — **required**                                                | —           |\n| `previousLabel`  | `string` — **required**                                                | —           |\n| `nextLabel`      | `string` — **required**                                                | —           |\n| `ellipsisSrText` | `string` — **required**                                                | —           |\n| `ariaLabel`      | `string` — **required**                                                | —           |\n| `size`           | `'default'｜'xs'｜'sm'｜'lg'｜'icon'｜'icon-xs'｜'icon-sm'｜'icon-lg'`     | `'icon'`    |\n| `color`          | `YuwColorDto`                                                          | `'primary'` |\n\n`getPaginationRange(page, totalPages)` is exported if you need the same page/ellipsis sequence\nelsewhere.\n\n---\n\n### Tabs\n\nTriggers come from the `tabs` input; each panel is an `<ng-template yuwTabPanel=\"id\">` whose id\nmatches a tab. Panels are lazy — instantiated the first time their tab becomes active.\n\n```html\n<yuw-tabs [tabs]=\"settingsTabs\" [(activeTab)]=\"selected\" variant=\"line\">\n  <ng-template yuwTabPanel=\"general\">Workspace name, timezone and locale.</ng-template>\n  <ng-template yuwTabPanel=\"billing\">Plan, invoices and payment method.</ng-template>\n</yuw-tabs>\n```\n\n```ts\ninterface YuwTabItemDto {\n  id: string;\n  label: string;\n  disabled?: boolean;\n}\n```\n\n#### Inputs\n\n| Input            | Type                            | Default        |\n|:-----------------|:--------------------------------|:---------------|\n| `tabs`           | `YuwTabItemDto[]` — **required**| —              |\n| `activeTab`      | `string` — two-way, **required**| —              |\n| `variant`        | `'default'｜'line'`              | `'default'`    |\n| `orientation`    | `'horizontal'｜'vertical'`       | `'horizontal'` |\n| `activationMode` | `'automatic'｜'manual'`          | `'automatic'`  |\n\n---\n\n### Sidebar\n\nCollapsible navigation sidebar — a fixed panel on desktop, a slide-in sheet on mobile. Open state\nlives in `YuwSidebarService`, so `<yuw-sidebar-trigger>` works from anywhere on the page.\n\n```html\n<div yuwSidebarWrapper>\n  <yuw-sidebar collapsible=\"icon\">\n    <div yuwSidebarHeader>Yurest</div>\n\n    <div yuwSidebarContent>\n      <div yuwSidebarGroup>\n        <div yuwSidebarGroupLabel>Management</div>\n        <div yuwSidebarGroupContent>\n          <ul yuwSidebarMenu>\n            <li yuwSidebarMenuItem>\n              <a yuwSidebarMenuButton [isActive]=\"true\" tooltip=\"Orders\">\n                <ng-icon name=\"lucideShoppingCart\" />\n                <span>Orders</span>\n              </a>\n              <span yuwSidebarMenuBadge>12</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <div yuwSidebarFooter>…</div>\n  </yuw-sidebar>\n\n  <main yuwSidebarInset>\n    <yuw-sidebar-trigger label=\"Toggle sidebar\" />\n  </main>\n</div>\n```\n\n#### `<yuw-sidebar>` inputs\n\n| Input                   | Type                                     | Default        |\n|:------------------------|:------------------------------------------|:---------------|\n| `side`                  | `'left'｜'right'`                          | `'left'`       |\n| `variant`               | `'sidebar'｜'floating'｜'inset'`            | `'sidebar'`    |\n| `collapsible`           | `'offcanvas'｜'icon'｜'none'`               | `'offcanvas'`  |\n| `sidebarWidthMobile`    | `string` — any CSS length                 | `'18rem'`      |\n| `sidebarContainerClass` | `string` — merged onto the desktop container | `''`        |\n\n#### Structure directives\n\n| Directive                            | Notes                                                            |\n|:-------------------------------------|:------------------------------------------------------------------|\n| `[yuwSidebarWrapper]`                | `sidebarWidth`, `sidebarWidthIcon`                               |\n| `[yuwSidebarHeader]` / `[yuwSidebarContent]` / `[yuwSidebarFooter]` |                                     |\n| `[yuwSidebarGroup]` / `[yuwSidebarGroupLabel]` / `[yuwSidebarGroupContent]` |                             |\n| `ul[yuwSidebarMenu]` / `li[yuwSidebarMenuItem]` |                                                        |\n| `a[yuwSidebarMenuButton]`, `button[…]` | `variant`: `'default'｜'outline'`, `size`: `'default'｜'sm'｜'lg'`, `isActive`, `closeMobileSidebarOnClick`; add Spartan's `tooltip` to label items while collapsed to icons |\n| `[yuwSidebarMenuBadge]`              | Trailing count/status.                                            |\n| `ul[yuwSidebarMenuSub]` / `li[yuwSidebarMenuSubItem]` / `a[yuwSidebarMenuSubButton]` | Nested level.     |\n| `[yuwSidebarSeparator]`              |                                                                   |\n| `button[yuwSidebarRail]`             | `label` — **required**, thin edge toggle.                         |\n| `main[yuwSidebarInset]`              | Main content area.                                                |\n| `<yuw-sidebar-trigger>`              | `label` — **required**, screen-reader-only.                       |\n\nInject `YuwSidebarService` to read or drive the state (`state()`, `isMobile()`, `openMobile()`,\n`toggle()`); configure defaults app-wide with `provideYuwSidebarConfig({ … })`.\n\n---\n\n### Dialog\n\nModal overlay for focused tasks and forms. The body scrolls internally when taller than the\nviewport.\n\n> Provide either `title` or `ariaLabel` — a modal without an accessible name is announced as an\n> anonymous dialog by screen readers.\n\n```html\n<yuw-dialog [(open)]=\"isOpen\" title=\"Create project\"\n            description=\"Give it a name to get started.\" closeLabel=\"Close\">\n  <ng-container yuwDialogTrigger>Create project</ng-container>\n\n  <yuw-input [(value)]=\"name\" placeholder=\"Project name\" />\n\n  <div yuwDialogFooter>\n    <yuw-button (clicked)=\"save()\">Save</yuw-button>\n  </div>\n</yuw-dialog>\n```\n\n#### Inputs\n\n| Input            | Type                             | Default     |\n|:-----------------|:---------------------------------|:------------|\n| `open`           | `boolean` — two-way              | `false`     |\n| `showTrigger`    | `boolean` — set `false` when driving via `[(open)]` only | `true` |\n| `title`          | `string｜undefined`               | `undefined` |\n| `description`    | `string｜undefined`               | `undefined` |\n| `ariaLabel`      | `string｜undefined`               | `undefined` |\n| `closeLabel`     | `string｜undefined` — set it to render the corner ✕ | `undefined` |\n| `panelClass`     | `string｜undefined` — e.g. `sm:max-w-lg` | `undefined` |\n| `triggerVariant` | button variant                   | `'outline'` |\n| `triggerSize`    | button size                      | `'default'` |\n\n#### Content slots\n\n`[yuwDialogTrigger]`, `[yuwDialogFooter]` (the footer renders only when filled), and the default\nslot for the body. Import with `YuwDialogImports`.\n\n---\n\n### Alert dialog\n\nBlocking confirmation for destructive or irreversible actions. Unlike `<yuw-dialog>` it cannot be\ndismissed by clicking the backdrop.\n\n```html\n<yuw-alert-dialog\n  [(open)]=\"isOpen\"\n  title=\"Delete invoice?\"\n  description=\"This action cannot be undone.\"\n  confirmLabel=\"Delete\"\n  cancelLabel=\"Cancel\"\n  confirmVariant=\"destructive\"\n  (confirmed)=\"delete()\"\n/>\n```\n\n#### Inputs\n\n| Input            | Type                | Default     |\n|:-----------------|:--------------------|:------------|\n| `open`           | `boolean` — two-way | `false`     |\n| `showTrigger`    | `boolean`           | `true`      |\n| `title`          | `string` — **required** | —       |\n| `confirmLabel`   | `string` — **required** | —       |\n| `cancelLabel`    | `string` — **required** | —       |\n| `description`    | `string｜undefined`  | `undefined` |\n| `confirmVariant` | button variant      | `'default'` |\n| `size`           | `'default'｜'sm'`    | `'default'` |\n| `triggerVariant` | button variant      | `'outline'` |\n| `triggerSize`    | button size         | `'default'` |\n\n#### Outputs\n\n| Output      | Payload | Description                                                              |\n|:------------|:--------|:--------------------------------------------------------------------------|\n| `confirmed` | `void`  | Confirm action activated.                                                 |\n| `cancelled` | `void`  | Cancel **button** activated — programmatic closes do not emit it.         |\n\n#### Content slots\n\n`[yuwAlertDialogTrigger]`, `[yuwAlertDialogMedia]`.\n\n---\n\n### Sheet\n\nSlide-in panel for side drawers and detail views. Same accessible-name rule as\n[Dialog](#dialog).\n\n```html\n<yuw-sheet [(open)]=\"isOpen\" side=\"right\" title=\"Edit profile\"\n           description=\"Update your account details.\" closeLabel=\"Close\">\n  <ng-container yuwSheetTrigger>Edit profile</ng-container>\n\n  <p>Sheet form content goes here.</p>\n\n  <div yuwSheetFooter>\n    <yuw-button (clicked)=\"save()\">Save changes</yuw-button>\n  </div>\n</yuw-sheet>\n```\n\n#### Inputs\n\nSame as [Dialog](#dialog), plus:\n\n| Input  | Type                              | Default   |\n|:-------|:----------------------------------|:----------|\n| `side` | `'top'｜'bottom'｜'left'｜'right'`  | `'right'` |\n\n#### Content slots\n\n`[yuwSheetTrigger]`, `[yuwSheetFooter]`. Import with `YuwSheetImports`.\n\n---\n\n### Popover\n\n```html\n<yuw-popover [(open)]=\"isOpen\" align=\"start\" title=\"Notifications\"\n             description=\"You're all caught up.\">\n  <button yuwPopoverTrigger>View notifications</button>\n\n  <p>No new notifications since your last visit.</p>\n</yuw-popover>\n```\n\n#### Inputs\n\n| Input            | Type                       | Default    |\n|:-----------------|:---------------------------|:-----------|\n| `open`           | `boolean` — two-way        | `false`    |\n| `showTrigger`    | `boolean`                  | `true`     |\n| `align`          | `'start'｜'center'｜'end'`  | `'center'` |\n| `sideOffset`     | `number` — px              | `4`        |\n| `title`          | `string｜undefined`         | `undefined`|\n| `description`    | `string｜undefined`         | `undefined`|\n| `panelClass`     | `string｜undefined` — e.g. `w-80` | `undefined` |\n| `triggerVariant` | button variant             | `'outline'`|\n| `triggerSize`    | button size                | `'default'`|\n\n#### Content slots\n\n`[yuwPopoverTrigger]`, plus the default slot for the panel body.\n\n---\n\n### Tooltip\n\nApplied directly to the trigger element — no wrapper markup.\n\n```html\n<yuw-button yuwTooltip=\"Save your changes\">Save</yuw-button>\n<yuw-button [yuwTooltip]=\"helpText\" position=\"right\" [showDelay]=\"500\">Help</yuw-button>\n```\n\n#### Inputs\n\n| Input             | Type                                   | Default |\n|:------------------|:----------------------------------------|:--------|\n| `yuwTooltip`      | `string｜TemplateRef` — the content      | —       |\n| `position`        | `'top'｜'bottom'｜'left'｜'right'`        | `'top'` |\n| `showDelay`       | `number` — ms                           | `150`   |\n| `hideDelay`       | `number` — ms                           | `100`   |\n| `tooltipDisabled` | `boolean`                               | `false` |\n\n---\n\n### Context menu\n\nRight-click menu, declared as a template and attached to any element.\n\n```html\n<div [yuwContextMenuTrigger]=\"menu\">Right-click me</div>\n\n<ng-template #menu>\n  <div yuwContextMenu>\n    <div yuwContextMenuLabel>Actions</div>\n\n    <button yuwContextMenuItem (triggered)=\"edit()\">\n      Edit <span yuwContextMenuShortcut>⌘E</span>\n    </button>\n\n    <div yuwContextMenuSeparator></div>\n\n    <div yuwContextMenuGroup>\n      <button yuwContextMenuRadio [checked]=\"order() === 'asc'\" (triggered)=\"setOrder('asc')\">\n        Ascending\n        <yuw-context-menu-radio-indicator />\n      </button>\n    </div>\n\n    <button yuwContextMenuCheckbox [checked]=\"showArchived()\" (triggered)=\"toggleArchived()\">\n      Show archived\n      <yuw-context-menu-checkbox-indicator />\n    </button>\n\n    <button [yuwContextMenuSubTrigger]=\"subMenu\">\n      More tools\n      <yuw-context-menu-sub-indicator />\n    </button>\n  </div>\n</ng-template>\n```\n\n| Directive                   | Inputs / Outputs                                              |\n|:----------------------------|:----------------------------------------------------------------|\n| `[yuwContextMenuTrigger]`   | Menu `TemplateRef`; `yuwContextMenuTriggerData`; outputs `opened`, `closed` |\n| `[yuwContextMenu]`          | Menu panel.                                                     |\n| `[yuwContextMenuItem]`      | Output `triggered`.                                             |\n| `[yuwContextMenuCheckbox]`  | `checked`, `disabled`; output `triggered`.                      |\n| `[yuwContextMenuRadio]`     | `checked`, `disabled`; output `triggered`.                      |\n| `[yuwContextMenuGroup]` / `[yuwContextMenuLabel]` / `[yuwContextMenuSeparator]` / `[yuwContextMenuShortcut]` | Structure.  |\n| `[yuwContextMenuSub]` / `[yuwContextMenuSubTrigger]` | Nested menus.                           |\n| `<yuw-context-menu-checkbox-indicator>` / `…-radio-indicator>` / `…-sub-indicator>` | Indicators. |\n\nCheckbox and radio items keep the menu open; drive their `checked` state from `triggered`. Import\nthem all at once with `YuwContextMenuImports`.\n\n---\n\n### Alert\n\nInline, non-blocking message panel.\n\n```html\n<yuw-alert variant=\"destructive\" title=\"Payment declined\"\n           description=\"Check the card details and try again.\">\n  <ng-icon yuwAlertIcon name=\"lucideTriangleAlert\" />\n  <yuw-button yuwAlertAction size=\"sm\" variant=\"ghost\">Retry</yuw-button>\n</yuw-alert>\n\n<!-- Rich content replaces the plain-text inputs -->\n<yuw-alert>\n  <span yuwAlertTitle>Terms <strong>updated</strong></span>\n  <span yuwAlertDescription>Review the <a href=\"/changes\">changes</a> before continuing.</span>\n</yuw-alert>\n```\n\n#### Inputs\n\n| Input         | Type                        | Default     |\n|:--------------|:----------------------------|:------------|\n| `variant`     | `'default'｜'destructive'`   | `'default'` |\n| `title`       | `string｜undefined`          | `undefined` |\n| `description` | `string｜undefined`          | `undefined` |\n| `class`       | `string`                    | `''`        |\n\n#### Content slots\n\n`[yuwAlertIcon]`, `[yuwAlertTitle]`, `[yuwAlertDescription]`, `[yuwAlertAction]`. A projected title\nor description replaces the corresponding input. Import with `YuwAlertImports`.\n\n---\n\n### Toaster\n\nMount `<yuw-toaster />` **once** near the app root, then dispatch toasts from anywhere with\n`yuwToast`.\n\n```html\n<yuw-toaster position=\"top-right\" theme=\"system\" closeButton />\n```\n\n```ts\nimport { yuwToast } from 'yukit-web';\n\nyuwToast('Settings saved');\nyuwToast.success('Invoice sent', { description: 'A copy was emailed to the customer.' });\nyuwToast.error('Payment declined');\nyuwToast.warning('Storage almost full');\nyuwToast.info('Maintenance on Sunday');\n\nyuwToast.promise(saveSettings(), {\n  loading: 'Saving…',\n  success: 'Saved',\n  error: 'Could not save',\n});\n\nyuwToast('Item deleted', {\n  action: { label: 'Undo', onClick: () => restore() },\n});\n```\n\n#### Inputs\n\n| Input           | Type                                                                              | Default          |\n|:----------------|:-----------------------------------------------------------------------------------|:-----------------|\n| `position`      | `'top-left'｜'top-center'｜'top-right'｜'bottom-left'｜'bottom-center'｜'bottom-right'` | `'bottom-right'` |\n| `richColors`    | `boolean` — per-type coloring (deviates from the Spartan default)                  | `true`           |\n| `theme`         | `'light'｜'dark'｜'system'`                                                          | `'light'`        |\n| `duration`      | `number` — ms                                                                      | `4000`           |\n| `visibleToasts` | `number`                                                                          | `3`              |\n| `closeButton`   | `boolean`                                                                         | `false`          |\n| `expand`        | `boolean` — keeps the stack expanded                                               | `false`          |\n| `toastOptions`  | `ToastOptions` — defaults applied to every toast                                   | `{}`             |\n\n## Utilities and services\n\n| Export                    | Description                                                                                  |\n|:--------------------------|:-----------------------------------------------------------------------------------------------|\n| `cn(...classes)`          | `clsx` + `tailwind-merge`. Merges class lists so a later class overrides an earlier one of the same Tailwind group. |\n| `yuwToast`                | Toast API (`success`, `error`, `warning`, `info`, `promise`, …).                              |\n| `YuwSidebarService`       | Sidebar open/collapsed state, shared across the page.                                         |\n| `provideYuwSidebarConfig` | App-wide sidebar defaults (widths, variant).                                                  |\n| `provideValueAccessor`    | Registers a component as a form control — used by the library's own controls.                 |\n| `getPaginationRange`      | The page/ellipsis sequence `<yuw-pagination>` renders.                                        |\n| `YuwColorDto`, `YuwInputTypeDto`, `YuwInputModeDto`, `YuwTextFieldContract` | Shared type vocabulary.                      |\n\n### Spartan helm layer\n\nThe Spartan **helm** layer this library builds on is compiled into the package itself as secondary\nentry points (`yukit-web/helm/button`, `yukit-web/helm/input`, …). Consumers don't need it — the\n`yuw-*` components are the supported API — but it is public and safe to import when you need a\nprimitive no wrapper covers yet:\n\n```ts\nimport { HlmButton } from 'yukit-web/helm/button';\n```\n","readmeFilename":"README.md"}