[Release] Stage to Main 03/09

creativecloud/blocks/firefly-carousel/firefly-carousel.css

@@ -5,11 +5,9 @@
   --ff-nav-size: 40px;
   --ff-control-gap: 8px;
   --ff-card-border-radius: 16px;
+
   padding: 0;
   position: relative;
-}
-
-.firefly-carousel {
   width: 100%;
 }
 
@@ -136,11 +134,12 @@
   z-index: 1;
   border-radius: 90.909px;
   background: #010101;
-  backdrop-filter: blur(13.63636302947998px);
+  backdrop-filter: blur(12px);
   border: none;
   cursor: pointer;
 }
 
+.firefly-carousel .firefly-carousel-nav-btn:hover::after,
 .firefly-carousel .firefly-carousel-nav-btn:focus-visible::after {
   content: '';
   position: absolute;
@@ -220,4 +219,9 @@
     font-size: 22px;
     letter-spacing: -0.22px;
   }
+
+  .firefly-carousel .firefly-carousel-nav-btn svg {
+    width: 16px;
+    height: 16px;
+  }
 }

creativecloud/blocks/firefly-carousel/firefly-carousel.js

@@ -33,10 +33,10 @@ const ICONS = {
 <path d="M14.4001 12.6001V3.4001C14.4001 2.40752 13.5927 1.6001 12.6001 1.6001H3.4001C2.40752 1.6001 1.6001 2.40752 1.6001 3.4001V6.37431C1.6001 6.70556 1.86885 6.97431 2.2001 6.97431C2.53135 6.97431 2.8001 6.70556 2.8001 6.37431V3.4001C2.8001 3.06924 3.06924 2.8001 3.4001 2.8001H12.6001C12.931 2.8001 13.2001 3.06924 13.2001 3.4001V12.6001C13.2001 12.931 12.931 13.2001 12.6001 13.2001H9.55127C9.22002 13.2001 8.95127 13.4689 8.95127 13.8001C8.95127 14.1313 9.22002 14.4001 9.55127 14.4001H12.6001C13.5927 14.4001 14.4001 13.5927 14.4001 12.6001Z" fill="#292929"/>
 <path d="M8.7999 7.79995V11.1941C8.7999 11.5253 8.53115 11.7941 8.1999 11.7941C7.86865 11.7941 7.5999 11.5253 7.5999 11.1941V9.24839L2.42412 14.4242C2.30693 14.5414 2.15341 14.6 1.9999 14.6C1.84639 14.6 1.69287 14.5414 1.57568 14.4242C1.34131 14.1898 1.34131 13.8101 1.57568 13.5757L6.75147 8.39995H4.80576C4.47452 8.39995 4.20576 8.1312 4.20576 7.79995C4.20576 7.4687 4.47452 7.19995 4.80576 7.19995H8.19991C8.53116 7.19995 8.7999 7.4687 8.7999 7.79995Z" fill="#292929"/>
 </svg>`,
-  navPrev: `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none">
+  navPrev: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" fill="none" aria-hidden="true" focusable="false">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8962 5.43899C10.8959 5.04764 10.5786 4.73011 10.1872 4.73L2.43621 4.73L4.95379 2.21243C5.23038 1.93558 5.23035 1.48734 4.95379 1.21047C4.67688 0.933565 4.22778 0.933585 3.95086 1.21047L0.223322 4.93801C-0.0535953 5.21493 -0.0535948 5.66402 0.223323 5.94094L3.95087 9.66946C4.22773 9.94612 4.67692 9.94611 4.9538 9.66946C5.23062 9.3926 5.23052 8.94345 4.95379 8.66653L2.43524 6.14797L10.1872 6.14797C10.5787 6.14787 10.8962 5.83054 10.8962 5.43899Z" fill="white"/>
 </svg>`,
-  navNext: `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none">
+  navNext: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" fill="none" aria-hidden="true" focusable="false">
 <path d="M0.0149484 5.43996C0.0151864 5.04861 0.332549 4.73109 0.723932 4.73098L8.47491 4.73098L5.95733 2.2134C5.68073 1.93656 5.68076 1.48831 5.95733 1.21145C6.23423 0.934542 6.68334 0.934562 6.96026 1.21145L10.6878 4.93899C10.9647 5.21591 10.9647 5.665 10.6878 5.94192L6.96027 9.67043C6.6834 9.9471 6.23421 9.94709 5.95734 9.67043C5.68051 9.39358 5.68061 8.94443 5.95733 8.6675L8.47589 6.14895L0.723934 6.14895C0.332403 6.14884 0.0149488 5.83152 0.0149484 5.43996Z" fill="white"/>
 </svg>`,
 };

creativecloud/blocks/firefly-howto/firefly-howto.js

@@ -171,7 +171,7 @@ function createAccordionItem(data) {
   itemWrapper.addEventListener('click', handleItemClick);
   const header = createTag('h3', { class: 'firefly-howto-header' });
 
-  const btn = createTag('button', { class: 'firefly-howto-trigger', id: `btn-${headingId}`, 'aria-expanded': isOpen, type: 'button', 'aria-controls': `panel-${headingId}` });
+  const btn = createTag('button', { class: 'firefly-howto-trigger', id: `btn-${headingId}`, 'aria-expanded': 'false', type: 'button', 'aria-controls': `panel-${headingId}` });
 
   const titleSpan = createTag('span', { class: 'firefly-howto-title' });
   titleSpan.textContent = title;
@@ -187,7 +187,7 @@ function createAccordionItem(data) {
   btn.appendChild(iconSpan);
   header.appendChild(btn);
 
-  const panel = createTag('div', { class: 'firefly-howto-panel', id: `panel-${headingId}`, role: 'region', 'aria-labelledby': `btn-${headingId}` });
+  const panel = createTag('div', { class: 'firefly-howto-panel', id: `panel-${headingId}` });
   const panelInner = createTag('div', { class: 'firefly-howto-panel-inner' });
   const contentWrapper = createTag('div', { class: 'firefly-howto-content' });
 

creativecloud/blocks/firefly-share/firefly-share.css

@@ -1,7 +1,8 @@
 .firefly-share {
   --svg-icon-dimension: 24px;
-  --list-gap: 28px; 
+  --list-gap: 26px; 
   --copy-tooltip-background-color: #6D6D6D;
+
   margin-left: auto;
   margin-right: auto;
   text-align: center;
@@ -10,12 +11,19 @@
 
 .firefly-share.inline {
   overflow: unset;
+  margin: 0 auto;
+  text-align: center;
+  padding: 8px 0 16px;
 }
 
 .firefly-share.dark {
   background-color: #1E1E1E;
 }
 
+.firefly-share :is(a, .copy-to-clipboard) svg.icon:hover {
+  filter: brightness(0.7);
+}
+
 .firefly-share svg.icon {
   height: var(--svg-icon-dimension);
   transition: filter 0.3s;
@@ -47,9 +55,16 @@
   margin-bottom: 2.75rem;
 }
 
+.firefly-share .icon-container li > :is(a, button) {
+  outline-offset: 1px;
+}
+
+.firefly-share ul.icon-container svg {
+  color: #222;
+}
 
 .firefly-share.xxl-heading :is([role="heading"], h1, h2, h3, h4, h5, h6) {
-  font-size: 1.5rem;
+  font-size: 22px;
   font-weight: 900;
   letter-spacing: -4.5%;
 }
@@ -59,10 +74,6 @@
   color: var(--color-white);
 }
 
-.firefly-share ul.icon-container svg {
-  color: #222;
-}
-
 .firefly-share li:has(.copy-to-clipboard) {
   position: relative;
 }
@@ -87,14 +98,6 @@
   margin-left: -2px;
 }
 
-.firefly-share .icon-container li > :is(a, button) {
-  outline-offset: 1px;
-}
-
-.firefly-share :is(a, .copy-to-clipboard) svg.icon:hover {
-  filter: brightness(0.7);
-}
-
 .firefly-share .copy-to-clipboard::before,
 .firefly-share .copy-to-clipboard::after {
   display: block;
@@ -165,17 +168,18 @@
   content: attr(data-copied);
 }
 
-.firefly-share.inline {
-  margin: 0 auto;
-  text-align: center;
-  padding: 8px 0 16px;
-}
-
 .firefly-share.inline ul.icon-container {
   justify-content: flex-start;
   margin: 0;
 }
 
+.firefly-share.left-mobile ul.icon-container {
+    max-width: var(--grid-container-width);
+    margin-left : auto;
+    margin-right: auto;
+    justify-content: start;
+  }
+
 main > .section > firefly-share.inline {
   margin: 0 auto;
 }
@@ -190,25 +194,22 @@ main > .section.center firefly-share.inline ul.icon-container {
   justify-content: center;
 }
 
-@media screen and (min-width: 360px) {
-  .firefly-share.left-mobile .tracking-header {
+.firefly-share.left-mobile .tracking-header {
     max-width: var(--grid-container-width);
     margin: 0 auto;
   }
 
-  .firefly-share.left-mobile :is([role="heading"], h1, h2, h3, h4, h5, h6) {
+.firefly-share.left-mobile :is([role="heading"], h1, h2, h3, h4, h5, h6) {
     text-align: start;
   }
-
-  .firefly-share.left-mobile ul.icon-container {
-    max-width: calc(var(--grid-container-width) - 2px);
-    margin-left : auto;
-    margin-right: auto;
-    justify-content: space-around;
-  }
-}
+
 
 @media screen and (min-width: 600px) {
+  .firefly-share :is([role="heading"], h1, h2, h3, h4, h5, h6) {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
   .firefly-share.left-mobile .tracking-header {
     max-width: 100%;
     margin: 0;
@@ -223,11 +224,6 @@ main > .section.center firefly-share.inline ul.icon-container {
     justify-content: center;
   }
 
-  .firefly-share :is([role="heading"], h1, h2, h3, h4, h5, h6) {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-  }
-
   .firefly-share .copy-to-clipboard::before,
   [dir="rtl"] firefly-share .copy-to-clipboard::before {
     left: 50%;
@@ -243,7 +239,7 @@ main > .section.center firefly-share.inline ul.icon-container {
 
 @media (min-width: 900px){
   .firefly-share {
-    --svg-icon-dimension: 40px;
+    --svg-icon-dimension: 30px;
     --list-gap: 56px;
   }
 
@@ -267,7 +263,6 @@ main > .section.center firefly-share.inline ul.icon-container {
 
   .firefly-share.xxl-heading :is([role="heading"], h1, h2, h3, h4, h5, h6) {
     font-size: 40px;
-    font-weight: 900;
   }
 
   .firefly-share ul.icon-container {

creativecloud/blocks/upload-marquee/upload-marquee.css

@@ -15,7 +15,7 @@
   --um-shadow-layout: 0 4px 24px rgb(0 0 0 / 12%);
   --um-text-shadow: 0 4px 39px rgb(0 0 0 / 25%);
   --um-drop-zone-border: 2px dashed rgb(255 255 255 / 50%);
-  --um-cta-border: 2px solid rgb(255 255 255 / 35%);
+  --um-cta-border: 2px solid var(--um-white);
 
   position: relative;
   overflow: hidden;
@@ -29,6 +29,7 @@
 }
 
 .upload-marquee-block .action-button {
+  font-family: var(--body-font-family);
   border-radius: var(--um-radius-pill);
   border: 0;
   background: var(--um-accent-strong);
@@ -38,7 +39,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 50px;
   padding: 12px 24px 14px;
   font-size: 19px;
   font-weight: 700;
@@ -211,7 +211,7 @@
   border: var(--um-cta-border);
   border-radius: var(--um-radius-pill);
   box-sizing: border-box;
-  font-size: 17px;
+  font-size: 21px;
   font-weight: 700;
   line-height: 21px;
   text-decoration: none;
@@ -253,13 +253,14 @@
   padding: 0;
   margin: 0;
   max-width: none;
+  text-align: center;
 }
 
 .upload-marquee-block .drop-zone {
   border: var(--um-drop-zone-border);
   border-radius: var(--um-radius-sm);
   padding: 34px 24px;
-  margin: 0;
+  margin-top: 24px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -407,16 +408,20 @@
     min-height: auto;
     height: 100%;
     align-self: stretch;
-    align-items: stretch;
-    padding: 24px 24px 24px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0px clamp(0px, calc(5vw - 45px), 56px) 0px 0;
+    box-sizing: border-box;
   }
 
   .upload-marquee-block .upload-marquee-media {
-    height: 100%;
+    height: auto;
+    width: 100%;
   }
 
   .upload-marquee-block .upload-marquee-right .media-container {
-    min-height: 100%;
+    width: 100%;
     max-height: 100%;
   }