From a203a3fb0407a11cae84c0f904970f636eadf2c9 Mon Sep 17 00:00:00 2001
From: kaftarmery <merykft@gmail.com>
Date: Wed, 8 Jan 2025 18:11:54 +0300
Subject: [PATCH 1/4] Keyless toast UI behavior

---
 packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
index bfc68e41498..2c6e6ab82a1 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
@@ -27,7 +27,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
   return (
     <Portal>
       <Flex
-        data-expanded={isExpanded}
+        data-expanded={claimed || isExpanded}
         align='center'
         sx={t => ({
           position: 'fixed',
@@ -61,7 +61,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
       >
         <button
           type='button'
-          aria-expanded={isExpanded}
+          aria-expanded={claimed || isExpanded}
           aria-controls={contentIdentifier}
           id={buttonIdentifier}
           onClick={() => !claimed && setIsExpanded(prev => !prev)}

From ef0d67850243c61859d1005d8a6de09ba950ef77 Mon Sep 17 00:00:00 2001
From: kaftarmery <merykft@gmail.com>
Date: Wed, 8 Jan 2025 18:14:31 +0300
Subject: [PATCH 2/4] Changeset

---
 .changeset/shaggy-otters-hug.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaggy-otters-hug.md

diff --git a/.changeset/shaggy-otters-hug.md b/.changeset/shaggy-otters-hug.md
new file mode 100644
index 00000000000..855c931a374
--- /dev/null
+++ b/.changeset/shaggy-otters-hug.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update keyless toast UI's collapse behavior

From 3e05c549c9861221281a4df4b9a586f8c4cac675 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 8 Jan 2025 22:53:32 +0200
Subject: [PATCH 3/4] derive forced expanded state

---
 .../src/ui/components/KeylessPrompt/index.tsx  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
index 2c6e6ab82a1..b36262632bb 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
@@ -24,10 +24,12 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
   const [isExpanded, setIsExpanded] = useState(true);
   const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt);
 
+  const isForcedExpanded = claimed || isExpanded;
+
   return (
     <Portal>
       <Flex
-        data-expanded={claimed || isExpanded}
+        data-expanded={isForcedExpanded}
         align='center'
         sx={t => ({
           position: 'fixed',
@@ -61,7 +63,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
       >
         <button
           type='button'
-          aria-expanded={claimed || isExpanded}
+          aria-expanded={isForcedExpanded}
           aria-controls={contentIdentifier}
           id={buttonIdentifier}
           onClick={() => !claimed && setIsExpanded(prev => !prev)}
@@ -103,7 +105,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                   width: 1rem;
                   height: 1rem;
                   transform-style: preserve-3d;
-                  animation: ${isExpanded ? 'coinFlipAnimation 12s infinite linear' : ' none'};
+                  animation: ${isForcedExpanded ? 'coinFlipAnimation 12s infinite linear' : ' none'};
 
                   @keyframes coinFlipAnimation {
                     0%,
@@ -160,7 +162,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
 
             <p
               data-text='Clerk is in keyless mode'
-              aria-label={claimed && isExpanded ? 'Missing environment keys' : 'Clerk is in keyless mode'}
+              aria-label={claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'}
               css={css`
                 color: #d9d9d9;
                 font-size: 0.875rem;
@@ -191,7 +193,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                   background-clip: text;
                   filter: blur(1.2px);
                   animation: ${
-                    isExpanded
+                    isForcedExpanded
                       ? 'text-shimmer-expanded 3s infinite ease-out forwards'
                       : 'text-shimmer 3s infinite ease-out forwards'
                   };
@@ -220,7 +222,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                   background-size: 180% 100%;
                   background-clip: text;
                   animation: ${
-                    isExpanded
+                    isForcedExpanded
                       ? 'text-shimmer-expanded 3s infinite ease-out forwards'
                       : 'text-shimmer 3s infinite ease-out forwards'
                   };
@@ -316,7 +318,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
           role='region'
           id={contentIdentifier}
           aria-labelledby={buttonIdentifier}
-          hidden={!isExpanded}
+          hidden={!isForcedExpanded}
         >
           <p
             css={css`
@@ -371,7 +373,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
           href={claimed ? _props.copyKeysUrl : _props.claimUrl}
           target='_blank'
           rel='noopener noreferrer'
-          data-expanded={isExpanded}
+          data-expanded={isForcedExpanded}
           css={css`
             display: flex;
             align-items: center;

From 8b97e3f0ceef269f53a6c693e03441c2260147ec Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 8 Jan 2025 22:59:57 +0200
Subject: [PATCH 4/4] Update .changeset/shaggy-otters-hug.md

---
 .changeset/shaggy-otters-hug.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/shaggy-otters-hug.md b/.changeset/shaggy-otters-hug.md
index 855c931a374..679f6a13a84 100644
--- a/.changeset/shaggy-otters-hug.md
+++ b/.changeset/shaggy-otters-hug.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Update keyless toast UI's collapse behavior
+Updates Keyless UI to automatically expand when the application has been claimed.