KA-UI

nx/blocks/nav/nav.js

@@ -5,10 +5,17 @@ import getSvg from '../../utils/svg.js';
 const { nxBase } = getConfig();
 
 const ICONS = [
-  `${nxBase}/img/logos/aec.svg`,
   `${nxBase}/img/icons/S2IconHelp20N-icon.svg`,
 ];
 
+async function loadBrandLogoSvg() {
+  const resp = await fetch(`${nxBase}/img/logos/adobe-branding.svg`);
+  if (!resp.ok) return null;
+  const text = await resp.text();
+  const doc = new DOMParser().parseFromString(text, 'image/svg+xml');
+  return doc.querySelector('svg');
+}
+
 function getDefaultPath() {
   const { origin } = new URL(import.meta.url);
   return `${origin}/fragments/nx-nav`;
@@ -34,11 +41,17 @@ class Nav extends HTMLElement {
     await loadArea(doc.body);
     const sections = doc.querySelectorAll('body > .section');
 
-    // Grab the first link as it will be the main branding
     const brandLink = doc.querySelector('a');
-    brandLink.innerHTML = `<span>${brandLink.innerHTML}</span>`;
     brandLink.classList.add('nx-nav-brand');
-    brandLink.insertAdjacentHTML('afterbegin', '<svg class="icon"><use href="#spectrum-ExperienceCloud"/></svg>');
+    brandLink.setAttribute('aria-label', 'Home');
+    brandLink.textContent = '';
+    const brandSvg = await loadBrandLogoSvg();
+    if (brandSvg) {
+      const svg = brandSvg.cloneNode(true);
+      svg.classList.add('icon');
+      svg.setAttribute('aria-hidden', 'true');
+      brandLink.append(svg);
+    }
 
     const inner = document.createElement('div');
     inner.className = 'nx-nav-inner';

nx2/blocks/action-button/action-button.js

@@ -13,7 +13,11 @@ function decoratePanel(a, hash) {
       else panel.hidePanel(existing);
       return;
     }
-    await panel.openPanelWithFragment({ width: '400px', beforeMain, fragment: value });
+    await panel.openPanelWithFragment({
+      width: panel.getDefaultPanelWidthCss(),
+      beforeMain,
+      fragment: value,
+    });
   });
 }
 

nx2/blocks/canvas-actions/canvas-actions.css

@@ -6,7 +6,14 @@
   color: var(--s2-gray-800);
 }
 
-.canvas-actions button {
+.canvas-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.canvas-actions .publish-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -25,22 +32,21 @@
   cursor: pointer;
 }
 
-.canvas-actions button:focus-visible {
+.canvas-actions .publish-btn:focus-visible {
   outline: 2px solid var(--s2-blue-800);
   outline-offset: 2px;
 }
 
-.canvas-actions button:disabled {
+.canvas-actions .publish-btn:disabled {
   color: var(--s2-gray-400);
   background-color: var(--s2-gray-200);
   cursor: not-allowed;
 }
 
-.canvas-actions button:hover:not(:disabled) {
+.canvas-actions .publish-btn:hover:not(:disabled) {
   background-color: var(--s2-blue-1000);
 }
 
-.canvas-actions button:active:not(:disabled) {
+.canvas-actions .publish-btn:active:not(:disabled) {
   background-color: var(--s2-blue-1100);
 }
-

nx2/blocks/canvas-actions/canvas-actions.js

@@ -13,7 +13,7 @@ class NXCanvasActions extends LitElement {
   render() {
     return html`
       <div class="canvas-actions">
-        <button>Publish</button>
+        <button type="button" class="publish-btn">Publish</button>
       </div>
     `;
   }

nx2/blocks/canvas/canvas.js

@@ -1,5 +1,10 @@
 import { loadStyle } from '../../utils/utils.js';
-import { hidePanel, unhidePanel, openPanelWithFragment } from '../../utils/panel.js';
+import {
+  getDefaultPanelWidthCss,
+  hidePanel,
+  unhidePanel,
+  openPanelWithFragment,
+} from '../../utils/panel.js';
 import './nx-canvas-header/nx-canvas-header.js';
 
 const style = await loadStyle(import.meta.url);
@@ -30,7 +35,7 @@ async function openCanvasPanel(position) {
 
   // Case 3: Panel does not exist yet
   const aside = await openPanelWithFragment({
-    width: '400px',
+    width: getDefaultPanelWidthCss(),
     beforeMain: position === 'before',
     fragment: FRAGMENTS[position],
   });

nx2/blocks/nav/nav.css

@@ -16,21 +16,9 @@
   }
 }
 
-.brand-area {
-  a {
-    display: block;
-    height: 100%;
-    color: inherit;
-    text-decoration: none;
-  }
-
-  svg {
-    height: 100%;
-  }
-}
-
 .action-area {
   display: none;
+  flex-shrink: 0;
 
   ul {
     height: 100%;
@@ -84,3 +72,138 @@
     display: unset;
   }
 }
+
+.brand-area {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  gap: 0;
+
+  a {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  /* Logo link — 12px to breadcrumb */
+  > a {
+    flex-shrink: 0;
+    margin-inline-end: 12px;
+  }
+
+  a > svg {
+    width: 24px;
+    height: 24px;
+    max-width: 24px;
+    max-height: 24px;
+    flex-shrink: 0;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .nav-home-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 0;
+    margin-inline: 16px 12px;
+    border: none;
+    border-radius: var(--s2-corner-radius-500);
+    background: transparent;
+    color: var(--s2-gray-800);
+    cursor: pointer;
+  }
+
+  .nav-home-btn:hover {
+    background-color: var(--s2-gray-100);
+  }
+
+  .nav-home-btn:focus-visible {
+    outline: 2px solid var(--s2-blue-800);
+    outline-offset: 2px;
+  }
+
+  .nav-home-btn svg {
+    display: block;
+  }
+}
+
+.workspace-breadcrumb {
+  min-width: 0;
+  overflow: hidden;
+
+  /* Typography: Component M, Regular (S2 component tokens) */
+
+  /* Color: content / neutral-subdued — default --s2-gray-700, hover --s2-gray-800 */
+  ol {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+    font-family: var(--s2-font-family);
+    font-size: var(--s2-component-m-regular-font-size);
+    line-height: var(--s2-component-m-regular-line-height);
+    font-weight: var(--s2-component-m-regular-font-weight);
+    color: var(--s2-gray-700);
+  }
+
+  .crumb {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .crumb-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-inline: 4px 6px;
+    list-style: none;
+
+    /* design #505050 — matches --s2-gray-700 in light; token in dark */
+    color: var(--s2-gray-700);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .crumb-chevron {
+    display: block;
+    transform: translateY(1px);
+  }
+
+  .crumb-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    color: var(--s2-gray-700);
+    text-decoration: none;
+  }
+
+  a.crumb-label:hover {
+    color: var(--s2-gray-800);
+  }
+
+  .crumb-label.current {
+    cursor: default;
+    color: var(--s2-gray-800);
+    font-weight: var(--s2-component-m-bold-font-weight);
+  }
+
+}