@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/validation.mdx

@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './validation.stories';
+
+<Meta of={stories} />
+
+# Validation
+> Validation sjekker om dataene brukeren har angitt i et skjema eller et input-felt er gyldige i forhold til forhåndsdefinerte regler. Den gir tilbakemelding til brukeren om eventuelle feil og forhindrer at ugyldige data sendes videre til systemet.
+
+## Kode
+- Legg klassen `validation` på typisk `<div>`
+- Bruk `data-field="validation"` eller `data-field="counter"` for å knytte validering til et [field](?path=/docs/designsystem-field--docs)
+<Canvas of={stories.Default} />
+
+# Farger
+- Bruk `data-color="danger | success | info | warning"`
+<Canvas of={stories.Colors} />
+
+<CssVariables component="validation" />

package/mtds/ai/validation.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, Grid, Input, Validation } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Validation",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Ledetekst</label>
+			<p data-field="desciption">Beskrivelse</p>
+			<input type="text" className={styles.input} />
+			<div className={styles.validation} data-field="validation">
+				Feilmelding
+			</div>
+		</ds-field>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Field>
+			<Field.Label>Ledetekst</Field.Label>
+			<Field.Description>Beskrivelse</Field.Description>
+			<Input />
+			<Validation>Feilmelding</Validation>
+		</Field>
+	),
+};
+
+export const Colors: Story = {
+	render: () => (
+		<Grid>
+			<Validation data-color="danger">Feilmelding</Validation>
+			<Validation data-color="success">Suksess</Validation>
+			<Validation data-color="info">Informasjon</Validation>
+			<Validation data-color="warning">Advarsel</Validation>
+		</Grid>
+	),
+};

package/mtds/atlas/atlas-element.js

@@ -19,7 +19,7 @@ class r extends g {
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }).append(m("figure")), C(this, `@layer leaflet{${h}}
-@layer mt.v3-2-9design{${b}`);
+@layer mt.v3-3-0design{${b}`);
   }
   connectedCallback() {
     const t = this.shadowRoot?.lastElementChild, e = a(this, "data-cluster") ?? "false", o = new i.TileLayer(k, {

package/mtds/chart/chart-lines.js

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

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

@@ -1 +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 || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", { class: `lineContainer`, role: \"list\" });\n\t\tlineContainer.style.setProperty(\"--color\", values[0].color); // Use color of first column as default for line\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\tconst point = tag(\"div\", {\n\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\"data-event\": event,\n\t\t\t\ttabindex: \"0\",\n\t\t\t\tclass: \"linePoint\",\n\t\t\t\trole: \"img\",\n\t\t\t});\n\n\t\t\tpoint.style.setProperty(\"--value\", `${number}`); // Use color of first column as default for point\n\t\t\tcol.appendChild(point);\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","point","points","s","x","y","i","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":"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"}
+{"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 || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", { class: `lineContainer`, role: \"list\" });\n\t\tlineContainer.style.setProperty(\"--color\", values[0].color); // Use color of first column as default for line\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 }, index) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tconst point = tag(\"div\", {\n\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\"data-event\": event,\n\t\t\t\ttabindex: \"0\",\n\t\t\t\tclass: \"linePoint\",\n\t\t\t\trole: \"img\",\n\t\t\t});\n\n\t\t\tattr(col, \"data-label\", data[0][index + 1]?.value);\n\t\t\tpoint.style.setProperty(\"--value\", `${number}`); // Use color of first column as default for point\n\t\t\tcol.appendChild(point);\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","point","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.css.js

@@ -18,6 +18,8 @@ const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 :host([data-variant="doughnut"]) .axis,
 :host([data-variant="pie"]) .axis { display: none }
 :host([data-labels="false"]) .axisGroup::before { position: absolute; pointer-events: none; opacity: 0 } /* Keep available for screen readers */
+:host([data-labels="false"]) .lineContainer > div::before,
+:host([data-labels="false"]) .lineContainer > div::after { display: none }
 
 .axis {
 	display: grid;
@@ -122,7 +124,20 @@ const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 .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 }
+.lineContainer > div { position: relative; height: 100% }
+.lineContainer > div + div::before {
+	border-left: var(--mtdsc-chart-axis-border);
+	content: '';
+	inset: 0 auto 0 0;
+	position: absolute;
+}
+
+.lineContainer > div::after {
+	content: attr(data-label) / '';
+	position: absolute;
+	top: 100%;
+	translate: -50%;
+}
 
 :host([data-variant|="line"]) .axisGroups,
 :host([data-variant|="area"]) .axisGroups { padding: 0 }

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

@@ -1 +1 @@
-{"version":3,"file":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \"/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\\n:host(:not([hidden])) { display: grid; gap: var(--mtds-6) }\\n[data-event] { cursor: pointer } /* Used to forward clicks from Chart ShaowDOM to relevant cell in child table */\\n\\n.pie { overflow: visible; aspect-ratio: var(--mtdsc-chart-aspect) }\\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 { scale: 1.05 }\\n:host([data-steps=\\\"false\\\"]) .axisStep::before,\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis { display: none }\\n:host([data-labels=\\\"false\\\"]) .axisGroup::before { position: absolute; pointer-events: none; opacity: 0 } /* Keep available for screen readers */\\n\\n.axis {\\n\\tdisplay: grid;\\n\\tfont-size: var(--mtds-body-sm-font-size);\\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\\tborder-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);\\n\\tborder-color: var(--mtdsc-chart-axis-edge-color);\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--mtdsc-chart-axis-edge-width) var(--mtdsc-chart-axis-edge-width);\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tpointer-events: none;\\n\\tz-index: 2;\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup { box-sizing: border-box; display: grid; position: relative } /* Help .lineContainer positioning */\\n.axisGroups {\\n\\t--gap: max(1px, clamp(.5%, calc(10% / var(--bars) * var(--groups)), var(--mtdsc-chart-axis-gap)));\\n\\tgap: var(--mtdsc-chart-axis-gap) var(--gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template-rows: subgrid;\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup { grid-row: inherit; grid-template: inherit }\\n.axisGroup::before { order: 1; content: attr(data-label); direction: ltr; min-width: 0 } /* Allow word-wrapping */\\n:host(:not([data-variant|=\\\"bar\\\"])) { .axisGroup::before { justify-self: center; text-align: start; writing-mode: vertical-rl } }\\n\\n.axisSteps { align-items: end; aspect-ratio: var(--mtdsc-chart-aspect); grid-area: chart / y-axis / chart / chart; grid-auto-rows: 1fr; grid-template: 1px / subgrid }\\n.axisStep { align-items: start; grid-column: inherit; grid-template-columns: inherit; height: 1px; text-align: right }\\n.axisStep::after { border-bottom: var(--mtdsc-chart-axis-border); content: \\\"\\\" }\\n.axisStep::before { content: attr(data-label) / \\\"\\\"; translate: 0 -50% }  /* Hide form screen readers */\\n.axisStep[data-label=\\\"0\\\"]::after { opacity: 0 } /* Hide 0 line as it overlapps with .axis::before */\\n\\n/* Reduce amount of steps if small space */\\n:host(:not([data-variant|=\\\"bar\\\"])) .axisStepsYHalf .axisStep:nth-last-child(even) { display: none }\\n:host(:not([data-variant|=\\\"bar\\\"])) .axisStepsYHalf .axisSteps:has(.axisStep:nth-last-child(even):first-child) { grid-template-rows: 0.5fr }\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisStep:nth-last-child(even) { display: none }\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisSteps:has(.axisStep:nth-last-child(even):first-child) { grid-template-columns: 0.5fr }\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup { direction: rtl }\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup > * { direction: ltr }\\n:host([data-variant|=\\\"bar\\\"]) .axisGroups {\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgap: 1% var(--mtdsc-chart-axis-gap);\\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|=\\\"bar\\\"]) .axisGroup::before { align-self: center }\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup { grid-column: inherit; grid-row: auto }\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps { align-items: stretch; aspect-ratio: auto; grid-area: chart / chart / x-axis / chart; grid-auto-columns: 1fr; grid-template: subgrid / 1px }\\n:host([data-variant|=\\\"bar\\\"]) .axisStep { align-items: stretch; grid-row: inherit; grid-column: auto; grid-template-rows: inherit; grid-template-columns: none; text-align: center }\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::after { order: -1; border-left: var(--mtdsc-chart-axis-border); border-bottom: 0 }\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::before { translate: -50% 0 }\\n\\n.axisGroupContent { display: flex }\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent { flex-direction: column-reverse }\\n:host([data-variant=\\\"bar\\\"]) .axisGroupContent { flex-direction: column }\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent { flex-direction: row }\\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(--mtds-border-radius-sm) var(--mtds-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 { box-shadow: var(--mtdsc-focus-boxShadow); outline: var(--mtdsc-focus-outline); outline-offset: var(--mtds-border-width-focus); z-index: 2 }\\n:host([data-variant|=\\\"bar\\\"]) .bar { border-radius: 0 var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0; width: var(--size); height: 100%; align-self: start }\\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=\\\"column\\\"]) .bar + .bar { margin-left: -1px }\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) { border-radius: 0 }\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar { border-bottom: none }\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar { margin-top: -1px }\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) { border-radius: 0 }\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar { border-left: none }\\n\\n.lineContainer { align-items: flex-start; display: flex; justify-content: space-between; pointer-events: none; grid-row: chart }\\n.lineContainer > svg, .lineContainer { position: absolute; width: 100%; height: 100% }\\n.lineContainer > svg { overflow: clip visible }\\n.lineContainer > div[role=\\\"listitem\\\"] { display: contents }\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups { padding: 0 }\\n.lineShade, .line { fill: none; stroke: var(--color); stroke-linejoin: round; stroke-linecap: round; stroke-width: 1.5; vector-effect: non-scaling-stroke }\\n.lineShade { stroke: none; fill: var(--color); opacity: 0.3; mask: linear-gradient(to bottom, black, transparent) }\\n\\n.linePoint, .line, :host:has(.linePoint) .legend::before { filter: var(--_mtdsc-chart-line-filter) } /* Ensure more contrast for line colors */\\n.linePoint {\\n\\t--size: var(--mtds-2);\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--mtds-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 { scale: 1.3 }\\n.linePoint::before { content: \\\"\\\"; position: absolute; inset: calc(var(--mtds-3) * -1); /* Increase click surface */ }\\n:host([data-dots=\\\"false\\\"]) .linePoint { background: none; border: none }\\n\\n:host([data-legend=\\\"false\\\"]) .legends { display: none }\\n.legends { align-items: center; display: flex; flex-wrap: wrap; gap: var(--mtds-2) var(--mtds-5); justify-content: center }\\n.legend { display: flex; align-items: center; gap: var(--mtds-2) }\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--mtds-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(--mtds-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--mtds-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;"}
+{"version":3,"file":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \"/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\\n:host(:not([hidden])) { display: grid; gap: var(--mtds-6) }\\n[data-event] { cursor: pointer } /* Used to forward clicks from Chart ShaowDOM to relevant cell in child table */\\n\\n.pie { overflow: visible; aspect-ratio: var(--mtdsc-chart-aspect) }\\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 { scale: 1.05 }\\n:host([data-steps=\\\"false\\\"]) .axisStep::before,\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis { display: none }\\n:host([data-labels=\\\"false\\\"]) .axisGroup::before { position: absolute; pointer-events: none; opacity: 0 } /* Keep available for screen readers */\\n:host([data-labels=\\\"false\\\"]) .lineContainer > div::before,\\n:host([data-labels=\\\"false\\\"]) .lineContainer > div::after { display: none }\\n\\n.axis {\\n\\tdisplay: grid;\\n\\tfont-size: var(--mtds-body-sm-font-size);\\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\\tborder-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);\\n\\tborder-color: var(--mtdsc-chart-axis-edge-color);\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--mtdsc-chart-axis-edge-width) var(--mtdsc-chart-axis-edge-width);\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tpointer-events: none;\\n\\tz-index: 2;\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup { box-sizing: border-box; display: grid; position: relative } /* Help .lineContainer positioning */\\n.axisGroups {\\n\\t--gap: max(1px, clamp(.5%, calc(10% / var(--bars) * var(--groups)), var(--mtdsc-chart-axis-gap)));\\n\\tgap: var(--mtdsc-chart-axis-gap) var(--gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template-rows: subgrid;\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup { grid-row: inherit; grid-template: inherit }\\n.axisGroup::before { order: 1; content: attr(data-label); direction: ltr; min-width: 0 } /* Allow word-wrapping */\\n:host(:not([data-variant|=\\\"bar\\\"])) { .axisGroup::before { justify-self: center; text-align: start; writing-mode: vertical-rl } }\\n\\n.axisSteps { align-items: end; aspect-ratio: var(--mtdsc-chart-aspect); grid-area: chart / y-axis / chart / chart; grid-auto-rows: 1fr; grid-template: 1px / subgrid }\\n.axisStep { align-items: start; grid-column: inherit; grid-template-columns: inherit; height: 1px; text-align: right }\\n.axisStep::after { border-bottom: var(--mtdsc-chart-axis-border); content: \\\"\\\" }\\n.axisStep::before { content: attr(data-label) / \\\"\\\"; translate: 0 -50% }  /* Hide form screen readers */\\n.axisStep[data-label=\\\"0\\\"]::after { opacity: 0 } /* Hide 0 line as it overlapps with .axis::before */\\n\\n/* Reduce amount of steps if small space */\\n:host(:not([data-variant|=\\\"bar\\\"])) .axisStepsYHalf .axisStep:nth-last-child(even) { display: none }\\n:host(:not([data-variant|=\\\"bar\\\"])) .axisStepsYHalf .axisSteps:has(.axisStep:nth-last-child(even):first-child) { grid-template-rows: 0.5fr }\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisStep:nth-last-child(even) { display: none }\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisSteps:has(.axisStep:nth-last-child(even):first-child) { grid-template-columns: 0.5fr }\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup { direction: rtl }\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup > * { direction: ltr }\\n:host([data-variant|=\\\"bar\\\"]) .axisGroups {\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgap: 1% var(--mtdsc-chart-axis-gap);\\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|=\\\"bar\\\"]) .axisGroup::before { align-self: center }\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup { grid-column: inherit; grid-row: auto }\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps { align-items: stretch; aspect-ratio: auto; grid-area: chart / chart / x-axis / chart; grid-auto-columns: 1fr; grid-template: subgrid / 1px }\\n:host([data-variant|=\\\"bar\\\"]) .axisStep { align-items: stretch; grid-row: inherit; grid-column: auto; grid-template-rows: inherit; grid-template-columns: none; text-align: center }\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::after { order: -1; border-left: var(--mtdsc-chart-axis-border); border-bottom: 0 }\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::before { translate: -50% 0 }\\n\\n.axisGroupContent { display: flex }\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent { flex-direction: column-reverse }\\n:host([data-variant=\\\"bar\\\"]) .axisGroupContent { flex-direction: column }\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent { flex-direction: row }\\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(--mtds-border-radius-sm) var(--mtds-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 { box-shadow: var(--mtdsc-focus-boxShadow); outline: var(--mtdsc-focus-outline); outline-offset: var(--mtds-border-width-focus); z-index: 2 }\\n:host([data-variant|=\\\"bar\\\"]) .bar { border-radius: 0 var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0; width: var(--size); height: 100%; align-self: start }\\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=\\\"column\\\"]) .bar + .bar { margin-left: -1px }\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) { border-radius: 0 }\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar { border-bottom: none }\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar { margin-top: -1px }\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) { border-radius: 0 }\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar { border-left: none }\\n\\n.lineContainer { align-items: flex-start; display: flex; justify-content: space-between; pointer-events: none; grid-row: chart }\\n.lineContainer > svg, .lineContainer { position: absolute; width: 100%; height: 100% }\\n.lineContainer > svg { overflow: clip visible }\\n.lineContainer > div { position: relative; height: 100% }\\n.lineContainer > div + div::before {\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tcontent: '';\\n\\tinset: 0 auto 0 0;\\n\\tposition: absolute;\\n}\\n\\n.lineContainer > div::after {\\n\\tcontent: attr(data-label) / '';\\n\\tposition: absolute;\\n\\ttop: 100%;\\n\\ttranslate: -50%;\\n}\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups { padding: 0 }\\n.lineShade, .line { fill: none; stroke: var(--color); stroke-linejoin: round; stroke-linecap: round; stroke-width: 1.5; vector-effect: non-scaling-stroke }\\n.lineShade { stroke: none; fill: var(--color); opacity: 0.3; mask: linear-gradient(to bottom, black, transparent) }\\n\\n.linePoint, .line, :host:has(.linePoint) .legend::before { filter: var(--_mtdsc-chart-line-filter) } /* Ensure more contrast for line colors */\\n.linePoint {\\n\\t--size: var(--mtds-2);\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--mtds-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 { scale: 1.3 }\\n.linePoint::before { content: \\\"\\\"; position: absolute; inset: calc(var(--mtds-3) * -1); /* Increase click surface */ }\\n:host([data-dots=\\\"false\\\"]) .linePoint { background: none; border: none }\\n\\n:host([data-legend=\\\"false\\\"]) .legends { display: none }\\n.legends { align-items: center; display: flex; flex-wrap: wrap; gap: var(--mtds-2) var(--mtds-5); justify-content: center }\\n.legend { display: flex; align-items: center; gap: var(--mtds-2) }\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--mtds-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(--mtds-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--mtds-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;"}

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

@@ -28,3 +28,4 @@ export declare const WithDotsDisabled: Story;
 export declare const WithCustomInteractions: Story;
 export declare const WithHiddenSteps: Story;
 export declare const WithHiddeLabels: Story;
+export declare const WithHiddeLabelsLine: Story;