@posiwise/core-styles 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@posiwise/core-styles",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/scss/_dynamic-styles.scss

@@ -951,7 +951,12 @@
         outline: none;
     }
 
-    .input-group-append .btn {
+    /* Brand-colour the trailing toggle (calendar / search) of an .input-group.
+       Migrated off the BS4 .input-group-append wrapper to BS5 direct-child
+       markup 2026-05-22; scoped to .btn-primary so neighbouring .btn-outline-*
+       buttons sharing an .input-group (e.g. account API-token Show/Hide) keep
+       their own colours. */
+    .input-group > .btn-primary {
         background: var(--first) !important;
         border: 1px solid var(--first) !important;
         color: #fff !important;
@@ -1386,6 +1391,59 @@
         }
     }
 
+    /* Dropdown fields (.ui-fluid.skills-modal — Country, Owner, and every
+       other p-autoComplete/p-multiselect) use a bare <span.pw-label-style>
+       label instead of the pw-input-container wrapper. As an inline span it
+       ignores its mb-2 utility and has no height lock, so the control drifts
+       vertically vs sibling pw-input-container fields on the same row. Mirror
+       the hard-locked .pw-input-container-label box model (18px label +
+       8px gap) so these dropdowns baseline-align with every other field.
+       (Fixed 2026-05-22.) */
+    .ui-fluid.skills-modal .pw-label-style {
+        display: block;
+        height: 18px;
+        line-height: 18px;
+        margin-bottom: 8px !important;
+    }
+
+    /* CRM contact form: Potential, Labels and Source use a bare
+       <span.pw-label-style> + p-select/p-multiselect WITHOUT the
+       .ui-fluid.skills-modal wrapper, so the rule above misses them and their
+       controls baseline-drift vs the pw-input-container fields on the same row.
+       Apply the same hard-locked label box model (18px label + 8px gap, mirrors
+       .pw-input-container-label). Component-scoped so it can't disturb other
+       modules' bare-label workarounds (e.g. admin subscription-details
+       .pw-label-style + p-multiselect margin-top). (Fixed 2026-05-22.) */
+    pw-smart-crm-contact-details .pw-label-style {
+        display: block;
+        height: 18px;
+        line-height: 18px;
+        margin-bottom: 8px !important;
+    }
+
+    /* CRM opportunity detail form: same bare-<span.pw-label-style> baseline-drift
+       as the contact form (Win Chance / Currency / Categories / Stage / Features),
+       BUT these labels carry the .info-circle (i) tooltip whose ::after icon is
+       absolutely positioned at right:-20px relative to the label box. A full-width
+       `display:block` label would push that icon to the far right edge, so use
+       `display:inline-block` here — it hugs the text width (icon stays beside the
+       label) while still locking the 18px label + 8px gap box model for baseline
+       alignment. (Fixed 2026-05-22.) */
+    pw-smart-crm-opportunities-details .pw-label-style {
+        display: inline-block;
+        height: 18px;
+        line-height: 18px;
+        margin-bottom: 8px !important;
+    }
+
+    /* The global .pw-label-style.info-circle::after lifts the (i) icon to
+       top:-7px — tuned for the old un-height-locked inline label. With the 18px
+       line-height lock above, -7px floats the icon above the text; nudge it back
+       onto the label's text line. (Fixed 2026-05-22.) */
+    pw-smart-crm-opportunities-details .pw-label-style.info-circle::after {
+        top: 1px;
+    }
+
     .toast-container {
         position: fixed !important;
     }

package/scss/custom-bootstrap/_buttons.scss

@@ -54,11 +54,13 @@ button:hover {
     }
 }
 
-// Date-picker / input-group trailing toggle: match the platform's 36px input
-// height so the calendar trigger stays flush with the adjacent .form-control.
-// (_dynamic-styles colours `.input-group-append .btn` brand-blue but never sizes
-// it, so the button rendered shorter than the input.)
-.input-group-append .btn {
+// Date-picker / input-group trailing toggle: floor the brand toggle at the
+// platform's 36px input height. Migrated off the BS4 `.input-group-append`
+// wrapper to BS5 direct-child markup (2026-05-22): BS5 handles the flush seam
+// (negative margin + squared inner corners) natively for direct `.input-group`
+// children, so only the height floor remains here. Scoped to `.btn-primary` so
+// neighbouring `.btn-outline-*` buttons sharing an `.input-group` are untouched.
+.input-group > .btn-primary {
     min-height: 36px;
     display: inline-flex;
     align-items: center;

package/scss/custom-bootstrap/_forms.scss

@@ -1,5 +1,19 @@
 @use 'sass:color';
 @use 'sass:map';
+
+// Unified placeholder hint color for EVERY `.form-control` — not only those
+// inside a `<form>`. Vanilla Bootstrap's `.form-control::placeholder`
+// (`var(--bs-secondary-color)`, dark) otherwise wins on standalone inputs such
+// as the CRM "Search location" field; the `body` prefix lifts specificity above
+// it deterministically (independent of import order). Matches PrimeNG
+// `$placeHolder` (#a8afbc) so navbar, PrimeNG, and Bootstrap inputs read alike.
+body .form-control::placeholder {
+    color: #a8afbc; // N400 — hint, lighter than the value text
+    font-weight: 400;
+    font-style: normal;
+    opacity: 1; // honor color as-is (Firefox defaults placeholder opacity to 0.54)
+}
+
 form {
     .form-text {
         display: block;
@@ -27,25 +41,9 @@ form {
         min-height: 36px; // align with p-select / p-multiselect heights
         color: rgb(128 128 128);
 
-        /* &::input-placeholder {
-            color: color.adjust($body-bg, $lightness: -20%);
-        } */
-
-        &:placeholder {
-            /* Firefox 18- */
-            color: #a8afbc; // N400 — unified with PrimeNG $placeHolder (lighter than text to read as hint, not value)
-        }
-
-        &::placeholder {
-            /* Firefox 19+ */
-            color: #a8afbc; // N400 — unified with PrimeNG $placeHolder (lighter than text to read as hint, not value)
-            font-weight: 400;
-            font-style: normal;
-        }
-
-        /* &:input-placeholder {
-            color: color.adjust($body-bg, $lightness: -20%);
-        } */
+        // Placeholder color is unified for ALL `.form-control` at file top
+        // (`body .form-control::placeholder`) so it also reaches inputs that
+        // aren't wrapped in a `<form>`. Don't re-scope it here.
 
         &:focus:not([readonly]):not(:disabled) {
             border-color: rgb(0 0 0);

package/scss/shared/_prime-ng.scss

@@ -388,10 +388,15 @@ body {
 
     .p-autocomplete-multiple-container,
     .ui-fluid.skills-modal p-autocomplete {
-        background: transparent;
-
+        // `.skills-modal` autocompletes historically forced a transparent fill —
+        // a chip-picker hack so a multi-select input blended into its chip
+        // container — which also leaked onto single-selects, making them read as
+        // "see-through" next to white sibling fields (e.g. CloudOlive
+        // accounts/add CRM-account vs vendor-account). The transparent override is
+        // removed so both single- and multi-select render on the standard PrimeNG
+        // field background, matching every other p-select / p-inputtext /
+        // autocomplete on screen.
         .p-autocomplete-input {
-            background: transparent;
             border: 1px solid rgb(128 128 128);
         }