@jirawatpyk/aura-react 4.8.0 → 4.10.0

package/dist/esm/SideNav.js

@@ -1,35 +1,141 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, useMaybeControlled } from "./internal.js";
-import { useStrings } from "./locale.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useLinkComponent, useStrings } from "./locale.js";
+function contains(it, id) {
+  return !!id && !!it.children && it.children.some(function(c) {
+    return c.id === id || contains(c, id);
+  });
+}
 const SideNav = React.forwardRef(function SideNav2(props, ref) {
   const t = useStrings();
+  const Link = useLinkComponent(props.linkComponent);
+  const base = uid();
   const st = useMaybeControlled(
     props.value,
     props.defaultValue,
     props.onChange
   );
-  function item(it) {
-    const on = st[0] === it.id;
-    const inner = [
+  const active = st[0];
+  const sections = props.sections || [{ items: props.items || [] }];
+  const openState = React.useState({}), toggled = openState[0], setToggled = openState[1];
+  function isOpen(it) {
+    if (toggled[it.id] != null) return toggled[it.id];
+    return !!it.defaultOpen || contains(it, active);
+  }
+  React.useEffect(
+    function() {
+      if (!active) return;
+      const next = {};
+      let changed = false;
+      sections.forEach(function(s) {
+        (function walk(list) {
+          list.forEach(function(it) {
+            if (it.children) {
+              if (contains(it, active) && toggled[it.id] !== true) {
+                next[it.id] = true;
+                changed = true;
+              }
+              walk(it.children);
+            }
+          });
+        })(s.items);
+      });
+      if (changed) setToggled(Object.assign({}, toggled, next));
+    },
+    [active]
+  );
+  const navRef = React.useRef(null);
+  function onKeyDown(e) {
+    const k = e.key;
+    if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
+    const root = navRef.current;
+    if (!root) return;
+    const items = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
+    const visible = items.filter(function(el) {
+      return el.offsetParent !== null || el === document.activeElement;
+    });
+    const i = visible.indexOf(document.activeElement);
+    if (i < 0) return;
+    e.preventDefault();
+    const j = k === "Home" ? 0 : k === "End" ? visible.length - 1 : Math.max(0, Math.min(visible.length - 1, i + (k === "ArrowDown" ? 1 : -1)));
+    visible[j].focus();
+  }
+  function inner(it, group, open) {
+    return [
       it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : null,
       /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
-      it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
+      it.badge != null ? /* @__PURE__ */ React.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
+      it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
+      group ? /* @__PURE__ */ React.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
     ];
+  }
+  function item(it, depth) {
+    if (it.children) {
+      const open = isOpen(it);
+      const listId = base + "-" + it.id;
+      const holdsActive = contains(it, active);
+      return /* @__PURE__ */ React.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: cx("aura-nav__item", "aura-nav__item--group", holdsActive && "has-active"),
+          "aria-expanded": open,
+          "aria-controls": listId,
+          style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
+          onClick: function() {
+            const next = Object.assign({}, toggled);
+            next[it.id] = !open;
+            setToggled(next);
+          },
+          onKeyDown: function(e) {
+            if (e.key === "ArrowRight" && !open) {
+              e.preventDefault();
+              setToggled(Object.assign({}, toggled, { [it.id]: true }));
+            } else if (e.key === "ArrowLeft" && open) {
+              e.preventDefault();
+              setToggled(Object.assign({}, toggled, { [it.id]: false }));
+            }
+          }
+        },
+        inner(it, true, open)
+      ), /* @__PURE__ */ React.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
+        return item(c, depth + 1);
+      })));
+    }
+    const on = active === it.id;
     const common = {
       className: cx("aura-nav__item", on && "is-active"),
       "aria-current": on ? "page" : void 0,
+      style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
       onClick: function(e) {
         if (!it.href) e.preventDefault();
         st[1](it.id);
       }
     };
-    return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
+    return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, ...common }, inner(it, false, false)) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner(it, false, false)));
   }
-  return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
-    return /* @__PURE__ */ React.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
-  })), props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref: function(el) {
+        navRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      className: cx("aura-nav", props.className),
+      "aria-label": props.label || t.mainNav,
+      onKeyDown
+    },
+    props.header ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__header" }, props.header) : null,
+    /* @__PURE__ */ React.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
+      return /* @__PURE__ */ React.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React.createElement("ul", { className: "aura-nav__list" }, s.items.map(function(it) {
+        return item(it, 0);
+      })));
+    })),
+    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
+  );
 });
 export {
   SideNav

package/dist/esm/Stat.js

@@ -2,12 +2,16 @@
 import * as React from "react";
 import { cx } from "./internal.js";
 import { Icon } from "./Icon.js";
+import { useLinkComponent } from "./locale.js";
 const Stat = React.forwardRef(function Stat2(props, ref) {
   const ch = props.change;
   const dir = ch && (ch.direction || "flat");
   const tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
-  const Tag = props.href ? "a" : props.onClick ? "button" : "div";
-  const interactive = Tag !== "div";
+  const Link = useLinkComponent();
+  const v = props.value;
+  const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
+  const Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const interactive = !!(props.href || props.onClick);
   return /* @__PURE__ */ React.createElement(
     Tag,
     {
@@ -19,7 +23,7 @@ const Stat = React.forwardRef(function Stat2(props, ref) {
       "aria-busy": props.loading || void 0
     },
     /* @__PURE__ */ React.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
-    props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
     ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
   );
 });

package/dist/esm/Stepper.js

@@ -0,0 +1,54 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Stepper = React.forwardRef(function Stepper2(props, ref) {
+  const t = useStrings();
+  const steps = props.steps || [];
+  let at = -1;
+  steps.forEach(function(s, i) {
+    if (s.id === props.current) at = i;
+  });
+  if (at < 0) at = 0;
+  const vertical = props.orientation === "vertical";
+  const cur = steps[at];
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": props.label,
+      className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
+    },
+    /* @__PURE__ */ React.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
+      const state = i < at ? "done" : i === at ? "current" : "upcoming";
+      const marker = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React.createElement(Icon, { name: "check" }) : i + 1);
+      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+      const clickable = state === "done" && !!props.onStepClick;
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: s.id,
+          className: cx("aura-stepper__item", "is-" + state),
+          "aria-current": state === "current" ? "step" : void 0
+        },
+        clickable ? /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "aura-stepper__step aura-focusable",
+            onClick: function() {
+              props.onStepClick(s.id);
+            }
+          },
+          marker,
+          text
+        ) : /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__step" }, marker, text)
+      );
+    })),
+    !vertical && cur ? /* @__PURE__ */ React.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+  );
+});
+export {
+  Stepper
+};

package/dist/esm/colorScheme.js

@@ -15,7 +15,14 @@ function colorSchemeScript(options) {
   return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
 }
 function ColorSchemeScript(props) {
-  return /* @__PURE__ */ React.createElement("script", { "data-aura-color-scheme": "", dangerouslySetInnerHTML: { __html: colorSchemeScript(props) } });
+  return /* @__PURE__ */ React.createElement(
+    "script",
+    {
+      "data-aura-color-scheme": "",
+      nonce: props.nonce,
+      dangerouslySetInnerHTML: { __html: colorSchemeScript(props) }
+    }
+  );
 }
 function systemDark() {
   return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

package/dist/esm/index.js

@@ -45,6 +45,9 @@ import { EmptyState } from "./EmptyState.js";
 import { Pagination } from "./Pagination.js";
 import { Accordion } from "./Accordion.js";
 import { Popover } from "./Popover.js";
+import { NumberField } from "./NumberField.js";
+import { Stepper } from "./Stepper.js";
+import { SegmentedControl } from "./SegmentedControl.js";
 export {
   Accordion,
   Alert,
@@ -75,17 +78,20 @@ export {
   Icon,
   IconButton,
   Menu,
+  NumberField,
   Pagination,
   Popover,
   Progress,
   RadioGroup,
   STRINGS,
+  SegmentedControl,
   Select,
   SideNav,
   Skeleton,
   Stack,
   Stat,
   StatusPill,
+  Stepper,
   Surface,
   Switch,
   Tabs,

package/dist/esm/locale.js

@@ -3,6 +3,9 @@ import * as React from "react";
 const n = function(x) {
   return Number(x).toLocaleString("en");
 };
+const nsv = function(x) {
+  return Number(x).toLocaleString("sv-SE");
+};
 const STRINGS = {
   en: {
     close: "Close",
@@ -83,6 +86,12 @@ const STRINGS = {
       return "Up to " + n2 + " files";
     },
     colorScheme: "Colour scheme",
+    increase: "Increase",
+    decrease: "Decrease",
+    stepDone: "completed",
+    stepOf: function(i, total) {
+      return "Step " + i + " of " + total;
+    },
     schemeLight: "Light",
     schemeDark: "Dark",
     schemeSystem: "System",
@@ -175,6 +184,12 @@ const STRINGS = {
       return "\u0E41\u0E19\u0E1A\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + n2 + " \u0E44\u0E1F\u0E25\u0E4C";
     },
     colorScheme: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E35",
+    increase: "\u0E40\u0E1E\u0E34\u0E48\u0E21",
+    decrease: "\u0E25\u0E14",
+    stepDone: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
+    stepOf: function(i, total) {
+      return "\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 " + i + " \u0E08\u0E32\u0E01 " + total;
+    },
     schemeLight: "\u0E2A\u0E27\u0E48\u0E32\u0E07",
     schemeDark: "\u0E21\u0E37\u0E14",
     schemeSystem: "\u0E15\u0E32\u0E21\u0E23\u0E30\u0E1A\u0E1A",
@@ -187,6 +202,104 @@ const STRINGS = {
     accepts: function(list, max) {
       return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
     }
+  },
+  sv: {
+    close: "St\xE4ng",
+    dismiss: "St\xE4ng",
+    dismissToast: "St\xE4ng aviseringen",
+    notifications: "Aviseringar",
+    mainNav: "Huvudmeny",
+    breadcrumb: "Br\xF6dsmulor",
+    navigation: "Navigering",
+    openNav: "\xD6ppna menyn",
+    searching: "S\xF6ker\u2026",
+    noMatches: "Inga tr\xE4ffar",
+    clear: function(what) {
+      return "Rensa " + (what || "urvalet");
+    },
+    keepTyping: function(total) {
+      return "Skriv mer f\xF6r att begr\xE4nsa " + nsv(total) + " alternativ";
+    },
+    sortAsc: "Sortera stigande",
+    sortDesc: "Sortera fallande",
+    pin: "F\xE4st till v\xE4nster",
+    unpin: "Lossa kolumnen",
+    moveLeft: "Flytta v\xE4nster",
+    moveRight: "Flytta h\xF6ger",
+    hideColumn: "D\xF6lj kolumnen",
+    resetColumns: "\xC5terst\xE4ll kolumner",
+    selectRows: "V\xE4lj rader",
+    selectAllRows: "V\xE4lj alla rader",
+    deselectAllRows: "Avmarkera alla rader",
+    selectAll: "V\xE4lj alla",
+    selectRow: function(k) {
+      return "V\xE4lj " + k;
+    },
+    selectedCount: function(c) {
+      return nsv(c) + " valda";
+    },
+    pinned: "F\xE4st",
+    columnOptions: function(label) {
+      return "Alternativ f\xF6r kolumnen " + label;
+    },
+    column: function(label) {
+      return label ? "Kolumnen " + label : "Kolumn";
+    },
+    columns: "Kolumner",
+    showHideColumns: "Visa eller d\xF6lj kolumner",
+    empty: "Inget h\xE4r \xE4nnu",
+    loading: "Laddar\u2026",
+    loadingRows: "Laddar rader",
+    range: function(a, b, total) {
+      return a + "\u2013" + b + " av " + nsv(total);
+    },
+    page: function(p, total) {
+      return "Sida " + p + " av " + total;
+    },
+    prevPage: "F\xF6reg\xE5ende sida",
+    nextPage: "N\xE4sta sida",
+    rowCount: function(c) {
+      return nsv(c) + " rader";
+    },
+    actions: "\xC5tg\xE4rder",
+    optional: "valfritt",
+    timePlaceholder: "tt:mm",
+    timeInvalid: "Skriv en tid som 09:30",
+    timeOutOfRange: function(a, b) {
+      return "V\xE4lj en tid mellan " + a + " och " + b;
+    },
+    dropFiles: "Dra filer hit eller",
+    browse: "V\xE4lj filer",
+    browseOne: "V\xE4lj en fil",
+    remove: function(n2) {
+      return "Ta bort " + n2;
+    },
+    fileTooBig: function(max) {
+      return "St\xF6rre \xE4n " + max;
+    },
+    fileWrongType: "Den h\xE4r filtypen godtas inte",
+    tooManyFiles: function(n2) {
+      return "H\xF6gst " + n2 + " filer";
+    },
+    colorScheme: "F\xE4rgl\xE4ge",
+    increase: "\xD6ka",
+    decrease: "Minska",
+    stepDone: "klart",
+    stepOf: function(i, total) {
+      return "Steg " + i + " av " + total;
+    },
+    schemeLight: "Ljust",
+    schemeDark: "M\xF6rkt",
+    schemeSystem: "System",
+    uploading: "Laddar upp\u2026",
+    images: "Bilder",
+    pagination: "Sidnumrering",
+    pageN: function(p) {
+      return "Sida " + p;
+    },
+    accepts: function(list, max) {
+      return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
+    }
   }
 };
 const LocaleContext = React.createContext(null);
@@ -197,16 +310,21 @@ function AuraProvider(props) {
       return {
         locale: props.locale || "en",
         calendar: props.calendar || null,
-        strings: props.strings ? Object.assign({}, base, props.strings) : base
+        strings: props.strings ? Object.assign({}, base, props.strings) : base,
+        linkComponent: props.linkComponent || null
       };
     },
-    [props.locale, props.calendar, props.strings]
+    [props.locale, props.calendar, props.strings, props.linkComponent]
   );
   return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.children);
 }
 function useAuraLocale() {
   return React.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
 }
+function useLinkComponent(own) {
+  const ctx = React.useContext(LocaleContext);
+  return own || ctx && ctx.linkComponent || "a";
+}
 function useStrings() {
   return useAuraLocale().strings;
 }
@@ -214,5 +332,6 @@ export {
   AuraProvider,
   STRINGS,
   useAuraLocale,
+  useLinkComponent,
   useStrings
 };

package/dist/esm/theme.js

@@ -105,6 +105,20 @@ function fit(hex, grounds, target, dir) {
   }
   return c;
 }
+function atLuminance(hex, Y) {
+  const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
+  let lo = 0, hi = 1, c = hex;
+  for (let i = 0; i < 30; i++) {
+    const mid = (lo + hi) / 2;
+    c = oklchToHex(mid, C, o[2]);
+    if (luminance(c) < Y) lo = mid;
+    else hi = mid;
+  }
+  return c;
+}
+const CHART_Y = { light: 0.075, dark: 0.46 };
+const SEQ_Y = { light: [0.26, 0.165, 0.1, 0.055, 0.028], dark: [0.14, 0.22, 0.34, 0.5, 0.7] };
+const CHART_2 = "#0a8b7a";
 const ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
 const INK = "#18181b";
 function createTheme(opts) {
@@ -123,6 +137,14 @@ function createTheme(opts) {
   L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
   L["alert-info-border"] = b[200];
   L["mesh-from"] = b[400];
+  L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
+  D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
+  SEQ_Y.light.forEach(function(y, i) {
+    L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
+  });
+  SEQ_Y.dark.forEach(function(y, i) {
+    D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
+  });
   D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
   D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
   D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
@@ -182,6 +204,19 @@ function createTheme(opts) {
     check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
     check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
   });
+  [
+    ["light", ZINC[0], L],
+    ["light", ZINC[50], L],
+    ["dark", ZINC[900], D],
+    ["dark", ZINC[950], D]
+  ].forEach(function(g) {
+    const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
+    ["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
+      check(t, k, name, 3, m[k], ground);
+    });
+  });
+  check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
+  check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);