MAX FF Redesign push to stage

unitylibs/core/workflow/workflow-firefly/action-binder.js

@@ -382,17 +382,45 @@ export default class ActionBinder {
   getFocusElems() {
     let elmSelector = '.drop-item';
     if (this.viewport !== 'MOBILE') elmSelector = `${elmSelector}, .legal-text`;
-    const selector = `.inp-field, .gen-btn, ${elmSelector}`;
-    return Array.from(this.block.querySelectorAll(selector));
+    const baseSelector = `.selected-verb, .selected-model, .inp-field, .gen-btn, ${elmSelector}`;
+    const openVerbMenu = this.block.querySelector('.verbs-container.show-menu .verb-link');
+    const openModelMenu = this.block.querySelector('.models-container.show-menu .verb-link');
+    if (openVerbMenu || openModelMenu) {
+      const menuSelector = openVerbMenu ? '.verbs-container.show-menu .verb-link' : '.models-container.show-menu .verb-link';
+      return Array.from(this.block.querySelectorAll(menuSelector));
+    }
+    return Array.from(this.block.querySelectorAll(baseSelector));
   }
 
   isDropdownVisible = () => !this.dropdown?.classList.contains('hidden');
 
   handleTab(event, focusableElements, dropItems, currentIndex) {
     if (!focusableElements.length) return;
-    event.preventDefault();
     const isShift = event.shiftKey;
     const currentElement = document.activeElement;
+    const isFirstElement = currentIndex === 0;
+    const isLastElement = currentIndex === focusableElements.length - 1;
+    const openVerbMenu = this.block.querySelector('.verbs-container.show-menu');
+    const openModelMenu = this.block.querySelector('.models-container.show-menu');
+    const isMenuOpen = openVerbMenu || openModelMenu;
+    if (isMenuOpen) {
+      if ((isShift && isFirstElement) || (!isShift && isLastElement)) {
+        event.preventDefault();
+        const menuButton = openVerbMenu?.querySelector('.selected-verb') || openModelMenu?.querySelector('.selected-model');
+        if (menuButton) {
+            (openVerbMenu || openModelMenu).classList.remove('show-menu');
+            menuButton.setAttribute('aria-expanded', 'false');
+            menuButton.focus();
+        }
+        return;
+      }
+    } else {
+      if ((isShift && isFirstElement) || (!isShift && isLastElement)) {
+        this.hideDropdown();
+        return;
+      }
+    }
+    event.preventDefault();
     if (currentElement.classList.contains('tip-con')) {
       if (!isShift) {
         const legalText = this.block.querySelector('.legal-text');
@@ -402,9 +430,7 @@ export default class ActionBinder {
         }
       }
     }
-    const nextIndex = isShift
-      ? (currentIndex - 1 + focusableElements.length) % focusableElements.length
-      : (currentIndex + 1) % focusableElements.length;
+    const nextIndex = isShift ? currentIndex - 1 : currentIndex + 1;
     focusableElements[nextIndex].focus();
     const newActiveIndex = dropItems.indexOf(focusableElements[nextIndex]);
     this.activeIndex = newActiveIndex !== -1 ? newActiveIndex : -1;

unitylibs/core/workflow/workflow-firefly/widget.css

@@ -1,3 +1,7 @@
+:root:has(.hide-video-models) .unity-enabled .interactive-area .ex-unity-wrap[data-selected-verb='video'] .models-container {
+  display: none;
+}
+
 .hero-marquee.unity-enabled,
 .showcase-marquee.unity-enabled {
   overflow: unset;
@@ -203,6 +207,7 @@
 :root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area.dark .ex-unity-wrap .ex-unity-widget .autocomplete {
   border: 3px solid rgba(255 255 255 / 15%);
   backdrop-filter: blur(125px);
+  box-shadow: 0 100px 80px 0 rgba(0 0 0 / 21%), 0 41.778px 33.422px 0 rgba(0 0 0 / 15%), 0 22.336px 17.869px 0 rgba(0 0 0 / 13%), 0 12.522px 10.017px 0 rgba(0 0 0 / 10%), 0 6.65px 5.32px 0 rgba(0 0 0 / 8%), 0 2.767px 2.214px 0 rgba(0 0 0 / 6%);
 }
 
 :root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area.light .ex-unity-wrap .ex-unity-widget .autocomplete {
@@ -219,7 +224,7 @@
 }
 
 :root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area .ex-unity-wrap .ex-unity-widget .inp-wrap {
-  padding: 20px 22px 20px 26px;
+  padding: 20px 22px 18px 26px;
 }
 
 .unity-enabled .interactive-area .ex-unity-wrap.verb-options .ex-unity-widget .autocomplete,
@@ -238,6 +243,10 @@
   justify-content: space-between;
 }
 
+:root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area .ex-unity-wrap.verb-options .ex-unity-widget .inp-wrap {
+  gap: 10px;
+}
+
 .unity-enabled .interactive-area .ex-unity-wrap .ex-unity-widget .autocomplete:hover,
 .unity-enabled .interactive-area.dark .ex-unity-wrap .ex-unity-widget .autocomplete:hover {
   background: rgba(255 255 255 / 50%);
@@ -321,7 +330,7 @@
 
 :root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area .ex-unity-wrap .ex-unity-widget .inp-wrap .inp-field::placeholder {
   font-style: normal;
-  font-size: 20px;
+  font-size: 16px;
 }
 
 .unity-enabled .interactive-area .ex-unity-wrap .ex-unity-widget .inp-wrap .inp-field,
@@ -745,6 +754,12 @@
   color: #DBDBDB;
 }
 
+:root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area .selected-verb,
+:root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area .selected-model {
+  border-radius: 12px;
+  min-height: 36px;
+}
+
 .unity-enabled .interactive-area .selected-verb[disabled="true"] {
   cursor: auto;
 } 
@@ -765,6 +780,10 @@
   z-index: 1;
 }
 
+:root:has(meta[name="theme"][content="max25"]) .unity-enabled .interactive-area .verb-list {
+  border-radius: 14px;
+}
+
 [lang="ja-JP"] .unity-enabled .interactive-area .verb-list,
 [lang="ko-KR"] .unity-enabled .interactive-area .verb-list {
   margin-top: 6px;

unitylibs/core/workflow/workflow-firefly/widget.js

@@ -151,12 +151,13 @@ export default class UnityWidget {
       else this.widgetWrap.dispatchEvent(new CustomEvent('firefly-reinit-action-listeners'));
       if (link.getAttribute('data-model-module') !== this.selectedVerbType) {
         const oldModelContainer = this.widget.querySelector('.models-container');
-        if (!oldModelContainer) return;
-        const modelDropdown = this.modelDropdown();
-        if (modelDropdown.length > 1) {
-          const newModelContainer = createTag('div', { class: 'models-container', 'aria-label': 'Prompt options' });
-          newModelContainer.append(...modelDropdown);
-          oldModelContainer.replaceWith(newModelContainer);
+        if (oldModelContainer) {
+          const modelDropdown = this.modelDropdown();
+          if (modelDropdown.length > 1) {
+            const newModelContainer = createTag('div', { class: 'models-container', 'aria-label': 'Prompt options' });
+            newModelContainer.append(...modelDropdown);
+            oldModelContainer.replaceWith(newModelContainer);
+          }
         }
       }
       this.widgetWrap.setAttribute('data-selected-verb', this.selectedVerbType);
@@ -341,7 +342,6 @@ export default class UnityWidget {
       'aria-autocomplete': 'list',
       'aria-haspopup': 'listbox',
       'aria-controls': 'prompt-dropdown',
-      'aria-owns': 'prompt-dropdown',
       'aria-activedescendant': '',
     });
     const verbDropdown = this.verbDropdown();