@likec4/core 1.9.0 → 1.10.1

package/dist/index.mjs

@@ -1,8 +1,10 @@
-import { u, e, n as nonNullable, D as DefaultElementShape, a as DefaultThemeColor } from './shared/core.DfUTsojZ.mjs';
-export { A as AsFqn, B as BorderStyles, J as DefaultArrowType, I as DefaultLineStyle, K as DefaultRelationshipColor, E as ElementShapes, c as Expr, U as StepEdgeId, W as extractStep, Z as getBBoxCenter, i as invariant, F as isAndOperator, X as isComputedDynamicView, Y as isComputedElementView, g as isCustomElement, w as isCustomRelationExpr, Q as isDynamicView, P as isDynamicViewIncludeRule, l as isElement, j as isElementKindExpr, o as isElementPredicateExpr, d as isElementRef, k as isElementTagExpr, R as isElementView, m as isElementWhere, f as isExpandedElementExpr, S as isExtendsElementView, q as isInOut, r as isIncoming, z as isKindEqual, C as isNotOperator, G as isOrOperator, s as isOutgoing, p as isRelation, t as isRelationExpression, x as isRelationPredicateExpr, v as isRelationWhere, T as isScopedElementView, V as isStepEdgeId, y as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, h as isWildcard, b as nonexhaustive, H as whereOperatorAsPredicate } from './shared/core.DfUTsojZ.mjs';
+import { u, e, n as nonNullable, D as DefaultElementShape, a as DefaultThemeColor } from './shared/core.DeifT5lC.mjs';
+export { A as AsFqn, B as BorderStyles, J as DefaultArrowType, I as DefaultLineStyle, K as DefaultRelationshipColor, E as ElementShapes, c as Expr, V as StepEdgeId, X as extractStep, $ as getBBoxCenter, Y as getParallelStepsPrefix, i as invariant, F as isAndOperator, Z as isComputedDynamicView, _ as isComputedElementView, g as isCustomElement, w as isCustomRelationExpr, R as isDynamicView, P as isDynamicViewIncludeRule, Q as isDynamicViewParallelSteps, l as isElement, j as isElementKindExpr, o as isElementPredicateExpr, d as isElementRef, k as isElementTagExpr, S as isElementView, m as isElementWhere, f as isExpandedElementExpr, T as isExtendsElementView, q as isInOut, r as isIncoming, z as isKindEqual, C as isNotOperator, G as isOrOperator, s as isOutgoing, p as isRelation, t as isRelationExpression, x as isRelationPredicateExpr, v as isRelationWhere, U as isScopedElementView, W as isStepEdgeId, y as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, h as isWildcard, b as nonexhaustive, H as whereOperatorAsPredicate } from './shared/core.DeifT5lC.mjs';
+
+const { min: min$4, max: max$4 } = Math;
 
 const limit = (x, low = 0, high = 1) => {
-    return min$3(max$3(low, x), high);
+    return min$4(max$4(low, x), high);
 };
 
 const clip_rgb = (rgb) => {
@@ -123,7 +125,7 @@ class Color {
 }
 
 // this gets updated automatically
-const version = '3.0.0';
+const version = '3.1.1';
 
 const chroma = (...args) => {
     return new Color(...args);
@@ -2604,6 +2606,72 @@ const contrast = (a, b) => {
     return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
 };
 
+/**
+ * @license
+ *
+ * The APCA contrast prediction algorithm is based of the formulas published
+ * in the APCA-1.0.98G specification by Myndex. The specification is available at:
+ * https://raw.githubusercontent.com/Myndex/apca-w3/master/images/APCAw3_0.1.17_APCA0.0.98G.svg
+ *
+ * Note that the APCA implementation is still beta, so please update to
+ * future versions of chroma.js when they become available.
+ *
+ * You can read more about the APCA Readability Criterion at
+ * https://readtech.org/ARC/
+ */
+
+// constants
+const W_offset = 0.027;
+const P_in = 0.0005;
+const P_out = 0.1;
+const R_scale = 1.14;
+const B_threshold = 0.022;
+const B_exp = 1.414;
+
+const contrastAPCA = (text, bg) => {
+    // parse input colors
+    text = new Color(text);
+    bg = new Color(bg);
+    // if text color has alpha, blend against background
+    if (text.alpha() < 1) {
+        text = mix(bg, text, text.alpha(), 'rgb');
+    }
+    const l_text = lum(...text.rgb());
+    const l_bg = lum(...bg.rgb());
+
+    // soft clamp black levels
+    const Y_text =
+        l_text >= B_threshold
+            ? l_text
+            : l_text + Math.pow(B_threshold - l_text, B_exp);
+    const Y_bg =
+        l_bg >= B_threshold ? l_bg : l_bg + Math.pow(B_threshold - l_bg, B_exp);
+
+    // normal polarity (dark text on light background)
+    const S_norm = Math.pow(Y_bg, 0.56) - Math.pow(Y_text, 0.57);
+    // reverse polarity (light text on dark background)
+    const S_rev = Math.pow(Y_bg, 0.65) - Math.pow(Y_text, 0.62);
+    // clamp noise then scale
+    const C =
+        Math.abs(Y_bg - Y_text) < P_in
+            ? 0
+            : Y_text < Y_bg
+              ? S_norm * R_scale
+              : S_rev * R_scale;
+    // clamp minimum contrast then offset
+    const S_apc = Math.abs(C) < P_out ? 0 : C > 0 ? C - W_offset : C + W_offset;
+    // scale to 100
+    return S_apc * 100;
+};
+
+function lum(r, g, b) {
+    return (
+        0.2126729 * Math.pow(r / 255, 2.4) +
+        0.7151522 * Math.pow(g / 255, 2.4) +
+        0.072175 * Math.pow(b / 255, 2.4)
+    );
+}
+
 const { sqrt, pow, min, max: max$1, atan2, abs, cos, sin, exp, PI } = Math;
 
 function deltaE (a, b, Kl = 1, Kc = 1, Kh = 1) {
@@ -2766,10 +2834,24 @@ const colorbrewer = {
     Pastel1: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2']
 };
 
-// add lowercase aliases for case-insensitive matches
-for (let key of Object.keys(colorbrewer)) {
-    colorbrewer[key.toLowerCase()] = colorbrewer[key];
-}
+const colorbrewerTypes = Object.keys(colorbrewer);
+const typeMap = new Map(colorbrewerTypes.map((key) => [key.toLowerCase(), key]));
+
+// use Proxy to allow case-insensitive access to palettes
+const colorbrewerProxy =
+    typeof Proxy === 'function'
+        ? new Proxy(colorbrewer, {
+              get(target, prop) {
+                  const lower = prop.toLowerCase();
+                  if (typeMap.has(lower)) {
+                      return target[typeMap.get(lower)];
+                  }
+              },
+              getOwnPropertyNames() {
+                  return Object.getOwnPropertyNames(colorbrewerTypes);
+              }
+          })
+        : colorbrewer;
 
 const cmyk2rgb = (...args) => {
     args = unpack(args, 'cmyk');
@@ -2874,7 +2956,7 @@ const lch2css = (...args) => {
     let mode = last(args) || 'lab';
     lcha[0] = rnd2(lcha[0]) + '%';
     lcha[1] = rnd2(lcha[1]);
-    lcha[2] = rnd2(lcha[2]) + 'deg'; // add deg unit to hue
+    lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
     if (mode === 'lcha' || (lcha.length > 3 && lcha[3] < 1)) {
         lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
     } else {
@@ -2883,7 +2965,7 @@ const lch2css = (...args) => {
     return `lch(${lcha.join(' ')})`;
 };
 
-const oklab2css$1 = (...args) => {
+const oklab2css = (...args) => {
     const laba = unpack(args, 'lab');
     laba[0] = rnd2(laba[0] * 100) + '%';
     laba[1] = rnd3(laba[1]);
@@ -2903,17 +2985,17 @@ const rgb2oklch = (...args) => {
     return [L, c, h, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
 };
 
-const oklab2css = (...args) => {
-    const laba = unpack(args, 'lab');
-    laba[0] = rnd2(laba[0] * 100) + '%';
-    laba[1] = rnd3(laba[1]);
-    laba[2] = rnd2(laba[2]) + 'deg';
-    if (laba.length > 3 && laba[3] < 1) {
-        laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
+const oklch2css = (...args) => {
+    const lcha = unpack(args, 'lch');
+    lcha[0] = rnd2(lcha[0] * 100) + '%';
+    lcha[1] = rnd3(lcha[1]);
+    lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
+    if (lcha.length > 3 && lcha[3] < 1) {
+        lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
     } else {
-        laba.length = 3;
+        lcha.length = 3;
     }
-    return `oklch(${laba.join(' ')})`;
+    return `oklch(${lcha.join(' ')})`;
 };
 
 const { round: round$2 } = Math;
@@ -2949,10 +3031,10 @@ const rgb2css = (...args) => {
         return cssColor;
     }
     if (mode.substr(0, 5) === 'oklab') {
-        return oklab2css$1(rgb2oklab(rgba));
+        return oklab2css(rgb2oklab(rgba));
     }
     if (mode.substr(0, 5) === 'oklch') {
-        return oklab2css(rgb2oklch(rgba));
+        return oklch2css(rgb2oklch(rgba));
     }
     rgba[0] = round$2(rgba[0]);
     rgba[1] = round$2(rgba[1]);
@@ -2972,42 +3054,75 @@ const oklch2rgb = (...args) => {
     return [r, g, b, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
 };
 
-const RE_RGB = /^rgb\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\)$/;
-const RE_RGB_LEGACY = /^rgb\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*\)$/;
-
-const RE_RGBA =
-    /^rgba?\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\/\s*([01]|[01]?\.\d+)\)$/;
-const RE_RGBA_LEGACY =
-    /^rgba\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*([01]|[01]?\.\d+)\)$/;
-
-const RE_RGB_PCT =
-    /^rgb\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
-const RE_RGB_PCT_LEGACY =
-    /^rgb\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
-
-const RE_RGBA_PCT =
-    /^rgba?\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
-const RE_RGBA_PCT_LEGACY =
-    /^rgba\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
-
-const RE_HSL =
-    /^hsl\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
-const RE_HSL_LEGACY =
-    /^hsl\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
+const INT_OR_PCT = /((?:-?\d+)|(?:-?\d+(?:\.\d+)?)%|none)/.source;
+const FLOAT_OR_PCT = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)%?)|none)/.source;
+const PCT = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)%)|none)/.source;
+const RE_S = /\s*/.source;
+const SEP = /\s+/.source;
+const COMMA = /\s*,\s*/.source;
+const ANLGE = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)(?:deg)?)|none)/.source;
+const ALPHA = /\s*(?:\/\s*((?:[01]|[01]?\.\d+)|\d+(?:\.\d+)?%))?/.source;
+
+// e.g. rgb(250 20 0), rgb(100% 50% 20%), rgb(100% 50% 20% / 0.5)
+const RE_RGB = new RegExp(
+    '^rgba?\\(' +
+        RE_S +
+        [INT_OR_PCT, INT_OR_PCT, INT_OR_PCT].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_RGB_LEGACY = new RegExp(
+    '^rgb\\(' +
+        RE_S +
+        [INT_OR_PCT, INT_OR_PCT, INT_OR_PCT].join(COMMA) +
+        RE_S +
+        '\\)$'
+);
+const RE_RGBA_LEGACY = new RegExp(
+    '^rgba\\(' +
+        RE_S +
+        [INT_OR_PCT, INT_OR_PCT, INT_OR_PCT, FLOAT_OR_PCT].join(COMMA) +
+        RE_S +
+        '\\)$'
+);
 
-const RE_HSLA =
-    /^hsla?\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
+const RE_HSL = new RegExp(
+    '^hsla?\\(' + RE_S + [ANLGE, PCT, PCT].join(SEP) + ALPHA + '\\)$'
+);
+const RE_HSL_LEGACY = new RegExp(
+    '^hsl?\\(' + RE_S + [ANLGE, PCT, PCT].join(COMMA) + RE_S + '\\)$'
+);
 const RE_HSLA_LEGACY =
     /^hsla\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
 
-const RE_LAB =
-    /^lab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
-const RE_LCH =
-    /^lch\(\s*(-?\d+(?:\.\d+)?%?) \s*((?:-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
-const RE_OKLAB =
-    /^oklab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
-const RE_OKLCH =
-    /^oklch\(\s*(-?\d+(?:\.\d+)?%?) \s*(?:(-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
+const RE_LAB = new RegExp(
+    '^lab\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, FLOAT_OR_PCT].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_LCH = new RegExp(
+    '^lch\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, ANLGE].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_OKLAB = new RegExp(
+    '^oklab\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, FLOAT_OR_PCT].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_OKLCH = new RegExp(
+    '^oklch\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, ANLGE].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
 
 const { round: round$1 } = Math;
 
@@ -3034,6 +3149,11 @@ const noneToValue = (v, noneValue) => {
 
 const css2rgb = (css) => {
     css = css.toLowerCase().trim();
+
+    if (css === 'transparent') {
+        return [0, 0, 0, 0];
+    }
+
     let m;
 
     if (input.format.named) {
@@ -3045,58 +3165,39 @@ const css2rgb = (css) => {
 
     // rgb(250 20 0) or rgb(250,20,0)
     if ((m = css.match(RE_RGB)) || (m = css.match(RE_RGB_LEGACY))) {
-        const rgb = m.slice(1, 4);
+        let rgb = m.slice(1, 4);
         for (let i = 0; i < 3; i++) {
-            rgb[i] = +rgb[i];
+            rgb[i] = +percentToAbsolute(noneToValue(rgb[i], 0), 0, 255);
         }
-        rgb[3] = 1; // default alpha
+        rgb = roundRGB(rgb);
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha; // default alpha
         return rgb;
     }
 
     // rgba(250,20,0,0.4)
-    if ((m = css.match(RE_RGBA)) || (m = css.match(RE_RGBA_LEGACY))) {
+    if ((m = css.match(RE_RGBA_LEGACY))) {
         const rgb = m.slice(1, 5);
         for (let i = 0; i < 4; i++) {
-            rgb[i] = +rgb[i];
+            rgb[i] = +percentToAbsolute(rgb[i], 0, 255);
         }
         return rgb;
     }
 
-    // rgb(100%,0%,0%)
-    if ((m = css.match(RE_RGB_PCT)) || (m = css.match(RE_RGB_PCT_LEGACY))) {
-        const rgb = m.slice(1, 4);
-        for (let i = 0; i < 3; i++) {
-            rgb[i] = round$1(rgb[i] * 2.55);
-        }
-        rgb[3] = 1; // default alpha
-        return rgb;
-    }
-
-    // rgba(100%,0%,0%,0.4)
-    if ((m = css.match(RE_RGBA_PCT)) || (m = css.match(RE_RGBA_PCT_LEGACY))) {
-        const rgb = m.slice(1, 5);
-        for (let i = 0; i < 3; i++) {
-            rgb[i] = round$1(rgb[i] * 2.55);
-        }
-        rgb[3] = +rgb[3];
-        return rgb;
-    }
-
     // hsl(0,100%,50%)
     if ((m = css.match(RE_HSL)) || (m = css.match(RE_HSL_LEGACY))) {
         const hsl = m.slice(1, 4);
-        hsl[1] *= 0.01;
-        hsl[2] *= 0.01;
-        const rgb = hsl2rgb(hsl);
-        for (let i = 0; i < 3; i++) {
-            rgb[i] = round$1(rgb[i]);
-        }
-        rgb[3] = 1;
+        hsl[0] = +noneToValue(hsl[0].replace('deg', ''), 0);
+        hsl[1] = +percentToAbsolute(noneToValue(hsl[1], 0), 0, 100) * 0.01;
+        hsl[2] = +percentToAbsolute(noneToValue(hsl[2], 0), 0, 100) * 0.01;
+        const rgb = roundRGB(hsl2rgb(hsl));
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
     // hsla(0,100%,50%,0.5)
-    if ((m = css.match(RE_HSLA)) || (m = css.match(RE_HSLA_LEGACY))) {
+    if ((m = css.match(RE_HSLA_LEGACY))) {
         const hsl = m.slice(1, 4);
         hsl[1] *= 0.01;
         hsl[2] *= 0.01;
@@ -3110,16 +3211,17 @@ const css2rgb = (css) => {
 
     if ((m = css.match(RE_LAB))) {
         const lab = m.slice(1, 4);
-        lab[0] = percentToAbsolute(lab[0], 0, 100);
-        lab[1] = percentToAbsolute(lab[1], -125, 125, true);
-        lab[2] = percentToAbsolute(lab[2], -125, 125, true);
+        lab[0] = percentToAbsolute(noneToValue(lab[0], 0), 0, 100);
+        lab[1] = percentToAbsolute(noneToValue(lab[1], 0), -125, 125, true);
+        lab[2] = percentToAbsolute(noneToValue(lab[2], 0), -125, 125, true);
         // convert to D50 Lab whitepoint
         const wp = getLabWhitePoint();
         setLabWhitePoint('d50');
         const rgb = roundRGB(lab2rgb(lab));
         // convert back to original Lab whitepoint
         setLabWhitePoint(wp);
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
@@ -3134,27 +3236,30 @@ const css2rgb = (css) => {
         const rgb = roundRGB(lch2rgb(lch));
         // convert back to original Lab whitepoint
         setLabWhitePoint(wp);
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
     if ((m = css.match(RE_OKLAB))) {
         const oklab = m.slice(1, 4);
-        oklab[0] = percentToAbsolute(oklab[0], 0, 1);
-        oklab[1] = percentToAbsolute(oklab[1], -0.4, 0.4, true);
-        oklab[2] = percentToAbsolute(oklab[2], -0.4, 0.4, true);
+        oklab[0] = percentToAbsolute(noneToValue(oklab[0], 0), 0, 1);
+        oklab[1] = percentToAbsolute(noneToValue(oklab[1], 0), -0.4, 0.4, true);
+        oklab[2] = percentToAbsolute(noneToValue(oklab[2], 0), -0.4, 0.4, true);
         const rgb = roundRGB(oklab2rgb(oklab));
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
     if ((m = css.match(RE_OKLCH))) {
         const oklch = m.slice(1, 4);
-        oklch[0] = percentToAbsolute(oklch[0], 0, 1);
+        oklch[0] = percentToAbsolute(noneToValue(oklch[0], 0), 0, 1);
         oklch[1] = percentToAbsolute(noneToValue(oklch[1], 0), 0, 0.4, false);
         oklch[2] = +noneToValue(oklch[2].replace('deg', ''), 0);
         const rgb = roundRGB(oklch2rgb(oklch));
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 };
@@ -3163,11 +3268,7 @@ css2rgb.test = (s) => {
     return (
         // modern
         RE_RGB.test(s) ||
-        RE_RGBA.test(s) ||
-        RE_RGB_PCT.test(s) ||
-        RE_RGBA_PCT.test(s) ||
         RE_HSL.test(s) ||
-        RE_HSLA.test(s) ||
         RE_LAB.test(s) ||
         RE_LCH.test(s) ||
         RE_OKLAB.test(s) ||
@@ -3175,10 +3276,9 @@ css2rgb.test = (s) => {
         // legacy
         RE_RGB_LEGACY.test(s) ||
         RE_RGBA_LEGACY.test(s) ||
-        RE_RGB_PCT_LEGACY.test(s) ||
-        RE_RGBA_PCT_LEGACY.test(s) ||
         RE_HSL_LEGACY.test(s) ||
-        RE_HSLA_LEGACY.test(s)
+        RE_HSLA_LEGACY.test(s) ||
+        s === 'transparent'
     );
 };
 
@@ -3344,10 +3444,11 @@ Object.assign(chroma, {
     average,
     bezier: bezier$1,
     blend,
-    brewer: colorbrewer,
+    brewer: colorbrewerProxy,
     Color,
     colors: w3cx11,
     contrast,
+    contrastAPCA,
     cubehelix,
     deltaE,
     distance,
@@ -3562,6 +3663,81 @@ function t(r){return typeof r=="string"}
 
 function n(e){return !!e}
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var naturalCompareLite = {exports: {}};
+
+/*
+ * @version    1.4.0
+ * @date       2015-10-26
+ * @stability  3 - Stable
+ * @author     Lauri Rooden (https://github.com/litejs/natural-compare-lite)
+ * @license    MIT License
+ */
+
+
+var naturalCompare = function(a, b) {
+	var i, codeA
+	, codeB = 1
+	, posA = 0
+	, posB = 0
+	, alphabet = String.alphabet;
+
+	function getCode(str, pos, code) {
+		if (code) {
+			for (i = pos; code = getCode(str, i), code < 76 && code > 65;) ++i;
+			return +str.slice(pos - 1, i)
+		}
+		code = alphabet && alphabet.indexOf(str.charAt(pos));
+		return code > -1 ? code + 76 : ((code = str.charCodeAt(pos) || 0), code < 45 || code > 127) ? code
+			: code < 46 ? 65               // -
+			: code < 48 ? code - 1
+			: code < 58 ? code + 18        // 0-9
+			: code < 65 ? code - 11
+			: code < 91 ? code + 11        // A-Z
+			: code < 97 ? code - 37
+			: code < 123 ? code + 5        // a-z
+			: code - 63
+	}
+
+
+	if ((a+="") != (b+="")) for (;codeB;) {
+		codeA = getCode(a, posA++);
+		codeB = getCode(b, posB++);
+
+		if (codeA < 76 && codeB < 76 && codeA > 66 && codeB > 66) {
+			codeA = getCode(a, posA, posA);
+			codeB = getCode(b, posB, posA = i);
+			posB = i;
+		}
+
+		if (codeA != codeB) return (codeA < codeB) ? -1 : 1
+	}
+	return 0
+};
+
+try {
+	naturalCompareLite.exports = naturalCompare;
+} catch (e) {
+	String.naturalCompare = naturalCompare;
+}
+
+var naturalCompareLiteExports = naturalCompareLite.exports;
+const compare = /*@__PURE__*/getDefaultExportFromCjs(naturalCompareLiteExports);
+
+function compareNatural(a, b) {
+  if (a === b) return 0;
+  if (t(a)) {
+    if (t(b)) {
+      return compare(a, b);
+    }
+    return 1;
+  }
+  return t(b) ? -1 : 0;
+}
+
 function isString(value) {
   return value != null && typeof value === "string";
 }
@@ -3658,6 +3834,25 @@ function compareFqnHierarchically(a, b) {
 function compareByFqnHierarchically(a, b) {
   return compareFqnHierarchically(a.id, b.id);
 }
+function sortByFqnHierarchically(array) {
+  return array.map((item) => ({ item, fqn: item.id.split(".") })).sort((a, b) => {
+    return a.fqn.length - b.fqn.length;
+  }).map(({ item }) => item);
+}
+function sortNaturalByFqn(array) {
+  return array.map((item) => ({ item, fqn: item.id.split(".") })).sort((a, b) => {
+    if (a.fqn.length !== b.fqn.length) {
+      return a.fqn.length - b.fqn.length;
+    }
+    for (let i = 0; i < a.fqn.length; i++) {
+      const compare = compareNatural(a.fqn[i], b.fqn[i]);
+      if (compare !== 0) {
+        return compare;
+      }
+    }
+    return 0;
+  }).map(({ item }) => item);
+}
 
 class LikeC4ViewModel {
   constructor(view, model) {
@@ -4283,14 +4478,14 @@ const compareRelations = (a, b) => {
     return -1;
   }
   const compareParents = parentA && parentB ? compareFqnHierarchically(parentA, parentB) : 0;
-  if (compareParents === 0) {
-    const compareSource = compareFqnHierarchically(a.source, b.source);
-    if (compareSource !== 0) {
-      return compareSource;
-    }
-    return compareFqnHierarchically(a.target, b.target);
+  if (compareParents !== 0) {
+    return compareParents;
+  }
+  const compareSource = compareFqnHierarchically(a.source, b.source);
+  if (compareSource !== 0) {
+    return compareSource;
   }
-  return compareParents;
+  return compareFqnHierarchically(a.target, b.target);
 };
 
-export { DefaultElementShape, DefaultThemeColor, ElementColors, LikeC4Model, LikeC4ViewModel, RelationshipColors, ancestorsFqn, commonAncestor, compareByFqnHierarchically, compareFqnHierarchically, compareRelations, computeColorValues, defaultTheme, delay, i as hasAtLeast, isAncestor, isDescendantOf, isNonEmptyArray, isSameHierarchy, isString, nameFromFqn, nonNullable, notDescendantOf, parentFqn, parentFqnPredicate };
+export { DefaultElementShape, DefaultThemeColor, ElementColors, LikeC4Model, LikeC4ViewModel, RelationshipColors, ancestorsFqn, commonAncestor, compareByFqnHierarchically, compareFqnHierarchically, compareNatural, compareRelations, computeColorValues, defaultTheme, delay, i as hasAtLeast, isAncestor, isDescendantOf, isNonEmptyArray, isSameHierarchy, isString, nameFromFqn, nonNullable, notDescendantOf, parentFqn, parentFqnPredicate, sortByFqnHierarchically, sortNaturalByFqn };