@inglorious/ui 8.3.1 → 8.4.1

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.

package/src/shared/{applyElementProps.js → apply-element-props.js}

@@ -1,5 +1,32 @@
 const previousKeysByElement = new WeakMap()
 
+/**
+ * Apply arbitrary properties/attributes to an element.
+ * Useful when entities include extra DOM fields beyond the typed API.
+ *
+ * @param {Element | null} element
+ * @param {Record<string, unknown>} props
+ */
+export function applyElementProps(element, props) {
+  if (!element) return
+
+  const previousKeys = previousKeysByElement.get(element) ?? new Set()
+  const nextKeys = new Set(Object.keys(props))
+
+  for (const key of previousKeys) {
+    if (!nextKeys.has(key)) {
+      clearProp(element, key)
+    }
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "class" || key === "className") continue
+    setProp(element, key, value)
+  }
+
+  previousKeysByElement.set(element, nextKeys)
+}
+
 function clearProp(element, key) {
   if (key in element && !key.includes("-")) {
     try {
@@ -50,30 +77,3 @@ function setProp(element, key, value) {
 
   element.setAttribute(key, String(value))
 }
-
-/**
- * Apply arbitrary properties/attributes to an element.
- * Useful when entities include extra DOM fields beyond the typed API.
- *
- * @param {Element | null} element
- * @param {Record<string, unknown>} props
- */
-export function applyElementProps(element, props) {
-  if (!element) return
-
-  const previousKeys = previousKeysByElement.get(element) ?? new Set()
-  const nextKeys = new Set(Object.keys(props))
-
-  for (const key of previousKeys) {
-    if (!nextKeys.has(key)) {
-      clearProp(element, key)
-    }
-  }
-
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "class" || key === "className") continue
-    setProp(element, key, value)
-  }
-
-  previousKeysByElement.set(element, nextKeys)
-}