@brightspot/ui 6.7.0 → 6.7.1-pr.405.2026.10.26

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1792606322020,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.1.11","playwright":"1.58.2","vitest":"4.1.11"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
+{"generatedAt":1793014295499,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.1.11","playwright":"1.58.2","vitest":"4.1.11"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.7.0",
+  "version": "6.7.1-pr.405.2026.10.26",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

package/src/legacy/tool-ui/src/ListManager.css

@@ -3,7 +3,7 @@
 }
 
 .ListManager-widget {
-  @apply absolute -top-10 left-16 z-10 flex flex-col overflow-clip rounded-2xl border border-gray-100 bg-white shadow-lg;
+  @apply absolute -top-10 start-16 z-10 flex flex-col overflow-clip rounded-2xl border border-gray-100 bg-white shadow-lg;
 
   .Widget-title {
     @apply static !pe-[60px] text-sm;
@@ -25,3 +25,24 @@
     }
   }
 }
+
+/* Anchor the menu to the list's first item where supported; browsers without
+   anchor positioning drop these declarations and keep the base -top-10/start-16
+   placement. anchor-scope keeps the name private to each <ol> so it resolves to
+   that list's own first item. The menu opens as a direct child of the <ol> (see
+   ListManager.js), making it a sibling of this anchor. inset-inline-start stays
+   logical so the RTL build doesn't flip it to a physical right edge. */
+.ProseMirror ol {
+  anchor-scope: --list-first-item;
+}
+
+.ProseMirror ol > li:first-child {
+  anchor-name: --list-first-item;
+}
+
+.ListManager-widget {
+  position-anchor: --list-first-item;
+  top: anchor(top);
+  inset-inline-start: anchor(start);
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+}

package/src/legacy/tool-ui/src/SkipLinks.css

@@ -7,11 +7,11 @@
 }
 
 .SkipLinks-heading {
-  @apply btu-heading-5 px-4 py-2 text-gray-900;
+  @apply btu-heading-5 flex w-full px-4 py-2 text-gray-900;
 }
 
 .SkipLinks-note {
-  @apply border-t border-t-gray-200 px-4 pb-2 pt-4 text-sm text-gray-500;
+  @apply flex w-full border-t border-t-gray-200 px-4 pb-2 pt-4 text-sm text-gray-500;
 }
 
 .SkipLinks-list {
@@ -19,5 +19,5 @@
 }
 
 .SkipLinks-link {
-  @apply btu-button btu-button-fill-none btu-button-primary w-full justify-start bg-white;
+  @apply btu-button btu-button-fill-none btu-button-primary w-full justify-start bg-white no-underline;
 }

package/src/legacy/tool-ui/src/SkipLinks.ts

@@ -1,112 +1,121 @@
 import './SkipLinks.css'
 import onFind from './dom/onFind'
-import { focusRegionManager } from './FocusRegions'
+import { focusRegionManager, type FocusRegionConfig } from './FocusRegions'
 import create from './dom/create'
-import { localizeShortcut } from './platform'
 
-onFind('.aria--skiptoContent', (originalButton: HTMLElement) => {
-  let nav: HTMLElement | null = null
-  let list: HTMLElement | null = null
-  let note: HTMLElement | null = null
-  let lastRegionKey = ''
+// The nav (static landmark links) is server-rendered; we enhance activation via the focus
+// region manager and append the other currently-visible regions the server can't know about.
 
-  const skipToPrefix = window.BRIGHTSPOT?.ui.tooltips.skipLinks.heading
+// Rendered statically by the backend — skipped when appending dynamic regions.
+const STATIC_REGION_IDS = new Set(['page-header', 'page-nav', 'page-main'])
 
-  originalButton.addEventListener('focus', () => {
-    const layer = focusRegionManager.getTopLayer()
-    const regions = focusRegionManager.getVisibleRegions(layer)
+onFind('.SkipLinks', (nav: HTMLElement) => {
+  const list = nav.querySelector<HTMLElement>('.SkipLinks-list')
+  if (!list) return
+
+  const skipToPrefix =
+    nav.querySelector('.SkipLinks-heading')?.textContent?.trim() ?? ''
+
+  // Signature of the rendered dynamic links, so we only rebuild — and risk disturbing
+  // focus — when the visible region set actually changes.
+  let lastKey = ''
 
-    // Grab the visible regions and filter for those with labels
-    const labeledRegions = regions
+  const refreshDynamicLinks = (): void => {
+    const layer = focusRegionManager.getTopLayer()
+    const regions = focusRegionManager
+      .getVisibleRegions(layer)
+      .filter((config) => !STATIC_REGION_IDS.has(config.id))
       .map((config) => ({
         config,
         label: focusRegionManager.getRegionLabel(config),
       }))
       .filter(
-        (entry): entry is { config: typeof entry.config; label: string } =>
-          entry.label !== null,
+        (region): region is { config: FocusRegionConfig; label: string } =>
+          region.label !== null,
       )
 
-    // No labeled regions — leave the original button as-is
-    if (labeledRegions.length === 0) return
-
-    // Skip rebuild if the set of visible labeled regions hasn't changed
-    const regionKey = labeledRegions
-      .map((r) => `${r.config.id}:${r.label}`)
-      .join('|')
-    const needsRebuild = regionKey !== lastRegionKey
-
-    // Build the panel shell once
-    if (!nav) {
-      nav = create('nav', {
-        className: 'SkipLinks',
-        'aria-label': skipToPrefix,
-      })
-
-      const heading = create('h2', {
-        className: 'SkipLinks-heading',
-        textContent: skipToPrefix,
-      })
+    const key = regions.map((r) => `${r.config.id}:${r.label}`).join('|')
+    if (key === lastKey) return
+    lastKey = key
+
+    const active = document.activeElement
+    const rebuildingFocusedLink =
+      active instanceof HTMLElement &&
+      list.contains(active) &&
+      active.closest('[data-skip-dynamic]') !== null
+
+    list
+      .querySelectorAll('[data-skip-dynamic]')
+      .forEach((item) => item.remove())
+
+    for (const { config, label } of regions) {
+      // Match the static links: an <a href="#id">. A hrefless <a> (or a <button>, which
+      // Safari omits from Tab order) wouldn't be reliably tab-reachable. Give the region an
+      // id to point at when it lacks one.
+      if (!config.element.id) {
+        config.element.id = `skipRegion-${config.id}`
+      }
 
-      const rawSkipNote = window.BRIGHTSPOT?.ui.tooltips.skipLinks.note
-      const skipNote = rawSkipNote ?? ''
-      note = create('p', {
-        className: 'SkipLinks-note',
-        textContent: localizeShortcut(skipNote),
+      const link = create('a', {
+        className: 'SkipLinks-link',
+        href: `#${config.element.id}`,
+        'data-skip-region': config.id,
+        'aria-label': `${skipToPrefix} ${label}`,
+        textContent: label,
       })
 
-      list = create('ul', {
-        className: 'SkipLinks-list',
-      })
+      const item = create('li', { 'data-skip-dynamic': '' })
+      item.append(link)
+      list.append(item)
+    }
 
-      nav.append(heading, note, list)
-      originalButton.insertAdjacentElement('beforebegin', nav)
+    // The rebuild removed the link that had focus; keep focus in the menu.
+    if (rebuildingFocusedLink) {
+      list.querySelector<HTMLElement>('.SkipLinks-link')?.focus()
     }
+  }
 
-    // Rebuild links only when regions have changed
-    if (needsRebuild && list) {
-      lastRegionKey = regionKey
-      list.innerHTML = ''
-
-      for (const { config, label } of labeledRegions) {
-        const li = create('li')
-        const link = create('button', {
-          className: 'SkipLinks-link',
-          type: 'button',
-          textContent: label,
-          'aria-label': `${skipToPrefix} ${label}`,
-        })
-        link.addEventListener('click', () => {
-          if (!config.element.isConnected) return
-          focusRegionManager.focusRegion(config, document.body)
-        })
-        li.append(link)
-        list.append(li)
-      }
+  nav.addEventListener('click', (e) => {
+    // Let modified / non-primary clicks (open-in-new-tab etc.) use the native href.
+    if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {
+      return
     }
 
-    // Hide the original button and move focus to the first link
-    originalButton.hidden = true
-    nav.removeAttribute('aria-hidden')
-    const firstLink = nav.querySelector<HTMLElement>('.SkipLinks-link')
-    firstLink?.focus()
-  })
+    const link = (e.target as HTMLElement).closest<HTMLElement>(
+      '[data-skip-region]',
+    )
+    if (!link) return
 
-  // Dismiss with Escape key
-  document.addEventListener('keydown', (e) => {
-    if (!nav || e.key !== 'Escape') return
-    if (nav.contains(document.activeElement)) {
-      originalButton.hidden = false
-      originalButton.focus()
+    const layer = focusRegionManager.getTopLayer()
+    const config = focusRegionManager
+      .getVisibleRegions(layer)
+      .find((region) => region.id === link.dataset.skipRegion)
+
+    if (config) {
+      e.preventDefault()
+      focusRegionManager.focusRegion(config, layer)
+      return
     }
-  })
 
-  // When focus leaves the panel, re-show the original button for next time
-  document.addEventListener('focusin', (e) => {
-    if (!nav) return
-    if (!nav.contains(e.target as Node)) {
-      originalButton.hidden = false
-      nav.setAttribute('aria-hidden', 'true')
+    // The region is gone. A dynamic link must not fall through to its native href — that
+    // would jump to a now-hidden target and drop focus. Move focus to a stable static link
+    // first (so removing the clicked link can't drop focus to <body>), then refresh.
+    if (link.closest('[data-skip-dynamic]')) {
+      e.preventDefault()
+      list.querySelector<HTMLElement>('.SkipLinks-link')?.focus()
+      refreshDynamicLinks()
     }
+    // A static link with no live region (no-JS edge) falls through to its native href.
+  })
+
+  // Rebuild whenever the menu is opened from outside, so it reflects the regions visible
+  // now. The lastKey check makes this a no-op when nothing changed, so a plain re-entry
+  // (including Shift+Tab onto a dynamic link) doesn't disturb focus.
+  nav.addEventListener('focusin', (e) => {
+    if (nav.contains(e.relatedTarget as Node)) return
+    refreshDynamicLinks()
   })
+
+  // rAF: regions register asynchronously via their own onFind hooks.
+  requestAnimationFrame(refreshDynamicLinks)
 })