@mattilsynet/design 2.2.5 → 2.2.7

package/mtds/alert/alert.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { clsx as f } from "../external/clsx/dist/clsx.js";
+import f from "clsx";
 import { forwardRef as s } from "react";
 import a from "../styles.module.css.js";
 const x = s(function({ as: t, className: e, ...o }, l) {

package/mtds/app/app.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { ButtonProps } from '../react';
+import { ButtonProps } from '../button/button';
 import { PolymorphicComponentPropWithRef } from '../react-types';
 export type AppHeaderProps = React.ComponentPropsWithoutRef<"header">;
 export type AppSidebarProps = React.ComponentPropsWithoutRef<"dialog">;

package/mtds/app/app.js

@@ -1,45 +1,14 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as e } from "../external/clsx/dist/clsx.js";
+import a from "clsx";
 import { forwardRef as p } from "react";
-import "../alert/alert.js";
-import "../avatar/avatar.js";
-import "../badge/badge.js";
-import "../breadcrumbs/breadcrumbs.js";
 import { Button as s } from "../button/button.js";
-import "../card/card.js";
-import "../chart/chart.js";
-import "../chip/chip.js";
-import "../details/details.js";
-import "../dialog/dialog.js";
-import "../divider/divider.js";
-import "../errorsummary/errorsummary.js";
-import "../field/field.js";
-import "../fieldset/fieldset.js";
-import "../helptext/helptext.js";
-import "../input/input.js";
-import "../layout/layout.js";
-import "../link/link.js";
-import "../logo/logo.js";
-import "../pagination/pagination.js";
-import "../popover/popover.js";
-import "../progress/progress.js";
-import "../skeleton/skeleton.js";
-import "../spinner/spinner.js";
-import "../steps/steps.js";
-import "../table/table.js";
-import "../tabs/tabs.js";
-import "../tag/tag.js";
-import "../toast/toast.js";
-import "../togglegroup/togglegroup.js";
-import "../typography/typography.js";
-import "../validation/validation.js";
-import a from "../styles.module.css.js";
+import c from "../styles.module.css.js";
 import d from "./app-toggle.js";
-const f = p(function({ as: t, className: r, ...m }, n) {
-  return /* @__PURE__ */ o(t || "div", { className: e(a.app, r), ref: n, ...m });
-}), u = p(function({ as: t, className: r, ...m }, n) {
-  return /* @__PURE__ */ o(t || "div", { className: e(a.sticky, r), ref: n, ...m });
-}), Z = Object.assign(f, {
+const f = p(function({ as: t, className: r, ...i }, e) {
+  return /* @__PURE__ */ o(t || "div", { className: a(c.app, r), ref: e, ...i });
+}), u = p(function({ as: t, className: r, ...i }, e) {
+  return /* @__PURE__ */ o(t || "div", { className: a(c.sticky, r), ref: e, ...i });
+}), k = Object.assign(f, {
   Header: p(
     function(t, r) {
       return /* @__PURE__ */ o("header", { ref: r, ...t });
@@ -52,13 +21,13 @@ const f = p(function({ as: t, className: r, ...m }, n) {
   ),
   Sticky: u,
   Toggle: p(
-    function({ children: t, ...r }, m) {
+    function({ children: t, ...r }, i) {
       return /* @__PURE__ */ o(
         s,
         {
           "data-command": "toggle-app-expanded",
           "data-tooltip": "Vis meny",
-          ref: m,
+          ref: i,
           ...r,
           children: t ?? "Skjul meny"
         }
@@ -77,6 +46,6 @@ const f = p(function({ as: t, className: r, ...m }, n) {
   Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: d })
 });
 export {
-  Z as App
+  k as App
 };
 //# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAA,EAAO,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../button/button\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAA,EAAO,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}

package/mtds/avatar/avatar.js

@@ -1,5 +1,5 @@
 import { jsx as f } from "react/jsx-runtime";
-import { clsx as s } from "../external/clsx/dist/clsx.js";
+import s from "clsx";
 import { forwardRef as n } from "react";
 import p from "../styles.module.css.js";
 const x = n(function({ as: a, className: o, ...r }, t) {

package/mtds/badge/badge.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { clsx as e } from "../external/clsx/dist/clsx.js";
+import e from "clsx";
 import { forwardRef as s } from "react";
 import a from "../styles.module.css.js";
 const d = s(function({ className: r, ...o }, m) {

package/mtds/breadcrumbs/breadcrumbs.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { clsx as s } from "../external/clsx/dist/clsx.js";
+import s from "clsx";
 import { forwardRef as t } from "react";
 import c from "../styles.module.css.js";
 const p = t(

package/mtds/button/button.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { clsx as m } from "../external/clsx/dist/clsx.js";
+import m from "clsx";
 import { forwardRef as a } from "react";
 import s from "../styles.module.css.js";
 const l = a(function({ as: r, className: n, type: u, ...t }, f) {

package/mtds/card/card.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import { clsx as m } from "../external/clsx/dist/clsx.js";
+import m from "clsx";
 import { forwardRef as n } from "react";
 import f from "../styles.module.css.js";
 const g = n(function({ as: o, className: t, ...r }, a) {

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

@@ -1,6 +1,6 @@
 import { MTDSElement } from '../utils';
 export type ChartData = ReturnType<typeof toData>;
-export declare class MTDSChart extends MTDSElement {
+export declare class MTDSChartElement extends MTDSElement {
     _observer?: MutationObserver;
     static get observedAttributes(): string[];
     constructor();

package/mtds/chart/chart-element.js

@@ -1,12 +1,12 @@
 import g from "../styles.module.css.js";
-import { IS_BROWSER as b, tag as c, MTDSElement as C, on as E, off as k, attr as d } from "../utils.js";
+import { IS_BROWSER as b, tag as c, MTDSElement as E, on as C, off as k, attr as d } from "../utils.js";
 import T from "./chart.css.js";
 import { toAxis as w } from "./chart-axis.js";
 import { toBars as S } from "./chart-bars.js";
 import { toLines as _ } from "./chart-lines.js";
 import { toPies as O } from "./chart-pies.js";
 const h = "click,keydown,mousemove,mouseout", p = "mtds-chart-tooltip", a = b ? document.getElementById(p) || c("div", { class: g._tooltip, id: p, hidden: "" }) : null;
-class $ extends C {
+class $ extends E {
   _observer;
   // Using underscore instead of # for backwards compatibility
   static get observedAttributes() {
@@ -24,7 +24,7 @@ class $ extends C {
       characterData: !0,
       childList: !0,
       subtree: !0
-    }), this.attributeChangedCallback(), E(this, h, this);
+    }), this.attributeChangedCallback(), C(this, h, this);
   }
   disconnectedCallback() {
     a && (a.hidden = !0), k(this, h, this), this._observer?.disconnect(), this._observer = void 0;
@@ -36,7 +36,7 @@ class $ extends C {
       n.appendChild(c("div", { class: "legend", style: v }, l));
     });
     const { axis: f, groups: m, total: y } = w(e, { type: s });
-    (t === "bar" || t === "column") && m.append(...S(e)), (t === "line" || t === "area") && m.append(_(e, { total: y, variant: t, type: s })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(e, { variant: t })), this.shadowRoot?.append(r, f, n);
+    (t === "bar" || t === "column") && m.append(...S(e)), (t === "line" || t === "area") && m.append(_(e, { total: y, variant: t })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(e, { variant: t })), this.shadowRoot?.append(r, f, n);
   }
   handleEvent(e) {
     e.type === "click" || e.type === "keydown" ? A(e, this) : P(e);
@@ -68,6 +68,6 @@ const i = (o) => o?.textContent?.trim() || "", x = (o) => Array.from(
 );
 b && !window.customElements.get("mtds-chart") && window.customElements.define("mtds-chart", $);
 export {
-  $ as MTDSChart
+  $ as MTDSChartElement
 };
 //# sourceMappingURL=chart-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, IS_BROWSER, MTDSElement, off, on, tag } from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\nconst EVENTS = \"click,keydown,mousemove,mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", { class: styles._tooltip, id: TOOLTIP_ID, hidden: \"\" })\n\t: null;\nexport class MTDSChart extends MTDSElement {\n\t_observer?: MutationObserver; // Using underscore instead of # for backwards compatibility\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tthis._observer = new MutationObserver(\n\t\t\tthis.attributeChangedCallback.bind(this),\n\t\t);\n\t\tthis._observer.observe(this, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\tthis.attributeChangedCallback(); // Initial setup\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"bar\").split(\"-\");\n\t\tconst style = tag(\"style\", {}, css);\n\t\tconst legend = tag(\"div\", { class: \"legends\" });\n\t\tdata.slice(1).forEach(([{ value, style }]) => {\n\t\t\tlegend.appendChild(tag(\"div\", { class: \"legend\", style }, value));\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { type });\n\t\tif (variant === \"bar\" || variant === \"column\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { variant }));\n\n\t\tthis.shadowRoot?.append(style, axis, legend);\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChart) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || [], (row, rowIndex) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => ({\n\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(text(cell))) || 0, // First row and column is not a number\n\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\tstyle: `--color: var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base))`,\n\t\t\tvalue: text(cell),\n\t\t\ttooltip:\n\t\t\t\tattr(cell, \"data-tooltip\") ||\n\t\t\t\t`${text(row.cells[0])}: ${text(cell)} (${text(table?.rows[0].cells[cellIndex])})`,\n\t\t})),\n\t);\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-chart\"))\n\twindow.customElements.define(\"mtds-chart\", MTDSChart);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","MTDSChart","MTDSElement","on","off","el","data","toData","variant","type","attr","style","css","legend","value","axis","groups","total","toAxis","toBars","toLines","toPies","onClick","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","cell","cellIndex"],"mappings":"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"}
+{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, IS_BROWSER, MTDSElement, off, on, tag } from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\nconst EVENTS = \"click,keydown,mousemove,mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", { class: styles._tooltip, id: TOOLTIP_ID, hidden: \"\" })\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t_observer?: MutationObserver; // Using underscore instead of # for backwards compatibility\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tthis._observer = new MutationObserver(\n\t\t\tthis.attributeChangedCallback.bind(this),\n\t\t);\n\t\tthis._observer.observe(this, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\tthis.attributeChangedCallback(); // Initial setup\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"bar\").split(\"-\");\n\t\tconst style = tag(\"style\", {}, css);\n\t\tconst legend = tag(\"div\", { class: \"legends\" });\n\t\tdata.slice(1).forEach(([{ value, style }]) => {\n\t\t\tlegend.appendChild(tag(\"div\", { class: \"legend\", style }, value));\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { type });\n\t\tif (variant === \"bar\" || variant === \"column\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { variant }));\n\n\t\tthis.shadowRoot?.append(style, axis, legend);\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChartElement) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || [], (row, rowIndex) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => ({\n\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(text(cell))) || 0, // First row and column is not a number\n\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\tstyle: `--color: var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base))`,\n\t\t\tvalue: text(cell),\n\t\t\ttooltip:\n\t\t\t\tattr(cell, \"data-tooltip\") ||\n\t\t\t\t`${text(row.cells[0])}: ${text(cell)} (${text(table?.rows[0].cells[cellIndex])})`,\n\t\t})),\n\t);\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-chart\"))\n\twindow.customElements.define(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","MTDSChartElement","MTDSElement","on","off","el","data","toData","variant","type","attr","style","css","legend","value","axis","groups","total","toAxis","toBars","toLines","toPies","onClick","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","cell","cellIndex"],"mappings":"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"}

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

@@ -4,5 +4,5 @@ type Config = {
     type: string;
     variant: string;
 };
-export declare function toLines(data: ChartData, { total, type, variant }: Config): HTMLDivElement;
+export declare function toLines(data: ChartData, { total, variant }: Config): HTMLDivElement;
 export {};

package/mtds/chart/chart-lines.js

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

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 || \"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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"}
+{"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, variant }: Config) {\n\tconst smoothing = 0; // 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","variant","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","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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"}

package/mtds/chart/chart.css.js

@@ -231,24 +231,30 @@ const t = `:host(:not([hidden])) {
 	stroke: var(--color);
 	stroke-linejoin: round;
 	stroke-linecap: round;
-	stroke-width: 3;
+	stroke-width: 1.5;
 	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);
 }
+
+.line,
+.linePoint,
+:host:has(.linePoint) .legend::before {
+	filter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */
+}
+
 .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;
+	filter: brightness(0.8) saturate(2);
 	height: var(--size);
 	margin: calc(var(--size) / -2);
 	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 \":host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--ds-size-6);\\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-rows: subgrid;\\n\\tgrid-auto-columns: minmax(0, 1fr);\\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.axisStep[data-label=\\\"0\\\"]::after {\\n\\topacity: 0; /* Hide 0 line as it overlapps with .axis::before */\\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}\\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;"}
+{"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\\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-rows: subgrid;\\n\\tgrid-auto-columns: minmax(0, 1fr);\\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.axisStep[data-label=\\\"0\\\"]::after {\\n\\topacity: 0; /* Hide 0 line as it overlapps with .axis::before */\\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}\\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: 1.5;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n\\n.line,\\n.linePoint,\\n:host:has(.linePoint) .legend::before {\\n\\tfilter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */\\n}\\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\\tfilter: brightness(0.8) saturate(2);\\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;"}

package/mtds/chart/chart.d.ts

@@ -10,9 +10,9 @@ declare global {
 }
 export type ChartProps = React.ComponentPropsWithoutRef<"div"> & {
     data?: (number | string)[][];
-    "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie" | `area-${number}` | `line-${number}`;
+    "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie";
 };
 export declare const Chart: ReactTypes.ForwardRefExoticComponent<Omit<ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     data?: (number | string)[][];
-    "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie" | `area-${number}` | `line-${number}`;
+    "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie";
 } & ReactTypes.RefAttributes<HTMLDivElement>>;

package/mtds/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ReactTypes.JSX.IntrinsicElements[\"div\"] & {\n\t\t\t\tclass?: string;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport type ChartProps = React.ComponentPropsWithoutRef<\"div\"> & {\n\tdata?: (number | string)[][];\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\"\n\t\t| `area-${number}`\n\t\t| `line-${number}`;\n};\n\nexport const Chart = forwardRef<HTMLDivElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<table>\n\t\t\t\t\t{data.map((row, rowIndex) => (\n\t\t\t\t\t\t<tr key={`${rowIndex + 1}`}>\n\t\t\t\t\t\t\t{row.map((cell, cellIndex) => (\n\t\t\t\t\t\t\t\t<td key={`${cellIndex + 1}`}>{cell}</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\n\t\t\t\t</table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["Chart","forwardRef","data","children","rest","ref","toCustomElementProps","jsx","row","rowIndex","cell","cellIndex"],"mappings":";;;;AA8BO,MAAMA,IAAQC,EAAuC,SAC3D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,2BACE,cAAA,EAAW,KAAAA,GAAW,GAAGC,EAAqBF,CAAI,GACjD,UAAAF,IACA,gBAAAK,EAAC,SAAA,EACC,YAAK,IAAI,CAACC,GAAKC,MACf,gBAAAF,EAAC,QACC,UAAAC,EAAI,IAAI,CAACE,GAAMC,MACf,gBAAAJ,EAAC,MAAA,EAA6B,UAAAG,KAArB,GAAGC,IAAY,CAAC,EAAU,CACnC,KAHO,GAAGF,IAAW,CAAC,EAIxB,CACA,EAAA,CACF,IAEAN,GAEF;AAEF,CAAC;"}
+{"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ReactTypes.JSX.IntrinsicElements[\"div\"] & {\n\t\t\t\tclass?: string;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport type ChartProps = React.ComponentPropsWithoutRef<\"div\"> & {\n\tdata?: (number | string)[][];\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nexport const Chart = forwardRef<HTMLDivElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<table>\n\t\t\t\t\t{data.map((row, rowIndex) => (\n\t\t\t\t\t\t<tr key={`${rowIndex + 1}`}>\n\t\t\t\t\t\t\t{row.map((cell, cellIndex) => (\n\t\t\t\t\t\t\t\t<td key={`${cellIndex + 1}`}>{cell}</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\n\t\t\t\t</table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["Chart","forwardRef","data","children","rest","ref","toCustomElementProps","jsx","row","rowIndex","cell","cellIndex"],"mappings":";;;;AA4BO,MAAMA,IAAQC,EAAuC,SAC3D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,2BACE,cAAA,EAAW,KAAAA,GAAW,GAAGC,EAAqBF,CAAI,GACjD,UAAAF,IACA,gBAAAK,EAAC,SAAA,EACC,YAAK,IAAI,CAACC,GAAKC,MACf,gBAAAF,EAAC,QACC,UAAAC,EAAI,IAAI,CAACE,GAAMC,MACf,gBAAAJ,EAAC,MAAA,EAA6B,UAAAG,KAArB,GAAGC,IAAY,CAAC,EAAU,CACnC,KAHO,GAAGF,IAAW,CAAC,EAIxB,CACA,EAAA,CACF,IAEAN,GAEF;AAEF,CAAC;"}

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

@@ -13,11 +13,11 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
 export declare const Bar: Story;
+export declare const BarSingleDataset: 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;

package/mtds/chip/chip.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { clsx as p } from "../external/clsx/dist/clsx.js";
+import p from "clsx";
 import { forwardRef as e } from "react";
 import f from "../styles.module.css.js";
 const h = e(function({ as: r, className: t, ...o }, m) {

package/mtds/details/details.d.ts

@@ -1,8 +1,10 @@
 export type DetailsProps = React.ComponentPropsWithoutRef<"details"> & {
+    "data-align"?: "start" | "center";
     "data-variant"?: "default" | "card";
 };
 export type SummaryProps = React.ComponentPropsWithoutRef<"summary">;
 export declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & {
+    "data-align"?: "start" | "center";
     "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\"> & {\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;"}
+{"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-align\"?: \"start\" | \"center\";\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":";;;;AAQA,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/dialog/dialog.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { clsx as i } from "../external/clsx/dist/clsx.js";
+import i from "clsx";
 import { forwardRef as l } from "react";
 import d from "../styles.module.css.js";
 const g = l(

package/mtds/divider/divider.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { clsx as t } from "../external/clsx/dist/clsx.js";
+import t from "clsx";
 import { forwardRef as m } from "react";
 import d from "../styles.module.css.js";
 const c = m(function({ className: r, ...i }, o) {

package/mtds/errorsummary/errorsummary.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { clsx as t } from "../external/clsx/dist/clsx.js";
+import t from "clsx";
 import { forwardRef as e } from "react";
 import a from "../styles.module.css.js";
 const c = e(

package/mtds/field/field-observer.js

@@ -1,6 +1,6 @@
-import { flip as C, shift as E, size as I } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
-import { UHTMLComboboxElement as M } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
-import { UHTMLDataListElement as A } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
+import { flip as C, shift as E, size as I } from "@floating-ui/dom";
+import { UHTMLComboboxElement as M } from "@u-elements/u-combobox";
+import { UHTMLDataListElement as A } from "@u-elements/u-datalist";
 import h from "../styles.module.css.js";
 import { onLoaded as H, onMutation as $, on as m, QUICK_EVENT as b, isInputLike as v, attr as a, useId as u, anchorPosition as g } from "../utils.js";
 const p = h.field.split(" ")[0], x = h.validation.split(" "), w = x[0], l = (t, o) => t.getPropertyValue(`--mtds-text-${o}`)?.slice(1, -1) || "";

package/mtds/field/field.d.ts

@@ -1,7 +1,7 @@
 import { Placement } from '@floating-ui/dom';
 import { ReactUcombobox, UHTMLComboboxElement } from '@u-elements/u-combobox';
 import { JSX } from 'react';
-import { InputProps } from '../react';
+import { InputProps } from '../input/input';
 import { PolymorphicComponentPropWithRef } from '../react-types';
 type FieldBaseProps = {
     count?: number;
@@ -15,8 +15,6 @@ type FieldBaseProps = {
     readOnly?: boolean;
     suffix?: string;
     validation?: React.ReactNode;
-    value?: React.ComponentPropsWithRef<"input">["value"];
-    onInput?: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
 };
 export type FieldProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, FieldBaseProps>;
 type FieldComponent = <As extends React.ElementType = "div">(props: FieldProps<As>) => JSX.Element;
@@ -32,7 +30,7 @@ export type FieldComboboxSelected = {
     value: string;
     children?: React.ReactNode;
 }[];
-export type FieldComboboxProps = ReactUcombobox & {
+export type FieldComboboxProps = Omit<ReactUcombobox, "onChange" | "onInput"> & {
     "data-creatable"?: boolean;
     "data-multiple"?: boolean;
     onAfterChange?: (e: CustomEvent<HTMLDataElement>) => void;
@@ -43,7 +41,7 @@ export type FieldComboboxProps = ReactUcombobox & {
     onSelectedChange?: (selected: FieldComboboxSelected) => void;
     options?: FieldComboboxSelected;
     selected?: FieldComboboxSelected;
-} & Pick<InputProps, "disabled" | "readOnly" | "placeholder" | "type" | "name"> & // Allow input props to be passed down
+} & Pick<InputProps, "disabled" | "name" | "onChange" | "onInput" | "placeholder" | "readOnly" | "type" | "value"> & // Allow input props to be passed down
 Pick<FieldDatalistProps, "data-position" | "data-nofilter">;
 export type FieldLabelProps = React.ComponentPropsWithoutRef<"label">;
 export declare const Field: FieldComponent & {