Fix registration form field labels

[AndiLuo]

Description of the change

Fix field label styles of registration form inputs / selects

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation or Development tools (readme, specs, tests, code formatting)

Links

• Jira issue number: https://impact.atlassian.net/jira/software/c/projects/SQDEV/boards/1831?quickFilter=3698&selectedIssue=SQDEV-3934

Checklists

Development

• Prettier was run (if applicable)
• The behaviour changes in the pull request are covered by specs
• All tests related to the changed code pass in development

Paperwork

• This pull request has a descriptive title and information useful to a reviewer
• This pull request has a Jira number
• This pull request has a Process.st launch checklist

Code review

• Changes have been reviewed by at least one other engineer
• Security impacts of this change have been considered

[Copilot]

Pull request overview

Updates Mint Components’ form-field label typography to address incorrect label styles in registration (and related) forms by standardizing label font sizes/weights and ensuring consistent styling paths for Shoelace parts.

Changes:

• Adjusts Shoelace/Mint CSS variables and label part styling in global styles (font sizes + bold labels).
• Updates several component-scoped style blocks to use bold label weight for exported label parts.
• Updates sqm-user-attribute README prop typing and bumps @saasquatch/mint-components package version.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/mint-components/src/global/styles.ts	Tweaks global CSS variables and label part styling to fix label typography.
packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx	Updates exported label part styling to bold.
packages/mint-components/src/components/sqm-user-attribute/readme.md	Documents value as number | string to match component prop type.
packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx	Updates exported label part styling to bold.
packages/mint-components/src/components/sqm-lead-form/sqm-lead-dropdown-field-view.tsx	Updates select label styling to bold.
packages/mint-components/src/components/sqm-dropdown-field/sqm-dropdown-field-view.tsx	Updates select label styling to bold.
packages/mint-components/package.json	Bumps package version.
packages/mint-components/package-lock.json	Syncs lockfile version bump.

Files not reviewed (1)

• packages/mint-components/package-lock.json: Generated file

Suppressed comments (1)

packages/mint-components/src/global/styles.ts:977

• The new sl-input::part(label) rule hardcodes font-size and doesn't apply the same theme variables used for exported input-label parts (font family + label color + --sqm-input-label-font-size). This makes labeled sl-input instances without exportparts (e.g. tax/banking form definitions) render differently from the rest of the form field labels.

sl-input::part(label) {
  font-weight: var(--sl-font-weight-bold);
  font-size: var(--sl-input-font-size-small);
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• packages/mint-components/package-lock.json: Generated file

Suppressed comments (2)

packages/mint-components/src/global/styles.ts:977

• The new sl-input::part(label) rule hard-codes font-size: var(--sl-input-font-size-small) and omits font-family/color. This bypasses the existing theming variables (--sqm-input-label-font-size, --sqm-input-label-color) used everywhere else for label styling, so consumers can no longer consistently override label appearance for sl-input labels.

sl-input::part(label) {
  font-weight: var(--sl-font-weight-bold);
  font-size: var(--sl-input-font-size-small);
}

packages/mint-components/src/global/styles.ts:546

• --sl-input-label-font-size-medium is being set to the same value as the small label token (var(--sl-font-size-small)), which effectively removes the distinction between small/medium label sizes. This can break Shoelace size variants (and makes --sl-input-label-font-size-medium misleading). Consider restoring the medium token to var(--sl-font-size-medium) and control the desired label sizing via the dedicated overrides (e.g. --sqm-input-label-font-size / part styles).

  --sl-input-label-font-size-medium: var(--sl-font-size-small);

[Copilot]

Pull request overview

Copilot reviewed 8 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• packages/mint-components/package-lock.json: Generated file

Suppressed comments (5)

packages/mint-components/src/global/styles.ts:970

• The label font-size fallback is using --sl-input-font-size-small (input text) instead of the label-specific token --sl-input-label-font-size-small, which can cause label sizing to drift if label and input typography diverge.

  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
  font-weight: var(--sl-font-weight-bold);

packages/mint-components/package-lock.json:9

• The lockfile’s root package entry (packages[""]) version is 2.2.1-4 but package.json is 2.2.0. Keep these aligned (typically by leaving the lockfile at the current package.json version and letting Changesets handle the bump).
  packages/mint-components/src/global/styles.ts:977
• sl-input::part(label) sets font-size from --sl-input-font-size-small (input text token). For consistency with the rest of the label styling (and --sqm-input-label-font-size), this should use the label font-size token instead.

sl-input::part(label) {
  font-weight: var(--sl-font-weight-bold);
  font-size: var(--sl-input-font-size-small);
}

packages/mint-components/package-lock.json:3

• package-lock.json now lists version 2.2.1-4, but packages/mint-components/package.json is still 2.2.0. Unless you’re intentionally bumping package.json in this PR, revert the lockfile’s package version to match to avoid inconsistent package metadata.

This issue also appears on line 7 of the same file.
packages/mint-components/src/components/sqm-user-attribute/readme.md:16

• The value prop is now documented as number | string, but the demoData type in the same table still restricts value to string. Update demoData.value to allow number | string as well so the docs are internally consistent.

| `demoData`   | --            |                                  | `{ loading?: boolean; value?: string; fontSize?: number; color?: string; fontWeight?: number; }` | `undefined` |
| `fontSize`   | `font-size`   | Number in pixels.                | `number`                                                                                         | `undefined` |
| `fontWeight` | `font-weight` | Font weight                      | `number`                                                                                         | `undefined` |
| `value`      | `value`       | The custom field key to display. | `number \| string`                                                                               | `undefined` |

[Copilot]

Pull request overview

Copilot reviewed 8 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• packages/mint-components/package-lock.json: Generated file

Suppressed comments (7)

packages/mint-components/src/global/styles.ts:977

• sl-input::part(label) sets the label font size using --sl-input-font-size-small (input text token). For consistency with the label styling above and the existing --sl-input-label-font-size-small token, this should use the label token (or the --sqm-input-label-font-size variable).

sl-input::part(label) {
  font-weight: var(--sl-font-weight-bold);
  font-size: var(--sl-input-font-size-small);
}

packages/mint-components/src/global/styles.ts:971

• The fallback token for label font size uses --sl-input-font-size-small (input text token). Since this rule is specifically for labels and the codebase defines --sl-input-label-font-size-small, using the label token avoids label sizing drifting if label/input typography diverge.

*::part(input-label), *::part(select-label), *::part(textarea-label){
  font-family: var(--sqm-primary-font);
  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
  font-weight: var(--sl-font-weight-bold);
  color: var(--sqm-input-label-color, var(--sqm-text), black);

packages/mint-components/package-lock.json:10

• The root package entry in package-lock.json was manually bumped while a Changeset remains in the repo. Changesets-driven versioning typically updates these fields as part of the versioning step; manual edits risk double bumps or mismatches.
  packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx:37
• This label rule falls back to --sl-input-font-size-small (input text token). Since it targets labels, use --sl-input-label-font-size-small (or --sqm-input-label-font-size) to avoid label/input font-size drift.

*::part(input-label), *::part(select-label), *::part(textarea-label){
  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
  font-weight: var(--sl-font-weight-bold);
  color: var(--sqm-input-label-color, var(--sqm-text), black);
}

packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx:129

• This label rule falls back to --sl-input-font-size-small (input text token). Since it targets labels, use --sl-input-label-font-size-small (or --sqm-input-label-font-size) to avoid label/input font-size drift.

*::part(input-label), *::part(select-label), *::part(textarea-label){
  font-family: var(--sqm-primary-font);
  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
  font-weight: var(--sl-font-weight-bold);
  color: var(--sqm-input-label-color, var(--sqm-text), black);
}

packages/mint-components/package.json:5

• This PR adds a Changeset file, but also manually bumps the package version. In the Changesets workflow, versions are updated by running changeset version (which consumes/removes the Changeset file) or by the release automation; keeping both the manual version bump and the pending Changeset will cause the next versioning pass to bump again.

  "name": "@saasquatch/mint-components",
  "title": "Mint Components",
  "version": "2.2.1-0",
  "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",

packages/mint-components/package-lock.json:4

• package-lock.json version was updated alongside a manual package version bump, but the PR still includes a pending Changeset. This can lead to inconsistent/duplicate bumps when Changesets is applied later.

This issue also appears on line 7 of the same file.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• packages/mint-components/package-lock.json: Generated file

Suppressed comments (3)

packages/mint-components/src/global/styles.ts:977

• sl-input::part(label) sets font-size directly to --sl-input-font-size-small, which overrides the more general *::part(input-label) styling and prevents --sqm-input-label-font-size (set earlier in this file) from taking effect for sl-input labels. This makes theme/config label sizing ineffective for sl-input specifically.

sl-input::part(label) {
  font-weight: var(--sl-font-weight-bold);
  font-size: var(--sl-input-font-size-small);
}

packages/mint-components/package-lock.json:10

• The lockfile entry for the workspace package (packages[""]) also has version: 2.2.1-0, which is inconsistent with packages/mint-components/package.json (2.2.0). If this PR isn't running changeset version, the lockfile should keep the existing version to avoid drift.
  packages/mint-components/package-lock.json:4
• package-lock.json now lists the package version as 2.2.1-0, but packages/mint-components/package.json is still 2.2.0 and this PR includes a changeset for versioning. Committing a lockfile-only version bump can create confusing, inconsistent metadata and churn in downstream installs.

This issue also appears on line 7 of the same file.