apostrophe 4.10.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 4.11.0 (2024-12-18)
+
+### Adds
+
+* When validating an `area` field, warn the developer if `widgets` is not nested in `options`.
+* Adds support for supplying CSS variable names to a color field's `presetColors` array as selectable values.
+* Adds support for dynamic focus trap in Context menus (prop `dynamicFocus`). When set to `true`, the focusable elements are recalculated on each cycle step.
+* Adds option to disable `tabindex` on `AposToggle` component. A new prop `disableFocus` can be set to `false` to disable the focus on the toggle button. It's enabled by default.
+* Adds support for event on `addContextOperation`, an option `type` can now be passed and can be `modal` (default) or `event`, in this case it does not try to open a modal but emit a bus event using the action as name.
+
+
+### Fixes
+
+* Focus properly Widget Editor modals when opened. Keep the previous active focus on the modal when closing the widget editor.
+* a11y improvements for context menus.
+* Fixes broken widget preview URL when the image is overridden (module improve) and external build module is registered.
+* Inject dynamic custom bundle CSS when using external build module with no CSS entry point.
+* Range field now correctly takes 0 into account.
+* Apos style does not go through `postcss-viewport-to-container-toggle` plugin anymore to avoid UI bugs.
+
 ## 4.10.0 (2024-11-20)
 
 ### Fixes

package/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -429,11 +429,11 @@ export default {
     },
 
     attachKeyboardFocusHandler() {
-      this.$refs.wrapper.addEventListener('keydown', this.handleKeyboardFocus);
+      this.$refs.wrapper?.addEventListener('keydown', this.handleKeyboardFocus);
     },
 
     removeKeyboardFocusHandler() {
-      this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardFocus);
+      this.$refs.wrapper?.removeEventListener('keydown', this.handleKeyboardFocus);
     },
 
     // Focus parent, useful for obtrusive UI

package/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js

@@ -1,14 +1,5 @@
-const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
-
 module.exports = (options, apos) => {
   const postcssPlugins = [
-    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
-      postcssViewportToContainerToggle({
-        modifierAttr: 'data-breakpoint-preview-mode',
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      })
-    ] : [],
     'autoprefixer',
     {}
   ];

package/modules/@apostrophecms/color-field/index.js

@@ -24,7 +24,7 @@ module.exports = {
             }
 
             const test = new TinyColor(destination[field.name]);
-            if (!test.isValid) {
+            if (!test.isValid && !destination[field.name].startsWith('--')) {
               destination[field.name] = null;
             }
           },

package/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue

@@ -19,6 +19,7 @@
       </div>
       <div class="apos-color__color-wrap">
         <div
+          :data-apos-active-color="activeColor"
           :aria-label="`Current color is ${activeColor}`"
           class="apos-color__active-color"
           :style="{ background: activeColor }"
@@ -77,7 +78,7 @@
           :key="`!${c}`"
           class="apos-color__presets-color"
           :aria-label="`Color:${c}`"
-          :style="{ background: c }"
+          :style="{ background: formatCssValue(c) }"
           @click="handlePreset(c)"
         />
         <div
@@ -152,6 +153,13 @@ export default {
     }
   },
   methods: {
+    formatCssValue(c) {
+      let value = c;
+      if (c.startsWith('--')) {
+        value = `var(${value})`;
+      }
+      return value;
+    },
     handlePreset(c) {
       this.colorChange(c);
     },

package/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue

@@ -124,13 +124,21 @@ export default {
 }
 
 .apos-color__input {
-  width: 100%;
-  padding: 0;
-  border: 0;
+  width: 90%;
+  padding: 4px 0 3px 10%;
+  border: none;
+  font-size: var(--a-type-small);
   outline: none;
+  box-shadow: inset 0 0 0 1px var(--a-base-5);
 }
 
 .apos-color__label {
+  display: block;
+  padding-top: 3px;
+  padding-bottom: 4px;
+  color: var(--a-text-primary);
+  font-size: var(--a-type-smaller);
+  text-align: center;
   text-transform: capitalize;
 }
 </style>

package/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue

@@ -73,7 +73,6 @@ export default {
       this.$emit('change', param);
     },
     handleMouseDown(e) {
-      // this.handleChange(e, true)
       window.addEventListener('mousemove', this.handleChange);
       window.addEventListener('mouseup', this.handleChange);
       window.addEventListener('mouseup', this.handleMouseUp);

package/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js

@@ -76,7 +76,11 @@ export default {
     },
     update(value) {
       this.tinyColorObj = new TinyColor(value.hsl);
-      this.next = this.tinyColorObj.toString(this.format);
+      if (value._cssVariable) {
+        this.next = value._cssVariable;
+      } else {
+        this.next = this.tinyColorObj.toString(this.format);
+      }
     },
     validate(value) {
       if (this.field.required) {
@@ -90,7 +94,9 @@ export default {
       }
 
       const color = new TinyColor(value);
-      return color.isValid ? false : 'Error';
+      if (!value.startsWith('--')) {
+        return color.isValid ? false : 'Error';
+      }
     },
     clear() {
       this.next = '';

package/modules/@apostrophecms/color-field/ui/apos/mixins/AposColorMixin.js

@@ -19,6 +19,9 @@ function _colorChange(data, oldHue) {
     color = tinycolor(data.rgba);
   } else if (data && data.rgb) {
     color = tinycolor(data.rgb);
+  } else if (data && typeof data === 'string' && data.startsWith('--')) {
+    color = tinycolor(getComputedStyle(document.body).getPropertyValue(data));
+    color._cssVariable = data;
   } else {
     color = tinycolor(data);
   }
@@ -50,6 +53,7 @@ function _colorChange(data, oldHue) {
   /* ------ */
 
   return {
+    _cssVariable: color._cssVariable,
     hsl,
     hex: color.toHexString().toUpperCase(),
     hex8: color.toHex8String().toUpperCase(),

package/modules/@apostrophecms/doc/index.js

@@ -1486,7 +1486,7 @@ module.exports = {
         ];
 
         function validate ({
-          action, context, label, modal, conditions, if: ifProps
+          action, context, type = 'modal', label, modal, conditions, if: ifProps
         }) {
           const allowedConditions = [
             'canPublish',
@@ -1503,8 +1503,12 @@ module.exports = {
             'canShareDraft'
           ];
 
-          if (!action || !context || !label || !modal) {
-            throw self.apos.error('invalid', 'addContextOperation requires action, context, label and modal properties.');
+          if (![ 'event', 'modal' ].includes(type)) {
+            throw self.apos.error('invalid', '`type` option must be `modal` (default) or `event`');
+          }
+
+          if (!action || !context || !label || (type === 'modal' && !modal)) {
+            throw self.apos.error('invalid', 'addContextOperation requires action, context, label and modal (if type is set to `modal` or unset) properties.');
           }
 
           if (

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocContextMenu.vue

@@ -24,7 +24,6 @@ import AposDocContextMenuLogic from 'Modules/@apostrophecms/doc-type/logic/AposD
 export default {
   name: 'AposDocContextMenu',
   mixins: [ AposDocContextMenuLogic ],
-  // Satisfy linting.
   emits: [ 'menu-open', 'menu-close', 'close' ]
 };
 </script>

package/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js

@@ -168,6 +168,7 @@ export default {
           }
         ] : [])
       ];
+
       return menu;
     },
     customMenusByContext() {
@@ -394,6 +395,7 @@ export default {
         this.customAction(this.context, operation);
         return;
       }
+
       this[action](this.context);
     },
     async edit(doc) {
@@ -449,6 +451,10 @@ export default {
         ...docProps(doc),
         ...operation.props
       };
+      if (operation.type === 'event') {
+        apos.bus.$emit(operation.action, props);
+        return;
+      }
       await apos.modal.execute(operation.modal, props);
       function docProps(doc) {
         return Object.fromEntries(Object.entries(operation.docProps || {}).map(([ key, value ]) => {

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -13,7 +13,7 @@
       aria-modal="true"
       :aria-labelledby="props.modalData.id"
       data-apos-modal
-      @focus.capture="storeFocusedElement"
+      @focus.capture="captureFocus"
       @esc="close"
       @keydown.tab="onTab"
     >
@@ -264,6 +264,11 @@ function onLeave() {
   emit('no-modal');
 }
 
+function captureFocus(e) {
+  storeFocusedElement(e);
+  store.updateModalData(props.modalData.id, { focusedElement: e.target });
+}
+
 async function trapFocus() {
   if (modalEl?.value) {
     const elementSelectors = [

package/modules/@apostrophecms/modal/ui/apos/composables/AposFocus.js

@@ -10,6 +10,9 @@ export function useAposFocus() {
   return {
     elementsToFocus,
     focusedElement,
+    activeModal: modalStore.activeModal,
+    activeModalElementsToFocus: modalStore.activeModal?.elementsToFocus,
+    activeModalFocusedElement: modalStore.activeModal?.focusedElement,
     cycleElementsToFocus,
     focusLastModalFocusedElement,
     storeFocusedElement,
@@ -26,7 +29,18 @@ export function useAposFocus() {
   // `cycleElementsToFocus` listeners relies on this dynamic list which has the advantage of
   // taking new or less elements to focus, after an update has happened inside a modal,
   // like an XHR call to get the pieces list in the AposDocsManager modal, for instance.
-  function cycleElementsToFocus(e, elements) {
+  // If the fnFocus argument is provided, it will be called with the event and
+  // the element to focus. Otherwise, the default behavior is to focus the element
+  // and prevent the default event behavior.
+  /**
+   * @param {KeyboardEvent} e event
+   * @param {HTMLElement[]} elements
+   * @param {
+   *  (event: KeyboardEvent, element: HTMLElement) => void
+   * } [fnFocus] optional function to focus the element
+   * @returns {void}
+   */
+  function cycleElementsToFocus(e, elements, fnFocus) {
     const elems = elements || elementsToFocus.value;
     if (!elems.length) {
       return;
@@ -37,25 +51,74 @@ export function useAposFocus() {
       return;
     }
 
-    const firstElementToFocus = elems.at(0);
-    const lastElementToFocus = elems.at(-1);
+    let firstElementToFocus = elems.at(0);
+    let lastElementToFocus = elems.at(-1);
+
+    // Take into account radio inputs with the same name, the
+    // browser will cycle through them as a group, stepping on
+    // the active one per stack.
+    const firstElementRadioStack = getInputRadioStack(firstElementToFocus, elems);
+    const lastElementRadioStack = getInputRadioStack(lastElementToFocus, elems);
+    firstElementToFocus = getInputCheckedOrCurrent(firstElementToFocus, firstElementRadioStack);
+    lastElementToFocus = getInputCheckedOrCurrent(lastElementToFocus, lastElementRadioStack);
+
+    const focus = fnFocus || ((ev, el) => {
+      el.focus();
+      ev.preventDefault();
+    });
 
     // If shift key pressed for shift + tab combination
     if (e.shiftKey) {
-      if (document.activeElement === firstElementToFocus) {
+      if (document.activeElement === firstElementToFocus ||
+        firstElementRadioStack.includes(document.activeElement)
+      ) {
         // Add focus for the last focusable element
-        lastElementToFocus.focus();
-        e.preventDefault();
+        focus(e, lastElementToFocus);
       }
       return;
     }
 
     // If tab key is pressed
-    if (document.activeElement === lastElementToFocus) {
+    if (document.activeElement === lastElementToFocus ||
+      lastElementRadioStack.includes(document.activeElement)
+    ) {
       // Add focus for the first focusable element
-      firstElementToFocus.focus();
-      e.preventDefault();
+      focus(e, firstElementToFocus);
+    }
+  }
+
+  /**
+   * Returns an array of radio inputs with the same name attribute
+   * as the current element. If the current element is not a radio input,
+   * an empty array is returned.
+   *
+   * @param {HTMLElement} currentElement
+   * @param {HTMLElement[]} elements
+   * @returns {HTMLElement[]}
+   */
+  function getInputRadioStack(currentElement, elements) {
+    return currentElement.getAttribute('type') === 'radio'
+      ? elements.filter(
+        e => (e.getAttribute('type') === 'radio' &&
+          e.getAttribute('name') === currentElement.getAttribute('name'))
+      )
+      : [];
+  }
+
+  /**
+   *
+   * @param {HTMLElement} currentElement
+   * @param {HTMLElement[]} elements
+   * @returns
+   */
+  function getInputCheckedOrCurrent(currentElement, elements = []) {
+    const checked = elements.find(el => (el.hasAttribute('checked')));
+
+    if (checked) {
+      return checked;
     }
+
+    return currentElement;
   }
 
   // Focus the last focused element from the last modal.

package/modules/@apostrophecms/module/index.js

@@ -818,7 +818,8 @@ module.exports = {
         let urlOption = self.options[`${name}Url`];
         const imageOption = self.options[`${name}Image`];
         if (!urlOption) {
-          if (imageOption) {
+          // Webpack and the legacy asset pipeline
+          if (imageOption && !self.apos.asset.hasBuildModule()) {
             const chain = [ ...self.__meta.chain ].reverse();
             for (const entry of chain) {
               const path = `${entry.dirname}/public/${name}.${imageOption}`;
@@ -828,6 +829,10 @@ module.exports = {
               }
             }
           }
+          // The new external module asset pipeline
+          if (imageOption && self.apos.asset.hasBuildModule()) {
+            urlOption = `/modules/${self.__meta.name}/${name}.${imageOption}`;
+          }
         }
         if (urlOption && urlOption.startsWith('/modules')) {
           urlOption = self.apos.asset.url(urlOption);

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerSelectBox.vue

@@ -17,6 +17,7 @@
             :label="selectBoxMessageButton"
             class="apos-select-box__select-all"
             text-color="var(--a-primary)"
+            :disabled="!showSelectAll"
             @click="$emit('select-all')"
           />
           <AposButton
@@ -26,6 +27,7 @@
             label="apostrophe:clearSelection"
             class="apos-select-box__select-all"
             text-color="var(--a-primary)"
+            :disabled="!showSelectAll"
             @click="clearSelection"
           />
         </p>

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -617,7 +617,9 @@ module.exports = {
                 // HSL colors
                 /^hsl\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/,
                 // HSLA colors
-                /^hsla\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*,\s*(?:0?\.\d+|1(?:\.0)?)\s*\)$/
+                /^hsla\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*,\s*(?:0?\.\d+|1(?:\.0)?)\s*\)$/,
+                // CSS Variable value
+                /^var\(--[a-zA-Z0-9-]+\)$/
               ]
             }
           }

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue

@@ -177,9 +177,16 @@ export default defineComponent({
     };
 
     const update = (value) => {
-      tinyColorObj.value = new TinyColor(value.hsl);
-      next.value = tinyColorObj.value.toString(format.value);
-      props.editor.chain().focus().setColor(next.value).run();
+      let color;
+      if (value._cssVariable) {
+        next.value = value._cssVariable;
+        color = `var(${next.value})`;
+      } else {
+        tinyColorObj.value = new TinyColor(value.hsl);
+        next.value = tinyColorObj.value.toString(format.value);
+        color = next.value;
+      }
+      props.editor.chain().focus().setColor(color).run();
       indicatorColor.value = next.value;
     };
 

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -56,6 +56,13 @@ module.exports = (self) => {
       return _.isEqual(oneArea, twoArea);
     },
     validate: function (field, options, warn, fail) {
+      if (field.widgets) {
+        warn(stripIndents`
+          Remember to nest "widgets" inside "options" when configuring an area field.
+
+          Otherwise, "widgets" has no effect.
+        `);
+      }
       let widgets = (field.options && field.options.widgets) || {};
 
       if (field.options && field.options.groups) {

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js

@@ -32,7 +32,7 @@ export default {
     // The range spec defaults to a value of midway between the min and max
     // Example: a range with an unset value and a min of 0 and max of 100 will become 50
     // This does not allow ranges to go unset :(
-    if (!this.next) {
+    if (!this.next && this.next !== 0) {
       this.unset();
     }
   },
@@ -47,7 +47,7 @@ export default {
     },
     validate(value) {
       if (this.field.required) {
-        if (!value) {
+        if (!value && value !== 0) {
           return 'required';
         }
       }

package/modules/@apostrophecms/template/lib/bundlesLoader.js

@@ -1,6 +1,12 @@
 const { stripIndent } = require('common-tags');
 
 module.exports = (self) => {
+  // FIXME: This entire function should be separated for external build modules.
+  // Use the next opportunity to clean up and let the legacy system be and
+  // introduce a new one for external build modules (e.g. `insertBundlesMarkupByManifest`).
+  // The only check for external build modules should be at the very top of
+  // `insertBundlesMarkup` function, resulting in a call to our new
+  // function.
   function insertBundlesMarkup({
     page = {},
     template = '',
@@ -30,7 +36,7 @@ module.exports = (self) => {
     });
 
     if (scene === 'apos') {
-      return loadAllBundles({
+      return loadAllBundles(self, {
         content,
         scriptsPlaceholder,
         stylesheetsPlaceholder,
@@ -75,6 +81,10 @@ module.exports = (self) => {
         };
       }, widgetsBundles);
 
+    const cssExtraBundles = self.apos.asset.hasBuildModule()
+      ? Array.from(new Set([ ...extraBundles.js, ...extraBundles.css ]))
+      : extraBundles.css;
+
     const { jsBundles, cssBundles } = Object.entries(configs)
       .reduce((acc, [ name, { templates } ]) => {
         if (templates && !templates.includes(templateType)) {
@@ -90,7 +100,7 @@ module.exports = (self) => {
           });
 
         const cssMarkup = stylesheetsPlaceholder &&
-          extraBundles.css.includes(name) &&
+          cssExtraBundles.includes(name) &&
           renderMarkup({
             fileName: name,
             ext: 'css'
@@ -175,7 +185,7 @@ function renderBundleMarkupByManifest(self, modulePreload) {
   };
 }
 
-function loadAllBundles({
+function loadAllBundles(self, {
   content,
   extraBundles,
   scriptsPlaceholder,
@@ -199,11 +209,15 @@ function loadAllBundles({
     `;
   };
 
+  const cssExtraBundles = self.apos.asset.hasBuildModule()
+    ? Array.from(new Set([ ...extraBundles.js, ...extraBundles.css ]))
+    : extraBundles.css;
+
   const jsBundles = extraBundles.js.reduce(
     (acc, bundle) => reduceToMarkup(acc, bundle, 'js'), jsMainBundle
   );
 
-  const cssBundles = extraBundles.css.reduce(
+  const cssBundles = cssExtraBundles.reduce(
     (acc, bundle) => reduceToMarkup(acc, bundle, 'css'), cssMainBundle
   );
 

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -9,6 +9,7 @@
       v-bind="attrs"
       :is="href ? 'a' : 'button'"
       :id="attrs.id ? attrs.id : id"
+      ref="buttonTrigger"
       :target="target"
       :href="href"
       class="apos-button"
@@ -164,8 +165,15 @@ export default {
       if (this.type === 'color') {
         // if color exists, use it
         if (this.color) {
+
+          let color = this.color;
+
+          if (color.startsWith('--')) {
+            color = `var(${color})`;
+          }
+
           return {
-            backgroundColor: this.color
+            backgroundColor: color
           };
         // if not provide a default placeholder
         } else {
@@ -235,6 +243,9 @@ export default {
   methods: {
     click($event) {
       this.$emit('click', $event);
+    },
+    focus() {
+      (this.$refs.buttonTrigger?.$el ?? this.$refs.buttonTrigger)?.focus();
     }
   }
 };

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="apos-context-menu">
+  <section
+    ref="contextMenuRef"
+    class="apos-context-menu"
+    @keydown.tab="onTab"
+  >
     <slot name="prebutton" />
     <div
       ref="dropdown"
@@ -7,7 +11,7 @@
     >
       <AposButton
         v-bind="button"
-        ref="button"
+        ref="dropdownButton"
         class="apos-context-menu__btn"
         role="button"
         :data-apos-test="identifier"
@@ -25,6 +29,7 @@
         v-if="isOpen"
         ref="dropdownContent"
         v-click-outside-element="hide"
+        :data-apos-test="isRendered ? 'context-menu-content' : null"
         class="apos-context-menu__dropdown-content"
         :class="popoverClass"
         data-apos-menu
@@ -44,7 +49,7 @@
         </AposContextMenuDialog>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup>
@@ -54,9 +59,11 @@ import {
 import {
   computePosition, offset, shift, flip, arrow
 } from '@floating-ui/dom';
-import { useAposTheme } from 'Modules/@apostrophecms/ui/composables/AposTheme';
 import { createId } from '@paralleldrive/cuid2';
 
+import { useAposTheme } from '../composables/AposTheme.js';
+import { useFocusTrap } from '../composables/AposFocusTrap.js';
+
 const props = defineProps({
   identifier: {
     type: String,
@@ -122,15 +129,34 @@ const props = defineProps({
   activeItem: {
     type: String,
     default: null
+  },
+  trapFocus: {
+    type: Boolean,
+    default: true
+  },
+  // When set to true, the elements to focus on will be re-queried
+  // on everu Tab key press. Use this with caution, as it's a performance
+  // hit. Only use this if you have a context menu with
+  // dynamically changing (e.g. AposToggle item enables another item) items.
+  dynamicFocus: {
+    type: Boolean,
+    default: false
   }
 });
 
 const emit = defineEmits([ 'open', 'close', 'item-clicked' ]);
 
 const isOpen = ref(false);
+const isRendered = ref(false);
 const placement = ref(props.menuPlacement);
 const event = ref(null);
+/** @type {import('vue').Ref<HTMLElement | null>}} */
+const contextMenuRef = ref(null);
+/** @type {import('vue').Ref<HTMLElement | null>}} */
 const dropdown = ref(null);
+/** @type {import('vue').Ref<import('vue').ComponentPublicInstance | null>} */
+const dropdownButton = ref(null);
+/** @type {import('vue').Ref<HTMLElement | null>} */
 const dropdownContent = ref(null);
 const dropdownContentStyle = ref({});
 const arrowEl = ref(null);
@@ -138,6 +164,17 @@ const iconToCenterTo = ref(null);
 const menuOffset = getMenuOffset();
 const otherMenuOpened = ref(false);
 
+const {
+  onTab, runTrap, hasRunningTrap, resetTrap
+} = useFocusTrap({
+  withPriority: true,
+  refreshOnCycle: props.dynamicFocus
+  // If enabled, the dropdown gets closed when the focus leaves
+  // the context menu.
+  // triggerRef: dropdownButton,
+  // onExit: hide
+});
+
 defineExpose({
   hide,
   setDropdownPosition
@@ -170,19 +207,28 @@ const buttonState = computed(() => {
   return isOpen.value ? [ 'active' ] : null;
 });
 
-watch(isOpen, (newVal) => {
+watch(isOpen, async (newVal) => {
   emit(newVal ? 'open' : 'close', event.value);
   if (newVal) {
     setDropdownPosition();
     window.addEventListener('resize', setDropdownPosition);
     window.addEventListener('scroll', setDropdownPosition);
-    window.addEventListener('keydown', handleKeyboard);
-    dropdownContent.value.querySelector('[tabindex]')?.focus();
+    contextMenuRef.value?.addEventListener('keydown', handleKeyboard);
+    if (props.trapFocus && !hasRunningTrap.value) {
+      await runTrap(dropdownContent);
+    }
+    if (!props.trapFocus) {
+      dropdownContent.value.querySelector('[tabindex]')?.focus();
+    }
+    isRendered.value = true;
   } else {
+    if (props.trapFocus) {
+      resetTrap();
+    }
     window.removeEventListener('resize', setDropdownPosition);
     window.removeEventListener('scroll', setDropdownPosition);
-    window.removeEventListener('keydown', handleKeyboard);
-    if (!otherMenuOpened.value) {
+    contextMenuRef.value?.addEventListener('keydown', handleKeyboard);
+    if (!otherMenuOpened.value && !props.trapFocus) {
       dropdown.value.querySelector('[tabindex]').focus();
     }
   }
@@ -276,11 +322,51 @@ async function setDropdownPosition() {
   });
 }
 
+const ignoreInputTypes = [
+  'text',
+  'password',
+  'email',
+  'file',
+  'number',
+  'search',
+  'tel',
+  'url',
+  'date',
+  'time',
+  'datetime-local',
+  'month',
+  'search',
+  'week'
+];
+
+/**
+ * @param {KeyboardEvent} event
+ */
 function handleKeyboard(event) {
-  if (event.key === 'Escape') {
+  if (event.key !== 'Escape' || !isOpen.value) {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const target = event.target;
+
+  // If inside of an input or textarea, don't close the dropdown
+  // and don't allow other event listeners to close it either (e.g. modals)
+  if (
+    target?.nodeName?.toLowerCase() === 'textarea' ||
+    (target?.nodeName?.toLowerCase() === 'input' &&
+      ignoreInputTypes.includes(target.getAttribute('type'))
+    )
+  ) {
     event.stopImmediatePropagation();
-    hide();
+    return;
   }
+
+  dropdownButton.value?.focus
+    ? dropdownButton.value.focus()
+    : dropdownButton.value?.$el?.focus();
+
+  event.stopImmediatePropagation();
+  hide();
 }
 </script>
 

package/modules/@apostrophecms/ui/ui/apos/components/AposToggle.vue

@@ -2,7 +2,7 @@
   <div class="apos-toggle__container">
     <div
       class="apos-toggle__slider"
-      tabindex="0"
+      :tabindex="disableFocus ? null : '0'"
       :class="{'apos-toggle__slider--activated': !modelValue}"
       @click="$emit('toggle')"
       @keydown.stop.space="$emit('toggle')"
@@ -18,6 +18,10 @@ export default {
     modelValue: {
       type: Boolean,
       required: true
+    },
+    disableFocus: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [ 'toggle' ],

package/modules/@apostrophecms/ui/ui/apos/composables/AposFocusTrap.js

@@ -0,0 +1,227 @@
+import { useAposFocus } from 'Modules/@apostrophecms/modal/composables/AposFocus';
+import {
+  computed, ref, unref, nextTick
+} from 'vue';
+
+/**
+ * Handle focus trapping inside a modal or any other element.
+ *
+ * Options:
+ * - `retries`: Number of retries to focus (trap) the first element in the given
+ *   container. Default is 3.
+ * - `refreshOnCycle`: If true, the elements to focus will be refreshed (query)
+ *   on each cycle. Default is false.
+ * - `withPriority`: If true, 'data-apos-focus-priority' attribute will be used
+ *   to find the first element to focus. Default is true.
+ * - `triggerRef`: (optional) A ref to the element that will trigger the focus trap.
+ *   It's used as a focus target when exiting the current element focusable elements.
+ *   If boolean `true` is passed, the active modal focused element will be used.
+ * - `onExit`: (optional) A callback to be called when exiting the focus trap.
+ *
+ * @param {{
+ *  retries?: number;
+ *  refreshOnCycle?: boolean;
+ *  withPriority?: boolean;
+ *  triggerRef?: import('vue').Ref<HTMLElement | import('vue').ComponentPublicInstance>
+ *    | HTMLElement | boolean;
+ *  onExit?: () => void;
+ * }} options
+ * @returns {{
+*   runTrap: (containerRef:  import('vue').Ref<HTMLElement> | HTMLElement) => Promise<void>;
+ *  hasRunningTrap: import('vue').ComputedRef<boolean>;
+ *  stopTrap: () => void;
+ *  resetTrap: () => void;
+ *  onTab: (event: KeyboardEvent) => void;
+ * }}
+ */
+export function useFocusTrap({
+  triggerRef,
+  refreshOnCycle = false,
+  onExit = () => {},
+  retries = 3,
+  withPriority = true
+}) {
+  const {
+    activeModalFocusedElement,
+    findPriorityElementOrFirst,
+    cycleElementsToFocus: parentCycleElementsToFocus,
+    focusElement
+  } = useAposFocus();
+
+  const shouldRun = ref(false);
+  const isRunning = ref(false);
+  const currentRetries = ref(0);
+  const rootRef = ref(null);
+  const elementsToFocus = ref([]);
+  const hasRunningTrap = computed(() => {
+    return isRunning.value;
+  });
+  const triggerRefElement = computed(() => {
+    const value = unref(triggerRef);
+    if (value === true) {
+      return activeModalFocusedElement;
+    }
+    if (value) {
+      const element = value.$el || value;
+      if (element instanceof HTMLElement) {
+        return element.hasAttribute('tabindex')
+          ? element
+          : (element.querySelector('[tabindex]') || element);
+      }
+    }
+    return null;
+  });
+
+  const selectors = [
+    '[tabindex]',
+    '[href]',
+    'input',
+    'select',
+    'textarea',
+    'button',
+    '[data-apos-focus-priority]'
+  ];
+  const selector = selectors
+    .map(addExcludingAttributes)
+    .join(', ');
+
+  return {
+    runTrap: run,
+    hasRunningTrap,
+    stopTrap: stop,
+    resetTrap: reset,
+    onTab: cycle
+  };
+
+  /**
+   * The internal implementation of the focus trap.
+   */
+  async function trapFocus(containerRef) {
+    if (!unref(containerRef) || !shouldRun.value) {
+      return;
+    }
+    const elements = [ ...unref(containerRef).querySelectorAll(selector) ];
+    const firstElementToFocus = unref(withPriority)
+      ? findPriorityElementOrFirst(elements)
+      : elements[0];
+    const isPriorityElement = unref(withPriority)
+      ? firstElementToFocus?.hasAttribute('data-apos-focus-priority')
+      : firstElementToFocus;
+
+    if (!isPriorityElement && unref(retries) > currentRetries.value) {
+      currentRetries.value++;
+      await wait(20);
+      return trapFocus(containerRef);
+    }
+    await nextTick();
+
+    if (shouldRun.value) {
+      focusElement(findChecked(firstElementToFocus, elements));
+      elementsToFocus.value = elements;
+      rootRef.value = unref(containerRef);
+    }
+  }
+
+  /**
+   * Run the focus trap
+   */
+  async function run(containerRef) {
+    if (isRunning.value) {
+      return;
+    }
+    shouldRun.value = true;
+    isRunning.value = true;
+    await trapFocus(containerRef);
+    isRunning.value = false;
+    shouldRun.value = false;
+  }
+
+  /**
+   * Stop the focus trap
+   */
+  function stop() {
+    shouldRun.value = false;
+  }
+
+  /**
+   * Reset the focus trap
+   */
+  function reset() {
+    shouldRun.value = false;
+    isRunning.value = false;
+    currentRetries.value = 0;
+    elementsToFocus.value = [];
+  }
+
+  /**
+   * Cycle through the elements to focus in the container element.
+   * If no modal is active, it will use the natural focusable elements.
+   *
+   * @param {KeyboardEvent} event
+   */
+  function cycle(event) {
+    if (refreshOnCycle && rootRef.value) {
+      const elements = [ ...unref(rootRef).querySelectorAll(selector) ];
+      elementsToFocus.value = elements;
+    }
+    const elements = unref(elementsToFocus);
+    parentCycleElementsToFocus(event, elements, focus);
+
+    // Keep the if branches for better readability and future changes.
+    function focus(ev, element) {
+      let toFocusEl;
+      const currentFocused = triggerRefElement.value;
+
+      // If no trigger element is found, fallback to the original behavior.
+      if (!currentFocused) {
+        element.focus();
+        ev.preventDefault();
+      }
+
+      // We did a full cycle and are returning back to the first element.
+      // We don't want that, but to exit the cycle and continue to the next
+      // modal element to focus or the next natural focusable element (if
+      // not inside a modal).
+      if (element === elements[0]) {
+        toFocusEl = currentFocused;
+      }
+
+      // We are shift + tabbing from the first element. We want to focus the
+      // modal last focused element if available.
+      if (element === elements.at(-1)) {
+        toFocusEl = currentFocused;
+      }
+
+      if (toFocusEl) {
+        toFocusEl.focus();
+        ev.preventDefault();
+      }
+
+      // The focus handler is called ONLY when we are exiting the container
+      // element. No matter if we find a focusable element or not, we should
+      // call the onExit callback - the focus should be outside the container
+      // element.
+      onExit();
+    }
+  }
+};
+
+function addExcludingAttributes(selector) {
+  return `${selector}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden])`;
+}
+
+function findChecked(element, elements) {
+  if (element?.getAttribute('type') === 'radio') {
+    return elements.find(
+      el => (el.getAttribute('type') === 'radio' &&
+        el.getAttribute('name') === element.getAttribute('name') &&
+        el.hasAttribute('checked'))
+    ) || element;
+  }
+
+  return element;
+}
+
+async function wait(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -51,7 +51,6 @@
       />
       <AposButton
         type="primary"
-        data-apos-focus-priority
         :label="saveLabel"
         :disabled="errorCount > 0"
         @click="save"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/asset-external.js

@@ -11,12 +11,12 @@ describe('Asset - External Build', function () {
   this.timeout(t.timeout);
 
   after(async function () {
-    // await fs.remove(publicBuildPath);
+    await fs.remove(publicBuildPath);
     await t.destroy(apos);
   });
 
   beforeEach(async function () {
-    // await fs.remove(publicBuildPath);
+    await fs.remove(publicBuildPath);
   });
 
   it('should register external build module', async function () {
@@ -260,4 +260,185 @@ describe('Asset - External Build', function () {
       '`build` configuration is not identical to the legacy `webpack` configuration'
     );
   });
+
+  it('should inject custom bundles dynamic CSS (PRO-6904)', async function () {
+    await t.destroy(apos);
+
+    apos = await t.create({
+      root: module,
+      autoBuild: true,
+      modules: {
+        'asset-vite': {
+          before: '@apostrophecms/asset',
+          handlers(self) {
+            return {
+              '@apostrophecms/asset:afterInit': {
+                async registerExternalBuild() {
+                  self.apos.asset.configureBuildModule(self, {
+                    alias: 'vite',
+                    devServer: false,
+                    hmr: false
+                  });
+                }
+              }
+            };
+          },
+          methods(self) {
+            return {
+              async build() {
+                return {
+                  entrypoints: []
+                };
+              },
+              async watch() { },
+              async startDevServer() {
+                return {
+                  entrypoints: []
+                };
+              },
+              async entrypoints() {
+                return [];
+              }
+            };
+          }
+        }
+      }
+    });
+
+    // Mock the build manifest
+    apos.asset.currentBuildManifest = {
+      sourceMapsRoot: null,
+      devServerUrl: null,
+      hmrTypes: [],
+      entrypoints: [
+        {
+          name: 'src',
+          type: 'index',
+          scenes: [ 'apos', 'public' ],
+          outputs: [ 'css', 'js' ],
+          condition: 'module',
+          manifest: {
+            root: 'dist',
+            name: 'src',
+            devServer: false
+          },
+          bundles: [
+            'apos-src-module-bundle.js',
+            'apos-bundle.css',
+            'public-src-module-bundle.js',
+            'public-bundle.css'
+          ]
+        },
+        {
+          name: 'counter-react',
+          type: 'custom',
+          scenes: [ 'counter-react' ],
+          outputs: [ 'css', 'js' ],
+          condition: 'module',
+          prologue: '',
+          ignoreSources: [],
+          manifest: {
+            root: 'dist',
+            name: 'counter-react',
+            devServer: false
+          },
+          bundles: [ 'counter-react-module-bundle.js' ]
+        },
+        {
+          name: 'counter-svelte',
+          type: 'custom',
+          scenes: [ 'counter-svelte' ],
+          outputs: [ 'css', 'js' ],
+          condition: 'module',
+          manifest: {
+            root: 'dist',
+            name: 'counter-svelte',
+            devServer: false
+          },
+          bundles: [
+            'counter-svelte-module-bundle.js',
+            'counter-svelte-bundle.css'
+          ]
+        },
+        {
+          name: 'counter-vue',
+          type: 'custom',
+          scenes: [ 'counter-vue' ],
+          outputs: [ 'css', 'js' ],
+          condition: 'module',
+          manifest: {
+            root: 'dist',
+            name: 'counter-vue',
+            devServer: false
+          },
+          bundles: [ 'counter-vue-module-bundle.js', 'counter-vue-bundle.css' ]
+        },
+        {
+          name: 'apos',
+          type: 'apos',
+          scenes: [ 'apos' ],
+          outputs: [ 'js' ],
+          condition: 'module',
+          manifest: {
+            root: 'dist',
+            name: 'apos',
+            devServer: false
+          },
+          bundles: [ 'apos-module-bundle.js', 'apos-bundle.css' ]
+        }
+      ]
+    };
+
+    // `counter-svelte` has `ui/src/counter-svelte.scss`.
+    // `counter-vue` doesn't have any CSS but has dynamic CSS, extracted
+    // from Vue components.
+    apos.asset.extraBundles = {
+      js: [ 'counter-react', 'counter-svelte', 'counter-vue' ],
+      css: [ 'counter-svelte ' ]
+    };
+    apos.asset.rebundleModules = [];
+
+    const payload = {
+      page: {
+        type: '@apostrophecms/home-page'
+      },
+      scene: 'apos',
+      template: '@apostrophecms/home-page:page',
+      content: '[stylesheets-placeholder:1]\n[scripts-placeholder:1]',
+      scriptsPlaceholder: '[scripts-placeholder:1]',
+      stylesheetsPlaceholder: '[stylesheets-placeholder:1]',
+      widgetsBundles: { 'counter-vue': {} }
+    };
+
+    const injected = apos.template.insertBundlesMarkup(payload);
+
+    // All bundles are injected, including the dynamic CSS from `counter-vue`
+    const actual = injected.replace(/>\s+</g, '><');
+    const expected = '<link rel="stylesheet" href="/apos-frontend/default/apos-bundle.css">' +
+      '<link rel="stylesheet" href="/apos-frontend/default/counter-svelte-bundle.css">' +
+      '<link rel="stylesheet" href="/apos-frontend/default/counter-vue-bundle.css">' +
+      '<script type="module" src="/apos-frontend/default/apos-src-module-bundle.js"></script>' +
+      '<script type="module" src="/apos-frontend/default/apos-module-bundle.js"></script>' +
+      '<script type="module" src="/apos-frontend/default/counter-react-module-bundle.js"></script>' +
+      '<script type="module" src="/apos-frontend/default/counter-svelte-module-bundle.js"></script>' +
+      '<script type="module" src="/apos-frontend/default/counter-vue-module-bundle.js"></script>';
+
+    assert.equal(actual, expected, 'Bundles are not injected correctly');
+
+    const injectedPublic = apos.template.insertBundlesMarkup({
+      ...payload,
+      scene: 'public'
+    });
+
+    // Showcases that the only the dynamic Vue CSS is injected, because the widget
+    // owning the bundle counter-vue is present.
+    const actualPublic = injectedPublic.replace(/>\s+</g, '><');
+    const expectedPublic = '<link rel="stylesheet" href="/apos-frontend/default/public-bundle.css">' +
+      '<link rel="stylesheet" href="/apos-frontend/default/counter-vue-bundle.css">' +
+      '<script type="module" src="/apos-frontend/default/public-src-module-bundle.js"></script>' +
+      '<script type="module" src="/apos-frontend/default/counter-vue-module-bundle.js"></script>';
+
+    assert.equal(actualPublic, expectedPublic, 'Bundles are not injected correctly');
+
+  });
 });