@inglorious/ui 9.10.0 → 9.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.10.0",
+  "version": "9.10.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",
@@ -354,6 +354,7 @@
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
     "@inglorious/web": "6.14.0",
+    "@lit-labs/ssr": "^4.1.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",
     "happy-dom": "^20.14.0",

package/src/controls/checkbox/template.js

@@ -9,6 +9,7 @@ import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 
 /**
  * Renders a labeled checkbox for boolean input.
@@ -51,7 +52,8 @@ export function render(props) {
         class="iw-checkbox-input"
         type="checkbox"
         name=${name}
-        .checked=${isChecked}
+        ?checked=${isChecked}
+        ${liveBoolean("checked", isChecked)}
         ?disabled=${isDisabled}
         ?required=${isRequired}
         @change=${(event) => onChange?.(event.target.checked)}

package/src/controls/combobox/handlers.js

@@ -46,6 +46,7 @@ export function open(entity) {
 /** @param {SelectEntity} entity */
 export function close(entity) {
   entity.isOpen = false
+  entity.searchTerm = ""
   entity.focusedIndex = NONE
 }
 
@@ -67,7 +68,7 @@ export function optionSelect(entity, option, api) {
   if (normalizedOption.isDisabled) return
   const optionValue = getOptionValue(normalizedOption)
 
-  if (normalizedOption.isCreated) {
+  if (normalizedOption.isCreated || entity.searchTerm) {
     entity.searchTerm = ""
     entity.focusedIndex = NONE
   }

package/src/controls/combobox/template.js

@@ -12,6 +12,7 @@ import { when } from "@inglorious/web/directives/when"
 
 import { Chip } from "../../data-display/chip/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 import { syncPopover } from "../../shared/top-layer.js"
 import {
   formatOption,
@@ -384,7 +385,8 @@ export const Combobox = {
         () =>
           html`<input
             type="checkbox"
-            .checked=${isSelected}
+            ?checked=${isSelected}
+            ${liveBoolean("checked", isSelected)}
             ?disabled=${!!normalized.isDisabled}
           />`,
       )}

package/src/controls/radio-group/template.js

@@ -9,6 +9,7 @@ import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 
 /**
  * Renders a group of radio options for single selection.
@@ -72,7 +73,8 @@ export function render(props) {
               type="radio"
               name=${groupName || nothing}
               value=${optionValue}
-              .checked=${value === optionValue}
+              ?checked=${value === optionValue}
+              ${liveBoolean("checked", value === optionValue)}
               ?disabled=${isDisabled || optionDisabled}
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}

package/src/controls/rating/template.js

@@ -6,6 +6,8 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
+import { liveBoolean } from "../../shared/live-boolean.js"
+
 const DEFAULT_VALUE = 0
 const DEFAULT_MAX = 5
 const INDEX_TO_RATING = 1
@@ -62,7 +64,8 @@ export function render(props) {
               name=${groupName || nothing}
               value=${ratingValue}
               aria-label=${`${ratingValue} of ${max}`}
-              .checked=${ratingValue === value}
+              ?checked=${ratingValue === value}
+              ${liveBoolean("checked", ratingValue === value)}
               @change=${() => onChange?.(ratingValue)}
             />
             <span aria-hidden="true">${isActive ? symbol : emptySymbol}</span>

package/src/controls/select/template.js

@@ -10,6 +10,7 @@ import { when } from "@inglorious/web/directives/when"
 
 import { Icon } from "../../data-display/icon/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
 /**
@@ -111,10 +112,6 @@ export const Select = {
       "iw-select-control-error": !!error,
     }
 
-    const selectedOption = options.find(
-      (option) => getOptionValue(option) === value,
-    )
-
     return html`<div class="iw-select-frame" @click=${openFromArrowStrip}>
       ${when(icon, () => Icon.render({ children: icon, size }))}
 
@@ -137,15 +134,11 @@ export const Select = {
           (option) => getOptionValue(option),
           (option) => {
             const {
-              value,
+              value: optionValue,
               label,
               isDisabled: isOptionDisabled,
             } = formatOption(option)
-            const isSelected = isOptionSelected(
-              option,
-              selectedOption?.value,
-              isMulti,
-            )
+            const isSelected = isOptionSelected(option, value, isMulti)
 
             const optionClasses = {
               "iw-select-option": true,
@@ -153,8 +146,9 @@ export const Select = {
             }
 
             return html`<option
-              value=${value}
-              .selected=${value === selectedOption?.value}
+              value=${optionValue}
+              ?selected=${isSelected}
+              ${liveBoolean("selected", isSelected)}
               ?disabled=${isOptionDisabled}
               class=${classMap(optionClasses)}
             >

package/src/controls/switch/template.js

@@ -9,6 +9,7 @@ import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 
 /**
  * Renders a toggle switch backed by a checkbox input, which `role="switch"`
@@ -49,7 +50,8 @@ export function render(props) {
         type="checkbox"
         role="switch"
         name=${name}
-        .checked=${isChecked}
+        ?checked=${isChecked}
+        ${liveBoolean("checked", isChecked)}
         ?disabled=${isDisabled}
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}

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

@@ -13,6 +13,7 @@
   color: var(--iw-badge-on-accent);
   font-size: var(--iw-font-size-xs, 0.75rem);
   line-height: 1;
+  white-space: nowrap;
 
   &.iw-badge-sm {
     --iw-badge-shape-size: 0.5rem;

package/src/shared/live-boolean.js

@@ -0,0 +1,17 @@
+import { ref } from "@inglorious/web/directives/ref"
+
+/**
+ * Keeps an element's `checked` or `selected` property in step with the state.
+ *
+ * A `.checked=${false}` binding can't be used instead: server rendering
+ * reflects it as `checked="false"`, which HTML reads as checked. Templates pair
+ * this with the boolean attribute (`?checked=${value}`), which renders right on
+ * the server but stops counting once the user has touched the control.
+ * @param {"checked" | "selected"} name
+ * @param {boolean} value
+ */
+export function liveBoolean(name, value) {
+  return ref((element) => {
+    if (element) element[name] = value
+  })
+}