@inglorious/ui 8.6.0 → 9.1.0

package/src/navigation/drawer/template.js

@@ -3,18 +3,38 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { Button } from "../../controls/button/index.js"
 import { Icon } from "../../data-display/icon/index.js"
-import { Backdrop } from "../../feedback/backdrop/index.js"
 import { Flex } from "../../layout/flex/index.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 import { close, leftPanelClose } from "../../shared/icons.js"
+import { syncPopover } from "../../shared/top-layer.js"
+
+/** Where a responsive drawer docks. Keep in step with style.css. */
+const DOCKED_QUERY = "(min-width: 64rem)"
+
+/**
+ * Latest props of each responsive drawer, so they can be re-synced when the
+ * viewport crosses the breakpoint without anything re-rendering.
+ * @type {Map<HTMLElement, DrawerProps>}
+ */
+const responsiveDrawers = new Map()
+
+/** @type {MediaQueryList | undefined} */
+let dockedMedia
 
 /**
  * Renders a side drawer panel with optional header, body, and collapse controls.
- * Can show a backdrop when open and supports left/right anchoring.
+ * While it overlays the page it is a native popover: it sits in the top layer
+ * over a `::backdrop`, and Esc or a press outside it (the backdrop included)
+ * closes it.
+ * `variant` sets when it overlays: `responsive` below 64rem and docked above,
+ * `temporary` at every width, `permanent` never.
  * @param {DrawerProps} props
  * @returns {TemplateResult}
  */
@@ -25,6 +45,7 @@ export function render(props) {
     isOpen = false,
     isHidden = false,
     anchor = "left",
+    variant = "responsive",
     isCollapsed = false,
     hasBackdrop = true,
     title,
@@ -42,89 +63,125 @@ export function render(props) {
       .map((name) => [name, true]),
   )
 
-  const drawerClassName = [
-    "iw-drawer",
-    `iw-drawer-${anchor}`,
-    isOpen && "iw-drawer-open",
-    isHidden && "iw-drawer-hidden",
-    isCollapsed && "iw-drawer-collapsed",
-    ...Object.keys(extraClasses),
-  ]
-    .filter(Boolean)
-    .join(" ")
-
-  return html`
-    ${Flex.render({
-      element: "aside",
-      direction: "column",
-      className: drawerClassName,
-      children: [
-        when(
-          title || onClose,
-          () => html`
-            ${Flex.render({
-              align: "center",
-              justify: "between",
-              gap: "sm",
-              padding: "sm",
-              className: "iw-drawer-header",
-              children: [
-                when(
-                  title,
-                  () => html`<div class="iw-drawer-title">${title}</div>`,
-                ),
-                when(onClose, () =>
-                  Button.render({
-                    color: "secondary",
-                    variant: "ghost",
-                    shape: "square",
-                    className: "iw-drawer-close",
-                    "aria-label": "Close",
-                    onClick: onClose,
-                    children: Icon.render({ icon: close, size: "lg" }),
-                  }),
-                ),
-              ],
-            })}
-          `,
-        ),
+  const classes = {
+    "iw-drawer": true,
+    [`iw-drawer-${anchor}`]: true,
+    [`iw-drawer-${variant}`]: true,
+    "iw-drawer-open": isOpen,
+    "iw-drawer-hidden": isHidden,
+    "iw-drawer-collapsed": isCollapsed,
+    "iw-drawer-no-backdrop": !hasBackdrop,
+    ...extraClasses,
+  }
 
-        Flex.render({
-          direction: "column",
-          className: "iw-drawer-body",
-          children,
-        }),
+  // Without onClose nothing would take isOpen down, so the browser is not
+  // allowed to dismiss it: a manual popover ignores Esc and outside presses.
+  const popover =
+    variant === "permanent" ? nothing : onClose ? "auto" : "manual"
 
-        when(
-          onCollapseToggle,
-          () => html`
-            ${Flex.render({
-              justify: "end",
-              padding: "sm",
-              className: "iw-drawer-footer",
-              children: Button.render({
+  return html`<aside
+    class=${classMap(classes)}
+    popover=${popover}
+    ${ref((element) => {
+      if (!element) return
+      applyElementProps(element, rest)
+      sync(element, { isOpen, variant, onClose })
+    })}
+  >
+    ${when(
+      title || onClose,
+      () => html`
+        ${Flex.render({
+          align: "center",
+          justify: "between",
+          gap: "sm",
+          padding: "sm",
+          className: "iw-drawer-header",
+          children: [
+            when(
+              title,
+              () => html`<div class="iw-drawer-title">${title}</div>`,
+            ),
+            when(onClose, () =>
+              Button.render({
                 color: "secondary",
                 variant: "ghost",
                 shape: "square",
-                className: "iw-drawer-toggler",
-                "aria-label": isCollapsed
-                  ? "Expand sidebar"
-                  : "Collapse sidebar",
-                onClick: onCollapseToggle,
-                children: Icon.render({ icon: leftPanelClose, size: "lg" }),
+                className: "iw-drawer-close",
+                "aria-label": "Close",
+                onClick: onClose,
+                children: Icon.render({ icon: close, size: "lg" }),
               }),
-            })}
-          `,
-        ),
-      ],
-      ...rest,
+            ),
+          ],
+        })}
+      `,
+    )}
+    ${Flex.render({
+      direction: "column",
+      className: "iw-drawer-body",
+      children,
     })}
-    ${when(isOpen && hasBackdrop, () =>
-      Backdrop.render({
-        isOpen: true,
-        className: "iw-drawer-backdrop",
-        onClick: onClose,
-      }),
+    ${when(
+      onCollapseToggle,
+      () => html`
+        ${Flex.render({
+          justify: "end",
+          padding: "sm",
+          className: "iw-drawer-footer",
+          children: Button.render({
+            color: "secondary",
+            variant: "ghost",
+            shape: "square",
+            className: "iw-drawer-toggler",
+            "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            onClick: onCollapseToggle,
+            children: Icon.render({ icon: leftPanelClose, size: "lg" }),
+          }),
+        })}
+      `,
     )}
-  `
+  </aside>`
+}
+
+/**
+ * Shows the popover only while the drawer overlays the page, and remembers a
+ * responsive drawer so a breakpoint crossing can re-sync it.
+ * @param {HTMLElement} element
+ * @param {Pick<DrawerProps, "isOpen" | "variant" | "onClose">} props
+ */
+function sync(element, props) {
+  if (props.variant === "responsive") {
+    watchDockedMedia()
+    responsiveDrawers.set(element, props)
+  } else {
+    responsiveDrawers.delete(element)
+  }
+
+  syncPopover(element, {
+    isOpen: props.isOpen && isOverlay(props.variant),
+    onClose: props.onClose,
+  })
+}
+
+function isOverlay(variant) {
+  if (variant === "permanent") return false
+  if (variant === "temporary") return true
+  return !dockedMedia?.matches
+}
+
+/**
+ * Listens once for the breakpoint. Widening the window docks an open
+ * responsive drawer, which then has to leave the top layer: a silent hide,
+ * since nothing asked the store to close it.
+ */
+function watchDockedMedia() {
+  if (dockedMedia || !globalThis.matchMedia) return
+  dockedMedia = globalThis.matchMedia(DOCKED_QUERY)
+  dockedMedia.addEventListener("change", () => {
+    for (const [element, props] of responsiveDrawers) {
+      if (element.isConnected) sync(element, props)
+      else responsiveDrawers.delete(element)
+    }
+  })
 }

package/src/navigation/menu/menu.stories.js

@@ -12,6 +12,11 @@ export default {
     },
     items: { control: "object", description: "Menu items and separators." },
     isDense: { control: "boolean", description: "Compact item spacing." },
+    trigger: {
+      control: "text",
+      description: "Content of a button that opens the menu as a popover.",
+    },
+    onToggle: { action: "onToggle" },
     onItemClick: { action: "onItemClick" },
   },
   parameters: {
@@ -34,3 +39,13 @@ export const Default = {
     ],
   },
 }
+
+// Anchored to its trigger. Without onToggle wired to a store, the browser
+// keeps the open state on its own.
+export const WithTrigger = {
+  args: {
+    id: "story-menu",
+    trigger: "Actions",
+    items: Default.args.items,
+  },
+}

package/src/navigation/menu/style.css

@@ -3,12 +3,31 @@
   flex-direction: column;
   min-width: 12rem;
   padding: var(--iw-space-2);
+  color: var(--iw-color-text);
   background: var(--iw-color-surface);
   border: 1px solid var(--iw-color-border);
   border-radius: var(--iw-radius-md);
   box-shadow: var(--iw-shadow-lg);
 }
 
+/* Anchored to its trigger: below it and aligned with its start, flipping up
+   or across when there is no room. The browser's popover box is centred in
+   the viewport, so its insets and margins are reset; its hidden state has to
+   be restated, because the display above outranks it. */
+.iw-menu[popover] {
+  inset: auto;
+  margin: var(--iw-space-1) 0 0;
+  position-area: block-end span-inline-end;
+  position-try-fallbacks:
+    flip-block,
+    flip-inline,
+    flip-block flip-inline;
+
+  &:not(:popover-open) {
+    display: none;
+  }
+}
+
 .iw-menu-item {
   border: 0 none;
   background: transparent;

package/src/navigation/menu/template.js

@@ -4,40 +4,76 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
+import { Button } from "../../controls/button/index.js"
+import { anchorName } from "../../shared/anchor.js"
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { syncPopover } from "../../shared/top-layer.js"
 
 export const Menu = {
   /**
    * Main entrypoint for a menu list. Delegates to the base renderer for overrides.
    * Menus render selectable items and optional dividers.
+   * With a `trigger`, the menu is a native popover anchored to a button that
+   * opens it: the browser places it, flipping it to stay on screen, and closes
+   * it on Esc, a press outside, or a pick.
    * @param {MenuProps} props
    * @returns {TemplateResult | null}
    */
   render(props) {
-    return this.renderMenu(props)
+    if (!props.trigger) return this.renderMenu(props)
+    return html`${this.renderTrigger(props)}${this.renderMenu(props)}`
   },
 
   /**
-   * Renders the menu container and iterates items when open.
-   * Each item is delegated to `renderItem`.
+   * Renders the button that opens an anchored menu. It is the popover's
+   * `commandfor` invoker, so the browser toggles the menu from it and does
+   * not count a press on it as a press outside.
+   * @param {MenuProps} props
+   * @returns {TemplateResult}
+   */
+  renderTrigger(props) {
+    const { id, isOpen = false, trigger, triggerProps, onToggle } = props
+
+    return Button.render({
+      variant: "ghost",
+      ...triggerProps,
+      children: trigger,
+      commandfor: id,
+      command: "toggle-popover",
+      "aria-haspopup": "menu",
+      // Left to the browser when it alone keeps the open state.
+      "aria-expanded": onToggle ? String(isOpen) : undefined,
+      style: `anchor-name: ${anchorName(id)}`,
+    })
+  },
+
+  /**
+   * Renders the menu container and iterates items.
+   * Each item is delegated to `renderItem`. An inline menu is only rendered
+   * while open; an anchored one stays in the page as a hidden popover.
    * @param {MenuProps} props
    * @returns {TemplateResult | null}
    */
   renderMenu(props) {
     const {
       type, // eslint-disable-line no-unused-vars
+      id,
       isOpen = false,
       items = [],
       isDense = false,
       className = "",
+      trigger,
+      triggerProps, // eslint-disable-line no-unused-vars
+      onToggle,
+      onItemClick, // eslint-disable-line no-unused-vars
       ...rest
     } = props
 
-    if (!isOpen) return null
+    if (!trigger && !isOpen) return null
 
     const extraClasses = Object.fromEntries(
       className
@@ -47,13 +83,27 @@ export const Menu = {
     )
 
     return html`<div
+      id=${id || nothing}
       class=${classMap({
         "iw-menu": true,
         "iw-menu-dense": isDense,
         ...extraClasses,
       })}
       role="menu"
-      ${ref((el) => applyElementProps(el, rest))}
+      popover=${trigger ? "auto" : nothing}
+      style=${trigger ? `position-anchor: ${anchorName(id)}` : nothing}
+      ${ref((element) => {
+        if (!element) return
+        applyElementProps(element, rest)
+        // Without onToggle the browser alone opens and closes it.
+        if (trigger && onToggle) {
+          syncPopover(element, {
+            isOpen,
+            onOpen: () => onToggle(true),
+            onClose: () => onToggle(false),
+          })
+        }
+      })}
     >
       ${items.map((item, index) => this.renderItem(item, index, props))}
     </div>`
@@ -72,6 +122,7 @@ export const Menu = {
       return html`<div class="iw-menu-divider" role="separator"></div>`
     }
 
+    // In an anchored menu each item also hides the popover once picked.
     return html`<button
       type="button"
       class=${classMap({
@@ -79,6 +130,8 @@ export const Menu = {
         "iw-menu-item-selected": item.isSelected,
       })}
       role="menuitem"
+      commandfor=${props.trigger ? props.id : nothing}
+      command=${props.trigger ? "hide-popover" : nothing}
       ?disabled=${item.isDisabled}
       @click=${() => {
         item.onClick?.(item.value ?? index)

package/src/navigation/speed-dial/style.css

@@ -1,22 +1,49 @@
+/* The actions are a popover anchored to the trigger and placed on the side
+   `direction` names. The browser's popover box is centred in the viewport,
+   so its insets and box are reset; its hidden state has to be restated,
+   because the display below outranks it. */
 .iw-speed-dial {
+  anchor-scope: --iw-speed-dial;
   display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--iw-space-2);
+}
+
+.iw-speed-dial-trigger {
+  anchor-name: --iw-speed-dial;
 }
 
 .iw-speed-dial-actions {
+  position-anchor: --iw-speed-dial;
+  position-area: top;
+  inset: auto;
+  margin: 0 0 var(--iw-space-2);
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  background: transparent;
   display: inline-flex;
   flex-direction: column;
+  align-items: center;
   gap: var(--iw-space-2);
+
+  &:not(:popover-open) {
+    display: none;
+  }
 }
 
 .iw-speed-dial-down .iw-speed-dial-actions {
-  order: 1;
+  position-area: bottom;
+  margin: var(--iw-space-2) 0 0;
+}
+
+.iw-speed-dial-left .iw-speed-dial-actions {
+  position-area: left;
+  margin: 0 var(--iw-space-2) 0 0;
+  flex-direction: row;
 }
 
-.iw-speed-dial-left .iw-speed-dial-actions,
 .iw-speed-dial-right .iw-speed-dial-actions {
+  position-area: right;
+  margin: 0 0 0 var(--iw-space-2);
   flex-direction: row;
 }
 

package/src/navigation/speed-dial/template.js

@@ -4,8 +4,11 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+
+import { syncPopover } from "../../shared/top-layer.js"
 
 export const SpeedDial = {
   /**
@@ -19,8 +22,10 @@ export const SpeedDial = {
   },
 
   /**
-   * Renders the speed dial container, trigger, and optional actions list.
+   * Renders the speed dial container, trigger, and actions list.
    * Actions are delegated to `renderAction`.
+   * The actions are a native popover anchored to the trigger, which toggles
+   * it as its invoker: Esc, a press outside or an action closes it.
    * @param {SpeedDialProps} props
    * @returns {TemplateResult}
    */
@@ -31,6 +36,7 @@ export const SpeedDial = {
       icon = "+",
       ariaLabel = "Speed dial",
       actions = [],
+      onToggle,
     } = props
 
     return html`<div
@@ -39,24 +45,36 @@ export const SpeedDial = {
         [`iw-speed-dial-${direction}`]: true,
         "iw-speed-dial-open": isOpen,
       })}
+      ${ref((element) => {
+        if (!element) return
+        const trigger = element.querySelector(".iw-speed-dial-trigger")
+        const popover = element.querySelector(".iw-speed-dial-actions")
+        // A property, not `commandfor`, so the link needs no id.
+        trigger.commandForElement = popover
+        // Without onToggle the browser alone opens and closes it.
+        if (onToggle) {
+          syncPopover(popover, {
+            isOpen,
+            onOpen: () => onToggle(true),
+            onClose: () => onToggle(false),
+          })
+        }
+      })}
     >
-      ${
-        isOpen
-          ? html`<div class="iw-speed-dial-actions">
-              ${actions.map((action, index) =>
-                this.renderAction(action, index, props),
-              )}
-            </div>`
-          : null
-      }
       <button
         type="button"
         class="iw-speed-dial-trigger"
         aria-label=${ariaLabel}
-        @click=${() => props.onToggle?.(!isOpen)}
+        aria-expanded=${onToggle ? String(isOpen) : nothing}
+        command="toggle-popover"
       >
         ${icon}
       </button>
+      <div class="iw-speed-dial-actions" popover="auto">
+        ${actions.map((action, index) =>
+          this.renderAction(action, index, props),
+        )}
+      </div>
     </div>`
   },
 
@@ -72,6 +90,17 @@ export const SpeedDial = {
     return html`<button
       type="button"
       class="iw-speed-dial-action"
+      command="hide-popover"
+      ${ref((element) => {
+        // Hides the popover once the action runs, like a menu item. Linked a
+        // microtask later: a new action is still outside the popover when its
+        // ref runs.
+        if (element) {
+          queueMicrotask(() => {
+            element.commandForElement = element.parentElement
+          })
+        }
+      })}
       aria-label=${action.label ?? `Speed dial action ${index + 1}`}
       ?disabled=${action.isDisabled}
       @click=${() => {

package/src/navigation/tabs/template.js

@@ -4,7 +4,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
 export const Tabs = {
@@ -40,6 +40,7 @@ export const Tabs = {
           "iw-tabs-full-width": isFullWidth,
         })}
         role="tablist"
+        @keydown=${moveBetweenTabs}
       >
         ${items.map((item, index) =>
           this.renderTab(item, index, { ...props, value }),
@@ -47,7 +48,7 @@ export const Tabs = {
       </div>
       ${this.renderPanel(
         items.find((item, index) => (item.value ?? index) === value) ?? null,
-        props,
+        { ...props, value },
       )}
     </div>`
   },
@@ -63,15 +64,24 @@ export const Tabs = {
   renderTab(item, index, props) {
     const tabValue = item.value ?? index
     const selected = tabValue === props.value
+    // Only one tab is in the Tab order, and the arrow keys move between them:
+    // the selected tab, or the first one while none is.
+    const hasSelection = props.items.some(
+      (other, otherIndex) => (other.value ?? otherIndex) === props.value,
+    )
+    const isTabStop = selected || (!hasSelection && index === 0)
 
     return html`<button
       type="button"
       role="tab"
+      id=${props.id ? `${props.id}-tab-${tabValue}` : nothing}
       class=${classMap({
         "iw-tab": true,
         "iw-tab-selected": selected,
       })}
       aria-selected=${selected ? "true" : "false"}
+      aria-controls=${props.id && selected ? `${props.id}-panel` : nothing}
+      tabindex=${isTabStop ? 0 : -1}
       ?disabled=${item.isDisabled}
       @click=${() => {
         item.onClick?.(tabValue)
@@ -89,8 +99,46 @@ export const Tabs = {
    * @param {TabItem | null} item
    * @returns {TemplateResult | null}
    */
-  renderPanel(item) {
+  renderPanel(item, props) {
     if (!item?.panel) return null
-    return html`<div class="iw-tab-panel" role="tabpanel">${item.panel}</div>`
+    const { id, value } = props ?? {}
+    return html`<div
+      id=${id ? `${id}-panel` : nothing}
+      class="iw-tab-panel"
+      role="tabpanel"
+      aria-labelledby=${id ? `${id}-tab-${value}` : nothing}
+    >
+      ${item.panel}
+    </div>`
   },
 }
+
+/**
+ * Arrow keys move to the previous or next tab and select it, wrapping at
+ * either end; Home and End jump to the first and last. Left and right swap in
+ * a right-to-left page, where the tabs run the other way.
+ * @param {KeyboardEvent} event
+ */
+function moveBetweenTabs(event) {
+  const tabs = [
+    ...event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'),
+  ]
+  const current = tabs.indexOf(event.target)
+  if (current === -1) return
+
+  const isRtl = getComputedStyle(event.currentTarget).direction === "rtl"
+  const forward = isRtl ? "ArrowLeft" : "ArrowRight"
+  const backward = isRtl ? "ArrowRight" : "ArrowLeft"
+
+  let next
+  if (event.key === forward) next = (current + 1) % tabs.length
+  else if (event.key === backward)
+    next = (current - 1 + tabs.length) % tabs.length
+  else if (event.key === "Home") next = 0
+  else if (event.key === "End") next = tabs.length - 1
+  else return
+
+  event.preventDefault()
+  tabs[next].focus()
+  tabs[next].click()
+}