@inglorious/ui 8.3.0 → 8.4.0

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,7 +3,7 @@ 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"]

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 = [

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/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/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/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 {

package/src/layout/container/template.js

@@ -8,7 +8,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { styleMap } from "@inglorious/web/directives/style-map"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 const SIZE_TO_MAX_WIDTH = {
   xs: "32rem",

package/src/layout/flex/flex.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 { Flex } from "."
 
 export default {

package/src/layout/flex/template.js

@@ -7,7 +7,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { staticHtml, unsafeStatic } from "@inglorious/web/static"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders a flexible layout container with direction, alignment, spacing, and wrap control.

package/src/layout/grid/grid.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 { Grid } from "."
 
 export default {

package/src/navigation/bottom-navigation/bottom-navigation.stories.js

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

package/src/navigation/bottom-navigation/template.js

@@ -8,7 +8,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"
 
 export const BottomNavigation = {
   /**

package/src/navigation/breadcrumbs/breadcrumbs.stories.js

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

package/src/navigation/breadcrumbs/template.js

@@ -8,7 +8,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"
 
 export const Breadcrumbs = {
   /**

package/src/navigation/drawer/drawer.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 { Drawer } from "."
 
 export default {

package/src/navigation/link/link.stories.js

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

package/src/navigation/link/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 styled link element with optional underline and color variants.

package/src/navigation/menu/menu.stories.js

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

package/src/navigation/menu/template.js

@@ -8,7 +8,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"
 
 export const Menu = {
   /**

package/src/navigation/pagination/pagination.stories.js

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

package/src/navigation/speed-dial/speed-dial.stories.js

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

package/src/navigation/stepper/stepper.stories.js

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

package/src/navigation/tabs/tabs.stories.js

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

package/src/shared/fallback-label.js

@@ -0,0 +1,18 @@
+import { nothing } from "@inglorious/web"
+
+/**
+ * A label beside its control is tied to it by id. Without an id there is nothing to
+ * tie it with, so the control names itself after the label instead: clicking the label
+ * no longer focuses the control, but a screen reader still announces what it is for.
+ *
+ * Only a plain-text label can be used this way; a template has no text to give.
+ *
+ * @param {string | undefined} controlId
+ * @param {unknown} label
+ * @returns {string | typeof nothing}
+ */
+export function fallbackLabel(controlId, label) {
+  if (controlId || typeof label !== "string" || !label) return nothing
+
+  return label
+}

package/src/surfaces/accordion/accordion.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 { Accordion } from "."
 
 export default {

package/src/surfaces/accordion/template.js

@@ -8,7 +8,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"
 
 export const Accordion = {
   /**

package/src/surfaces/app-bar/app-bar.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 { AppBar } from "."
 
 export default {

package/src/surfaces/app-bar/template.js

@@ -8,7 +8,7 @@ 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/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
 
 /**
  * Renders a top app bar with optional leading/trailing content and title metadata.

package/src/surfaces/card/card.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 { Card } from "."
 
 export default {

package/src/surfaces/card/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"
 
 export const Card = {
   /**

package/src/surfaces/paper/paper.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 { Paper } from "."
 
 export default {

package/src/surfaces/paper/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 surface container with elevation, radius, and padding options.