@lumaui/angular 0.2.3 → 0.3.3

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lumaui/angular",
-  "version": "0.2.3",
+  "version": "0.3.3",
   "description": "Angular components for Luma UI - Neo-Minimal design system",
   "dependencies": {
-    "@lumaui/core": "^0.2.1",
-    "@lumaui/tokens": "^0.2.0",
+    "@lumaui/core": "^0.3.1",
+    "@lumaui/tokens": "^0.3.2",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

package/types/lumaui-angular.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Signal, OnDestroy, WritableSignal, ElementRef, OnInit, AfterViewInit } from '@angular/core';
-import { ButtonVariant, ButtonSize, CardVariant, CardTitleSize, CardDescriptionSize, AccordionItemVariant, AccordionTitleSize, TooltipPosition, TabsStyle, ToastPosition as ToastPosition$1, ToastVariant as ToastVariant$1 } from '@lumaui/core';
+import { InjectionToken, Signal, OnDestroy, WritableSignal, AfterViewInit, ElementRef, OnInit } from '@angular/core';
+import { ButtonVariant, ButtonSize, ButtonRadius, BadgeVariant, BadgeRadius, CardVariant, CardTitleSize, CardDescriptionSize, AccordionItemVariant, AccordionTitleSize, TooltipPosition, TabsVariant, ToastPosition as ToastPosition$1, ToastVariant as ToastVariant$1 } from '@lumaui/core';
 export { ToastCloseVariants, ToastContainerVariants, ToastIconVariants, ToastItemVariants, ToastState } from '@lumaui/core';
 import * as _lumaui_angular from '@lumaui/angular';
 import { Observable } from 'rxjs';
@@ -8,32 +8,33 @@ import { Observable } from 'rxjs';
 declare class LmButtonDirective {
     lmVariant: _angular_core.InputSignal<ButtonVariant>;
     lmSize: _angular_core.InputSignal<ButtonSize>;
+    lmRadius: _angular_core.InputSignal<ButtonRadius>;
     lmDisabled: _angular_core.InputSignal<boolean>;
     lmType: _angular_core.InputSignal<"button" | "submit" | "reset">;
     classes: _angular_core.Signal<string>;
     get hostClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LmButtonDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmButtonDirective, "button[lumaButton], a[lumaButton]", never, { "lmVariant": { "alias": "lmVariant"; "required": false; "isSignal": true; }; "lmSize": { "alias": "lmSize"; "required": false; "isSignal": true; }; "lmDisabled": { "alias": "lmDisabled"; "required": false; "isSignal": true; }; "lmType": { "alias": "lmType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmButtonDirective, "button[lumaButton], a[lumaButton]", never, { "lmVariant": { "alias": "lmVariant"; "required": false; "isSignal": true; }; "lmSize": { "alias": "lmSize"; "required": false; "isSignal": true; }; "lmRadius": { "alias": "lmRadius"; "required": false; "isSignal": true; }; "lmDisabled": { "alias": "lmDisabled"; "required": false; "isSignal": true; }; "lmType": { "alias": "lmType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class LmBadgeDirective {
+    lmVariant: _angular_core.InputSignal<BadgeVariant>;
+    lmRadius: _angular_core.InputSignal<BadgeRadius>;
     classes: _angular_core.Signal<string>;
     get hostClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LmBadgeDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmBadgeDirective, "[lumaBadge]", never, {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmBadgeDirective, "[lumaBadge]", never, { "lmVariant": { "alias": "lmVariant"; "required": false; "isSignal": true; }; "lmRadius": { "alias": "lmRadius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class LmCardComponent {
     /**
      * Card visual style variant
-     * - default: Gradient border wrapper style (default)
-     * - shadow: Elevated card with shadow for primary content
-     * - nested: Subtle background for sections within cards
-     * - preview: For documentation examples
+     * - default: Simple border card
+     * - elevated: Card with shadow elevation
+     * - subtle: Muted background card
      */
     lmVariant: _angular_core.InputSignal<CardVariant>;
-    wrapperClasses: _angular_core.Signal<string>;
-    contentClasses: _angular_core.Signal<string>;
+    classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LmCardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LmCardComponent, "luma-card", never, { "lmVariant": { "alias": "lmVariant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -53,11 +54,13 @@ declare class LmCardDescriptionDirective {
 }
 
 declare class LmCardHeaderDirective {
+    classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LmCardHeaderDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmCardHeaderDirective, "[lumaCardHeader]", never, {}, {}, never, never, true, never>;
 }
 
 declare class LmCardContentDirective {
+    classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LmCardContentDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmCardContentDirective, "[lumaCardContent]", never, {}, {}, never, never, true, never>;
 }
@@ -339,6 +342,8 @@ declare class LmTooltipDirective implements OnDestroy {
     private el;
     private renderer;
     private platformId;
+    private document;
+    private ngZone;
     lumaTooltip: _angular_core.InputSignal<string>;
     lmPosition: _angular_core.InputSignal<TooltipPosition>;
     lmHtml: _angular_core.InputSignal<boolean>;
@@ -349,11 +354,17 @@ declare class LmTooltipDirective implements OnDestroy {
     tooltipId: string;
     private tooltipElement;
     private showTimeout;
+    private scrollListener;
+    private resizeListener;
+    private captureScrollHandler;
     classes: _angular_core.Signal<string>;
     constructor();
     private ensureTooltipElement;
     private updateContent;
     private updateClasses;
+    private updatePosition;
+    private addPositionListeners;
+    private removePositionListeners;
     private isTouchDevice;
     private getFlippedPosition;
     onMouseEnter(): void;
@@ -376,7 +387,7 @@ interface TabsGroupBase {
     /** Currently selected tab value */
     value: WritableSignal<string | null>;
     /** Visual style of the tabs (underline, background, pill) */
-    lmVariant: Signal<TabsStyle>;
+    lmVariant: Signal<TabsVariant>;
     /** Whether to lazy load panel content */
     lmLazy: Signal<boolean>;
     /** Select a tab by value */
@@ -403,6 +414,8 @@ interface TabsListBase {
     };
     /** Get the currently active trigger element */
     getActiveTrigger(): HTMLElement | null;
+    /** Get the element that acts as the semantic tablist container */
+    getListContainer(): HTMLElement;
 }
 /**
  * Injection token for tabs group
@@ -439,7 +452,7 @@ declare class LmTabsComponent implements TabsGroupBase {
     /** Default value for uncontrolled mode */
     lmDefaultValue: _angular_core.InputSignal<string>;
     /** Visual style: underline, background, or pill */
-    lmVariant: _angular_core.InputSignal<TabsStyle>;
+    lmVariant: _angular_core.InputSignal<TabsVariant>;
     /** Whether to lazy load panel content */
     lmLazy: _angular_core.InputSignal<boolean>;
     /** Emits when selected tab changes */
@@ -490,10 +503,11 @@ declare class LmTabsComponent implements TabsGroupBase {
 }
 
 /**
- * Tabs list directive
+ * Tabs list component
  *
  * Container for tab triggers with role="tablist".
  * Provides context for the indicator component.
+ * Supports horizontal scrolling with arrow navigation.
  *
  * @example
  * ```html
@@ -502,23 +516,77 @@ declare class LmTabsComponent implements TabsGroupBase {
  *   <button lumaTabsTrigger="tab-2">Tab 2</button>
  * </div>
  * ```
+ *
+ * @example
+ * ```html
+ * <div lumaTabsList [lmScrollable]="true">
+ *   <button lumaTabsTrigger="tab-1">Tab 1</button>
+ *   <!-- ... many more tabs -->
+ * </div>
+ * ```
  */
-declare class LmTabsListDirective implements TabsListBase {
+declare class LmTabsListDirective implements TabsListBase, AfterViewInit, OnDestroy {
     readonly elementRef: ElementRef<any>;
     protected readonly tabsGroup: _lumaui_angular.TabsGroupBase;
+    private readonly platformId;
+    /** Reference to the scroll container */
+    scrollContainerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     /** Whether horizontal scrolling is enabled */
-    lmScrollable: boolean;
-    classes: _angular_core.Signal<string>;
+    lmScrollable: _angular_core.InputSignal<boolean>;
+    /** Whether to show scroll arrows */
+    showArrows: _angular_core.WritableSignal<boolean>;
+    showLeftArrow: _angular_core.WritableSignal<boolean>;
+    showRightArrow: _angular_core.WritableSignal<boolean>;
+    /** ResizeObserver for overflow detection */
+    private resizeObserver?;
+    /** Debounce timeout for ResizeObserver */
+    private resizeTimeout?;
+    /** Throttle timeout for scroll events */
+    private scrollTimeout?;
+    /** Host element classes */
+    hostClasses: _angular_core.Signal<string>;
+    /** Scroll container classes */
+    scrollContainerClasses: _angular_core.Signal<string[]>;
+    /** Left arrow button classes */
+    leftArrowClasses: _angular_core.Signal<string>;
+    /** Right arrow button classes */
+    rightArrowClasses: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     /**
      * Get the currently active trigger element
      */
     getActiveTrigger(): HTMLElement | null;
+    /**
+     * Get the element that acts as the semantic tablist container.
+     * When scrollable, this is the inner scroll container (which has role="tablist").
+     * When non-scrollable, this is the host element itself.
+     */
+    getListContainer(): HTMLElement;
+    /**
+     * Scroll to the next set of tabs (85% of container width)
+     */
+    scrollNext(): void;
+    /**
+     * Scroll to the previous set of tabs (85% of container width)
+     */
+    scrollPrevious(): void;
+    /**
+     * Handle scroll event to update arrow states (throttled)
+     */
+    onScroll(): void;
     /**
      * Handle mouse wheel for horizontal scroll
      */
     onWheel(event: WheelEvent): void;
+    /**
+     * Update arrow visibility and enabled states based on scroll position
+     * Optimized to only update signals when values actually change
+     */
+    private updateArrowsVisibility;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LmTabsListDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LmTabsListDirective, "[lumaTabsList]", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LmTabsListDirective, "[lumaTabsList]", never, { "lmScrollable": { "alias": "lmScrollable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**