@saasquatch/mint-components 1.15.0-36 → 1.15.0-38

package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js

@@ -7370,7 +7370,126 @@ const vanillaStyle$4 = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    /* Corrected: Target sl-button::part(base) for primary button */
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    /* Corrected: Target sl-button::part(base) for secondary button */
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+    /* Corrected: Target sl-button::part(base) for tertiary button */
+    sl-button[type="tertiary"]::part(base){
+        color: var(--sqm-text, var(--sl-color-neutral-800));
+        width: max-content;
+        display: flex;
+        margin: auto;
+    }
+
+    sl-button[type="tertiary"]::part(base):hover{
+        color: #1ed760;
+    }
+
+    /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
+    /* If you only have one primary button, this is the better way to apply global button styling */
+    /* sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    } */
+
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea labels */
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-select::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+      border-style: solid; /* Added for completeness */
+      border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
+    }
+
+    /* REMOVED: This rule is out of place here.
+       If sqm-name-fields is a separate component, its internal styles
+       should target sl-input::part(base) within its own stylesheet.
+    sqm-name-fields::part(input-base) {
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+    }
+    */
+
+    /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      /* border-color: none; -- REMOVED: Invalid property value */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    /* Corrected: Target [disabled] host element then its part */
+    sl-input[disabled]::part(label),
+    sl-select[disabled]::part(label),
+    sl-textarea[disabled]::part(label){
+      /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
+      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+    }
+    /* Add rules for the disabled base parts if you want background/border */
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    /* Corrected: Target sl-input::part(input) for autofill */
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+`;
 const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;

package/dist/cjs/sqm-big-stat_41.cjs.entry.js

@@ -19,7 +19,7 @@ require('./luxon-2926d85f.js');
 require('./sqm-text-span-view-ce4c0178.js');
 const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-6db3081c.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-0fbbda1b.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');

package/dist/cjs/sqm-portal-google-login.cjs.entry.js

@@ -11,7 +11,7 @@ require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-ce4c0178.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-6db3081c.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-0fbbda1b.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 
 const PortalGoogleLogin = class {

package/dist/cjs/{sqm-portal-login-view-6db3081c.js → sqm-portal-login-view-0fbbda1b.js}

@@ -13,7 +13,7 @@ const style = {
     cursor: "pointer",
     "font-size": "13px",
     "font-weight": "600",
-    color: "var(--sq-text-subdued)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
   ButtonsContainer: {

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -26,7 +26,7 @@ const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-38a5227a
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-10b62df1.js');
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f41d2630.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-fdd97c18.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-6db3081c.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-0fbbda1b.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-1c5094d3.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-399f4eaf.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-8ed04298.js');

package/dist/collection/components/sqm-portal-login/sqm-portal-login-view.js

@@ -10,7 +10,7 @@ const style = {
     cursor: "pointer",
     "font-size": "13px",
     "font-weight": "600",
-    color: "var(--sq-text-subdued)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
   ButtonsContainer: {

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -128,7 +128,126 @@ const vanillaStyle = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    /* Corrected: Target sl-button::part(base) for primary button */
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    /* Corrected: Target sl-button::part(base) for secondary button */
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+    /* Corrected: Target sl-button::part(base) for tertiary button */
+    sl-button[type="tertiary"]::part(base){
+        color: var(--sqm-text, var(--sl-color-neutral-800));
+        width: max-content;
+        display: flex;
+        margin: auto;
+    }
+
+    sl-button[type="tertiary"]::part(base):hover{
+        color: #1ed760;
+    }
+
+    /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
+    /* If you only have one primary button, this is the better way to apply global button styling */
+    /* sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    } */
+
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea labels */
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-select::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+      border-style: solid; /* Added for completeness */
+      border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
+    }
+
+    /* REMOVED: This rule is out of place here.
+       If sqm-name-fields is a separate component, its internal styles
+       should target sl-input::part(base) within its own stylesheet.
+    sqm-name-fields::part(input-base) {
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+    }
+    */
+
+    /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      /* border-color: none; -- REMOVED: Invalid property value */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    /* Corrected: Target [disabled] host element then its part */
+    sl-input[disabled]::part(label),
+    sl-select[disabled]::part(label),
+    sl-textarea[disabled]::part(label){
+      /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
+      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+    }
+    /* Add rules for the disabled base parts if you want background/border */
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    /* Corrected: Target sl-input::part(input) for autofill */
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+`;
 export const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;

package/dist/esm/sqm-banking-info-form_17.entry.js

@@ -7366,7 +7366,126 @@ const vanillaStyle$4 = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    /* Corrected: Target sl-button::part(base) for primary button */
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    /* Corrected: Target sl-button::part(base) for secondary button */
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+    /* Corrected: Target sl-button::part(base) for tertiary button */
+    sl-button[type="tertiary"]::part(base){
+        color: var(--sqm-text, var(--sl-color-neutral-800));
+        width: max-content;
+        display: flex;
+        margin: auto;
+    }
+
+    sl-button[type="tertiary"]::part(base):hover{
+        color: #1ed760;
+    }
+
+    /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
+    /* If you only have one primary button, this is the better way to apply global button styling */
+    /* sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    } */
+
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea labels */
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-select::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+      border-style: solid; /* Added for completeness */
+      border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
+    }
+
+    /* REMOVED: This rule is out of place here.
+       If sqm-name-fields is a separate component, its internal styles
+       should target sl-input::part(base) within its own stylesheet.
+    sqm-name-fields::part(input-base) {
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+    }
+    */
+
+    /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      /* border-color: none; -- REMOVED: Invalid property value */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    /* Corrected: Target [disabled] host element then its part */
+    sl-input[disabled]::part(label),
+    sl-select[disabled]::part(label),
+    sl-textarea[disabled]::part(label){
+      /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
+      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+    }
+    /* Add rules for the disabled base parts if you want background/border */
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    /* Corrected: Target sl-input::part(input) for autofill */
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+`;
 const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;

package/dist/esm/sqm-big-stat_41.entry.js

@@ -15,7 +15,7 @@ import './luxon-8d51c92b.js';
 import './sqm-text-span-view-cd3902e5.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-d6f33135.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-6a2e93b0.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-5b0ca040.js';

package/dist/esm/sqm-portal-google-login.entry.js

@@ -7,7 +7,7 @@ import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import './sqm-text-span-view-cd3902e5.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-6a2e93b0.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 
 const PortalGoogleLogin = class {

package/dist/esm/{sqm-portal-login-view-6a2e93b0.js → sqm-portal-login-view-e870b4b0.js}

@@ -11,7 +11,7 @@ const style = {
     cursor: "pointer",
     "font-size": "13px",
     "font-weight": "600",
-    color: "var(--sq-text-subdued)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
   ButtonsContainer: {

package/dist/esm/sqm-stencilbook.entry.js

@@ -22,7 +22,7 @@ import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-f89826
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-6e046743.js';
 import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-e43830d8.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-55fc0873.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-6a2e93b0.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
 import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-d732a5df.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-5d651c04.js';
 import { P as PortalProfileView } from './sqm-portal-profile-view-6168db65.js';