@threadlabs/looma 0.6.0 → 0.6.2

package/components/ui-avatar/ui-avatar.html

@@ -47,6 +47,19 @@
       block-size: 100%;
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      .fallback {
+        display: block;
+        text-align: center;
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     [hidden] {
       display: none;
     }

package/components/ui-avatar-group/ui-avatar-group.html

@@ -12,6 +12,11 @@
   </div>
   <style>
     :host {
+      /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
+       * diffuse elevation overlays use. */
+      --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
+      --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
       display: flex;
       align-items: center;
       flex-direction: row;
@@ -42,8 +47,8 @@
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow:
-        var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
-        0 0 0 1px rgb(0 0 0 / 0.06);
+        var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+        var(--ui-avatar-group-edge-ring, var(--_edge-ring));
       font: inherit;
       font-size: 0.75rem;
       font-weight: 600;

package/components/ui-avatar-group/ui-avatar-group.js

@@ -10,10 +10,10 @@ export default function controller(host) {
       avatar.style.display = index >= visible ? "none" : "";
       avatar.style.marginInlineStart = index === 0 ? "0px" : "-0.625rem";
       avatar.style.borderRadius = "999px";
-      // Later avatars cast a soft shadow back onto the one they overlap; the first overlaps nothing.
+      // Later avatars cast a crisp shadow back onto the one they overlap; the first overlaps nothing.
       avatar.style.boxShadow = index === 0
-        ? "0 0 0 1px rgb(0 0 0 / 0.06)"
-        : "var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)), 0 0 0 1px rgb(0 0 0 / 0.06)";
+        ? "var(--ui-avatar-group-edge-ring, var(--_edge-ring))"
+        : "var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)), var(--ui-avatar-group-edge-ring, var(--_edge-ring))";
     });
     host.state.overflowCount = Math.max(0, avatars.length - visible);
   };

package/components/ui-badge/ui-badge.html

@@ -26,6 +26,20 @@
       white-space: nowrap;
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      :host {
+        display: block;
+        min-block-size: var(--ui-badge-min-block-size, 1.5rem);
+        text-align: center;
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     :host-state([tone="accent"]) {
       --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));

package/components/ui-button/ui-button.html

@@ -5,8 +5,8 @@
     <prop name="size" type="sm | md | lg" default="md">Control size.</prop>
     <prop name="tone" type="neutral | accent" default="neutral"
     >Intent of an outline, ghost, or link button. accent tints it with the accent colour, for a secondary action that still reads as the primary path. For a
-      product whose buttons are accent-tinted by default, set --ui-button-surface, --ui-button-border, and --ui-button-text once in your theme rather than
-      annotating every call site.</prop>
+      product whose buttons are accent-tinted by default, point --ui-button-surface, --ui-button-border, and --ui-button-text at the accent values in your theme
+      rather than annotating every call site, and keep them as var() references so they follow a later change of accent.</prop>
     <prop name="disabled" type="boolean" default="false">disabled token.</prop>
     <prop name="align" type="center | start" default="center"
     >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>

package/components/ui-cluster/ui-cluster.html

@@ -10,7 +10,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: var(--ui-layout-gap, var(--_layout-gap));
+      gap: var(--ui-cluster-gap, var(--_layout-gap));
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;

package/components/ui-combobox/ui-combobox.html

@@ -21,6 +21,7 @@
     <prop name="disclosure" type="boolean" default="false">disclosure token.</prop>
     <prop name="clearable" type="boolean" default="false">clearable token.</prop>
     <prop name="help" type="string" default="">help token.</prop>
+    <state name="internalItems" type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))" :value="[]"></state>
     <state name="raw" :value="''"></state>
     <state name="display" :value="''"></state>
     <state name="selected" type="string | null" :value="null"></state>
@@ -79,68 +80,85 @@
   <div>
     <label :for="format('%s-input', uid)" class:sr-only="labelVisibility = 'sr-only'"><template $value="label"></template><template $if="required">
         *</template></label>
-    <div class="field" $ref="field">
-      <slot name="start"></slot>
-      <template $if="multiple">
+    <div class="control">
+      <div class="field" $ref="field">
+        <slot name="start"></slot>
+        <template $if="multiple">
+          <button
+            $each="item, index of internalItems"
+            $key="item.id"
+            class="item"
+            type="button"
+            tabindex="-1"
+            :data-index="index"
+            :disabled="disabled or readonly or item.disabled"
+            :aria-label="format('%s, press Delete or Backspace to remove', item.label)"
+          >
+            <slot :name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+          </button>
+        </template>
+        <input
+          $ref="input"
+          :id="format('%s-input', uid)"
+          role="combobox"
+          aria-autocomplete="list"
+          autocomplete="off"
+          :aria-controls="format('%s-listbox', uid)"
+          :aria-expanded="expanded"
+          :aria-invalid="validationStatus = 'error'"
+          :aria-busy="validationStatus = 'pending'"
+          .value="display"
+          :placeholder="placeholder"
+          :name="name"
+          :disabled="disabled"
+          :readonly="readonly"
+          :required="required"
+        >
+        <button $if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+          <svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <path d="M7 7l10 10M17 7 7 17"></path>
+          </svg>
+        </button>
         <button
-          $each="item, index of items"
-          $key="item.id"
-          class="item"
+          $if="disclosure"
           type="button"
+          data-combobox-action="disclosure"
           tabindex="-1"
-          :data-index="index"
-          :disabled="disabled or readonly or item.disabled"
-          :aria-label="format('%s, press Delete or Backspace to remove', item.label)"
+          aria-label="Show suggestions"
+          :aria-controls="format('%s-listbox', uid)"
         >
-          <slot :name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+          <svg
+            class="affordance-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
         </button>
-      </template>
-      <input
-        $ref="input"
-        :id="format('%s-input', uid)"
-        role="combobox"
-        aria-autocomplete="list"
-        autocomplete="off"
-        :aria-controls="format('%s-listbox', uid)"
-        :aria-expanded="expanded"
-        :aria-invalid="validationStatus = 'error'"
-        :aria-busy="validationStatus = 'pending'"
-        .value="display"
-        :placeholder="placeholder"
-        :name="name"
-        :disabled="disabled"
-        :readonly="readonly"
-        :required="required"
-      >
-      <button $if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
-        <svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <path d="M7 7l10 10M17 7 7 17"></path>
-        </svg>
-      </button>
-      <button $if="help" :id="format('%s-help', uid)" type="button" aria-label="Help" :disabled="disabled"><span aria-hidden="true">?</span></button>
-      <button
-        $if="disclosure"
-        type="button"
-        data-combobox-action="disclosure"
-        tabindex="-1"
-        aria-label="Show suggestions"
-        :aria-controls="format('%s-listbox', uid)"
-      >
+      </div>
+      <button $if="help" class="help" :id="format('%s-help', uid)" type="button" aria-label="Help" :disabled="disabled">
         <svg
-          class="affordance-icon"
+          class="help-icon"
           aria-hidden="true"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          stroke-width="2.25"
+          stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         >
-          <path d="m6 9 6 6 6-6"></path>
+          <circle cx="12" cy="12" r="10"></circle>
+          <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path>
+          <path d="M12 17h.01"></path>
         </svg>
       </button>
     </div>
-    <ui-tooltip $if="help" :id="format('%s-help-text', uid)" :for="format('%s-help', uid)"><template $value="help"></template></ui-tooltip>
+    <ui-tooltip $if="help" trigger="click" :id="format('%s-help-text', uid)" :for="format('%s-help', uid)"><template $value="help"></template></ui-tooltip>
     <div class="popup" $ref="popup" :hidden="not expanded">
       <div role="listbox" $ref="listbox" :id="format('%s-listbox', uid)" :aria-label="format('%s suggestions', label)" :aria-busy="loading">
         <div $each="group of groups" $key="group.name" :role="group.role" :aria-label="group.label">
@@ -193,7 +211,17 @@
       font-size: var(--ui-combobox-label-font-size, 0.875rem);
       font-weight: 500;
     }
+    /* The field and anything that annotates it sit on one row; the help button is beside the box,
+       not inside it, because a control's box holds its value. */
+    .control {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+    }
+
     .field {
+      flex: 1 1 auto;
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
@@ -208,6 +236,44 @@
         var(--ui-control-inset),
         var(--ui-control-focus-halo-shadow);
     }
+    /* A ghost icon button: the affordance is the mark, not a box around it. */
+    .help {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--ui-control-size-sm);
+      block-size: var(--ui-control-size-sm);
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-round);
+      background: transparent;
+      color: var(--ui-text-secondary);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .help:hover:enabled,
+    .help[aria-expanded="true"] {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+      color: var(--ui-text-primary);
+    }
+
+    .help:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    .help:disabled {
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+
+    .help-icon {
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
     input::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;

package/components/ui-combobox/ui-combobox.js

@@ -48,7 +48,9 @@ export default function controller(host) {
     allowFreeText: Boolean(host.state.allowFreeText),
     allowCreate: Boolean(host.state.allowCreate),
   });
-  const items = () => host.state.multiple && Array.isArray(host.state.items) ? host.state.items : [];
+  // Selected items work uncontrolled: the component keeps them and reports every change. A consumer
+  // that owns `items` stays in charge, because the prop resyncs whatever it sets.
+  const items = () => host.state.multiple && Array.isArray(host.state.internalItems) ? host.state.internalItems : [];
   const selectedValues = () => new Set(items().map((item) => item.value));
   const setValidation = (result, touched = host.state.validation?.touched ?? false) => {
     const issues = result.issues ?? [];
@@ -168,7 +170,10 @@ export default function controller(host) {
       proposedChange = undefined;
     });
   };
-  const emitItems = (next) => host.dispatch("value-change", next);
+  const emitItems = (next) => {
+    host.state.internalItems = next;
+    host.dispatch("value-change", next);
+  };
   const setMultiQuery = (query, trigger) => {
     if (host.state.query === undefined) {
       host.state.raw = query;
@@ -412,7 +417,14 @@ export default function controller(host) {
   };
   const observer = new MutationObserver(relabel);
   observer.observe(authored, { childList: true, subtree: true, characterData: true, attributes: true });
+  let lastItems = host.state.items;
+  if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
   const stop = host.effect(() => {
+    // A consumer that sets `items` owns them; otherwise the component keeps its own.
+    if (host.state.items !== lastItems) {
+      lastItems = host.state.items;
+      if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
+    }
     if (host.state.value !== lastValue) { lastValue = host.state.value; syncValue(); }
     if (host.state.query !== lastQuery) { lastQuery = host.state.query; syncQuery(); }
     if (host.state.disabled || host.state.readonly) close();

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -13,7 +13,7 @@
   </defs>
   <div :hidden="not open">
     <p class="hint" $value="hint"></p>
-    <div class="grid" role="group" aria-label="Table dimensions" style:--ui-editor-table-grid-rows="rows" style:--ui-editor-table-grid-cols="cols">
+    <div class="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
       <button
         $each="cell of cells"
         $key="cell.key"
@@ -47,8 +47,8 @@
 
     .grid {
       display: grid;
-      grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
-      grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+      grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
+      grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
       gap: 2px;
       margin-bottom: var(--ui-space-2);
     }

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -32,7 +32,7 @@
           :aria-checked="swatch.selected"
           :data-action="swatch.action"
         >
-          <span class="swatch" class:default="not swatch.color" style:--ui-editor-table-context-swatch="swatch.color"></span>
+          <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
           <span class="swatch-label" $value="swatch.label"></span>
         </button>
       </div>
@@ -123,7 +123,7 @@
       height: 1rem;
       border-radius: 999px;
       border: 1px solid var(--ui-border);
-      background: var(--ui-editor-table-context-swatch, #fff);
+      background: var(--_swatch, #fff);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
       flex-shrink: 0;
     }

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -67,7 +67,7 @@
               :aria-checked="swatch.selected"
               :data-action="swatch.action"
             >
-              <span class="swatch" class:default="not swatch.color" style:--ui-editor-table-toolbar-swatch="swatch.color"></span>
+              <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
               <span $value="swatch.label"></span>
             </button>
           </div>
@@ -255,7 +255,7 @@
       flex: 0 0 14px;
       border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
       border-radius: 3px;
-      background: var(--ui-editor-table-toolbar-swatch);
+      background: var(--_swatch);
     }
 
     .swatch.default {

package/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -14,9 +14,10 @@
       gap: var(--ui-editor-toolbar-gap, 2px);
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
-      overflow-x: auto;
-      scrollbar-width: none;
-      white-space: nowrap;
+      /* More controls than the column is wide is normal at a readable measure, so the row wraps.
+         Scrolling hid the tail behind an invisible scrollbar. */
+      flex-wrap: wrap;
+      row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
       border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
     }
@@ -38,6 +39,7 @@
     }
 
     :host-state([floating]) {
+      flex-wrap: nowrap;
       position: static;
       top: auto;
       width: max-content;

package/components/ui-menu-item/ui-menu-item.html

@@ -20,6 +20,19 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      :host {
+        display: block;
+        min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     :host:is(:hover, :focus-visible):not([aria-disabled="true"]) {
       background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }

package/components/ui-stack/ui-stack.html

@@ -11,7 +11,7 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: var(--ui-layout-gap, var(--_layout-gap));
+      gap: var(--ui-stack-gap, var(--_layout-gap));
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;

package/components/ui-tabs/ui-tabs.html

@@ -81,6 +81,19 @@
         border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      .list button {
+        display: block;
+        text-align: center;
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     :host-state([stretch]) .list {
       grid-auto-columns: minmax(max-content, 1fr);
     }

package/components/ui-toast-region/ui-toast-region.html

@@ -72,12 +72,12 @@
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-      animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+      animation: ui-toast-enter var(--ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
     .toast.closing {
-      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
+      animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
       pointer-events: none;
     }
 

package/components/ui-tooltip/ui-tooltip.html

@@ -3,6 +3,9 @@
     <prop name="for" type="string" default="">ID of the control described and visually anchored by the tooltip.</prop>
     <prop name="open" type="boolean" default="false">Whether the tooltip is open initially or when set externally.</prop>
     <prop name="placement" type="string" default="top-start">Positions the description relative to its trigger.</prop>
+    <prop name="trigger" type="hover | click | focus" default="hover"
+    >How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus
+      opens only while the trigger holds focus.</prop>
     <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
     <prop name="hideDelay" type="number" default="100">Waits this many milliseconds before hiding after pointer exit.</prop>
     <prop name="inverse" type="boolean" default="false">Use the high-contrast inverse surface (dark on light themes, light on dark themes).</prop>

package/components/ui-tooltip/ui-tooltip.js

@@ -21,9 +21,15 @@ export default function controller(host) {
   const setOpen = (open, input) => {
     if (Boolean(host.state.internalOpen) === open) return;
     host.state.internalOpen = open;
+    if (trigger && host.state.trigger === "click") trigger.setAttribute("aria-expanded", String(open));
     host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: input });
   };
-  const onKeydown = (event) => { if (event.key === "Escape") clearTimers(); };
+  const onKeydown = (event) => {
+    if (event.key !== "Escape") return;
+    clearTimers();
+    // A tooltip the reader opened is theirs to close.
+    if (host.state.trigger === "click" && host.state.internalOpen) setOpen(false, "keyboard");
+  };
   const onEnter = (event) => {
     if (event.pointerType === "touch") return;
     clearHide();
@@ -58,19 +64,34 @@ export default function controller(host) {
     if (ids.length) trigger.setAttribute("aria-describedby", ids.join(" "));
     else trigger.removeAttribute("aria-describedby");
     trigger.removeEventListener("keydown", onKeydown);
+    trigger.removeEventListener("click", onClick);
+    trigger.removeAttribute("aria-expanded");
     trigger.removeEventListener("pointerenter", onEnter);
     trigger.removeEventListener("pointerleave", onLeave);
     trigger.removeEventListener("focusin", onFocusin);
     trigger.removeEventListener("focusout", onFocusout);
   };
+  const onClick = () => {
+    clearTimers();
+    setOpen(!host.state.internalOpen, "pointer");
+  };
   const attach = () => {
     if (!trigger) return;
     const ids = new Set((trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
     ids.add(element.id);
     trigger.setAttribute("aria-describedby", [...ids].join(" "));
     trigger.addEventListener("keydown", onKeydown);
-    trigger.addEventListener("pointerenter", onEnter);
-    trigger.addEventListener("pointerleave", onLeave);
+    const how = host.state.trigger ?? "hover";
+    if (how === "click") {
+      // A question-mark button says nothing on hover: it opens when pressed, and closes the same way.
+      trigger.addEventListener("click", onClick);
+      trigger.setAttribute("aria-expanded", String(Boolean(host.state.internalOpen)));
+      return;
+    }
+    if (how === "hover") {
+      trigger.addEventListener("pointerenter", onEnter);
+      trigger.addEventListener("pointerleave", onLeave);
+    }
     trigger.addEventListener("focusin", onFocusin);
     trigger.addEventListener("focusout", onFocusout);
   };