@inglorious/ui 9.1.0 → 9.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.1.0",
+  "version": "9.1.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",
@@ -315,7 +315,7 @@
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "12.0.0",
+    "@inglorious/charts": "12.1.0",
     "@inglorious/eslint-config": "1.2.0",
     "@inglorious/store": "12.0.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",

package/src/controls/button/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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -83,18 +84,18 @@ export function render(props) {
     >
       ${children}
     </button>
-    ${
-      onFileSelect
-        ? html`<input
-            type="file"
-            accept=${accept ?? ""}
-            ?multiple=${isMultiple}
-            ?disabled=${isDisabled}
-            hidden
-            @change=${(event) => handleFileChange(event, onFileSelect)}
-          />`
-        : nothing
-    }
+    ${when(
+      onFileSelect,
+      () =>
+        html`<input
+          type="file"
+          accept=${accept ?? ""}
+          ?multiple=${isMultiple}
+          ?disabled=${isDisabled}
+          hidden
+          @change=${(event) => handleFileChange(event, onFileSelect)}
+        />`,
+    )}
   `
 }
 

package/src/controls/button-group/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 { applyElementProps } from "../../shared/apply-element-props.js"
 import { Button } from "../button/index.js"
@@ -73,13 +74,12 @@ export function render(props) {
 
         return Button.render({
           children: html`
-            ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+            ${when(icon, () => html`<span class="iw-button-icon">${icon}</span>`)}
             ${children ?? label}
-            ${
-              iconAfter
-                ? html`<span class="iw-button-icon">${iconAfter}</span>`
-                : null
-            }
+            ${when(
+              iconAfter,
+              () => html`<span class="iw-button-icon">${iconAfter}</span>`,
+            )}
           `,
           variant: itemVariant ?? variant,
           color: itemColor ?? color,

package/src/controls/checkbox/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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -55,14 +56,15 @@ export function render(props) {
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
-      ${
-        description
-          ? html`<span class="iw-checkbox-text">
-              <span class="iw-checkbox-label">${label}</span>
-              <span class="iw-checkbox-description">${description}</span>
-            </span>`
-          : html`<span class="iw-checkbox-label">${label}</span>`
-      }
+      ${when(
+        description,
+        () =>
+          html`<span class="iw-checkbox-text">
+            <span class="iw-checkbox-label">${label}</span>
+            <span class="iw-checkbox-description">${description}</span>
+          </span>`,
+        () => html`<span class="iw-checkbox-label">${label}</span>`,
+      )}
     </label>
   `
 }

package/src/controls/file-upload/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 { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -57,20 +58,18 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${
-        label
-          ? html`
-              <label for=${uploadId || nothing} class="iw-upload-label">
-                ${label}
-                ${
-                  isRequired
-                    ? html`<span class="iw-upload-required">*</span>`
-                    : null
-                }
-              </label>
-            `
-          : null
-      }
+      ${when(
+        label,
+        () => html`
+          <label for=${uploadId || nothing} class="iw-upload-label">
+            ${label}
+            ${when(
+              isRequired,
+              () => html`<span class="iw-upload-required">*</span>`,
+            )}
+          </label>
+        `,
+      )}
 
       <div class=${classMap(fieldClasses)}>
         <input
@@ -99,19 +98,21 @@ export function render(props) {
 
       <div class="iw-upload-field-summary">${summaryText}</div>
 
-      ${
-        error
-          ? html`<span
-              id=${messageId || nothing}
-              class="iw-upload-error-message"
-              >${error}</span
-            >`
-          : hint
-            ? html`<span id=${messageId || nothing} class="iw-upload-hint"
+      ${when(
+        error,
+        () =>
+          html`<span id=${messageId || nothing} class="iw-upload-error-message"
+            >${error}</span
+          >`,
+        () =>
+          when(
+            hint,
+            () =>
+              html`<span id=${messageId || nothing} class="iw-upload-hint"
                 >${hint}</span
-              >`
-            : null
-      }
+              >`,
+          ),
+      )}
     </div>
   `
 }

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

@@ -4,6 +4,7 @@
  */
 
 import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
 
 import { Button } from "../button/index.js"
 
@@ -25,13 +26,12 @@ export function render(props) {
 
   const children = html`
     <span class="iw-icon-button-content iw-icon-button-content-${direction}">
-      ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+      ${when(icon, () => html`<span class="iw-button-icon">${icon}</span>`)}
       ${label}
-      ${
-        iconAfter
-          ? html`<span class="iw-button-icon">${iconAfter}</span>`
-          : null
-      }
+      ${when(
+        iconAfter,
+        () => html`<span class="iw-button-icon">${iconAfter}</span>`,
+      )}
     </span>
   `
 

package/src/controls/image-cropper/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"
 
 import {
   DEFAULT_MIN_SIZE,
@@ -84,7 +85,8 @@ export const ImageCropper = {
       @keydown=${handleKeyDown(props)}
       @wheel=${handleWheel(props)}
     >
-      ${this.renderImage?.(props)} ${isLoaded ? this.renderFrame?.(props) : ""}
+      ${this.renderImage?.(props)}
+      ${when(isLoaded, () => this.renderFrame?.(props))}
     </div>`
   },
 

package/src/controls/radio-group/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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -47,11 +48,10 @@ export function render(props) {
       ?disabled=${isDisabled}
       ${ref((element) => applyElementProps(element, rest))}
     >
-      ${
-        label
-          ? html`<legend class="iw-radio-group-label">${label}</legend>`
-          : null
-      }
+      ${when(
+        label,
+        () => html`<legend class="iw-radio-group-label">${label}</legend>`,
+      )}
       ${options.map((option, index) => {
         const {
           label: optionLabel,
@@ -74,16 +74,15 @@ export function render(props) {
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}
             />
-            ${
-              optionDescription
-                ? html`<span class="iw-radio-text">
-                    <span>${optionLabel}</span>
-                    <span class="iw-radio-description"
-                      >${optionDescription}</span
-                    >
-                  </span>`
-                : html`<span>${optionLabel}</span>`
-            }
+            ${when(
+              optionDescription,
+              () =>
+                html`<span class="iw-radio-text">
+                  <span>${optionLabel}</span>
+                  <span class="iw-radio-description">${optionDescription}</span>
+                </span>`,
+              () => html`<span>${optionLabel}</span>`,
+            )}
           </label>
         `
       })}

package/src/controls/select/template.js

@@ -52,11 +52,10 @@ export const Select = {
           () => html`
             <label for=${id || name || nothing} class="iw-select-label">
               ${label}
-              ${
-                isRequired
-                  ? html`<span class="iw-select-required">*</span>`
-                  : null
-              }
+              ${when(
+                isRequired,
+                () => html`<span class="iw-select-required">*</span>`,
+              )}
             </label>
           `,
         )}
@@ -117,7 +116,7 @@ export const Select = {
     )
 
     return html`<div class="iw-select-frame" @click=${openFromArrowStrip}>
-      ${icon ? Icon.render({ children: icon, size }) : null}
+      ${when(icon, () => Icon.render({ children: icon, size }))}
 
       <select
         id=${controlId || nothing}

package/src/controls/slider/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 { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -60,51 +61,53 @@ export function render(props) {
 
   return html`
     <div class=${classMap(classes)}>
-      ${
-        (label || isValueVisible) &&
-        html`<div class="iw-slider-header">
-          ${
-            label
-              ? html`<label for=${inputId || nothing}>${label}</label>`
-              : html`<span></span>`
-          }
-          ${
-            isValueVisible
-              ? html`<output class="iw-slider-value">${shown}</output>`
-              : null
-          }
-        </div>`
-      }
-      ${
-        isRange
-          ? renderRange({
-              inputId,
-              name,
+      ${when(
+        label || isValueVisible,
+        () =>
+          html`<div class="iw-slider-header">
+            ${when(
               label,
-              value,
-              min,
-              max,
-              step,
-              isDisabled,
-              onChange,
-              rest,
-            })
-          : html`<input
-              id=${inputId || nothing}
-              class="iw-slider-input"
-              aria-label=${fallbackLabel(inputId, label)}
-              type="range"
-              name=${name}
-              min=${min}
-              max=${max}
-              step=${step}
-              .value=${String(value)}
-              ?disabled=${isDisabled}
-              @input=${(event) => onChange?.(Number(event.target.value))}
-              ${ref((element) => applyElementProps(element, rest))}
-            />`
-      }
-      ${hasMarks ? renderMarks({ min, max, step }) : nothing}
+              () => html`<label for=${inputId || nothing}>${label}</label>`,
+              () => html`<span></span>`,
+            )}
+            ${when(
+              isValueVisible,
+              () => html`<output class="iw-slider-value">${shown}</output>`,
+            )}
+          </div>`,
+      )}
+      ${when(
+        isRange,
+        () =>
+          renderRange({
+            inputId,
+            name,
+            label,
+            value,
+            min,
+            max,
+            step,
+            isDisabled,
+            onChange,
+            rest,
+          }),
+        () =>
+          html`<input
+            id=${inputId || nothing}
+            class="iw-slider-input"
+            aria-label=${fallbackLabel(inputId, label)}
+            type="range"
+            name=${name}
+            min=${min}
+            max=${max}
+            step=${step}
+            .value=${String(value)}
+            ?disabled=${isDisabled}
+            @input=${(event) => onChange?.(Number(event.target.value))}
+            ${ref((element) => applyElementProps(element, rest))}
+          />`,
+      )}
+      ${when(hasMarks, () => renderMarks({ min, max, step }))}
     </div>
   `
 }

package/src/controls/switch/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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -58,16 +59,19 @@ export function render(props) {
       <span class="iw-switch-track" aria-hidden="true">
         <span class="iw-switch-thumb"></span>
       </span>
-      ${
-        description
-          ? html`<span class="iw-switch-text">
-              ${label ? html`<span class="iw-switch-label">${label}</span>` : null}
-              <span class="iw-switch-description">${description}</span>
-            </span>`
-          : label
-            ? html`<span class="iw-switch-label">${label}</span>`
-            : null
-      }
+      ${when(
+        description,
+        () =>
+          html`<span class="iw-switch-text">
+            ${when(label, () => html`<span class="iw-switch-label">${label}</span>`)}
+            <span class="iw-switch-description">${description}</span>
+          </span>`,
+        () =>
+          when(
+            label,
+            () => html`<span class="iw-switch-label">${label}</span>`,
+          ),
+      )}
     </label>
   `
 }

package/src/controls/textarea/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 { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -59,20 +60,18 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${
-        label
-          ? html`
-              <label for=${textareaId || nothing} class="iw-textarea-label">
-                ${label}
-                ${
-                  isRequired
-                    ? html`<span class="iw-textarea-required">*</span>`
-                    : null
-                }
-              </label>
-            `
-          : null
-      }
+      ${when(
+        label,
+        () => html`
+          <label for=${textareaId || nothing} class="iw-textarea-label">
+            ${label}
+            ${when(
+              isRequired,
+              () => html`<span class="iw-textarea-required">*</span>`,
+            )}
+          </label>
+        `,
+      )}
 
       <textarea
         id=${textareaId || nothing}
@@ -93,19 +92,23 @@ export function render(props) {
         ${ref((element) => applyElementProps(element, rest))}
       ></textarea>
 
-      ${
-        error
-          ? html`<span
-              id=${messageId || nothing}
-              class="iw-textarea-error-message"
-              >${error}</span
-            >`
-          : hint
-            ? html`<span id=${messageId || nothing} class="iw-textarea-hint"
+      ${when(
+        error,
+        () =>
+          html`<span
+            id=${messageId || nothing}
+            class="iw-textarea-error-message"
+            >${error}</span
+          >`,
+        () =>
+          when(
+            hint,
+            () =>
+              html`<span id=${messageId || nothing} class="iw-textarea-hint"
                 >${hint}</span
-              >`
-            : null
-      }
+              >`,
+          ),
+      )}
     </div>
   `
 }

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

@@ -6,6 +6,7 @@
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { styleMap } from "@inglorious/web/directives/style-map"
+import { when } from "@inglorious/web/directives/when"
 
 /**
  * Renders an avatar with image, initials, or fallback content.
@@ -57,11 +58,11 @@ export function render(props) {
     style=${styleMap(styles)}
     @click=${onClick}
   >
-    ${
-      src
-        ? html`<img class="iw-avatar-img" src=${src} alt=${alt} />`
-        : (children ?? initials ?? "?")
-    }
+    ${when(
+      src,
+      () => html`<img class="iw-avatar-img" src=${src} alt=${alt} />`,
+      () => children ?? initials ?? "?",
+    )}
   </span>`
 }
 

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

@@ -5,6 +5,7 @@
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 /**
  * Renders a compact chip label with an optional leading icon and remove action.
@@ -31,14 +32,14 @@ export function render(props) {
   }
 
   return html`<span class=${classMap(classes)}>
-    ${icon ? html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>` : null}
+    ${when(icon, () => html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>`)}
     <span class="iw-chip-label">${children}</span>
-    ${
-      isRemovable
-        ? html`<button type="button" class="iw-chip-remove" @click=${onClick}>
-            ×
-          </button>`
-        : null
-    }
+    ${when(
+      isRemovable,
+      () =>
+        html`<button type="button" class="iw-chip-remove" @click=${onClick}>
+          ×
+        </button>`,
+    )}
   </span>`
 }

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

@@ -111,7 +111,7 @@ export const DataGrid = {
         ${column.title} ${getSortIcon(getSortDirection(props, column.id))}
       </div>
 
-      ${column.isFilterable && Filters.render(props, column)}
+      ${when(column.isFilterable, () => Filters.render(props, column))}
 
       <div
         class="iw-data-grid-column-resizer"

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

@@ -96,11 +96,10 @@ export const List = {
             meta,
             index,
             path: [...path, index],
-          })}${
-            shouldDivide
-              ? html`<li class="iw-list-divider" role="separator"></li>`
-              : null
-          }`
+          })}${when(
+            shouldDivide,
+            () => html`<li class="iw-list-divider" role="separator"></li>`,
+          )}`
         },
       )
 

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

@@ -1,4 +1,5 @@
 import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
 
 import { Typography } from "../../data-display/typography/index.js"
 import { Container } from "../../layout/container/index.js"
@@ -77,24 +78,23 @@ export const PrimitiveSection = {
                       description ??
                       "This section is wired for per-primitive docs and examples.",
                   })}
-                  ${
-                    useCases.length
-                      ? html`
-                          <div style="margin-top: 16px; text-align: left;">
-                            ${Typography.render({
-                              variant: "body2",
-                              color: "secondary",
-                              children: "Common use cases",
-                            })}
-                            <ul style="margin: 8px 0 0; padding-left: 20px;">
-                              ${useCases.map(
-                                (useCase) => html`<li>${useCase}</li>`,
-                              )}
-                            </ul>
-                          </div>
-                        `
-                      : ""
-                  }
+                  ${when(
+                    useCases.length,
+                    () => html`
+                      <div style="margin-top: 16px; text-align: left;">
+                        ${Typography.render({
+                          variant: "body2",
+                          color: "secondary",
+                          children: "Common use cases",
+                        })}
+                        <ul style="margin: 8px 0 0; padding-left: 20px;">
+                          ${useCases.map(
+                            (useCase) => html`<li>${useCase}</li>`,
+                          )}
+                        </ul>
+                      </div>
+                    `,
+                  )}
                 </div>
               `,
             }),

package/src/feedback/alert/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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -53,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/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"
 
@@ -82,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/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/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/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"
 
@@ -104,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/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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -95,8 +96,8 @@ export const Card = {
         [`iw-card-header-padding-${headerPadding}`]: headerPadding !== "md",
       })}
     >
-      ${title ? html`<h3 class="iw-card-title">${title}</h3>` : null}
-      ${subtitle ? html`<p class="iw-card-subtitle">${subtitle}</p>` : null}
+      ${when(title, () => html`<h3 class="iw-card-title">${title}</h3>`)}
+      ${when(subtitle, () => html`<p class="iw-card-subtitle">${subtitle}</p>`)}
     </div>`
   },