@inglorious/ui 8.6.0 → 9.0.0

package/src/feedback/progress/style.css

@@ -24,41 +24,65 @@
   }
 }
 
+/* A native <progress>, restyled. Browsers draw its value through their own
+   pseudo-elements, so the look is set once here: the bar takes `color`, like
+   the color variants above, and an app adjusts the rest through
+   --iw-progress-height, --iw-progress-radius and --iw-progress-track-color. */
 .iw-progress-linear {
-  width: 100%;
-}
-
-.iw-progress-linear-track {
-  width: 100%;
-  height: 8px;
-  background: color-mix(in srgb, currentColor 24%, transparent);
-  border-radius: var(--iw-radius-sm);
-  overflow: hidden;
-}
-
-.iw-progress-linear-bar {
-  display: block;
-  height: 100%;
-  background: linear-gradient(
+  --iw-progress-bar: linear-gradient(
     90deg,
     color-mix(in srgb, currentColor 84%, white),
     currentColor
   );
-  transition: width 0.2s ease;
-  min-width: 8px;
-}
+  --iw-progress-track: var(
+    --iw-progress-track-color,
+    color-mix(in srgb, currentColor 24%, transparent)
+  );
 
-.iw-progress-linear.iw-progress-indeterminate .iw-progress-linear-bar {
-  width: 30%;
-  animation: iw-progress-linear 1.4s ease-in-out infinite;
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: var(--iw-progress-height, 8px);
+  border: 0;
+  border-radius: var(--iw-progress-radius, var(--iw-radius-sm));
+  overflow: hidden;
+  background: var(--iw-progress-track);
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background: var(--iw-progress-bar);
+    border-radius: var(--iw-progress-radius, var(--iw-radius-sm));
+    transition: width 0.2s ease;
+  }
+
+  &::-moz-progress-bar {
+    background: var(--iw-progress-bar);
+    border-radius: var(--iw-progress-radius, var(--iw-radius-sm));
+  }
+
+  /* Indeterminate: no value to draw, so a sliver of the bar sweeps across
+     the track, painted on the element itself. */
+  &:indeterminate {
+    background:
+      var(--iw-progress-bar) no-repeat 0 0 / 30% 100%,
+      var(--iw-progress-track);
+    animation: iw-progress-linear 1.4s ease-in-out infinite;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
 }
 
 @keyframes iw-progress-linear {
   0% {
-    transform: translateX(-100%);
+    background-position-x: -50%;
   }
   100% {
-    transform: translateX(350%);
+    background-position-x: 150%;
   }
 }
 

package/src/feedback/progress/template.js

@@ -3,12 +3,14 @@
  * @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"
 
 /**
  * Renders a linear or circular progress indicator.
  * Indeterminate mode is used when no explicit value is provided.
+ * The linear bar is a native `<progress>`; the circle, which no native element
+ * draws, is an SVG with the same `progressbar` semantics.
  * @param {ProgressProps} props
  * @returns {TemplateResult}
  */
@@ -19,6 +21,7 @@ export function render(props) {
     size = 40,
     thickness = 4,
     color = "default",
+    ariaLabel,
     className = "",
   } = props
 
@@ -45,8 +48,13 @@ export function render(props) {
         ...extraClasses,
       })}
       style=${`width: ${size}px; height: ${size}px;`}
+      role="progressbar"
+      aria-label=${ariaLabel || nothing}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow=${progress ?? nothing}
     >
-      <svg viewBox="0 0 ${size} ${size}">
+      <svg aria-hidden="true" viewBox="0 0 ${size} ${size}">
         <circle
           class="iw-progress-track"
           cx=${size / 2}
@@ -69,7 +77,10 @@ export function render(props) {
 
   const progress = value == null ? null : clamp(value)
 
-  return html`<div
+  // An attribute, not a property: removing it is the only way back to
+  // indeterminate, which `:indeterminate` styles and assistive tech announces
+  // as busy.
+  return html`<progress
     class=${classMap({
       "iw-progress": true,
       "iw-progress-linear": true,
@@ -77,14 +88,10 @@ export function render(props) {
       "iw-progress-indeterminate": progress == null,
       ...extraClasses,
     })}
-  >
-    <div class="iw-progress-linear-track">
-      <div
-        class="iw-progress-linear-bar"
-        style=${progress == null ? "" : `width: ${progress}%;`}
-      ></div>
-    </div>
-  </div>`
+    max="100"
+    value=${progress ?? nothing}
+    aria-label=${ariaLabel || nothing}
+  ></progress>`
 }
 
 function clamp(value) {

package/src/feedback/snackbar/style.css

@@ -10,6 +10,19 @@
   max-width: calc(100vw - 2 * var(--iw-snackbar-gap));
 }
 
+/* A manual popover in the top layer. The browser centres a popover in the
+   viewport as a bordered box, so its insets and box are reset, with no
+   specificity so the positions below still set their own sides. */
+:where(.iw-snackbar) {
+  inset: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  color: inherit;
+  background: transparent;
+}
+
 .iw-snackbar-bottom-left,
 .iw-snackbar-bottom-center,
 .iw-snackbar-bottom-right {

package/src/feedback/snackbar/template.js

@@ -5,10 +5,15 @@
 
 import { html } 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"
 
 /**
  * Renders a transient snackbar message with optional action and dismiss control.
  * Position is configurable (for example bottom-left or top-right).
+ * A manual popover, so it shows in the top layer, above an open modal dialog,
+ * and only `isOpen` or its close button take it down.
  * @param {SnackbarProps} props
  * @returns {TemplateResult | null}
  */
@@ -39,6 +44,8 @@ export function render(props) {
     })}
     role="status"
     aria-live="polite"
+    popover="manual"
+    ${ref((element) => syncPopover(element, { isOpen: true }))}
   >
     <div class="iw-snackbar-content">
       <span class="iw-snackbar-message">${message}</span>

package/src/navigation/drawer/drawer.stories.js

@@ -19,13 +19,9 @@ export default {
     },
     variant: {
       control: "select",
-      options: ["temporary", "persistent", "permanent", "responsive"],
-      description: "Drawer behavior model.",
-    },
-    breakpoint: {
-      control: "select",
-      options: ["sm", "md", "lg", "xl"],
-      description: "Desktop breakpoint for responsive drawers.",
+      options: ["responsive", "temporary", "permanent"],
+      description:
+        "When the drawer overlays the page: below 64rem, always, or never.",
     },
     isCollapsed: {
       control: "boolean",

package/src/navigation/drawer/style.css

@@ -1,5 +1,16 @@
+/* While it overlays the page the drawer is a popover in the top layer. The
+   browser styles every popover as a centred, bordered box hidden until it
+   opens, so those defaults are reset here: the drawer stays displayed while
+   closed, off-screen or docked, and slides rather than appears. */
 .iw-drawer {
+  display: flex;
+  flex-direction: column;
   width: 16rem;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
   background: var(--iw-drawer-bg, var(--iw-color-surface));
   color: var(--iw-color-text);
   transition:
@@ -10,8 +21,7 @@
     max-width var(--iw-transition-fast);
 
   position: fixed;
-  top: 0;
-  bottom: 0;
+  inset-block: 0;
   z-index: var(--iw-z-modal, 1050);
 
   /* As tall as an app bar, so the line under a drawer and the app bar beside
@@ -105,33 +115,68 @@
 /* `left` and `right` are the start and end of the line: the left drawer
    sits on the right in a right-to-left page, and slides off that way. */
 .iw-drawer-left {
-  inset-inline-start: 0;
+  inset-inline: 0 auto;
   border-inline-end: 1px solid var(--iw-color-border);
   transform: translateX(calc(-100% * var(--iw-dir-sign, 1)));
 }
 
 .iw-drawer-right {
-  inset-inline-end: 0;
+  inset-inline: auto 0;
   border-inline-start: 1px solid var(--iw-color-border);
   transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
 }
 
-@media (min-width: 0rem) {
-  .iw-drawer {
-    box-shadow: var(--iw-shadow-lg);
+.iw-drawer::backdrop {
+  background: color-mix(in srgb, var(--iw-color-black) 65%, transparent);
+  backdrop-filter: blur(3px);
+}
 
-    &.iw-drawer-open {
-      transform: translateX(0);
-    }
+.iw-drawer-no-backdrop::backdrop {
+  background: transparent;
+  backdrop-filter: none;
+}
 
-    .iw-drawer-footer {
-      display: none;
-    }
+/* Overlaying: a temporary drawer at every width, a responsive one below
+   64rem. Off-screen until open, raised, closed from its header. The collapse
+   toggle only makes sense for a rail, so the footer goes. */
+.iw-drawer {
+  box-shadow: var(--iw-shadow-lg);
+
+  &.iw-drawer-open {
+    transform: translateX(0);
+  }
+
+  .iw-drawer-footer {
+    display: none;
+  }
+}
+
+/* Docked: a permanent drawer at every width, a responsive one from 64rem
+   (keep in step with DOCKED_QUERY in template.js). In place, flat, and
+   hidden only on request. */
+.iw-drawer-permanent {
+  transform: none;
+  box-shadow: none;
+
+  &.iw-drawer-left.iw-drawer-hidden {
+    transform: translateX(calc(-100% * var(--iw-dir-sign, 1)));
+  }
+
+  &.iw-drawer-right.iw-drawer-hidden {
+    transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
+  }
+
+  .iw-drawer-close {
+    display: none;
+  }
+
+  .iw-drawer-footer {
+    display: flex;
   }
 }
 
 @media (min-width: 64rem) {
-  .iw-drawer {
+  .iw-drawer-responsive {
     transform: none;
     box-shadow: none;
 
@@ -143,10 +188,6 @@
       transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
     }
 
-    & ~ .iw-drawer-backdrop {
-      display: none;
-    }
-
     .iw-drawer-close {
       display: none;
     }

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;