@robr0/design-system 0.13.0 → 0.15.0

package/components/HoverCard/HoverCard.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useId, useEffect } from "react";
+import "./HoverCard.css";
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+const HoverCard = React.forwardRef(
+  ({
+    children,
+    content,
+    position = "bottom",
+    showDelay = MOTION_HOVER_SHOW_DELAY_MS,
+    hideDelay = MOTION_HOVER_HIDE_DELAY_MS,
+    className = "",
+    ...rest
+  }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const showTimeoutRef = useRef(void 0);
+    const hideTimeoutRef = useRef(void 0);
+    const panelId = useId();
+    const baseClass = "ds-hover-card";
+    const show = () => {
+      clearTimeout(hideTimeoutRef.current);
+      showTimeoutRef.current = setTimeout(() => setVisible(true), showDelay);
+    };
+    const hide = () => {
+      clearTimeout(showTimeoutRef.current);
+      hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
+    };
+    useEffect(() => {
+      return () => {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+      };
+    }, []);
+    useEffect(() => {
+      if (!visible) return;
+      const onKeyDown = (e) => {
+        if (e.key === "Escape") {
+          clearTimeout(showTimeoutRef.current);
+          clearTimeout(hideTimeoutRef.current);
+          setVisible(false);
+        }
+      };
+      document.addEventListener("keydown", onKeyDown);
+      return () => document.removeEventListener("keydown", onKeyDown);
+    }, [visible]);
+    const handleBlur = (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        hide();
+      }
+    };
+    const trigger = React.isValidElement(children) ? React.cloneElement(children, {
+      "aria-expanded": visible,
+      "aria-controls": visible ? panelId : void 0
+    }) : children;
+    const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+    const panelClasses = [
+      `${baseClass}__panel`,
+      `${baseClass}__panel--${position}`,
+      visible ? `${baseClass}__panel--visible` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: containerClasses,
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: handleBlur,
+        children: [
+          trigger,
+          /* @__PURE__ */ jsx("span", { className: panelClasses, id: panelId, children: content })
+        ]
+      }
+    );
+  }
+);
+HoverCard.displayName = "HoverCard";
+export {
+  HoverCard
+};

package/components/ImageCompare/ImageCompare.css

@@ -0,0 +1,112 @@
+/* ============================================
+   IMAGE COMPARE COMPONENT
+   Before-and-after images behind one divider
+   ============================================ */
+
+.ds-image-compare {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  background-color: var(--color-bg-container-secondary);
+  /* pan-y keeps the page scrollable over the frame on touch; horizontal
+     drags stay with the slider. */
+  touch-action: pan-y;
+  user-select: none;
+  cursor: col-resize;
+}
+
+/* ============================================
+   IMAGES
+   ============================================ */
+
+.ds-image-compare__after,
+.ds-image-compare__before {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* The before layer sits on top at full frame size and is clipped to the
+   left of the divider. clip-path leaves the image's own geometry alone,
+   so the two layers stay pixel-aligned as the split moves. */
+.ds-image-compare__before-clip {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 calc(100% - var(--ds-image-compare-position, 50%)) 0 0);
+}
+
+/* ============================================
+   LABELS
+   ============================================ */
+
+.ds-image-compare__label {
+  position: absolute;
+  top: var(--gap-md);
+  z-index: 2;
+  padding: var(--padding-xxxs) var(--padding-sm);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-inverse);
+  color: var(--color-text-on-inverse);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  pointer-events: none;
+}
+
+.ds-image-compare__label--before {
+  left: var(--gap-md);
+}
+
+.ds-image-compare__label--after {
+  right: var(--gap-md);
+}
+
+/* ============================================
+   DIVIDER + HANDLE
+   ============================================ */
+
+.ds-image-compare__divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--ds-image-compare-position);
+  width: var(--border-md);
+  transform: translateX(-50%);
+  background-color: var(--color-bg-page-primary);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.ds-image-compare__handle {
+  position: absolute;
+  top: 50%;
+  left: var(--ds-image-compare-position);
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-page-primary);
+  color: var(--color-icon-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+  cursor: col-resize;
+}
+
+.ds-image-compare__handle .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-image-compare__handle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/ImageCompare/ImageCompare.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** Props owned by ImageCompare itself — everything else falls through to the root node. */
+type ImageCompareOwnProps = {
+    /** Source of the image revealed on the left of the divider */
+    beforeSrc: string;
+    /** Source of the image revealed on the right of the divider */
+    afterSrc: string;
+    /** Alt text for the before image */
+    beforeAlt: string;
+    /** Alt text for the after image */
+    afterAlt: string;
+    /** Corner label over the before side */
+    beforeLabel?: string;
+    /** Corner label over the after side */
+    afterLabel?: string;
+    /** Whether the corner labels render */
+    showLabels?: boolean;
+    /** Divider position as a percentage from the left (controlled) */
+    position?: number;
+    /** Initial divider position for uncontrolled use */
+    defaultPosition?: number;
+    /** Convenience callback receiving the divider position on every change */
+    onPositionChange?: (position: number) => void;
+    /** CSS aspect-ratio of the frame (both images are sized to cover it) */
+    aspectRatio?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ImageCompareProps extends ImageCompareOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ImageCompareOwnProps> {
+}
+/**
+ * Before-and-after comparison of two images sharing one frame. Dragging the
+ * divider (or clicking anywhere in the frame) sweeps the split; the handle is
+ * a `role="slider"` with arrow-key, Home/End and PageUp/PageDown control, so
+ * the comparison works without a pointer.
+ *
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const ImageCompare: React.ForwardRefExoticComponent<ImageCompareProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ImageCompare/ImageCompare.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import "./ImageCompare.css";
+import "../../fonts/material-symbols.css";
+const clamp = (n) => Math.max(0, Math.min(100, n));
+const ImageCompare = React.forwardRef(
+  ({
+    beforeSrc,
+    afterSrc,
+    beforeAlt,
+    afterAlt,
+    beforeLabel = "Before",
+    afterLabel = "After",
+    showLabels = true,
+    position,
+    defaultPosition = 50,
+    onPositionChange,
+    aspectRatio = "16 / 10",
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const [internalPosition, setInternalPosition] = useState(clamp(defaultPosition));
+    const [dragging, setDragging] = useState(false);
+    const frameRef = useRef(null);
+    const baseClass = "ds-image-compare";
+    const currentPosition = clamp(position ?? internalPosition);
+    const classes = [baseClass, dragging ? `${baseClass}--dragging` : "", className].filter(Boolean).join(" ");
+    const setRef = (node) => {
+      frameRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const setPosition = (next) => {
+      const resolved = clamp(next);
+      if (position === void 0) setInternalPosition(resolved);
+      onPositionChange?.(resolved);
+    };
+    const positionFromPointer = (clientX) => {
+      const frame = frameRef.current;
+      if (!frame) return;
+      const rect = frame.getBoundingClientRect();
+      if (rect.width === 0) return;
+      setPosition((clientX - rect.left) / rect.width * 100);
+    };
+    const handlePointerDown = (event) => {
+      if (event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setDragging(true);
+      positionFromPointer(event.clientX);
+    };
+    const handlePointerMove = (event) => {
+      if (!dragging) return;
+      positionFromPointer(event.clientX);
+    };
+    const endDrag = () => setDragging(false);
+    const handleKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = currentPosition + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = currentPosition - 1;
+          break;
+        case "PageUp":
+          next = currentPosition + 10;
+          break;
+        case "PageDown":
+          next = currentPosition - 10;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = 100;
+          break;
+      }
+      if (next !== null) {
+        event.preventDefault();
+        setPosition(next);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        style: {
+          ...style,
+          aspectRatio,
+          ["--ds-image-compare-position"]: `${currentPosition}%`
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        children: [
+          /* @__PURE__ */ jsx("img", { className: `${baseClass}__after`, src: afterSrc, alt: afterAlt, draggable: false }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__before-clip`, children: /* @__PURE__ */ jsx("img", { className: `${baseClass}__before`, src: beforeSrc, alt: beforeAlt, draggable: false }) }),
+          showLabels && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label ${baseClass}__label--before`, "aria-hidden": "true", children: beforeLabel }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label ${baseClass}__label--after`, "aria-hidden": "true", children: afterLabel })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__divider`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__handle`,
+              role: "slider",
+              tabIndex: 0,
+              "aria-label": `${beforeLabel} and ${afterLabel} comparison`,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": Math.round(currentPosition),
+              "aria-valuetext": `${Math.round(currentPosition)}% ${beforeLabel.toLowerCase()}`,
+              "aria-orientation": "horizontal",
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "drag_indicator" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageCompare.displayName = "ImageCompare";
+export {
+  ImageCompare
+};

package/components/LinkList/LinkList.d.ts

@@ -11,9 +11,11 @@ export interface LinkListItem {
     logoAlt?: string;
     /** Material Symbol name used when no logo is provided (e.g. "emoji_events") */
     icon?: string;
+    /** Open in a new tab. Defaults to true; set false for links inside the same site, which swaps the open_in_new indicator for arrow_forward. */
+    newTab?: boolean;
 }
 export interface LinkListProps {
-    /** Links to render, in display order — each opens in a new tab */
+    /** Links to render, in display order */
     items: LinkListItem[];
     /** Additional CSS classes */
     className?: string;

package/components/LinkList/LinkList.js

@@ -5,12 +5,13 @@ const LinkList = ({ items, className = "" }) => {
   const classes = ["ds-link-list", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: classes, children: items.map((item) => {
     const subs = item.sub ? Array.isArray(item.sub) ? item.sub : [item.sub] : [];
+    const newTab = item.newTab ?? true;
     return /* @__PURE__ */ jsxs(
       "a",
       {
         href: item.href,
-        target: "_blank",
-        rel: "noopener noreferrer",
+        target: newTab ? "_blank" : void 0,
+        rel: newTab ? "noopener noreferrer" : void 0,
         className: "ds-link-list__item",
         children: [
           /* @__PURE__ */ jsx("span", { className: "ds-link-list__icon-wrap", "aria-hidden": "true", children: item.logo ? /* @__PURE__ */ jsx(
@@ -26,7 +27,7 @@ const LinkList = ({ items, className = "" }) => {
           /* @__PURE__ */ jsxs("div", { className: "ds-link-list__content", children: [
             /* @__PURE__ */ jsxs("div", { className: "ds-link-list__title", children: [
               /* @__PURE__ */ jsx("span", { children: item.label }),
-              /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__open-icon", "aria-hidden": "true", children: "open_in_new" })
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__open-icon", "aria-hidden": "true", children: newTab ? "open_in_new" : "arrow_forward" })
             ] }),
             subs.map((s, i) => /* @__PURE__ */ jsx("span", { className: "ds-link-list__sub", children: s }, i))
           ] })

package/components/Meter/Meter.css

@@ -0,0 +1,98 @@
+/* ============================================
+   METER COMPONENT
+   Level indicator for a known quantity
+   ============================================ */
+
+.ds-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  width: 100%;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-meter__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gap-md);
+}
+
+.ds-meter__label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-meter__value {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  margin-left: auto;
+}
+
+/* ============================================
+   TRACK + FILL
+   ============================================ */
+
+.ds-meter__track {
+  width: 100%;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-tertiary);
+  overflow: hidden;
+}
+
+.ds-meter--compact .ds-meter__track {
+  height: 4px;
+}
+
+.ds-meter__fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--motion-duration-base) var(--motion-ease-standard);
+  /* Grows to the current level on mount — the single keyframe animates to
+     the inline width, and the duration token collapses under reduced motion. */
+  animation: ds-meter-grow var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-meter-grow {
+  from {
+    width: 0;
+  }
+}
+
+/* ============================================
+   STATUS VARIANTS
+   The strong border-weight status colour, not
+   the tinted bg — the fill is a thin ribbon
+   and needs the full-strength hue to read.
+   ============================================ */
+
+.ds-meter--info .ds-meter__fill {
+  background-color: var(--color-status-info-border);
+}
+
+.ds-meter--positive .ds-meter__fill {
+  background-color: var(--color-status-positive-border);
+}
+
+.ds-meter--warning .ds-meter__fill {
+  background-color: var(--color-status-warning-border);
+}
+
+.ds-meter--error .ds-meter__fill {
+  background-color: var(--color-status-error-border);
+}
+
+.ds-meter--neutral .ds-meter__fill {
+  background-color: var(--color-status-neutral-border);
+}

package/components/Meter/Meter.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Meter itself — everything else falls through to the root node. */
+type MeterOwnProps = {
+    /** Current level */
+    value?: number;
+    /** Lower bound of the range */
+    min?: number;
+    /** Upper bound of the range */
+    max?: number;
+    /** Visible label naming what is measured, doubling as the accessible name */
+    label?: string;
+    /** Shows the value readout on the trailing edge of the label row */
+    showValue?: boolean;
+    /** Readout override — replaces the default percentage, spoken via aria-valuetext */
+    valueText?: string;
+    /** Status role colouring the fill */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Component size (bar height) */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MeterProps extends MeterOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MeterOwnProps> {
+}
+/**
+ * Level indicator for a known quantity — storage used, tokens spent,
+ * password strength, battery left. The counterpart to ProgressBar, which
+ * shows a task moving toward completion; a Meter shows how full something
+ * is right now, and its status colour says whether that is good news.
+ *
+ * Purely presentational (no 'use client'), so it renders from a Server
+ * Component. Forwards a ref to the root element and spreads unrecognised
+ * props onto it.
+ */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Meter/Meter.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Meter.css";
+const Meter = React.forwardRef(
+  ({
+    value = 0,
+    min = 0,
+    max = 100,
+    label,
+    showValue = false,
+    valueText,
+    variant = "info",
+    size = "default",
+    className = "",
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-meter";
+    const range = max - min;
+    const fraction = range > 0 ? Math.max(0, Math.min(1, (value - min) / range)) : 0;
+    const percent = Math.round(fraction * 100);
+    const readout = valueText ?? `${percent}%`;
+    const classes = [baseClass, `${baseClass}--${variant}`, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+        showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: readout })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__track`,
+          role: "meter",
+          "aria-valuenow": value,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": valueText,
+          "aria-label": ariaLabel ?? label ?? "Level",
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__fill`, style: { width: `${fraction * 100}%` } })
+        }
+      )
+    ] });
+  }
+);
+Meter.displayName = "Meter";
+export {
+  Meter
+};

package/components/NotificationCenter/NotificationCenter.css

@@ -165,11 +165,16 @@
   padding: var(--padding-sm) var(--padding-sm-md);
 }
 
+/* The slot is a fixed column as wide as its largest medium — an sm Avatar
+   (32px, the --icon-size-lg rung) — with smaller media centred in it, so
+   every row's text starts on the same edge whether its medium is an avatar
+   or a bare icon. */
 .ds-notification-item__media {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
+  width: var(--icon-size-lg);
   color: var(--color-icon-primary);
 }
 
@@ -220,11 +225,14 @@
 }
 
 /* Unread dot — informational, so it takes the info status colour rather
-   than the action teal */
+   than the action teal, at the full-strength border weight for the same
+   reason Meter's fill does: a tint vanishes in a small mark. 8px because
+   a 4px dot is sub-perceptual at reading distance — the dot is the row's
+   one unmistakable unread signal, so it has to register at a glance. */
 .ds-notification-item__dot {
   flex: none;
-  width: var(--gap-xs);
-  height: var(--gap-xs);
+  width: var(--gap-sm);
+  height: var(--gap-sm);
   border-radius: var(--radius-full);
   background-color: var(--color-status-info-border);
 }

package/components/ProgressBar/ProgressBar.css

@@ -17,7 +17,7 @@
 .ds-progress-bar__track {
   flex: 1;
   height: 8px;
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-tertiary);
   border-radius: var(--radius-full);
   overflow: hidden;
 }