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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js +103 -73
  2. package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js +103 -73
  3. package/dist/esm/sqm-banking-info-form_17.entry.js +103 -73
  4. package/dist/esm-es5/sqm-banking-info-form_17.entry.js +1 -1
  5. package/dist/mint-components/mint-components.esm.js +1 -1
  6. package/dist/mint-components/p-085ae7a9.system.js +1 -1
  7. package/dist/mint-components/{p-d4801585.system.entry.js → p-788e60ae.system.entry.js} +1 -1
  8. package/dist/mint-components/{p-63d1eee7.entry.js → p-980f20d2.entry.js} +8 -8
  9. package/docs/docs.docx +0 -0
  10. package/package.json +1 -1
package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js CHANGED
@@ -7371,95 +7371,125 @@ const vanillaStyle$4 = `
7371
7371
  min-width: 250px;
7372
7372
  }
7373
7373
 
7374
- *::part(primarybutton-base){
7375
- background-color: var(--sqm-primary-button-background);
7376
- color: var(--sqm-primary-button-color);
7377
- border-color: var(--sqm-primary-button-color-border);
7378
- border-radius: var(--sqm-primary-button-radius);
7379
- }
7374
+ /* Corrected: Target sl-button::part(base) for primary button */
7375
+ sl-button[type="primary"]::part(base){
7376
+ background-color: var(--sqm-primary-button-background);
7377
+ color: var(--sqm-primary-button-color);
7378
+ border-color: var(--sqm-primary-button-color-border);
7379
+ border-radius: var(--sqm-primary-button-radius);
7380
+ }
7380
7381
 
7381
- *::part(primarybutton-base):hover{
7382
- background-color: var(--sqm-primary-button-background-hover);
7383
- }
7382
+ sl-button[type="primary"]::part(base):hover{
7383
+ background-color: var(--sqm-primary-button-background-hover);
7384
+ }
7384
7385
 
7385
- *::part(primarybutton-base):focus{
7386
- box-shadow: none;
7387
- }
7386
+ sl-button[type="primary"]::part(base):focus{
7387
+ box-shadow: none;
7388
+ }
7388
7389
 
7389
- *::part(secondarybutton-base){
7390
- background-color: var(--sqm-secondary-button-background);
7391
- color: var(--sqm-secondary-button-color);
7392
- border-color: var(--sqm-secondary-button-color-border);
7393
- border-radius: var(--sqm-secondary-button-radius);
7394
- }
7390
+ /* Corrected: Target sl-button::part(base) for secondary button */
7391
+ sl-button[type="secondary"]::part(base){
7392
+ background-color: var(--sqm-secondary-button-background);
7393
+ color: var(--sqm-secondary-button-color);
7394
+ border-color: var(--sqm-secondary-button-color-border);
7395
+ border-radius: var(--sqm-secondary-button-radius);
7396
+ }
7395
7397
 
7396
- *::part(secondarybutton-base):hover{
7397
- background-color: var(--sqm-secondary-button-background-hover);
7398
- }
7398
+ sl-button[type="secondary"]::part(base):hover{
7399
+ background-color: var(--sqm-secondary-button-background-hover);
7400
+ }
7399
7401
 
7400
- *::part(tertiarybutton-base){
7401
- color: var(--sqm-text, var(--sl-color-neutral-800));
7402
- width: max-content;
7403
- display: flex;
7404
- margin: auto;
7405
- }
7402
+ /* Corrected: Target sl-button::part(base) for tertiary button */
7403
+ sl-button[type="tertiary"]::part(base){
7404
+ color: var(--sqm-text, var(--sl-color-neutral-800));
7405
+ width: max-content;
7406
+ display: flex;
7407
+ margin: auto;
7408
+ }
7406
7409
 
7407
- *::part(tertiarybutton-base):hover{
7408
- color: #1ed760;
7409
- }
7410
- *::part(primarybutton-base):focus{
7411
- box-shadow: none;
7412
- }
7410
+ sl-button[type="tertiary"]::part(base):hover{
7411
+ color: #1ed760;
7412
+ }
7413
7413
 
7414
- *::part(input-label), *::part(select-label), *::part(textarea-label){
7415
- font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
7416
- font-weight: var(--sl-font-weight-semibold);
7417
- color: var(--sqm-input-label-color, var(--sqm-text), black);
7418
- }
7414
+ /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
7415
+ /* If you only have one primary button, this is the better way to apply global button styling */
7416
+ /* sl-button[type="primary"]::part(base):focus{
7417
+ box-shadow: none;
7418
+ } */
7419
7419
 
7420
- *::part(input-base), *::part(select-base), *::part(textarea-base){
7421
- background-color: var(--sqm-input-background, #fff);
7422
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7423
- color: var(--sqm-input-color, white);
7424
- border-width: var(--sqm-border-width, 1px);
7425
- }
7426
7420
 
7427
- sqm-name-fields::part(input-base) {
7428
- background-color: var(--sqm-input-background, #fff);
7429
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7430
- color: var(--sqm-input-color, white);
7431
- border-width: var(--sqm-border-width, 1px);
7432
- }
7421
+ /* Corrected: Target sl-input, sl-select, sl-textarea labels */
7422
+ sl-input::part(label),
7423
+ sl-select::part(label),
7424
+ sl-textarea::part(label){
7425
+ font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
7426
+ font-weight: var(--sl-font-weight-semibold);
7427
+ color: var(--sqm-input-label-color, var(--sqm-text), black);
7428
+ }
7433
7429
 
7430
+ /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
7431
+ sl-input::part(base),
7432
+ sl-select::part(base),
7433
+ sl-textarea::part(base){
7434
+ background-color: var(--sqm-input-background, #fff);
7435
+ border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7436
+ color: var(--sqm-input-color, white);
7437
+ border-width: var(--sqm-border-width, 1px);
7438
+ border-style: solid; /* Added for completeness */
7439
+ border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
7440
+ }
7434
7441
 
7442
+ /* REMOVED: This rule is out of place here.
7443
+ If sqm-name-fields is a separate component, its internal styles
7444
+ should target sl-input::part(base) within its own stylesheet.
7445
+ sqm-name-fields::part(input-base) {
7446
+ background-color: var(--sqm-input-background, #fff);
7447
+ border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7448
+ color: var(--sqm-input-color, white);
7449
+ border-width: var(--sqm-border-width, 1px);
7450
+ }
7451
+ */
7435
7452
 
7436
- sl-input::part(base):focus,
7437
- sl-select::part(form-control-wrapper):focus,
7438
- sl-textarea::part(textarea-label):focus {
7439
- border-color: none;
7440
- border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
7441
- }
7453
+ /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
7454
+ sl-input::part(base):focus,
7455
+ sl-select::part(base):focus, /* Corrected part name for sl-select */
7456
+ sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
7457
+ /* border-color: none; -- REMOVED: Invalid property value */
7458
+ border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
7459
+ }
7442
7460
 
7443
- *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
7444
- background: var(--sqm-input-disabled-background, #f5f5f5);
7445
- color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
7446
- }
7461
+ /* Corrected: Target [disabled] host element then its part */
7462
+ sl-input[disabled]::part(label),
7463
+ sl-select[disabled]::part(label),
7464
+ sl-textarea[disabled]::part(label){
7465
+ /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
7466
+ color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
7467
+ }
7468
+ /* Add rules for the disabled base parts if you want background/border */
7469
+ sl-input[disabled]::part(base),
7470
+ sl-select[disabled]::part(base),
7471
+ sl-textarea[disabled]::part(base){
7472
+ background: var(--sqm-input-disabled-background, #f5f5f5);
7473
+ border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
7474
+ }
7447
7475
 
7448
- *::part(input):-webkit-autofill {
7449
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7450
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7451
- }
7452
7476
 
7453
- *::part(input):-webkit-autofill:hover {
7454
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7455
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7456
- }
7477
+ /* Corrected: Target sl-input::part(input) for autofill */
7478
+ sl-input::part(input):-webkit-autofill {
7479
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7480
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7481
+ }
7457
7482
 
7458
- *::part(input):-webkit-autofill:focus {
7459
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7460
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7461
- }
7462
- `;
7483
+ sl-input::part(input):-webkit-autofill:hover {
7484
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7485
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7486
+ }
7487
+
7488
+ sl-input::part(input):-webkit-autofill:focus {
7489
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7490
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7491
+ }
7492
+ `;
7463
7493
  const UserInfoFormView = (props) => {
7464
7494
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
7465
7495
  const { states, states: { formState }, callbacks, text, refs, data, } = props;
package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js CHANGED
@@ -129,95 +129,125 @@ const vanillaStyle = `
129
129
  min-width: 250px;
130
130
  }
131
131
 
132
- *::part(primarybutton-base){
133
- background-color: var(--sqm-primary-button-background);
134
- color: var(--sqm-primary-button-color);
135
- border-color: var(--sqm-primary-button-color-border);
136
- border-radius: var(--sqm-primary-button-radius);
137
- }
132
+ /* Corrected: Target sl-button::part(base) for primary button */
133
+ sl-button[type="primary"]::part(base){
134
+ background-color: var(--sqm-primary-button-background);
135
+ color: var(--sqm-primary-button-color);
136
+ border-color: var(--sqm-primary-button-color-border);
137
+ border-radius: var(--sqm-primary-button-radius);
138
+ }
138
139
 
139
- *::part(primarybutton-base):hover{
140
- background-color: var(--sqm-primary-button-background-hover);
141
- }
140
+ sl-button[type="primary"]::part(base):hover{
141
+ background-color: var(--sqm-primary-button-background-hover);
142
+ }
142
143
 
143
- *::part(primarybutton-base):focus{
144
- box-shadow: none;
145
- }
144
+ sl-button[type="primary"]::part(base):focus{
145
+ box-shadow: none;
146
+ }
146
147
 
147
- *::part(secondarybutton-base){
148
- background-color: var(--sqm-secondary-button-background);
149
- color: var(--sqm-secondary-button-color);
150
- border-color: var(--sqm-secondary-button-color-border);
151
- border-radius: var(--sqm-secondary-button-radius);
152
- }
148
+ /* Corrected: Target sl-button::part(base) for secondary button */
149
+ sl-button[type="secondary"]::part(base){
150
+ background-color: var(--sqm-secondary-button-background);
151
+ color: var(--sqm-secondary-button-color);
152
+ border-color: var(--sqm-secondary-button-color-border);
153
+ border-radius: var(--sqm-secondary-button-radius);
154
+ }
153
155
 
154
- *::part(secondarybutton-base):hover{
155
- background-color: var(--sqm-secondary-button-background-hover);
156
- }
156
+ sl-button[type="secondary"]::part(base):hover{
157
+ background-color: var(--sqm-secondary-button-background-hover);
158
+ }
157
159
 
158
- *::part(tertiarybutton-base){
159
- color: var(--sqm-text, var(--sl-color-neutral-800));
160
- width: max-content;
161
- display: flex;
162
- margin: auto;
163
- }
160
+ /* Corrected: Target sl-button::part(base) for tertiary button */
161
+ sl-button[type="tertiary"]::part(base){
162
+ color: var(--sqm-text, var(--sl-color-neutral-800));
163
+ width: max-content;
164
+ display: flex;
165
+ margin: auto;
166
+ }
164
167
 
165
- *::part(tertiarybutton-base):hover{
166
- color: #1ed760;
167
- }
168
- *::part(primarybutton-base):focus{
169
- box-shadow: none;
170
- }
168
+ sl-button[type="tertiary"]::part(base):hover{
169
+ color: #1ed760;
170
+ }
171
171
 
172
- *::part(input-label), *::part(select-label), *::part(textarea-label){
173
- font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
174
- font-weight: var(--sl-font-weight-semibold);
175
- color: var(--sqm-input-label-color, var(--sqm-text), black);
176
- }
172
+ /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
173
+ /* If you only have one primary button, this is the better way to apply global button styling */
174
+ /* sl-button[type="primary"]::part(base):focus{
175
+ box-shadow: none;
176
+ } */
177
177
 
178
- *::part(input-base), *::part(select-base), *::part(textarea-base){
179
- background-color: var(--sqm-input-background, #fff);
180
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
181
- color: var(--sqm-input-color, white);
182
- border-width: var(--sqm-border-width, 1px);
183
- }
184
178
 
185
- sqm-name-fields::part(input-base) {
186
- background-color: var(--sqm-input-background, #fff);
187
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
188
- color: var(--sqm-input-color, white);
189
- border-width: var(--sqm-border-width, 1px);
190
- }
179
+ /* Corrected: Target sl-input, sl-select, sl-textarea labels */
180
+ sl-input::part(label),
181
+ sl-select::part(label),
182
+ sl-textarea::part(label){
183
+ font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
184
+ font-weight: var(--sl-font-weight-semibold);
185
+ color: var(--sqm-input-label-color, var(--sqm-text), black);
186
+ }
191
187
 
188
+ /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
189
+ sl-input::part(base),
190
+ sl-select::part(base),
191
+ sl-textarea::part(base){
192
+ background-color: var(--sqm-input-background, #fff);
193
+ border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
194
+ color: var(--sqm-input-color, white);
195
+ border-width: var(--sqm-border-width, 1px);
196
+ border-style: solid; /* Added for completeness */
197
+ border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
198
+ }
192
199
 
200
+ /* REMOVED: This rule is out of place here.
201
+ If sqm-name-fields is a separate component, its internal styles
202
+ should target sl-input::part(base) within its own stylesheet.
203
+ sqm-name-fields::part(input-base) {
204
+ background-color: var(--sqm-input-background, #fff);
205
+ border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
206
+ color: var(--sqm-input-color, white);
207
+ border-width: var(--sqm-border-width, 1px);
208
+ }
209
+ */
210
+
211
+ /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
212
+ sl-input::part(base):focus,
213
+ sl-select::part(base):focus, /* Corrected part name for sl-select */
214
+ sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
215
+ /* border-color: none; -- REMOVED: Invalid property value */
216
+ border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
217
+ }
193
218
 
194
- sl-input::part(base):focus,
195
- sl-select::part(form-control-wrapper):focus,
196
- sl-textarea::part(textarea-label):focus {
197
- border-color: none;
198
- border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
199
- }
219
+ /* Corrected: Target [disabled] host element then its part */
220
+ sl-input[disabled]::part(label),
221
+ sl-select[disabled]::part(label),
222
+ sl-textarea[disabled]::part(label){
223
+ /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
224
+ color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
225
+ }
226
+ /* Add rules for the disabled base parts if you want background/border */
227
+ sl-input[disabled]::part(base),
228
+ sl-select[disabled]::part(base),
229
+ sl-textarea[disabled]::part(base){
230
+ background: var(--sqm-input-disabled-background, #f5f5f5);
231
+ border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
232
+ }
200
233
 
201
- *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
202
- background: var(--sqm-input-disabled-background, #f5f5f5);
203
- color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
204
- }
205
234
 
206
- *::part(input):-webkit-autofill {
207
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
208
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
209
- }
235
+ /* Corrected: Target sl-input::part(input) for autofill */
236
+ sl-input::part(input):-webkit-autofill {
237
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
238
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
239
+ }
210
240
 
211
- *::part(input):-webkit-autofill:hover {
212
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
213
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
214
- }
241
+ sl-input::part(input):-webkit-autofill:hover {
242
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
243
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
244
+ }
215
245
 
216
- *::part(input):-webkit-autofill:focus {
217
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
218
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
219
- }
220
- `;
246
+ sl-input::part(input):-webkit-autofill:focus {
247
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
248
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
249
+ }
250
+ `;
221
251
  export const UserInfoFormView = (props) => {
222
252
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
223
253
  const { states, states: { formState }, callbacks, text, refs, data, } = props;
package/dist/esm/sqm-banking-info-form_17.entry.js CHANGED
@@ -7367,95 +7367,125 @@ const vanillaStyle$4 = `
7367
7367
  min-width: 250px;
7368
7368
  }
7369
7369
 
7370
- *::part(primarybutton-base){
7371
- background-color: var(--sqm-primary-button-background);
7372
- color: var(--sqm-primary-button-color);
7373
- border-color: var(--sqm-primary-button-color-border);
7374
- border-radius: var(--sqm-primary-button-radius);
7375
- }
7370
+ /* Corrected: Target sl-button::part(base) for primary button */
7371
+ sl-button[type="primary"]::part(base){
7372
+ background-color: var(--sqm-primary-button-background);
7373
+ color: var(--sqm-primary-button-color);
7374
+ border-color: var(--sqm-primary-button-color-border);
7375
+ border-radius: var(--sqm-primary-button-radius);
7376
+ }
7376
7377
 
7377
- *::part(primarybutton-base):hover{
7378
- background-color: var(--sqm-primary-button-background-hover);
7379
- }
7378
+ sl-button[type="primary"]::part(base):hover{
7379
+ background-color: var(--sqm-primary-button-background-hover);
7380
+ }
7380
7381
 
7381
- *::part(primarybutton-base):focus{
7382
- box-shadow: none;
7383
- }
7382
+ sl-button[type="primary"]::part(base):focus{
7383
+ box-shadow: none;
7384
+ }
7384
7385
 
7385
- *::part(secondarybutton-base){
7386
- background-color: var(--sqm-secondary-button-background);
7387
- color: var(--sqm-secondary-button-color);
7388
- border-color: var(--sqm-secondary-button-color-border);
7389
- border-radius: var(--sqm-secondary-button-radius);
7390
- }
7386
+ /* Corrected: Target sl-button::part(base) for secondary button */
7387
+ sl-button[type="secondary"]::part(base){
7388
+ background-color: var(--sqm-secondary-button-background);
7389
+ color: var(--sqm-secondary-button-color);
7390
+ border-color: var(--sqm-secondary-button-color-border);
7391
+ border-radius: var(--sqm-secondary-button-radius);
7392
+ }
7391
7393
 
7392
- *::part(secondarybutton-base):hover{
7393
- background-color: var(--sqm-secondary-button-background-hover);
7394
- }
7394
+ sl-button[type="secondary"]::part(base):hover{
7395
+ background-color: var(--sqm-secondary-button-background-hover);
7396
+ }
7395
7397
 
7396
- *::part(tertiarybutton-base){
7397
- color: var(--sqm-text, var(--sl-color-neutral-800));
7398
- width: max-content;
7399
- display: flex;
7400
- margin: auto;
7401
- }
7398
+ /* Corrected: Target sl-button::part(base) for tertiary button */
7399
+ sl-button[type="tertiary"]::part(base){
7400
+ color: var(--sqm-text, var(--sl-color-neutral-800));
7401
+ width: max-content;
7402
+ display: flex;
7403
+ margin: auto;
7404
+ }
7402
7405
 
7403
- *::part(tertiarybutton-base):hover{
7404
- color: #1ed760;
7405
- }
7406
- *::part(primarybutton-base):focus{
7407
- box-shadow: none;
7408
- }
7406
+ sl-button[type="tertiary"]::part(base):hover{
7407
+ color: #1ed760;
7408
+ }
7409
7409
 
7410
- *::part(input-label), *::part(select-label), *::part(textarea-label){
7411
- font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
7412
- font-weight: var(--sl-font-weight-semibold);
7413
- color: var(--sqm-input-label-color, var(--sqm-text), black);
7414
- }
7410
+ /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
7411
+ /* If you only have one primary button, this is the better way to apply global button styling */
7412
+ /* sl-button[type="primary"]::part(base):focus{
7413
+ box-shadow: none;
7414
+ } */
7415
7415
 
7416
- *::part(input-base), *::part(select-base), *::part(textarea-base){
7417
- background-color: var(--sqm-input-background, #fff);
7418
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7419
- color: var(--sqm-input-color, white);
7420
- border-width: var(--sqm-border-width, 1px);
7421
- }
7422
7416
 
7423
- sqm-name-fields::part(input-base) {
7424
- background-color: var(--sqm-input-background, #fff);
7425
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7426
- color: var(--sqm-input-color, white);
7427
- border-width: var(--sqm-border-width, 1px);
7428
- }
7417
+ /* Corrected: Target sl-input, sl-select, sl-textarea labels */
7418
+ sl-input::part(label),
7419
+ sl-select::part(label),
7420
+ sl-textarea::part(label){
7421
+ font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
7422
+ font-weight: var(--sl-font-weight-semibold);
7423
+ color: var(--sqm-input-label-color, var(--sqm-text), black);
7424
+ }
7429
7425
 
7426
+ /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
7427
+ sl-input::part(base),
7428
+ sl-select::part(base),
7429
+ sl-textarea::part(base){
7430
+ background-color: var(--sqm-input-background, #fff);
7431
+ border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7432
+ color: var(--sqm-input-color, white);
7433
+ border-width: var(--sqm-border-width, 1px);
7434
+ border-style: solid; /* Added for completeness */
7435
+ border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
7436
+ }
7430
7437
 
7438
+ /* REMOVED: This rule is out of place here.
7439
+ If sqm-name-fields is a separate component, its internal styles
7440
+ should target sl-input::part(base) within its own stylesheet.
7441
+ sqm-name-fields::part(input-base) {
7442
+ background-color: var(--sqm-input-background, #fff);
7443
+ border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
7444
+ color: var(--sqm-input-color, white);
7445
+ border-width: var(--sqm-border-width, 1px);
7446
+ }
7447
+ */
7431
7448
 
7432
- sl-input::part(base):focus,
7433
- sl-select::part(form-control-wrapper):focus,
7434
- sl-textarea::part(textarea-label):focus {
7435
- border-color: none;
7436
- border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
7437
- }
7449
+ /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
7450
+ sl-input::part(base):focus,
7451
+ sl-select::part(base):focus, /* Corrected part name for sl-select */
7452
+ sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
7453
+ /* border-color: none; -- REMOVED: Invalid property value */
7454
+ border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
7455
+ }
7438
7456
 
7439
- *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
7440
- background: var(--sqm-input-disabled-background, #f5f5f5);
7441
- color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
7442
- }
7457
+ /* Corrected: Target [disabled] host element then its part */
7458
+ sl-input[disabled]::part(label),
7459
+ sl-select[disabled]::part(label),
7460
+ sl-textarea[disabled]::part(label){
7461
+ /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
7462
+ color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
7463
+ }
7464
+ /* Add rules for the disabled base parts if you want background/border */
7465
+ sl-input[disabled]::part(base),
7466
+ sl-select[disabled]::part(base),
7467
+ sl-textarea[disabled]::part(base){
7468
+ background: var(--sqm-input-disabled-background, #f5f5f5);
7469
+ border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
7470
+ }
7443
7471
 
7444
- *::part(input):-webkit-autofill {
7445
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7446
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7447
- }
7448
7472
 
7449
- *::part(input):-webkit-autofill:hover {
7450
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7451
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7452
- }
7473
+ /* Corrected: Target sl-input::part(input) for autofill */
7474
+ sl-input::part(input):-webkit-autofill {
7475
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7476
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7477
+ }
7453
7478
 
7454
- *::part(input):-webkit-autofill:focus {
7455
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7456
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7457
- }
7458
- `;
7479
+ sl-input::part(input):-webkit-autofill:hover {
7480
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7481
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7482
+ }
7483
+
7484
+ sl-input::part(input):-webkit-autofill:focus {
7485
+ box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
7486
+ -webkit-text-fill-color: var(--sqm-input-color, white) !important;
7487
+ }
7488
+ `;
7459
7489
  const UserInfoFormView = (props) => {
7460
7490
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
7461
7491
  const { states, states: { formState }, callbacks, text, refs, data, } = props;