@inglorious/ui 8.6.0 → 9.1.0

package/src/feedback/dialog/template.js

@@ -3,18 +3,32 @@
  * @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 { syncDialog } from "../../shared/top-layer.js"
 
 /**
- * Renders a modal dialog with header, body, and actions when open.
- * Clicking the backdrop can close the dialog when handlers are provided.
+ * Whether the last press on each dialog started on its backdrop.
+ * @type {WeakMap<HTMLDialogElement, boolean>}
+ */
+const backdropPresses = new WeakMap()
+
+/**
+ * Renders a native `<dialog>` with header, body, and actions.
+ * Modal by default: the browser traps focus, makes the page inert, closes on
+ * Esc and returns focus to the trigger. Clicking the backdrop can close the
+ * dialog when handlers are provided.
  * @param {DialogProps} props
- * @returns {TemplateResult | null}
+ * @returns {TemplateResult}
  */
 export function render(props) {
   const {
+    id,
     isOpen = false,
+    isModal = true,
+    size = "md",
     title,
     description,
     children,
@@ -24,8 +38,6 @@ export function render(props) {
     onBackdropClick,
   } = props
 
-  if (!isOpen) return null
-
   const extraClasses = Object.fromEntries(
     className
       .split(/\s+/)
@@ -33,20 +45,53 @@ export function render(props) {
       .map((name) => [name, true]),
   )
 
-  return html`<div
-    class=${classMap({ "iw-dialog-backdrop": true })}
-    @click=${onBackdropClick ?? onClose}
+  const titleId = id && title ? `${id}-title` : ""
+  const descriptionId = id && description ? `${id}-description` : ""
+  const onBackdrop = onBackdropClick ?? onClose
+
+  // The surface fills the dialog box, so a click that lands on the dialog
+  // itself can only have come from the backdrop around it. The press has to
+  // start there too: a drag from inside the surface that ends on the backdrop
+  // also clicks the dialog, and must not close it.
+  return html`<dialog
+    id=${id || nothing}
+    class=${classMap({
+      "iw-dialog": true,
+      [`iw-dialog-${size}`]: true,
+      ...extraClasses,
+    })}
+    aria-labelledby=${titleId || nothing}
+    aria-describedby=${descriptionId || nothing}
+    @pointerdown=${(event) => {
+      backdropPresses.set(
+        event.currentTarget,
+        event.target === event.currentTarget,
+      )
+    }}
+    @click=${(event) => {
+      const isBackdropPress = backdropPresses.get(event.currentTarget)
+      backdropPresses.delete(event.currentTarget)
+      if (event.target === event.currentTarget && isBackdropPress) {
+        onBackdrop?.()
+      }
+    }}
+    @cancel=${(event) => {
+      // Without onClose nothing would take isOpen down, so Esc is refused.
+      if (!onClose) event.preventDefault()
+    }}
+    ${ref((element) => syncDialog(element, { isOpen, isModal, onClose }))}
   >
-    <div
-      class=${classMap({ "iw-dialog": true, ...extraClasses })}
-      role="dialog"
-      aria-modal="true"
-      @click=${(event) => event.stopPropagation()}
-    >
+    <div class="iw-dialog-surface">
       ${
         (title || onClose) &&
         html`<div class="iw-dialog-header">
-          ${title ? html`<div class="iw-dialog-title">${title}</div>` : null}
+          ${
+            title
+              ? html`<div id=${titleId || nothing} class="iw-dialog-title">
+                  ${title}
+                </div>`
+              : null
+          }
           ${
             onClose
               ? html`<button
@@ -63,11 +108,16 @@ export function render(props) {
       }
       ${
         description
-          ? html`<div class="iw-dialog-description">${description}</div>`
+          ? html`<div
+              id=${descriptionId || nothing}
+              class="iw-dialog-description"
+            >
+              ${description}
+            </div>`
           : null
       }
       ${children ? html`<div class="iw-dialog-body">${children}</div>` : null}
       ${actions ? html`<div class="iw-dialog-actions">${actions}</div>` : null}
     </div>
-  </div>`
+  </dialog>`
 }

package/src/feedback/progress/progress.stories.js

@@ -8,6 +8,11 @@ export default {
   argTypes: {
     variant: { control: "select", options: ["linear", "circular"] },
     value: { control: "number" },
+    ariaLabel: {
+      control: "text",
+      description:
+        'Names the indicator for assistive tech, e.g. "Uploading photo".',
+    },
     size: { control: "number" },
     thickness: { control: "number" },
     color: {

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/layout/flex/flex.stories.js

@@ -30,7 +30,7 @@ export default {
     },
     gap: {
       control: "select",
-      options: ["none", "sm", "md", "lg", "xl"],
+      options: ["none", "xs", "sm", "md", "lg", "xl", "2xl"],
       description: "Spacing between children.",
     },
     padding: {

package/src/layout/flex/style.css

@@ -85,6 +85,10 @@
     gap: 0;
   }
 
+  &.iw-flex-gap-xs {
+    gap: var(--iw-space-1);
+  }
+
   &.iw-flex-gap-sm {
     gap: var(--iw-space-2);
   }
@@ -101,6 +105,10 @@
     gap: var(--iw-space-8);
   }
 
+  &.iw-flex-gap-2xl {
+    gap: var(--iw-space-12);
+  }
+
   &.iw-flex-padding-none {
     padding: 0;
   }

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;
     }