@inglorious/ui 8.3.1 → 8.4.1

package/src/controls/slider/template.js

@@ -3,11 +3,12 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
+import { fallbackLabel } from "../../shared/fallback-label.js"
 
 const DEFAULT_VALUE = 0
 const DEFAULT_MIN = 0
@@ -53,7 +54,7 @@ export function render(props) {
         html`<div class="iw-slider-header">
           ${
             label
-              ? html`<label for=${inputId}>${label}</label>`
+              ? html`<label for=${inputId || nothing}>${label}</label>`
               : html`<span></span>`
           }
           ${
@@ -64,8 +65,9 @@ export function render(props) {
         </div>`
       }
       <input
-        id=${inputId}
+        id=${inputId || nothing}
         class="iw-slider-input"
+        aria-label=${fallbackLabel(inputId, label)}
         type="range"
         name=${name}
         min=${min}

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Switch } from "."
 
 export default {

package/src/controls/switch/template.js

@@ -3,11 +3,11 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders a toggle switch backed by a checkbox input.
@@ -29,6 +29,8 @@ export function render(props) {
     ...rest
   } = props
 
+  // The label wraps the input, which is what ties the two together: it needs no
+  // `for`, and an empty one would point at nothing and break the click-through.
   const inputId = id || name
 
   const classes = {
@@ -39,9 +41,9 @@ export function render(props) {
   }
 
   return html`
-    <label class=${classMap(classes)} for=${inputId}>
+    <label class=${classMap(classes)}>
       <input
-        id=${inputId}
+        id=${inputId || nothing}
         class="iw-switch-input"
         type="checkbox"
         name=${name}

package/src/controls/textarea/template.js

@@ -3,11 +3,12 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
+import { fallbackLabel } from "../../shared/fallback-label.js"
 
 /**
  * Renders a labeled textarea field with optional hint and error messaging.
@@ -39,6 +40,7 @@ export function render(props) {
   } = props
 
   const textareaId = id || name
+  const messageId = (error || hint) && id ? `${id}-message` : ""
 
   const wrapperClasses = {
     "iw-textarea-field": true,
@@ -60,7 +62,7 @@ export function render(props) {
       ${
         label
           ? html`
-              <label for=${textareaId} class="iw-textarea-label">
+              <label for=${textareaId || nothing} class="iw-textarea-label">
                 ${label}
                 ${
                   isRequired
@@ -73,8 +75,11 @@ export function render(props) {
       }
 
       <textarea
-        id=${textareaId}
+        id=${textareaId || nothing}
         name=${name}
+        aria-label=${fallbackLabel(textareaId, label)}
+        aria-describedby=${messageId || nothing}
+        aria-invalid=${error ? "true" : "false"}
         rows=${rows}
         .value=${value}
         placeholder=${placeholder}
@@ -90,9 +95,15 @@ export function render(props) {
 
       ${
         error
-          ? html`<span class="iw-textarea-error-message">${error}</span>`
+          ? html`<span
+              id=${messageId || nothing}
+              class="iw-textarea-error-message"
+              >${error}</span
+            >`
           : hint
-            ? html`<span class="iw-textarea-hint">${hint}</span>`
+            ? html`<span id=${messageId || nothing} class="iw-textarea-hint"
+                >${hint}</span
+              >`
             : null
       }
     </div>

package/src/controls/textarea/textarea.stories.js

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Textarea } from "."
 
 export default {

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Avatar } from "."
 
 export default {

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Badge } from "."
 
 export default {

package/src/data-display/before-after/before-after.stories.js

@@ -1,7 +1,7 @@
 import {
   createEntityRender,
   notifyActionArgType,
-} from "../../stories/notifyStory.js"
+} from "../../stories/notify-story.js"
 import { BeforeAfter } from "./index.js"
 
 const before = {

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

@@ -3,19 +3,11 @@ import { html } from "@inglorious/web"
 import {
   createEntityRender,
   notifyActionArgType,
-} from "../../stories/notifyStory.js"
+} from "../../stories/notify-story.js"
 import { Carousel } from "./index.js"
 
 const COLORS = ["#22d3ee", "#4f46e5", "#f59e0b", "#10b981", "#ef4444"]
 
-const slide = (index) =>
-  html`<div
-    style="display:grid;place-items:center;height:14rem;border-radius:0.5rem;
-           background:${COLORS[index]};color:#fff;font:700 2rem sans-serif;"
-  >
-    ${index + 1}
-  </div>`
-
 const items = COLORS.map((color, index) => slide(index))
 
 export default {
@@ -164,3 +156,12 @@ ManyPerView.args = {
 ManyPerView.decorators = [
   (story) => html`<div style="--iw-carousel-item-size: 14rem">${story()}</div>`,
 ]
+
+function slide(index) {
+  return html`<div
+    style="display:grid;place-items:center;height:14rem;border-radius:0.5rem;
+           background:${COLORS[index]};color:#fff;font:700 2rem sans-serif;"
+  >
+    ${index + 1}
+  </div>`
+}

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Chip } from "."
 
 export default {

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

@@ -1,7 +1,7 @@
 import {
   createEntityRender,
   notifyActionArgType,
-} from "../../stories/notifyStory.js"
+} from "../../stories/notify-story.js"
 import { DataGrid } from "."
 
 const baseRows = [
@@ -44,16 +44,6 @@ const baseColumns = [
   },
 ]
 
-function createRows(count) {
-  return Array.from({ length: count }, (_, index) => ({
-    id: index + 1,
-    name: `User ${index + 1}`,
-    age: 20 + (index % 35),
-    active: index % 3 !== 0,
-    role: index % 4 === 0 ? "Admin" : "User",
-  }))
-}
-
 export default {
   title: "Data Display/DataGrid",
   tags: ["autodocs"],
@@ -156,3 +146,13 @@ export const Virtualized = {
     },
   },
 }
+
+function createRows(count) {
+  return Array.from({ length: count }, (_, index) => ({
+    id: index + 1,
+    name: `User ${index + 1}`,
+    age: 20 + (index % 35),
+    active: index % 3 !== 0,
+    role: index % 4 === 0 ? "Admin" : "User",
+  }))
+}

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

@@ -1,6 +1,6 @@
 import { render } from "@inglorious/web/test"
 
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Divider } from "."
 
 export default {

package/src/data-display/icon/icon-utf8.stories.js

@@ -6,7 +6,7 @@ import { Button } from "../../controls/button"
 import {
   createEntityRender,
   notifyActionArgType,
-} from "../../stories/notifyStory.js"
+} from "../../stories/notify-story.js"
 import { Icon } from "."
 
 const UnicodeList = {

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

@@ -4,7 +4,7 @@ import arrowBack from "@iconify-icons/material-symbols/arrow-back"
 import settingsFilled from "@iconify-icons/material-symbols/settings"
 import settingsOutline from "@iconify-icons/material-symbols/settings-outline"
 
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Icon } from "."
 
 export default {

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

@@ -9,7 +9,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { unsafeSVG } from "@inglorious/web/directives/unsafe-svg"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders an inline icon with size and color control.

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { List } from "."
 
 export default {

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

@@ -28,7 +28,7 @@ import { when } from "@inglorious/web/directives/when"
 import { IconButton } from "../../controls/icon-button"
 import { Icon } from "../../data-display/icon"
 import { Flex } from "../../layout/flex"
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 const PRETTY_INDEX = 1
 

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Table } from "."
 
 export default {

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

@@ -9,7 +9,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { repeat } from "@inglorious/web/directives/repeat"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 const EVEN_ROW_DIVISOR = 2
 const STRIPED_OFFSET = 1

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

@@ -7,7 +7,7 @@ import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders a tooltip trigger and bubble with positional styling.

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

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Tooltip } from "."
 
 export default {

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

@@ -7,7 +7,7 @@ import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders styled text with semantic variants such as headings, body, and caption.

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

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Typography } from "."
 
 export default {

package/src/data-display/virtual-list/template.js

@@ -15,27 +15,6 @@ const PRETTY_INDEX = 1
 // measuring is an update, so measuring on each render would loop forever.
 const measured = new WeakSet()
 
-/**
- * Notifies `mount` once per list element, after a frame and once it is in the
- * document: before that it has no layout to measure.
- * @param {HTMLElement} el
- * @param {VirtualListEntity} entity
- * @param {Api} api
- */
-function measureOnce(el, entity, api) {
-  if (measured.has(el)) return
-  measured.add(el)
-
-  const measure = () => {
-    if (!el.isConnected) {
-      requestAnimationFrame(measure)
-      return
-    }
-    api.notify(`#${entity.id}:mount`, el)
-  }
-  requestAnimationFrame(measure)
-}
-
 /**
  * Renders a virtualized list that only mounts visible items for performance.
  * Uses item height estimates to compute scroll ranges and notifies on mount/scroll.
@@ -125,3 +104,24 @@ export function renderItem(entity, { item, index }, api) {
     ${index + PRETTY_INDEX}. ${JSON.stringify(item)}
   </div>`
 }
+
+/**
+ * Notifies `mount` once per list element, after a frame and once it is in the
+ * document: before that it has no layout to measure.
+ * @param {HTMLElement} el
+ * @param {VirtualListEntity} entity
+ * @param {Api} api
+ */
+function measureOnce(el, entity, api) {
+  if (measured.has(el)) return
+  measured.add(el)
+
+  const measure = () => {
+    if (!el.isConnected) {
+      requestAnimationFrame(measure)
+      return
+    }
+    api.notify(`#${entity.id}:mount`, el)
+  }
+  requestAnimationFrame(measure)
+}

package/src/examples/dashboard/before-after-data.js

@@ -1,10 +1,22 @@
+export const beforeAfterImages = {
+  before: {
+    src: svg("BEFORE", "#9ca3af", "#374151"),
+    alt: "Before — grayscale",
+  },
+  after: {
+    src: svg("AFTER", "#22d3ee", "#4f46e5"),
+    alt: "After — color graded",
+  },
+}
+
 // Self-contained demo images for the Before/After control, so the dashboard
 // renders the comparison without any network requests.
 
-const svg = (label, from, to) =>
-  "data:image/svg+xml," +
-  encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
+function svg(label, from, to) {
+  return (
+    "data:image/svg+xml," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
       <defs>
         <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
           <stop offset="0" stop-color="${from}"/>
@@ -15,15 +27,6 @@ const svg = (label, from, to) =>
       <text x="48" y="496" font-family="sans-serif" font-size="72" font-weight="700"
             fill="rgba(255,255,255,0.92)">${label}</text>
     </svg>`,
+    )
   )
-
-export const beforeAfterImages = {
-  before: {
-    src: svg("BEFORE", "#9ca3af", "#374151"),
-    alt: "Before — grayscale",
-  },
-  after: {
-    src: svg("AFTER", "#22d3ee", "#4f46e5"),
-    alt: "After — color graded",
-  },
 }

package/src/examples/dashboard/dashboard.stories.js

@@ -5,7 +5,7 @@ import { Chart } from "@inglorious/charts"
 import {
   createEntityRender,
   notifyActionArgType,
-} from "../../stories/notifyStory.js"
+} from "../../stories/notify-story.js"
 import { AppDrawer } from "./app-drawer.js"
 import { AppHeader } from "./app-header.js"
 import { Dashboard } from "./dashboard.js"

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

@@ -114,38 +114,8 @@ const categoryMeta = {
   },
 }
 
-const previewRow = (children) =>
-  html`<div class="iw-primitive-preview-row">${children}</div>`
-
-const previewColumn = (children) =>
-  html`<div class="iw-primitive-preview-column">${children}</div>`
-
 const livePreviews = new Map()
 
-/**
- * Entity-driven primitives render their controls from state, so a preview
- * without a store freezes: a carousel arrow would recompute from the same page
- * forever, and a dragged divider would never move. Give each one its own store,
- * created once and reused on every re-render so the preview keeps its state.
- * @param {Object.<string, any>} types
- * @param {Object.<string, any>} entity
- * @returns {HTMLElement}
- */
-function livePreview(types, entity) {
-  if (!livePreviews.has(entity.id)) {
-    const container = document.createElement("div")
-    // The mount needs an element, but it must not become a box of its own:
-    // as a flex item it would shrink and take the primitive down with it.
-    container.style.display = "contents"
-
-    const store = createStore({ types, entities: { [entity.id]: entity } })
-    mount(store, (api) => api.render(entity.id), container)
-    livePreviews.set(entity.id, container)
-  }
-
-  return livePreviews.get(entity.id)
-}
-
 const carouselSlides = [
   "#22d3ee",
   "#4f46e5",
@@ -1542,3 +1512,35 @@ function toTitleCase(slug) {
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join(" ")
 }
+
+/**
+ * Entity-driven primitives render their controls from state, so a preview
+ * without a store freezes: a carousel arrow would recompute from the same page
+ * forever, and a dragged divider would never move. Give each one its own store,
+ * created once and reused on every re-render so the preview keeps its state.
+ * @param {Object.<string, any>} types
+ * @param {Object.<string, any>} entity
+ * @returns {HTMLElement}
+ */
+function livePreview(types, entity) {
+  if (!livePreviews.has(entity.id)) {
+    const container = document.createElement("div")
+    // The mount needs an element, but it must not become a box of its own:
+    // as a flex item it would shrink and take the primitive down with it.
+    container.style.display = "contents"
+
+    const store = createStore({ types, entities: { [entity.id]: entity } })
+    mount(store, (api) => api.render(entity.id), container)
+    livePreviews.set(entity.id, container)
+  }
+
+  return livePreviews.get(entity.id)
+}
+
+function previewRow(children) {
+  return html`<div class="iw-primitive-preview-row">${children}</div>`
+}
+
+function previewColumn(children) {
+  return html`<div class="iw-primitive-preview-column">${children}</div>`
+}

package/src/examples/dashboard/theme-utils.js

@@ -61,6 +61,11 @@ export function nextMode(mode) {
   return MODE_CYCLE[(index + 1) % MODE_CYCLE.length]
 }
 
+export const DEFAULTS = {
+  theme: DEFAULT_THEME,
+  mode: DEFAULT_MODE,
+}
+
 function resolveMode(mode) {
   if (mode !== "auto") return mode
   return getSystemMode()
@@ -88,8 +93,3 @@ function ensureSystemListener() {
     systemMedia.addListener(systemListener)
   }
 }
-
-export const DEFAULTS = {
-  theme: DEFAULT_THEME,
-  mode: DEFAULT_MODE,
-}

package/src/feedback/alert/alert.stories.js

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Alert } from "."
 
 export default {

package/src/feedback/alert/template.js

@@ -7,7 +7,7 @@ import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders an alert message with optional title, description, icon, and actions.

package/src/feedback/backdrop/backdrop.stories.js

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Backdrop } from "."
 
 export default {

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

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Dialog } from "."
 
 export default {

package/src/feedback/progress/progress.stories.js

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Progress } from "."
 
 export default {

package/src/feedback/progress/template.js

@@ -6,10 +6,6 @@
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
-function clamp(value) {
-  return Math.max(0, Math.min(100, value))
-}
-
 /**
  * Renders a linear or circular progress indicator.
  * Indeterminate mode is used when no explicit value is provided.
@@ -90,3 +86,7 @@ export function render(props) {
     </div>
   </div>`
 }
+
+function clamp(value) {
+  return Math.max(0, Math.min(100, value))
+}

package/src/feedback/skeleton/skeleton.stories.js

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Skeleton } from "."
 
 export default {

package/src/feedback/snackbar/snackbar.stories.js

@@ -1,4 +1,4 @@
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Snackbar } from "."
 
 export default {

package/src/layout/container/container.stories.js

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Container } from "."
 
 export default {