yukit-web 0.0.3 → 0.0.4

package/package.json

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

package/types/yukit-web.d.ts

@@ -15,6 +15,7 @@ import * as i2 from 'yukit-web/helm/dropdown-menu';
 import * as i1$5 from 'yukit-web/helm/table';
 import * as _tanstack_angular_table from '@tanstack/angular-table';
 import { columnFilteringFeature, columnVisibilityFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnVisibilityState, RowSelectionState, PaginationState } from '@tanstack/table-core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as i1$6 from 'yukit-web/helm/item';
 import { HlmItemSeparator } from 'yukit-web/helm/item';
 import * as i1$7 from '@spartan-ng/brain/sheet';
@@ -207,6 +208,7 @@ interface YuwButtonGroupClickDto {
  * ```
  */
 declare class YuwButtonComponent {
+    private readonly _host;
     readonly variant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
     readonly size: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     readonly color: _angular_core.InputSignal<YuwColorDto>;
@@ -220,15 +222,13 @@ declare class YuwButtonComponent {
     readonly buttons: _angular_core.InputSignal<YuwButtonGroupEntryDto[] | undefined>;
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     readonly groupAriaLabel: _angular_core.InputSignal<string | undefined>;
-    /**
-     * Consumer CSS classes for the inner button/anchor (single and link mode). Merged last with
-     * `cn`, so they win over the component's own variant/transparent classes.
-     */
+    readonly animationDisabled: _angular_core.InputSignal<boolean>;
     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 _textClass = "bg-transparent text-foreground border-border dark:border-input";
     protected readonly _isGroup: _angular_core.Signal<boolean>;
+    protected readonly _animationDisabled: _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>;
@@ -265,7 +265,7 @@ declare class YuwButtonComponent {
     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"; }, ["_texts"], ["[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; }; "animationDisabled": { "alias": "animationDisabled"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, ["_texts"], ["[yuwButtonIcon]", "*", "[yuwButtonIcon]", "*"], true, never>;
 }
 
 /**
@@ -754,6 +754,8 @@ type YuwSearchInputCollapseFromDto = 'left' | 'right';
  *   app is responsible for translating.
  * - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
  *   Collapsible mode only.
+ * - `transparent`: Removes the field's resting border and background so it sits directly on its
+ *   container — for search inside a toolbar or a colored surface. The focus and invalid rings stay.
  * - `class`: Extra classes merged onto the input group.
  *
  * Outputs:
@@ -797,6 +799,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     readonly collapseFrom: _angular_core.InputSignal<YuwSearchInputCollapseFromDto | undefined>;
     readonly expandedWidth: _angular_core.InputSignal<string>;
     readonly expandAriaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
     private readonly _open;
     protected readonly _autoId: string;
@@ -837,7 +840,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     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; }; "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>;
+    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; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "searched": "searched"; "committed": "committed"; }, never, never, true, never>;
 }
 
 /**
@@ -1601,6 +1604,37 @@ declare class YuwCaptionDirective {
 /** Every table part, for a consumer's `imports`. */
 declare const YuwTableImports: readonly [typeof YuwTableContainerDirective, typeof YuwTableDirective, typeof YuwTHeadDirective, typeof YuwTBodyDirective, typeof YuwTFootDirective, typeof YuwTrDirective, typeof YuwThDirective, typeof YuwTdDirective, typeof YuwCaptionDirective];
 
+type YuwDatatableAlign = 'start' | 'center' | 'end';
+/**
+ * Class maps for `yuw-datatable`, layered on top of the Hlm table directives' own classes.
+ *
+ * `DATATABLE_ALIGN_CLASS` is keyed by a column's `meta.align` and shared by header and body cells,
+ * so a column declares its alignment once and both honour it; `start` maps to an empty string
+ * rather than re-stating what `HlmTh`/`HlmTd` already apply.
+ *
+ * The `appearance` maps are split per element because the treatment is not uniform: `card` frames
+ * the container so the header tint clips to the radius instead of squaring off against a
+ * consumer's wrapper, then drops the header's bottom border, since a rule underneath a filled
+ * strip reads as a seam. `default` resolves to an empty string throughout, leaving a table that
+ * does not opt in byte-identical to what the Hlm directives render alone.
+ */
+declare const DATATABLE_ALIGN_CLASS: Record<YuwDatatableAlign, string>;
+declare const datatableContainerVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableHeadVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableHeaderCellVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableCellVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableRowVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
 /**
  * The feature set `yuw-datatable` enables.
  *
@@ -1611,14 +1645,28 @@ declare const YuwTableImports: readonly [typeof YuwTableContainerDirective, type
  * (`getState`, `getCanNextPage`, …) missing from the instance type.
  */
 interface YuwDatatableFeatures {
+    columnMeta: YuwDatatableColumnMeta;
     columnFilteringFeature: typeof columnFilteringFeature;
     columnVisibilityFeature: typeof columnVisibilityFeature;
     rowPaginationFeature: typeof rowPaginationFeature;
     rowSelectionFeature: typeof rowSelectionFeature;
     rowSortingFeature: typeof rowSortingFeature;
 }
+/**
+ * Per-column options `yuw-datatable` reads off TanStack's `meta`, where `align` sets the
+ * horizontal alignment of that column's header and body cells and defaults to `'start'`.
+ *
+ * TanStack resolves `columnDef.meta` from a feature set's own `columnMeta` slot when it declares
+ * one, falling back to its global declaration-merged `ColumnMeta` otherwise. Declaring the slot on
+ * `YuwDatatableFeatures` is what constrains our columns to this shape — without it, `meta` is the
+ * empty global interface, which accepts any object and would catch no typo.
+ */
+interface YuwDatatableColumnMeta {
+    align?: YuwDatatableAlign;
+}
 declare const YUW_DATATABLE_FEATURES: YuwDatatableFeatures;
 type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatures, TData>;
+type YuwDatatableAppearanceDto = 'default' | 'card';
 /**
  * Full-featured data table component supporting sorting, filtering, pagination, row selection,
  * loading skeleton state, and column visibility.
@@ -1649,6 +1697,15 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   responsible for translating; when absent, no caption is rendered.
  * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
  *   `display: contents`, so a plain `class` on `<yuw-datatable>` would never reach the table.
+ * - `appearance`: Visual treatment (`YuwDatatableAppearanceDto`). Default is `'default'` —
+ *   Spartan's plain table. `'card'` frames the table in its own rounded bordered surface with a
+ *   tinted uppercase header strip and taller rows; the consumer needs no wrapper of its own.
+ *
+ * Per-column, through TanStack's `meta`:
+ * - `meta.align`: `'start' | 'center' | 'end'`, applied to both the header and body cells of that
+ *   column. Default is `'start'`. Alignment and the appearance's own cell classes are resolved
+ *   once into a per-column-id lookup rather than in the template, because a template method would
+ *   re-run the class merge for every cell on every change-detection pass.
  * - `sorting`: Two-way sorting state (`SortingState`).
  * - `columnFilters`: Two-way column filters state (`ColumnFiltersState`).
  * - `columnVisibility`: Two-way column visibility state (`ColumnVisibilityState`).
@@ -1665,6 +1722,7 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   [columns]="columns"
  *   [data]="users"
  *   [(sorting)]="sorting"
+ *   appearance="card"
  *   paginated
  *   selectable
  *   previousPageLabel="Página anterior"
@@ -1672,6 +1730,13 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   (selectedRowsChange)="onSelect($event)"
  * />
  * ```
+ *
+ * ```ts
+ * const columns: YuwDatatableColumnDef<Client>[] = [
+ *   { accessorKey: 'name', header: 'Nombre' },
+ *   { accessorKey: 'cif', header: 'CIF', meta: { align: 'center' } },
+ * ];
+ * ```
  */
 declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly columns: _angular_core.InputSignal<YuwDatatableColumnDef<TData>[]>;
@@ -1688,6 +1753,7 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly paginationAriaLabel: _angular_core.InputSignal<string>;
     readonly caption: _angular_core.InputSignal<string | undefined>;
     readonly tableClass: _angular_core.InputSignal<string | undefined>;
+    readonly appearance: _angular_core.InputSignal<YuwDatatableAppearanceDto>;
     readonly sorting: _angular_core.ModelSignal<SortingState>;
     readonly columnFilters: _angular_core.ModelSignal<ColumnFiltersState>;
     readonly columnVisibility: _angular_core.ModelSignal<ColumnVisibilityState>;
@@ -1719,9 +1785,17 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     protected readonly _columnCount: _angular_core.Signal<number>;
     protected readonly _skeletonRows: _angular_core.Signal<number[]>;
     protected readonly _tableClass: _angular_core.Signal<string>;
+    protected readonly _containerClass: _angular_core.Signal<string>;
+    protected readonly _headClass: _angular_core.Signal<string>;
+    protected readonly _rowClass: _angular_core.Signal<string>;
+    protected readonly _cellClasses: _angular_core.Signal<Map<string, {
+        readonly header: string;
+        readonly cell: string;
+    }>>;
     protected readonly _ariaSort: Record<'asc' | 'desc', 'ascending' | 'descending'>;
+    protected readonly _sortIcon: Record<'asc' | 'desc' | 'none', string>;
     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; }; "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>;
+    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; }; "appearance": { "alias": "appearance"; "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. */
@@ -2654,5 +2728,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, 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 };
+export { DATATABLE_ALIGN_CLASS, 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, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupEntryDto, YuwButtonGroupItemDto, YuwButtonGroupTextDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, 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/eb/7a/68501a82cc7271aaa1f0a48858c14b5c0f4e0a4cba643f7db7917ec76f90038089e5585323a72f65f739e434adb8b52a24b90387dac24cc6a24181783867

@@ -1 +0,0 @@
-{"_id":"yukit-web","_rev":"3-615c5ffb2a2c99f51725032bc0a5df09","name":"yukit-web","dist-tags":{"latest":"0.0.2"},"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"}},"0.0.2":{"name":"yukit-web","description":"Angular UI component library for Yurest web applications.","version":"0.0.2","author":{"name":"Yurest Solutions","email":"develop@yurest.com"},"exports":{"./theme.css":"./src/lib/theme/theme.css","./package.json":{"default":"./package.json"},".":{"types":"./types/yukit-web.d.ts","default":"./fesm2022/yukit-web.mjs"},"./helm/accordion":{"types":"./types/yukit-web-helm-accordion.d.ts","default":"./fesm2022/yukit-web-helm-accordion.mjs"},"./helm/alert":{"types":"./types/yukit-web-helm-alert.d.ts","default":"./fesm2022/yukit-web-helm-alert.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/attachment":{"types":"./types/yukit-web-helm-attachment.d.ts","default":"./fesm2022/yukit-web-helm-attachment.mjs"},"./helm/autocomplete":{"types":"./types/yukit-web-helm-autocomplete.d.ts","default":"./fesm2022/yukit-web-helm-autocomplete.mjs"},"./helm/avatar":{"types":"./types/yukit-web-helm-avatar.d.ts","default":"./fesm2022/yukit-web-helm-avatar.mjs"},"./helm/badge":{"types":"./types/yukit-web-helm-badge.d.ts","default":"./fesm2022/yukit-web-helm-badge.mjs"},"./helm/breadcrumb":{"types":"./types/yukit-web-helm-breadcrumb.d.ts","default":"./fesm2022/yukit-web-helm-breadcrumb.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/button-group":{"types":"./types/yukit-web-helm-button-group.d.ts","default":"./fesm2022/yukit-web-helm-button-group.mjs"},"./helm/calendar":{"types":"./types/yukit-web-helm-calendar.d.ts","default":"./fesm2022/yukit-web-helm-calendar.mjs"},"./helm/card":{"types":"./types/yukit-web-helm-card.d.ts","default":"./fesm2022/yukit-web-helm-card.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/collapsible":{"types":"./types/yukit-web-helm-collapsible.d.ts","default":"./fesm2022/yukit-web-helm-collapsible.mjs"},"./helm/combobox":{"types":"./types/yukit-web-helm-combobox.d.ts","default":"./fesm2022/yukit-web-helm-combobox.mjs"},"./helm/command":{"types":"./types/yukit-web-helm-command.d.ts","default":"./fesm2022/yukit-web-helm-command.mjs"},"./helm/context-menu":{"types":"./types/yukit-web-helm-context-menu.d.ts","default":"./fesm2022/yukit-web-helm-context-menu.mjs"},"./helm/date-picker":{"types":"./types/yukit-web-helm-date-picker.d.ts","default":"./fesm2022/yukit-web-helm-date-picker.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/dropdown-menu":{"types":"./types/yukit-web-helm-dropdown-menu.d.ts","default":"./fesm2022/yukit-web-helm-dropdown-menu.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/hover-card":{"types":"./types/yukit-web-helm-hover-card.d.ts","default":"./fesm2022/yukit-web-helm-hover-card.mjs"},"./helm/input":{"types":"./types/yukit-web-helm-input.d.ts","default":"./fesm2022/yukit-web-helm-input.mjs"},"./helm/input-group":{"types":"./types/yukit-web-helm-input-group.d.ts","default":"./fesm2022/yukit-web-helm-input-group.mjs"},"./helm/input-otp":{"types":"./types/yukit-web-helm-input-otp.d.ts","default":"./fesm2022/yukit-web-helm-input-otp.mjs"},"./helm/item":{"types":"./types/yukit-web-helm-item.d.ts","default":"./fesm2022/yukit-web-helm-item.mjs"},"./helm/kbd":{"types":"./types/yukit-web-helm-kbd.d.ts","default":"./fesm2022/yukit-web-helm-kbd.mjs"},"./helm/label":{"types":"./types/yukit-web-helm-label.d.ts","default":"./fesm2022/yukit-web-helm-label.mjs"},"./helm/marker":{"types":"./types/yukit-web-helm-marker.d.ts","default":"./fesm2022/yukit-web-helm-marker.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/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"},"./helm/pagination":{"types":"./types/yukit-web-helm-pagination.d.ts","default":"./fesm2022/yukit-web-helm-pagination.mjs"},"./helm/popover":{"types":"./types/yukit-web-helm-popover.d.ts","default":"./fesm2022/yukit-web-helm-popover.mjs"},"./helm/progress":{"types":"./types/yukit-web-helm-progress.d.ts","default":"./fesm2022/yukit-web-helm-progress.mjs"},"./helm/radio-group":{"types":"./types/yukit-web-helm-radio-group.d.ts","default":"./fesm2022/yukit-web-helm-radio-group.mjs"},"./helm/resizable":{"types":"./types/yukit-web-helm-resizable.d.ts","default":"./fesm2022/yukit-web-helm-resizable.mjs"},"./helm/scroll-area":{"types":"./types/yukit-web-helm-scroll-area.d.ts","default":"./fesm2022/yukit-web-helm-scroll-area.mjs"},"./helm/select":{"types":"./types/yukit-web-helm-select.d.ts","default":"./fesm2022/yukit-web-helm-select.mjs"},"./helm/separator":{"types":"./types/yukit-web-helm-separator.d.ts","default":"./fesm2022/yukit-web-helm-separator.mjs"},"./helm/sheet":{"types":"./types/yukit-web-helm-sheet.d.ts","default":"./fesm2022/yukit-web-helm-sheet.mjs"},"./helm/sidebar":{"types":"./types/yukit-web-helm-sidebar.d.ts","default":"./fesm2022/yukit-web-helm-sidebar.mjs"},"./helm/skeleton":{"types":"./types/yukit-web-helm-skeleton.d.ts","default":"./fesm2022/yukit-web-helm-skeleton.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/spinner":{"types":"./types/yukit-web-helm-spinner.d.ts","default":"./fesm2022/yukit-web-helm-spinner.mjs"},"./helm/switch":{"types":"./types/yukit-web-helm-switch.d.ts","default":"./fesm2022/yukit-web-helm-switch.mjs"},"./helm/table":{"types":"./types/yukit-web-helm-table.d.ts","default":"./fesm2022/yukit-web-helm-table.mjs"},"./helm/tabs":{"types":"./types/yukit-web-helm-tabs.d.ts","default":"./fesm2022/yukit-web-helm-tabs.mjs"},"./helm/textarea":{"types":"./types/yukit-web-helm-textarea.d.ts","default":"./fesm2022/yukit-web-helm-textarea.mjs"},"./helm/toggle":{"types":"./types/yukit-web-helm-toggle.d.ts","default":"./fesm2022/yukit-web-helm-toggle.mjs"},"./helm/toggle-group":{"types":"./types/yukit-web-helm-toggle-group.d.ts","default":"./fesm2022/yukit-web-helm-toggle-group.mjs"},"./helm/tooltip":{"types":"./types/yukit-web-helm-tooltip.d.ts","default":"./fesm2022/yukit-web-helm-tooltip.mjs"},"./helm/typography":{"types":"./types/yukit-web-helm-typography.d.ts","default":"./fesm2022/yukit-web-helm-typography.mjs"},"./helm/utils":{"types":"./types/yukit-web-helm-utils.d.ts","default":"./fesm2022/yukit-web-helm-utils.mjs"}},"peerDependencies":{"@angular/cdk":"^21.0.0","@angular/common":"^21.0.0","@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/router":"^21.0.0","@ng-icons/core":"^32.2.0","@ng-icons/lucide":"^32.2.0","@spartan-ng/brain":"^1.3.0","@tanstack/angular-table":"^9.0.0","embla-carousel-angular":"^21.0.0","ngx-scrollbar":"^19.1.5","rxjs":"^7.8.0"},"dependencies":{"@tanstack/table-core":"^9.0.0","class-variance-authority":"^0.7.1","clsx":"^2.1.1","embla-carousel":">=8.0.0 <9.0.0","tailwind-merge":"^3.6.0","tslib":"^2.8.1"},"sideEffects":["**/*.css"],"module":"fesm2022/yukit-web.mjs","typings":"types/yukit-web.d.ts","type":"module","_id":"yukit-web@0.0.2","gitHead":"34be59a8466511ad95464d10505ea4af3a36222b","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-S48Tv8Arep4cLVmMxRthdz5wt4XjZS9LZPLVPsvmp5HNgrg3VEiQF/N2JYmwlsg9wA6P+jVWBfaaW1YHz8lQEQ==","shasum":"c85436c5cc6f87ef9b51b0bd6353525a0662d738","tarball":"https://registry.npmjs.org/yukit-web/-/yukit-web-0.0.2.tgz","fileCount":198,"unpackedSize":3114370,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIG88By7rkF8l161SaCxVvuanhxeqFn+X1G1VpTjrQbgIhAIl0W3kJSXNUMU86XSaJetumZhUDQwKrwyeSujgSaMWd"}]},"_npmUser":{"name":"yurest","email":"develop@yurest.com"},"directories":{},"maintainers":[{"name":"pabloclaramunt","email":"p.claramunt@yurest.com"},{"name":"d.sancho.yurest","email":"d.sancho@yurest.com"},{"name":"yurest","email":"develop@yurest.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/yukit-web_0.0.2_1787307853542_0.9779175569139993"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-20T08:40:58.102Z","modified":"2026-08-21T10:24:13.889Z","0.0.1":"2026-08-20T08:40:58.450Z","0.0.2":"2026-08-21T10:24:13.713Z"},"author":{"name":"Yurest Solutions","email":"develop@yurest.com"},"description":"Angular UI component library for Yurest web applications.","maintainers":[{"name":"pabloclaramunt","email":"p.claramunt@yurest.com"},{"name":"d.sancho.yurest","email":"d.sancho@yurest.com"},{"name":"yurest","email":"develop@yurest.com"}],"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"}