@robosophy/prime-theme 3.0.0 → 3.0.2

package/dist/prime.css

@@ -337,17 +337,19 @@
     justify-content: center;
     vertical-align: middle;
   }
-  /* Vue: .p-input-icon-left/right > i | React: .p-icon-field-left/right > .p-input-icon */
+  /* Vue3: .p-input-icon-left/right > i | Vue4: .p-iconfield > .p-inputicon | React: .p-icon-field-left/right > .p-input-icon */
   .p-input-icon-left,
   .p-input-icon-right,
   .p-icon-field-left,
-  .p-icon-field-right {
+  .p-icon-field-right,
+  .p-iconfield {
     position: relative;
   }
   .p-input-icon-left > i,
   .p-input-icon-right > i,
   .p-icon-field-left > .p-input-icon,
-  .p-icon-field-right > .p-input-icon {
+  .p-icon-field-right > .p-input-icon,
+  .p-iconfield > .p-inputicon {
     position: absolute;
     top: 50%;
     margin-top: 0 !important;
@@ -356,32 +358,103 @@
     align-items: center;
     justify-content: center;
   }
+  /* Vue: .p-iconfield | React: .p-icon-field */
+  .p-iconfield, .p-icon-field {
+    margin-top: 0;
+  }
+  /* Icon overrides (both) - Use Material Symbols instead of PrimeIcons */
   .pi-eye::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'visibility_off';
+    font-family: "Material Symbols Outlined";
+    content: "visibility_off";
     color: var(--rs-color-text-primary);
     cursor: pointer;
   }
   .pi-eye-slash::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'visibility';
+    font-family: "Material Symbols Outlined";
+    content: "visibility";
     color: var(--rs-color-text-primary);
     cursor: pointer;
   }
+  .pi-chevron-down::before,
+  .pi-chevron-up::before {
+    font-family: "Material Symbols Outlined";
+  }
   .pi-chevron-down::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'keyboard_arrow_down';
+    content: "keyboard_arrow_down";
   }
-  .pi-check::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'check';
+  .pi-chevron-up::before {
+    content: "keyboard_arrow_up";
   }
-  /* Vue: .p-iconfield | React: .p-icon-field */
-  .p-iconfield, .p-icon-field {
-    margin-top: 0;
+  .pi-check::before {
+    font-family: "Material Symbols Outlined";
+    content: "check";
   }
   /* #endregion */
 
+  /* PrimeVue 4 - Dropdown icon rotation */
+  .p-select .p-select-dropdown-icon,
+  .p-cascadeselect .p-cascadeselect-dropdown-icon,
+  .p-multiselect .p-multiselect-dropdown-icon {
+    transition: transform 0.2s ease;
+  }
+
+  .p-select-open .p-select-dropdown-icon,
+  .p-cascadeselect-open .p-cascadeselect-dropdown-icon,
+  .p-multiselect-open .p-multiselect-dropdown-icon {
+    transform: rotate(180deg);
+  }
+
+  /* PrimeReact - Dropdown CSS chevron stays mounted so its rotation can animate */
+  .p-dropdown .p-dropdown-trigger {
+    align-items: center;
+  }
+  .p-dropdown .p-dropdown-trigger > svg.p-dropdown-trigger-icon {
+    display: none !important;
+  }
+  /* PrimeReact - Dropdown CSS chevron only draws when the default icon slot exists.
+     With a custom dropdownIcon the icon has no .p-dropdown-trigger-icon class, so the
+     ::after is suppressed and no duplicate arrow appears. Same when PrimeReact swaps
+     the default icon for a loading spinner. */
+  .p-dropdown .p-dropdown-trigger:has(> .p-dropdown-trigger-icon)::after {
+    border: solid currentColor;
+    border-width: 0 1.5px 1.5px 0;
+    content: "";
+    height: 8px;
+    transform: translateY(-2px) rotate(45deg);
+    transition: transform 0.2s ease;
+    width: 8px;
+  }
+  .p-dropdown .p-dropdown-trigger:has(> .p-dropdown-trigger-icon)[aria-expanded="true"]::after {
+    transform: translateY(2px) rotate(225deg);
+  }
+
+  /* PrimeReact - CascadeSelect and MultiSelect: hide default chevron SVG icons and use CSS ::after chevron.
+     Same pattern as Dropdown above — keeps icon style consistent across all select components,
+     supports animation on open, and avoids duplicate arrows with custom icons or loading spinners. */
+  .p-cascadeselect .p-cascadeselect-trigger > svg.p-cascadeselect-trigger-icon,
+  .p-multiselect .p-multiselect-trigger > svg.p-multiselect-trigger-icon:not(.p-icon-spin) {
+    display: none !important;
+  }
+
+  .p-cascadeselect .p-cascadeselect-trigger:has(> svg.p-cascadeselect-trigger-icon)::after,
+  .p-multiselect .p-multiselect-trigger:has(> svg.p-multiselect-trigger-icon:not(.p-icon-spin))::after {
+    border: solid currentColor;
+    border-width: 0 1.5px 1.5px 0;
+    content: "";
+    height: 8px;
+    transform: translateY(-2px) rotate(45deg);
+    transition: transform 0.2s ease;
+    width: 8px;
+  }
+
+  .p-cascadeselect .p-cascadeselect-trigger:has(> svg.p-cascadeselect-trigger-icon)[aria-expanded="true"]::after {
+    transform: translateY(2px) rotate(225deg);
+  }
+
+  .p-multiselect:has(input[aria-expanded="true"]) .p-multiselect-trigger:has(> svg.p-multiselect-trigger-icon:not(.p-icon-spin))::after {
+    transform: translateY(2px) rotate(225deg);
+  }
+
   /* #region classes */
 	/* password (both) */
   .p-password {
@@ -391,7 +464,7 @@
     width: 100%;
   }
 	/* input (both) */
-	.p-inputtext:not(:where(.p-inputtextarea, .p-dropdown-label, .p-select-label, .p-cascadeselect-label, .p-cascade-select-label, .p-multiselect-label, .p-multi-select-label, .p-autocomplete-multiple-container)) {
+	.p-inputtext:not(:where(.p-inputtextarea, .p-dropdown-label, .p-select-label, .p-cascadeselect-label, .p-multiselect-label, .p-autocomplete-multiple-container)) {
 		font-weight: var(--p-inputtext-font-weight);
 		height: 48px;
 		font-size: 16px;
@@ -448,12 +521,10 @@
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: var(--rs-color-stroke-error) !important;
   }
-  .p-cascadeselect.p-invalid.p-component,
-  .p-cascade-select.p-invalid.p-component {
+  .p-cascadeselect.p-invalid.p-component {
     border-color: var(--rs-color-stroke-error) !important;
   }
-  .p-multiselect.p-invalid.p-component,
-  .p-multi-select.p-invalid.p-component {
+  .p-multiselect.p-invalid.p-component {
     border-color: var(--rs-color-stroke-error) !important;
   }
   /* disabled states (both) */
@@ -475,23 +546,19 @@
     background: var(--rs-color-background-disabled) !important;
     color: var(--rs-color-text-secondary) !important;
   }
-  .p-cascadeselect.p-disabled,
-  .p-cascade-select.p-disabled {
+  .p-cascadeselect.p-disabled {
     background: var(--rs-color-background-disabled) !important;
   }
-  .p-cascadeselect.p-disabled .p-cascadeselect-label,
-  .p-cascade-select.p-disabled .p-cascade-select-label {
+  .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: var(--rs-color-text-secondary) !important;
   }
-  .p-multiselect.p-disabled,
-  .p-multi-select.p-disabled {
+  .p-multiselect.p-disabled {
     background: var(--rs-color-background-disabled) !important;
   }
-  .p-multiselect.p-disabled .p-multiselect-label,
-  .p-multi-select.p-disabled .p-multi-select-label {
+  .p-multiselect.p-disabled .p-multiselect-label {
     color: var(--rs-color-text-secondary) !important;
   }
-	/* select/dropdown (both: .p-select=Vue, .p-dropdown=both) */
+	/* select/dropdown (both: .p-select=Vue, .p-dropdown=React) */
 	.p-select, .p-dropdown {
 		font-weight: var(--p-select-font-weight);
 		height: 48px;
@@ -500,8 +567,8 @@
 		border-radius: 6px;
 		border: 1px solid var(--rs-color-neutral-700);
 		background: var(--rs-color-neutral-50);
-		padding: 0 16px;
 	}
+	.p-select, .p-dropdown { padding: 0; }
 	.p-select:not(.p-disabled):hover,
 	.p-dropdown:not(.p-disabled):hover {
 		border-color: var(--rs-color-stroke-focused);
@@ -525,102 +592,90 @@
 	.p-select-label.p-inputtext,
 	.p-dropdown-label.p-inputtext,
 	.p-cascadeselect-label.p-inputtext,
-	.p-cascade-select-label.p-inputtext,
-	.p-multiselect-label.p-inputtext,
-	.p-multi-select-label.p-inputtext {
+	.p-multiselect-label.p-inputtext {
 		height: auto;
 		line-height: 1.5;
 		border: none;
 		background: transparent;
 	}
-	/* Internal containers - remove duplicate borders */
+	/* Internal containers - remove duplicate borders and padding from triggers.
+	   PrimeReact (React) adds internal padding to triggers, so we reset it here
+	   for both Vue and React variants. */
 	.p-select-label-container,
 	.p-dropdown-label-container,
+	.p-cascadeselect-label-container,
+	.p-multiselect-label-container,
 	.p-select-trigger,
-	.p-dropdown-trigger {
+	.p-dropdown-trigger,
+	.p-cascadeselect-trigger,
+	.p-multiselect-trigger {
 		border: none;
 		background: transparent;
+		padding: 0;
 	}
-	/* cascadeselect (both: .p-cascadeselect=React, .p-cascade-select=Vue) */
-	.p-cascadeselect, .p-cascade-select {
+	/* cascadeselect (both) */
+	.p-cascadeselect {
 		height: 48px;
 		font-size: 16px;
 		gap: 8px;
 		border-radius: 6px;
 		border: 1px solid var(--rs-color-neutral-700);
 		background: var(--rs-color-neutral-50);
-		padding: 0 16px;
+		padding: 0;
 	}
-	.p-cascadeselect:not(.p-disabled):hover,
-	.p-cascade-select:not(.p-disabled):hover {
+	.p-cascadeselect:not(.p-disabled):hover {
 		border-color: var(--rs-color-stroke-focused);
 	}
-	.p-cascadeselect:not(.p-disabled).p-focus,
-	.p-cascade-select:not(.p-disabled).p-focus {
+	.p-cascadeselect:not(.p-disabled).p-focus {
 		outline: none;
 		border-color: var(--rs-color-stroke-focused);
 		box-shadow: none;
 	}
 	/* Vue-only: PrimeReact 10 no emite clases de tamaño para CascadeSelect */
-	.p-cascadeselect-sm, .p-cascade-select-sm {
+	.p-cascadeselect-sm {
 		height: 36px;
 		font-size: 14px;
 	}
-	.p-cascadeselect-label, .p-cascade-select-label {
+	.p-cascadeselect-label {
 		align-self: center;
 		border: none;
 		background: transparent;
 	}
-	.p-cascadeselect-label-container,
-	.p-cascade-select-label-container,
-	.p-cascadeselect-trigger,
-	.p-cascade-select-trigger {
-		border: none;
-		background: transparent;
-	}
-	/* multiselect (both: .p-multiselect=React, .p-multi-select=Vue) */
-	.p-multiselect, .p-multi-select {
+	/* multiselect (both) */
+	.p-multiselect {
+		display: flex;
+		align-items: center;
 		height: 48px;
 		font-size: 16px;
 		gap: 8px;
 		border-radius: 6px;
 		border: 1px solid var(--rs-color-neutral-700);
 		background: var(--rs-color-neutral-50);
-		padding: 0 16px;
+		padding: 0;
 	}
-	.p-multiselect:not(.p-disabled):hover,
-	.p-multi-select:not(.p-disabled):hover {
+	.p-multiselect:not(.p-disabled):hover {
 		border-color: var(--rs-color-stroke-focused);
 	}
-	.p-multiselect:not(.p-disabled).p-focus,
-	.p-multi-select:not(.p-disabled).p-focus {
+	.p-multiselect:not(.p-disabled).p-focus {
 		outline: none;
 		border-color: var(--rs-color-stroke-focused);
 		box-shadow: none;
 	}
 	/* Vue-only: PrimeReact 10 no emite clases de tamaño para MultiSelect */
-	.p-multiselect-sm, .p-multi-select-sm {
+	.p-multiselect-sm {
 		height: 36px;
 		font-size: 14px;
 	}
-	.p-multiselect-label, .p-multi-select-label {
+	.p-multiselect-label {
 		align-self: center;
 		line-height: normal;
 		border: none;
 		background: transparent;
 	}
-	.p-multiselect-label-container,
-	.p-multi-select-label-container,
-	.p-multiselect-trigger,
-	.p-multi-select-trigger {
-		border: none;
-		background: transparent;
-	}
-	/* autocomplete (both) */
-	.p-autocomplete {
+	/* autocomplete (Vue-only: :has(.p-autocomplete-input) targets Vue's structure, not React's) */
+	.p-autocomplete:has(.p-autocomplete-input) {
 		height: 48px;
 		font-size: 16px;
-		gap: 8px;
 	}
 	/* menu (both: .p-menuitem-text=React, .p-menu-item-label=Vue) */
 	.p-menu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosophy/prime-theme",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "private": false,
   "license": "UNLICENSED",
   "type": "module",