@tekus/design-system 5.26.0 → 5.28.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.26.0",
+  "version": "5.28.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -48,6 +48,10 @@
       "types": "./types/tekus-design-system-components-badge.d.ts",
       "default": "./fesm2022/tekus-design-system-components-badge.mjs"
     },
+    "./components/bread-crumps": {
+      "types": "./types/tekus-design-system-components-bread-crumps.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-bread-crumps.mjs"
+    },
     "./components/button": {
       "types": "./types/tekus-design-system-components-button.d.ts",
       "default": "./fesm2022/tekus-design-system-components-button.mjs"
@@ -72,6 +76,10 @@
       "types": "./types/tekus-design-system-components-drawer.d.ts",
       "default": "./fesm2022/tekus-design-system-components-drawer.mjs"
     },
+    "./components/dropdown": {
+      "types": "./types/tekus-design-system-components-dropdown.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-dropdown.mjs"
+    },
     "./components/fallback-view": {
       "types": "./types/tekus-design-system-components-fallback-view.d.ts",
       "default": "./fesm2022/tekus-design-system-components-fallback-view.mjs"
@@ -88,6 +96,14 @@
       "types": "./types/tekus-design-system-components-input-text.d.ts",
       "default": "./fesm2022/tekus-design-system-components-input-text.mjs"
     },
+    "./components/menu": {
+      "types": "./types/tekus-design-system-components-menu.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-menu.mjs"
+    },
+    "./components/message": {
+      "types": "./types/tekus-design-system-components-message.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-message.mjs"
+    },
     "./components/modal": {
       "types": "./types/tekus-design-system-components-modal.d.ts",
       "default": "./fesm2022/tekus-design-system-components-modal.mjs"
@@ -104,6 +120,10 @@
       "types": "./types/tekus-design-system-components-panel.d.ts",
       "default": "./fesm2022/tekus-design-system-components-panel.mjs"
     },
+    "./components/panel-menu": {
+      "types": "./types/tekus-design-system-components-panel-menu.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-panel-menu.mjs"
+    },
     "./components/progress-bar": {
       "types": "./types/tekus-design-system-components-progress-bar.d.ts",
       "default": "./fesm2022/tekus-design-system-components-progress-bar.mjs"
@@ -116,6 +136,10 @@
       "types": "./types/tekus-design-system-components-select.d.ts",
       "default": "./fesm2022/tekus-design-system-components-select.mjs"
     },
+    "./components/sidebar-layout": {
+      "types": "./types/tekus-design-system-components-sidebar-layout.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-sidebar-layout.mjs"
+    },
     "./components/status-bar": {
       "types": "./types/tekus-design-system-components-status-bar.d.ts",
       "default": "./fesm2022/tekus-design-system-components-status-bar.mjs"
@@ -140,6 +164,10 @@
       "types": "./types/tekus-design-system-components-toast.d.ts",
       "default": "./fesm2022/tekus-design-system-components-toast.mjs"
     },
+    "./components/toggle": {
+      "types": "./types/tekus-design-system-components-toggle.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-toggle.mjs"
+    },
     "./components/toolbar": {
       "types": "./types/tekus-design-system-components-toolbar.d.ts",
       "default": "./fesm2022/tekus-design-system-components-toolbar.mjs"

package/styles/variables.css

@@ -23,6 +23,17 @@
   --tk-color-base-surface-900: #222324;
   --tk-color-base-surface-950: #191a1b;
   --tk-color-base-surface-1000: #000000;
+  --tk-color-base-accent-50: #edfcf9;
+  --tk-color-base-accent-100: #d4f7f0;
+  --tk-color-base-accent-200: #acecdf;
+  --tk-color-base-accent-300: #8ee1d0;
+  --tk-color-base-accent-400: #7dd8c6;
+  --tk-color-base-accent-500: #6ad0bc;
+  --tk-color-base-accent-600: #3bc4a9;
+  --tk-color-base-accent-700: #2b9c85;
+  --tk-color-base-accent-800: #1d7261;
+  --tk-color-base-accent-900: #114a3f;
+  --tk-color-base-accent-950: #0a2e27;
   --tk-color-base-red-50: #feede8;
   --tk-color-base-red-100: #ffddd4;
   --tk-color-base-red-200: #fbc2b4;
@@ -82,16 +93,21 @@
   --tk-color-background-soft: var(--tk-color-base-surface-100);
   --tk-color-background-medium: var(--tk-color-base-surface-300);
   --tk-color-background-inverse: var(--tk-color-base-surface-950);
+  --tk-color-background-strong: var(--tk-color-base-surface-500);
+  --tk-color-background-bold: var(--tk-color-base-surface-700);
   --tk-color-text-default: var(--tk-color-base-surface-950);
   --tk-color-text-muted: var(--tk-color-base-surface-500);
-  --tk-color-text-inverted: #ffffff;
-  --tk-color-text-inverse: var(--tk-color-base-surface-0);
   --tk-color-text-subtle: var(--tk-color-base-surface-600);
   --tk-color-text-surface: var(--tk-color-base-surface-400);
+  --tk-color-text-inverse: var(--tk-color-base-surface-0);
+  --tk-color-text-inverted: var(--tk-color-base-surface-0);
   --tk-color-transparent: #ffffff00;
-  --tk-color-accent-default: var(--tk-color-base-primary-500);
-  --tk-color-accent-muted: var(--tk-color-base-primary-100);
-  --tk-color-accent-strong: var(--tk-color-base-primary-700);
+  --tk-color-primary-default: var(--tk-color-base-primary-500);
+  --tk-color-primary-muted: var(--tk-color-base-primary-100);
+  --tk-color-primary-strong: var(--tk-color-base-primary-700);
+  --tk-color-accent-default: var(--tk-color-base-accent-500);
+  --tk-color-accent-muted: var(--tk-color-base-accent-100);
+  --tk-color-accent-strong: var(--tk-color-base-accent-700);
   --tk-color-feedback-danger-default: var(--tk-color-base-red-500);
   --tk-color-feedback-danger-muted: var(--tk-color-base-red-100);
   --tk-color-feedback-danger-strong: var(--tk-color-base-red-700);
@@ -105,6 +121,9 @@
   --tk-color-feedback-info-muted: var(--tk-color-base-sky-100);
   --tk-color-feedback-info-strong: var(--tk-color-base-sky-700);
   --tk-color-border-default: var(--tk-color-base-surface-400);
+  --tk-color-border-subtle: var(--tk-color-base-surface-200);
+  --tk-color-border-strong: var(--tk-color-base-surface-600);
+  --tk-color-border-focus: var(--tk-color-primary-default);
   --tk-spacing-base-0: 0rem;
   --tk-spacing-base-25: 0.25rem;
   --tk-spacing-base-50: 0.5rem;
@@ -118,23 +137,16 @@
   --tk-spacing-base-400: 4rem;
   --tk-spacing-base-500: 5rem;
   --tk-spacing-base-600: 6rem;
-  --tk-spacing-base-700: 2rem;
   --tk-spacing-base-800: 8rem;
-  --tk-spacing-base-900: 3rem;
-  --tk-spacing-paddingX-none: var(--tk-spacing-base-0);
-  --tk-spacing-paddingX-xs: var(--tk-spacing-base-25);
-  --tk-spacing-paddingX-s: var(--tk-spacing-base-50);
-  --tk-spacing-paddingX-m: var(--tk-spacing-base-100);
-  --tk-spacing-paddingX-l: var(--tk-spacing-base-125);
-  --tk-spacing-paddingX-xl: var(--tk-spacing-base-150);
-  --tk-spacing-paddingY-none: var(--tk-spacing-base-0);
-  --tk-spacing-paddingY-xs: var(--tk-spacing-base-25);
-  --tk-spacing-paddingY-s: var(--tk-spacing-base-50);
-  --tk-spacing-paddingY-m: var(--tk-spacing-base-100);
-  --tk-spacing-paddingY-l: var(--tk-spacing-base-125);
-  --tk-spacing-paddingY-xl: var(--tk-spacing-base-150);
+  --tk-spacing-padding-none: var(--tk-spacing-base-0);
+  --tk-spacing-padding-xs: var(--tk-spacing-base-25);
+  --tk-spacing-padding-s: var(--tk-spacing-base-50);
+  --tk-spacing-padding-m: var(--tk-spacing-base-100);
+  --tk-spacing-padding-l: var(--tk-spacing-base-125);
+  --tk-spacing-padding-xl: var(--tk-spacing-base-150);
   --tk-spacing-gap-none: var(--tk-spacing-base-0);
-  --tk-spacing-gap-s: var(--tk-spacing-base-25);
+  --tk-spacing-gap-xs: var(--tk-spacing-base-25);
+  --tk-spacing-gap-s: var(--tk-spacing-base-50);
   --tk-spacing-gap-m: var(--tk-spacing-base-100);
   --tk-spacing-gap-l: var(--tk-spacing-base-150);
   --tk-spacing-gap-xl: var(--tk-spacing-base-250);
@@ -151,15 +163,15 @@
   --tk-font-size-base-175: 1.75rem;
   --tk-font-size-base-200: 2rem;
   --tk-font-size-base-250: 2.5rem;
-  --tk-font-size-paragraph-m: var(--tk-font-size-base-100);
   --tk-font-size-paragraph-s: var(--tk-font-size-base-88);
+  --tk-font-size-paragraph-m: var(--tk-font-size-base-100);
   --tk-font-size-paragraph-l: var(--tk-font-size-base-113);
-  --tk-font-size-headers-l: var(--tk-font-size-base-200);
-  --tk-font-size-headers-m: var(--tk-font-size-base-150);
   --tk-font-size-headers-s: var(--tk-font-size-base-113);
+  --tk-font-size-headers-m: var(--tk-font-size-base-150);
+  --tk-font-size-headers-l: var(--tk-font-size-base-200);
   --tk-font-size-headers-xl: var(--tk-font-size-base-250);
-  --tk-font-size-legal-m: var(--tk-font-size-base-75);
   --tk-font-size-legal-s: var(--tk-font-size-base-63);
+  --tk-font-size-legal-m: var(--tk-font-size-base-75);
   --tk-size-base-0: 0rem;
   --tk-size-base-50: 0.5rem;
   --tk-size-base-100: 1rem;
@@ -172,9 +184,10 @@
   --tk-size-base-4000: 40rem;
   --tk-size-base-4500: 45rem;
   --tk-size-base-6400: 64rem;
-  --tk-borderRadius-m: 1rem;
   --tk-borderRadius-null: 0rem;
+  --tk-borderRadius-xs: 0.25rem;
   --tk-borderRadius-s: 0.5rem;
+  --tk-borderRadius-m: 1rem;
   --tk-borderRadius-l: 1.5rem;
   --tk-borderRadius-full: 62.4375rem;
 }

package/types/tekus-design-system-components-badge.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 
-type BadgeSeverity = 'secondary' | 'primary' | 'contrast';
+type BadgeSeverity = 'secondary' | 'primary' | 'contrast' | 'danger';
 /**
  * @component BadgeComponent
  * @description
@@ -9,13 +9,14 @@ type BadgeSeverity = 'secondary' | 'primary' | 'contrast';
  *
  * This component supports:
  * - `value`: The text content to be displayed in the badge
- * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast'`
+ * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast' | 'danger'`
  * - Automatically maps severity values to PrimeNG's badge styles
  *
  * @usage
  * ### Basic Usage
  * ```html
  * <tk-badge value="5" severity="primary"></tk-badge>
+ *  ```
  * */
 declare class BadgeComponent {
     /** The text content to be displayed in the badge. */
@@ -29,7 +30,7 @@ declare class BadgeComponent {
      * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.
      * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.
      */
-    primeSeverity: _angular_core.Signal<"secondary" | "contrast" | "success">;
+    primeSeverity: _angular_core.Signal<"secondary" | "contrast" | "danger" | "success">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "tk-badge", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/tekus-design-system-components-bread-crumps.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+interface BreadCrumpItem {
+    label: string;
+    url?: string;
+}
+
+declare class BreadCrumpsComponent {
+    private readonly router;
+    /** Optional manual items. If provided, route listening is ignored. */
+    items: _angular_core.InputSignal<BreadCrumpItem[] | null>;
+    /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'small'. */
+    size: _angular_core.InputSignal<"small" | "large">;
+    /** If true, only the current (last) item will be displayed. */
+    onlyCurrent: _angular_core.InputSignal<boolean>;
+    /** Signal that updates on every successful navigation */
+    private readonly navigationEnd;
+    /** Computed list of breadcrumbs derived from the current route state */
+    routeItems: _angular_core.Signal<BreadCrumpItem[]>;
+    private buildBreadcrumbs;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadCrumpsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadCrumpsComponent, "tk-bread-crumps", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "onlyCurrent": { "alias": "onlyCurrent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BreadCrumpsComponent };
+export type { BreadCrumpItem };

package/types/tekus-design-system-components-dropdown.d.ts

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import { Popover } from 'primeng/popover';
+import { MenuItem } from 'primeng/api';
+import { TooltipPosition } from '@tekus/design-system/components/tooltip';
+
+/**
+ * @component DropdownComponent
+ * @description
+ * A dropdown component that acts as a context menu or "more options" button.
+ * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,
+ * and a `tk-menu` for the list of options.
+ *
+ * @usage
+ * ```html
+ * <tk-dropdown [model]="items"></tk-dropdown>
+ * ```
+ */
+declare class DropdownComponent {
+    /**
+     * Reference to the PrimeNG Popover component instance.
+     */
+    popover: _angular_core.Signal<Popover | undefined>;
+    /**
+     * An array of menu items to display.
+     */
+    model: _angular_core.InputSignal<MenuItem[]>;
+    /**
+     * Icon for the trigger button.
+     * @default 'ellipsis-vertical'
+     */
+    icon: _angular_core.InputSignal<string>;
+    /**
+     * Size of the trigger button.
+     * @default undefined
+     */
+    size: _angular_core.InputSignal<"small" | "large" | undefined>;
+    /**
+     * Optional tooltip text for the trigger button.
+     */
+    tooltip: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Position of the tooltip.
+     * @default 'top'
+     */
+    tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
+    /**
+     * Toggles the popover visibility.
+     * @param event The event that triggered the toggle.
+     */
+    toggle(event: Event): void;
+    /**
+     * Closes the popover when an item is clicked.
+     */
+    onItemClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tk-dropdown", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DropdownComponent };

package/types/tekus-design-system-components-menu.d.ts

@@ -0,0 +1,71 @@
+import * as _angular_core from '@angular/core';
+import { Menu } from 'primeng/menu';
+import { MenuItem } from 'primeng/api';
+
+declare class MenuComponent {
+    /**
+     * Reference to the PrimeNG Menu component instance.
+     */
+    pMenu: _angular_core.Signal<Menu | undefined>;
+    /**
+     * An array of menu items to display.
+     */
+    model: _angular_core.InputSignal<MenuItem[]>;
+    /**
+     * Whether the menu is a popup.
+     */
+    popup: _angular_core.InputSignal<boolean>;
+    /**
+     * Target element to attach the overlay.
+     */
+    appendTo: _angular_core.InputSignal<string | HTMLElement | undefined>;
+    /**
+     * The visual variant of the menu.
+     * 'default' (light background) or 'inverse' (dark background).
+     */
+    variant: _angular_core.InputSignal<"default" | "inverse">;
+    /**
+     * Additional style class for the menu.
+     */
+    styleClass: _angular_core.InputSignal<string>;
+    /**
+     * Event emitted when a menu item is clicked.
+     */
+    itemClick: _angular_core.OutputEmitterRef<{
+        event: Event;
+        item: MenuItem;
+    }>;
+    /**
+     * Set of expanded item labels or IDs.
+     */
+    expandedItems: _angular_core.WritableSignal<Set<string>>;
+    /**
+     * Currently selected item ID or label.
+     */
+    selectedId: _angular_core.WritableSignal<string | null>;
+    /**
+     * Computed visible model for PrimeNG menu.
+     * It flattens the input model to support interactive sub-menus in a flat list.
+     */
+    visibleModel: _angular_core.Signal<MenuItem[]>;
+    /**
+     * Handles the click event on a menu item.
+     */
+    handleItemClick(event: Event, item: MenuItem): void;
+    /**
+     * Checks if an item is currently selected.
+     */
+    isSelected(item: MenuItem): boolean;
+    /**
+     * Checks if an item is currently expanded.
+     */
+    isExpanded(item: MenuItem): boolean;
+    /**
+     * Toggles the menu visibility for popup mode.
+     */
+    toggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "tk-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "popup": { "alias": "popup"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+export { MenuComponent };

package/types/tekus-design-system-components-message.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * @component MessageComponent
+ * @description
+ * Custom notification banner component that wraps PrimeNG p-message.
+ * Supports info, warn, error, and success severities with design system tokens.
+ *
+ * @usage
+ * ```html
+ * <tk-message severity="info" [closable]="true">
+ *   Este es un mensaje informativo con un <a href="#">enlace</a>.
+ * </tk-message>
+ * ```
+ */
+declare class MessageComponent {
+    /**
+     * Severity of the message.
+     * Options: 'info' | 'success' | 'warn' | 'error'
+     */
+    severity: _angular_core.InputSignal<"info" | "success" | "warn" | "error">;
+    /**
+     * Whether the message can be closed by the user.
+     */
+    closable: _angular_core.InputSignal<boolean>;
+    /**
+     * Event emitted when the message is closed.
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Internal state to manage visibility.
+     */
+    visible: _angular_core.WritableSignal<boolean>;
+    /**
+     * Maps severity to the corresponding design system icon.
+     */
+    iconName: _angular_core.Signal<"circle-check" | "circle-xmark" | "triangle-exclamation" | "circle-info">;
+    /**
+     * Maps severity to the corresponding design system icon style.
+     */
+    iconStyle: _angular_core.Signal<"regular" | "solid">;
+    /**
+     * Closes the message.
+     */
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MessageComponent, "tk-message", never, { "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+export { MessageComponent };

package/types/tekus-design-system-components-panel-menu.d.ts

@@ -0,0 +1,20 @@
+import * as _angular_core from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+declare class PanelMenuComponent {
+    model: _angular_core.InputSignal<MenuItem[]>;
+    variant: _angular_core.InputSignal<"default" | "inverse">;
+    multiple: _angular_core.InputSignal<boolean>;
+    styleClass: _angular_core.InputSignal<string>;
+    itemClick: _angular_core.OutputEmitterRef<{
+        event: Event;
+        item: MenuItem;
+    }>;
+    selectedItem: _angular_core.WritableSignal<MenuItem | null>;
+    onItemClick(event: Event, item: MenuItem): void;
+    isSelected(item: MenuItem): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PanelMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PanelMenuComponent, "tk-panel-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+export { PanelMenuComponent };

package/types/tekus-design-system-components-panel.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { BadgeSeverity } from '@tekus/design-system/components/badge';
 
 /**
  * @component PanelComponent
@@ -28,6 +29,38 @@ declare class PanelComponent {
      * @default undefined
      */
     header: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {string | number} badge
+     * @description
+     * Optional badge value to display in the header.
+     *
+     * @default undefined
+     */
+    badge: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @property {BadgeSeverity} badgeSeverity
+     * @description
+     * Severity of the badge.
+     *
+     * @default 'danger'
+     */
+    badgeSeverity: _angular_core.InputSignal<BadgeSeverity>;
+    /**
+     * @property {string} helpIcon
+     * @description
+     * The name of the icon to display for information/help.
+     *
+     * @default 'circle-question'
+     */
+    helpIcon: _angular_core.InputSignal<string>;
+    /**
+     * @property {string} helpText
+     * @description
+     * Optional help text to display as a tooltip on a help icon in the header.
+     *
+     * @default undefined
+     */
+    helpText: _angular_core.InputSignal<string | undefined>;
     /**
      * @property {boolean} toggleable
      * @description
@@ -68,10 +101,10 @@ declare class PanelComponent {
      * @param event - The toggle event from PrimeNG panel
      */
     handleToggle(event: {
-        collapsed: boolean | undefined;
+        collapsed?: boolean;
     }): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeSeverity": { "alias": "badgeSeverity"; "required": false; "isSignal": true; }; "helpIcon": { "alias": "helpIcon"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
 }
 
 export { PanelComponent };

package/types/tekus-design-system-components-sidebar-layout.d.ts

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { MenuItem } from 'primeng/api';
+
+declare class SidebarLayoutComponent implements OnInit, OnDestroy {
+    private readonly sidebarService;
+    private readonly breakpointObserver;
+    private readonly cdr;
+    private readonly subscription;
+    /**
+     * Breakpoint constants
+     */
+    private readonly TABLET_BREAKPOINT;
+    private readonly MOBILE_BREAKPOINT;
+    /**
+     * Optional manual control of the collapsed state.
+     * If provided, it overrides the service state.
+     */
+    isCollapsed: i0.InputSignal<boolean | undefined>;
+    /**
+     * Emitted when the collapsed state changes.
+     */
+    collapsedChange: i0.OutputEmitterRef<boolean>;
+    /**
+     * Internal state of the sidebar.
+     */
+    collapsed: boolean;
+    /**
+     * Responsive states
+     */
+    isTablet: boolean;
+    isMobile: boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Determines if the sidebar is currently collapsed.
+     */
+    get displayCollapsed(): boolean;
+    /**
+     * Toggles the sidebar state.
+     */
+    toggleSidebar(): void;
+    /**
+     * Closes the sidebar explicitly.
+     */
+    closeSidebar(): void;
+    /**
+     * Handles clicks in the sidebar content to auto-close on mobile.
+     * Using HostListener to avoid template accessibility linting on non-interactive aside.
+     */
+    handleSidebarContentClick(event: MouseEvent): void;
+    /**
+     * Handles backdrop clicks to close the drawer.
+     */
+    handleBackdropClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarLayoutComponent, "tk-sidebar-layout", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "collapsedChange": "collapsedChange"; }, never, ["[sidebar-content]", "[header-actions]", "*"], true, never>;
+}
+
+declare class SidebarService {
+    private readonly collapsedSubject;
+    /**
+     * Observable to track the collapsed state of the sidebar.
+     */
+    isCollapsed$: rxjs.Observable<boolean>;
+    /**
+     * Toggles the collapsed state of the sidebar.
+     */
+    toggle(): void;
+    /**
+     * Explicitly sets the collapsed state of the sidebar.
+     * @param value True to collapse, false to expand.
+     */
+    setCollapsed(value: boolean): void;
+    /**
+     * Gets the current collapsed state.
+     */
+    get isCollapsed(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SidebarService>;
+}
+
+/**
+ * NavItem extends PrimeNG's MenuItem to provide a consistent interface
+ * for the SidebarLayout navigation.
+ */
+interface NavItem extends MenuItem {
+    label?: string;
+    icon?: string;
+    routerLink?: string;
+    items?: NavItem[];
+}
+
+export { SidebarLayoutComponent, SidebarService };
+export type { NavItem };

package/types/tekus-design-system-components-toggle.d.ts

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
+
+declare class ToggleComponent implements ControlValueAccessor, OnInit {
+    readonly ngControl: NgControl | null;
+    private readonly destroyRef;
+    constructor();
+    model: _angular_core.ModelSignal<boolean>;
+    label: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string>;
+    inputId: _angular_core.InputSignal<string>;
+    control: _angular_core.InputSignal<FormControl<any>>;
+    errorMessage: _angular_core.InputSignal<string>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    get effectiveControl(): FormControl;
+    onChange: (value: boolean) => void;
+    onTouched: () => void;
+    ngOnInit(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onModelChange(value: boolean): void;
+    onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "tk-toggle", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+}
+
+export { ToggleComponent };