yukit-web 0.0.4 → 0.0.5

package/package.json

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

package/src/lib/theme/tokens/component-colors.css

@@ -19,7 +19,6 @@
   --yuw-accent-foreground: var(--background);
   --secondary: var(--neutrals-element-low);
   --secondary-foreground: var(--neutrals-overlay-accent);
-  --border: var(--neutrals-outline-accent);
 }
 
 [data-yuw-color='secondary'] button.bg-primary:not(:disabled) {
@@ -107,6 +106,10 @@
   --input: var(--yuw-accent);
 }
 
+[data-yuw-color='secondary'] {
+  --border: var(--neutrals-outline-accent);
+}
+
 [data-yuw-color] button:not(:disabled) {
   --ring: var(--yuw-accent);
 }

package/types/yukit-web.d.ts

@@ -27,6 +27,7 @@ import * as i1$a from '@spartan-ng/brain/dialog';
 import * as i1$b from '@spartan-ng/brain/alert-dialog';
 import * as i1$c from 'yukit-web/helm/attachment';
 import { HlmAttachmentAction } from 'yukit-web/helm/attachment';
+import { RouterLink } from '@angular/router';
 import * as i1$d from 'yukit-web/helm/sidebar';
 export { HlmSidebarConfig as YuwSidebarConfigDto, HlmSidebarService as YuwSidebarService, SidebarVariant as YuwSidebarServiceVariantDto, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
 
@@ -89,6 +90,7 @@ declare abstract class YuwValueAccessorBase<T> implements ControlValueAccessor {
 
 type YuwInputTypeDto = 'text' | 'email' | 'tel' | 'url' | 'number';
 type YuwInputModeDto = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+type YuwFieldSizeDto = 'default' | 'xs' | 'sm' | 'lg';
 interface YuwTextFieldContract {
     readonly value: ModelSignal<string>;
     readonly inputId: InputSignal<string | undefined>;
@@ -209,7 +211,7 @@ interface YuwButtonGroupClickDto {
  */
 declare class YuwButtonComponent {
     private readonly _host;
-    readonly variant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly variant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly size: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     readonly color: _angular_core.InputSignal<YuwColorDto>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -229,7 +231,7 @@ declare class YuwButtonComponent {
     protected readonly _textClass = "bg-transparent text-foreground border-border dark:border-input";
     protected readonly _isGroup: _angular_core.Signal<boolean>;
     protected readonly _animationDisabled: _angular_core.Signal<boolean>;
-    protected readonly _effectiveVariant: _angular_core.Signal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    protected readonly _effectiveVariant: _angular_core.Signal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
     protected readonly _btnClass: _angular_core.Signal<string>;
     private readonly _texts;
@@ -247,7 +249,7 @@ declare class YuwButtonComponent {
         kind: "text";
         label?: string;
     } | {
-        variant: "secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined;
+        variant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
         size: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
         color: YuwColorDto;
         disabled: boolean;
@@ -308,7 +310,7 @@ declare class YuwButtonGroupTextDirective {
  * ```
  */
 declare class YuwBadgeComponent {
-    readonly variant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly variant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly color: _angular_core.InputSignal<YuwColorDto>;
     readonly removeLabel: _angular_core.InputSignal<string | undefined>;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -454,6 +456,9 @@ type YuwComboboxValue = string | string[] | undefined;
  * - `options`: Required array of option items (`YuwComboboxOptionDto<TData>[]`).
  * - `value`: Two-way selected value(s) (`string` for single mode, `string[]` for multiple mode).
  *   Emits `valueChange` on every selection change.
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
+ *   `<yuw-button>` size of the same name. Applies to whichever control shape renders; the popover
+ *   panel and its inner search field keep their own compact sizing.
  * - `multiple`: Enables multi-selection mode with removable tags/chips.
  * - `disabled`: Disables combobox interaction.
  * - `placeholder`: Placeholder text when no option is selected.
@@ -486,6 +491,7 @@ type YuwComboboxValue = string | string[] | undefined;
 declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase<YuwComboboxValue> {
     readonly options: _angular_core.InputSignal<YuwComboboxOptionDto<TData>[]>;
     readonly value: _angular_core.ModelSignal<YuwComboboxValue>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
@@ -501,6 +507,9 @@ declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase
     private readonly _panel;
     protected readonly _disabled: _angular_core.Signal<boolean>;
     protected readonly _clearVisible: _angular_core.Signal<boolean>;
+    protected readonly _fieldClass: _angular_core.Signal<string>;
+    protected readonly _chipsClass: _angular_core.Signal<string>;
+    protected readonly _triggerClass: _angular_core.Signal<string>;
     private readonly _generatedId;
     protected readonly _controlId: _angular_core.Signal<string>;
     protected readonly _singleValue: _angular_core.Signal<string | undefined>;
@@ -516,7 +525,7 @@ declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase
     protected onValueChange(next: YuwComboboxValue | null): void;
     protected _onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwComboboxComponent<any>, "yuw-combobox", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": true; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "readonlyTrigger": { "alias": "readonlyTrigger"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "searchChange"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwComboboxComponent<any>, "yuw-combobox", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": true; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "readonlyTrigger": { "alias": "readonlyTrigger"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "searchChange"; }, ["itemTemplate"], never, true, never>;
 }
 
 /**
@@ -598,6 +607,8 @@ declare const YuwAccordionImports: readonly [typeof YuwAccordion, typeof YuwAcco
  * - `value`: Two-way text string.
  * - `inputId`: `id` applied to the native input, for external `<label for>` association.
  * - `type`: HTML input type (`'text'`, `'email'`, `'number'`, etc.). Default is `'text'`.
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
+ *   `<yuw-button>` size of the same name. Default is `'default'`.
  * - `inputmode`: Virtual keyboard hint (e.g. `'numeric'`).
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
@@ -625,6 +636,7 @@ declare class YuwInputComponent extends YuwValueAccessorBase<string> implements
     readonly value: _angular_core.ModelSignal<string>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly type: _angular_core.InputSignal<YuwInputTypeDto>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly inputmode: _angular_core.InputSignal<YuwInputModeDto | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -649,7 +661,7 @@ declare class YuwInputComponent extends YuwValueAccessorBase<string> implements
     protected _emptyValue(): string;
     protected onChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputComponent, "yuw-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "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; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputComponent, "yuw-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "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; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
 }
 
 /**
@@ -1976,7 +1988,7 @@ declare class YuwSheetComponent {
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly closeLabel: _angular_core.InputSignal<string | undefined>;
     readonly panelClass: _angular_core.InputSignal<string | undefined>;
-    readonly triggerVariant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     protected readonly hasFooter: _angular_core.Signal<YuwSheetFooterDirective | undefined>;
     protected readonly _sheetState: _angular_core.Signal<"open" | "closed">;
@@ -2043,7 +2055,7 @@ declare class YuwPopoverComponent {
     readonly title: _angular_core.InputSignal<string | undefined>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly panelClass: _angular_core.InputSignal<string | undefined>;
-    readonly triggerVariant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     readonly triggerTransparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly triggerClass: _angular_core.InputSignal<string>;
@@ -2290,7 +2302,7 @@ declare class YuwDialogComponent {
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly closeLabel: _angular_core.InputSignal<string | undefined>;
     readonly panelClass: _angular_core.InputSignal<string | undefined>;
-    readonly triggerVariant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     protected readonly hasFooter: _angular_core.Signal<YuwDialogFooterDirective | undefined>;
     protected readonly _dialogState: _angular_core.Signal<"open" | "closed">;
@@ -2373,9 +2385,9 @@ declare class YuwAlertDialogComponent {
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly confirmLabel: _angular_core.InputSignal<string>;
     readonly cancelLabel: _angular_core.InputSignal<string>;
-    readonly confirmVariant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly confirmVariant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly size: _angular_core.InputSignal<YuwAlertDialogSizeDto>;
-    readonly triggerVariant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     readonly confirmed: _angular_core.OutputEmitterRef<void>;
     readonly cancelled: _angular_core.OutputEmitterRef<void>;
@@ -2537,6 +2549,103 @@ declare class YuwAttachmentTriggerDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwAttachmentTriggerDirective, "button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]", never, {}, {}, never, never, true, [{ directive: typeof i1$c.HlmAttachmentTrigger; inputs: { "type": "type"; }; outputs: {}; }]>;
 }
 
+/**
+ * Where a sidebar entry points.
+ *
+ * Split across two target fields rather than one, because they drive different mechanisms: `route`
+ * binds `[routerLink]` (in-app navigation, and the source of the entry's automatic active state),
+ * `href` binds a plain `[href]` (full page load, external URLs). `helm/breadcrumb` shows the cost of
+ * conflating them — its DTO field is named `href` but is wired to `routerLink`, so a consumer
+ * passing an external URL gets silent router navigation to a route that doesn't exist.
+ *
+ * An entry with neither renders as a `<button>` and reports through `itemClicked`.
+ *
+ * - `route`: in-app target, accepting anything `[routerLink]` does, including a command array.
+ * - `href`: external or non-router target, bound to a plain anchor.
+ * - `target`: `target` attribute, only meaningful alongside `href`.
+ * - `exact`: whether the active state requires a full URL match, mapping to
+ *   `routerLinkActiveOptions.exact`; applies only to a `route`. Default is `false`, so a parent
+ *   route stays highlighted while a child is open — set it on a root path like `/` that would
+ *   otherwise match everything.
+ */
+interface YuwSidebarNavigationDto {
+    route?: RouterLink['routerLink'];
+    href?: string;
+    target?: string;
+    exact?: boolean;
+}
+/**
+ * A submenu entry, nested under a {@link YuwSidebarItemDto}.
+ *
+ * Deliberately not the same type as its parent: the helm sub-button renders no icon, no badge and
+ * no further nesting, so reusing `YuwSidebarItemDto` here would hand consumers three fields that
+ * silently do nothing. Same reasoning as `YuwButtonGroupTextDto`.
+ *
+ * `label` is supplied already translated — the sidebar owns no user-facing copy.
+ */
+interface YuwSidebarSubItemDto extends YuwSidebarNavigationDto {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * A single entry of a sidebar menu.
+ *
+ * Renders an anchor when it carries a `route` or `href`, and a `<button>` otherwise — the data says
+ * which it is, so there is no `kind` field to keep in sync with it.
+ *
+ * - `label`: text of the entry, supplied already translated — the sidebar owns no user-facing copy.
+ * - `icon`: name of a registered `@ng-icons` icon. Because the *consumer* chooses this name, the
+ *   consuming app is responsible for `provideIcons()`-ing it; `provideIcons` is a component-level
+ *   provider, so a name registered on the component hosting the sidebar resolves here through the
+ *   injector chain. Same contract as `<yuw-spinner icon="…">`.
+ * - `badge`: short trailing count or status, hidden automatically while collapsed to icons.
+ * - `tooltip`: label shown while collapsed to icons, where `label` is not visible. Falls back to
+ *   `label` when absent, so the common case needs no second field.
+ */
+interface YuwSidebarItemDto extends YuwSidebarNavigationDto {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    children?: YuwSidebarSubItemDto[];
+}
+/**
+ * A titled section of the sidebar.
+ *
+ * `label` is heading text, already translated; omitting it renders the menu with no heading.
+ * `separatorAfter` draws a divider after the group — for separating a settings block from the
+ * main nav.
+ */
+interface YuwSidebarGroupDto {
+    id: string;
+    label?: string;
+    items: YuwSidebarItemDto[];
+    separatorAfter?: boolean;
+}
+/**
+ * What `<yuw-sidebar>`'s `content` and `footer` inputs accept.
+ *
+ * An object rather than a bare `YuwSidebarGroupDto[]` so the shape can grow without a breaking
+ * change to the input's type.
+ */
+interface YuwSidebarContentDto {
+    groups: YuwSidebarGroupDto[];
+}
+/**
+ * What `<yuw-sidebar>` emits from `itemClicked`.
+ *
+ * Only entries with neither `route` nor `href` emit: a navigating entry's click is the router's or
+ * the browser's to handle. Carries the `id` rather than the whole entry, matching
+ * `YuwButtonGroupClickDto`.
+ */
+interface YuwSidebarItemClickDto {
+    id: string;
+    event: MouseEvent;
+}
+
 type YuwSidebarSideDto = 'left' | 'right';
 type YuwSidebarVariantDto = 'sidebar' | 'floating' | 'inset';
 type YuwSidebarCollapsibleDto = 'offcanvas' | 'icon' | 'none';
@@ -2554,6 +2663,25 @@ type YuwSidebarCollapsibleDto = 'offcanvas' | 'icon' | 'none';
  * - `collapsible`: Collapse behaviour (`'offcanvas'` slides away, `'icon'` shrinks to icons, `'none'` always open). Default is `'offcanvas'`.
  * - `sidebarWidthMobile`: Width of the mobile slide-in sheet (any CSS length). Defaults to the helm sidebar config (`18rem`).
  * - `sidebarContainerClass`: Extra classes merged onto the desktop fixed container (the helm merges them last, so they win).
+ * - `content`: Renders the scrollable nav from a `YuwSidebarContentDto` instead of hand-written
+ *   markup. Groups → items → optional one level of children. An item with a `route` becomes a
+ *   `[routerLink]` anchor whose active state, `aria-current` and pointer-lock resolve automatically
+ *   from `routerLinkActive`; one with an `href` becomes a plain anchor; one with neither becomes a
+ *   button that reports through `itemClicked`.
+ * - `footer`: The same, rendered into the footer region.
+ *
+ * Outputs:
+ * - `itemClicked`: Emits `{id, event}` when a non-navigating entry (no `route`, no `href`) is
+ *   activated, in either `content` or `footer`.
+ *
+ * The two forms compose rather than exclude each other, unlike `<yuw-button>`'s `buttons` input
+ * which drops projected content when set. `content`/`footer` render their own region; anything
+ * projected still renders, so a data-driven nav can sit alongside a hand-written block. To place
+ * extra markup *inside* the object-rendered regions — where it scrolls with the nav and inherits the
+ * content area's flex sizing — mark it `[yuwSidebarContentExtra]` or `[yuwSidebarFooterExtra]`; the
+ * default slot keeps everything else, so existing projection-only usage is unaffected.
+ *
+ * `header` has no object form: it is a free-form branding area with no repeating structure to model.
  *
  * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
  * them): `HlmSidebarMenuAction`, `HlmSidebarMenuSkeleton`, `HlmSidebarInput` and
@@ -2570,6 +2698,29 @@ type YuwSidebarCollapsibleDto = 'offcanvas' | 'icon' | 'none';
  *   </div>
  * </yuw-sidebar>
  * ```
+ *
+ * Object form:
+ * ```html
+ * <yuw-sidebar collapsible="icon" [content]="nav" [footer]="footerNav"
+ *              (itemClicked)="onAction($event.id)">
+ *   <div yuwSidebarHeader>Yurest</div>
+ * </yuw-sidebar>
+ * ```
+ * ```ts
+ * nav: YuwSidebarContentDto = {
+ *   groups: [{
+ *     id: 'management',
+ *     label: 'Gestión',
+ *     items: [
+ *       {id: 'orders', label: 'Pedidos', icon: 'lucideReceipt', route: '/orders', badge: '12'},
+ *       {id: 'reports', label: 'Informes', icon: 'lucideChartLine', children: [
+ *         {id: 'sales', label: 'Ventas', route: '/reports/sales'},
+ *       ]},
+ *       {id: 'sync', label: 'Sincronizar'},
+ *     ],
+ *   }],
+ * };
+ * ```
  */
 declare class YuwSidebarComponent {
     private readonly config;
@@ -2578,8 +2729,11 @@ declare class YuwSidebarComponent {
     readonly collapsible: _angular_core.InputSignal<YuwSidebarCollapsibleDto>;
     readonly sidebarWidthMobile: _angular_core.InputSignal<string>;
     readonly sidebarContainerClass: _angular_core.InputSignal<string>;
+    readonly content: _angular_core.InputSignal<YuwSidebarContentDto | undefined>;
+    readonly footer: _angular_core.InputSignal<YuwSidebarContentDto | undefined>;
+    readonly itemClicked: _angular_core.OutputEmitterRef<YuwSidebarItemClickDto>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSidebarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSidebarComponent, "yuw-sidebar", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "sidebarWidthMobile": { "alias": "sidebarWidthMobile"; "required": false; "isSignal": true; }; "sidebarContainerClass": { "alias": "sidebarContainerClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSidebarComponent, "yuw-sidebar", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "sidebarWidthMobile": { "alias": "sidebarWidthMobile"; "required": false; "isSignal": true; }; "sidebarContainerClass": { "alias": "sidebarContainerClass"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, ["[yuwSidebarHeader], yuw-sidebar-header", "[yuwSidebarContentExtra]", "*", "[yuwSidebarFooterExtra]"], true, never>;
 }
 
 /**
@@ -2670,6 +2824,23 @@ declare class YuwSidebarMenuDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSidebarMenuDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarMenuDirective, "ul[yuwSidebarMenu]", never, {}, {}, never, never, true, [{ directive: typeof i1$d.HlmSidebarMenu; inputs: {}; outputs: {}; }]>;
 }
+/**
+ * Marks projected markup that belongs *inside* the region `<yuw-sidebar>` renders from its `content`
+ * input, after the object-driven groups — a hand-written group alongside a data-driven nav.
+ *
+ * Only meaningful when `content` is set; without it the marker is inert and the element falls
+ * through to the default slot like any other projected node. Carries no styling of its own: it is a
+ * projection selector, and whatever it is applied to (usually a `[yuwSidebarGroup]`) keeps its own.
+ */
+declare class YuwSidebarContentExtraDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSidebarContentExtraDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarContentExtraDirective, "[yuwSidebarContentExtra]", never, {}, {}, never, never, true, never>;
+}
+/** The `footer` counterpart of {@link YuwSidebarContentExtraDirective}. */
+declare class YuwSidebarFooterExtraDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSidebarFooterExtraDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarFooterExtraDirective, "[yuwSidebarFooterExtra]", never, {}, {}, never, never, true, never>;
+}
 /** A single entry of a sidebar menu. Apply to an `<li>`. */
 declare class YuwSidebarMenuItemDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSidebarMenuItemDirective, never>;
@@ -2681,9 +2852,17 @@ declare class YuwSidebarMenuItemDirective {
  *
  * To label the item while the sidebar is collapsed to icons, add Spartan's `tooltip` input
  * alongside this directive — it comes from the underlying menu-button primitive and is only shown
- * in the collapsed state.
+ * in the collapsed state. It cannot be re-forwarded through this wrapper's `hostDirectives`
+ * (`tooltip` is the alias `HlmSidebarMenuButton` gives its own composed `BrnTooltip`, not a public
+ * input of its own), so bind it with `[attr.tooltip]` rather than `[tooltip]` when the value comes
+ * from an expression.
+ *
+ * Carries `yuwSidebarMenuButtonClass`, our hover/expanded colouring and collapsed-to-icon geometry.
+ * The `classes()` registration below runs after the composed `HlmSidebarMenuButton`'s own, so our
+ * classes merge last and win — see `sidebar.variants.ts`.
  */
 declare class YuwSidebarMenuButtonDirective {
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSidebarMenuButtonDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarMenuButtonDirective, "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", never, {}, {}, never, never, true, [{ directive: typeof i1$d.HlmSidebarMenuButton; inputs: { "variant": "variant"; "size": "size"; "isActive": "isActive"; "closeMobileSidebarOnClick": "closeMobileSidebarOnClick"; }; outputs: {}; }]>;
 }
@@ -2728,5 +2907,5 @@ declare class YuwSidebarInsetDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarInsetDirective, "main[yuwSidebarInset]", never, {}, {}, never, never, true, [{ directive: typeof i1$d.HlmSidebarInset; inputs: {}; outputs: {}; }]>;
 }
 
-export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
-export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupEntryDto, YuwButtonGroupItemDto, YuwButtonGroupTextDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatepickerModeDto, YuwDatepickerValue, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetSideDto, YuwSidebarCollapsibleDto, YuwSidebarSideDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };
+export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupEntryDto, YuwButtonGroupItemDto, YuwButtonGroupTextDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatepickerModeDto, YuwDatepickerValue, YuwFieldSizeDto, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetSideDto, YuwSidebarCollapsibleDto, YuwSidebarContentDto, YuwSidebarGroupDto, YuwSidebarItemClickDto, YuwSidebarItemDto, YuwSidebarSideDto, YuwSidebarSubItemDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };