@inglorious/ui 8.6.0 → 9.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.6.0",
+  "version": "9.1.0",
   "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.0.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

@@ -35,8 +35,8 @@ export function render(props) {
     isPressed = false,
     isFullWidth = false,
     buttonType = "button",
-    ariaLabel = "",
-    isAriaPressed = false,
+    ariaLabel,
+    isAriaPressed,
     className = "",
     accept,
     isMultiple = false,
@@ -74,8 +74,8 @@ export function render(props) {
   return html`
     <button
       type=${buttonType}
-      aria-label=${ariaLabel}
-      aria-pressed=${isAriaPressed}
+      aria-label=${ariaLabel || nothing}
+      aria-pressed=${isAriaPressed ?? nothing}
       class=${classMap(classes)}
       ?disabled=${isDisabled}
       @click=${handleClick}

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

@@ -21,6 +21,7 @@ export function render(props) {
     type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
+    description,
     isChecked = false,
     isDisabled = false,
     isRequired = false,
@@ -54,7 +55,14 @@ export function render(props) {
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
-      <span class="iw-checkbox-label">${label}</span>
+      ${
+        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/combobox/style.css

@@ -5,7 +5,8 @@
   flex-direction: column;
   gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
-  position: relative; /* required for dropdown positioning */
+  /* Each combobox anchors its own dropdown to its own frame. */
+  anchor-scope: --iw-combobox;
 
   &.iw-combobox-full-width {
     width: 100%;
@@ -38,6 +39,7 @@
   }
 
   .iw-combobox-frame {
+    anchor-name: --iw-combobox;
     display: flex;
     align-items: center;
     /* The gap spaces the text from the arrow, as it does for Input's icons. */
@@ -182,12 +184,17 @@
     }
   }
 
+  /* A popover in the top layer, placed under the frame and as wide as it,
+     flipping above when there is no room below. The browser's popover box
+     is centred in the viewport, so its insets, margin and colours are reset. */
   .iw-combobox-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: 1000;
+    position-anchor: --iw-combobox;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    inset: auto;
+    width: anchor-size(width);
+    padding: 0;
+    color: var(--iw-color-text);
     display: flex;
     flex-direction: column;
     max-height: 16rem;
@@ -198,7 +205,7 @@
     border-start-end-radius: 0;
     background: var(--iw-color-bg);
     box-shadow: var(--iw-shadow-lg);
-    margin-top: -1px;
+    margin: -1px 0 0;
 
     .iw-combobox-dropdown-search {
       width: 100%;

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 { syncPopover } from "../../shared/top-layer.js"
 import {
   filterOptions,
   formatOption,
@@ -263,7 +264,12 @@ export const Combobox = {
 
   /**
    * Renders the dropdown panel that contains search input, options, and empty/loading states.
-   * Shown only when the combobox is open.
+   * Shown only when the combobox is open, as a popover in the top layer so no
+   * container can clip it, anchored under the control by CSS.
+   *
+   * A manual popover: the control that opens it is not a button, so it cannot
+   * be the popover's invoker, and a light dismiss would close the dropdown on
+   * the very press that toggles it. Outside presses and Esc are handled here.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -276,7 +282,11 @@ export const Combobox = {
       id=${id ? `${id}-control-listbox` : nothing}
       class="iw-combobox-dropdown"
       role="listbox"
-      ${ref((el) => trackOutsideClick(props, el))}
+      popover="manual"
+      ${ref((el) => {
+        syncPopover(el, { isOpen: true })
+        trackOutsideClick(props, el)
+      })}
     >
       ${when(isSearchable, () => this.renderSearchInput?.(props))}
       ${when(isLoading, () => this.renderLoading?.(props))}

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

@@ -55,6 +55,7 @@ export function render(props) {
       ${options.map((option, index) => {
         const {
           label: optionLabel,
+          description: optionDescription,
           value: optionValue,
           isDisabled: optionDisabled = false,
           ...optionRest
@@ -73,7 +74,16 @@ export function render(props) {
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}
             />
-            <span>${optionLabel}</span>
+            ${
+              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/rating/style.css

@@ -1,17 +1,39 @@
+/* A fieldset of native radios: the inputs stay in the page for the keyboard
+   and assistive tech but out of sight, and each star is the label that
+   checks its radio. */
 .iw-rating {
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-1);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-inline-size: 0;
 
   .iw-rating-item {
-    border: 0;
-    background: transparent;
-    padding: 0;
-    margin: 0;
+    position: relative;
     cursor: pointer;
     color: var(--iw-color-warning);
     font-size: 1.25rem;
     line-height: 1;
+    border-radius: var(--iw-radius-sm);
+  }
+
+  .iw-rating-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .iw-rating-item:has(.iw-rating-input:focus-visible) {
+    outline: 2px solid var(--iw-color-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled .iw-rating-item {
+    cursor: default;
   }
 
   &.iw-rating-sm .iw-rating-item {

package/src/controls/rating/template.js

@@ -3,7 +3,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
 const DEFAULT_VALUE = 0
@@ -12,12 +12,16 @@ const INDEX_TO_RATING = 1
 
 /**
  * Renders a star (or custom symbol) rating control.
+ * Each star is a native radio, so the arrow keys move between them, the group
+ * is announced as one choice, and the value submits with a form under `name`.
  * Supports max value, read-only/disabled states, and emits selection changes.
  * @param {RatingProps} props
  * @returns {TemplateResult}
  */
 export function render(props) {
   const {
+    id,
+    name,
     value = DEFAULT_VALUE,
     max = DEFAULT_MAX,
     isDisabled = false,
@@ -25,9 +29,14 @@ export function render(props) {
     symbol = "★",
     emptySymbol = "☆",
     size = "md",
+    ariaLabel = "Rating",
     onChange,
   } = props
 
+  // Radios are a group by sharing a name: without one, the arrow keys do not
+  // move between the stars.
+  const groupName = name || id
+
   const classes = {
     "iw-rating": true,
     [`iw-rating-${size}`]: size !== "md",
@@ -36,22 +45,30 @@ export function render(props) {
   }
 
   return html`
-    <div class=${classMap(classes)} role="radiogroup" aria-label="rating">
+    <fieldset
+      id=${id || nothing}
+      class=${classMap(classes)}
+      aria-label=${ariaLabel}
+      ?disabled=${isDisabled || isReadOnly}
+    >
       ${Array.from({ length: max }, (_, index) => {
         const ratingValue = index + INDEX_TO_RATING
         const isActive = ratingValue <= value
         return html`
-          <button
-            type="button"
-            class="iw-rating-item"
-            aria-label=${`rate-${ratingValue}`}
-            ?disabled=${isDisabled || isReadOnly}
-            @click=${() => onChange?.(ratingValue)}
-          >
-            ${isActive ? symbol : emptySymbol}
-          </button>
+          <label class="iw-rating-item">
+            <input
+              class="iw-rating-input"
+              type="radio"
+              name=${groupName || nothing}
+              value=${ratingValue}
+              aria-label=${`${ratingValue} of ${max}`}
+              .checked=${ratingValue === value}
+              @change=${() => onChange?.(ratingValue)}
+            />
+            <span aria-hidden="true">${isActive ? symbol : emptySymbol}</span>
+          </label>
         `
       })}
-    </div>
+    </fieldset>
   `
 }

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%;
   }