@inglorious/ui 9.0.0 → 9.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.0.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": "11.1.7",
+    "@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/button.stories.js

@@ -32,7 +32,7 @@ export default {
     },
     size: {
       control: "select",
-      options: ["sm", "md", "lg"],
+      options: ["xs", "sm", "md", "lg"],
       description: "Size scale for paddings and font-size.",
     },
     shape: {
@@ -106,6 +106,12 @@ Ghost.args = {
   variant: "ghost",
 }
 
+export const ExtraSmall = {}
+ExtraSmall.args = {
+  ...Default.args,
+  size: "xs",
+}
+
 export const Small = {}
 Small.args = {
   ...Default.args,

package/src/controls/button/style.css

@@ -153,6 +153,11 @@
     cursor: not-allowed;
   }
 
+  &.iw-button-xs {
+    padding: var(--iw-space-0) var(--iw-space-2);
+    font-size: var(--iw-font-size-xs);
+  }
+
   &.iw-button-sm {
     padding: var(--iw-space-1) var(--iw-space-3);
     font-size: var(--iw-font-size-sm);
@@ -179,6 +184,12 @@
     border-radius: var(--iw-radius-sm);
   }
 
+  &.iw-button-xs.iw-button-shape-round,
+  &.iw-button-xs.iw-button-shape-square {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
   &.iw-button-sm.iw-button-shape-round,
   &.iw-button-sm.iw-button-shape-square {
     width: 2rem;

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

@@ -7,6 +7,10 @@ export default {
   render: createRender(Checkbox),
   argTypes: {
     label: { control: "text", description: "Label text." },
+    description: {
+      control: "text",
+      description: "A line of detail under the label.",
+    },
     name: { control: "text", description: "Native HTML name attribute." },
     isChecked: { control: "boolean", description: "Current checked state." },
     isDisabled: { control: "boolean", description: "Disables interaction." },
@@ -48,3 +52,11 @@ Checked.args = {
   ...Default.args,
   isChecked: true,
 }
+
+export const WithDescription = {}
+WithDescription.args = {
+  ...Default.args,
+  label: "Weekly summary",
+  name: "summary",
+  description: "An email every Monday with last week's totals.",
+}

package/src/controls/checkbox/style.css

@@ -14,6 +14,17 @@
     accent-color: var(--iw-checkbox-accent);
   }
 
+  /* With a description, the label and it stack beside the box. */
+  .iw-checkbox-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-checkbox-description {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+  }
+
   .iw-checkbox-label {
     font-size: var(--iw-font-size-base);
     line-height: var(--iw-line-height-normal);

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"
 
@@ -21,6 +22,7 @@ export function render(props) {
     type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
+    description,
     isChecked = false,
     isDisabled = false,
     isRequired = false,
@@ -54,7 +56,15 @@ export function render(props) {
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
-      <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/radio-group.stories.js

@@ -20,7 +20,11 @@ export default {
       description: "Semantic accent color.",
     },
     isDisabled: { control: "boolean", description: "Disables all options." },
-    options: { control: "object", description: "List of radio options." },
+    options: {
+      control: "object",
+      description:
+        "List of radio options: `label`, `value`, and an optional `description` under the label.",
+    },
     onChange: { action: "onChange" },
   },
   parameters: {
@@ -52,3 +56,19 @@ Row.args = {
   ...Default.args,
   direction: "row",
 }
+
+export const WithDescriptions = {}
+WithDescriptions.args = {
+  ...Default.args,
+  label: "Shipping",
+  name: "shipping",
+  value: "standard",
+  options: [
+    {
+      label: "Standard",
+      value: "standard",
+      description: "3 to 5 working days, free",
+    },
+    { label: "Express", value: "express", description: "Next day, €9" },
+  ],
+}

package/src/controls/radio-group/style.css

@@ -19,6 +19,17 @@
     cursor: pointer;
   }
 
+  /* With a description, the label and it stack beside the circle. */
+  .iw-radio-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-radio-description {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+  }
+
   .iw-radio {
     margin: 0;
     accent-color: var(--iw-radio-accent);

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,14 +48,14 @@ 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,
+          description: optionDescription,
           value: optionValue,
           isDisabled: optionDisabled = false,
           ...optionRest
@@ -73,7 +74,15 @@ export function render(props) {
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}
             />
-            <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/rating/rating.stories.js

@@ -8,6 +8,14 @@ export default {
   argTypes: {
     value: { control: "number", description: "Current rating value." },
     max: { control: "number", description: "Maximum rating value." },
+    name: {
+      control: "text",
+      description: "Groups the radios and names the value in a form.",
+    },
+    ariaLabel: {
+      control: "text",
+      description: 'Names the group for assistive tech. Defaults to "Rating".',
+    },
     isDisabled: { control: "boolean", description: "Disables interaction." },
     isReadOnly: {
       control: "boolean",

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

@@ -8,7 +8,11 @@ export default {
   argTypes: {
     label: { control: "text", description: "Field label." },
     name: { control: "text", description: "Native input name." },
-    value: { control: "number", description: "Current slider value." },
+    value: {
+      control: "object",
+      description:
+        "One number, or `[low, high]` for a range with a thumb at each end.",
+    },
     min: { control: "number", description: "Minimum value." },
     max: { control: "number", description: "Maximum value." },
     step: { control: "number", description: "Step value." },
@@ -20,6 +24,10 @@ export default {
     isDisabled: { control: "boolean", description: "Disables interaction." },
     isValueVisible: { control: "boolean", description: "Shows current value." },
     isFullWidth: { control: "boolean", description: "Expands width to 100%." },
+    hasMarks: {
+      control: "boolean",
+      description: "Draws a tick at every step.",
+    },
     onChange: { action: "onChange" },
   },
   parameters: {
@@ -44,3 +52,22 @@ Default.args = {
   isValueVisible: true,
   isFullWidth: false,
 }
+
+export const Range = {}
+Range.args = {
+  ...Default.args,
+  label: "Price",
+  name: "price",
+  value: [20, 80],
+}
+
+export const Marks = {}
+Marks.args = {
+  ...Default.args,
+  label: "Rating",
+  name: "rating",
+  value: 3,
+  min: 1,
+  max: 5,
+  hasMarks: true,
+}

package/src/controls/slider/style.css

@@ -23,6 +23,108 @@
     accent-color: var(--iw-slider-accent);
   }
 
+  /* A tick per step, under the track: their ends sit under the thumb's ends
+     of travel, half a thumb in from the track's. */
+  .iw-slider-marks {
+    display: flex;
+    justify-content: space-between;
+    padding-inline: calc(var(--iw-slider-thumb, 1rem) / 2);
+
+    span {
+      inline-size: 1px;
+      block-size: var(--iw-space-2);
+      background: var(--iw-color-border);
+    }
+  }
+
+  /* Two thumbs on one track. The inputs lie on top of each other with their
+     own tracks hidden, and only their thumbs take presses, so either can be
+     dragged; the track below is drawn here, filled between the two. */
+  &.iw-slider-range {
+    --iw-slider-thumb: 1rem;
+
+    .iw-slider-track {
+      position: relative;
+      block-size: var(--iw-slider-thumb);
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        inset-block-start: 50%;
+        block-size: 0.25rem;
+        translate: 0 -50%;
+        border-radius: var(--iw-radius-full, 999px);
+      }
+
+      &::before {
+        inset-inline: 0;
+        background: color-mix(
+          in srgb,
+          var(--iw-slider-accent) 25%,
+          transparent
+        );
+      }
+
+      &::after {
+        inset-inline-start: var(--iw-slider-low);
+        inset-inline-end: calc(100% - var(--iw-slider-high));
+        background: var(--iw-slider-accent);
+      }
+    }
+
+    .iw-slider-input {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      margin: 0;
+      appearance: none;
+      background: transparent;
+      pointer-events: none;
+
+      &::-webkit-slider-runnable-track {
+        background: transparent;
+      }
+
+      &::-moz-range-track {
+        background: transparent;
+      }
+
+      &::-webkit-slider-thumb {
+        appearance: none;
+        inline-size: var(--iw-slider-thumb);
+        block-size: var(--iw-slider-thumb);
+        border: 2px solid var(--iw-color-surface);
+        border-radius: 50%;
+        background: var(--iw-slider-accent);
+        box-shadow: var(--iw-shadow-sm);
+        cursor: pointer;
+        pointer-events: auto;
+      }
+
+      &::-moz-range-thumb {
+        inline-size: var(--iw-slider-thumb);
+        block-size: var(--iw-slider-thumb);
+        border: 2px solid var(--iw-color-surface);
+        border-radius: 50%;
+        background: var(--iw-slider-accent);
+        box-shadow: var(--iw-shadow-sm);
+        cursor: pointer;
+        pointer-events: auto;
+      }
+
+      &:focus-visible::-webkit-slider-thumb {
+        outline: 2px solid var(--iw-slider-accent);
+        outline-offset: 2px;
+      }
+
+      &:focus-visible::-moz-range-thumb {
+        outline: 2px solid var(--iw-slider-accent);
+        outline-offset: 2px;
+      }
+    }
+  }
+
   &.iw-slider-full-width {
     width: 100%;
   }