@mattilsynet/design 2.2.6 → 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;
@@ -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/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 & {

package/mtds/field/field.js

@@ -1,47 +1,17 @@
 'use client';
-import { jsx as t, Fragment as I, jsxs as j } from "react/jsx-runtime";
-import { clsx as k } from "../external/clsx/dist/clsx.js";
-import { forwardRef as m, useRef as z, useImperativeHandle as K, useEffect as M } from "react";
-import "../alert/alert.js";
-import "../app/app.js";
-import "../avatar/avatar.js";
-import "../badge/badge.js";
-import "../breadcrumbs/breadcrumbs.js";
-import "../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 "../fieldset/fieldset.js";
+import { jsx as e, Fragment as I, jsxs as j } from "react/jsx-runtime";
+import k from "clsx";
+import { forwardRef as p, useRef as z, useImperativeHandle as K, useEffect as M } from "react";
 import { HelpText as Q } from "../helptext/helptext.js";
 import { Input as U } from "../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 g from "../styles.module.css.js";
 import { toCustomElementProps as N } from "../utils.js";
-const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(function({
-  "data-size": e,
-  as: o,
+const P = (o) => typeof o == "string" ? { label: o, value: o } : o, V = p(function({
+  "data-size": t,
+  as: n,
   className: a,
-  count: c,
-  description: u,
+  count: u,
+  description: m,
   error: F,
   helpText: y,
   helpTextLabel: H,
@@ -50,71 +20,71 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
   style: D,
   suffix: h,
   validation: C,
-  ...r
+  ...i
 }, v) {
-  const p = o || "div", E = !!h || !!b, W = C || F, O = {
-    "data-size": e,
+  const l = n || "div", E = !!h || !!b, W = C || F, O = {
+    "data-size": t,
     className: k(g.field, a),
     style: D
   };
-  return o === "select" && !r.children && Object.assign(r, {
+  return n === "select" && !i.children && Object.assign(i, {
     options: void 0,
     // Ensure options is not passed to DOM
-    children: /* @__PURE__ */ t(I, { children: r.options?.map(P).map(({ label: x, value: l }) => /* @__PURE__ */ t("option", { value: l, children: x }, l)) })
-  }), o ? /* @__PURE__ */ j("div", { ...O, children: [
-    !!f && /* @__PURE__ */ t("label", { suppressHydrationWarning: !0, children: f }),
-    !!y && /* @__PURE__ */ t(Q, { "aria-label": H, children: y }),
-    !!u && /* @__PURE__ */ t("p", { suppressHydrationWarning: !0, children: u }),
+    children: /* @__PURE__ */ e(I, { children: i.options?.map(P).map(({ label: x, value: d }) => /* @__PURE__ */ e("option", { value: d, children: x }, d)) })
+  }), n ? /* @__PURE__ */ j("div", { ...O, children: [
+    !!f && /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, children: f }),
+    !!y && /* @__PURE__ */ e(Q, { "aria-label": H, children: y }),
+    !!m && /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, children: m }),
     E ? /* @__PURE__ */ j(S, { children: [
-      !!b && /* @__PURE__ */ t("span", { children: b }),
-      /* @__PURE__ */ t(
-        p,
+      !!b && /* @__PURE__ */ e("span", { children: b }),
+      /* @__PURE__ */ e(
+        l,
         {
           className: g.input,
           suppressHydrationWarning: !0,
           ref: v,
-          ...r
+          ...i
         }
       ),
-      !!h && /* @__PURE__ */ t("span", { children: h })
-    ] }) : /* @__PURE__ */ t(
-      p,
+      !!h && /* @__PURE__ */ e("span", { children: h })
+    ] }) : /* @__PURE__ */ e(
+      l,
       {
-        className: typeof o == "string" ? g.input : void 0,
+        className: typeof n == "string" ? g.input : void 0,
         suppressHydrationWarning: !0,
         ref: v,
-        ...r
+        ...i
       }
     ),
-    !!W && /* @__PURE__ */ t("div", { suppressHydrationWarning: !0, className: g.validation, children: W }),
-    !!c && /* @__PURE__ */ t("p", { suppressHydrationWarning: !0, "data-count": c })
-  ] }) : /* @__PURE__ */ t("div", { ref: v, ...O, ...r });
-}), S = m(
-  function({ className: e, ...o }, a) {
-    return /* @__PURE__ */ t("div", { className: k(g.affixes, e), ref: a, ...o });
+    !!W && /* @__PURE__ */ e("div", { suppressHydrationWarning: !0, className: g.validation, children: W }),
+    !!u && /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, "data-count": u })
+  ] }) : /* @__PURE__ */ e("div", { ref: v, ...O, ...i });
+}), S = p(
+  function({ className: t, ...n }, a) {
+    return /* @__PURE__ */ e("div", { className: k(g.affixes, t), ref: a, ...n });
   }
-), T = m(
-  function({ "data-nofilter": e, ...o }, a) {
-    return /* @__PURE__ */ t(
+), T = p(
+  function({ "data-nofilter": t, ...n }, a) {
+    return /* @__PURE__ */ e(
       "u-datalist",
       {
-        "data-nofilter": !!e || void 0,
+        "data-nofilter": !!t || void 0,
         ref: a,
-        ...N(o)
+        ...N(n)
       }
     );
   }
-), q = m(
-  function(e, o) {
-    return /* @__PURE__ */ t("u-option", { ref: o, ...N(e) });
+), q = p(
+  function(t, n) {
+    return /* @__PURE__ */ e("u-option", { ref: n, ...N(t) });
   }
-), X = m(
+), X = p(
   function({
-    "data-multiple": e,
-    "data-nofilter": o,
+    "data-multiple": t,
+    "data-nofilter": n,
     "data-position": a,
-    onAfterChange: c,
-    onAfterSelect: u,
+    onAfterChange: u,
+    onAfterSelect: m,
     onBeforeChange: F,
     onBeforeMatch: y,
     onBeforeSelect: H,
@@ -123,70 +93,70 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
     disabled: D,
     name: h,
     options: C,
-    placeholder: r,
+    placeholder: i,
     readOnly: v,
-    selected: p,
+    selected: l,
     type: E,
     ...W
   }, O) {
-    const x = z(null), l = z(f);
-    return l.current = f, c && (u = c, console.warn(
+    const x = z(null), d = z(f);
+    return d.current = f, u && (m = u, console.warn(
       "Combobox onAfterChange is deprecated, use onAfterSelect instead."
     )), F && (H = F, console.warn(
       "Combobox onBeforeChange is deprecated, use onBeforeSelect instead."
     )), K(O, () => x.current), M(() => {
-      const d = x.current, s = (n) => {
-        const L = l.current;
-        if (!l) return;
-        n.preventDefault();
-        const { isConnected: B, textContent: G, value: w } = n.detail, A = G?.trim() || "", R = p || [];
-        L?.(B ? R.filter((J) => J.value !== w) : e ? [...R, { value: w, label: A }] : [{ value: w, label: A }]);
+      const c = x.current, s = (r) => {
+        const L = d.current;
+        if (!d) return;
+        r.preventDefault();
+        const { isConnected: B, textContent: G, value: w } = r.detail, A = G?.trim() || "", R = l || [];
+        L?.(B ? R.filter((J) => J.value !== w) : t ? [...R, { value: w, label: A }] : [{ value: w, label: A }]);
       };
-      return d?.addEventListener("comboboxbeforeselect", s), () => d?.removeEventListener("comboboxbeforeselect", s);
-    }, [e, p]), /* @__PURE__ */ j(
+      return c?.addEventListener("comboboxbeforeselect", s), () => c?.removeEventListener("comboboxbeforeselect", s);
+    }, [t, l]), /* @__PURE__ */ j(
       "u-combobox",
       {
-        "data-multiple": e || void 0,
+        "data-multiple": t || void 0,
         ...N({
           oncomboboxbeforeselect: H,
           oncomboboxbeforematch: y,
-          oncomboboxafterselect: u,
+          oncomboboxafterselect: m,
           ref: x,
           ...W
         }),
         children: [
-          p?.map(({ children: d, label: s, value: n }) => /* @__PURE__ */ t("data", { value: n, suppressHydrationWarning: !0, children: d ?? s }, n)),
+          l?.map(({ children: c, label: s, value: r }) => /* @__PURE__ */ e("data", { value: r, suppressHydrationWarning: !0, children: c ?? s }, r)),
           b || /* @__PURE__ */ j(I, { children: [
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ e(
               U,
               {
                 name: h,
                 type: E,
                 disabled: D,
                 readOnly: v,
-                placeholder: r
+                placeholder: i
               }
             ),
-            /* @__PURE__ */ t("del", { ...N({ "aria-label": "Fjern tekst" }) })
+            /* @__PURE__ */ e("del", { ...N({ "aria-label": "Fjern tekst" }) })
           ] }),
-          !!C && /* @__PURE__ */ t(T, { "data-nofilter": o, "data-position": a, children: C.map(P).map(({ children: d, label: s, value: n }) => /* @__PURE__ */ t(q, { value: n, label: s, children: d ?? s }, n)) })
+          !!C && /* @__PURE__ */ e(T, { "data-nofilter": n, "data-position": a, children: C.map(P).map(({ children: c, label: s, value: r }) => /* @__PURE__ */ e(q, { value: r, label: s, children: c ?? s }, r)) })
         ]
       }
     );
   }
-), Rt = Object.assign(V, {
+), oe = Object.assign(V, {
   Affixes: S,
   Combobox: X,
   Datalist: T,
   Option: q,
-  Label: m(
-    function(e, o) {
-      return /* @__PURE__ */ t("label", { suppressHydrationWarning: !0, ref: o, ...e });
+  Label: p(
+    function(t, n) {
+      return /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, ref: n, ...t });
     }
   )
 });
 export {
-  Rt as Field,
+  oe as Field,
   V as FieldComp
 };
 //# sourceMappingURL=field.js.map