@clerk/mosaic 0.2.0-canary.v20261030195726 → 0.2.0

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 (2) hide show
  1. package/CHANGELOG.md +105 -0
  2. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,110 @@
1
1
  # @clerk/mosaic
2
2
 
3
+ ## 0.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - **Breaking:** Replace and remove color tokens. TypeScript does not flag these, so find usages with `git grep -nE -e '--cl-color-(background|brand-secondary)'`. ([#10493](https://github.com/clerk/javascript/pull/10493)) by [@prestonwebdev](https://github.com/prestonwebdev)
8
+
9
+ | Before | After |
10
+ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
11
+ | `--cl-color-background` | `--cl-color-page` for the profile shell, `--cl-color-surface` for anything raised on it, such as cards, menus and controls |
12
+ | `--cl-color-background-subtle` | `--cl-color-surface-subtle` |
13
+ | `--cl-color-brand-secondary` | Removed, with no direct replacement. Choose another token by where it is used. |
14
+
15
+ Dark mode gives the profile its own shell color. `--cl-color-background` is replaced by `--cl-color-page`, the base layer (near-black in dark mode, white in light), which backs the profile shell. A new `--cl-color-surface` backs everything raised on it, such as cards, sections, menus, popovers and controls, and the gray ramp mixes into it. The surface is derived from the page (neutral mixed 5 percent into it in dark mode, white mixed 60 percent into it in light mode), so retinting `--cl-color-page` retints the shell, the surface and the ramp together, and with the default white page the shell, surface and borders look the same in light mode. `--cl-color-background-subtle` is renamed `--cl-color-surface-subtle`.
16
+
17
+ Brand and the negative, positive and warning colors now share one set of derived tokens: `-foreground`, `-subtle`, `-border` and `-alpha-100|200|300`, so overriding a seed retints its companions. `-foreground` flips to dark text in dark mode for brand, positive and warning, where white would fail, while negative keeps white text. `--cl-color-brand-secondary` is removed. `--cl-color-neutral-subtle` is new. `--cl-color-border` and `--cl-color-border-subtle` are now neutral washes (7 and 4 percent in light mode, 12 and 8 in dark mode), so they stay visible on the surface and faded fills.
18
+
19
+ In light mode the negative, positive and warning colors are slightly darker so their text passes contrast on their own `-subtle` fill, `--cl-color-foreground-secondary` is a little darker, and `--cl-color-input-placeholder` has its own value that now passes contrast on the field.
20
+
21
+ - **Breaking:** Nest localization keys under the component they appear in, for example `userProfileMfa.label` is now `userProfile.mfa.label`. Update any `localization` overrides that use the old keys, written as nested objects or dot paths; TypeScript flags each one. Keys below a root stay the same unless listed here. ([#10458](https://github.com/clerk/javascript/pull/10458)) by [@alexcarpenter](https://github.com/alexcarpenter)
22
+
23
+ | Before | After |
24
+ | -------------------------------------- | ----------------------------------------- |
25
+ | `apiKeysTable` | `apiKeys` |
26
+ | `membersTableTab` | `organizationProfile.members.list` |
27
+ | `invitationsTableTab` | `organizationProfile.members.invitations` |
28
+ | `requestsTableTab` | `organizationProfile.members.requests` |
29
+ | `organizationProfileInviteMembers` | `organizationProfile.members.invite` |
30
+ | `organizationProfileProfileSection` | `organizationProfile.profile` |
31
+ | `organizationProfileDangerSection` | `organizationProfile.danger` |
32
+ | `userProfileProfileSection` | `userProfile.profile` |
33
+ | `userProfileContact` | `userProfile.contact` |
34
+ | `userProfileContact.email` | `userProfile.email` |
35
+ | `userProfileContact.phone` | `userProfile.phone` |
36
+ | `userProfileAddEmail` | `userProfile.email.addDialog` |
37
+ | `userProfileAddPhone` | `userProfile.phone.addDialog` |
38
+ | `userProfileConnectedAccounts` | `userProfile.connectedAccounts` |
39
+ | `userProfileEnterpriseAccountsSection` | `userProfile.enterpriseAccounts` |
40
+ | `userProfileWeb3Wallets` | `userProfile.web3Wallets` |
41
+ | `userProfilePasswordSection` | `userProfile.password` |
42
+ | `userProfilePasskeys` | `userProfile.passkeys` |
43
+ | `userProfileMfa` | `userProfile.mfa` |
44
+ | `userProfileAddSms` | `userProfile.mfa.addSms` |
45
+ | `userProfileAddAuthenticator` | `userProfile.mfa.addAuthenticator` |
46
+ | `userProfileAuthenticatorSetup` | `userProfile.mfa.authenticatorSetup` |
47
+ | `userProfileBackupCodes` | `userProfile.mfa.backupCodes` |
48
+ | `userProfileActiveDevices` | `userProfile.activeDevices` |
49
+ | `userProfileDangerSection` | `userProfile.danger` |
50
+
51
+ Keys under `reverification` are also renamed:
52
+
53
+ | Before | After |
54
+ | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
55
+ | `alternativeMethods.title`, `.description` | `methods.title`, `.description` |
56
+ | `alternativeMethods.blockButton__<method>` | `methods.<method>` |
57
+ | `alternativeMethods.actionText` | `methods.helpText` |
58
+ | `alternativeMethods.actionLink` | `methods.help` |
59
+ | `alternativeMethods.getHelp.title`, `.description` | `help.title`, `.description` |
60
+ | `alternativeMethods.getHelp.blockButton__emailSupport` | `help.emailSupport` |
61
+ | `backupCodeMfa.*` | `backupCode.*` |
62
+ | `formFieldLabel__backupCode` | `backupCode.label` |
63
+ | `formFieldLabel__password` | `password.label` |
64
+ | `formFieldInputPlaceholder__password` | `password.placeholder` |
65
+ | `formFieldAction__showPassword`, `formFieldAction__hidePassword` | `password.showPassword`, `.hidePassword` |
66
+ | `emailCode.formTitle`, `phoneCode.formTitle`, `totpMfa.formTitle` | `emailCode.label`, `phoneCode.label`, `totp.label` |
67
+ | `emailCode.resendButton`, `phoneCode.resendButton` | `emailCode.resend`, `phoneCode.resend` |
68
+ | `totpMfa.title`, `.description` | `totp.title`, `.description` |
69
+ | `phoneCodeMfa.*` | `phoneCode.*`, with the renames above |
70
+ | `error.closeButton` | `error.close` |
71
+ | `backButton` | `back` |
72
+ | `formButtonPrimary` | `continue` |
73
+ | `footerActionLink__useAnotherMethod` | `useAnotherMethod` |
74
+ | `unstable__errors__generic` | `attemptFailed` |
75
+ | `passkey.blockButton__passkey`, `password.actionLink`, `formButtonReset`, `identityPreviewEditButton__*` | Removed. Delete the override. |
76
+
77
+ Find usages with:
78
+
79
+ ```sh
80
+ git grep -nE -e 'apiKeysTable|(members|invitations|requests)TableTab|organizationProfile(InviteMembers|DangerSection|ProfileSection)' \
81
+ -e 'userProfile(ActiveDevices|AddEmail|AddPhone|AddAuthenticator|AddSms|AuthenticatorSetup|BackupCodes|ConnectedAccounts|Contact|DangerSection|EnterpriseAccountsSection|Mfa|Passkeys|PasswordSection|ProfileSection|Web3Wallets)'
82
+ ```
83
+
84
+ - **Breaking:** Rename two `UserButton` and `OrganizationSwitcher` props. Values and defaults are unchanged; TypeScript flags each old name. ([#10554](https://github.com/clerk/javascript/pull/10554)) by [@alexcarpenter](https://github.com/alexcarpenter)
85
+
86
+ | Before | After |
87
+ | -------------------- | ------------------ |
88
+ | `renderTriggerLabel` | `showTriggerLabel` |
89
+ | `renderTriggerBadge` | `triggerBadge` |
90
+
91
+ Find usages with `git grep -nE 'renderTrigger(Label|Badge)'`.
92
+
93
+ ### Patch Changes
94
+
95
+ - Fix hover-enabled menus, such as the `UserButton` account and settings flyouts, sometimes closing when the pointer moved toward an item after the menu was opened with a click. ([#10533](https://github.com/clerk/javascript/pull/10533)) by [@alexcarpenter](https://github.com/alexcarpenter)
96
+
97
+ - Fix the user profile modal's return from a redirect on Next.js App Router apps: the URL change now reaches the router, so `useSearchParams` no longer keeps the removed param and going back no longer reloads the page. History state that isn't a plain object is also kept intact. ([#10550](https://github.com/clerk/javascript/pull/10550)) by [@alexcarpenter](https://github.com/alexcarpenter)
98
+
99
+ - Ellipsis menus, the dialog and card close buttons, the Cancel buttons in the confirmation, delete and rename dialogs, and the reverification Back button and resend and help links use the neutral color instead of the brand color, and the "You" badge in the members table is neutral. Field labels use the neutral text color, and disabled inputs and tag inputs are tinted with the neutral color. Email and phone values in the user profile use the primary text color. An interactive row's icon darkens fully on hover, and an outlined interactive row firms up its border on hover. ([#10494](https://github.com/clerk/javascript/pull/10494)) by [@prestonwebdev](https://github.com/prestonwebdev)
100
+
101
+ - The user profile modal now reopens on the Account page after a user leaves it to connect or reconnect a social or enterprise account, or to verify an email address through enterprise SSO. Mosaic no longer sends `__clerk_modal_state` on these redirects, so returning from them no longer opens the legacy profile modal. ([#10545](https://github.com/clerk/javascript/pull/10545)) by [@alexcarpenter](https://github.com/alexcarpenter)
102
+
103
+ - Suppress organization invitation success notifications when the members panel closes or the active organization or session changes before the invitation finishes. ([#10551](https://github.com/clerk/javascript/pull/10551)) by [@austincalvelage](https://github.com/austincalvelage)
104
+
105
+ - Updated dependencies [[`debfc72`](https://github.com/clerk/javascript/commit/debfc72bc2f49a004b20365773824b283bc3cda0)]:
106
+ - @clerk/shared@4.43.1
107
+
3
108
  ## 0.1.15
4
109
 
5
110
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clerk/mosaic",
3
- "version": "0.2.0-canary.v20261030195726",
3
+ "version": "0.2.0",
4
4
  "description": "Clerk Mosaic UI components",
5
5
  "keywords": [
6
6
  "clerk",
@@ -48,7 +48,7 @@
48
48
  "dependencies": {
49
49
  "@floating-ui/react": "0.27.20",
50
50
  "@wallet-standard/core": "1.1.1",
51
- "@clerk/shared": "4.43.1-canary.v20261030195726"
51
+ "@clerk/shared": "^4.43.1"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@stylexjs/eslint-plugin": "0.19.0",
@@ -74,7 +74,7 @@
74
74
  "react-dom": "18.3.1",
75
75
  "tsdown": "0.22.2",
76
76
  "vitest-axe": "^0.1.0",
77
- "@clerk/clerk-js": "6.42.1-canary.v20261030195726"
77
+ "@clerk/clerk-js": "^6.42.1"
78
78
  },
79
79
  "peerDependencies": {
80
80
  "react": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0",