@tensor_1/react 2.37.0 → 2.39.0

package/dist/components/InsightCard.js

@@ -0,0 +1,118 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { CircleCheckIcon, CircleQuestionMarkIcon, OctagonAlertIcon, TriangleAlertIcon } from "../icons/components.js";
+const defaultNumber = new Intl.NumberFormat("en", { maximumFractionDigits: 1 });
+const DEFAULT_INSIGHT_CARD_LABELS = {
+  coverage: (covered, total, percent, note) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    covered,
+    " of ",
+    total,
+    " ",
+    note,
+    " (",
+    percent,
+    "%)"
+  ] }),
+  bullet: (actual, target) => `${actual} against a target of ${target}`,
+  source: "Source",
+  updated: "Updated",
+  kpis: "Key figures",
+  formatNumber: (value) => defaultNumber.format(value)
+};
+const STATUS_ICON = {
+  ok: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+  critical: OctagonAlertIcon,
+  unknown: CircleQuestionMarkIcon
+};
+function InsightCard({
+  eyebrow,
+  headline,
+  sowhat,
+  status,
+  kpis,
+  coverage,
+  actions,
+  source,
+  updated,
+  layout = "stack",
+  variant = "card",
+  aside,
+  headingLevel = 3,
+  labels: labelOverrides,
+  className,
+  children,
+  ...props
+}) {
+  const labels = { ...DEFAULT_INSIGHT_CARD_LABELS, ...labelOverrides };
+  const Heading = `h${headingLevel}`;
+  const StatusIcon = status ? STATUS_ICON[status.tone] : null;
+  const percent = coverage && coverage.total > 0 ? Math.round(coverage.covered / coverage.total * 100) : null;
+  const hasFooter = coverage != null || source != null || updated != null || actions != null;
+  return /* @__PURE__ */ jsxs("article", { className: cx("uix-insight", variant === "plain" && "uix-insight--plain", className), "data-layout": layout, ...props, children: [
+    /* @__PURE__ */ jsxs("header", { className: "uix-insight__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "uix-insight__heading", children: [
+        eyebrow != null ? /* @__PURE__ */ jsx("div", { className: "uix-insight__eyebrow", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx(Heading, { className: "uix-insight__headline", children: headline }),
+        sowhat != null ? /* @__PURE__ */ jsx("p", { className: "uix-insight__sowhat", children: sowhat }) : null
+      ] }),
+      status && StatusIcon ? /* @__PURE__ */ jsxs("span", { className: "uix-insight__status", "data-tone": status.tone, children: [
+        /* @__PURE__ */ jsx(StatusIcon, { size: "sm", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: status.label })
+      ] }) : null
+    ] }),
+    kpis?.length ? /* @__PURE__ */ jsx("dl", { className: "uix-insight__kpis", "aria-label": labels.kpis, children: kpis.map((kpi, index) => /* @__PURE__ */ jsxs("div", { className: "uix-insight__kpi", children: [
+      /* @__PURE__ */ jsx("dt", { className: "uix-insight__kpi-label", children: kpi.label }),
+      /* @__PURE__ */ jsx("dd", { className: "uix-insight__kpi-value", children: kpi.value }),
+      kpi.comparison ? /* @__PURE__ */ jsx("dd", { className: "uix-insight__kpi-comparison", "data-tone": kpi.comparison.tone ?? "neutral", children: kpi.comparison.text }) : null,
+      kpi.target ? /* @__PURE__ */ jsx("dd", { className: "uix-insight__kpi-target", children: /* @__PURE__ */ jsx(Bullet, { ...kpi.target, label: labels.bullet(labels.formatNumber(kpi.target.actual), labels.formatNumber(kpi.target.target)) }) }) : null
+    ] }, index)) }) : null,
+    children != null || aside != null ? /* @__PURE__ */ jsxs("div", { className: "uix-insight__body", children: [
+      children != null ? /* @__PURE__ */ jsx("div", { className: "uix-insight__main", children }) : null,
+      aside != null ? /* @__PURE__ */ jsx("div", { className: "uix-insight__aside", children: aside }) : null
+    ] }) : null,
+    hasFooter ? /* @__PURE__ */ jsxs("footer", { className: "uix-insight__footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "uix-insight__meta", children: [
+        coverage && percent != null ? /* @__PURE__ */ jsxs("p", { className: "uix-insight__coverage", children: [
+          labels.coverage(coverage.covered, coverage.total, percent, coverage.note),
+          coverage.partialPeriod != null ? /* @__PURE__ */ jsx("span", { className: "uix-insight__partial", children: coverage.partialPeriod }) : null
+        ] }) : null,
+        source != null || updated != null ? /* @__PURE__ */ jsxs("p", { className: "uix-insight__source", children: [
+          source != null ? /* @__PURE__ */ jsxs("span", { children: [
+            labels.source,
+            ": ",
+            source
+          ] }) : null,
+          updated != null ? /* @__PURE__ */ jsxs("span", { children: [
+            labels.updated,
+            ": ",
+            updated
+          ] }) : null
+        ] }) : null
+      ] }),
+      actions != null ? /* @__PURE__ */ jsx("div", { className: "uix-insight__actions", children: actions }) : null
+    ] }) : null
+  ] });
+}
+function Bullet({ actual, target, ranges, max, label, className, style, ...props }) {
+  const end = Math.max(max ?? 0, ...(ranges ?? []).map((r) => r[1]), actual, target, 0) * (max ? 1 : 1.1) || 1;
+  const pct = (value) => `${Math.max(0, Math.min(100, value / end * 100))}%`;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-bullet", className), role: "img", "aria-label": label, style, ...props, children: [
+    (ranges ?? []).map(([from, to], index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "uix-bullet__range",
+        "data-band": Math.min(index, 2),
+        style: { left: pct(from), width: `calc(${pct(to)} - ${pct(from)})` }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx("span", { className: "uix-bullet__bar", style: { width: pct(actual) } }),
+    /* @__PURE__ */ jsx("span", { className: "uix-bullet__target", style: { left: pct(target) } })
+  ] });
+}
+export {
+  Bullet,
+  DEFAULT_INSIGHT_CARD_LABELS,
+  InsightCard
+};

package/dist/components/Stat.d.ts

@@ -33,6 +33,13 @@ interface StatProps extends HTMLAttributes<HTMLElement> {
     };
     /** Whether the editor this tile opens is currently open (`aria-expanded`). */
     expanded?: boolean;
+    /**
+     * What the tile started is still running (HAR-1753). The button is announced as busy and
+     * unavailable (`aria-busy`, `aria-disabled`) and stays focusable; `onActivate`, `onClick` and
+     * `onKeyDown` are not called until it ends. Only with `onActivate`: a read-only tile and a
+     * link tile ignore it.
+     */
+    pending?: boolean;
     /**
      * What `onActivate` opens, for `aria-haspopup` (HAR-1350; TENSOR B6). Default `'dialog'`;
      * `'menu'` for a status menu; `false` for an in-place action (no chevron either).

package/dist/components/Stat.js

@@ -3,7 +3,7 @@ import { forwardRef, useId } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
 const Chevron = () => /* @__PURE__ */ jsx("span", { className: "uix-stat__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) });
-const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, trendLabels, haspopup = "dialog", href, current, renderLink, className, onClick, ...props }, ref) {
+const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, trendLabels, haspopup = "dialog", href, current, renderLink, className, onClick, onKeyDown, pending = false, ...props }, ref) {
   const id = useId();
   const interactive = onActivate != null;
   const linked = !interactive && href != null;
@@ -33,11 +33,11 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
     ] })
   ] });
   if (linked) {
-    const linkProps = { ...props, href, className: classes, onClick, "aria-current": current ? "page" : void 0, children: body };
+    const linkProps = { ...props, href, className: classes, onClick, onKeyDown, "aria-current": current ? "page" : void 0, children: body };
     return /* @__PURE__ */ jsx(Fragment, { children: renderLink ? renderUixLink(renderLink, linkProps) : /* @__PURE__ */ jsx("a", { ref, ...linkProps }) });
   }
   if (!interactive) {
-    return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, ...props, children: body });
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, onKeyDown, ...props, children: body });
   }
   return /* @__PURE__ */ jsxs(
     "button",
@@ -50,10 +50,13 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
       "aria-expanded": expanded,
       "aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
       "aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,
+      ...pending ? { "aria-busy": true, "aria-disabled": true } : null,
       onClick: (e) => {
+        if (pending) return;
         onClick?.(e);
         if (!e.defaultPrevented) onActivate();
       },
+      onKeyDown: pending ? void 0 : onKeyDown,
       children: [
         /* @__PURE__ */ jsx("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
         activateLabel && /* @__PURE__ */ jsxs("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [

package/dist/correlation-scatter-model.d.ts

@@ -0,0 +1,68 @@
+import { EChartsOption } from 'echarts';
+import { UixChartTokens } from './chart-theme.js';
+import { LinearFit } from './chart-stats.js';
+import { ChartThreshold } from './chart-analytic-model.js';
+
+interface CorrelationPoint {
+    x: number;
+    y: number;
+    label: string;
+    href?: string;
+    /** A point that matters (a breach): a status hue AND a distinct shape, never colour alone. */
+    emphasis?: 'danger' | 'warning';
+}
+interface CorrelationScatterLabels {
+    /** The stats caption. `r` is null when it is undefined (y constant). */
+    stats: (stats: {
+        r: number | null;
+        n: number;
+    }) => string;
+    notEnough: (n: number, min: number) => string;
+    percentile: (p: number) => string;
+    trend: string;
+    /** Header of the label column in the data table. */
+    point: string;
+    formatX: (x: number) => string;
+    formatY: (y: number) => string;
+}
+/** r to two decimals, truncated toward zero so an imperfect fit never reads "r = 1.00". */
+declare function formatCorrelation(r: number): string;
+declare const DEFAULT_CORRELATION_SCATTER_LABELS: CorrelationScatterLabels;
+interface CorrelationScatterSpec {
+    points: CorrelationPoint[];
+    xLabel: string;
+    yLabel: string;
+    trend?: 'linear' | 'none';
+    /** Percentile lines of y, in percent (e.g. [50, 90]). */
+    percentiles?: number[];
+    thresholds?: {
+        x?: ChartThreshold[];
+        y?: ChartThreshold[];
+    };
+    breakpoint?: {
+        x: number;
+        label: string;
+    };
+    /** Below this many points there is no trend and no stats. Default 8. */
+    minPoints?: number;
+}
+interface CorrelationScatterModel {
+    /** False below `minPoints`: render the "not enough data" state instead of a trend. */
+    enough: boolean;
+    n: number;
+    minPoints: number;
+    fit: LinearFit | null;
+    option: EChartsOption;
+    statsText: string;
+    table: {
+        headers: string[];
+        rows: Record<string, string | number>[];
+    };
+    /** Index into `points` for each data item of the hit series. */
+    hitSeriesId: string;
+}
+/** Hit target for every point, in px: above the 24 px accessible minimum (WCAG 2.5.8) with the 2 px gap around it. */
+declare const SCATTER_HIT_SIZE = 26;
+declare function correlationScatterModel(spec: CorrelationScatterSpec, tokens: UixChartTokens, labelOverrides?: Partial<CorrelationScatterLabels>): CorrelationScatterModel;
+
+export { type CorrelationPoint, type CorrelationScatterLabels, type CorrelationScatterModel, type CorrelationScatterSpec, DEFAULT_CORRELATION_SCATTER_LABELS, SCATTER_HIT_SIZE, correlationScatterModel, formatCorrelation };

package/dist/correlation-scatter-model.js

@@ -0,0 +1,179 @@
+import { linearFit, quantiles } from "./chart-stats.js";
+import { combineMarks, thresholdMarks } from "./chart-analytic-model.js";
+import { niceCeil } from "./chart-panels-model.js";
+const defaultNumber = new Intl.NumberFormat("en", { maximumFractionDigits: 2 });
+function formatCorrelation(r) {
+  const shown = Math.abs(r) < 1 ? Math.trunc(r * 100) / 100 : Math.sign(r);
+  return shown.toFixed(2);
+}
+const DEFAULT_CORRELATION_SCATTER_LABELS = {
+  stats: ({ r, n }) => `${r == null ? "" : `r = ${formatCorrelation(r)} \xB7 `}n = ${n} \xB7 association, not cause`,
+  notEnough: (n, min) => `Not enough data (n = ${n} of ${min})`,
+  percentile: (p) => `p${p}`,
+  trend: "Trend",
+  point: "Point",
+  formatX: (x) => defaultNumber.format(x),
+  formatY: (y) => defaultNumber.format(y)
+};
+const SCATTER_HIT_SIZE = 26;
+const DOT_SIZE = 9;
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+const niceRange = (values) => {
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  const max = niceCeil(hi > 0 ? hi * 1.08 : hi || 1);
+  const min = lo >= 0 ? 0 : -niceCeil(-lo * 1.08);
+  return [min, max];
+};
+function correlationScatterModel(spec, tokens, labelOverrides) {
+  const labels = { ...DEFAULT_CORRELATION_SCATTER_LABELS, ...labelOverrides };
+  const minPoints = Math.max(2, spec.minPoints ?? 8);
+  const points = spec.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+  const n = points.length;
+  const enough = n >= minPoints;
+  const fit = enough && spec.trend !== "none" ? linearFit(points) : null;
+  const statsText = labels.stats({ r: fit?.r ?? null, n });
+  const xs = [...points.map((p) => p.x), ...(spec.thresholds?.x ?? []).map((t) => t.value), ...spec.breakpoint ? [spec.breakpoint.x] : []];
+  const ys = [...points.map((p) => p.y), ...(spec.thresholds?.y ?? []).map((t) => t.value)];
+  const [xMin, xMax] = xs.length ? niceRange(xs) : [0, 1];
+  const [yMin, yMax] = ys.length ? niceRange(ys) : [0, 1];
+  const dotData = points.map((p) => ({
+    value: [p.x, p.y],
+    symbol: p.emphasis === "danger" ? "diamond" : p.emphasis === "warning" ? "triangle" : "circle",
+    symbolSize: p.emphasis ? DOT_SIZE + 3 : DOT_SIZE,
+    itemStyle: {
+      color: p.emphasis === "danger" ? tokens.danger : p.emphasis === "warning" ? tokens.warning : tokens.palette[0],
+      borderColor: tokens.surface,
+      borderWidth: 2,
+      opacity: 1
+    }
+  }));
+  const pcts = (spec.percentiles ?? []).filter((p) => p > 0 && p < 100);
+  const pctValues = quantiles(points.map((p) => p.y), pcts.map((p) => p / 100));
+  const percentileLines = enough && pcts.length ? {
+    markLine: {
+      silent: true,
+      symbol: "none",
+      animation: false,
+      data: pcts.flatMap((p, i) => {
+        const value = pctValues[i];
+        return value == null ? [] : [{
+          yAxis: value,
+          lineStyle: { color: tokens.reference, width: 1, type: "solid", opacity: 0.6 },
+          label: { show: true, position: "end", formatter: labels.percentile(p), color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 11, distance: 6 }
+        }];
+      })
+    }
+  } : {};
+  const xLines = {
+    markLine: {
+      silent: true,
+      symbol: "none",
+      animation: false,
+      data: [
+        ...(spec.thresholds?.x ?? []).map((t) => ({
+          xAxis: t.value,
+          lineStyle: { color: tokens.reference, width: 1, type: "solid" },
+          label: { show: true, position: "end", formatter: t.label, color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 11 }
+        })),
+        ...spec.breakpoint && enough ? [{
+          xAxis: spec.breakpoint.x,
+          lineStyle: { color: tokens.text, width: 1, type: "solid" },
+          label: { show: true, position: "end", formatter: spec.breakpoint.label, color: tokens.text, fontFamily: tokens.fontSans, fontSize: 11, fontWeight: 600 }
+        }] : []
+      ]
+    }
+  };
+  const marks = combineMarks(
+    spec.thresholds?.y?.length ? thresholdMarks(spec.thresholds.y, { tokens, extent: [yMin, yMax] }) : null,
+    percentileLines,
+    (xLines.markLine?.data).length ? xLines : null
+  );
+  const series = [
+    {
+      id: "points",
+      name: spec.yLabel,
+      type: "scatter",
+      data: dotData,
+      silent: true,
+      animation: false,
+      z: 3,
+      ...marks
+    },
+    {
+      // the hit layer: transparent 24 px targets over the dots carry the tooltip and the click
+      id: "points-hit",
+      name: spec.yLabel,
+      type: "scatter",
+      data: points.map((p, index) => ({ value: [p.x, p.y, index] })),
+      symbol: "circle",
+      symbolSize: SCATTER_HIT_SIZE,
+      itemStyle: { color: "rgba(0,0,0,0)" },
+      emphasis: { itemStyle: { color: "rgba(0,0,0,0)", borderColor: tokens.text, borderWidth: 1 } },
+      cursor: "pointer",
+      animation: false,
+      z: 4
+    }
+  ];
+  if (fit) {
+    series.push({
+      id: "trend",
+      name: labels.trend,
+      type: "line",
+      data: [[xMin, fit.intercept + fit.slope * xMin], [xMax, fit.intercept + fit.slope * xMax]],
+      symbol: "none",
+      silent: true,
+      lineStyle: { color: tokens.reference, width: 1.5, type: "solid" },
+      tooltip: { show: false },
+      animation: false,
+      clip: true,
+      z: 2
+    });
+  }
+  const option = {
+    animation: false,
+    grid: { top: 28, right: spec.thresholds?.y?.length || pcts.length ? 100 : 20, bottom: 44, left: 52, containLabel: false },
+    xAxis: {
+      type: "value",
+      min: xMin,
+      max: xMax,
+      name: spec.xLabel,
+      nameLocation: "middle",
+      nameGap: 28,
+      nameTextStyle: { color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 12 },
+      axisLabel: { formatter: (v) => labels.formatX(v) },
+      splitLine: { show: true }
+    },
+    yAxis: {
+      type: "value",
+      min: yMin,
+      max: yMax,
+      name: spec.yLabel,
+      nameLocation: "end",
+      nameGap: 10,
+      nameTextStyle: { align: "left", padding: [0, 0, 0, -48], color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 12 },
+      axisLabel: { formatter: (v) => labels.formatY(v) }
+    },
+    tooltip: {
+      trigger: "item",
+      confine: true,
+      formatter: (params) => {
+        const p = params;
+        if (p.seriesId !== "points-hit" || !Array.isArray(p.value)) return "";
+        const point = points[Number(p.value[2])];
+        if (!point) return "";
+        return `<div style="font-weight:600;margin-bottom:4px">${escapeHtml(point.label)}</div><div>${escapeHtml(spec.xLabel)}: ${escapeHtml(labels.formatX(point.x))}</div><div>${escapeHtml(spec.yLabel)}: ${escapeHtml(labels.formatY(point.y))}</div>`;
+      }
+    },
+    series
+  };
+  const headers = [labels.point, spec.xLabel, spec.yLabel];
+  const rows = points.map((p) => ({ [labels.point]: p.label, [spec.xLabel]: labels.formatX(p.x), [spec.yLabel]: labels.formatY(p.y) }));
+  return { enough, n, minPoints, fit, option, statsText, table: { headers, rows }, hitSeriesId: "points-hit" };
+}
+export {
+  DEFAULT_CORRELATION_SCATTER_LABELS,
+  SCATTER_HIT_SIZE,
+  correlationScatterModel,
+  formatCorrelation
+};

package/dist/icons/Icon.d.ts

@@ -5,28 +5,41 @@ import { IconNode, UixIcon, IconProps } from './types.js';
 /** Renders a glyph as an inline SVG; the props contract shared by every icon. */
 declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, className, style, ...rest }: IconProps, ref?: unknown): react.ReactElement<{
     string?: number | string | undefined | undefined;
+    target?: string | undefined | undefined;
     filter?: string | undefined | undefined;
-    values?: string | undefined | undefined;
     fill: string;
+    values?: string | undefined | undefined;
+    type?: string | undefined | undefined;
+    min?: number | string | undefined | undefined;
+    max?: number | string | undefined | undefined;
+    name?: string | undefined | undefined;
     color?: string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    rotate?: number | string | undefined | undefined;
+    offset?: number | string | undefined | undefined;
+    overflow?: number | string | undefined | undefined;
     fontStyle?: number | string | undefined | undefined;
     fontWeight?: number | string | undefined | undefined;
-    fontSize?: number | string | undefined | undefined;
     fontFamily?: string | undefined | undefined;
-    width?: number | string | undefined | undefined;
+    fontSize?: number | string | undefined | undefined;
+    opacity?: number | string | undefined | undefined;
     height?: number | string | undefined | undefined;
-    type?: string | undefined | undefined;
+    end?: number | string | undefined | undefined;
+    scale?: number | string | undefined | undefined;
+    to?: number | string | undefined | undefined;
     z?: number | string | undefined | undefined;
-    opacity?: number | string | undefined | undefined;
     r?: number | string | undefined | undefined;
-    id?: string | undefined | undefined;
-    name?: string | undefined | undefined;
     x?: number | string | undefined | undefined;
-    y?: number | string | undefined | undefined;
     cursor?: number | string | undefined | undefined;
+    id?: string | undefined | undefined;
+    radius?: number | string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    y?: number | string | undefined | undefined;
+    slope?: number | string | undefined | undefined;
+    intercept?: number | string | undefined | undefined;
+    points?: string | undefined | undefined;
     children?: react.ReactNode;
     clipPath?: string | undefined | undefined;
-    radius?: number | string | undefined | undefined;
     media?: string | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
@@ -246,7 +259,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     onAnimationIterationCapture?: react.AnimationEventHandler<SVGSVGElement> | undefined;
     onTransitionEnd?: react.TransitionEventHandler<SVGSVGElement> | undefined;
     onTransitionEndCapture?: react.TransitionEventHandler<SVGSVGElement> | undefined;
-    end?: number | string | undefined | undefined;
     alphabetic?: number | string | undefined | undefined;
     ideographic?: number | string | undefined | undefined;
     mathematical?: number | string | undefined | undefined;
@@ -256,17 +268,14 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     unicode?: number | string | undefined | undefined;
     clip?: number | string | undefined | undefined;
     stroke: string;
-    offset?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
     capHeight?: number | string | undefined | undefined;
     dy?: number | string | undefined | undefined;
     dx?: number | string | undefined | undefined;
     transform?: string | undefined | undefined;
     mask?: string | undefined | undefined;
     path?: string | undefined | undefined;
-    max?: number | string | undefined | undefined;
     method?: string | undefined | undefined;
-    min?: number | string | undefined | undefined;
-    target?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     additive?: "replace" | "sum" | undefined | undefined;
@@ -323,7 +332,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     fontVariant?: number | string | undefined | undefined;
     format?: number | string | undefined | undefined;
     fr?: number | string | undefined | undefined;
-    from?: number | string | undefined | undefined;
     fx?: number | string | undefined | undefined;
     fy?: number | string | undefined | undefined;
     g1?: number | string | undefined | undefined;
@@ -336,11 +344,9 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     gradientUnits?: string | undefined | undefined;
     horizAdvX?: number | string | undefined | undefined;
     horizOriginX?: number | string | undefined | undefined;
-    href?: string | undefined | undefined;
     imageRendering?: number | string | undefined | undefined;
     in2?: number | string | undefined | undefined;
     in?: string | undefined | undefined;
-    intercept?: number | string | undefined | undefined;
     k1?: number | string | undefined | undefined;
     k2?: number | string | undefined | undefined;
     k3?: number | string | undefined | undefined;
@@ -371,7 +377,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     orient?: number | string | undefined | undefined;
     orientation?: number | string | undefined | undefined;
     origin?: number | string | undefined | undefined;
-    overflow?: number | string | undefined | undefined;
     overlinePosition?: number | string | undefined | undefined;
     overlineThickness?: number | string | undefined | undefined;
     paintOrder?: number | string | undefined | undefined;
@@ -381,7 +386,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     patternTransform?: number | string | undefined | undefined;
     patternUnits?: string | undefined | undefined;
     pointerEvents?: number | string | undefined | undefined;
-    points?: string | undefined | undefined;
     pointsAtX?: number | string | undefined | undefined;
     pointsAtY?: number | string | undefined | undefined;
     pointsAtZ?: number | string | undefined | undefined;
@@ -397,13 +401,10 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     requiredFeatures?: number | string | undefined | undefined;
     restart?: number | string | undefined | undefined;
     result?: string | undefined | undefined;
-    rotate?: number | string | undefined | undefined;
     rx?: number | string | undefined | undefined;
     ry?: number | string | undefined | undefined;
-    scale?: number | string | undefined | undefined;
     seed?: number | string | undefined | undefined;
     shapeRendering?: number | string | undefined | undefined;
-    slope?: number | string | undefined | undefined;
     spacing?: number | string | undefined | undefined;
     specularConstant?: number | string | undefined | undefined;
     specularExponent?: number | string | undefined | undefined;
@@ -433,7 +434,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     textDecoration?: number | string | undefined | undefined;
     textLength?: number | string | undefined | undefined;
     textRendering?: number | string | undefined | undefined;
-    to?: number | string | undefined | undefined;
     transformOrigin?: string | undefined | undefined;
     u1?: number | string | undefined | undefined;
     u2?: number | string | undefined | undefined;