@inglorious/ui 9.1.0 → 9.2.0

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/chip.stories.js

@@ -10,6 +10,10 @@ export default {
   render: createRender(Chip),
   argTypes: {
     children: { control: "text", description: "Chip label content." },
+    isSelected: {
+      control: "boolean",
+      description: "Makes the chip a toggle button, pressed while true.",
+    },
     icon: {
       control: false,
       description: "Shown before the label, such as an `Icon.render(...)`.",
@@ -72,3 +76,12 @@ export const WithIcon = {
     color: "success",
   },
 }
+
+export const Selectable = {
+  args: {
+    ...Default.args,
+    children: "Vegan",
+    isRemovable: false,
+    isSelected: true,
+  },
+}

package/src/data-display/chip/style.css

@@ -64,6 +64,28 @@
     border-radius: var(--iw-radius-none);
   }
 
+  &.iw-chip-selectable {
+    border: 1px solid var(--iw-color-border);
+    font: inherit;
+    font-size: var(--iw-font-size-sm);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--iw-color-primary);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  &.iw-chip-selected {
+    border-color: var(--iw-color-primary);
+    background: color-mix(in srgb, var(--iw-color-primary) 20%, transparent);
+  }
+
   &.iw-chip-primary {
     background: color-mix(in srgb, var(--iw-color-primary) 20%, transparent);
   }

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.
@@ -20,6 +21,8 @@ export function render(props) {
     color = "default",
     size = "md",
     shape = "pill",
+    isSelected,
+    isDisabled = false,
     onClick,
   } = props
 
@@ -30,15 +33,36 @@ export function render(props) {
     [`iw-chip-shape-${shape}`]: shape !== "pill",
   }
 
+  const content = html`${when(
+      icon,
+      () => html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>`,
+    )} <span class="iw-chip-label">${children}</span>`
+
+  // A chip that can be picked is a toggle button, pressed while selected.
+  if (isSelected !== undefined) {
+    return html`<button
+      type="button"
+      class=${classMap({
+        ...classes,
+        "iw-chip-selectable": true,
+        "iw-chip-selected": isSelected,
+      })}
+      aria-pressed=${String(isSelected)}
+      ?disabled=${isDisabled}
+      @click=${onClick}
+    >
+      ${content}
+    </button>`
+  }
+
   return html`<span class=${classMap(classes)}>
-    ${icon ? html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>` : null}
-    <span class="iw-chip-label">${children}</span>
-    ${
-      isRemovable
-        ? html`<button type="button" class="iw-chip-remove" @click=${onClick}>
-            ×
-          </button>`
-        : null
-    }
+    ${content}
+    ${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>`
   },
 }