@inglorious/ui 9.0.0 → 9.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.0.0",
+  "version": "9.1.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",
@@ -315,7 +315,7 @@
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "11.1.7",
+    "@inglorious/charts": "12.0.0",
     "@inglorious/eslint-config": "1.2.0",
     "@inglorious/store": "12.0.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",

package/src/controls/button/button.stories.js

@@ -32,7 +32,7 @@ export default {
     },
     size: {
       control: "select",
-      options: ["sm", "md", "lg"],
+      options: ["xs", "sm", "md", "lg"],
       description: "Size scale for paddings and font-size.",
     },
     shape: {
@@ -106,6 +106,12 @@ Ghost.args = {
   variant: "ghost",
 }
 
+export const ExtraSmall = {}
+ExtraSmall.args = {
+  ...Default.args,
+  size: "xs",
+}
+
 export const Small = {}
 Small.args = {
   ...Default.args,

package/src/controls/button/style.css

@@ -153,6 +153,11 @@
     cursor: not-allowed;
   }
 
+  &.iw-button-xs {
+    padding: var(--iw-space-0) var(--iw-space-2);
+    font-size: var(--iw-font-size-xs);
+  }
+
   &.iw-button-sm {
     padding: var(--iw-space-1) var(--iw-space-3);
     font-size: var(--iw-font-size-sm);
@@ -179,6 +184,12 @@
     border-radius: var(--iw-radius-sm);
   }
 
+  &.iw-button-xs.iw-button-shape-round,
+  &.iw-button-xs.iw-button-shape-square {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
   &.iw-button-sm.iw-button-shape-round,
   &.iw-button-sm.iw-button-shape-square {
     width: 2rem;

package/src/controls/checkbox/checkbox.stories.js

@@ -7,6 +7,10 @@ export default {
   render: createRender(Checkbox),
   argTypes: {
     label: { control: "text", description: "Label text." },
+    description: {
+      control: "text",
+      description: "A line of detail under the label.",
+    },
     name: { control: "text", description: "Native HTML name attribute." },
     isChecked: { control: "boolean", description: "Current checked state." },
     isDisabled: { control: "boolean", description: "Disables interaction." },
@@ -48,3 +52,11 @@ Checked.args = {
   ...Default.args,
   isChecked: true,
 }
+
+export const WithDescription = {}
+WithDescription.args = {
+  ...Default.args,
+  label: "Weekly summary",
+  name: "summary",
+  description: "An email every Monday with last week's totals.",
+}

package/src/controls/checkbox/style.css

@@ -14,6 +14,17 @@
     accent-color: var(--iw-checkbox-accent);
   }
 
+  /* With a description, the label and it stack beside the box. */
+  .iw-checkbox-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-checkbox-description {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+  }
+
   .iw-checkbox-label {
     font-size: var(--iw-font-size-base);
     line-height: var(--iw-line-height-normal);

package/src/controls/checkbox/template.js

@@ -21,6 +21,7 @@ export function render(props) {
     type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
+    description,
     isChecked = false,
     isDisabled = false,
     isRequired = false,
@@ -54,7 +55,14 @@ export function render(props) {
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
-      <span class="iw-checkbox-label">${label}</span>
+      ${
+        description
+          ? html`<span class="iw-checkbox-text">
+              <span class="iw-checkbox-label">${label}</span>
+              <span class="iw-checkbox-description">${description}</span>
+            </span>`
+          : html`<span class="iw-checkbox-label">${label}</span>`
+      }
     </label>
   `
 }

package/src/controls/radio-group/radio-group.stories.js

@@ -20,7 +20,11 @@ export default {
       description: "Semantic accent color.",
     },
     isDisabled: { control: "boolean", description: "Disables all options." },
-    options: { control: "object", description: "List of radio options." },
+    options: {
+      control: "object",
+      description:
+        "List of radio options: `label`, `value`, and an optional `description` under the label.",
+    },
     onChange: { action: "onChange" },
   },
   parameters: {
@@ -52,3 +56,19 @@ Row.args = {
   ...Default.args,
   direction: "row",
 }
+
+export const WithDescriptions = {}
+WithDescriptions.args = {
+  ...Default.args,
+  label: "Shipping",
+  name: "shipping",
+  value: "standard",
+  options: [
+    {
+      label: "Standard",
+      value: "standard",
+      description: "3 to 5 working days, free",
+    },
+    { label: "Express", value: "express", description: "Next day, €9" },
+  ],
+}

package/src/controls/radio-group/style.css

@@ -19,6 +19,17 @@
     cursor: pointer;
   }
 
+  /* With a description, the label and it stack beside the circle. */
+  .iw-radio-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-radio-description {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+  }
+
   .iw-radio {
     margin: 0;
     accent-color: var(--iw-radio-accent);

package/src/controls/radio-group/template.js

@@ -55,6 +55,7 @@ export function render(props) {
       ${options.map((option, index) => {
         const {
           label: optionLabel,
+          description: optionDescription,
           value: optionValue,
           isDisabled: optionDisabled = false,
           ...optionRest
@@ -73,7 +74,16 @@ export function render(props) {
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}
             />
-            <span>${optionLabel}</span>
+            ${
+              optionDescription
+                ? html`<span class="iw-radio-text">
+                    <span>${optionLabel}</span>
+                    <span class="iw-radio-description"
+                      >${optionDescription}</span
+                    >
+                  </span>`
+                : html`<span>${optionLabel}</span>`
+            }
           </label>
         `
       })}

package/src/controls/rating/rating.stories.js

@@ -8,6 +8,14 @@ export default {
   argTypes: {
     value: { control: "number", description: "Current rating value." },
     max: { control: "number", description: "Maximum rating value." },
+    name: {
+      control: "text",
+      description: "Groups the radios and names the value in a form.",
+    },
+    ariaLabel: {
+      control: "text",
+      description: 'Names the group for assistive tech. Defaults to "Rating".',
+    },
     isDisabled: { control: "boolean", description: "Disables interaction." },
     isReadOnly: {
       control: "boolean",

package/src/controls/slider/slider.stories.js

@@ -8,7 +8,11 @@ export default {
   argTypes: {
     label: { control: "text", description: "Field label." },
     name: { control: "text", description: "Native input name." },
-    value: { control: "number", description: "Current slider value." },
+    value: {
+      control: "object",
+      description:
+        "One number, or `[low, high]` for a range with a thumb at each end.",
+    },
     min: { control: "number", description: "Minimum value." },
     max: { control: "number", description: "Maximum value." },
     step: { control: "number", description: "Step value." },
@@ -20,6 +24,10 @@ export default {
     isDisabled: { control: "boolean", description: "Disables interaction." },
     isValueVisible: { control: "boolean", description: "Shows current value." },
     isFullWidth: { control: "boolean", description: "Expands width to 100%." },
+    hasMarks: {
+      control: "boolean",
+      description: "Draws a tick at every step.",
+    },
     onChange: { action: "onChange" },
   },
   parameters: {
@@ -44,3 +52,22 @@ Default.args = {
   isValueVisible: true,
   isFullWidth: false,
 }
+
+export const Range = {}
+Range.args = {
+  ...Default.args,
+  label: "Price",
+  name: "price",
+  value: [20, 80],
+}
+
+export const Marks = {}
+Marks.args = {
+  ...Default.args,
+  label: "Rating",
+  name: "rating",
+  value: 3,
+  min: 1,
+  max: 5,
+  hasMarks: true,
+}

package/src/controls/slider/style.css

@@ -23,6 +23,108 @@
     accent-color: var(--iw-slider-accent);
   }
 
+  /* A tick per step, under the track: their ends sit under the thumb's ends
+     of travel, half a thumb in from the track's. */
+  .iw-slider-marks {
+    display: flex;
+    justify-content: space-between;
+    padding-inline: calc(var(--iw-slider-thumb, 1rem) / 2);
+
+    span {
+      inline-size: 1px;
+      block-size: var(--iw-space-2);
+      background: var(--iw-color-border);
+    }
+  }
+
+  /* Two thumbs on one track. The inputs lie on top of each other with their
+     own tracks hidden, and only their thumbs take presses, so either can be
+     dragged; the track below is drawn here, filled between the two. */
+  &.iw-slider-range {
+    --iw-slider-thumb: 1rem;
+
+    .iw-slider-track {
+      position: relative;
+      block-size: var(--iw-slider-thumb);
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        inset-block-start: 50%;
+        block-size: 0.25rem;
+        translate: 0 -50%;
+        border-radius: var(--iw-radius-full, 999px);
+      }
+
+      &::before {
+        inset-inline: 0;
+        background: color-mix(
+          in srgb,
+          var(--iw-slider-accent) 25%,
+          transparent
+        );
+      }
+
+      &::after {
+        inset-inline-start: var(--iw-slider-low);
+        inset-inline-end: calc(100% - var(--iw-slider-high));
+        background: var(--iw-slider-accent);
+      }
+    }
+
+    .iw-slider-input {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      margin: 0;
+      appearance: none;
+      background: transparent;
+      pointer-events: none;
+
+      &::-webkit-slider-runnable-track {
+        background: transparent;
+      }
+
+      &::-moz-range-track {
+        background: transparent;
+      }
+
+      &::-webkit-slider-thumb {
+        appearance: none;
+        inline-size: var(--iw-slider-thumb);
+        block-size: var(--iw-slider-thumb);
+        border: 2px solid var(--iw-color-surface);
+        border-radius: 50%;
+        background: var(--iw-slider-accent);
+        box-shadow: var(--iw-shadow-sm);
+        cursor: pointer;
+        pointer-events: auto;
+      }
+
+      &::-moz-range-thumb {
+        inline-size: var(--iw-slider-thumb);
+        block-size: var(--iw-slider-thumb);
+        border: 2px solid var(--iw-color-surface);
+        border-radius: 50%;
+        background: var(--iw-slider-accent);
+        box-shadow: var(--iw-shadow-sm);
+        cursor: pointer;
+        pointer-events: auto;
+      }
+
+      &:focus-visible::-webkit-slider-thumb {
+        outline: 2px solid var(--iw-slider-accent);
+        outline-offset: 2px;
+      }
+
+      &:focus-visible::-moz-range-thumb {
+        outline: 2px solid var(--iw-slider-accent);
+        outline-offset: 2px;
+      }
+    }
+  }
+
   &.iw-slider-full-width {
     width: 100%;
   }

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

@@ -22,6 +22,7 @@ export function render(props) {
     type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
+    description,
     isChecked = false,
     isDisabled = false,
     color = "primary",
@@ -57,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/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

@@ -10,6 +10,7 @@ export default {
   argTypes: {
     isOpen: { control: "boolean" },
     isModal: { control: "boolean" },
+    size: { control: "select", options: ["sm", "md", "lg"] },
     title: { control: "text" },
     description: { control: "text" },
     onClose: { action: "onClose" },
@@ -29,6 +30,27 @@ export const Open = {
   },
 }
 
+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"],

package/src/feedback/dialog/style.css

@@ -7,12 +7,25 @@
   color: var(--iw-color-text);
   border-radius: var(--iw-radius-md);
   border: 1px solid color-mix(in srgb, var(--iw-color-border) 70%, transparent);
-  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-sm {
+  min-width: min(20rem, 90vw);
+  max-width: min(28rem, 90vw);
+}
+
+.iw-dialog-md {
+  min-width: min(32rem, 90vw);
+  max-width: min(48rem, 90vw);
+}
+
+.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);

package/src/feedback/dialog/template.js

@@ -28,6 +28,7 @@ export function render(props) {
     id,
     isOpen = false,
     isModal = true,
+    size = "md",
     title,
     description,
     children,
@@ -54,7 +55,11 @@ export function render(props) {
   // also clicks the dialog, and must not close it.
   return html`<dialog
     id=${id || nothing}
-    class=${classMap({ "iw-dialog": true, ...extraClasses })}
+    class=${classMap({
+      "iw-dialog": true,
+      [`iw-dialog-${size}`]: true,
+      ...extraClasses,
+    })}
     aria-labelledby=${titleId || nothing}
     aria-describedby=${descriptionId || nothing}
     @pointerdown=${(event) => {

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

@@ -12,6 +12,11 @@ export default {
       control: "object",
       description: "Accordion sections with title, content, and state flags.",
     },
+    name: {
+      control: "text",
+      description:
+        "Items sharing a name close each other: at most one is open at a time.",
+    },
     onItemToggle: { action: "onItemToggle" },
   },
   parameters: {
@@ -44,6 +49,10 @@ export const Default = {
   },
 }
 
+export const Exclusive = {
+  args: { ...Default.args, name: "settings" },
+}
+
 export const WithIcons = {
   args: {
     items: [

package/src/surfaces/accordion/template.js

@@ -85,7 +85,11 @@ export const Accordion = {
       name=${props.name || nothing}
       .open=${isExpanded}
       @toggle=${(event) => {
-        const isOpen = event.newState === "open"
+        // newState is what the browser says; an environment whose toggle
+        // event lacks it, such as jsdom, still has the element's own state.
+        const isOpen = event.newState
+          ? event.newState === "open"
+          : event.currentTarget.open
         // Also fires when isExpanded opened it, which needs no report.
         if (isOpen === isExpanded) return
         onToggle?.(item, index, isOpen)

package/src/surfaces/card/card.stories.js

@@ -53,6 +53,12 @@ export default {
       options: ["none", "sm", "md", "lg", "xl"],
       description: "Footer padding preset.",
     },
+    variant: {
+      control: "select",
+      options: ["default", "sunk", "clear"],
+      description:
+        "The surface: raised, sunk into the page for content inside another surface, or clear.",
+    },
     isHoverable: {
       control: "boolean",
       description: "Enable hover visual feedback.",
@@ -97,6 +103,24 @@ export const WithFooter = {
   },
 }
 
+export const Sunk = {
+  args: {
+    title: "Sunk card",
+    subtitle: "Content inside another surface",
+    children: "Body content",
+    variant: "sunk",
+  },
+}
+
+export const Clear = {
+  args: {
+    title: "Clear card",
+    subtitle: "Groups content with no surface of its own",
+    children: "Body content",
+    variant: "clear",
+  },
+}
+
 export const Interactive = {
   args: {
     title: "Interactive Card",

package/src/surfaces/card/style.css

@@ -11,6 +11,21 @@
     transform var(--iw-transition-normal);
 }
 
+/* Set into the page rather than raised from it, for content grouped inside
+   another surface. */
+.iw-card-sunk {
+  background-color: var(--iw-color-bg-secondary, var(--iw-card-bg));
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* Only the grouping: no surface at all. */
+.iw-card-clear {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
 .iw-card-hoverable:hover {
   box-shadow: var(--iw-card-shadow-hover);
 }

package/src/surfaces/card/template.js

@@ -30,6 +30,7 @@ export const Card = {
     const {
       type, // eslint-disable-line no-unused-vars
       element = "article",
+      variant = "default",
       isHoverable = false,
       isClickable = false,
       isFullWidth = false,
@@ -47,6 +48,7 @@ export const Card = {
 
     const classes = {
       "iw-card": true,
+      [`iw-card-${variant}`]: variant !== "default",
       "iw-card-hoverable": isHoverable || isClickable,
       "iw-card-clickable": isClickable,
       "iw-card-full-width": isFullWidth,

package/types/controls/button.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps {
     | "warning"
     | "error"
     | "info"
-  size?: "sm" | "md" | "lg"
+  size?: "xs" | "sm" | "md" | "lg"
   shape?: "rectangle" | "pill" | "round" | "square"
   isDisabled?: boolean
   isPressed?: boolean

package/types/controls/checkbox.d.ts

@@ -4,6 +4,8 @@ export interface CheckboxProps {
   id?: string
   name?: string
   label?: string
+  /** A line of detail under the label. */
+  description?: string
   isChecked?: boolean
   isDisabled?: boolean
   isRequired?: boolean

package/types/controls/radio-group.d.ts

@@ -2,6 +2,8 @@ import type { TemplateResult } from "@inglorious/web"
 
 export interface RadioOption {
   label: string
+  /** A line of detail under the label. */
+  description?: string
   value: string
   isDisabled?: boolean
   [key: string]: unknown

package/types/controls/slider.d.ts

@@ -4,7 +4,8 @@ export interface SliderProps {
   id?: string
   name?: string
   label?: string
-  value?: number
+  /** One number, or `[low, high]` for a range with a thumb at each end. */
+  value?: number | [number, number]
   min?: number
   max?: number
   step?: number
@@ -12,7 +13,10 @@ export interface SliderProps {
   isDisabled?: boolean
   isValueVisible?: boolean
   isFullWidth?: boolean
-  onChange?: (value: number) => void
+  /** Draws a tick at every step, for a slider that moves in clear steps. */
+  hasMarks?: boolean
+  /** The new value, in the shape `value` has: a number, or `[low, high]`. */
+  onChange?: (value: number | [number, number]) => void
   [key: string]: unknown
 }
 

package/types/controls/switch.d.ts

@@ -4,6 +4,8 @@ export interface SwitchProps {
   id?: string
   name?: string
   label?: string
+  /** A line of detail under the label. */
+  description?: string
   isChecked?: boolean
   isDisabled?: boolean
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"

package/types/data-display/chip.d.ts

@@ -3,6 +3,8 @@ import type { TemplateResult } from "@inglorious/web"
 export interface ChipProps {
   id?: string
   children?: TemplateResult | string | number
+  /** Shown before the label, such as an `Icon.render(...)`. Decorative. */
+  icon?: TemplateResult
   isRemovable?: boolean
   color?:
     | "default"

package/types/data-display/divider.d.ts

@@ -4,6 +4,8 @@ export interface DividerProps {
   id?: string
   orientation?: "horizontal" | "vertical"
   isInset?: boolean
+  /** Only visual: hidden from assistive tech, which otherwise announces a separator. */
+  isDecorative?: boolean
   [key: string]: unknown
 }
 

package/types/feedback/alert.d.ts

@@ -6,7 +6,7 @@ export interface AlertProps {
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
   children?: TemplateResult | string | number
-  severity?: "info" | "success" | "warning" | "error"
+  severity?: "info" | "success" | "warning" | "error" | "neutral"
   variant?: "filled" | "outlined"
   icon?: TemplateResult | string | number
   action?: TemplateResult | string | number

package/types/feedback/dialog.d.ts

@@ -6,6 +6,8 @@ export interface DialogProps {
   isOpen?: boolean
   /** Modal by default; `false` shows the dialog in place, with the page still usable. */
   isModal?: boolean
+  /** Its width: `"sm"`, `"md"` (default) or `"lg"`. */
+  size?: "sm" | "md" | "lg"
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
   children?: TemplateResult | string | number

package/types/layout/flex.d.ts

@@ -16,7 +16,7 @@ export interface FlexProps {
   wrap?: "nowrap" | "wrap" | "wrap-reverse"
   justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
   align?: "stretch" | "start" | "center" | "end" | "baseline"
-  gap?: "none" | "sm" | "md" | "lg" | "xl"
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
   padding?: "none" | "sm" | "md" | "lg" | "xl"
   overflow?: "visible" | "hidden" | "clip" | "scroll" | "auto"
   isInline?: boolean

package/types/surfaces/card.d.ts

@@ -12,6 +12,11 @@ export interface CardProps {
     | "footer"
     | "nav"
     | "aside"
+  /**
+   * The surface: raised (`"default"`), `"sunk"` into the page for content
+   * inside another surface, or `"clear"` with none.
+   */
+  variant?: "default" | "sunk" | "clear"
   title?: TemplateResult | string | number
   subtitle?: TemplateResult | string | number
   header?: TemplateResult | string | number