@tolle_/tolle-ui 0.0.11-beta → 0.0.13-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/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.13-beta",
   "publishConfig": {
     "access": "public"
   },

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 */