@inglorious/ui 9.1.0 → 9.2.0

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>`
   },
 

package/types/controls/checkbox.d.ts

@@ -6,6 +6,10 @@ export interface CheckboxProps {
   label?: string
   /** A line of detail under the label. */
   description?: string
+  /** Shown above the label, such as an icon or an image. */
+  media?: TemplateResult
+  /** `"card"` draws the checkbox as a card, outlined while checked. */
+  variant?: "default" | "card"
   isChecked?: boolean
   isDisabled?: boolean
   isRequired?: boolean

package/types/controls/radio-group.d.ts

@@ -4,6 +4,8 @@ export interface RadioOption {
   label: string
   /** A line of detail under the label. */
   description?: string
+  /** Shown above the label, such as an icon or an image. */
+  media?: TemplateResult
   value: string
   isDisabled?: boolean
   [key: string]: unknown
@@ -16,6 +18,8 @@ export interface RadioGroupProps {
   value?: string
   options?: RadioOption[]
   direction?: "column" | "row"
+  /** `"card"` draws each option as a card in a grid, outlined while checked. */
+  variant?: "default" | "card"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   isDisabled?: boolean
   onChange?: (value: string) => void

package/types/data-display/chip.d.ts

@@ -16,6 +16,13 @@ export interface ChipProps {
     | "info"
   size?: "sm" | "md" | "lg"
   shape?: "pill" | "rounded" | "square"
+  /**
+   * Makes the chip a toggle button, pressed while true, for picking options:
+   * `onClick` toggles it. Left out, the chip is a plain label.
+   */
+  isSelected?: boolean
+  /** Only for a chip with `isSelected`. */
+  isDisabled?: boolean
   onClick?: () => void
   [key: string]: unknown
 }