npm - yukit-web - Versions diffs - 0.0.5 → 0.0.6 - Mend

yukit-web 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json CHANGED Viewed

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

package/types/yukit-web.d.ts CHANGED Viewed

@@ -766,6 +766,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.
+ * - `size`: Control height, matching the `<yuw-button>` of the same name. While collapsed the
+ *   control is a square of that height.
  * - `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.
@@ -811,6 +813,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 size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
     private readonly _open;
@@ -829,6 +832,8 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     protected readonly _iconClasses: _angular_core.Signal<string>;
     protected readonly _fieldClasses: _angular_core.Signal<string>;
     protected readonly _showExpandButton: _angular_core.Signal<boolean>;
+    /** Geometry for the collapsed expand button, which the helm's capped `size` input cannot express. */
+    protected readonly _expandButtonClasses: _angular_core.Signal<string>;
     protected readonly _showClear: _angular_core.Signal<boolean>;
     protected _emptyValue(): string;
     protected onInput(event: Event): void;
@@ -852,7 +857,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; }; "transparent": { "alias": "transparent"; "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; }; "size": { "alias": "size"; "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>;
 }
 /**
@@ -860,6 +865,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
  *
  * Inputs / Models:
  * - `value`: Two-way password string.
+ * - `size`: Control height, matching the `<yuw-button>` of the same name.
  * - `inputId`: `id` applied to the native input, for external `<label for>` association.
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
@@ -884,6 +890,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
 declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> implements YuwTextFieldContract {
     readonly value: _angular_core.ModelSignal<string>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -905,7 +912,7 @@ declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> imp
     protected onChange(): void;
     protected onToggleReveal(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwPasswordInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPasswordInputComponent, "yuw-password-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; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; "masked": "maskedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPasswordInputComponent, "yuw-password-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; "masked": "maskedChange"; }, never, never, true, never>;
 }
 /**
@@ -936,6 +943,7 @@ type YuwInputOtpModeDto = 'numeric' | 'text';
  * - `groupSizes`: Slot counts per visual group (`number[]`). A separator renders between groups, e.g. `[3, 3]` gives `000-000`. Default is `[6]`.
  * - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
  * - `disabled`: Disables input interaction.
+ * - `size`: Cell size, matching the `<yuw-button>` of the same name.
  * - `invalid`: Forces invalid styling.
  * - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
  * - `transformPaste`: Normalizes pasted text before it fills the slots.
@@ -955,6 +963,7 @@ declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly groupSizes: _angular_core.InputSignal<readonly number[]>;
     readonly mode: _angular_core.InputSignal<YuwInputOtpModeDto>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -970,7 +979,7 @@ declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
     protected _emptyValue(): string;
     protected onValueChange(next: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputOtpComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 /**
@@ -1072,7 +1081,8 @@ declare class YuwCheckboxComponent extends YuwValueAccessorBase<boolean> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwCheckboxComponent, "yuw-checkbox", never, { "value": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "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; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; }, { "value": "checkedChange"; "indeterminate": "indeterminateChange"; }, never, ["*"], true, never>;
 }
-type YuwSwitchSizeDto = 'default' | 'sm';
+type YuwSwitchSizeDto = 'default' | 'xs' | 'sm' | 'lg';
 /**
  * Toggle switch control for binary settings and immediate state changes.
  *
@@ -1082,7 +1092,8 @@ type YuwSwitchSizeDto = 'default' | 'sm';
  *
  * Inputs / Models:
  * - `checked` (alias for `value`): Two-way boolean on/off state. Bind as `[(checked)]`.
- * - `size`: Track size variant (`'default'`, `'sm'`). Default is `'default'`.
+ * - `size`: Track size (`'default'`, `'xs'`, `'sm'`, `'lg'`). Named to match the rest of the
+ *   library; the pixel values keep a switch's own proportions rather than the field heights.
  * - `disabled`: Disables switch interaction.
  * - `inputId`: HTML `id` for the underlying control, enabling external `<label for="...">` association.
  * - `ariaLabel`: Accessible name for switches with no visible adjacent label.
@@ -1096,6 +1107,8 @@ type YuwSwitchSizeDto = 'default' | 'sm';
 declare class YuwSwitchComponent extends YuwValueAccessorBase<boolean> {
     readonly value: _angular_core.ModelSignal<boolean>;
     readonly size: _angular_core.InputSignal<YuwSwitchSizeDto>;
+    protected readonly _helmSize: _angular_core.Signal<"default" | "sm">;
+    protected readonly _switchClass: _angular_core.Signal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
@@ -1520,6 +1533,10 @@ type YuwDatepickerModeDto = 'single' | 'range' | 'multiple' | 'monthYear';
  * ```
  */
 declare class YuwDatepickerComponent extends YuwValueAccessorBase<YuwDatepickerValue> {
+    private readonly _singleConfig;
+    private readonly _rangeConfig;
+    private readonly _multiConfig;
+    private readonly _monthYearConfig;
     readonly mode: _angular_core.InputSignal<YuwDatepickerModeDto>;
     readonly value: _angular_core.ModelSignal<YuwDatepickerValue>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1529,16 +1546,14 @@ declare class YuwDatepickerComponent extends YuwValueAccessorBase<YuwDatepickerV
     readonly captionLayout: _angular_core.InputSignal<"dropdown" | "label" | "dropdown-months" | "dropdown-years">;
     readonly align: _angular_core.InputSignal<"start" | "center" | "end">;
     readonly buttonId: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly userClass: _angular_core.InputSignal<string>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly formatDate: _angular_core.InputSignal<((date: Date) => string) | undefined>;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
     private readonly _generatedButtonId;
+    protected readonly _triggerClass: _angular_core.Signal<string>;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
     protected readonly _buttonId: _angular_core.Signal<string>;
-    private readonly _singleConfig;
-    private readonly _rangeConfig;
-    private readonly _multiConfig;
-    private readonly _monthYearConfig;
     protected readonly _formatSingle: _angular_core.Signal<(date: Date) => string>;
     protected readonly _formatMonthYear: _angular_core.Signal<(date: Date) => string>;
     protected readonly _formatRange: _angular_core.Signal<(dates: [Date | null, Date | null]) => string>;
@@ -1549,7 +1564,7 @@ declare class YuwDatepickerComponent extends YuwValueAccessorBase<YuwDatepickerV
     protected _emptyValue(): YuwDatepickerValue;
     protected onValueChange(next: YuwDatepickerValue): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwDatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatepickerComponent, "yuw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "buttonId": { "alias": "buttonId"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatepickerComponent, "yuw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "buttonId": { "alias": "buttonId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 /**
@@ -2447,6 +2462,7 @@ type YuwTabsActivationModeDto = 'automatic' | 'manual';
  * - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
  * - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
  *   programmatically; listen to `activeTabChange` to react to activations.
+ * - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
  * - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
  * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
  * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
@@ -2464,12 +2480,14 @@ declare class YuwTabsComponent {
     readonly tabs: _angular_core.InputSignal<YuwTabItemDto[]>;
     readonly activeTab: _angular_core.ModelSignal<string>;
     readonly variant: _angular_core.InputSignal<YuwTabsVariantDto>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
+    protected readonly _listClass: _angular_core.Signal<string>;
     readonly orientation: _angular_core.InputSignal<YuwTabsOrientationDto>;
     readonly activationMode: _angular_core.InputSignal<YuwTabsActivationModeDto>;
     protected readonly panels: _angular_core.Signal<readonly YuwTabPanelDirective[]>;
     protected onTabActivated(tabId: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwTabsComponent, "yuw-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "activationMode": { "alias": "activationMode"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["panels"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwTabsComponent, "yuw-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "activationMode": { "alias": "activationMode"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["panels"], never, true, never>;
 }
 /**

package/.npm/_cacache/content-v2/sha512/4f/1b/f689c8ddedb8797ff60d136bd61b5ed80207bbc30853891a131b94e7318092e7d0a1af4e19f6e699e04bb6e9b29ade310e757f6e1d8b4d3827c222f2f8be DELETED Viewed

@@ -1 +0,0 @@

- {"_id":"yukit-web","_rev":"5-f382147c45332b7fac246a201fa80e38","name":"yukit-web","dist-tags":{"latest":"0.0.4"},"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","version":"0.0.2","author":{"name":"Yurest Solutions","email":"develop@yurest.com"},"_id":"yukit-web@0.0.2","maintainers":[{"name":"pabloclaramunt","email":"p.claramunt@yurest.com"},{"name":"d.sancho.yurest","email":"d.sancho@yurest.com"},{"name":"yurest","email":"develop@yurest.com"}],"dist":{"shasum":"c85436c5cc6f87ef9b51b0bd6353525a0662d738","tarball":"https://registry.npmjs.org/yukit-web/-/yukit-web-0.0.2.tgz","fileCount":198,"integrity":"sha512-S48Tv8Arep4cLVmMxRthdz5wt4XjZS9LZPLVPsvmp5HNgrg3VEiQF/N2JYmwlsg9wA6P+jVWBfaaW1YHz8lQEQ==","signatures":[{"sig":"MEYCIQDIG88By7rkF8l161SaCxVvuanhxeqFn+X1G1VpTjrQbgIhAIl0W3kJSXNUMU86XSaJetumZhUDQwKrwyeSujgSaMWd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3114370},"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":"34be59a8466511ad95464d10505ea4af3a36222b","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.2_1787307853542_0.9779175569139993","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"yukit-web","version":"0.0.3","author":{"name":"Yurest Solutions","email":"develop@yurest.com"},"_id":"yukit-web@0.0.3","maintainers":[{"name":"pabloclaramunt","email":"p.claramunt@yurest.com"},{"name":"d.sancho.yurest","email":"d.sancho@yurest.com"},{"name":"yurest","email":"develop@yurest.com"}],"dist":{"shasum":"9df3ccc8d218e1fd4453e3c8d6a2e2c9d9328b75","tarball":"https://registry.npmjs.org/yukit-web/-/yukit-web-0.0.3.tgz","fileCount":198,"integrity":"sha512-42CIVu7N3BPn7LbeqTnWH31s9BOPsY2391NR4DNunzdjmwA9R70m1mPdoNMo5ulaBAqnjmT/N4zj1A7CnKAW2w==","signatures":[{"sig":"MEUCIGKl8K8R4dl9yk1zwztneqFEGqL5AICFNUNVFPQaCwrsAiEAt9ds/yXZ6G7dNr7SfG/zct1LR2Xw0CmqQyvsZtkVK6w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3166335},"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":"518801a26d9de3e20a2aed087cae1b8a736afc2a","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.3_1787575859061_0.09453365937634928","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"yukit-web","description":"Angular UI component library for Yurest web applications.","version":"0.0.4","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.4","gitHead":"ebc02a3a8f6d886cbe6c9ddfb0158ffc848b057e","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-eXBbtboXGq6GPKb8c5PgpdbbosNwVBzit7ze23oq6a6cXo1eTWJ/BTc/MUvU7zD4J6PdIpz8+UfIVGDyaRT6Eg==","shasum":"ce80bd1cf20842ac7846abb01a26780fbd70fc29","tarball":"https://registry.npmjs.org/yukit-web/-/yukit-web-0.0.4.tgz","fileCount":198,"unpackedSize":3202518,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD01aYnE1hXqYFERnEO8n6+rsSI1f8/MgLiwyDMVmUbxwIhAPVQBBjBFipQug0FO7kNrIEXDWmFFc8x9qQWQLfTYe3U"}]},"_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.4_1787646042740_0.14605161702394498"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-20T08:40:58.102Z","modified":"2026-08-25T08:20:43.075Z","0.0.1":"2026-08-20T08:40:58.450Z","0.0.2":"2026-08-21T10:24:13.713Z","0.0.3":"2026-08-24T12:50:59.215Z","0.0.4":"2026-08-25T08:20:42.935Z"},"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\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\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\n<yuw-combobox readonlyTrigger [options]=\"colorOptions\" [(value)]=\"color\"\n searchPlaceholder=\"Search colors…\" triggerAriaLabel=\"Toggle options\" />\n\n\n<yuw-combobox multiple [options]=\"categoryOptions\" [(value)]=\"categories\"\n triggerAriaLabel=\"Toggle options\" />\n\n\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\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"}