<bmx-split-button>

<div class="row">
  <bmx-split-button id="docs-split-save" label="Save">Save</bmx-split-button>
  <bmx-split-button id="docs-split-export" variant="outline" tone="neutral" label="Export" placement="bottom-end">Export</bmx-split-button>
</div>
<script>
  // `items` is an array, so it is set as a property. An HTML attribute can only
  // ever be a string; an array pushed through one arrives as "[object Object]".
  //
  // Wait for the element to be defined first. This script runs while the page
  // parses, which is before the deferred runtime has registered anything, and a
  // property set on an element that has not upgraded yet may not survive the
  // upgrade. `whenDefined` is the reliable order, and it is what you want in
  // your own application too.
  customElements.whenDefined('bmx-split-button').then(() => {
    document.getElementById('docs-split-save').items = [
    { id: 'save-as', label: 'Save as…', shortcut: '⇧⌘S' },
    { id: 'save-copy', label: 'Save a copy', description: 'Keeps the original untouched' },
    { separator: true },
    { id: 'discard', label: 'Discard changes', danger: true },
  ];

    document.getElementById('docs-split-export').items = [
      { id: 'xlsx', label: 'Excel workbook' },
      { id: 'csv', label: 'CSV', shortcut: '⌘E' },
      { id: 'pdf', label: 'PDF', disabled: true },
    ];
  });
</script>

WHAT IS LEFT HERE

The two halves, and the debt-free part of the relationship between them. The menu is bmx-menu, which owns the surface, the placement, the roving tabindex, the typeahead and the focus. This component owns its trigger, and translates between the menu's vocabulary and its own.

That translation is not ceremony. Every bmx- event is composed, so a bmxSelect emitted by the menu inside this shadow root would reach a consumer of the split button alongside the one this component emits - and the consumer would see every choice twice. Each inner event is therefore stopped at the boundary and re-published deliberately, which is the rule in §8: an event that escapes a shadow root is part of that component's API whether it was meant to be or not.

HOW THE DELEGATION WAS MADE SAFE

The menu used to be built into this file. It was taken out under fifty-three characterisation tests written against the behaviour as it stood - including five that do nothing but count events - and not one of them was edited to accommodate the move. The single exception is recorded in the test file itself: the menu now answers a typed letter, because bmx-menu has the typeahead the WAI-ARIA menu pattern asks for and this component never did.

SUBMENUS

An entry with its own items opens a submenu, to any depth, exactly as it does in bmx-menu - "Export" with three formats under it is the case that earns it. That arrived with the delegation rather than being designed here, which made it worth a deliberate decision: either test and document it or refuse it, because an undocumented accident is the one option that is wrong. It is documented, and the choice reports a path so a nested item is identifiable. Keep them shallow. A split button is a short list of alternatives to one obvious action, and a menu deep enough to need navigating is a sign the obvious action is not obvious.

WHY THE MENU IS ANCHORED TO THE WHOLE COMPONENT

Aligning to the chevron alone would hang a wide menu off a narrow button; aligning to both halves is what makes bottom-start line up with the primary action's leading edge, which is the edge the eye is already on. Focus, by contrast, belongs on the chevron the user actually pressed - which is why the menu is told those two things separately.

ACCESSIBILITY

The trigger carries aria-haspopup="menu" and aria-expanded and points at the surface the menu renders; everything inside the menu - the roles, the roving tabindex, focus moving in on open and back to the trigger on close - is bmx-menu's, and is the same in every component that uses it.