@inglorious/ui 9.9.0 → 9.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.9.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",
@@ -211,6 +211,31 @@
       "import": "./src/feedback/backdrop/index.js"
     },
     "./backdrop.css": "./src/feedback/backdrop/style.css",
+    "./chip-picker": {
+      "types": "./types/controls/chip-picker.d.ts",
+      "import": "./src/controls/chip-picker/index.js"
+    },
+    "./chip-picker.css": "./src/controls/chip-picker/style.css",
+    "./confirm-dialog": {
+      "types": "./types/feedback/confirm-dialog.d.ts",
+      "import": "./src/feedback/confirm-dialog/index.js"
+    },
+    "./confirm-dialog.css": "./src/feedback/confirm-dialog/style.css",
+    "./crop-dialog": {
+      "types": "./types/feedback/crop-dialog.d.ts",
+      "import": "./src/feedback/crop-dialog/index.js"
+    },
+    "./crop-dialog.css": "./src/feedback/crop-dialog/style.css",
+    "./lightbox": {
+      "types": "./types/data-display/lightbox.d.ts",
+      "import": "./src/data-display/lightbox/index.js"
+    },
+    "./lightbox.css": "./src/data-display/lightbox/style.css",
+    "./load-status": {
+      "types": "./types/feedback/load-status.d.ts",
+      "import": "./src/feedback/load-status/index.js"
+    },
+    "./load-status.css": "./src/feedback/load-status/style.css",
     "./dialog": {
       "types": "./types/feedback/dialog.d.ts",
       "import": "./src/feedback/dialog/index.js"
@@ -316,7 +341,7 @@
   "peerDependencies": {
     "@inglorious/store": "^12.1.1",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.13.1"
+    "@inglorious/web": "^6.14.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
@@ -328,7 +353,8 @@
     "@inglorious/store": "12.1.1",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.13.1",
+    "@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/chip-picker/chip-picker.stories.js

@@ -0,0 +1,22 @@
+import { createRender } from "../../stories/notify-story.js"
+import { ChipPicker } from "."
+
+export default {
+  title: "Controls/ChipPicker",
+  tags: ["autodocs"],
+  render: createRender(ChipPicker),
+  argTypes: { onToggle: { action: "onToggle" } },
+}
+
+export const Default = {
+  args: {
+    label: "What do you do?",
+    hint: "Pick as many as you like.",
+    options: [
+      { value: "photographer", label: "Photographer" },
+      { value: "videographer", label: "Videographer" },
+      { value: "dj", label: "DJ" },
+    ],
+    value: ["videographer"],
+  },
+}

package/src/controls/chip-picker/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const ChipPicker = { ...renderers }

package/src/controls/chip-picker/style.css

@@ -0,0 +1,26 @@
+.iw-chip-picker {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.iw-chip-picker-legend {
+  padding: 0;
+  margin-bottom: var(--iw-space-2);
+  font-size: var(--iw-font-size-sm);
+  font-weight: var(--iw-font-weight-medium);
+  color: var(--iw-color-text);
+}
+
+.iw-chip-picker-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--iw-space-2);
+}
+
+.iw-chip-picker-hint {
+  margin: var(--iw-space-2) 0 0;
+  font-size: var(--iw-font-size-xs);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}

package/src/controls/chip-picker/template.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef {import('../../../types/controls/chip-picker').ChipPickerProps} ChipPickerProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
+
+import { Chip } from "../../data-display/chip/index.js"
+import { formatOption } from "../combobox/helpers.js"
+
+/**
+ * Renders a group of toggle chips for picking several options, as a fieldset
+ * whose legend is `label`.
+ * @param {ChipPickerProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    label,
+    hint,
+    options = [],
+    value = [],
+    isDisabled = false,
+    className = "",
+    onToggle,
+  } = props
+
+  return html`<fieldset
+    class=${["iw-chip-picker", className].filter(Boolean).join(" ")}
+  >
+    ${when(
+      label,
+      () => html`<legend class="iw-chip-picker-legend">${label}</legend>`,
+    )}
+    <div class="iw-chip-picker-chips">
+      ${options.map((option) => {
+        const {
+          value: optionValue,
+          label: optionLabel,
+          ...rest
+        } = formatOption(option)
+        return Chip.render({
+          children: optionLabel,
+          isSelected: value.includes(optionValue),
+          isDisabled: isDisabled || Boolean(rest.isDisabled),
+          onClick: () => onToggle?.(optionValue),
+        })
+      })}
+    </div>
+    ${when(hint, () => html`<p class="iw-chip-picker-hint">${hint}</p>`)}
+  </fieldset>`
+}

package/src/controls/combobox/handlers.js

@@ -5,6 +5,8 @@
 
 import { formatOption, getOptionValue, visibleOptions } from "./helpers.js"
 
+const NONE = -1
+
 /**
  * Initialize missing select state defaults.
  * @param {SelectEntity} entity
@@ -16,7 +18,7 @@ export function create(entity) {
 
   entity.isOpen ??= false
   entity.searchTerm ??= ""
-  entity.focusedIndex ??= -1
+  entity.focusedIndex ??= NONE
 
   entity.isMulti ??= false
   entity.selectedValue ??= entity.isMulti ? [] : null
@@ -38,15 +40,14 @@ export function create(entity) {
 export function open(entity) {
   if (entity.isDisabled) return
   entity.isOpen = true
-
-  const filtered = visibleOptions(entity)
-  entity.focusedIndex = filtered.length ? 0 : -1
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function close(entity) {
   entity.isOpen = false
-  entity.focusedIndex = -1
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
 }
 
 /** @param {SelectEntity} entity */
@@ -60,15 +61,16 @@ export function toggle(entity) {
  * @param {SelectEntity} entity
  * @param {SelectOption} option
  */
-export function optionSelect(entity, option) {
+export function optionSelect(entity, option, api) {
   if (entity.isDisabled) return
 
   const normalizedOption = formatOption(option)
+  if (normalizedOption.isDisabled) return
   const optionValue = getOptionValue(normalizedOption)
 
-  if (normalizedOption.isCreated) {
+  if (normalizedOption.isCreated || entity.searchTerm) {
     entity.searchTerm = ""
-    entity.focusedIndex = -1
+    entity.focusedIndex = NONE
   }
 
   if (entity.isMulti) {
@@ -84,17 +86,24 @@ export function optionSelect(entity, option) {
     }
 
     entity.selectedValue = values
+    notifyChange(entity, api)
     return
   }
 
   entity.selectedValue = optionValue
   close(entity)
+  notifyChange(entity, api)
 }
 
-/** @param {SelectEntity} entity */
-export function clear(entity) {
+/**
+ * @param {SelectEntity} entity
+ * @param {unknown} _payload
+ * @param {import('@inglorious/web').Api} [api]
+ */
+export function clear(entity, _payload, api) {
   if (entity.isDisabled) return
   entity.selectedValue = entity.isMulti ? [] : null
+  notifyChange(entity, api)
 }
 
 /**
@@ -103,32 +112,36 @@ export function clear(entity) {
  */
 export function searchChange(entity, searchTerm) {
   entity.searchTerm = searchTerm
-  const filtered = visibleOptions(entity)
-  entity.focusedIndex = filtered.length ? 0 : -1
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function focusNext(entity) {
-  const filtered = visibleOptions(entity)
-  if (!filtered.length) return
-  entity.focusedIndex = Math.min(entity.focusedIndex + 1, filtered.length - 1)
+  const next = enabledIndex(visibleOptions(entity), entity.focusedIndex + 1, 1)
+  if (next !== NONE) entity.focusedIndex = next
 }
 
-/** @param {SelectEntity} entity */
+/**
+ * Before the first enabled option, focus goes back to the search box.
+ * @param {SelectEntity} entity
+ */
 export function focusPrev(entity) {
-  entity.focusedIndex = Math.max(entity.focusedIndex - 1, -1)
+  entity.focusedIndex = enabledIndex(
+    visibleOptions(entity),
+    entity.focusedIndex - 1,
+    -1,
+  )
 }
 
 /** @param {SelectEntity} entity */
 export function focusFirst(entity) {
-  const filtered = visibleOptions(entity)
-  if (filtered.length) entity.focusedIndex = 0
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function focusLast(entity) {
   const filtered = visibleOptions(entity)
-  if (filtered.length) entity.focusedIndex = filtered.length - 1
+  entity.focusedIndex = enabledIndex(filtered, filtered.length - 1, -1)
 }
 
 /**
@@ -139,3 +152,53 @@ export function focusLast(entity) {
 export function focusSet(entity, index) {
   entity.focusedIndex = Number.isInteger(index) ? index : entity.focusedIndex
 }
+
+/**
+ * Sets the value from outside, such as a form being filled with saved data.
+ * An empty string, as an empty form field holds, is no value. Unlike a
+ * choice, it does not notify `changeEvent`.
+ * @param {SelectEntity} entity
+ * @param {string | number | (string | number)[] | null} value
+ */
+export function valueSet(entity, value) {
+  if (entity.isMulti) entity.selectedValue = [...(value ?? [])]
+  else entity.selectedValue = value === "" ? null : (value ?? null)
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
+}
+
+/**
+ * Replaces the options, such as when they depend on another field.
+ * @param {SelectEntity} entity
+ * @param {SelectOption[]} options
+ */
+export function optionsSet(entity, options) {
+  entity.options = (options ?? []).map(formatOption)
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
+}
+
+/**
+ * Shows a validation message. The combobox is its own entity, so the form
+ * that validates it hands the message over.
+ * @param {SelectEntity} entity
+ * @param {string | null} error
+ */
+export function errorSet(entity, error) {
+  entity.error = error ?? null
+}
+
+function notifyChange(entity, api) {
+  if (!entity.changeEvent || !api) return
+  const value = entity.isMulti
+    ? [...entity.selectedValue]
+    : entity.selectedValue
+  api.notify(entity.changeEvent, { ...entity.changePayload, value })
+}
+
+function enabledIndex(options, start, step) {
+  for (let index = start; index >= 0 && index < options.length; index += step) {
+    if (!formatOption(options[index]).isDisabled) return index
+  }
+  return 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/controls.css

@@ -1,8 +1,10 @@
-@import "./button/style.css";
 @import "./button-group/style.css";
+@import "./button/style.css";
 @import "./checkbox/style.css";
+@import "./chip-picker/style.css";
 @import "./combobox/style.css";
 @import "./fab/style.css";
+@import "./file-upload/style.css";
 @import "./icon-button/style.css";
 @import "./image-cropper/style.css";
 @import "./input/style.css";
@@ -12,4 +14,3 @@
 @import "./slider/style.css";
 @import "./switch/style.css";
 @import "./textarea/style.css";
-@import "./file-upload/style.css";

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/data-display/data-display.css

@@ -7,6 +7,7 @@
 @import "./data-grid/style.css";
 @import "./divider/style.css";
 @import "./icon/style.css";
+@import "./lightbox/style.css";
 @import "./list/style.css";
 @import "./table/style.css";
 @import "./tooltip/style.css";

package/src/data-display/lightbox/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const Lightbox = { ...renderers }

package/src/data-display/lightbox/lightbox.stories.js

@@ -0,0 +1,25 @@
+import { createRender } from "../../stories/notify-story.js"
+import { Lightbox } from "."
+
+export default {
+  title: "Data Display/Lightbox",
+  tags: ["autodocs"],
+  render: createRender(Lightbox),
+  argTypes: {
+    index: { control: "number" },
+    onStep: { action: "onStep" },
+    onClose: { action: "onClose" },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    index: 0,
+    images: [
+      "https://picsum.photos/id/1011/1200/800",
+      "https://picsum.photos/id/1015/1200/800",
+      "https://picsum.photos/id/1016/800/1200",
+    ],
+  },
+}

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

@@ -0,0 +1,97 @@
+.iw-lightbox {
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: var(--iw-space-4);
+  border: none;
+  background: #0c0c0c;
+  color: #fff;
+
+  &[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::backdrop {
+    background: #0c0c0c;
+  }
+
+  .iw-button.iw-lightbox-close {
+    position: absolute;
+    top: calc(var(--iw-space-3) + var(--safe-area-top, 0px));
+    inset-inline-end: var(--iw-space-3);
+    z-index: 1;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: color-mix(in srgb, #fff 14%, transparent);
+    color: #fff;
+
+    &:hover {
+      background: color-mix(in srgb, #fff 24%, transparent);
+    }
+  }
+
+  .iw-button.iw-lightbox-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: color-mix(in srgb, #000 45%, transparent);
+    color: #fff;
+
+    &:hover {
+      background: color-mix(in srgb, #000 62%, transparent);
+    }
+
+    &:dir(rtl) .iw-icon {
+      scale: -1 1;
+    }
+  }
+}
+
+.iw-lightbox-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: min(100%, 56rem);
+  height: min(100%, 90dvh);
+  user-select: none;
+  touch-action: pan-y;
+}
+
+.iw-lightbox-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--iw-radius-xl);
+  pointer-events: none;
+}
+
+.iw-lightbox-previous {
+  inset-inline-start: var(--iw-space-2);
+}
+
+.iw-lightbox-next {
+  inset-inline-end: var(--iw-space-2);
+}
+
+.iw-lightbox-counter {
+  position: absolute;
+  inset-inline-end: var(--iw-space-3);
+  bottom: var(--iw-space-2);
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, #000 50%, transparent);
+  color: #fff;
+  font-size: var(--iw-font-size-xs);
+  font-variant-numeric: tabular-nums;
+}