@mattilsynet/design 2.1.12 → 2.2.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { attr, IS_BROWSER, useId } from \"../utils\";\nimport css from \"./chart.module.css?raw\";\n\nconst MTDSElement =\n\ttypeof HTMLElement === \"undefined\"\n\t\t? (class {} as typeof HTMLElement)\n\t\t: HTMLElement;\n\nexport type ReactChart = ReactTypes.JSX.IntrinsicElements[\"div\"] & {\n\tclass?: string;\n};\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ReactChart;\n\t\t}\n\t}\n}\n\nconst xmlns = \"http://www.w3.org/2000/svg\";\nexport class MTDSChart extends MTDSElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tlet max = 0;\n\t\tlet rowMax = 0;\n\t\tconst table = this.querySelector(\"table\");\n\t\tconst data = Array.from(table?.rows || [], (row, isTbody) => {\n\t\t\tlet rowTotal = 0;\n\t\t\tconst values = Array.from(row.cells, (cell, isTd) => {\n\t\t\t\tconst val = cell.textContent.trim() || \"\";\n\t\t\t\tconst num = Number(val) || 0;\n\t\t\t\tif (isTbody && isTd) {\n\t\t\t\t\tmax = Math.max(max, num);\n\t\t\t\t\trowTotal += num;\n\t\t\t\t}\n\t\t\t\treturn val;\n\t\t\t});\n\t\t\trowMax = Math.max(rowMax, rowTotal);\n\t\t\treturn values;\n\t\t});\n\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"bar\").split(\"-\");\n\t\tconst isVertical = variant === \"column\";\n\t\tconst isStacked = type === \"stacked\";\n\n\t\tconst smoothing = Number(type || 10) || 0;\n\t\tconst style = createElement(\"style\", {}, css);\n\t\tconst axis = createElement(\"div\", {\n\t\t\t\"aria-label\": data[0][0] || null,\n\t\t\tclass: \"axis\",\n\t\t\trole: \"figure\",\n\t\t});\n\t\tconst groups = createElement(\"div\", { class: \"axisGroups\" });\n\t\tconst steps = toSteps(isStacked ? rowMax : max);\n\t\tconst legend = createElement(\"div\", { class: \"legends\" });\n\t\tconst legends = data\n\t\t\t.slice(1)\n\t\t\t.map(([text], index) =>\n\t\t\t\tcreateElement(\"div\", { class: `legend color-${index + 1}` }, text),\n\t\t\t);\n\t\tconst legendIds = legends.map(useId);\n\n\t\taxis.classList.toggle(\"is-horizontal\", !isVertical);\n\t\taxis.classList.toggle(\"is-vertical\", isVertical);\n\t\taxis.classList.toggle(\"is-stacked\", isStacked);\n\t\taxis.style.setProperty(\"--groups\", `${data.length - 1}`);\n\t\taxis.style.setProperty(\"--total\", `${steps.total}`);\n\t\taxis.append(steps.el, groups);\n\n\t\tif (variant === \"bar\" || variant === \"column\") {\n\t\t\tdata[0].forEach((groupLabel, index) => {\n\t\t\t\tif (index === 0) return; // Skip first column internally so index matches rest of data\n\t\t\t\tconst group = createElement(\"div\", { class: \"axisGroup\" });\n\t\t\t\tconst content = createElement(\"div\", { class: \"axisGroupContent\" });\n\t\t\t\tconst label = createElement(\"div\", { class: \"axisLabel\" }, groupLabel);\n\t\t\t\tgroup.append(content, label);\n\t\t\t\tgroups.append(group);\n\n\t\t\t\tdata.slice(1).forEach((values, legendIndex) => {\n\t\t\t\t\tcontent.append(\n\t\t\t\t\t\tcreateElement(\"div\", {\n\t\t\t\t\t\t\t\"aria-describedby\": legendIds[legendIndex],\n\t\t\t\t\t\t\tclass: `bar color-${legendIndex + 1}`,\n\t\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\t\tstyle: `--value: ${values[index]}`,\n\t\t\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\t\t\ttitle: `${values[0]}: ${values[index]}`,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\n\t\tif (variant === \"line\" || variant === \"area\") {\n\t\t\tconst group = createElement(\"div\", { class: \"axisGroup\" });\n\t\t\tdata.slice(1).forEach(([legend, ...values], legendIndex) => {\n\t\t\t\tconst lineContainer = createElement(\"div\", {\n\t\t\t\t\tclass: `lineContainer color-${legendIndex + 1}`,\n\t\t\t\t\trole: \"list\",\n\t\t\t\t});\n\n\t\t\t\tconst line = document.createElementNS(xmlns, \"svg\");\n\t\t\t\tattr(line, \"aria-hidden\", \"true\");\n\t\t\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\t\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\t\t\tconst path = toPath(\n\t\t\t\t\tvalues.map((value, index, { length }) => [\n\t\t\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t\t\t100 - (Number(value) / steps.total) * 100,\n\t\t\t\t\t]),\n\t\t\t\t\tsmoothing / 100,\n\t\t\t\t);\n\n\t\t\t\tconst linePath = document.createElementNS(xmlns, \"path\");\n\t\t\t\tattr(linePath, \"class\", \"line\");\n\t\t\t\tattr(linePath, \"d\", path);\n\t\t\t\tattr(linePath, \"fill\", \"none\");\n\t\t\t\tattr(linePath, \"stroke\", \"currentColor\");\n\t\t\t\tconst lineBorder = linePath.cloneNode(true) as SVGPathElement;\n\t\t\t\tattr(lineBorder, \"class\", \"lineBorder\");\n\n\t\t\t\tif (variant === \"area\") {\n\t\t\t\t\tconst lineShade = linePath.cloneNode(true) as SVGPathElement;\n\t\t\t\t\tattr(lineShade, \"d\", `M-100,100 L${path.slice(1)}L200,100`);\n\t\t\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\t\t\tline.append(lineShade);\n\t\t\t\t}\n\n\t\t\t\tvalues.forEach((value, index) => {\n\t\t\t\t\tconst col = createElement(\"div\", { role: \"listitem\" });\n\t\t\t\t\tcol.appendChild(\n\t\t\t\t\t\tcreateElement(\"div\", {\n\t\t\t\t\t\t\t\"aria-describedby\": legendIds[legendIndex],\n\t\t\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\t\t\ttitle: `${data[0][index + 1]}: ${value} (${legend})`,\n\t\t\t\t\t\t\tclass: \"linePoint\",\n\t\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\t\tstyle: `--value: ${value}`,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t\tlineContainer.append(col);\n\t\t\t\t});\n\n\t\t\t\tline.append(lineBorder, linePath);\n\t\t\t\tlineContainer.append(line);\n\t\t\t\tgroup.append(lineContainer);\n\t\t\t});\n\t\t\tgroups.append(group);\n\t\t}\n\n\t\tif (variant === \"doughnut\") {\n\t\t\tconst doughnut = document.createElementNS(xmlns, \"svg\");\n\t\t\tconst tot = data.slice(1).reduce((acc, [, val]) => acc + Number(val), 0);\n\t\t\tattr(doughnut, \"class\", \"doughnut\");\n\t\t\tattr(doughnut, \"viewBox\", \"0 0 100 100\");\n\n\t\t\tlet offset = 0;\n\t\t\tconst radius = 50;\n\t\t\tconst inner = 25;\n\n\t\t\tdata.slice(1).forEach(([label, value], legendIndex) => {\n\t\t\t\tconst path = document.createElementNS(xmlns, \"path\");\n\t\t\t\tconst start = offset / tot;\n\t\t\t\toffset += Number(value);\n\t\t\t\tconst end = offset / tot;\n\t\t\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\t\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\t\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\t\t\tconst x0 = Math.cos(a0);\n\t\t\t\tconst y0 = Math.sin(a0);\n\t\t\t\tconst x1 = Math.cos(a1);\n\t\t\t\tconst y1 = Math.sin(a1);\n\t\t\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\t\t\tattr(path, \"aria-describedby\", legendIds[legendIndex]);\n\t\t\t\tattr(path, \"class\", `color-${legendIndex + 1}`);\n\t\t\t\tattr(path, \"d\", d);\n\t\t\t\tattr(path, \"role\", \"img\");\n\t\t\t\tattr(path, \"tabindex\", \"0\");\n\t\t\t\tattr(path, \"title\", label || null);\n\t\t\t\tdoughnut.appendChild(path);\n\t\t\t\tthis.shadowRoot?.append(doughnut);\n\t\t\t});\n\t\t}\n\n\t\tif (variant !== \"doughnut\") this.shadowRoot?.append(axis);\n\n\t\tlegend.append(...legends);\n\n\t\tthis.shadowRoot?.append(style, legend);\n\t}\n}\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-chart\"))\n\twindow.customElements.define(\"mtds-chart\", MTDSChart);\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\nconst getNum = new Intl.NumberFormat().format;\nconst toSteps = (max: number) => {\n\tconst digits = 10 ** (`${~~max}`.length - 1); // Get amount of digits in total number\n\tconst step = max / digits < 5 ? digits / 2 : digits; // If we get less than 5 steps, make smaller steps\n\tconst total = Math.ceil(max / step) * step;\n\tconst el = createElement(\"div\");\n\n\tel.classList.add(\"axisSteps\");\n\tel.append(\n\t\t...Array.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t\t.reverse()\n\t\t\t.map((num) => {\n\t\t\t\tconst label = createElement(\"div\", { class: \"axisLabel\" }, num);\n\t\t\t\tconst value = createElement(\"div\", { class: \"axisStep\" });\n\t\t\t\tvalue.append(label);\n\t\t\t\treturn value;\n\t\t\t}),\n\t);\n\n\treturn { total, el };\n};\n\n/**\n * createElement\n * @description creates element and assigns properties\n * @param taName The tagname of element to create\n * @param props Optional properties to add to the element\n * @return HTMLElement with props\n */\nconst createElement = <TagName extends keyof HTMLElementTagNameMap>(\n\ttagName: TagName,\n\tattrs?: Record<string, string | null>,\n\ttext?: string | null,\n): HTMLElementTagNameMap[TagName] => {\n\tconst el = document.createElement(tagName);\n\tif (text) el.textContent = text;\n\tif (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n\treturn el;\n};\n"],"names":["MTDSElement","xmlns","MTDSChart","max","rowMax","table","data","row","isTbody","rowTotal","values","cell","isTd","val","num","variant","type","attr","isVertical","isStacked","smoothing","style","createElement","css","axis","groups","steps","toSteps","legend","legends","text","index","legendIds","useId","groupLabel","group","content","label","legendIndex","lineContainer","line","path","toPath","value","length","linePath","lineBorder","lineShade","col","doughnut","tot","acc","offset","radius","inner","start","end","largeArc","a0","a1","x0","y0","x1","y1","d","IS_BROWSER","points","x","y","i","a","smooth","add","ax","ay","bx","by","sub","scale","s","all","csX","csY","ceX","ceY","getNum","digits","step","total","el","_","tagName","attrs","key"],"mappings":"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"}

package/mtds/chart/chart.d.ts

@@ -0,0 +1,6 @@
+export type ChartProps = React.ComponentPropsWithoutRef<"div"> & {
+    "data-variant"?: "bar" | "column" | "column-stacked" | "area" | "line" | "doughnut";
+};
+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>>;

package/mtds/chart/chart.module.css.js

@@ -0,0 +1,325 @@
+const t = `:host(:not([hidden])) {
+	display: block;
+	--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-2);
+	--mtdsc-chart-border-color: var(--mtds-color-border-default);
+	--mtdsc-chart-color-text: var(--mtds-color-text-default);
+	--mtdsc-chart-color: var(--mtds-color-surface-tinted);
+	--mtdsc-chart-color-1: #b4cea0;
+	--mtdsc-chart-color-2: #68b096;
+	--mtdsc-chart-color-3: #cde5f2;
+	--mtdsc-chart-border-color-1: var(--mtds-color-success-border-subtle);
+	--mtdsc-chart-border-color-2: var(--mtds-color-info-border-subtle);
+	--mtdsc-chart-border-color-3: var(--mtds-color-warning-border-subtle);
+}
+
+:host([data-variant="doughnut"]) {
+	--mtdsc-chart-aspect: 1 / 1;
+}
+
+.doughnut {
+	overflow: visible;
+	height: 100%;
+	width: 100%;
+}
+.doughnut > path {
+	cursor: pointer;
+	fill: var(--mtdsc-chart-color);
+	outline: none;
+	stroke-width: var(--mtds-border-width-default);
+	/* stroke: var(--mtds-color-border-default); */
+	transform-origin: center;
+	transition: scale 0.2s;
+	vector-effect: non-scaling-stroke;
+}
+.doughnut > path:focus-visible,
+.doughnut > path:hover {
+	scale: 1.05;
+}
+
+.color-1 {
+	--mtdsc-chart-color: var(--mtdsc-chart-color-1);
+	--mtdsc-chart-border-color: var(--mtdsc-chart-border-color-1);
+}
+.color-2 {
+	--mtdsc-chart-color: var(--mtdsc-chart-color-2);
+	--mtdsc-chart-border-color: var(--mtdsc-chart-border-color-2);
+}
+.color-3 {
+	--mtdsc-chart-color: var(--mtdsc-chart-color-3);
+	--mtdsc-chart-border-color: var(--mtdsc-chart-border-color-3);
+}
+
+.axis {
+	aspect-ratio: var(--mtdsc-chart-aspect);
+	display: grid;
+	gap: calc(var(--mtdsc-chart-axis-gap) / 2);
+	grid-template-columns: fit-content(7em) 1fr;
+	grid-template-rows: 1fr auto;
+	grid-template-areas:
+		"y-axis chart"
+		"y-axis x-axis";
+}
+.axisSteps,
+.axisStep,
+.axisGroups,
+.axisGroup {
+	box-sizing: border-box;
+	display: grid;
+	position: relative; /* Help .lineContainer positioning */
+}
+
+.is-horizontal .axisGroups {
+	column-gap: var(--mtdsc-chart-axis-gap);
+	grid-column: chart;
+	grid-row: chart / x-axis;
+	grid-template-rows: subgrid;
+	padding-inline: var(--mtdsc-chart-axis-gap);
+	text-align: center;
+}
+.is-horizontal .axisGroup {
+	grid-row: chart / x-axis;
+	grid-template-rows: inherit;
+}
+.is-horizontal .axisSteps {
+	grid-auto-rows: 1fr;
+	grid-column: y-axis / chart;
+	grid-row: chart;
+	grid-template-columns: subgrid;
+	grid-template-rows: 1px;
+}
+.is-horizontal .axisStep {
+	align-content: flex-end;
+	grid-column: inherit;
+	grid-template-columns: inherit;
+	text-align: right;
+}
+.is-horizontal .axisStep::after {
+	content: "";
+	border-bottom: var(--mtdsc-chart-axis-border);
+}
+.is-horizontal .axisStep .axisLabel {
+	transform: translateY(50%);
+}
+
+.is-vertical .axisSteps,
+.is-vertical .axisGroup {
+	direction: rtl; /* Reverse orders */
+}
+.is-vertical .axisSteps > *,
+.is-vertical .axisGroup > * {
+	direction: ltr;
+}
+.is-vertical .axisGroups {
+	grid-column: y-axis / chart;
+	grid-row: chart;
+	grid-template-columns: subgrid;
+	padding-block: var(--mtdsc-chart-axis-gap);
+	row-gap: var(--mtdsc-chart-axis-gap);
+	text-align: right;
+}
+.is-vertical .axisGroups .axisLabel {
+	align-self: center; /* Since text-align does not work vertically */
+}
+.is-vertical .axisGroup {
+	grid-column: inherit;
+	grid-template-columns: inherit;
+}
+.is-vertical .axisSteps {
+	grid-auto-columns: 1fr;
+	grid-column: chart;
+	grid-row: chart / x-axis;
+	grid-template-columns: 1px;
+	grid-template-rows: subgrid;
+}
+.is-vertical .axisStep {
+	grid-row: inherit;
+	grid-template-rows: inherit;
+	justify-content: flex-start;
+	text-align: center;
+}
+.is-vertical .axisStep::before {
+	content: "";
+	border-left: var(--mtdsc-chart-axis-border);
+}
+.is-vertical .axisStep .axisLabel {
+	transform: translateX(-50%);
+}
+
+.axisGroupContent {
+	display: flex;
+	/* gap: 1px; */
+}
+.is-horizontal.is-stacked .axisGroupContent {
+	flex-direction: column-reverse;
+	row-gap: 0px;
+}
+.is-vertical.is-stacked .axisGroupContent {
+	column-gap: 0px;
+}
+.is-vertical:not(.is-stacked) .axisGroupContent {
+	flex-direction: column;
+}
+
+.bar {
+	--size: calc(var(--value) / var(--total, 1) * 100%);
+	background: var(--mtdsc-chart-color);
+	/* border: 1px solid var(--mtdsc-chart-border-color); */
+	box-sizing: border-box;
+	color: var(--mtdsc-chart-color-text);
+	padding: var(--mtds-1);
+	position: relative; /* Place above .lineContainer */
+}
+.bar:hover,
+.bar: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 */
+}
+
+.is-horizontal .bar {
+	width: 100%;
+	height: var(--size);
+	align-self: flex-end;
+	grid-row: chart;
+} /* grid-row is only used if placed directly in Chart.Axis */
+.is-vertical .bar {
+	width: var(--size);
+	height: 100%;
+	grid-column: chart;
+} /* grid-column is only used if placed directly in Chart.Axis */
+.is-horizontal:not(.is-stacked) .axisGroup .bar + .bar {
+	/* margin-left: -1px; */
+} /* Prevent double border - using margin to see border around bars */
+.is-vertical:not(.is-stacked) .axisGroup .bar + .bar {
+	/* margin-top: -1px; */
+} /* Prevent double border - using margin to see border around bars */
+.is-horizontal.is-stacked .axisGroup .bar + .bar {
+	border-bottom: none;
+} /* Prevent double border - using border to avoid affecting size */
+.is-vertical.is-stacked .axisGroup .bar + .bar {
+	border-left: none;
+} /* Prevent double border - using border to avoid affecting size */
+
+.lineContainer {
+	align-items: flex-start;
+	display: flex;
+	justify-content: space-between;
+	pointer-events: none;
+}
+.lineContainer > svg,
+.lineContainer {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+.lineContainer > svg:first-child {
+	z-index: 2;
+}
+.is-horizontal .lineContainer {
+	grid-row: chart;
+}
+.is-horizontal .lineContainer > svg {
+	overflow: clip visible;
+}
+.is-horizontal .lineContainer > div[role="listitem"] {
+	display: contents;
+}
+.is-horizontal .lineContainer .linePoint {
+	top: calc(100% - var(--value) / var(--total, 1) * 100%);
+}
+.is-vertical .lineContainer {
+	flex-direction: column;
+	grid-column: chart;
+}
+.is-vertical .lineContainer > svg {
+	overflow: visible clip;
+}
+.is-vertical .lineContainer .linePoint {
+	left: calc(var(--value) / var(--total, 1) * 100%);
+}
+
+.line,
+.lineBorder,
+.lineShade {
+	fill: none;
+	stroke: var(--mtdsc-chart-color);
+	stroke-linejoin: round;
+	stroke-linecap: round;
+	stroke-width: 3;
+	vector-effect: non-scaling-stroke;
+}
+.line.line {
+	/* fill: none; /* Use double selector as fill should always be drawn by .lineShade */
+}
+.lineBorder {
+	/* stroke-width: 5;
+	stroke: var(--mtdsc-chart-border-color); */
+}
+.lineShade {
+	stroke: none;
+	fill: var(--mtdsc-chart-color);
+	opacity: 0.15;
+}
+.linePoint {
+	--size: 0.625rem; /* 10px */
+	background-color: var(--mtdsc-chart-color);
+	border-radius: var(--mtds-border-radius-full);
+	/* border: 1px solid var(--mtdsc-chart-border-color); */
+	box-sizing: border-box;
+	margin: calc(var(--size) / -2);
+	padding: 0;
+	pointer-events: all;
+	position: relative;
+	transition: scale 0.2s;
+	width: var(--size);
+	height: var(--size);
+	z-index: 2;
+}
+.linePoint[hidden] {
+	display: block;
+	visibility: hidden;
+} /* All dots need to render to make parent display: flex work, so instead hide visibility */
+.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-6);
+	justify-content: center;
+	margin-top: var(--mtds-6);
+}
+
+.legend {
+	display: flex;
+	align-items: center;
+	gap: var(--mtds-2);
+}
+.legend::before {
+	background-color: var(--mtdsc-chart-color);
+	border-radius: var(--mtds-border-radius-full);
+	/* border: 1px solid var(--mtdsc-chart-border-color); */
+	box-sizing: border-box;
+	content: "";
+	display: inline-block;
+	vertical-align: middle;
+	width: var(--mtds-6);
+	height: var(--mtds-6);
+}
+`;
+export {
+  t as default
+};
+//# sourceMappingURL=chart.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.module.css.js","sources":["../../designsystem/chart/chart.module.css?raw"],"sourcesContent":["export default \":host(:not([hidden])) {\\n\\tdisplay: block;\\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-2);\\n\\t--mtdsc-chart-border-color: var(--ds-color-border-default);\\n\\t--mtdsc-chart-color-text: var(--ds-color-text-default);\\n\\t--mtdsc-chart-color: var(--ds-color-surface-tinted);\\n\\t--mtdsc-chart-color-1: #b4cea0;\\n\\t--mtdsc-chart-color-2: #68b096;\\n\\t--mtdsc-chart-color-3: #cde5f2;\\n\\t--mtdsc-chart-border-color-1: var(--ds-color-success-border-subtle);\\n\\t--mtdsc-chart-border-color-2: var(--ds-color-info-border-subtle);\\n\\t--mtdsc-chart-border-color-3: var(--ds-color-warning-border-subtle);\\n}\\n\\n:host([data-variant=\\\"doughnut\\\"]) {\\n\\t--mtdsc-chart-aspect: 1 / 1;\\n}\\n\\n.doughnut {\\n\\toverflow: visible;\\n\\theight: 100%;\\n\\twidth: 100%;\\n}\\n.doughnut > path {\\n\\tcursor: pointer;\\n\\tfill: var(--mtdsc-chart-color);\\n\\toutline: none;\\n\\tstroke-width: var(--ds-border-width-default);\\n\\t/* stroke: var(--ds-color-border-default); */\\n\\ttransform-origin: center;\\n\\ttransition: scale 0.2s;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.doughnut > path:focus-visible,\\n.doughnut > path:hover {\\n\\tscale: 1.05;\\n}\\n\\n.color-1 {\\n\\t--mtdsc-chart-color: var(--mtdsc-chart-color-1);\\n\\t--mtdsc-chart-border-color: var(--mtdsc-chart-border-color-1);\\n}\\n.color-2 {\\n\\t--mtdsc-chart-color: var(--mtdsc-chart-color-2);\\n\\t--mtdsc-chart-border-color: var(--mtdsc-chart-border-color-2);\\n}\\n.color-3 {\\n\\t--mtdsc-chart-color: var(--mtdsc-chart-color-3);\\n\\t--mtdsc-chart-border-color: var(--mtdsc-chart-border-color-3);\\n}\\n\\n.axis {\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tdisplay: grid;\\n\\tgap: calc(var(--mtdsc-chart-axis-gap) / 2);\\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.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup {\\n\\tbox-sizing: border-box;\\n\\tdisplay: grid;\\n\\tposition: relative; /* Help .lineContainer positioning */\\n}\\n\\n.is-horizontal .axisGroups {\\n\\tcolumn-gap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-column: chart;\\n\\tgrid-row: chart / x-axis;\\n\\tgrid-template-rows: subgrid;\\n\\tpadding-inline: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.is-horizontal .axisGroup {\\n\\tgrid-row: chart / x-axis;\\n\\tgrid-template-rows: inherit;\\n}\\n.is-horizontal .axisSteps {\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-column: y-axis / chart;\\n\\tgrid-row: chart;\\n\\tgrid-template-columns: subgrid;\\n\\tgrid-template-rows: 1px;\\n}\\n.is-horizontal .axisStep {\\n\\talign-content: flex-end;\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\ttext-align: right;\\n}\\n.is-horizontal .axisStep::after {\\n\\tcontent: \\\"\\\";\\n\\tborder-bottom: var(--mtdsc-chart-axis-border);\\n}\\n.is-horizontal .axisStep .axisLabel {\\n\\ttransform: translateY(50%);\\n}\\n\\n.is-vertical .axisSteps,\\n.is-vertical .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n.is-vertical .axisSteps > *,\\n.is-vertical .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n.is-vertical .axisGroups {\\n\\tgrid-column: y-axis / chart;\\n\\tgrid-row: chart;\\n\\tgrid-template-columns: subgrid;\\n\\tpadding-block: var(--mtdsc-chart-axis-gap);\\n\\trow-gap: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: right;\\n}\\n.is-vertical .axisGroups .axisLabel {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n.is-vertical .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n}\\n.is-vertical .axisSteps {\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-column: chart;\\n\\tgrid-row: chart / x-axis;\\n\\tgrid-template-columns: 1px;\\n\\tgrid-template-rows: subgrid;\\n}\\n.is-vertical .axisStep {\\n\\tgrid-row: inherit;\\n\\tgrid-template-rows: inherit;\\n\\tjustify-content: flex-start;\\n\\ttext-align: center;\\n}\\n.is-vertical .axisStep::before {\\n\\tcontent: \\\"\\\";\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n}\\n.is-vertical .axisStep .axisLabel {\\n\\ttransform: translateX(-50%);\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n\\t/* gap: 1px; */\\n}\\n.is-horizontal.is-stacked .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n\\trow-gap: 0px;\\n}\\n.is-vertical.is-stacked .axisGroupContent {\\n\\tcolumn-gap: 0px;\\n}\\n.is-vertical:not(.is-stacked) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n\\n.bar {\\n\\t--size: calc(var(--value) / var(--total, 1) * 100%);\\n\\tbackground: var(--mtdsc-chart-color);\\n\\t/* border: 1px solid var(--mtdsc-chart-border-color); */\\n\\tbox-sizing: border-box;\\n\\tcolor: var(--mtdsc-chart-color-text);\\n\\tpadding: var(--ds-size-1);\\n\\tposition: relative; /* Place above .lineContainer */\\n}\\n.bar:hover,\\n.bar: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.is-horizontal .bar {\\n\\twidth: 100%;\\n\\theight: var(--size);\\n\\talign-self: flex-end;\\n\\tgrid-row: chart;\\n} /* grid-row is only used if placed directly in Chart.Axis */\\n.is-vertical .bar {\\n\\twidth: var(--size);\\n\\theight: 100%;\\n\\tgrid-column: chart;\\n} /* grid-column is only used if placed directly in Chart.Axis */\\n.is-horizontal:not(.is-stacked) .axisGroup .bar + .bar {\\n\\t/* margin-left: -1px; */\\n} /* Prevent double border - using margin to see border around bars */\\n.is-vertical:not(.is-stacked) .axisGroup .bar + .bar {\\n\\t/* margin-top: -1px; */\\n} /* Prevent double border - using margin to see border around bars */\\n.is-horizontal.is-stacked .axisGroup .bar + .bar {\\n\\tborder-bottom: none;\\n} /* Prevent double border - using border to avoid affecting size */\\n.is-vertical.is-stacked .axisGroup .bar + .bar {\\n\\tborder-left: none;\\n} /* Prevent double border - using border to avoid affecting size */\\n\\n.lineContainer {\\n\\talign-items: flex-start;\\n\\tdisplay: flex;\\n\\tjustify-content: space-between;\\n\\tpointer-events: none;\\n}\\n.lineContainer > svg,\\n.lineContainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n.lineContainer > svg:first-child {\\n\\tz-index: 2;\\n}\\n.is-horizontal .lineContainer {\\n\\tgrid-row: chart;\\n}\\n.is-horizontal .lineContainer > svg {\\n\\toverflow: clip visible;\\n}\\n.is-horizontal .lineContainer > div[role=\\\"listitem\\\"] {\\n\\tdisplay: contents;\\n}\\n.is-horizontal .lineContainer .linePoint {\\n\\ttop: calc(100% - var(--value) / var(--total, 1) * 100%);\\n}\\n.is-vertical .lineContainer {\\n\\tflex-direction: column;\\n\\tgrid-column: chart;\\n}\\n.is-vertical .lineContainer > svg {\\n\\toverflow: visible clip;\\n}\\n.is-vertical .lineContainer .linePoint {\\n\\tleft: calc(var(--value) / var(--total, 1) * 100%);\\n}\\n\\n.line,\\n.lineBorder,\\n.lineShade {\\n\\tfill: none;\\n\\tstroke: var(--mtdsc-chart-color);\\n\\tstroke-linejoin: round;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 3;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.line.line {\\n\\t/* fill: none; /* Use double selector as fill should always be drawn by .lineShade */\\n}\\n.lineBorder {\\n\\t/* stroke-width: 5;\\n\\tstroke: var(--mtdsc-chart-border-color); */\\n}\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--mtdsc-chart-color);\\n\\topacity: 0.15;\\n}\\n.linePoint {\\n\\t--size: 0.625rem; /* 10px */\\n\\tbackground-color: var(--mtdsc-chart-color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\t/* border: 1px solid var(--mtdsc-chart-border-color); */\\n\\tbox-sizing: border-box;\\n\\tmargin: calc(var(--size) / -2);\\n\\tpadding: 0;\\n\\tpointer-events: all;\\n\\tposition: relative;\\n\\ttransition: scale 0.2s;\\n\\twidth: var(--size);\\n\\theight: var(--size);\\n\\tz-index: 2;\\n}\\n.linePoint[hidden] {\\n\\tdisplay: block;\\n\\tvisibility: hidden;\\n} /* All dots need to render to make parent display: flex work, so instead hide visibility */\\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-6);\\n\\tjustify-content: center;\\n\\tmargin-top: var(--ds-size-6);\\n}\\n\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--ds-size-2);\\n}\\n.legend::before {\\n\\tbackground-color: var(--mtdsc-chart-color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\t/* border: 1px solid var(--mtdsc-chart-border-color); */\\n\\tbox-sizing: border-box;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: inline-block;\\n\\tvertical-align: middle;\\n\\twidth: var(--ds-size-6);\\n\\theight: var(--ds-size-6);\\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/mtds/external/@u-elements/u-details/dist/u-details.js

@@ -49,7 +49,7 @@ var f = (t, e, n) => {
     const i = "onbeforematch" in this ? "until-found" : !0, s = this.open;
     for (const a of this.children)
       a.nodeName === "U-SUMMARY" && o(a, "aria-expanded", `${s}`);
-    if (this._content && (o(this._content, "aria-hidden", `${!s}`), this._content.hidden = s ? !1 : i), s && this.name) {
+    if (this._content && (o(this._content, "aria-hidden", `${!s}`), o(this._content, "tabindex", s ? null : "-1"), this._content.hidden = s ? !1 : i), s && this.name) {
       const a = g(this).querySelectorAll(
         `${this.nodeName}[name="${this.name}"]`
       );

package/mtds/external/@u-elements/u-details/dist/u-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"u-details.js","sources":["../../../../../node_modules/@u-elements/u-details/dist/u-details.js"],"sourcesContent":["// ../utils.ts\nvar IS_BROWSER = typeof window !== \"undefined\" && typeof window.document !== \"undefined\" && typeof window.navigator !== \"undefined\";\nvar _a;\nIS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n/^Mac/i.test(((_a = navigator.userAgentData) == null ? void 0 : _a.platform) || navigator.platform);\nvar DISPLAY_BLOCK = \":host(:not([hidden])) { display: block }\";\nvar UHTMLElement = typeof HTMLElement === \"undefined\" ? class {\n} : HTMLElement;\nfunction attr(el, name, value) {\n  if (value === void 0) return el.getAttribute(name);\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n}\nvar events = (action, element, rest) => {\n  for (const type of rest[0].split(\",\")) {\n    rest[0] = type;\n    Element.prototype[`${action}EventListener`].apply(element, rest);\n  }\n};\nvar on = (element, ...rest) => events(\"add\", element, rest);\nvar off = (element, ...rest) => events(\"remove\", element, rest);\nvar asButton = (event) => {\n  const isClick = \"key\" in event && (event.key === \" \" || event.key === \"Enter\");\n  if (isClick) event.preventDefault();\n  if (isClick && event.target instanceof HTMLElement) event.target.click();\n  return isClick;\n};\nvar getRoot = (node) => {\n  var _a2;\n  const root = ((_a2 = node.getRootNode) == null ? void 0 : _a2.call(node)) || node.ownerDocument;\n  return root instanceof Document || root instanceof ShadowRoot ? root : document;\n};\nvar createElement = (tagName, text, attrs) => {\n  const el = document.createElement(tagName);\n  if (text) el.textContent = text;\n  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n  return el;\n};\nvar customElements = {\n  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)\n};\nvar declarativeShadowRoot = (style, slot = \"<slot></slot>\") => `<template shadowrootmode=\"open\">${slot}<style>${style}</style></template>`;\n\n// u-details.ts\nvar UHTMLDetailsStyle = `${DISPLAY_BLOCK}\n::slotted(u-summary) { cursor: pointer; display: block }\n::slotted(u-summary)::before { content: ''; display: inline-block; vertical-align: middle; margin-inline: .05em .3125em; border-block: .3125em solid transparent; border-inline-start: .5em solid }\n::slotted(u-summary[aria-expanded=\"true\"])::before { rotate: 90deg }\n:host > [part=\"details-content\"]:not([hidden=\"\"]) { display: block }`;\nvar UHTMLDetailsShadowRoot = declarativeShadowRoot(\n  UHTMLDetailsStyle,\n  '<slot name=\"summary\"></slot><slot part=\"details-content\" hidden=\"until-found\"></slot>'\n);\nvar UHTMLDetailsElement = class extends UHTMLElement {\n  constructor() {\n    super();\n    // Using underscore instead of private fields for backwards compatibility\n    this._content = null;\n    if (!this.shadowRoot)\n      this.attachShadow({ mode: \"open\" }).append(\n        createElement(\"slot\", null, { name: \"summary\" }),\n        createElement(\"slot\", null, { part: \"details-content\" }),\n        createElement(\"style\", UHTMLDetailsStyle)\n      );\n  }\n  // Using ES2015 syntax for backwards compatibility\n  static get observedAttributes() {\n    return [\"open\"];\n  }\n  connectedCallback() {\n    var _a2;\n    this._content = (_a2 = this.shadowRoot) == null ? void 0 : _a2.children[1];\n    attr(this, \"role\", \"group\");\n    on(this._content, \"beforematch\", this);\n    on(this, \"click,keydown\", this);\n    this.attributeChangedCallback();\n  }\n  disconnectedCallback() {\n    if (this._content) off(this._content, \"beforematch\", this);\n    off(this, \"click,keydown\", this);\n    this._content = null;\n  }\n  attributeChangedCallback(prop, prev, next) {\n    const hide = \"onbeforematch\" in this ? \"until-found\" : true;\n    const open = this.open;\n    for (const el of this.children)\n      if (el.nodeName === \"U-SUMMARY\") attr(el, \"aria-expanded\", `${open}`);\n    if (this._content) {\n      attr(this._content, \"aria-hidden\", `${!open}`);\n      this._content.hidden = open ? false : hide;\n    }\n    if (open && this.name) {\n      const uDetailsList = getRoot(this).querySelectorAll(\n        `${this.nodeName}[name=\"${this.name}\"]`\n      );\n      for (const uDetails of uDetailsList)\n        if (uDetails !== this) uDetails.open = false;\n    }\n    if (prop === \"open\" && prev === null !== (next === null))\n      this.dispatchEvent(new Event(\"toggle\"));\n  }\n  handleEvent(event) {\n    const summary = this.querySelector(\":scope > u-summary\");\n    const isSummary = summary == null ? void 0 : summary.contains(event.target);\n    if (event.defaultPrevented) return;\n    if (event.type === \"beforematch\") this.open = true;\n    if (isSummary && event.type === \"keydown\") asButton(event);\n    if (isSummary && event.type === \"click\") this.open = !this.open;\n  }\n  get open() {\n    return this.hasAttribute(\"open\");\n  }\n  set open(value) {\n    attr(this, \"open\", value ? \"\" : null);\n  }\n  get name() {\n    return attr(this, \"name\") || \"\";\n  }\n  set name(value) {\n    attr(this, \"name\", value);\n  }\n};\nvar UHTMLSummaryElement = class extends UHTMLElement {\n  connectedCallback() {\n    attr(this, \"role\", \"button\");\n    this.slot = \"summary\";\n    this.tabIndex = 0;\n  }\n};\ncustomElements.define(\"u-details\", UHTMLDetailsElement);\ncustomElements.define(\"u-summary\", UHTMLSummaryElement);\n\nexport { UHTMLDetailsElement, UHTMLDetailsShadowRoot, UHTMLDetailsStyle, UHTMLSummaryElement };\n"],"names":["IS_BROWSER","_a","DISPLAY_BLOCK","UHTMLElement","attr","el","name","value","events","action","element","rest","type","on","off","asButton","event","isClick","getRoot","node","_a2","root","createElement","tagName","text","attrs","key","val","customElements","instance","UHTMLDetailsStyle","UHTMLDetailsElement","prop","prev","next","hide","open","uDetailsList","uDetails","summary","isSummary","UHTMLSummaryElement"],"mappings":"AACA,IAAIA,IAAa,OAAO,SAAW,OAAe,OAAO,OAAO,WAAa,OAAe,OAAO,OAAO,YAAc,KACpHC;AACJD;AACA,QAAQ,OAAOC,IAAK,UAAU,kBAAkB,OAAO,SAASA,EAAG,aAAa,UAAU,QAAQ;AAClG,IAAIC,IAAgB,4CAChBC,IAAe,OAAO,cAAgB,MAAc,MAAM;AAC9D,IAAI;AACJ,SAASC,EAAKC,GAAIC,GAAMC,GAAO;AAC7B,SAAIA,MAAU,SAAeF,EAAG,aAAaC,CAAI,KAC7CC,MAAU,OAAMF,EAAG,gBAAgBC,CAAI,IAClCD,EAAG,aAAaC,CAAI,MAAMC,KAAOF,EAAG,aAAaC,GAAMC,CAAK,GAC9D;AACT;AACA,IAAIC,IAAS,CAACC,GAAQC,GAASC,MAAS;AACtC,aAAWC,KAAQD,EAAK,CAAC,EAAE,MAAM,GAAG;AAClC,IAAAA,EAAK,CAAC,IAAIC,GACV,QAAQ,UAAU,GAAGH,CAAM,eAAe,EAAE,MAAMC,GAASC,CAAI;AAEnE,GACIE,IAAK,CAACH,MAAYC,MAASH,EAAO,OAAOE,GAASC,CAAI,GACtDG,IAAM,CAACJ,MAAYC,MAASH,EAAO,UAAUE,GAASC,CAAI,GAC1DI,IAAW,CAACC,MAAU;AACxB,QAAMC,IAAU,SAASD,MAAUA,EAAM,QAAQ,OAAOA,EAAM,QAAQ;AACtE,SAAIC,KAASD,EAAM,eAAc,GAC7BC,KAAWD,EAAM,kBAAkB,eAAaA,EAAM,OAAO,MAAK,GAC/DC;AACT,GACIC,IAAU,CAACC,MAAS;AACtB,MAAIC;AACJ,QAAMC,MAASD,IAAMD,EAAK,gBAAgB,OAAO,SAASC,EAAI,KAAKD,CAAI,MAAMA,EAAK;AAClF,SAAOE,aAAgB,YAAYA,aAAgB,aAAaA,IAAO;AACzE,GACIC,IAAgB,CAACC,GAASC,GAAMC,MAAU;AAC5C,QAAMpB,IAAK,SAAS,cAAckB,CAAO;AAEzC,MADIC,MAAMnB,EAAG,cAAcmB,IACvBC,EAAO,YAAW,CAACC,GAAKC,CAAG,KAAK,OAAO,QAAQF,CAAK,EAAG,CAAArB,EAAKC,GAAIqB,GAAKC,CAAG;AAC5E,SAAOtB;AACT,GACIuB,IAAiB;AAAA,EACnB,QAAQ,CAACtB,GAAMuB,MAAa,CAAC7B,KAAc,OAAO,eAAe,IAAIM,CAAI,KAAK,OAAO,eAAe,OAAOA,GAAMuB,CAAQ;AAC3H,GAIIC,IAAoB,GAAG5B,CAAa;AAAA;AAAA;AAAA;AAAA,uEASpC6B,IAAsB,cAAc5B,EAAa;AAAA,EACnD,cAAc;AACZ,UAAK,GAEL,KAAK,WAAW,MACX,KAAK,cACR,KAAK,aAAa,EAAE,MAAM,OAAM,CAAE,EAAE;AAAA,MAClCmB,EAAc,QAAQ,MAAM,EAAE,MAAM,UAAS,CAAE;AAAA,MAC/CA,EAAc,QAAQ,MAAM,EAAE,MAAM,kBAAiB,CAAE;AAAA,MACvDA,EAAc,SAASQ,CAAiB;AAAA,IAChD;AAAA,EACE;AAAA;AAAA,EAEA,WAAW,qBAAqB;AAC9B,WAAO,CAAC,MAAM;AAAA,EAChB;AAAA,EACA,oBAAoB;AAClB,QAAIV;AACJ,SAAK,YAAYA,IAAM,KAAK,eAAe,OAAO,SAASA,EAAI,SAAS,CAAC,GACzEhB,EAAK,MAAM,QAAQ,OAAO,GAC1BS,EAAG,KAAK,UAAU,eAAe,IAAI,GACrCA,EAAG,MAAM,iBAAiB,IAAI,GAC9B,KAAK,yBAAwB;AAAA,EAC/B;AAAA,EACA,uBAAuB;AACrB,IAAI,KAAK,YAAUC,EAAI,KAAK,UAAU,eAAe,IAAI,GACzDA,EAAI,MAAM,iBAAiB,IAAI,GAC/B,KAAK,WAAW;AAAA,EAClB;AAAA,EACA,yBAAyBkB,GAAMC,GAAMC,GAAM;AACzC,UAAMC,IAAO,mBAAmB,OAAO,gBAAgB,IACjDC,IAAO,KAAK;AAClB,eAAW/B,KAAM,KAAK;AACpB,MAAIA,EAAG,aAAa,eAAaD,EAAKC,GAAI,iBAAiB,GAAG+B,CAAI,EAAE;AAKtE,QAJI,KAAK,aACPhC,EAAK,KAAK,UAAU,eAAe,GAAG,CAACgC,CAAI,EAAE,GAC7C,KAAK,SAAS,SAASA,IAAO,KAAQD,IAEpCC,KAAQ,KAAK,MAAM;AACrB,YAAMC,IAAenB,EAAQ,IAAI,EAAE;AAAA,QACjC,GAAG,KAAK,QAAQ,UAAU,KAAK,IAAI;AAAA,MAC3C;AACM,iBAAWoB,KAAYD;AACrB,QAAIC,MAAa,SAAMA,EAAS,OAAO;AAAA,IAC3C;AACA,IAAIN,MAAS,UAAUC,MAAS,SAAUC,MAAS,SACjD,KAAK,cAAc,IAAI,MAAM,QAAQ,CAAC;AAAA,EAC1C;AAAA,EACA,YAAYlB,GAAO;AACjB,UAAMuB,IAAU,KAAK,cAAc,oBAAoB,GACjDC,IAAuCD,GAAQ,SAASvB,EAAM,MAAM;AAC1E,IAAIA,EAAM,qBACNA,EAAM,SAAS,kBAAe,KAAK,OAAO,KAC1CwB,KAAaxB,EAAM,SAAS,aAAWD,EAASC,CAAK,GACrDwB,KAAaxB,EAAM,SAAS,YAAS,KAAK,OAAO,CAAC,KAAK;AAAA,EAC7D;AAAA,EACA,IAAI,OAAO;AACT,WAAO,KAAK,aAAa,MAAM;AAAA,EACjC;AAAA,EACA,IAAI,KAAKT,GAAO;AACd,IAAAH,EAAK,MAAM,QAAQG,IAAQ,KAAK,IAAI;AAAA,EACtC;AAAA,EACA,IAAI,OAAO;AACT,WAAOH,EAAK,MAAM,MAAM,KAAK;AAAA,EAC/B;AAAA,EACA,IAAI,KAAKG,GAAO;AACd,IAAAH,EAAK,MAAM,QAAQG,CAAK;AAAA,EAC1B;AACF,GACIkC,IAAsB,cAActC,EAAa;AAAA,EACnD,oBAAoB;AAClB,IAAAC,EAAK,MAAM,QAAQ,QAAQ,GAC3B,KAAK,OAAO,WACZ,KAAK,WAAW;AAAA,EAClB;AACF;AACAwB,EAAe,OAAO,aAAaG,CAAmB;AACtDH,EAAe,OAAO,aAAaa,CAAmB;","x_google_ignoreList":[0]}
+{"version":3,"file":"u-details.js","sources":["../../../../../node_modules/@u-elements/u-details/dist/u-details.js"],"sourcesContent":["// ../utils.ts\nvar IS_BROWSER = typeof window !== \"undefined\" && typeof window.document !== \"undefined\" && typeof window.navigator !== \"undefined\";\nvar _a;\nIS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n/^Mac/i.test(((_a = navigator.userAgentData) == null ? void 0 : _a.platform) || navigator.platform);\nvar DISPLAY_BLOCK = \":host(:not([hidden])) { display: block }\";\nvar UHTMLElement = typeof HTMLElement === \"undefined\" ? class {\n} : HTMLElement;\nfunction attr(el, name, value) {\n  if (value === void 0) return el.getAttribute(name);\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n}\nvar events = (action, element, rest) => {\n  for (const type of rest[0].split(\",\")) {\n    rest[0] = type;\n    Element.prototype[`${action}EventListener`].apply(element, rest);\n  }\n};\nvar on = (element, ...rest) => events(\"add\", element, rest);\nvar off = (element, ...rest) => events(\"remove\", element, rest);\nvar asButton = (event) => {\n  const isClick = \"key\" in event && (event.key === \" \" || event.key === \"Enter\");\n  if (isClick) event.preventDefault();\n  if (isClick && event.target instanceof HTMLElement) event.target.click();\n  return isClick;\n};\nvar getRoot = (node) => {\n  var _a2;\n  const root = ((_a2 = node.getRootNode) == null ? void 0 : _a2.call(node)) || node.ownerDocument;\n  return root instanceof Document || root instanceof ShadowRoot ? root : document;\n};\nvar createElement = (tagName, text, attrs) => {\n  const el = document.createElement(tagName);\n  if (text) el.textContent = text;\n  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n  return el;\n};\nvar customElements = {\n  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)\n};\nvar declarativeShadowRoot = (style, slot = \"<slot></slot>\") => `<template shadowrootmode=\"open\">${slot}<style>${style}</style></template>`;\n\n// u-details.ts\nvar UHTMLDetailsStyle = `${DISPLAY_BLOCK}\n::slotted(u-summary) { cursor: pointer; display: block }\n::slotted(u-summary)::before { content: ''; display: inline-block; vertical-align: middle; margin-inline: .05em .3125em; border-block: .3125em solid transparent; border-inline-start: .5em solid }\n::slotted(u-summary[aria-expanded=\"true\"])::before { rotate: 90deg }\n:host > [part=\"details-content\"]:not([hidden=\"\"]) { display: block }`;\nvar UHTMLDetailsShadowRoot = declarativeShadowRoot(\n  UHTMLDetailsStyle,\n  '<slot name=\"summary\"></slot><slot part=\"details-content\" hidden=\"until-found\"></slot>'\n);\nvar UHTMLDetailsElement = class extends UHTMLElement {\n  constructor() {\n    super();\n    // Using underscore instead of private fields for backwards compatibility\n    this._content = null;\n    if (!this.shadowRoot)\n      this.attachShadow({ mode: \"open\" }).append(\n        createElement(\"slot\", null, { name: \"summary\" }),\n        createElement(\"slot\", null, { part: \"details-content\" }),\n        createElement(\"style\", UHTMLDetailsStyle)\n      );\n  }\n  // Using ES2015 syntax for backwards compatibility\n  static get observedAttributes() {\n    return [\"open\"];\n  }\n  connectedCallback() {\n    var _a2;\n    this._content = (_a2 = this.shadowRoot) == null ? void 0 : _a2.children[1];\n    attr(this, \"role\", \"group\");\n    on(this._content, \"beforematch\", this);\n    on(this, \"click,keydown\", this);\n    this.attributeChangedCallback();\n  }\n  disconnectedCallback() {\n    if (this._content) off(this._content, \"beforematch\", this);\n    off(this, \"click,keydown\", this);\n    this._content = null;\n  }\n  attributeChangedCallback(prop, prev, next) {\n    const hide = \"onbeforematch\" in this ? \"until-found\" : true;\n    const open = this.open;\n    for (const el of this.children)\n      if (el.nodeName === \"U-SUMMARY\") attr(el, \"aria-expanded\", `${open}`);\n    if (this._content) {\n      attr(this._content, \"aria-hidden\", `${!open}`);\n      attr(this._content, \"tabindex\", open ? null : \"-1\");\n      this._content.hidden = open ? false : hide;\n    }\n    if (open && this.name) {\n      const uDetailsList = getRoot(this).querySelectorAll(\n        `${this.nodeName}[name=\"${this.name}\"]`\n      );\n      for (const uDetails of uDetailsList)\n        if (uDetails !== this) uDetails.open = false;\n    }\n    if (prop === \"open\" && prev === null !== (next === null))\n      this.dispatchEvent(new Event(\"toggle\"));\n  }\n  handleEvent(event) {\n    const summary = this.querySelector(\":scope > u-summary\");\n    const isSummary = summary == null ? void 0 : summary.contains(event.target);\n    if (event.defaultPrevented) return;\n    if (event.type === \"beforematch\") this.open = true;\n    if (isSummary && event.type === \"keydown\") asButton(event);\n    if (isSummary && event.type === \"click\") this.open = !this.open;\n  }\n  get open() {\n    return this.hasAttribute(\"open\");\n  }\n  set open(value) {\n    attr(this, \"open\", value ? \"\" : null);\n  }\n  get name() {\n    return attr(this, \"name\") || \"\";\n  }\n  set name(value) {\n    attr(this, \"name\", value);\n  }\n};\nvar UHTMLSummaryElement = class extends UHTMLElement {\n  connectedCallback() {\n    attr(this, \"role\", \"button\");\n    this.slot = \"summary\";\n    this.tabIndex = 0;\n  }\n};\ncustomElements.define(\"u-details\", UHTMLDetailsElement);\ncustomElements.define(\"u-summary\", UHTMLSummaryElement);\n\nexport { UHTMLDetailsElement, UHTMLDetailsShadowRoot, UHTMLDetailsStyle, UHTMLSummaryElement };\n"],"names":["IS_BROWSER","_a","DISPLAY_BLOCK","UHTMLElement","attr","el","name","value","events","action","element","rest","type","on","off","asButton","event","isClick","getRoot","node","_a2","root","createElement","tagName","text","attrs","key","val","customElements","instance","UHTMLDetailsStyle","UHTMLDetailsElement","prop","prev","next","hide","open","uDetailsList","uDetails","summary","isSummary","UHTMLSummaryElement"],"mappings":"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","x_google_ignoreList":[0]}