@tolle_/tolle-ui 0.0.11-beta → 0.0.14-beta

package/lib/button.component.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
     block?: boolean | null | undefined;
     readonly?: boolean | null | undefined;
     disabled?: boolean | null | undefined;

package/lib/dropdown-item.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class DropdownItemComponent {
+    class: string;
+    protected readonly cn: (c1: string, c2: string) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownItemComponent, "tolle-dropdown-item", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/dropdown-label.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DropdownLabelComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownLabelComponent, "tolle-dropdown-label", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/dropdown-menu.component.d.ts

@@ -0,0 +1,7 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DropdownMenuComponent {
+    templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuComponent, "tolle-dropdown-menu", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/dropdown-separator.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DropdownSeparatorComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownSeparatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownSeparatorComponent, "tolle-dropdown-separator", never, {}, {}, never, never, true, never>;
+}

package/lib/dropdown-trigger.directive.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, OnDestroy, ViewContainerRef } from '@angular/core';
+import { DropdownMenuComponent } from './dropdown-menu.component';
+import * as i0 from "@angular/core";
+export declare class DropdownTriggerDirective implements OnDestroy {
+    private el;
+    private vcr;
+    menu: DropdownMenuComponent;
+    private cleanup?;
+    private isOpen;
+    private menuElement?;
+    constructor(el: ElementRef, vcr: ViewContainerRef);
+    toggle(): void;
+    private open;
+    private close;
+    private outsideClick;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownTriggerDirective, "[tolleDropdownTrigger]", never, { "menu": { "alias": "tolleDropdownTrigger"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/input.component.d.ts

@@ -21,6 +21,7 @@ export declare class InputComponent implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     onInputChange(event: Event): void;
     protected readonly cn: typeof cn;
+    get computedContainerClass(): string;
     get computedInputClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "tolle-input", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "size": { "alias": "size"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["[prefix]", "[suffix]"], true, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "0.0.11-beta",
+  "version": "0.0.14-beta",
   "publishConfig": {
     "access": "public"
   },

package/public-api.d.ts

@@ -31,3 +31,8 @@ export * from './lib/button-group.component';
 export * from './lib/date-range-picker.component';
 export * from './lib/range-calendar.component';
 export * from './lib/theme.service';
+export * from './lib/dropdown-item.component';
+export * from './lib/dropdown-label.component';
+export * from './lib/dropdown-menu.component';
+export * from './lib/dropdown-separator.component';
+export * from './lib/dropdown-trigger.directive';

package/theme.css

@@ -110,34 +110,48 @@
 /* 4. COMPONENT OVERRIDES                                                     */
 /* -------------------------------------------------------------------------- */
 @layer components {
-  /* Interactive Element Transitions */
-  tolle-input input,
+  /* Updated: Target the container div (tolle-input > div) instead of the input tag */
+  tolle-input > div,
   tolle-select button,
-  tolle-masked-input input,
-  tolle-date-picker tolle-masked-input input {
+  tolle-masked-input > div,
+  tolle-date-picker tolle-masked-input > div {
     box-shadow: var(--input-shadow);
-    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms ease;
   }
 
-  tolle-input input:focus,
+  /* When the container is focused-within, we clear the shadow and let the ring handle the focus */
+  tolle-input > div:focus-within,
   tolle-select button:focus,
-  tolle-masked-input input:focus {
+  tolle-masked-input > div:focus-within {
     box-shadow: 0 0 #0000;
   }
 
+  /* Remove shadow from the native input since the container now handles the elevation */
+  tolle-input input,
+  tolle-masked-input input {
+    box-shadow: none !important;
+    background: transparent;
+  }
+
   /* Dark Mode specific component adjustments */
   .dark tolle-card {
     background-color: var(--secondary);
     border-color: var(--border);
   }
 
-  .dark tolle-input,
+  /* Dark mode backgrounds for form components */
+  .dark tolle-input > div,
   .dark tolle-select button {
     background-color: transparent;
   }
 
-  /* Icon sizing inside buttons */
-  tolle-button svg { @apply w-4 h-4; }
+  /* Icon sizing inside buttons and input slots */
+  tolle-button svg,
+  tolle-input [prefix] svg,
+  tolle-input [suffix] svg {
+    @apply w-4 h-4;
+  }
+
   .h-8 svg { @apply w-3.5 h-3.5; }
 
   /* Compact Select Items */