@inglorious/ui 8.3.1 → 8.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.3.1",
+  "version": "8.4.1",
   "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",
@@ -306,21 +306,21 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/store": "11.3.0",
-    "@inglorious/utils": "5.0.0",
-    "@inglorious/web": "6.7.2"
+    "@inglorious/store": "12.0.0",
+    "@inglorious/utils": "5.1.0",
+    "@inglorious/web": "6.8.1"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
     "@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.4",
+    "@inglorious/charts": "11.1.6",
     "@inglorious/eslint-config": "1.1.4",
-    "@inglorious/store": "11.3.0",
-    "@inglorious/vite-plugin-jsx": "2.0.4",
-    "@inglorious/vite-plugin-vue": "1.0.5",
-    "@inglorious/web": "6.7.2",
+    "@inglorious/store": "12.0.0",
+    "@inglorious/vite-plugin-jsx": "2.0.5",
+    "@inglorious/vite-plugin-vue": "1.0.6",
+    "@inglorious/web": "6.8.1",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

package/src/controls/button/button.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 { Button } from "."
 
 export default {

package/src/controls/button/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 themed button for actions and form submission.

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

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

package/src/controls/button-group/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"
 import { Button } from "../button/index.js"
 
 /**

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

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

package/src/controls/checkbox/style.css

@@ -7,7 +7,7 @@
   color: var(--iw-color-text);
   cursor: pointer;
 
-  .iw-checkbox {
+  .iw-checkbox-input {
     width: 1rem;
     height: 1rem;
     margin: 0;

package/src/controls/checkbox/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 labeled checkbox for boolean input.
@@ -30,6 +30,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 = {
@@ -40,10 +42,10 @@ export function render(props) {
   }
 
   return html`
-    <label class=${classMap(classes)} for=${inputId}>
+    <label class=${classMap(classes)}>
       <input
-        id=${inputId}
-        class="iw-checkbox"
+        id=${inputId || nothing}
+        class="iw-checkbox-input"
         type="checkbox"
         name=${name}
         .checked=${isChecked}

package/src/controls/combobox/combobox.stories.js

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

package/src/controls/combobox/template.js

@@ -4,13 +4,14 @@
  * @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 { repeat } from "@inglorious/web/directives/repeat"
 import { when } from "@inglorious/web/directives/when"
 
 import { Chip } from "../../data-display/chip/index.js"
+import { fallbackLabel } from "../../shared/fallback-label.js"
 import {
   filterOptions,
   formatOption,
@@ -66,7 +67,7 @@ export const Combobox = {
       ${when(
         label,
         () =>
-          html`<label id=${labelId || ""} class="iw-combobox-label">
+          html`<label id=${labelId || nothing} class="iw-combobox-label">
             ${label}
             ${when(
               isRequired,
@@ -79,14 +80,16 @@ export const Combobox = {
       ${when(
         error,
         () =>
-          html`<span id=${messageId ?? ""} class="iw-combobox-error-message"
+          html`<span
+            id=${messageId || nothing}
+            class="iw-combobox-error-message"
             >${error}</span
           >`,
       )}
       ${when(
         !error && hint,
         () =>
-          html`<span id=${messageId || ""} class="iw-combobox-hint"
+          html`<span id=${messageId || nothing} class="iw-combobox-hint"
             >${hint}</span
           >`,
       )}
@@ -107,6 +110,7 @@ export const Combobox = {
   renderControl(props) {
     const {
       id,
+      label,
       labelId,
       messageId,
       selectedValue,
@@ -134,14 +138,15 @@ export const Combobox = {
     }
 
     return html`<div
-      id=${controlId}
+      id=${controlId || nothing}
       class="${classMap(frameClasses)}"
       role="combobox"
       aria-haspopup="listbox"
       aria-expanded=${isOpen ? "true" : "false"}
-      aria-controls=${controlId ? `${controlId}-listbox` : ""}
-      aria-labelledby=${labelId || ""}
-      aria-describedby=${messageId || ""}
+      aria-controls=${controlId ? `${controlId}-listbox` : nothing}
+      aria-labelledby=${labelId || nothing}
+      aria-label=${fallbackLabel(labelId, label)}
+      aria-describedby=${messageId || nothing}
       aria-required=${isRequired ? "true" : "false"}
       aria-invalid=${error ? "true" : "false"}
       tabindex=${isDisabled ? -1 : 0}
@@ -235,7 +240,7 @@ export const Combobox = {
     const { id, options, size, onOptionSelect, onChange } = props
 
     const option = options.find((opt) => getOptionValue(opt) === value)
-    const tagId = `${id}-tag-${String(value)}`
+    const tagId = id ? `${id}-tag-${String(value)}` : undefined
     const chipSize = size === "lg" ? "md" : "sm"
 
     return html`<span
@@ -268,7 +273,7 @@ export const Combobox = {
     const filteredOptions = filterOptions(options, searchTerm)
 
     return html`<div
-      id=${id ? `${id}-control-listbox` : ""}
+      id=${id ? `${id}-control-listbox` : nothing}
       class="iw-combobox-dropdown"
       role="listbox"
       ${ref((el) => trackOutsideClick(props, el))}
@@ -354,7 +359,7 @@ export const Combobox = {
     const isFocused = index === focusedIndex
 
     return html`<div
-      id=${id ? `${id}-option-${index}` : ""}
+      id=${id ? `${id}-option-${index}` : nothing}
       role="option"
       aria-selected=${isSelected ? "true" : "false"}
       class="iw-combobox-dropdown-options-option ${classMap({

package/src/controls/fab/fab.stories.js

@@ -1,7 +1,7 @@
 import { html } from "@inglorious/web"
 
 import { Icon } from "../../data-display/icon"
-import { createRender } from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notify-story.js"
 import { Fab } from "."
 
 export default {

package/src/controls/file-upload/file-upload.stories.js

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

package/src/controls/file-upload/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 file upload area with optional summary, hint, and error text.
@@ -36,7 +37,8 @@ export function render(props) {
     ...rest
   } = props
 
-  const uploadId = id || name || "file-upload"
+  const uploadId = id || name
+  const messageId = (error || hint) && id ? `${id}-message` : ""
 
   const wrapperClasses = {
     "iw-upload": true,
@@ -58,7 +60,7 @@ export function render(props) {
       ${
         label
           ? html`
-              <label for=${uploadId} class="iw-upload-label">
+              <label for=${uploadId || nothing} class="iw-upload-label">
                 ${label}
                 ${
                   isRequired
@@ -72,8 +74,11 @@ export function render(props) {
 
       <div class=${classMap(fieldClasses)}>
         <input
-          id=${uploadId}
+          id=${uploadId || nothing}
           name=${name}
+          aria-label=${fallbackLabel(uploadId, label)}
+          aria-describedby=${messageId || nothing}
+          aria-invalid=${error ? "true" : "false"}
           type="file"
           accept=${accept ?? ""}
           ?multiple=${isMultiple}
@@ -96,9 +101,15 @@ export function render(props) {
 
       ${
         error
-          ? html`<span class="iw-upload-error-message">${error}</span>`
+          ? html`<span
+              id=${messageId || nothing}
+              class="iw-upload-error-message"
+              >${error}</span
+            >`
           : hint
-            ? html`<span class="iw-upload-hint">${hint}</span>`
+            ? html`<span id=${messageId || nothing} class="iw-upload-hint"
+                >${hint}</span
+              >`
             : null
       }
     </div>

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

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

package/src/controls/image-cropper/image-cropper.stories.js

@@ -1,7 +1,7 @@
 import {
   createEntityRender,
   notifyActionArgType,
-} from "../../stories/notifyStory.js"
+} from "../../stories/notify-story.js"
 import { ImageCropper } from "./index.js"
 
 export default {

package/src/controls/input/input.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 { Input } from "."
 
 const nativeInputTypes = [

package/src/controls/input/template.js

@@ -3,20 +3,21 @@
  * @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 { when } from "@inglorious/web/directives/when"
 
 import { Icon } from "../../data-display/icon/index.js"
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/apply-element-props.js"
+import { fallbackLabel } from "../../shared/fallback-label.js"
 
 /**
  * Renders a labeled input field with optional icons, hint text, and error messaging.
  * Supports disabled/readonly/required states and emits `onChange` on input.
  * @example
  * // Stateless usage
- * input.render({ label: 'Email', type: 'email', placeholder: 'you@example.com' })
+ * input.render({ label: 'Email', inputType: 'email', placeholder: 'you@example.com' })
  *
  * @param {InputProps} props
  * @returns {TemplateResult}
@@ -58,7 +59,7 @@ export const Input = {
         ${when(
           label,
           () => html`
-            <label for=${controlId} class="iw-input-label">
+            <label for=${controlId || nothing} class="iw-input-label">
               ${label}
               ${when(
                 isRequired,
@@ -67,18 +68,18 @@ export const Input = {
             </label>
           `,
         )}
-        ${this.renderControl?.(props)}
+        ${this.renderControl?.({ ...props, messageId })}
         ${when(
           error,
           () =>
-            html`<span id=${messageId || ""} class="iw-input-error-message"
+            html`<span id=${messageId || nothing} class="iw-input-error-message"
               >${error}</span
             >`,
         )}
         ${when(
           !error && hint,
           () =>
-            html`<span id=${messageId || ""} class="iw-input-hint"
+            html`<span id=${messageId || nothing} class="iw-input-hint"
               >${hint}</span
             >`,
         )}
@@ -91,6 +92,9 @@ export const Input = {
       id,
       type, // eslint-disable-line no-unused-vars
       name = "",
+      label,
+      hint, // eslint-disable-line no-unused-vars
+      messageId,
       inputType = "text",
       value = "",
       placeholder = "",
@@ -99,6 +103,7 @@ export const Input = {
       isDisabled = false,
       isReadOnly = false,
       isRequired = false,
+      isFullWidth, // eslint-disable-line no-unused-vars
       icon,
       iconAfter,
       onChange,
@@ -121,9 +126,12 @@ export const Input = {
       ${when(icon, () => Icon.render({ children: icon, color: "var(--iw-color-text-muted)", size }))}
 
       <input
-        id=${controlId}
+        id=${controlId || nothing}
         name=${name}
         type=${inputType}
+        aria-label=${fallbackLabel(controlId, label)}
+        aria-describedby=${messageId || nothing}
+        aria-invalid=${error ? "true" : "false"}
         .value=${value}
         placeholder=${placeholder}
         ?disabled=${isDisabled}

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

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

package/src/controls/radio-group/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 group of radio options for single selection.
@@ -30,7 +30,9 @@ export function render(props) {
     ...rest
   } = props
 
-  const inputId = id || name
+  // Radios are a group by sharing a name: without one, checking an option does not
+  // uncheck the others and the arrow keys do not move between them.
+  const groupName = name || id
 
   const rootClasses = {
     "iw-radio-group": true,
@@ -50,7 +52,7 @@ export function render(props) {
           ? html`<legend class="iw-radio-group-label">${label}</legend>`
           : null
       }
-      ${options.map((option) => {
+      ${options.map((option, index) => {
         const {
           label: optionLabel,
           value: optionValue,
@@ -61,10 +63,10 @@ export function render(props) {
         return html`
           <label class="iw-radio-option">
             <input
-              id=${inputId}
+              id=${groupName ? `${groupName}-${index}` : nothing}
               class="iw-radio"
               type="radio"
-              name=${name}
+              name=${groupName || nothing}
               value=${optionValue}
               .checked=${value === optionValue}
               ?disabled=${isDisabled || optionDisabled}

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

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

package/src/controls/select/select.stories.js

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

package/src/controls/select/template.js

@@ -3,50 +3,15 @@
  * @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 { repeat } from "@inglorious/web/directives/repeat"
 import { when } from "@inglorious/web/directives/when"
 
 import { Icon } from "../../data-display/icon/index.js"
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { fallbackLabel } from "../../shared/fallback-label.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
-/**
- * Opens the native dropdown when the arrow strip is pressed.
- *
- * The arrow is a sibling of the select, not an overlay on it, so a press on it
- * has no control underneath to hit. A native popup only opens from a trusted
- * gesture on the select itself, and the strip is outside it.
- *
- * `showPicker()` is the API for that. It needs transient user activation, which
- * a real click has and a dispatched event does not, and it throws rather than
- * silently doing nothing, so the fallback covers the browsers without it.
- *
- * Deliberately on `click`, not `pointerdown`: focusing from pointerdown gets
- * the focus moved away again by the browser's own mousedown handling, which
- * showed up as a focus immediately followed by a blur.
- *
- * @param {MouseEvent} event
- */
-function openFromArrowStrip(event) {
-  const frame = event.currentTarget
-  const select = frame?.querySelector("select")
-  if (!select || select.disabled || event.target === select) return
-
-  event.preventDefault()
-  if (typeof select.showPicker === "function") {
-    try {
-      select.showPicker()
-      return
-    } catch {
-      // No user activation, or the popup is already showing.
-    }
-  }
-  select.focus()
-}
-
 /**
  * Renders a styled native select control with optional single or multi-select modes.
  * Options can be primitives or objects and are rendered with consistent theming.
@@ -73,7 +38,6 @@ export const Select = {
       isFullWidth = false,
     } = props
 
-    const labelId = label && id ? `${id}-label` : ""
     const messageId = (error || hint) && id ? `${id}-message` : ""
 
     const selectClasses = {
@@ -86,7 +50,7 @@ export const Select = {
         ${when(
           label,
           () => html`
-            <label for=${id || name || ""} class="iw-select-label">
+            <label for=${id || name || nothing} class="iw-select-label">
               ${label}
               ${
                 isRequired
@@ -96,18 +60,20 @@ export const Select = {
             </label>
           `,
         )}
-        ${this.renderControl?.({ ...props, labelId, messageId })}
+        ${this.renderControl?.({ ...props, messageId })}
         ${when(
           error,
           () =>
-            html`<span id=${messageId || ""} class="iw-select-error-message"
+            html`<span
+              id=${messageId || nothing}
+              class="iw-select-error-message"
               >${error}</span
             >`,
         )}
         ${when(
           !error && hint,
           () =>
-            html`<span id=${messageId || ""} class="iw-select-hint"
+            html`<span id=${messageId || nothing} class="iw-select-hint"
               >${hint}</span
             >`,
         )}
@@ -119,6 +85,8 @@ export const Select = {
     const {
       id,
       name,
+      label,
+      messageId,
       options,
       value,
       error,
@@ -152,8 +120,11 @@ export const Select = {
       ${icon ? Icon.render({ children: icon, size }) : null}
 
       <select
-        id=${controlId}
+        id=${controlId || nothing}
         name=${name}
+        aria-label=${ariaLabel || fallbackLabel(controlId, label)}
+        aria-describedby=${messageId || nothing}
+        aria-invalid=${error ? "true" : "false"}
         ?multiple=${isMulti}
         ?disabled=${isDisabled}
         ?required=${isRequired}
@@ -161,9 +132,6 @@ export const Select = {
         @change=${(event) => onChange?.(event.target.value)}
         @blur=${onBlur}
         @focus=${onFocus}
-        ${ref((element) =>
-          applyElementProps(element, { "aria-label": ariaLabel || null }),
-        )}
       >
         ${repeat(
           options,
@@ -206,3 +174,37 @@ export const Select = {
     </div>`
   },
 }
+
+/**
+ * Opens the native dropdown when the arrow strip is pressed.
+ *
+ * The arrow is a sibling of the select, not an overlay on it, so a press on it
+ * has no control underneath to hit. A native popup only opens from a trusted
+ * gesture on the select itself, and the strip is outside it.
+ *
+ * `showPicker()` is the API for that. It needs transient user activation, which
+ * a real click has and a dispatched event does not, and it throws rather than
+ * silently doing nothing, so the fallback covers the browsers without it.
+ *
+ * Deliberately on `click`, not `pointerdown`: focusing from pointerdown gets
+ * the focus moved away again by the browser's own mousedown handling, which
+ * showed up as a focus immediately followed by a blur.
+ *
+ * @param {MouseEvent} event
+ */
+function openFromArrowStrip(event) {
+  const frame = event.currentTarget
+  const select = frame?.querySelector("select")
+  if (!select || select.disabled || event.target === select) return
+
+  event.preventDefault()
+  if (typeof select.showPicker === "function") {
+    try {
+      select.showPicker()
+      return
+    } catch {
+      // No user activation, or the popup is already showing.
+    }
+  }
+  select.focus()
+}

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

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