@inglorious/ui 9.0.0 → 9.1.1

package/src/controls/slider/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -14,10 +15,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,49 +43,143 @@ 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,
   }
 
   return html`
     <div class=${classMap(classes)}>
-      ${
-        (label || isValueVisible) &&
-        html`<div class="iw-slider-header">
-          ${
-            label
-              ? html`<label for=${inputId || nothing}>${label}</label>`
-              : html`<span></span>`
-          }
-          ${
-            isValueVisible
-              ? html`<output class="iw-slider-value">${value}</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))}
-      />
+      ${when(
+        label || isValueVisible,
+        () =>
+          html`<div class="iw-slider-header">
+            ${when(
+              label,
+              () => html`<label for=${inputId || nothing}>${label}</label>`,
+              () => html`<span></span>`,
+            )}
+            ${when(
+              isValueVisible,
+              () => html`<output class="iw-slider-value">${shown}</output>`,
+            )}
+          </div>`,
+      )}
+      ${when(
+        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))}
+          />`,
+      )}
+      ${when(hasMarks, () => renderMarks({ min, max, step }))}
     </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

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -22,6 +23,7 @@ export function render(props) {
     type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
+    description,
     isChecked = false,
     isDisabled = false,
     color = "primary",
@@ -57,7 +59,19 @@ 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}
+      ${when(
+        description,
+        () =>
+          html`<span class="iw-switch-text">
+            ${when(label, () => html`<span class="iw-switch-label">${label}</span>`)}
+            <span class="iw-switch-description">${description}</span>
+          </span>`,
+        () =>
+          when(
+            label,
+            () => html`<span class="iw-switch-label">${label}</span>`,
+          ),
+      )}
     </label>
   `
 }

package/src/controls/textarea/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -59,20 +60,18 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${
-        label
-          ? html`
-              <label for=${textareaId || nothing} class="iw-textarea-label">
-                ${label}
-                ${
-                  isRequired
-                    ? html`<span class="iw-textarea-required">*</span>`
-                    : null
-                }
-              </label>
-            `
-          : null
-      }
+      ${when(
+        label,
+        () => html`
+          <label for=${textareaId || nothing} class="iw-textarea-label">
+            ${label}
+            ${when(
+              isRequired,
+              () => html`<span class="iw-textarea-required">*</span>`,
+            )}
+          </label>
+        `,
+      )}
 
       <textarea
         id=${textareaId || nothing}
@@ -93,19 +92,23 @@ export function render(props) {
         ${ref((element) => applyElementProps(element, rest))}
       ></textarea>
 
-      ${
-        error
-          ? html`<span
-              id=${messageId || nothing}
-              class="iw-textarea-error-message"
-              >${error}</span
-            >`
-          : hint
-            ? html`<span id=${messageId || nothing} class="iw-textarea-hint"
+      ${when(
+        error,
+        () =>
+          html`<span
+            id=${messageId || nothing}
+            class="iw-textarea-error-message"
+            >${error}</span
+          >`,
+        () =>
+          when(
+            hint,
+            () =>
+              html`<span id=${messageId || nothing} class="iw-textarea-hint"
                 >${hint}</span
-              >`
-            : null
-      }
+              >`,
+          ),
+      )}
     </div>
   `
 }

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

@@ -6,6 +6,7 @@
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { styleMap } from "@inglorious/web/directives/style-map"
+import { when } from "@inglorious/web/directives/when"
 
 /**
  * Renders an avatar with image, initials, or fallback content.
@@ -57,11 +58,11 @@ export function render(props) {
     style=${styleMap(styles)}
     @click=${onClick}
   >
-    ${
-      src
-        ? html`<img class="iw-avatar-img" src=${src} alt=${alt} />`
-        : (children ?? initials ?? "?")
-    }
+    ${when(
+      src,
+      () => html`<img class="iw-avatar-img" src=${src} alt=${alt} />`,
+      () => children ?? initials ?? "?",
+    )}
   </span>`
 }
 

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

@@ -5,9 +5,10 @@
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 /**
- * 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 +16,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 export function render(props) {
   const {
     children,
+    icon,
     isRemovable = false,
     color = "default",
     size = "md",
@@ -30,13 +32,14 @@ export function render(props) {
   }
 
   return html`<span class=${classMap(classes)}>
+    ${when(icon, () => html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>`)}
     <span class="iw-chip-label">${children}</span>
-    ${
-      isRemovable
-        ? html`<button type="button" class="iw-chip-remove" @click=${onClick}>
-            ×
-          </button>`
-        : null
-    }
+    ${when(
+      isRemovable,
+      () =>
+        html`<button type="button" class="iw-chip-remove" @click=${onClick}>
+          ×
+        </button>`,
+    )}
   </span>`
 }

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

@@ -111,7 +111,7 @@ export const DataGrid = {
         ${column.title} ${getSortIcon(getSortDirection(props, column.id))}
       </div>
 
-      ${column.isFilterable && Filters.render(props, column)}
+      ${when(column.isFilterable, () => Filters.render(props, column))}
 
       <div
         class="iw-data-grid-column-resizer"

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/list/template.js

@@ -96,11 +96,10 @@ export const List = {
             meta,
             index,
             path: [...path, index],
-          })}${
-            shouldDivide
-              ? html`<li class="iw-list-divider" role="separator"></li>`
-              : null
-          }`
+          })}${when(
+            shouldDivide,
+            () => html`<li class="iw-list-divider" role="separator"></li>`,
+          )}`
         },
       )
 

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

@@ -1,4 +1,5 @@
 import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
 
 import { Typography } from "../../data-display/typography/index.js"
 import { Container } from "../../layout/container/index.js"
@@ -77,24 +78,23 @@ export const PrimitiveSection = {
                       description ??
                       "This section is wired for per-primitive docs and examples.",
                   })}
-                  ${
-                    useCases.length
-                      ? html`
-                          <div style="margin-top: 16px; text-align: left;">
-                            ${Typography.render({
-                              variant: "body2",
-                              color: "secondary",
-                              children: "Common use cases",
-                            })}
-                            <ul style="margin: 8px 0 0; padding-left: 20px;">
-                              ${useCases.map(
-                                (useCase) => html`<li>${useCase}</li>`,
-                              )}
-                            </ul>
-                          </div>
-                        `
-                      : ""
-                  }
+                  ${when(
+                    useCases.length,
+                    () => html`
+                      <div style="margin-top: 16px; text-align: left;">
+                        ${Typography.render({
+                          variant: "body2",
+                          color: "secondary",
+                          children: "Common use cases",
+                        })}
+                        <ul style="margin: 8px 0 0; padding-left: 20px;">
+                          ${useCases.map(
+                            (useCase) => html`<li>${useCase}</li>`,
+                          )}
+                        </ul>
+                      </div>
+                    `,
+                  )}
                 </div>
               `,
             }),

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