@inglorious/ui 6.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "6.0.0",
+  "version": "6.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",
@@ -38,6 +38,11 @@
     "./themes/inglorious.css": "./src/styles/themes/inglorious.css",
     "./themes/material.css": "./src/styles/themes/material.css",
     "./themes/bootstrap.css": "./src/styles/themes/bootstrap.css",
+    "./before-after": {
+      "types": "./types/data-display/before-after.d.ts",
+      "import": "./src/data-display/before-after/index.js"
+    },
+    "./before-after.css": "./src/data-display/before-after/style.css",
     "./button": {
       "types": "./types/controls/button.d.ts",
       "import": "./src/controls/button/index.js"
@@ -48,6 +53,11 @@
       "import": "./src/controls/button-group/index.js"
     },
     "./button-group.css": "./src/controls/button-group/style.css",
+    "./carousel": {
+      "types": "./types/data-display/carousel.d.ts",
+      "import": "./src/data-display/carousel/index.js"
+    },
+    "./carousel.css": "./src/data-display/carousel/style.css",
     "./checkbox": {
       "types": "./types/controls/checkbox.d.ts",
       "import": "./src/controls/checkbox/index.js"
@@ -280,28 +290,28 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "9.0.0",
+    "@inglorious/store": "11.0.0",
     "@inglorious/utils": "3.8.0",
-    "@inglorious/web": "6.3.0",
-    "@inglorious/store": "11.0.0"
+    "@inglorious/charts": "9.0.0",
+    "@inglorious/web": "6.3.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
     "@fortawesome/fontawesome-free": "^7.2.0",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/web-components-vite": "^10.3.3",
+    "@storybook/addon-docs": "^10.5.6",
+    "@storybook/web-components-vite": "^10.5.6",
     "happy-dom": "^15.11.0",
     "jsdom": "^25.0.0",
     "lucide": "^0.575.0",
     "prettier": "^3.6.2",
-    "storybook": "^10.3.3",
+    "storybook": "^10.5.6",
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
-    "@inglorious/vite-plugin-jsx": "2.0.0",
+    "@inglorious/eslint-config": "1.1.2",
     "@inglorious/vite-plugin-vue": "1.0.1",
+    "@inglorious/vite-plugin-jsx": "2.0.0",
     "@inglorious/store": "11.0.0",
-    "@inglorious/web": "6.3.0",
-    "@inglorious/eslint-config": "1.1.2"
+    "@inglorious/web": "6.3.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/controls.css

@@ -1,7 +1,7 @@
-@import "./combobox/style.css";
 @import "./button/style.css";
 @import "./button-group/style.css";
 @import "./checkbox/style.css";
+@import "./combobox/style.css";
 @import "./fab/style.css";
 @import "./icon-button/style.css";
 @import "./input/style.css";

package/src/data-display/before-after/before-after.stories.js

@@ -0,0 +1,74 @@
+import {
+  createEntityRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { BeforeAfter } from "./index.js"
+
+const before = {
+  src: "https://picsum.photos/id/1015/800/500?grayscale",
+  alt: "Before",
+}
+const after = {
+  src: "https://picsum.photos/id/1015/800/500",
+  alt: "After",
+}
+
+export default {
+  title: "Data Display/BeforeAfter",
+  tags: ["autodocs"],
+  render: createEntityRender({ BeforeAfter }),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Accessible label for the slider." },
+    position: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "Divider position as a percentage (0-100).",
+    },
+    step: {
+      control: "number",
+      description: "Keyboard increment (percent) for arrow keys.",
+    },
+    isDisabled: { control: "boolean", description: "Disable interaction." },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expand to container width.",
+    },
+    before: { control: "object", description: "Before image { src, alt }." },
+    after: { control: "object", description: "After image { src, alt }." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Before/after image comparison slider. The reveal is pure CSS (clip-path); the divider position is the only piece of entity state. Drag anywhere, or focus and use arrow keys / Home / End.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  id: "before-after",
+  type: "BeforeAfter",
+  label: "Before and after comparison",
+  position: 50,
+  step: 1,
+  isDisabled: false,
+  isFullWidth: true,
+  before,
+  after,
+}
+
+export const StartLeft = {}
+StartLeft.args = {
+  ...Default.args,
+  id: "before-after-left",
+  position: 15,
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  id: "before-after-disabled",
+  isDisabled: true,
+}

package/src/data-display/before-after/handlers.js

@@ -0,0 +1,44 @@
+/**
+ * @typedef {import('../../../types/data-display/before-after.js').BeforeAfterProps} BeforeAfterEntity
+ */
+
+import { clamp } from "@inglorious/utils/math/numbers.js"
+
+import {
+  DEFAULT_POSITION,
+  DEFAULT_STEP,
+  MAX_POSITION,
+  MIN_POSITION,
+} from "./helpers.js"
+
+/**
+ * Initialize missing before/after state defaults.
+ * The only persistent piece of state is `position`: the divider location as a
+ * percentage (0-100). Everything else is configuration.
+ * @param {BeforeAfterEntity} entity
+ */
+export function create(entity) {
+  entity.position ??= DEFAULT_POSITION
+  entity.step ??= DEFAULT_STEP
+
+  entity.before ??= null
+  entity.after ??= null
+
+  entity.label ??= ""
+  entity.isDisabled ??= false
+  entity.isFullWidth ??= false
+}
+
+/**
+ * Move the divider to a new position, clamped to the 0-100 range.
+ * @param {BeforeAfterEntity} entity
+ * @param {number} position
+ */
+export function positionChange(entity, position) {
+  if (entity.isDisabled) return
+
+  const value = Number(position)
+  if (Number.isNaN(value)) return
+
+  entity.position = clamp(value, MIN_POSITION, MAX_POSITION)
+}

package/src/data-display/before-after/helpers.js

@@ -0,0 +1,4 @@
+export const DEFAULT_POSITION = 50
+export const DEFAULT_STEP = 1
+export const MIN_POSITION = 0
+export const MAX_POSITION = 100

package/src/data-display/before-after/index.js

@@ -0,0 +1,17 @@
+import * as handlers from "./handlers.js"
+import { BeforeAfter as renderers } from "./template.js"
+
+export const BeforeAfter = {
+  ...handlers,
+  ...renderers,
+  render(entity, api) {
+    const id = entity.id
+    const props = {
+      ...entity,
+      onPositionChange: (position) =>
+        api.notify(`#${id}:positionChange`, position),
+    }
+
+    return this.renderBeforeAfter(props)
+  },
+}

package/src/data-display/before-after/style.css

@@ -0,0 +1,128 @@
+.iw-before-after {
+  --iw-before-after-position: 50%;
+
+  /* Neutral in every theme on purpose: the divider should separate the two
+     pictures without competing with them for attention. */
+  --iw-before-after-divider-width: 2px;
+  --iw-before-after-divider-color: rgb(255 255 255 / 90%);
+  --iw-before-after-handle-size: 40px;
+  --iw-before-after-handle-bg: rgb(255 255 255 / 90%);
+  --iw-before-after-handle-color: rgb(17 24 39 / 65%);
+  --iw-before-after-handle-arrow: 5px;
+
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  cursor: ew-resize;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--iw-color-primary);
+    outline-offset: 2px;
+  }
+
+  &.iw-before-after-full-width {
+    display: block;
+    width: 100%;
+  }
+
+  /* Greyed out and dimmed, so it reads as "you cannot move this". */
+  &.iw-before-after-disabled {
+    --iw-before-after-divider-color: rgb(156 163 175 / 60%);
+    --iw-before-after-handle-bg: rgb(156 163 175 / 60%);
+    --iw-before-after-handle-color: rgb(255 255 255 / 60%);
+
+    cursor: default;
+
+    .iw-before-after-image {
+      filter: grayscale(70%);
+      opacity: 0.75;
+    }
+
+    .iw-before-after-handle {
+      box-shadow: none;
+    }
+  }
+
+  .iw-before-after-before {
+    display: block;
+  }
+
+  .iw-before-after-before .iw-before-after-image {
+    width: 100%;
+    height: auto;
+  }
+
+  .iw-before-after-after {
+    position: absolute;
+    inset: 0;
+    clip-path: inset(0 0 0 var(--iw-before-after-position));
+  }
+
+  .iw-before-after-after .iw-before-after-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .iw-before-after-image {
+    display: block;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+
+  .iw-before-after-divider {
+    position: absolute;
+    inset-block: 0;
+    left: var(--iw-before-after-position);
+    width: var(--iw-before-after-divider-width);
+    transform: translateX(-50%);
+    background: var(--iw-before-after-divider-color);
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
+    pointer-events: none;
+  }
+
+  .iw-before-after-handle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--iw-before-after-handle-size);
+    height: var(--iw-before-after-handle-size);
+    border-radius: var(--iw-radius-full);
+    background: var(--iw-before-after-handle-bg);
+    transform: translate(-50%, -50%);
+    box-shadow: var(--iw-shadow-md);
+  }
+
+  /* Two chevron arrows drawn with borders, no icon font needed. */
+  .iw-before-after-handle::before,
+  .iw-before-after-handle::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: var(--iw-before-after-handle-arrow) solid transparent;
+    border-bottom: var(--iw-before-after-handle-arrow) solid transparent;
+  }
+
+  .iw-before-after-handle::before {
+    margin-right: var(--iw-before-after-handle-arrow);
+    border-right: var(--iw-before-after-handle-arrow) solid
+      var(--iw-before-after-handle-color);
+  }
+
+  .iw-before-after-handle::after {
+    margin-left: var(--iw-before-after-handle-arrow);
+    border-left: var(--iw-before-after-handle-arrow) solid
+      var(--iw-before-after-handle-color);
+  }
+}

package/src/data-display/before-after/template.js

@@ -0,0 +1,225 @@
+/**
+ * @typedef {import('../../../types/data-display/before-after.js').BeforeAfterProps} BeforeAfterProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { clamp } from "@inglorious/utils/math/numbers.js"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+
+import {
+  DEFAULT_POSITION,
+  DEFAULT_STEP,
+  MAX_POSITION,
+  MIN_POSITION,
+} from "./helpers.js"
+
+const PRIMARY_BUTTON = 1
+
+export const BeforeAfter = {
+  /**
+   * Main entrypoint for the before/after template. It delegates to the base renderer so overrides can still reuse it.
+   * Before/after overlays two images and reveals the top one with a draggable divider.
+   * @param {BeforeAfterProps} props The before/after props.
+   * @returns {TemplateResult} The rendered control.
+   */
+  render(props) {
+    return this.renderBeforeAfter(props)
+  },
+
+  /**
+   * Renders the container and wires the pointer and keyboard interactions.
+   * This is the canonical renderer that custom `render()` overrides should call.
+   * @param {BeforeAfterProps} props The before/after props.
+   * @returns {TemplateResult} The rendered control.
+   */
+  renderBeforeAfter(props) {
+    const {
+      label,
+      position = DEFAULT_POSITION,
+      isDisabled = false,
+      isFullWidth = false,
+    } = props
+
+    const classes = {
+      "iw-before-after": true,
+      "iw-before-after-full-width": isFullWidth,
+      "iw-before-after-disabled": isDisabled,
+    }
+
+    return html`<div
+      class=${classMap(classes)}
+      style="--iw-before-after-position: ${position}%;"
+      role="slider"
+      tabindex=${isDisabled ? -1 : 0}
+      aria-label=${label || "Before and after comparison"}
+      aria-orientation="horizontal"
+      aria-valuemin=${MIN_POSITION}
+      aria-valuemax=${MAX_POSITION}
+      aria-valuenow=${Math.round(position)}
+      aria-disabled=${isDisabled}
+      @pointerdown=${handlePointerDown(props)}
+      @pointermove=${handlePointerMove(props)}
+      @pointerup=${handlePointerUp}
+      @pointercancel=${handlePointerUp}
+      @keydown=${handleKeyDown(props)}
+    >
+      ${this.renderBefore?.(props)} ${this.renderAfter?.(props)}
+      ${this.renderDivider?.(props)}
+    </div>`
+  },
+
+  /**
+   * Renders the bottom layer, fully visible underneath the clipped one.
+   * It also gives the control its intrinsic size.
+   * @param {BeforeAfterProps} props The before/after props.
+   * @returns {TemplateResult} The rendered layer.
+   */
+  renderBefore(props) {
+    return html`<div class="iw-before-after-item iw-before-after-before">
+      <img
+        class="iw-before-after-image"
+        src=${props.before?.src ?? ""}
+        alt=${props.before?.alt ?? ""}
+        draggable="false"
+      />
+    </div>`
+  },
+
+  /**
+   * Renders the top layer, clipped to the current divider position through CSS.
+   * @param {BeforeAfterProps} props The before/after props.
+   * @returns {TemplateResult} The rendered layer.
+   */
+  renderAfter(props) {
+    return html`<div class="iw-before-after-item iw-before-after-after">
+      <img
+        class="iw-before-after-image"
+        src=${props.after?.src ?? ""}
+        alt=${props.after?.alt ?? ""}
+        draggable="false"
+      />
+    </div>`
+  },
+
+  /**
+   * Renders the vertical bar sitting on the seam between the two layers.
+   * Override this to change the separator, or drop the handle entirely.
+   * @param {BeforeAfterProps} props The before/after props.
+   * @returns {TemplateResult} The rendered divider.
+   */
+  renderDivider(props) {
+    return html`<div class="iw-before-after-divider" aria-hidden="true">
+      ${this.renderHandle?.(props)}
+    </div>`
+  },
+
+  /**
+   * Renders the grip shown at the centre of the divider.
+   * Override this to supply a custom handle.
+   * @returns {TemplateResult} The rendered handle.
+   */
+  renderHandle() {
+    return html`<div class="iw-before-after-handle"></div>`
+  },
+}
+
+/**
+ * Start dragging: capture the pointer so moves keep tracking outside the box.
+ * @param {BeforeAfterProps} props
+ * @returns {(event: PointerEvent) => void}
+ */
+function handlePointerDown(props) {
+  return (event) => {
+    if (props.isDisabled) return
+
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+    move(props, event)
+  }
+}
+
+/**
+ * Track the divider while the primary button or contact is held down.
+ * @param {BeforeAfterProps} props
+ * @returns {(event: PointerEvent) => void}
+ */
+function handlePointerMove(props) {
+  return (event) => {
+    if (props.isDisabled) return
+    if (!(event.buttons & PRIMARY_BUTTON)) return
+
+    move(props, event)
+  }
+}
+
+/**
+ * Stop dragging.
+ * @param {PointerEvent} event
+ */
+function handlePointerUp(event) {
+  event.currentTarget.releasePointerCapture?.(event.pointerId)
+}
+
+/**
+ * Move the divider with the arrow keys, or jump to either edge.
+ * @param {BeforeAfterProps} props
+ * @returns {(event: KeyboardEvent) => void}
+ */
+function handleKeyDown(props) {
+  return (event) => {
+    if (props.isDisabled) return
+
+    const position = props.position ?? DEFAULT_POSITION
+    const step = props.step ?? DEFAULT_STEP
+
+    let next
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = position - step
+        break
+      case "ArrowRight":
+      case "ArrowUp":
+        next = position + step
+        break
+      case "Home":
+        next = MIN_POSITION
+        break
+      case "End":
+        next = MAX_POSITION
+        break
+      default:
+        return
+    }
+
+    event.preventDefault()
+    props.onPositionChange?.(clamp(next, MIN_POSITION, MAX_POSITION))
+  }
+}
+
+/**
+ * Report the divider position under the pointer.
+ * @param {BeforeAfterProps} props
+ * @param {PointerEvent} event
+ */
+function move(props, event) {
+  const position = positionFromEvent(event)
+  if (position != null) props.onPositionChange?.(position)
+}
+
+/**
+ * Convert a pointer event into a divider position (0-100) relative to the
+ * element the listener is attached to. Null when it has no measurable width.
+ * @param {PointerEvent} event
+ * @returns {number | null}
+ */
+function positionFromEvent(event) {
+  const rect = event.currentTarget.getBoundingClientRect()
+  if (!rect.width) return null
+
+  return clamp(
+    ((event.clientX - rect.left) / rect.width) * 100,
+    MIN_POSITION,
+    MAX_POSITION,
+  )
+}