@tekus/design-system 5.26.0 → 5.27.0

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-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-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 };