@inglorious/ui 8.6.0 → 9.1.0

package/src/controls/slider/template.js

@@ -14,10 +14,17 @@ const DEFAULT_VALUE = 0
 const DEFAULT_MIN = 0
 const DEFAULT_MAX = 100
 const DEFAULT_STEP = 1
+const PERCENT = 100
+/** Past this many steps, marks would be a smear rather than a scale. */
+const MAX_MARKS = 100
+const RANGE_LENGTH = 2
 
 /**
  * Renders a range slider with optional label and current value display.
  * Supports min/max/step, color, disabled state, and full-width layout.
+ * With a `[low, high]` value it has two thumbs, one for each end of a range:
+ * two native range inputs on one track, so each keeps the keyboard and
+ * assistive tech support of the platform. `hasMarks` draws a tick per step.
  * @param {SliderProps} props
  * @returns {TemplateResult}
  */
@@ -35,14 +42,18 @@ export function render(props) {
     color = "primary",
     isValueVisible = true,
     isFullWidth = false,
+    hasMarks = false,
     onChange,
     ...rest
   } = props
 
   const inputId = id || name
+  const isRange = Array.isArray(value) && value.length === RANGE_LENGTH
+  const shown = isRange ? `${value[0]} – ${value[1]}` : value
 
   const classes = {
     "iw-slider": true,
+    "iw-slider-range": isRange,
     [`iw-slider-${color}`]: color !== "primary",
     "iw-slider-full-width": isFullWidth,
   }
@@ -59,25 +70,113 @@ export function render(props) {
           }
           ${
             isValueVisible
-              ? html`<output class="iw-slider-value">${value}</output>`
+              ? html`<output class="iw-slider-value">${shown}</output>`
               : null
           }
         </div>`
       }
-      <input
-        id=${inputId || nothing}
-        class="iw-slider-input"
-        aria-label=${fallbackLabel(inputId, label)}
-        type="range"
-        name=${name}
-        min=${min}
-        max=${max}
-        step=${step}
-        .value=${String(value)}
-        ?disabled=${isDisabled}
-        @input=${(event) => onChange?.(Number(event.target.value))}
-        ${ref((element) => applyElementProps(element, rest))}
-      />
+      ${
+        isRange
+          ? renderRange({
+              inputId,
+              name,
+              label,
+              value,
+              min,
+              max,
+              step,
+              isDisabled,
+              onChange,
+              rest,
+            })
+          : html`<input
+              id=${inputId || nothing}
+              class="iw-slider-input"
+              aria-label=${fallbackLabel(inputId, label)}
+              type="range"
+              name=${name}
+              min=${min}
+              max=${max}
+              step=${step}
+              .value=${String(value)}
+              ?disabled=${isDisabled}
+              @input=${(event) => onChange?.(Number(event.target.value))}
+              ${ref((element) => applyElementProps(element, rest))}
+            />`
+      }
+      ${hasMarks ? renderMarks({ min, max, step }) : nothing}
     </div>
   `
 }
+
+/**
+ * Two thumbs on one track. Each input stops at the other's value, so the
+ * range never turns inside out, and the track is filled between them.
+ */
+function renderRange({
+  inputId,
+  name,
+  label,
+  value,
+  min,
+  max,
+  step,
+  isDisabled,
+  onChange,
+  rest,
+}) {
+  const [low, high] = value
+  const span = max - min || DEFAULT_STEP
+  const fill = `--iw-slider-low: ${((low - min) / span) * PERCENT}%; --iw-slider-high: ${((high - min) / span) * PERCENT}%`
+  const endName = (end) => (name ? `${name}-${end}` : nothing)
+  // Each thumb is named for its end of the range, after the slider's label.
+  const endLabel = (end) =>
+    typeof label === "string" && label ? `${label} ${end}` : end
+
+  return html`<div class="iw-slider-track" style=${fill}>
+    <input
+      id=${inputId || nothing}
+      class="iw-slider-input"
+      aria-label=${endLabel("minimum")}
+      type="range"
+      name=${endName("min")}
+      min=${min}
+      max=${max}
+      step=${step}
+      .value=${String(low)}
+      ?disabled=${isDisabled}
+      @input=${(event) => {
+        const next = Math.min(Number(event.target.value), high)
+        event.target.value = String(next)
+        onChange?.([next, high])
+      }}
+      ${ref((element) => applyElementProps(element, rest))}
+    />
+    <input
+      class="iw-slider-input"
+      aria-label=${endLabel("maximum")}
+      type="range"
+      name=${endName("max")}
+      min=${min}
+      max=${max}
+      step=${step}
+      .value=${String(high)}
+      ?disabled=${isDisabled}
+      @input=${(event) => {
+        const next = Math.max(Number(event.target.value), low)
+        event.target.value = String(next)
+        onChange?.([low, next])
+      }}
+    />
+  </div>`
+}
+
+/** A tick per step, spread along the track. Decorative. */
+function renderMarks({ min, max, step }) {
+  const count = Math.floor((max - min) / step) + 1
+  if (!(count > 1) || count > MAX_MARKS) return nothing
+
+  return html`<div class="iw-slider-marks" aria-hidden="true">
+    ${Array.from({ length: count }, () => html`<span></span>`)}
+  </div>`
+}

package/src/controls/switch/style.css

@@ -43,6 +43,17 @@
     transform: translateX(calc(1rem * var(--iw-dir-sign, 1)));
   }
 
+  /* With a description, the label and it stack beside the track. */
+  .iw-switch-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-switch-description {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+  }
+
   .iw-switch-label {
     color: var(--iw-color-text);
     font-size: var(--iw-font-size-base);

package/src/controls/switch/switch.stories.js

@@ -7,6 +7,10 @@ export default {
   render: createRender(Switch),
   argTypes: {
     label: { control: "text", description: "Label text." },
+    description: {
+      control: "text",
+      description: "A line of detail under the label.",
+    },
     name: { control: "text", description: "Native input name." },
     isChecked: { control: "boolean", description: "Current checked state." },
     isDisabled: { control: "boolean", description: "Disables interaction." },
@@ -46,3 +50,9 @@ On.args = {
   ...Default.args,
   isChecked: true,
 }
+
+export const WithDescription = {}
+WithDescription.args = {
+  ...Default.args,
+  description: "Alerts when a payment is due or a budget runs out.",
+}

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}
@@ -21,6 +22,7 @@ export function render(props) {
     type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
+    description,
     isChecked = false,
     isDisabled = false,
     color = "primary",
@@ -46,6 +48,7 @@ export function render(props) {
         id=${inputId || nothing}
         class="iw-switch-input"
         type="checkbox"
+        role="switch"
         name=${name}
         .checked=${isChecked}
         ?disabled=${isDisabled}
@@ -55,7 +58,16 @@ export function render(props) {
       <span class="iw-switch-track" aria-hidden="true">
         <span class="iw-switch-thumb"></span>
       </span>
-      ${label ? html`<span class="iw-switch-label">${label}</span>` : null}
+      ${
+        description
+          ? html`<span class="iw-switch-text">
+              ${label ? html`<span class="iw-switch-label">${label}</span>` : null}
+              <span class="iw-switch-description">${description}</span>
+            </span>`
+          : label
+            ? html`<span class="iw-switch-label">${label}</span>`
+            : null
+      }
     </label>
   `
 }

package/src/data-display/chip/chip.stories.js

@@ -1,4 +1,7 @@
+import sell from "@iconify-icons/material-symbols/sell"
+
 import { createRender } from "../../stories/notify-story.js"
+import { Icon } from "../icon"
 import { Chip } from "."
 
 export default {
@@ -7,6 +10,10 @@ export default {
   render: createRender(Chip),
   argTypes: {
     children: { control: "text", description: "Chip label content." },
+    icon: {
+      control: false,
+      description: "Shown before the label, such as an `Icon.render(...)`.",
+    },
     isRemovable: {
       control: "boolean",
       description: "Shows a remove affordance and emits `#id:remove`.",
@@ -55,3 +62,13 @@ export const Default = {
     shape: "pill",
   },
 }
+
+export const WithIcon = {
+  args: {
+    ...Default.args,
+    children: "Paid",
+    icon: Icon.render({ icon: sell, size: "sm" }),
+    isRemovable: false,
+    color: "success",
+  },
+}

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

@@ -10,6 +10,11 @@
   line-height: 1;
   white-space: nowrap;
 
+  .iw-chip-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
   .iw-chip-label {
     display: inline-flex;
     align-items: center;

package/src/data-display/chip/template.js

@@ -7,7 +7,7 @@ import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
- * Renders a compact chip label with optional remove action.
+ * Renders a compact chip label with an optional leading icon and remove action.
  * Use chips for tags, filters, or selected values.
  * @param {ChipProps} props
  * @returns {TemplateResult}
@@ -15,6 +15,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 export function render(props) {
   const {
     children,
+    icon,
     isRemovable = false,
     color = "default",
     size = "md",
@@ -30,6 +31,7 @@ export function render(props) {
   }
 
   return html`<span class=${classMap(classes)}>
+    ${icon ? html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>` : null}
     <span class="iw-chip-label">${children}</span>
     ${
       isRemovable

package/src/data-display/divider/divider.stories.js

@@ -17,6 +17,11 @@ export default {
       control: "boolean",
       description: "Applies start inset for sectional separators.",
     },
+    isDecorative: {
+      control: "boolean",
+      description:
+        "Only visual: hidden from assistive tech, which otherwise announces a separator.",
+    },
   },
   parameters: {
     docs: {
@@ -31,6 +36,10 @@ export const Default = {
   args: {},
 }
 
+export const Decorative = {
+  args: { isDecorative: true },
+}
+
 export const Vertical = {
   args: {
     ...Default.args,

package/src/data-display/divider/template.js

@@ -3,23 +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"
 
 /**
- * Renders a horizontal or vertical divider line.
+ * Renders a horizontal or vertical divider line: a native `<hr>`, which
+ * assistive tech announces as a separator, unless it is only decorative.
  * Supports inset styling for aligned content blocks.
  * @param {DividerProps} props
  * @returns {TemplateResult}
  */
 export function render(props) {
-  const { orientation = "horizontal", isInset = false } = props
+  const {
+    orientation = "horizontal",
+    isInset = false,
+    isDecorative = false,
+  } = props
+  const isVertical = orientation === "vertical"
 
   return html`<hr
     class=${classMap({
       "iw-divider": true,
-      "iw-divider-vertical": orientation === "vertical",
+      "iw-divider-vertical": isVertical,
       "iw-divider-inset": isInset,
     })}
+    role=${isDecorative ? "none" : nothing}
+    aria-orientation=${isVertical && !isDecorative ? "vertical" : nothing}
   />`
 }

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

@@ -10,7 +10,7 @@ export default {
     description: { control: "text" },
     severity: {
       control: "select",
-      options: ["info", "success", "warning", "error"],
+      options: ["info", "success", "warning", "error", "neutral"],
     },
     variant: { control: "select", options: ["filled", "outlined"] },
     icon: { control: "text" },
@@ -50,6 +50,14 @@ export const Error = {
   },
 }
 
+export const Neutral = {
+  args: {
+    title: "Note",
+    description: "A plain remark, with no tone of its own.",
+    severity: "neutral",
+  },
+}
+
 export const Outlined = {
   args: {
     title: "Outlined Alert",

package/src/feedback/alert/style.css

@@ -81,6 +81,11 @@
   --iw-alert-color: var(--iw-color-error, #d14343);
 }
 
+/* A plain note: no tone of its own, just the text colour. */
+.iw-alert-neutral {
+  --iw-alert-color: var(--iw-color-text-secondary, var(--iw-color-text));
+}
+
 .iw-alert-outlined {
   background: transparent;
   border-color: color-mix(in srgb, var(--iw-alert-color) 55%, transparent);

package/src/feedback/alert/template.js

@@ -11,7 +11,8 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders an alert message with optional title, description, icon, and actions.
- * Supports severity and variant styles for info, success, warning, and error.
+ * Supports severity and variant styles for info, success, warning, error and
+ * neutral, a plain note.
  * @param {AlertProps} props
  * @returns {TemplateResult}
  */

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

@@ -9,15 +9,19 @@ export default {
   render: createRender(Dialog),
   argTypes: {
     isOpen: { control: "boolean" },
+    isModal: { control: "boolean" },
+    size: { control: "select", options: ["sm", "md", "lg"] },
     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 +29,30 @@ export const Open = {
       <button class="iw-button iw-button-primary">Confirm</button>`,
   },
 }
+
+export const Small = {
+  args: { ...Open.args, size: "sm" },
+}
+
+export const Medium = {
+  args: { ...Open.args, size: "md" },
+}
+
+export const Large = {
+  args: {
+    ...Open.args,
+    size: "lg",
+    title: "Release notes",
+    description: "What changed in this version.",
+    children: html`<p>
+      A wider dialog, for content that needs the room: tables, previews or
+      longer text.
+    </p>`,
+  },
+}
+
+// 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,23 +1,37 @@
-.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);
   border-radius: var(--iw-radius-md);
   border: 1px solid color-mix(in srgb, var(--iw-color-border) 70%, transparent);
+  box-shadow: var(--iw-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.3));
+  padding: 0;
+}
+
+.iw-dialog-sm {
+  min-width: min(20rem, 90vw);
+  max-width: min(28rem, 90vw);
+}
+
+.iw-dialog-md {
   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));
+}
+
+.iw-dialog-lg {
+  min-width: min(40rem, 90vw);
+  max-width: min(64rem, 90vw);
+}
+
+.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);
 }