@inglorious/ui 9.0.0 → 9.1.1

package/src/feedback/alert/template.js

@@ -6,12 +6,14 @@
 import { html } 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"
 
 /**
  * Renders an alert message with optional title, description, icon, and actions.
- * Supports severity and variant styles for info, success, warning, and error.
+ * Supports severity and variant styles for info, success, warning, error and
+ * neutral, a plain note.
  * @param {AlertProps} props
  * @returns {TemplateResult}
  */
@@ -52,33 +54,32 @@ export function render(props) {
     role="alert"
     ${ref((el) => applyElementProps(el, rest))}
   >
-    ${icon ? html`<div class="iw-alert-icon">${icon}</div>` : null}
+    ${when(icon, () => html`<div class="iw-alert-icon">${icon}</div>`)}
     <div class="iw-alert-content">
-      ${title ? html`<div class="iw-alert-title">${title}</div>` : null}
-      ${
-        content
-          ? html`<div class="iw-alert-description">${content}</div>`
-          : null
-      }
+      ${when(title, () => html`<div class="iw-alert-title">${title}</div>`)}
+      ${when(
+        content,
+        () => html`<div class="iw-alert-description">${content}</div>`,
+      )}
     </div>
-    ${
-      hasTrailing
-        ? html`<div class="iw-alert-trailing">
-            ${action ? html`<div class="iw-alert-action">${action}</div>` : null}
-            ${
-              onClose
-                ? html`<button
-                    type="button"
-                    class="iw-alert-close"
-                    aria-label="Dismiss"
-                    @click=${onClose}
-                  >
-                    ×
-                  </button>`
-                : null
-            }
-          </div>`
-        : null
-    }
+    ${when(
+      hasTrailing,
+      () =>
+        html`<div class="iw-alert-trailing">
+          ${when(action, () => html`<div class="iw-alert-action">${action}</div>`)}
+          ${when(
+            onClose,
+            () =>
+              html`<button
+                type="button"
+                class="iw-alert-close"
+                aria-label="Dismiss"
+                @click=${onClose}
+              >
+                ×
+              </button>`,
+          )}
+        </div>`,
+    )}
   </div>`
 }

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

@@ -10,6 +10,7 @@ export default {
   argTypes: {
     isOpen: { control: "boolean" },
     isModal: { control: "boolean" },
+    size: { control: "select", options: ["sm", "md", "lg"] },
     title: { control: "text" },
     description: { control: "text" },
     onClose: { action: "onClose" },
@@ -29,6 +30,27 @@ export const Open = {
   },
 }
 
+export const Small = {
+  args: { ...Open.args, size: "sm" },
+}
+
+export const Medium = {
+  args: { ...Open.args, size: "md" },
+}
+
+export const Large = {
+  args: {
+    ...Open.args,
+    size: "lg",
+    title: "Release notes",
+    description: "What changed in this version.",
+    children: html`<p>
+      A wider dialog, for content that needs the room: tables, previews or
+      longer text.
+    </p>`,
+  },
+}
+
 // Modal takes over the page, so it is left out of the docs page.
 export const Modal = {
   tags: ["!autodocs"],

package/src/feedback/dialog/style.css

@@ -7,12 +7,25 @@
   color: var(--iw-color-text);
   border-radius: var(--iw-radius-md);
   border: 1px solid color-mix(in srgb, var(--iw-color-border) 70%, transparent);
-  min-width: min(32rem, 90vw);
-  max-width: min(48rem, 90vw);
   box-shadow: var(--iw-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.3));
   padding: 0;
 }
 
+.iw-dialog-sm {
+  min-width: min(20rem, 90vw);
+  max-width: min(28rem, 90vw);
+}
+
+.iw-dialog-md {
+  min-width: min(32rem, 90vw);
+  max-width: min(48rem, 90vw);
+}
+
+.iw-dialog-lg {
+  min-width: min(40rem, 90vw);
+  max-width: min(64rem, 90vw);
+}
+
 .iw-dialog::backdrop {
   background: color-mix(in srgb, var(--iw-color-black) 55%, transparent);
   backdrop-filter: blur(2px);

package/src/feedback/dialog/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 { syncDialog } from "../../shared/top-layer.js"
 
@@ -28,6 +29,7 @@ export function render(props) {
     id,
     isOpen = false,
     isModal = true,
+    size = "md",
     title,
     description,
     children,
@@ -54,7 +56,11 @@ export function render(props) {
   // also clicks the dialog, and must not close it.
   return html`<dialog
     id=${id || nothing}
-    class=${classMap({ "iw-dialog": true, ...extraClasses })}
+    class=${classMap({
+      "iw-dialog": true,
+      [`iw-dialog-${size}`]: true,
+      ...extraClasses,
+    })}
     aria-labelledby=${titleId || nothing}
     aria-describedby=${descriptionId || nothing}
     @pointerdown=${(event) => {
@@ -77,42 +83,43 @@ export function render(props) {
     ${ref((element) => syncDialog(element, { isOpen, isModal, onClose }))}
   >
     <div class="iw-dialog-surface">
-      ${
-        (title || onClose) &&
-        html`<div class="iw-dialog-header">
-          ${
-            title
-              ? html`<div id=${titleId || nothing} class="iw-dialog-title">
+      ${when(
+        title || onClose,
+        () =>
+          html`<div class="iw-dialog-header">
+            ${when(
+              title,
+              () =>
+                html`<div id=${titleId || nothing} class="iw-dialog-title">
                   ${title}
-                </div>`
-              : null
-          }
-          ${
-            onClose
-              ? html`<button
+                </div>`,
+            )}
+            ${when(
+              onClose,
+              () =>
+                html`<button
                   type="button"
                   class="iw-dialog-close"
                   aria-label="Close"
                   @click=${onClose}
                 >
                   ×
-                </button>`
-              : null
-          }
-        </div>`
-      }
-      ${
-        description
-          ? html`<div
-              id=${descriptionId || nothing}
-              class="iw-dialog-description"
-            >
-              ${description}
-            </div>`
-          : null
-      }
-      ${children ? html`<div class="iw-dialog-body">${children}</div>` : null}
-      ${actions ? html`<div class="iw-dialog-actions">${actions}</div>` : null}
+                </button>`,
+            )}
+          </div>`,
+      )}
+      ${when(
+        description,
+        () =>
+          html`<div
+            id=${descriptionId || nothing}
+            class="iw-dialog-description"
+          >
+            ${description}
+          </div>`,
+      )}
+      ${when(children, () => html`<div class="iw-dialog-body">${children}</div>`)}
+      ${when(actions, () => html`<div class="iw-dialog-actions">${actions}</div>`)}
     </div>
   </dialog>`
 }

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

@@ -8,6 +8,11 @@ export default {
   argTypes: {
     variant: { control: "select", options: ["linear", "circular"] },
     value: { control: "number" },
+    ariaLabel: {
+      control: "text",
+      description:
+        'Names the indicator for assistive tech, e.g. "Uploading photo".',
+    },
     size: { control: "number" },
     thickness: { control: "number" },
     color: {

package/src/feedback/snackbar/template.js

@@ -6,6 +6,7 @@
 import { html } 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 { syncPopover } from "../../shared/top-layer.js"
 
@@ -49,19 +50,19 @@ export function render(props) {
   >
     <div class="iw-snackbar-content">
       <span class="iw-snackbar-message">${message}</span>
-      ${action ? html`<span class="iw-snackbar-action">${action}</span>` : null}
-      ${
-        onClose
-          ? html`<button
-              type="button"
-              class="iw-snackbar-close"
-              aria-label="Dismiss"
-              @click=${onClose}
-            >
-              ×
-            </button>`
-          : null
-      }
+      ${when(action, () => html`<span class="iw-snackbar-action">${action}</span>`)}
+      ${when(
+        onClose,
+        () =>
+          html`<button
+            type="button"
+            class="iw-snackbar-close"
+            aria-label="Dismiss"
+            @click=${onClose}
+          >
+            ×
+          </button>`,
+      )}
     </div>
   </div>`
 }

package/src/layout/flex/flex.stories.js

@@ -30,7 +30,7 @@ export default {
     },
     gap: {
       control: "select",
-      options: ["none", "sm", "md", "lg", "xl"],
+      options: ["none", "xs", "sm", "md", "lg", "xl", "2xl"],
       description: "Spacing between children.",
     },
     padding: {

package/src/layout/flex/style.css

@@ -85,6 +85,10 @@
     gap: 0;
   }
 
+  &.iw-flex-gap-xs {
+    gap: var(--iw-space-1);
+  }
+
   &.iw-flex-gap-sm {
     gap: var(--iw-space-2);
   }
@@ -101,6 +105,10 @@
     gap: var(--iw-space-8);
   }
 
+  &.iw-flex-gap-2xl {
+    gap: var(--iw-space-12);
+  }
+
   &.iw-flex-padding-none {
     padding: 0;
   }

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

@@ -7,6 +7,7 @@
 import { html } 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"
 
@@ -79,18 +80,16 @@ export const BottomNavigation = {
         props.onChange?.(currentValue)
       }}
     >
-      ${
-        action.icon
-          ? html`<span class="iw-bottom-navigation-icon">${action.icon}</span>`
-          : null
-      }
-      ${
-        props.hasLabels
-          ? html`<span class="iw-bottom-navigation-label"
-              >${action.label}</span
-            >`
-          : null
-      }
+      ${when(
+        action.icon,
+        () =>
+          html`<span class="iw-bottom-navigation-icon">${action.icon}</span>`,
+      )}
+      ${when(
+        props.hasLabels,
+        () =>
+          html`<span class="iw-bottom-navigation-label">${action.label}</span>`,
+      )}
     </button>`
   },
 }

package/src/navigation/breadcrumbs/template.js

@@ -7,6 +7,7 @@
 import { html } 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"
 
@@ -51,13 +52,13 @@ export const Breadcrumbs = {
       <ol class="iw-breadcrumbs-list">
         ${items.map(
           (item, index) =>
-            html`${this.renderItem(item, index, props)}${
-              index < items.length - 1
-                ? html`<li class="iw-breadcrumbs-separator" aria-hidden="true">
-                    ${separator}
-                  </li>`
-                : null
-            }`,
+            html`${this.renderItem(item, index, props)}${when(
+              index < items.length - 1,
+              () =>
+                html`<li class="iw-breadcrumbs-separator" aria-hidden="true">
+                  ${separator}
+                </li>`,
+            )}`,
         )}
       </ol>
     </nav>`
@@ -75,24 +76,26 @@ export const Breadcrumbs = {
     const isLast = index === props.items.length - 1
 
     return html`<li class="iw-breadcrumbs-item iw-typography">
-      ${
-        item.href && !isLast
-          ? html`<a
-              href=${item.href}
-              class="iw-breadcrumbs-link"
-              @click=${item.onClick ?? null}
-            >
-              ${item.label}
-            </a>`
-          : html`<span
-              class=${classMap({
-                "iw-breadcrumbs-current": isLast,
-              })}
-              aria-current=${isLast ? "page" : "false"}
-            >
-              ${item.label}
-            </span>`
-      }
+      ${when(
+        item.href && !isLast,
+        () =>
+          html`<a
+            href=${item.href}
+            class="iw-breadcrumbs-link"
+            @click=${item.onClick ?? null}
+          >
+            ${item.label}
+          </a>`,
+        () =>
+          html`<span
+            class=${classMap({
+              "iw-breadcrumbs-current": isLast,
+            })}
+            aria-current=${isLast ? "page" : "false"}
+          >
+            ${item.label}
+          </span>`,
+      )}
     </li>`
   },
 }

package/src/navigation/menu/template.js

@@ -7,6 +7,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 { Button } from "../../controls/button/index.js"
 import { anchorName } from "../../shared/anchor.js"
@@ -138,17 +139,15 @@ export const Menu = {
         props.onItemClick?.(item.value ?? index, item)
       }}
     >
-      ${
-        item.icon
-          ? html`<span class="iw-menu-item-icon">${item.icon}</span>`
-          : null
-      }
+      ${when(
+        item.icon,
+        () => html`<span class="iw-menu-item-icon">${item.icon}</span>`,
+      )}
       <span class="iw-menu-item-label">${item.label}</span>
-      ${
-        item.trailing
-          ? html`<span class="iw-menu-item-trailing">${item.trailing}</span>`
-          : null
-      }
+      ${when(
+        item.trailing,
+        () => html`<span class="iw-menu-item-trailing">${item.trailing}</span>`,
+      )}
     </button>`
   },
 }

package/src/navigation/pagination/template.js

@@ -7,6 +7,7 @@
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 import { Button } from "../../controls/button/index.js"
 
@@ -52,15 +53,13 @@ export const Pagination = {
       class=${classMap({ "iw-pagination": true, ...extraClasses })}
       aria-label="Pagination"
     >
-      ${
-        isFirstButtonVisible
-          ? this.renderControl(props, {
-              label: "«",
-              target: 1,
-              isDisabled: page <= PRETTY_PAGE || isDisabled,
-            })
-          : null
-      }
+      ${when(isFirstButtonVisible, () =>
+        this.renderControl(props, {
+          label: "«",
+          target: 1,
+          isDisabled: page <= PRETTY_PAGE || isDisabled,
+        }),
+      )}
       ${this.renderControl(props, {
         label: "‹",
         target: Math.max(PRETTY_PAGE, page - PRETTY_PAGE),
@@ -72,15 +71,13 @@ export const Pagination = {
         target: Math.min(count, page + PRETTY_PAGE),
         isDisabled: page >= count || isDisabled,
       })}
-      ${
-        isLastButtonVisible
-          ? this.renderControl(props, {
-              label: "»",
-              target: count,
-              isDisabled: page >= count || isDisabled,
-            })
-          : null
-      }
+      ${when(isLastButtonVisible, () =>
+        this.renderControl(props, {
+          label: "»",
+          target: count,
+          isDisabled: page >= count || isDisabled,
+        }),
+      )}
     </nav>`
   },
 

package/src/navigation/stepper/template.js

@@ -6,6 +6,7 @@
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 export const Stepper = {
   /**
@@ -67,11 +68,10 @@ export const Stepper = {
       <span class="iw-stepper-indicator">${completed ? "✓" : index + 1}</span>
       <span class="iw-stepper-content">
         <span class="iw-stepper-label">${step.label}</span>
-        ${
-          step.optional
-            ? html`<span class="iw-stepper-optional">${step.optional}</span>`
-            : null
-        }
+        ${when(
+          step.optional,
+          () => html`<span class="iw-stepper-optional">${step.optional}</span>`,
+        )}
       </span>
     </li>`
   },

package/src/navigation/tabs/template.js

@@ -6,6 +6,7 @@
 
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 export const Tabs = {
   /**
@@ -88,7 +89,7 @@ export const Tabs = {
         props.onChange?.(tabValue)
       }}
     >
-      ${item.icon ? html`<span class="iw-tab-icon">${item.icon}</span>` : null}
+      ${when(item.icon, () => html`<span class="iw-tab-icon">${item.icon}</span>`)}
       <span>${item.label}</span>
     </button>`
   },

package/src/surfaces/accordion/accordion.stories.js

@@ -12,6 +12,11 @@ export default {
       control: "object",
       description: "Accordion sections with title, content, and state flags.",
     },
+    name: {
+      control: "text",
+      description:
+        "Items sharing a name close each other: at most one is open at a time.",
+    },
     onItemToggle: { action: "onItemToggle" },
   },
   parameters: {
@@ -44,6 +49,10 @@ export const Default = {
   },
 }
 
+export const Exclusive = {
+  args: { ...Default.args, name: "settings" },
+}
+
 export const WithIcons = {
   args: {
     items: [

package/src/surfaces/accordion/template.js

@@ -7,6 +7,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"
 
@@ -85,7 +86,11 @@ export const Accordion = {
       name=${props.name || nothing}
       .open=${isExpanded}
       @toggle=${(event) => {
-        const isOpen = event.newState === "open"
+        // newState is what the browser says; an environment whose toggle
+        // event lacks it, such as jsdom, still has the element's own state.
+        const isOpen = event.newState
+          ? event.newState === "open"
+          : event.currentTarget.open
         // Also fires when isExpanded opened it, which needs no report.
         if (isOpen === isExpanded) return
         onToggle?.(item, index, isOpen)
@@ -100,7 +105,7 @@ export const Accordion = {
           if (isDisabled) event.preventDefault()
         }}
       >
-        ${icon ? html`<span class="iw-accordion-icon">${icon}</span>` : null}
+        ${when(icon, () => html`<span class="iw-accordion-icon">${icon}</span>`)}
         <span class="iw-accordion-title">${title}</span>
         <span class="iw-accordion-caret" aria-hidden="true">▾</span>
       </summary>

package/src/surfaces/card/card.stories.js

@@ -53,6 +53,12 @@ export default {
       options: ["none", "sm", "md", "lg", "xl"],
       description: "Footer padding preset.",
     },
+    variant: {
+      control: "select",
+      options: ["default", "sunk", "clear"],
+      description:
+        "The surface: raised, sunk into the page for content inside another surface, or clear.",
+    },
     isHoverable: {
       control: "boolean",
       description: "Enable hover visual feedback.",
@@ -97,6 +103,24 @@ export const WithFooter = {
   },
 }
 
+export const Sunk = {
+  args: {
+    title: "Sunk card",
+    subtitle: "Content inside another surface",
+    children: "Body content",
+    variant: "sunk",
+  },
+}
+
+export const Clear = {
+  args: {
+    title: "Clear card",
+    subtitle: "Groups content with no surface of its own",
+    children: "Body content",
+    variant: "clear",
+  },
+}
+
 export const Interactive = {
   args: {
     title: "Interactive Card",