@mattilsynet/design 2.2.1 → 2.2.3

package/mtds/chart/chart-lines.js

@@ -0,0 +1,44 @@
+import { tag as m, attr as a } from "../utils.js";
+function E(e, { total: t, type: n, variant: o }) {
+  const s = Number.parseFloat(n || "10") || 0, r = m("div", { class: "axisGroup" });
+  return e.slice(1).forEach(([, ...l]) => {
+    const d = m("div", {
+      class: "lineContainer",
+      role: "list",
+      style: l[0].style
+    }), h = C(
+      l.map(({ number: c }, u, { length: $ }) => [
+        100 / ($ - 1) * u,
+        100 - c / t * 100
+      ]),
+      s / 100
+    ), p = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    a(p, "aria-hidden", "true"), a(p, "preserveAspectRatio", "none"), a(p, "viewBox", "0 0 100 100");
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    if (a(i, "class", "line"), a(i, "d", h), a(i, "fill", "none"), a(i, "stroke", "currentColor"), o === "area") {
+      const c = i.cloneNode(!0);
+      a(c, "d", `M-100,100 L${h.slice(1)}L200,100`), a(c, "class", "lineShade"), p.append(c);
+    }
+    l.forEach(({ number: c, tooltip: u, event: $ }) => {
+      const g = m("div", { role: "listitem" });
+      g.appendChild(
+        m("div", {
+          "aria-label": u,
+          "data-event": $,
+          tabindex: "0",
+          class: "linePoint",
+          role: "img",
+          style: `--value: ${c}`
+        })
+      ), d.append(g);
+    }), d.appendChild(p).append(i), r.append(d);
+  }), r;
+}
+const C = (e, t) => e.map(([n, o], s, r) => s ? b(s, r, t) : `M${n},${o}`).join(" "), v = ([e, t], [n, o]) => [e + n, t + o], w = ([e, t], [n, o]) => [e - n, t - o], f = (e, [t, n]) => [e * t, e * n], b = (e, t, n) => {
+  const o = t[e - 1], s = t[e], [r, l] = v(o, f(n, w(s, t[e - 2] || o))), [d, h] = v(s, f(n, w(o, t[e + 1] || s)));
+  return `C ${r},${l} ${d},${h} ${s[0]},${s[1]}`;
+};
+export {
+  E as toLines
+};
+//# sourceMappingURL=chart-lines.js.map

package/mtds/chart/chart-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, type, variant }: Config) {\n\tconst smoothing = Number.parseFloat(type || \"10\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", {\n\t\t\tclass: `lineContainer`,\n\t\t\trole: \"list\",\n\t\t\tstyle: values[0].style,\n\t\t});\n\n\t\tconst pathDefintion = toPath(\n\t\t\tvalues.map(({ number }, index, { length }) => [\n\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t100 - (number / total) * 100,\n\t\t\t]),\n\t\t\tsmoothing / 100,\n\t\t);\n\n\t\tconst line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\t\tattr(line, \"aria-hidden\", \"true\");\n\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tattr(path, \"class\", \"line\");\n\t\tattr(path, \"d\", pathDefintion);\n\t\tattr(path, \"fill\", \"none\");\n\t\tattr(path, \"stroke\", \"currentColor\");\n\n\t\tif (variant === \"area\") {\n\t\t\tconst lineShade = path.cloneNode(true) as SVGPathElement;\n\t\t\tattr(lineShade, \"d\", `M-100,100 L${pathDefintion.slice(1)}L200,100`);\n\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\tline.append(lineShade);\n\t\t}\n\n\t\tvalues.forEach(({ number, tooltip, event }) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tcol.appendChild(\n\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\tclass: \"linePoint\",\n\t\t\t\t\trole: \"img\",\n\t\t\t\t\tstyle: `--value: ${number}`,\n\t\t\t\t}),\n\t\t\t);\n\t\t\tlineContainer.append(col);\n\t\t});\n\n\t\tlineContainer.appendChild(line).append(path);\n\t\tgroup.append(lineContainer);\n\t});\n\treturn group;\n}\n\n// Based on https://observablehq.com/@ndry/smooth-a-svg-path-with-cubic-bezier-curves\nconst toPath = (points: number[][], s: number) =>\n\tpoints.map(([x, y], i, a) => (i ? smooth(i, a, s) : `M${x},${y}`)).join(\" \");\nconst add = ([ax, ay]: number[], [bx, by]: number[]) => [ax + bx, ay + by];\nconst sub = ([ax, ay]: number[], [bx, by]: number[]) => [ax - bx, ay - by];\nconst scale = (s: number, [x, y]: number[]) => [s * x, s * y];\nconst smooth = (i: number, all: number[][], smooth: number) => {\n\tconst start = all[i - 1];\n\tconst end = all[i];\n\tconst [csX, csY] = add(start, scale(smooth, sub(end, all[i - 2] || start))); // start control point\n\tconst [ceX, ceY] = add(end, scale(smooth, sub(start, all[i + 1] || end))); // end control point\n\treturn `C ${csX},${csY} ${ceX},${ceY} ${end[0]},${end[1]}`;\n};\n"],"names":["toLines","data","total","type","variant","smoothing","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","points","s","x","y","i","a","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":"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"}

package/mtds/chart/chart-pies.d.ts

@@ -0,0 +1,4 @@
+import { ChartData } from './chart-element';
+export declare function toPies(data: ChartData, { variant }: {
+    variant: string;
+}): SVGSVGElement;

package/mtds/chart/chart-pies.js

@@ -0,0 +1,17 @@
+import { attr as n } from "../utils.js";
+function A(h, { variant: f }) {
+  const s = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  n(s, "class", "pie"), n(s, "viewBox", "0 0 100 100");
+  let c = 0;
+  const t = 50, e = f === "doughnut" ? 25 : 0, l = h.slice(1).reduce((a, [, r]) => a + r.number, 0);
+  return h.slice(1).forEach(([, { tooltip: a, number: r, event: v, style: x }]) => {
+    const o = document.createElementNS("http://www.w3.org/2000/svg", "path"), d = c / l;
+    c += r;
+    const p = c / l, u = p - d > 0.5 ? 1 : 0, w = 2 * Math.PI * (d - 0.25), g = 2 * Math.PI * (p - 0.25), i = Math.cos(w), $ = Math.sin(w), m = Math.cos(g), M = Math.sin(g), b = `M ${t + e * i} ${t + e * $} L ${t + t * i} ${t + t * $} A ${t} ${t} 0 ${u} 1 ${t + t * m} ${t + t * M} L ${t + e * m} ${t + e * M} A ${e} ${e} 0 ${u} 0 ${t + e * i} ${t + e * $}`;
+    n(o, "aria-label", a), n(o, "data-event", v), n(o, "style", x), n(o, "d", b), n(o, "role", "img"), n(o, "tabindex", "0"), s.appendChild(o);
+  }), s;
+}
+export {
+  A as toPies
+};
+//# sourceMappingURL=chart-pies.js.map

package/mtds/chart/chart-pies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pies.js","sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toPies(data: ChartData, { variant }: { variant: string }) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event, style }]) => {\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tconst start = offset / total;\n\t\toffset += number;\n\t\tconst end = offset / total;\n\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\tconst x0 = Math.cos(a0);\n\t\tconst y0 = Math.sin(a0);\n\t\tconst x1 = Math.cos(a1);\n\t\tconst y1 = Math.sin(a1);\n\t\tconst d = `M ${radius + inner * x0} ${radius + inner * y0} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${largeArc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius + inner * x1} ${radius + inner * y1} A ${inner} ${inner} 0 ${largeArc} 0 ${radius + inner * x0} ${radius + inner * y0}`;\n\n\t\tattr(path, \"aria-label\", tooltip);\n\t\tattr(path, \"data-event\", event);\n\t\tattr(path, \"style\", style);\n\t\tattr(path, \"d\", d);\n\t\tattr(path, \"role\", \"img\");\n\t\tattr(path, \"tabindex\", \"0\");\n\t\tpie.appendChild(path);\n\t});\n\treturn pie;\n}\n"],"names":["toPies","data","variant","pie","attr","offset","radius","inner","total","tot","td","tooltip","number","event","style","path","start","end","largeArc","a0","a1","x0","y0","x1","y1","d"],"mappings":";AAGO,SAASA,EAAOC,GAAiB,EAAE,SAAAC,KAAgC;AACzE,QAAMC,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;AACxE,EAAAC,EAAKD,GAAK,SAAS,KAAK,GACxBC,EAAKD,GAAK,WAAW,aAAa;AAElC,MAAIE,IAAS;AACb,QAAMC,IAAS,IACTC,IAAQL,MAAY,aAAa,KAAK,GACtCM,IAAQP,EAAK,MAAM,CAAC,EAAE,OAAO,CAACQ,GAAK,CAAA,EAAGC,CAAE,MAAMD,IAAMC,EAAG,QAAQ,CAAC;AAEtE,SAAAT,EAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAAU,GAAS,QAAAC,GAAQ,OAAAC,GAAO,OAAAC,EAAA,CAAO,MAAM;AAChE,UAAMC,IAAO,SAAS,gBAAgB,8BAA8B,MAAM,GACpEC,IAAQX,IAASG;AACvB,IAAAH,KAAUO;AACV,UAAMK,IAAMZ,IAASG,GACfU,IAAWD,IAAMD,IAAQ,MAAM,IAAI,GACnCG,IAAK,IAAI,KAAK,MAAMH,IAAQ,OAC5BI,IAAK,IAAI,KAAK,MAAMH,IAAM,OAC1BI,IAAK,KAAK,IAAIF,CAAE,GAChBG,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIJ,CAAE,GAChBK,IAAI,KAAKnB,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE,MAAMhB,IAASA,IAASe,CAAE,IAAIf,IAASA,IAASgB,CAAE,MAAMhB,CAAM,IAAIA,CAAM,MAAMY,CAAQ,MAAMZ,IAASA,IAASiB,CAAE,IAAIjB,IAASA,IAASkB,CAAE,MAAMlB,IAASC,IAAQgB,CAAE,IAAIjB,IAASC,IAAQiB,CAAE,MAAMjB,CAAK,IAAIA,CAAK,MAAMW,CAAQ,MAAMZ,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE;AAEnU,IAAAlB,EAAKW,GAAM,cAAcJ,CAAO,GAChCP,EAAKW,GAAM,cAAcF,CAAK,GAC9BT,EAAKW,GAAM,SAASD,CAAK,GACzBV,EAAKW,GAAM,KAAKU,CAAC,GACjBrB,EAAKW,GAAM,QAAQ,KAAK,GACxBX,EAAKW,GAAM,YAAY,GAAG,GAC1BZ,EAAI,YAAYY,CAAI;AAAA,EACrB,CAAC,GACMZ;AACR;"}

package/mtds/chart/chart.css.js

@@ -0,0 +1,310 @@
+const t = `:host(:not([hidden])) {
+	display: grid;
+	gap: var(--mtds-6);
+
+	--mtdsc-chart-aspect: 16 / 9;
+	--mtdsc-chart-axis-border: var(--mtds-border-width-default) solid
+		var(--mtds-color-border-subtle);
+	--mtdsc-chart-axis-gap: var(--mtds-4);
+	--mtdsc-chart-border-width: var(--mtds-border-width-default);
+	--mtdsc-chart-border-color: #054449; /*var(--mtds-color-border-default);*/
+	--mtdsc-chart-color: var(--mtds-color-surface-tinted);
+	--mtdsc-chart-color-1: #116e6b; /* var(--mtds-color-base-default); */
+	--mtdsc-chart-color-2: #cae8ca; /*var(--mtds-color-surface-active); */
+	--mtdsc-chart-color-3: #b6d9f2;
+	--mtdsc-chart-color-4: #feecbe; /*var(--mtds-color-warning-surface-hover);*/
+	--mtdsc-chart-color-5: #fdd2c9; /*var(--mtds-color-danger-surface-active);*/
+	--mtdsc-chart-color-6: var(--mtds-color-neutral-surface-tinted);
+}
+
+[data-event-proxy] {
+	cursor: pointer;
+}
+
+.pie {
+	overflow: visible;
+	aspect-ratio: var(--mtdsc-chart-aspect);
+}
+.pie > path {
+	fill: var(--color);
+	outline: none;
+	stroke-width: var(--mtdsc-chart-border-width);
+	stroke: var(--mtdsc-chart-border-color);
+	transform-origin: center;
+	transition: scale 0.2s;
+	vector-effect: non-scaling-stroke;
+}
+.pie > path:focus-visible,
+.pie > path:hover {
+	scale: 1.05;
+}
+
+:host([data-variant="doughnut"]) .axis,
+:host([data-variant="pie"]) .axis {
+	display: none;
+}
+
+.axis {
+	font-size: var(--mtds-body-sm-font-size);
+	aspect-ratio: var(--mtdsc-chart-aspect);
+	display: grid;
+	gap: var(--mtdsc-chart-axis-gap);
+	grid-template-columns: fit-content(7em) 1fr;
+	grid-template-rows: 1fr auto;
+	grid-template-areas:
+		"y-axis chart"
+		"y-axis x-axis";
+}
+
+.axis::before {
+	content: "";
+	grid-area: chart;
+	border-style: solid;
+	border-width: 0 0 var(--mtds-border-width-default)
+		var(--mtds-border-width-default);
+	border-bottom-left-radius: var(--mtds-border-radius-lg);
+}
+
+.axisSteps,
+.axisStep,
+.axisGroups,
+.axisGroup {
+	box-sizing: border-box;
+	display: grid;
+	position: relative; /* Help .lineContainer positioning */
+}
+
+.axisGroups {
+	gap: var(--mtdsc-chart-axis-gap);
+	grid-area: chart / chart / x-axis / chart;
+	grid-template: subgrid / none;
+	padding: 0 var(--mtdsc-chart-axis-gap);
+	text-align: center;
+}
+.axisGroup {
+	grid-row: inherit;
+	grid-template: inherit;
+}
+.axisGroup::after {
+	content: attr(data-label);
+}
+.axisSteps {
+	grid-auto-rows: 1fr;
+	grid-area: chart / y-axis / chart / chart;
+	grid-template: 1px / subgrid;
+}
+.axisStep {
+	grid-column: inherit;
+	grid-template-columns: inherit;
+	place-content: end start;
+	text-align: right;
+}
+.axisStep::after {
+	border-bottom: var(--mtdsc-chart-axis-border);
+	content: "";
+}
+.axisStep::before {
+	content: attr(data-label);
+	translate: 0 50%;
+}
+
+:host([data-variant|="column"]) .axisSteps,
+:host([data-variant|="column"]) .axisGroup {
+	direction: rtl; /* Reverse orders */
+}
+:host([data-variant|="column"]) .axisSteps > *,
+:host([data-variant|="column"]) .axisGroup > * {
+	direction: ltr;
+}
+:host([data-variant|="column"]) .axisGroups {
+	grid-area: chart / y-axis / chart / chart;
+	grid-template: none / subgrid;
+	padding: var(--mtdsc-chart-axis-gap) 0;
+	row-gap: var(--mtdsc-chart-axis-gap);
+	text-align: right;
+}
+:host([data-variant|="column"]) .axisGroup::after {
+	align-self: center; /* Since text-align does not work vertically */
+}
+:host([data-variant|="column"]) .axisGroup {
+	grid-column: inherit;
+	grid-row: auto;
+	grid-template: inherit;
+}
+:host([data-variant|="column"]) .axisSteps {
+	grid-auto-columns: 1fr;
+	grid-area: chart / chart / x-axis / chart;
+	grid-template: subgrid / 1px;
+}
+:host([data-variant|="column"]) .axisStep {
+	grid-row: inherit;
+	grid-column: auto;
+	grid-template-rows: inherit;
+	grid-template-columns: none;
+}
+:host([data-variant|="column"]) .axisStep::after {
+	order: -1;
+	border-left: var(--mtdsc-chart-axis-border);
+	border-bottom: 0;
+}
+:host([data-variant|="column"]) .axisStep::before {
+	translate: -50% 0;
+}
+
+.axisGroupContent {
+	display: flex;
+}
+:host([data-variant="bar-stacked"]) .axisGroupContent {
+	flex-direction: column-reverse;
+}
+:host([data-variant="column"]) .axisGroupContent {
+	flex-direction: column;
+}
+:host([data-variant="column-stacked"]) .axisGroupContent {
+	flex-direction: row;
+}
+
+.bar {
+	--size: calc(var(--value) / var(--total, 1) * 100%);
+	align-self: end;
+	background: var(--color);
+	border: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);
+	border-radius: var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0 0;
+	box-sizing: border-box;
+	height: var(--size);
+	width: 100%;
+}
+.bar:focus-visible,
+.linePoint:focus-visible {
+	box-shadow: var(--mtdsc-focus-boxShadow);
+	outline: var(--mtdsc-focus-outline);
+	outline-offset: var(--mtds-border-width-focus);
+	z-index: 2; /* z-index to place on top when outlined */
+}
+
+:host([data-variant|="column"]) .bar {
+	border-radius: 0 var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0;
+	width: var(--size);
+	height: 100%;
+	align-self: start;
+}
+
+/* Prevent double border - using margin to see border around bars */
+/* Prevent double border - using border to avoid affecting size */
+:host(:not([data-variant])) .bar + .bar,
+:host([data-variant="bar"]) .bar + .bar {
+	margin-left: -1px;
+}
+:host([data-variant="bar-stacked"]) .bar:not(:last-child) {
+	border-radius: 0;
+}
+:host([data-variant="bar-stacked"]) .bar + .bar {
+	border-bottom: none;
+}
+:host([data-variant="column"]) .bar + .bar {
+	margin-top: -1px;
+}
+:host([data-variant="column-stacked"]) .bar:not(:last-child) {
+	border-radius: 0;
+}
+:host([data-variant="column-stacked"]) .bar + .bar {
+	border-left: none;
+}
+
+.lineContainer {
+	align-items: flex-start;
+	display: flex;
+	justify-content: space-between;
+	pointer-events: none;
+	grid-row: chart;
+}
+.lineContainer > svg,
+.lineContainer {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+.lineContainer > svg {
+	overflow: clip visible;
+}
+.lineContainer > div[role="listitem"] {
+	display: contents;
+}
+
+:host([data-variant|="line"]) .axisGroups,
+:host([data-variant|="area"]) .axisGroups {
+	padding: 0;
+}
+
+.line,
+.lineShade {
+	fill: none;
+	stroke: var(--color);
+	stroke-linejoin: round;
+	stroke-linecap: round;
+	stroke-width: 3;
+	vector-effect: non-scaling-stroke;
+}
+.line {
+	filter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */
+}
+.lineShade {
+	stroke: none;
+	fill: var(--color);
+	opacity: 0.3;
+	mask: linear-gradient(to bottom, black, transparent);
+}
+.linePoint {
+	--size: var(--mtds-3);
+	background-color: var(--color);
+	border-radius: var(--mtds-border-radius-full);
+	border: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);
+	box-sizing: border-box;
+	height: var(--size);
+	margin: calc(var(--size) / -2);
+	padding: 0;
+	pointer-events: all;
+	position: relative;
+	top: calc(100% - var(--value) / var(--total, 1) * 100%);
+	transition: scale 0.2s;
+	width: var(--size);
+	z-index: 2;
+}
+.linePoint:focus-visible,
+.linePoint:hover {
+	scale: 1.3;
+}
+.linePoint::before {
+	content: "";
+	inset: calc(var(--mtds-2) * -1); /* Increase click surface */
+	position: absolute;
+}
+
+.legends {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--mtds-2) var(--mtds-5);
+	justify-content: center;
+}
+.legend {
+	display: flex;
+	align-items: center;
+	gap: var(--mtds-2);
+}
+.legend::before {
+	background: var(--color);
+	border-radius: var(--mtds-border-radius-full);
+	border: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);
+	box-sizing: border-box;
+	content: "";
+	display: inline-block;
+	height: var(--mtds-5);
+	vertical-align: middle;
+	width: var(--mtds-5);
+}
+`;
+export {
+  t as default
+};
+//# sourceMappingURL=chart.css.js.map

package/mtds/chart/chart.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \":host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--ds-size-6);\\n\\n\\t--mtdsc-chart-aspect: 16 / 9;\\n\\t--mtdsc-chart-axis-border: var(--ds-border-width-default) solid\\n\\t\\tvar(--ds-color-border-subtle);\\n\\t--mtdsc-chart-axis-gap: var(--ds-size-4);\\n\\t--mtdsc-chart-border-width: var(--ds-border-width-default);\\n\\t--mtdsc-chart-border-color: #054449; /*var(--ds-color-border-default);*/\\n\\t--mtdsc-chart-color: var(--ds-color-surface-tinted);\\n\\t--mtdsc-chart-color-1: #116e6b; /* var(--ds-color-base-default); */\\n\\t--mtdsc-chart-color-2: #cae8ca; /*var(--ds-color-surface-active); */\\n\\t--mtdsc-chart-color-3: #b6d9f2;\\n\\t--mtdsc-chart-color-4: #feecbe; /*var(--ds-color-warning-surface-hover);*/\\n\\t--mtdsc-chart-color-5: #fdd2c9; /*var(--ds-color-danger-surface-active);*/\\n\\t--mtdsc-chart-color-6: var(--ds-color-neutral-surface-tinted);\\n}\\n\\n[data-event-proxy] {\\n\\tcursor: pointer;\\n}\\n\\n.pie {\\n\\toverflow: visible;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n}\\n.pie > path {\\n\\tfill: var(--color);\\n\\toutline: none;\\n\\tstroke-width: var(--mtdsc-chart-border-width);\\n\\tstroke: var(--mtdsc-chart-border-color);\\n\\ttransform-origin: center;\\n\\ttransition: scale 0.2s;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.pie > path:focus-visible,\\n.pie > path:hover {\\n\\tscale: 1.05;\\n}\\n\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis {\\n\\tdisplay: none;\\n}\\n\\n.axis {\\n\\tfont-size: var(--ds-body-sm-font-size);\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tdisplay: grid;\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-template-columns: fit-content(7em) 1fr;\\n\\tgrid-template-rows: 1fr auto;\\n\\tgrid-template-areas:\\n\\t\\t\\\"y-axis chart\\\"\\n\\t\\t\\\"y-axis x-axis\\\";\\n}\\n\\n.axis::before {\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--ds-border-width-default)\\n\\t\\tvar(--ds-border-width-default);\\n\\tborder-bottom-left-radius: var(--ds-border-radius-lg);\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup {\\n\\tbox-sizing: border-box;\\n\\tdisplay: grid;\\n\\tposition: relative; /* Help .lineContainer positioning */\\n}\\n\\n.axisGroups {\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template: subgrid / none;\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup {\\n\\tgrid-row: inherit;\\n\\tgrid-template: inherit;\\n}\\n.axisGroup::after {\\n\\tcontent: attr(data-label);\\n}\\n.axisSteps {\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\tplace-content: end start;\\n\\ttext-align: right;\\n}\\n.axisStep::after {\\n\\tborder-bottom: var(--mtdsc-chart-axis-border);\\n\\tcontent: \\\"\\\";\\n}\\n.axisStep::before {\\n\\tcontent: attr(data-label);\\n\\ttranslate: 0 50%;\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .axisSteps,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroups {\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: none / subgrid;\\n\\tpadding: var(--mtdsc-chart-axis-gap) 0;\\n\\trow-gap: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: right;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n\\tgrid-template: inherit;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps {\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep {\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"column\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: row;\\n}\\n\\n.bar {\\n\\t--size: calc(var(--value) / var(--total, 1) * 100%);\\n\\talign-self: end;\\n\\tbackground: var(--color);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tborder-radius: var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0 0;\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\twidth: 100%;\\n}\\n.bar:focus-visible,\\n.linePoint:focus-visible {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n\\tz-index: 2; /* z-index to place on top when outlined */\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .bar {\\n\\tborder-radius: 0 var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0;\\n\\twidth: var(--size);\\n\\theight: 100%;\\n\\talign-self: start;\\n}\\n\\n/* Prevent double border - using margin to see border around bars */\\n/* Prevent double border - using border to avoid affecting size */\\n:host(:not([data-variant])) .bar + .bar,\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-left: -1px;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar {\\n\\tborder-bottom: none;\\n}\\n:host([data-variant=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-top: -1px;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar {\\n\\tborder-left: none;\\n}\\n\\n.lineContainer {\\n\\talign-items: flex-start;\\n\\tdisplay: flex;\\n\\tjustify-content: space-between;\\n\\tpointer-events: none;\\n\\tgrid-row: chart;\\n}\\n.lineContainer > svg,\\n.lineContainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n.lineContainer > svg {\\n\\toverflow: clip visible;\\n}\\n.lineContainer > div[role=\\\"listitem\\\"] {\\n\\tdisplay: contents;\\n}\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups {\\n\\tpadding: 0;\\n}\\n\\n.line,\\n.lineShade {\\n\\tfill: none;\\n\\tstroke: var(--color);\\n\\tstroke-linejoin: round;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 3;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.line {\\n\\tfilter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */\\n}\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n.linePoint {\\n\\t--size: var(--ds-size-3);\\n\\tbackground-color: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\tmargin: calc(var(--size) / -2);\\n\\tpadding: 0;\\n\\tpointer-events: all;\\n\\tposition: relative;\\n\\ttop: calc(100% - var(--value) / var(--total, 1) * 100%);\\n\\ttransition: scale 0.2s;\\n\\twidth: var(--size);\\n\\tz-index: 2;\\n}\\n.linePoint:focus-visible,\\n.linePoint:hover {\\n\\tscale: 1.3;\\n}\\n.linePoint::before {\\n\\tcontent: \\\"\\\";\\n\\tinset: calc(var(--ds-size-2) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n.legends {\\n\\talign-items: center;\\n\\tdisplay: flex;\\n\\tflex-wrap: wrap;\\n\\tgap: var(--ds-size-2) var(--ds-size-5);\\n\\tjustify-content: center;\\n}\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--ds-size-2);\\n}\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tbox-sizing: border-box;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: inline-block;\\n\\theight: var(--ds-size-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--ds-size-5);\\n}\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/chart/chart.d.ts

@@ -1,6 +1,16 @@
+import type * as ReactTypes from "react";
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            "mtds-chart": ReactTypes.JSX.IntrinsicElements["div"] & {
+                class?: string;
+            };
+        }
+    }
+}
 export type ChartProps = React.ComponentPropsWithoutRef<"div"> & {
-    "data-variant"?: "bar" | "column" | "column-stacked" | "area" | "line" | "doughnut";
+    "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie" | `area-${number}` | `line-${number}`;
 };
-export declare const Chart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    "data-variant"?: "bar" | "column" | "column-stacked" | "area" | "line" | "doughnut";
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const Chart: ReactTypes.ForwardRefExoticComponent<Omit<ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie" | `area-${number}` | `line-${number}`;
+} & ReactTypes.RefAttributes<HTMLDivElement>>;

package/mtds/chart/chart.stories.d.ts

@@ -4,7 +4,22 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        [x: string]: any;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const React: Story;
+export declare const Bar: Story;
+export declare const BarStacked: Story;
+export declare const Column: Story;
+export declare const ColumnStacked: Story;
+export declare const Line: Story;
+export declare const LineStraight: Story;
+export declare const Area: Story;
+export declare const Doughnut: Story;
+export declare const Pie: Story;
+export declare const WithCustomTooltips: Story;
+export declare const WithCustomInteractions: Story;

package/mtds/details/details.d.ts

@@ -1,5 +1,9 @@
-export type DetailsProps = React.ComponentPropsWithoutRef<"details">;
+export type DetailsProps = React.ComponentPropsWithoutRef<"details"> & {
+    "data-variant"?: "default" | "card";
+};
 export type SummaryProps = React.ComponentPropsWithoutRef<"summary">;
-export declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>> & {
+export declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & {
+    "data-variant"?: "default" | "card";
+} & React.RefAttributes<HTMLDetailsElement>> & {
     Summary: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 };

package/mtds/details/details.js.map

@@ -1 +1 @@
-{"version":3,"file":"details.js","sources":["../../designsystem/details/details.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type DetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst DetailsComp = forwardRef<HTMLDetailsElement, DetailsProps>(\n\tfunction Details(props, ref) {\n\t\treturn (\n\t\t\t<u-details ref={ref} {...toCustomElementProps(props, styles.details)} />\n\t\t);\n\t},\n);\n\nexport type SummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst DetailsSummary = forwardRef<HTMLElement, SummaryProps>(\n\tfunction DetailsSummary(props, ref) {\n\t\treturn <u-summary ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Details = Object.assign(DetailsComp, { Summary: DetailsSummary });\n"],"names":["DetailsComp","forwardRef","props","ref","jsx","toCustomElementProps","styles","DetailsSummary","Details"],"mappings":";;;;AAKA,MAAMA,IAAcC;AAAA,EACnB,SAAiBC,GAAOC,GAAK;AAC5B,WACC,gBAAAC,EAAC,eAAU,KAAAD,GAAW,GAAGE,EAAqBH,GAAOI,EAAO,OAAO,GAAG;AAAA,EAExE;AACD,GAGMC,IAAiBN;AAAA,EACtB,SAAwBC,GAAOC,GAAK;AACnC,6BAAQ,aAAA,EAAU,KAAAA,GAAW,GAAGE,EAAqBH,CAAK,GAAG;AAAA,EAC9D;AACD,GAEaM,IAAU,OAAO,OAAOR,GAAa,EAAE,SAASO,GAAgB;"}
+{"version":3,"file":"details.js","sources":["../../designsystem/details/details.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type DetailsProps = React.ComponentPropsWithoutRef<\"details\"> & {\n\t\"data-variant\"?: \"default\" | \"card\";\n};\nconst DetailsComp = forwardRef<HTMLDetailsElement, DetailsProps>(\n\tfunction Details(props, ref) {\n\t\treturn (\n\t\t\t<u-details ref={ref} {...toCustomElementProps(props, styles.details)} />\n\t\t);\n\t},\n);\n\nexport type SummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst DetailsSummary = forwardRef<HTMLElement, SummaryProps>(\n\tfunction DetailsSummary(props, ref) {\n\t\treturn <u-summary ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Details = Object.assign(DetailsComp, { Summary: DetailsSummary });\n"],"names":["DetailsComp","forwardRef","props","ref","jsx","toCustomElementProps","styles","DetailsSummary","Details"],"mappings":";;;;AAOA,MAAMA,IAAcC;AAAA,EACnB,SAAiBC,GAAOC,GAAK;AAC5B,WACC,gBAAAC,EAAC,eAAU,KAAAD,GAAW,GAAGE,EAAqBH,GAAOI,EAAO,OAAO,GAAG;AAAA,EAExE;AACD,GAGMC,IAAiBN;AAAA,EACtB,SAAwBC,GAAOC,GAAK;AACnC,6BAAQ,aAAA,EAAU,KAAAA,GAAW,GAAGE,EAAqBH,CAAK,GAAG;AAAA,EAC9D;AACD,GAEaM,IAAU,OAAO,OAAOR,GAAa,EAAE,SAASO,GAAgB;"}

package/mtds/illustrations/bucket-feed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="233" height="386" fill="none" viewBox="0 0 233 386"><path fill="#116E6B" d="M14.54 168.68c0-16.86.83-57.32 12.82-90.24 10.88-29.9 33.1-50.9 48.65-58.65 15.54-7.7 63.55-14.96 91.78 5.23 28.23 20.19 38.96 50.96 41.43 62.2 2.48 11.26 9.18 50.23 6.7 81.46l9.9 2.82s0-30.54-1.41-48.45c-1.42-17.91-8.13-55.83-21.2-75.84C190.14 27.2 170.71 2.63 124.42.17c-46.27-2.46-73.5 22.8-87.99 39.66C21.94 56.69 9.77 81.62 6.86 112.52s-2.04 44.24-.7 61.8l8.38-5.61v-.03Z"/><path fill="#116E6B" d="M229.49 158.79c0 13.84-51.1 25.08-114.11 25.08S1.27 172.62 1.27 158.8c0 0 3.79 33.38 4.9 56.5.97 20.7 8.37 99 8.7 102.86.73 8.05 3.36 30.96 3.36 30.96 0 20.36 43.34 36.89 96.78 36.89 53.45 0 95.96-16.86 96.79-36.9 0 0 3.14-31.54 5.2-51.88 1.76-17.32 3.82-62.9 6.25-85.3 1.41-13.14 6.24-53.13 6.24-53.13Z"/><path fill="#F4ECE6" d="m96.71 78.64 14.91 2.06c1 .14 1.7 1.05 1.56 2.05l-.93 6.72 10.9 2.24 17.8-12.28a1.82 1.82 0 0 1 2.54.46l8.55 12.4c.57.82.36 1.95-.46 2.53l-3.07 2.1 5 1.03 10.17-.49c1-.04 1.86.73 1.9 1.74l.18 3.6 4.53-3.12a1.82 1.82 0 0 1 2.54.47l8.55 12.38c.57.83.36 1.97-.47 2.54l-2.66 1.84 9.97 8.12 7.4-5.1a1.82 1.82 0 0 1 2.53.47l8.55 12.38c.25.38.35.8.31 1.22l7.2-1.96c.97-.27 1.97.3 2.24 1.28l3.76 13.73c8.17 3.9 12.79 8.31 12.79 12.99 0 15.73-52.16 28.48-116.5 28.48S0 175.77 0 160.04c0-2.7 1.54-5.31 4.4-7.79v-5.2l-.47-.14a1.82 1.82 0 0 1-1.26-2.25l4.1-14.48A1.82 1.82 0 0 1 9 128.92l13.75 3.88 3.2-2.2-.54-11.1c-.05-1.01.72-1.87 1.73-1.92l13.82-.66c-.04-.25-.03-.52.05-.78l4.1-14.48a1.82 1.82 0 0 1 2.24-1.26l15.86 4.49 22.23-15.34a1.82 1.82 0 0 1 2.54.47l4.42 6.41 2.24-16.23c.14-1 1.06-1.7 2.06-1.56Z"/></svg>

package/mtds/illustrations/index.json

@@ -126,6 +126,18 @@
 		"categories": ["Kosmetikk"],
 		"tags": ["tube", "håndkrem", "ansiktskrem", "hudkrem", "hudpleieprodukt"]
 	},
+	"supplement-jar.svg": {
+		"categories": ["Kosttilskudd"],
+		"tags": ["krukke", "glass", "kosttilskudd", "burk"]
+	},
+	"supplement-tube.svg": {
+		"categories": ["Kosttilskudd"],
+		"tags": ["tube", "glass", "kosttilskudd", "reagensrør"]
+	},
+	"supplement-group.svg": {
+		"categories": ["Kosttilskudd"],
+		"tags": ["tube", "krukke", "bruk", "glass", "kosttilskudd", "reagensrør"]
+	},
 	"apple-cup.svg": {
 		"categories": ["Mat"],
 		"tags": ["eple", "kaffekopp", "te", "frukt", "drikke"]
@@ -456,6 +468,14 @@
 		"categories": ["Utstyr"],
 		"tags": ["høygaffel", "gårdsdrift", "bondegård"]
 	},
+	"bucket.svg": {
+		"categories": ["Utstyr"],
+		"tags": ["bøtte", "gårdsdrift", "bondegård"]
+	},
+	"bucket-feed.svg": {
+		"categories": ["Utstyr"],
+		"tags": ["bøtte", "for", "mat", "gårdsdrift", "bondegård"]
+	},
 	"heart-cat.svg": {
 		"categories": ["Dyr"],
 		"tags": ["hjerte", "katt", "dyr", "kjæledyr", "dyrevelferd"]

package/mtds/illustrations/supplement-group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="672" height="528" fill="none" viewBox="0 0 672 528"><path fill="#153F7B" d="M334.35 177.23c-6-19.89-19.34-38.62-38.48-45.96-7.16-2.7-15.08-4.05-21.08-8.88-5.6-4.64-4.64-10.62-4.64-19.12H67.88c0 11.4.58 13.33-4.26 17.77-5.41 5.02-12.76 6.95-19.53 10.04a68.47 68.47 0 0 0-20.3 13.7C9.67 158.12 2.32 176.47.97 195.97c-1.74 26.07-.39 52.72-.39 78.79C.38 328.24 0 381.92 0 435.4c0 18.92.58 39.58 13.15 53.68 14.5 16.22 38.87 17.57 60.53 17.57 62.46.39 124.92.58 187.38.97 23.4 0 49.9-1.16 65.17-18.93 12.38-14.48 13.15-35.14 13.15-54.06.39-65.27.58-130.54.97-195.81 0-20.66 0-41.9-6-61.6Z"/><path fill="#1E1A28" d="M295.07 74.56V57.09c0-5.24-.2-11.06-3.68-15.13-4.26-5.05-11.63-5.43-18.22-5.43h-46.31c-55.42-.2-110.65-.4-165.88-.4-3.49 0-7.56 0-10.07 2.72-2.33 2.33-2.72 6.21-2.91 9.51L46.84 76.5v20.17c0 3.7 4.07 6.6 9.1 6.6h229.83c5.04 0 9.1-2.9 9.1-6.6V74.56h.2Z"/><path fill="#116E6B" d="M477.6 86.85s.83-.4.85-.48l-131.9 64.34s3.8 7.51 4.65 9.16c4.58 9.38 18.55 38.39 18.55 38.39 1.17 2.4 25.9 52.5 36.75 75.11 14.88 31 30.27 61.8 45.2 92.65 17.53 36.2 35.12 72.02 52.68 108.03 5.92 12.13 10.63 24.67 23.66 30.9 6.53 3.14 14.24 3.33 21.38 1.86 11.36-2.32 23.22-7.86 33.63-12.88.78-.38 38.14-19.09 41.08-20.82 10-6.1 19.26-15.72 21.44-27.61 2.44-13.35-5.43-25.87-10.99-37.4-6.8-13.94-14.68-28.59-21.04-42.51l-50.1-102.72c-14.38-29.48-28.32-59.95-43.37-88.92-.74-1.52-42.68-86.75-42.48-87.1Z"/><path fill="#ED9A32" d="M327.19 146.62c1.74 2.44 3.87 4.44 6.63 5.6 1.82.74 3.68 1.42 5.66 1.49 5.21.31 10.02-3.07 14.55-5.28l8.13-3.96 22-10.73c17.62-8.6 35.27-17.14 52.96-25.7l26.83-13.1c8.27-4.03 17.65-6.66 21.64-15.84 1.83-4.24.03-9.45-1.77-13.38-2.87-6.39-20.12-40.87-23.13-47.8-2.06-4.72-8.46-10.6-13.47-11.62-2.22-.44-6.17-.53-8.28.5 0 0-29.44 14.6-38.5 19.03-4.87 2.37-9.67 4.29-14.4 6.96-6.42 3.56-51.1 24.92-52.54 25.69l-6.4 3.12c-7.24 3.53-17.85 6.76-22.6 13.64a20.33 20.33 0 0 0-2.4 5.43c-1.86 5.83-1.02 12.05 1.72 17.41.26.54 22.86 47.75 23.42 48.52l-.05.02Z"/></svg>

package/mtds/illustrations/supplement-jar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="218" height="302" fill="none" viewBox="0 0 218 302"><path fill="#153F7B" d="M214.16 90.37c-3.84-12.74-12.39-24.74-24.65-29.44-4.58-1.73-9.66-2.6-13.5-5.69-3.6-2.96-2.97-6.8-2.97-12.24H43.48c0 7.3.37 8.53-2.73 11.38-3.47 3.21-8.17 4.45-12.5 6.43a43.85 43.85 0 0 0-13.01 8.78C6.19 78.13 1.49 89.88.62 102.37c-1.12 16.7-.25 33.77-.25 50.46C.25 187.1 0 221.48 0 255.74c0 12.12.37 25.36 8.42 34.39 9.3 10.39 24.9 11.25 38.77 11.25 40.01.25 80.02.37 120.03.62 14.98 0 31.95-.74 41.74-12.12 7.92-9.28 8.42-22.51 8.42-34.63.25-41.81.37-83.62.62-125.42 0-13.24 0-26.84-3.84-39.46Z"/><path fill="#1E1A28" d="M189 24.6V13.43c0-3.35-.12-7.08-2.36-9.7C183.91.5 179.2.26 174.97.26h-29.66C109.8.12 74.44 0 39.06 0c-2.23 0-4.84 0-6.45 1.74-1.5 1.5-1.74 3.98-1.87 6.09L30 25.85v12.93c0 2.36 2.6 4.22 5.83 4.22h147.21c3.23 0 5.84-1.86 5.84-4.23V24.61h.12Z"/></svg>

package/mtds/illustrations/supplement-tube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="113" height="321" fill="none" viewBox="0 0 113 321"><path fill="#116E6B" d="M103.37 57.03s.6 0 .63-.03H10s.07 5.4.1 6.58c0 6.69-.1 27.3-.1 27.3 0 1.72.18 37.5.07 53.57-.14 22.02.07 44.08 0 66.03-.07 25.76 0 51.32 0 76.98 0 8.65-.8 17.2 4.95 24.44 2.87 3.64 7.26 5.91 11.78 7.07 7.2 1.85 15.57 2 22.97 2.03.57 0 27.33-.28 29.5-.45 7.47-.7 15.5-3.65 20.1-9.88 5.16-7 4.14-16.42 4.17-24.6 0-9.95-.42-20.6-.17-30.4v-73.2c0-21 .52-42.47 0-63.36 0-1.09-.21-61.94 0-62.08Z"/><path fill="#ED9A32" d="M0 49.21c.32 1.9.98 3.64 2.25 5.08.84.95 1.71 1.86 2.84 2.45 2.9 1.65 6.63 1.05 9.85 1.05h21.47c12.56 0 25.12.04 37.71.07h19.12c5.9 0 12.04 1.12 16.91-3.04 2.25-1.93 2.67-5.43 2.74-8.2.14-4.49-.1-29.18.1-34.02.14-3.29-1.9-8.47-4.49-10.47-1.16-.88-3.4-2.03-4.9-2.03 0 0-21.06.14-27.51.14-3.47 0-6.77-.25-10.24-.04-4.7.25-36.42 0-37.47.04h-4.56c-5.16 0-12.17-1.12-16.84 1.5A13.04 13.04 0 0 0 4.07 4.2a14.74 14.74 0 0 0-3.9 10.5c0 .4-.24 33.91-.13 34.51H0Z"/></svg>

package/mtds/index.d.ts

@@ -1,9 +1,9 @@
 export { UHTMLComboboxElement } from '@u-elements/u-combobox';
 export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement, } from '@u-elements/u-tabs';
 export { version } from '../package.json';
-export { analytics } from './analytics/analytics';
-export { toggleAppExpanded } from './app/app-observer';
-export { pagination } from './pagination/pagination-helper';
+export * from './analytics/analytics';
+export * from './app/app-observer';
+export * from './pagination/pagination-helper';
 export declare const styles: {
 alert: string;
 app: string;
@@ -47,6 +47,6 @@ prose: string;
 validation: string;
 body: string;
 };
-export { toast } from './toast/toast-helper';
+export * from './toast/toast-helper';
 export type Size = "sm" | "md" | "lg";
 export type HeadingSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";