@inglorious/ui 8.6.0 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.6.0",
+  "version": "9.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/src/controls/button/template.js

@@ -35,8 +35,8 @@ export function render(props) {
     isPressed = false,
     isFullWidth = false,
     buttonType = "button",
-    ariaLabel = "",
-    isAriaPressed = false,
+    ariaLabel,
+    isAriaPressed,
     className = "",
     accept,
     isMultiple = false,
@@ -74,8 +74,8 @@ export function render(props) {
   return html`
     <button
       type=${buttonType}
-      aria-label=${ariaLabel}
-      aria-pressed=${isAriaPressed}
+      aria-label=${ariaLabel || nothing}
+      aria-pressed=${isAriaPressed ?? nothing}
       class=${classMap(classes)}
       ?disabled=${isDisabled}
       @click=${handleClick}

package/src/controls/combobox/style.css

@@ -5,7 +5,8 @@
   flex-direction: column;
   gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
-  position: relative; /* required for dropdown positioning */
+  /* Each combobox anchors its own dropdown to its own frame. */
+  anchor-scope: --iw-combobox;
 
   &.iw-combobox-full-width {
     width: 100%;
@@ -38,6 +39,7 @@
   }
 
   .iw-combobox-frame {
+    anchor-name: --iw-combobox;
     display: flex;
     align-items: center;
     /* The gap spaces the text from the arrow, as it does for Input's icons. */
@@ -182,12 +184,17 @@
     }
   }
 
+  /* A popover in the top layer, placed under the frame and as wide as it,
+     flipping above when there is no room below. The browser's popover box
+     is centred in the viewport, so its insets, margin and colours are reset. */
   .iw-combobox-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: 1000;
+    position-anchor: --iw-combobox;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    inset: auto;
+    width: anchor-size(width);
+    padding: 0;
+    color: var(--iw-color-text);
     display: flex;
     flex-direction: column;
     max-height: 16rem;
@@ -198,7 +205,7 @@
     border-start-end-radius: 0;
     background: var(--iw-color-bg);
     box-shadow: var(--iw-shadow-lg);
-    margin-top: -1px;
+    margin: -1px 0 0;
 
     .iw-combobox-dropdown-search {
       width: 100%;

package/src/controls/combobox/template.js

@@ -12,6 +12,7 @@ import { when } from "@inglorious/web/directives/when"
 
 import { Chip } from "../../data-display/chip/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
+import { syncPopover } from "../../shared/top-layer.js"
 import {
   filterOptions,
   formatOption,
@@ -263,7 +264,12 @@ export const Combobox = {
 
   /**
    * Renders the dropdown panel that contains search input, options, and empty/loading states.
-   * Shown only when the combobox is open.
+   * Shown only when the combobox is open, as a popover in the top layer so no
+   * container can clip it, anchored under the control by CSS.
+   *
+   * A manual popover: the control that opens it is not a button, so it cannot
+   * be the popover's invoker, and a light dismiss would close the dropdown on
+   * the very press that toggles it. Outside presses and Esc are handled here.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -276,7 +282,11 @@ export const Combobox = {
       id=${id ? `${id}-control-listbox` : nothing}
       class="iw-combobox-dropdown"
       role="listbox"
-      ${ref((el) => trackOutsideClick(props, el))}
+      popover="manual"
+      ${ref((el) => {
+        syncPopover(el, { isOpen: true })
+        trackOutsideClick(props, el)
+      })}
     >
       ${when(isSearchable, () => this.renderSearchInput?.(props))}
       ${when(isLoading, () => this.renderLoading?.(props))}

package/src/controls/rating/style.css

@@ -1,17 +1,39 @@
+/* A fieldset of native radios: the inputs stay in the page for the keyboard
+   and assistive tech but out of sight, and each star is the label that
+   checks its radio. */
 .iw-rating {
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-1);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-inline-size: 0;
 
   .iw-rating-item {
-    border: 0;
-    background: transparent;
-    padding: 0;
-    margin: 0;
+    position: relative;
     cursor: pointer;
     color: var(--iw-color-warning);
     font-size: 1.25rem;
     line-height: 1;
+    border-radius: var(--iw-radius-sm);
+  }
+
+  .iw-rating-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .iw-rating-item:has(.iw-rating-input:focus-visible) {
+    outline: 2px solid var(--iw-color-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled .iw-rating-item {
+    cursor: default;
   }
 
   &.iw-rating-sm .iw-rating-item {

package/src/controls/rating/template.js

@@ -3,7 +3,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"
 
 const DEFAULT_VALUE = 0
@@ -12,12 +12,16 @@ const INDEX_TO_RATING = 1
 
 /**
  * Renders a star (or custom symbol) rating control.
+ * Each star is a native radio, so the arrow keys move between them, the group
+ * is announced as one choice, and the value submits with a form under `name`.
  * Supports max value, read-only/disabled states, and emits selection changes.
  * @param {RatingProps} props
  * @returns {TemplateResult}
  */
 export function render(props) {
   const {
+    id,
+    name,
     value = DEFAULT_VALUE,
     max = DEFAULT_MAX,
     isDisabled = false,
@@ -25,9 +29,14 @@ export function render(props) {
     symbol = "★",
     emptySymbol = "☆",
     size = "md",
+    ariaLabel = "Rating",
     onChange,
   } = props
 
+  // Radios are a group by sharing a name: without one, the arrow keys do not
+  // move between the stars.
+  const groupName = name || id
+
   const classes = {
     "iw-rating": true,
     [`iw-rating-${size}`]: size !== "md",
@@ -36,22 +45,30 @@ export function render(props) {
   }
 
   return html`
-    <div class=${classMap(classes)} role="radiogroup" aria-label="rating">
+    <fieldset
+      id=${id || nothing}
+      class=${classMap(classes)}
+      aria-label=${ariaLabel}
+      ?disabled=${isDisabled || isReadOnly}
+    >
       ${Array.from({ length: max }, (_, index) => {
         const ratingValue = index + INDEX_TO_RATING
         const isActive = ratingValue <= value
         return html`
-          <button
-            type="button"
-            class="iw-rating-item"
-            aria-label=${`rate-${ratingValue}`}
-            ?disabled=${isDisabled || isReadOnly}
-            @click=${() => onChange?.(ratingValue)}
-          >
-            ${isActive ? symbol : emptySymbol}
-          </button>
+          <label class="iw-rating-item">
+            <input
+              class="iw-rating-input"
+              type="radio"
+              name=${groupName || nothing}
+              value=${ratingValue}
+              aria-label=${`${ratingValue} of ${max}`}
+              .checked=${ratingValue === value}
+              @change=${() => onChange?.(ratingValue)}
+            />
+            <span aria-hidden="true">${isActive ? symbol : emptySymbol}</span>
+          </label>
         `
       })}
-    </div>
+    </fieldset>
   `
 }

package/src/controls/switch/template.js

@@ -10,7 +10,8 @@ import { ref } from "@inglorious/web/directives/ref"
 import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
- * Renders a toggle switch backed by a checkbox input.
+ * Renders a toggle switch backed by a checkbox input, which `role="switch"`
+ * has assistive tech announce as on/off rather than checked.
  * Use it for boolean settings with optional labels and disabled state.
  * @param {SwitchProps} props
  * @returns {TemplateResult}
@@ -46,6 +47,7 @@ export function render(props) {
         id=${inputId || nothing}
         class="iw-switch-input"
         type="checkbox"
+        role="switch"
         name=${name}
         .checked=${isChecked}
         ?disabled=${isDisabled}

package/src/data-display/tooltip/style.css

@@ -1,10 +1,22 @@
+/* The bubble is anchored to the trigger by CSS: the browser places it on the
+   requested side and flips it to the opposite one when it would leave the
+   viewport. Fixed, so a container that clips its overflow does not cut it. */
 .iw-tooltip {
-  position: relative;
+  anchor-scope: --iw-tooltip;
   display: inline-flex;
   align-items: center;
 
+  .iw-tooltip-trigger {
+    anchor-name: --iw-tooltip;
+  }
+
   .iw-tooltip-bubble {
-    position: absolute;
+    position: fixed;
+    position-anchor: --iw-tooltip;
+    position-area: top;
+    position-try-fallbacks: flip-block;
+    margin-block-end: var(--iw-space-2);
+    width: max-content;
     z-index: var(--iw-z-tooltip);
     opacity: 0;
     pointer-events: none;
@@ -15,9 +27,6 @@
     padding: var(--iw-space-2) var(--iw-space-3);
     box-shadow: var(--iw-shadow-md);
     transition: opacity 150ms ease;
-    left: 50%;
-    bottom: calc(100% + var(--iw-space-2));
-    transform: translateX(-50%);
     white-space: normal;
   }
 
@@ -38,20 +47,19 @@
   }
 
   &.iw-tooltip-bottom .iw-tooltip-bubble {
-    top: calc(100% + var(--iw-space-2));
-    bottom: auto;
+    position-area: bottom;
+    margin: var(--iw-space-2) 0 0;
   }
 
   &.iw-tooltip-left .iw-tooltip-bubble {
-    left: auto;
-    right: calc(100% + var(--iw-space-2));
-    bottom: 50%;
-    transform: translateY(50%);
+    position-area: left;
+    position-try-fallbacks: flip-inline;
+    margin: 0 var(--iw-space-2) 0 0;
   }
 
   &.iw-tooltip-right .iw-tooltip-bubble {
-    left: calc(100% + var(--iw-space-2));
-    bottom: 50%;
-    transform: translateY(50%);
+    position-area: right;
+    position-try-fallbacks: flip-inline;
+    margin: 0 0 0 var(--iw-space-2);
   }
 }

package/src/examples/dashboard/primitive-content.js

@@ -1028,6 +1028,7 @@ Dialog.render({
       preview: () =>
         Dialog.render({
           isOpen: true,
+          isModal: false,
           title: "Delete record",
           description: "This action cannot be undone.",
           actions: previewRow([
@@ -1173,8 +1174,7 @@ Drawer.render({
 })`,
       preview: () =>
         Drawer.render({
-          isOpen: true,
-          hasBackdrop: false,
+          variant: "permanent",
           title: "Navigation",
           children: List.render({
             items: [
@@ -1225,7 +1225,8 @@ Link.render({
       code: `import { Menu } from "@inglorious/ui/menu"
 
 Menu.render({
-  isOpen: true,
+  id: "record-actions",
+  trigger: "Actions",
   items: [
     { label: "Edit" },
     { label: "Duplicate" },
@@ -1235,7 +1236,8 @@ Menu.render({
 })`,
       preview: () =>
         Menu.render({
-          isOpen: true,
+          id: "record-actions",
+          trigger: "Actions",
           items: [
             { label: "Edit" },
             { label: "Duplicate" },
@@ -1268,7 +1270,6 @@ Pagination.render({
       code: `import { SpeedDial } from "@inglorious/ui/speed-dial"
 
 SpeedDial.render({
-  isOpen: true,
   actions: [
     { label: "Add", icon: "+" },
     { label: "Share", icon: "↗" }
@@ -1276,7 +1277,6 @@ SpeedDial.render({
 })`,
       preview: () =>
         SpeedDial.render({
-          isOpen: true,
           actions: [
             { label: "Add", icon: "+" },
             { label: "Share", icon: "↗" },

package/src/examples/dashboard/style.css

@@ -251,17 +251,23 @@
 }
 
 .iw-primitive-preview .iw-backdrop,
-.iw-primitive-preview .iw-dialog-backdrop,
 .iw-primitive-preview .iw-snackbar,
 .iw-primitive-preview .iw-drawer {
   position: absolute;
 }
 
-.iw-primitive-preview .iw-backdrop,
-.iw-primitive-preview .iw-dialog-backdrop {
+.iw-primitive-preview .iw-backdrop {
   inset: 0;
 }
 
+/* Shown in place (isModal: false), so it can sit in the preview's flow
+   rather than where the browser positions a non-modal dialog. */
+.iw-primitive-preview .iw-dialog {
+  position: static;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .iw-primitive-preview .iw-drawer {
   top: var(--iw-space-3);
   bottom: var(--iw-space-3);
@@ -278,8 +284,8 @@
   color: var(--iw-color-text-secondary);
 }
 
-.iw-dashboard-progress-list .iw-progress-linear-track {
-  height: 0.25rem;
+.iw-dashboard-progress-list .iw-progress-linear {
+  --iw-progress-height: 0.25rem;
 }
 
 .iw-dashboard-user-subtitle {

package/src/feedback/dialog/dialog.stories.js

@@ -9,15 +9,18 @@ export default {
   render: createRender(Dialog),
   argTypes: {
     isOpen: { control: "boolean" },
+    isModal: { control: "boolean" },
     title: { control: "text" },
     description: { control: "text" },
     onClose: { action: "onClose" },
   },
 }
 
+// In place, so the docs page that shows every story stays usable.
 export const Open = {
   args: {
     isOpen: true,
+    isModal: false,
     title: "Delete item",
     description: "This action cannot be undone.",
     children: html`<p>Are you sure you want to continue?</p>`,
@@ -25,3 +28,9 @@ export const Open = {
       <button class="iw-button iw-button-primary">Confirm</button>`,
   },
 }
+
+// Modal takes over the page, so it is left out of the docs page.
+export const Modal = {
+  tags: ["!autodocs"],
+  args: { ...Open.args, isModal: true },
+}

package/src/feedback/dialog/style.css

@@ -1,15 +1,7 @@
-.iw-dialog-backdrop {
-  position: fixed;
-  inset: 0;
-  background: color-mix(in srgb, var(--iw-color-black) 55%, transparent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--iw-z-modal, 1050);
-  padding: var(--iw-space-4);
-  backdrop-filter: blur(2px);
-}
-
+/* A native <dialog>, so the browser's own box is reset: the surface inside
+   carries the padding, which leaves the dialog element itself reachable only
+   through the backdrop. Modal dialogs sit in the top layer, above any
+   z-index, and the browser centres them. */
 .iw-dialog {
   background: var(--iw-color-surface);
   color: var(--iw-color-text);
@@ -18,6 +10,15 @@
   min-width: min(32rem, 90vw);
   max-width: min(48rem, 90vw);
   box-shadow: var(--iw-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.3));
+  padding: 0;
+}
+
+.iw-dialog::backdrop {
+  background: color-mix(in srgb, var(--iw-color-black) 55%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.iw-dialog-surface {
   padding: var(--iw-space-4);
 }
 

package/src/feedback/dialog/template.js

@@ -3,18 +3,31 @@
  * @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,
     title,
     description,
     children,
@@ -24,8 +37,6 @@ export function render(props) {
     onBackdropClick,
   } = props
 
-  if (!isOpen) return null
-
   const extraClasses = Object.fromEntries(
     className
       .split(/\s+/)
@@ -33,20 +44,49 @@ 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, ...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 +103,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>`
 }