@zeyos/zx 4.3.0 → 4.4.0

package/src/components/menu-button/menu-button.css

@@ -11,15 +11,19 @@
 }
 
 .zx-menu-button__item {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: transparent;
+  border: 1px solid transparent;
   background: transparent;
   padding-inline: var(--zx-control-pad-x);
+  color: inherit;
+  font: inherit;
   text-align: start;
+  text-decoration: none;
 }
 
 .zx-menu-button__item:hover,
@@ -37,11 +41,84 @@
   opacity: .65;
 }
 
-.zx-menu-button__icon {
+.zx-menu-button__leading,
+.zx-menu-button__meta {
   display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   flex: none;
 }
 
+.zx-menu-button__meta {
+  justify-content: flex-end;
+}
+
+.zx-menu-button__leading {
+  justify-content: center;
+  inline-size: var(--zx-space-4);
+}
+
+.zx-menu-button__body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+}
+
+.zx-menu-button__label,
+.zx-menu-button__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-menu-button__description,
+.zx-menu-button__shortcut,
+.zx-menu-button__adornment {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-menu-button__badge {
+  min-inline-size: var(--zx-space-4);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: center;
+}
+
+.zx-menu-button__shortcut {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-family: var(--zx-font-mono);
+}
+
+.zx-menu-button__check {
+  inline-size: var(--zx-space-3);
+  block-size: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-sm);
+}
+
+.zx-menu-button__check[data-check-kind="radio"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-menu-button__item[aria-checked="true"] .zx-menu-button__check {
+  border-color: var(--zx-color-accent);
+  background: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
+}
+
+.zx-menu-button__heading {
+  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+}
+
 .zx-menu-button__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);

package/src/components/menu-button/menu-button.js

@@ -2,20 +2,15 @@ import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
 import { rovingTabindex, typeahead } from '../../core/keyboard.js';
+import {
+  isMenuItem,
+  MENU_ITEM_SELECTOR,
+  renderMenuEntries
+} from '../../internal/menu-items.js';
 import { Dropdown } from '../dropdown/dropdown.js';
 
-const MENU_ITEM_SELECTOR = '[role="menuitem"]';
-
-/**
- * @typedef {Object} MenuItem
- * @property {string} label Item label.
- * @property {string} [icon] Kernel icon name.
- * @property {unknown} [value] Value emitted on selection.
- * @property {boolean} [disabled=false] Whether selection is disabled.
- * @property {boolean} [danger=false] Whether the action is dangerous.
- * @property {(value: unknown, item: MenuItem, menuButton: MenuButton) => void} [onselect] Selection callback.
- */
-/** @typedef {MenuItem|'-'} MenuButtonItem */
+/** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
+/** @typedef {import('../../internal/menu-items.js').MenuEntry} MenuButtonItem */
 /**
  * @typedef {Object} MenuButtonOptions
  * @property {string} [label=''] Trigger label.
@@ -116,7 +111,7 @@ export class MenuButton extends Component {
     this.listen(this.el, 'keydown', (event) => this.#onTriggerKeydown(event));
     this.listen(this.#panel, 'click', (event) => {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
-      if (item && this.#panel.contains(item)) this.#selectElement(item);
+      if (item && this.#panel.contains(item)) this.#selectElement(item, event);
     });
     this.listen(this.#panel, 'keydown', (event) => this.#onMenuKeydown(event));
   }
@@ -142,25 +137,7 @@ export class MenuButton extends Component {
    */
   setItems(items) {
     this.#items = Array.isArray(items) ? items.slice() : [];
-    this.#panel.replaceChildren();
-    this.#items.forEach((item, index) => {
-      if (item === '-') {
-        this.#panel.append(h('div', { class: 'zx-menu-button__separator', role: 'separator' }));
-        return;
-      }
-      const children = [];
-      if (item.icon) children.push(h('span', { class: 'zx-menu-button__icon' }, icon(item.icon)));
-      children.push(h('span', { class: 'zx-menu-button__label' }, item.label));
-      this.#panel.append(h('button', {
-        class: 'zx-menu-button__item',
-        type: 'button',
-        role: 'menuitem',
-        tabindex: '-1',
-        'data-menu-item': String(index),
-        'data-danger': item.danger ? 'true' : null,
-        ariaDisabled: item.disabled ? 'true' : null
-      }, children));
-    });
+    this.#panel.replaceChildren(...renderMenuEntries(this.#items, 'menu-button'));
     return this;
   }
 
@@ -265,20 +242,27 @@ export class MenuButton extends Component {
     if (event.key === 'Enter' || event.key === ' ') {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
       if (!item || !this.#panel.contains(item)) return;
+      if (event.key === 'Enter' && item.tagName === 'A') return;
       event.preventDefault();
-      this.#selectElement(item);
+      /** @type {HTMLElement} */ (item).click();
       return;
     }
     this.#typeahead(event);
   }
 
-  /** @param {Element} element @returns {void} */
-  #selectElement(element) {
+  /** @param {Element} element @param {Event|null} [event=null] @returns {void} */
+  #selectElement(element, event = null) {
     const index = Number(element.getAttribute('data-menu-item'));
     const item = this.#items[index];
-    if (!item || item === '-' || item.disabled) return;
+    if (!isMenuItem(item) || item.disabled) {
+      event?.preventDefault();
+      return;
+    }
     const selected = this.emit('select', { value: item.value, item });
-    if (selected.defaultPrevented) return;
+    if (selected.defaultPrevented) {
+      event?.preventDefault();
+      return;
+    }
     try {
       item.onselect?.(item.value, item, this);
     } finally {

package/src/components/message/message.css

@@ -27,14 +27,15 @@
 
 .zx-message__toast {
   --zx-message-kind: var(--zx-color-info);
+  --zx-message-fallback-bg: var(--zx-color-info-bg);
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
-  background: var(--zx-color-info-bg);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-message-fallback-bg);
   box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
   padding: var(--zx-space-3);
   color: var(--zx-color-text);
@@ -42,17 +43,17 @@
 
 .zx-message__toast[data-kind="success"] {
   --zx-message-kind: var(--zx-color-success);
-  background: var(--zx-color-success-bg);
+  --zx-message-fallback-bg: var(--zx-color-success-bg);
 }
 
 .zx-message__toast[data-kind="warning"] {
   --zx-message-kind: var(--zx-color-warning);
-  background: var(--zx-color-warning-bg);
+  --zx-message-fallback-bg: var(--zx-color-warning-bg);
 }
 
 .zx-message__toast[data-kind="error"] {
   --zx-message-kind: var(--zx-color-danger);
-  background: var(--zx-color-danger-bg);
+  --zx-message-fallback-bg: var(--zx-color-danger-bg);
 }
 
 @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -63,21 +64,19 @@
     background-clip: padding-box;
     -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
     backdrop-filter: var(--zx-glass-filter-overlay);
-    box-shadow: var(--zx-glass-overlay-shadow);
+    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zx-message-kind) 72%,
+      var(--zx-color-glass-highlight-strong)), var(--zx-glass-overlay-shadow);
   }
 }
 
 @media (prefers-reduced-transparency: reduce) {
   .zx-message__toast {
     border-color: var(--zx-color-border);
+    background: var(--zx-message-fallback-bg);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
     box-shadow: var(--zx-overlay-shadow);
   }
-  .zx-message__toast[data-kind="info"] { background: var(--zx-color-info-bg); }
-  .zx-message__toast[data-kind="success"] { background: var(--zx-color-success-bg); }
-  .zx-message__toast[data-kind="warning"] { background: var(--zx-color-warning-bg); }
-  .zx-message__toast[data-kind="error"] { background: var(--zx-color-danger-bg); }
 }
 
 .zx-message__icon {
@@ -92,9 +91,12 @@
 }
 
 /* Visual chrome comes from the shared .zx-icon-btn utility; only alignment is set here so
-   the close control sits flush with the top-right corner without stretching the toast. */
+   the close control sits flush with the trailing top corner without stretching the toast.
+   Trailing, not right: in an RTL document the close control belongs on the left, and a
+   four-value `margin` shorthand is the one place a logical property cannot be spelled. */
 .zx-message__close {
-  margin: calc(-1 * var(--zx-space-1)) calc(-1 * var(--zx-space-1)) 0 0;
+  margin-block: calc(-1 * var(--zx-space-1)) 0;
+  margin-inline: 0 calc(-1 * var(--zx-space-1));
 }
 
 .zx-message__progress {

package/src/components/message/message.js

@@ -340,8 +340,8 @@ export class Message extends Component {
       const close = h('button', {
         class: 'zx-icon-btn zx-message__close',
         type: 'button',
-        ariaLabel: 'Close message',
-        title: 'Close'
+        ariaLabel: this._message('message.close', 'Close message'),
+        title: this._message('message.closeTitle', 'Close')
       }, icon('x', { size: 14 }));
       node.append(close);
       this.listen(close, 'click', () => this._close(entry));
@@ -417,6 +417,17 @@ export class Message extends Component {
     this._queue.remove(entry);
   }
 
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
+
   /** @param {Element|string|null|undefined} scope @returns {Message} */
   static #floatingRegion(scope) {
     const host = overlayHost(scope ?? null);

package/src/components/modal/modal.css

@@ -32,6 +32,21 @@
   padding: var(--zx-space-5);
 }
 
+/*
+ * The panel takes focus itself only as a fallback, when it holds nothing focusable at all. It is a
+ * surface rather than a control, so that programmatic focus paints no ring; a reader the browser
+ * reports as navigating by keyboard still gets one, because otherwise focus would be inside the
+ * overlay with nothing on screen saying so.
+ */
+.zx-modal:focus {
+  outline: none;
+}
+
+.zx-modal:focus-visible {
+  outline: 2px solid var(--zx-color-ring);
+  outline-offset: calc(-1 * var(--zx-space-1));
+}
+
 /*
  * `:modal` rather than `[open]`: only a dialog opened with `showModal()` blocks the page, and a
  * non-modal one (Sheet's `modal: false`) must leave the page scrollable behind it.

package/src/components/modal/modal.js

@@ -2,6 +2,15 @@ import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
 import { overlayHost } from '../../core/overlay-host.js';
 
+/**
+ * Controls initial focus may be placed on: what a reader reaches with Tab, rather than everything
+ * the platform will focus programmatically.
+ */
+const FOCUSABLE_SELECTOR = [
+  'a[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])',
+  'textarea:not([disabled])', '[contenteditable="true"]', '[tabindex]:not([tabindex="-1"])'
+].join(',');
+
 /**
  * @typedef {Object} ModalOptions
  * @property {Node|string|number|{toElement: () => Node|null}|null} [content=null] Modal content.
@@ -18,6 +27,15 @@ import { overlayHost } from '../../core/overlay-host.js';
 /**
  * Thin native-dialog overlay with lifecycle-safe content and dismissal behavior.
  * The constructor always creates and appends a new dialog; its target argument is ignored.
+ *
+ * Accessibility is the platform's wherever the platform has an answer. The root is a real
+ * `<dialog>` and `_show()` presents it with `showModal()`, so focus containment, the inertness of
+ * everything behind it, Escape, the top layer and the implicit `dialog` role all come from the
+ * browser — there is no hand-written focus trap here, and adding one on top of `:modal` would be
+ * two traps fighting over the same Tab key. What the platform leaves undone is the rest of this
+ * class's accessibility work: it stops initial focus at the panel instead of the first control,
+ * and it restores focus to the opener only for its own native presentation, not for the popover
+ * one a non-modal subclass uses.
  * @fires Modal#open
  * @fires Modal#close
  * @fires Modal#cancel
@@ -42,6 +60,8 @@ export class Modal extends Component {
   #presentation = 0;
   /** @type {number[]} */
   #nativeClosingPresentations = [];
+  /** @type {Element|null} Element that had focus when the overlay was opened. */
+  #opener = null;
 
   /**
    * Creates a modal in the configured theme scope, or at document level when none is present.
@@ -64,6 +84,14 @@ export class Modal extends Component {
       if (!this.options.lightDismiss || event.target !== this.el || !isBackdropClick(this.el, event)) return;
       this.close();
     });
+    /*
+     * One listener for every close path, because `close` is the one event all four converge on:
+     * a footer button and a programmatic `close()` go through `_dismiss()`, Escape and a native
+     * dismissal arrive as the platform's own `close`, and light dismiss calls `close()` itself.
+     * A subclass that traps focus registers its own restore after this one and so wins, which is
+     * what keeps `Sheet`'s trap authoritative over its own capture.
+     */
+    this.on('close', () => this.#restoreFocus());
   }
 
   /**
@@ -112,6 +140,23 @@ export class Modal extends Component {
   _present() {
     this._show();
     this.#presentation += 1;
+    this.#syncModality();
+  }
+
+  /**
+   * Mirrors the presentation's real modality onto the panel as `aria-modal`.
+   *
+   * Asked of the platform (`:modal`) rather than of an option, so it stays true through every
+   * presentation a subclass chooses: `showModal()` is modal, a popover or an in-flow `show()` is
+   * not, and a sheet that moves between them is re-answered when it is presented again. The
+   * `<dialog>` element already carries the implicit `dialog` role and, while `:modal`, the
+   * implicit modal semantics — the attribute states them for assistive technology that reads the
+   * markup rather than the top-layer state.
+   * @returns {void}
+   */
+  #syncModality() {
+    if (this.el.matches(':modal')) this.el.setAttribute('aria-modal', 'true');
+    else if (this.el.getAttribute('aria-modal') === 'true') this.el.removeAttribute('aria-modal');
   }
 
   /**
@@ -158,6 +203,11 @@ export class Modal extends Component {
     }
     this.el.dataset.state = 'closed';
     delete this.el.dataset.zxOverlayOrder;
+    /*
+     * Only the flag this class raised. A subclass presenting non-modally writes
+     * `aria-modal="false"` and owns that value across its own presentations.
+     */
+    if (this.el.getAttribute('aria-modal') === 'true') this.el.removeAttribute('aria-modal');
     const pending = closingPresentation === undefined
       ? undefined
       : this.#pendingResults.get(closingPresentation);
@@ -168,6 +218,45 @@ export class Modal extends Component {
     return true;
   }
 
+  /**
+   * Returns focus to whatever held it when the overlay opened.
+   *
+   * A closing `<dialog>` restores focus itself, but only for its own native presentation and only
+   * while the opener is still where it was; doing it here covers the popover presentation a
+   * non-modal subclass uses, and covers `destroyOnClose`, which takes the opener's document
+   * position out from under the platform's own restore.
+   * @returns {void}
+   */
+  #restoreFocus() {
+    const opener = /** @type {HTMLElement|null} */ (this.#opener);
+    this.#opener = null;
+    if (opener?.isConnected && typeof opener.focus === 'function') opener.focus();
+  }
+
+  /**
+   * Places initial focus inside the panel.
+   *
+   * `showModal()` focuses an `autofocus` control when the content declares one and otherwise stops
+   * at the dialog element, which leaves a reader one Tab short of the first control. This keeps
+   * that preference — so a `Dialog` footer button marked `autofocus` still wins — and then falls
+   * through to the first focusable descendant, with the panel itself as the last resort so focus
+   * is never left outside the overlay.
+   * @returns {void}
+   */
+  _focusInitial() {
+    if (!this.isOpen()) return;
+    const target = initialFocusTarget(this.el);
+    if (target) {
+      target.focus();
+      return;
+    }
+    // A panel holding nothing focusable has to take focus itself, and is made focusable only for
+    // that: `tabindex="-1"` is programmatic focus, so it adds nothing to the Tab order.
+    const panel = /** @type {HTMLElement} */ (this.el);
+    if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '-1');
+    panel.focus();
+  }
+
   /**
    * Creates the owned native dialog.
    * @returns {HTMLDialogElement}
@@ -188,6 +277,12 @@ export class Modal extends Component {
    */
   open() {
     if (this.isOpen()) return this;
+    /*
+     * Captured before anything is presented, so it is the element the reader was actually on
+     * rather than whatever the overlay is about to focus. A subclass that traps focus before
+     * delegating here has already moved it and restores its own capture afterwards.
+     */
+    this.#opener = document.activeElement instanceof Element ? document.activeElement : null;
     const host = this.mountTarget();
     if (this.el.parentElement !== host) host.append(this.el);
     this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
@@ -196,10 +291,15 @@ export class Modal extends Component {
       this._present();
     } catch (error) {
       delete this.el.dataset.zxOverlayOrder;
+      // Nothing was presented, so nothing will close; a capture left behind would outlive its open.
+      this.#opener = null;
       throw error;
     }
     this.el.dataset.state = 'open';
     this.emit('open');
+    // Deferred by one microtask: the platform's own focusing step runs as part of presenting, and
+    // this has to be the one that settles, not the one it overwrites.
+    queueMicrotask(() => this._focusInitial());
     return this;
   }
 
@@ -278,6 +378,47 @@ export class Modal extends Component {
  * @type {CustomEvent<Record<string, never>>}
  */
 
+/**
+ * Picks the control initial focus belongs on inside an overlay panel: an `autofocus` control when
+ * the content named one, the first focusable descendant otherwise, and null when the panel holds
+ * neither and must take focus itself.
+ *
+ * Candidates in a hidden, `aria-hidden` or `inert` subtree are skipped, because `focus()` on one
+ * is a silent no-op: a `Dialog` whose header close button is hidden by `closable: false`, or whose
+ * other registered views sit hidden in the same body, would otherwise "focus" nothing at all and
+ * leave the reader with no way into the overlay.
+ * @param {Element} root Overlay panel.
+ * @returns {HTMLElement|null}
+ */
+export function initialFocusTarget(root) {
+  const declared = root.querySelector('[autofocus]:not([disabled])');
+  if (declared && isFocusable(declared, root)) return /** @type {HTMLElement} */ (declared);
+  for (const candidate of root.querySelectorAll(FOCUSABLE_SELECTOR)) {
+    if (isFocusable(candidate, root)) return /** @type {HTMLElement} */ (candidate);
+  }
+  return null;
+}
+
+/**
+ * Whether a candidate can take focus from where it sits inside the panel.
+ *
+ * Duck-typed on `focus` rather than tested against `HTMLElement`, so a focusable SVG or MathML
+ * element inside the panel is a candidate rather than a silently skipped one.
+ * @param {Element} element Candidate found by the focusable selector.
+ * @param {Element} root Panel the search is bounded by.
+ * @returns {boolean}
+ */
+function isFocusable(element, root) {
+  if (typeof (/** @type {HTMLElement} */ (element).focus) !== 'function') return false;
+  for (let node = /** @type {Element|null} */ (element); node; node = node.parentElement) {
+    if (/** @type {HTMLElement} */ (node).hidden) return false;
+    if (node.getAttribute('aria-hidden') === 'true') return false;
+    if (node.hasAttribute('inert')) return false;
+    if (node === root) break;
+  }
+  return true;
+}
+
 /**
  * @param {Element} target
  * @param {Node|string|number|{toElement: () => Node|null}|null|undefined} content

package/src/components/navigation-bar/navigation-bar.css

@@ -138,12 +138,87 @@
   box-shadow: inset var(--zx-focus-ring);
 }
 
+/*
+ * Overflow.
+ *
+ * Three modes, written by the component onto the root as `data-overflow`:
+ *
+ *   all      — every item collapses (the default, `minVisible: 0`): the row is taken out and the
+ *              More button replaces it, which is what a top app bar wants.
+ *   partial  — `minVisible` items stay in the row and the rest move into the menu. The row and
+ *              the button are then on screen together, which is the one case the navigation has
+ *              to lay them out side by side.
+ *   off      — `overflow: false` or `overflowBelow: false`: nothing ever collapses, and the
+ *              More button never appears at any width.
+ *
+ * The threshold is the awkward part, because a container query cannot read a custom property. So
+ * the default threshold lives here, in the query below, and any other one is measured by the
+ * component, which writes `data-overflow-below` (stand down, this bar has its own threshold) and
+ * `data-narrow`. The two blocks carry the same three declarations for that reason — a change to
+ * one belongs in the other.
+ */
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__navigation {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+}
+
+/*
+ * `partial` and `off` are the two modes that keep items in the row at a width the row was never
+ * going to fit: `minVisible` is a promise that those items stay, not that they fit, and
+ * `overflow: false` is the same promise for all of them. They give way by truncating their own
+ * labels rather than by spilling out of the bar. The badge and the More button keep their size —
+ * a count that says "4" and a button that says "More" have nothing to give.
+ *
+ * The default `all` mode is deliberately not in this list: it takes the whole row out instead, and
+ * it never has both on screen at once.
+ */
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__item,
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__label,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__item,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__label {
+  min-inline-size: 0;
+}
+
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__label,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__badge,
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__more,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__badge {
+  flex: none;
+}
+
 @container (max-width: 44rem) {
-  .zx-navigation-bar__items {
+  .zx-navigation-bar[data-overflow="all"]:not([data-overflow-below]) .zx-navigation-bar__items {
     display: none;
   }
 
-  .zx-navigation-bar__more:not([data-empty="true"]) {
+  .zx-navigation-bar[data-overflow="partial"]:not([data-overflow-below])
+    .zx-navigation-bar__item[data-collapsed="true"] {
+    display: none;
+  }
+
+  .zx-navigation-bar:not([data-overflow="off"]):not([data-overflow-below])
+    .zx-navigation-bar__more:not([data-empty="true"]) {
     display: inline-flex;
   }
 }
+
+.zx-navigation-bar[data-overflow="all"][data-narrow="true"] .zx-navigation-bar__items {
+  display: none;
+}
+
+.zx-navigation-bar[data-overflow="partial"][data-narrow="true"]
+  .zx-navigation-bar__item[data-collapsed="true"] {
+  display: none;
+}
+
+.zx-navigation-bar[data-narrow="true"]:not([data-overflow="off"])
+  .zx-navigation-bar__more:not([data-empty="true"]) {
+  display: inline-flex;
+}