@inglorious/ui 8.5.0 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.5.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/button.stories.js

@@ -57,7 +57,19 @@ export default {
       options: ["button", "submit", "reset", "menu"],
       description: "Native HTML button type attribute.",
     },
+    accept: {
+      control: "text",
+      description: "File types the picker offers (with `onFileSelect`).",
+    },
+    isMultiple: {
+      control: "boolean",
+      description: "Lets the picker select more than one file.",
+    },
     onClick: { action: "onClick" },
+    onFileSelect: {
+      action: "onFileSelect",
+      description: "Turns the button into a file picker.",
+    },
   },
   parameters: {
     docs: {
@@ -150,6 +162,16 @@ Round.args = {
   children: "＋",
 }
 
+export const FilePicker = {}
+FilePicker.args = {
+  ...Default.args,
+  children: "Change photo",
+  variant: "outline",
+  shape: "pill",
+  accept: "image/jpeg,image/png,image/webp",
+  onFileSelect: () => {},
+}
+
 export const CustomContent = {}
 CustomContent.args = {
   ...Default.args,

package/src/controls/button/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"
 import { ref } from "@inglorious/web/directives/ref"
 
@@ -12,10 +12,14 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
 /**
  * Renders a themed button for actions and form submission.
  * Supports variants, sizes, shapes, pressed state, and full-width layout.
+ * With `onFileSelect`, the button also opens a file picker on click.
  * @example
  * // Stateless usage
  * button.render({ children: 'Click me', variant: 'primary' })
  *
+ * // File picker
+ * button.render({ children: 'Upload', accept: 'image/*', onFileSelect })
+ *
  * @param {ButtonProps} props
  * @returns {TemplateResult}
  */
@@ -31,10 +35,13 @@ export function render(props) {
     isPressed = false,
     isFullWidth = false,
     buttonType = "button",
-    ariaLabel = "",
-    isAriaPressed = false,
+    ariaLabel,
+    isAriaPressed,
     className = "",
+    accept,
+    isMultiple = false,
     onClick,
+    onFileSelect,
     ...rest
   } = props
 
@@ -57,17 +64,43 @@ export function render(props) {
     ...extraClasses,
   }
 
+  const handleClick = onFileSelect
+    ? (event) => {
+        onClick?.(event)
+        event.currentTarget.nextElementSibling.click()
+      }
+    : onClick
+
   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=${onClick}
+      @click=${handleClick}
       ${ref((element) => applyElementProps(element, rest))}
     >
       ${children}
     </button>
+    ${
+      onFileSelect
+        ? html`<input
+            type="file"
+            accept=${accept ?? ""}
+            ?multiple=${isMultiple}
+            ?disabled=${isDisabled}
+            hidden
+            @change=${(event) => handleFileChange(event, onFileSelect)}
+          />`
+        : nothing
+    }
   `
 }
+
+function handleFileChange(event, onFileSelect) {
+  const { files } = event.target
+  if (files?.length) onFileSelect(files)
+  // Clear the input so picking the same file again still fires `change`
+  event.target.value = ""
+}

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/file-upload/style.css

@@ -58,6 +58,10 @@
     inset: 0;
     opacity: 0;
     cursor: pointer;
+
+    &::file-selector-button {
+      cursor: inherit;
+    }
   }
 
   .iw-upload-content {

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