@mattilsynet/design 1.3.5 → 1.3.7

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

@@ -1 +1 @@
-{"version":3,"file":"u-tabs.js","sources":["../../../../../node_modules/@u-elements/u-tabs/dist/u-tabs.js"],"sourcesContent":["// ../utils.ts\nvar IS_BROWSER = typeof window !== \"undefined\" && typeof window.document !== \"undefined\" && typeof window.navigator !== \"undefined\";\nvar IS_ANDROID = IS_BROWSER && /android/i.test(navigator.userAgent);\nvar _a;\nIS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n/^Mac/i.test(((_a = navigator.userAgentData) == null ? void 0 : _a.platform) || navigator.platform);\nvar SAFE_LABELLEDBY = `${IS_ANDROID ? \"data\" : \"aria\"}-labelledby`;\nvar DISPLAY_BLOCK = \":host(:not([hidden])) { display: block }\";\nvar UHTMLElement = typeof HTMLElement === \"undefined\" ? class {\n} : HTMLElement;\nfunction attr(el, name, value) {\n  var _a2;\n  if (value === void 0) return (_a2 = el.getAttribute(name)) != null ? _a2 : null;\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n}\nvar events = (action, element, rest) => {\n  for (const type of rest[0].split(\",\")) {\n    rest[0] = type;\n    Element.prototype[`${action}EventListener`].apply(element, rest);\n  }\n};\nvar on = (element, ...rest) => events(\"add\", element, rest);\nvar off = (element, ...rest) => events(\"remove\", element, rest);\nvar attachStyle = (element, css) => element.attachShadow({ mode: \"open\" }).append(\n  createElement(\"slot\"),\n  // Unnamed slot does automatically render all top element nodes\n  createElement(\"style\", css)\n);\nvar observers = /* @__PURE__ */ new WeakMap();\nvar mutationObserver = (element, options) => {\n  if (options === void 0) return observers.get(element);\n  try {\n    observers.get(element).disconnect();\n    observers.delete(element);\n  } catch (err) {\n  }\n  if (options) {\n    const observer = new MutationObserver(\n      (detail) => element.handleEvent({ type: \"mutation\", detail })\n    );\n    observer.observe(element, options);\n    observers.set(element, observer);\n  }\n};\nvar asButton = (event) => {\n  const isClick = \"key\" in event && (event.key === \" \" || event.key === \"Enter\");\n  if (isClick) event.preventDefault();\n  if (isClick && event.target instanceof HTMLElement) event.target.click();\n  return isClick;\n};\nvar getRoot = (node) => {\n  var _a2;\n  const root = ((_a2 = node.getRootNode) == null ? void 0 : _a2.call(node)) || node.ownerDocument;\n  return root instanceof Document || root instanceof ShadowRoot ? root : document;\n};\nvar id = 0;\nvar useId = (el) => {\n  if (!el) return \"\";\n  if (!el.id) el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`;\n  return el.id;\n};\nvar createElement = (tagName, text, attrs) => {\n  const el = document.createElement(tagName);\n  if (text) el.textContent = text;\n  return el;\n};\nvar customElements = {\n  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)\n};\n\n// u-tabs.ts\nvar ARIA_CONTROLS = \"aria-controls\";\nvar ARIA_SELECTED = \"aria-selected\";\nvar UHTMLTabsElement = class extends UHTMLElement {\n  constructor() {\n    super();\n    attachStyle(this, DISPLAY_BLOCK);\n  }\n  get tabList() {\n    return queryWithoutNested(\"u-tablist\", this)[0] || null;\n  }\n  get selectedIndex() {\n    return getSelectedIndex(this.tabs);\n  }\n  set selectedIndex(index) {\n    setSelected(this.tabs[index]);\n  }\n  get tabs() {\n    return queryWithoutNested(\"u-tab\", this);\n  }\n  get panels() {\n    return queryWithoutNested(\"u-tabpanel\", this);\n  }\n};\nvar UHTMLTabListElement = class extends UHTMLElement {\n  constructor() {\n    super();\n    attachStyle(this, DISPLAY_BLOCK);\n  }\n  connectedCallback() {\n    attr(this, \"role\", \"tablist\");\n    on(this, \"click,keydown\", this);\n    mutationObserver(this, { childList: true });\n    if (this.tabs.length) this.handleEvent();\n  }\n  disconnectedCallback() {\n    off(this, \"click,keydown\", this);\n    mutationObserver(this, false);\n  }\n  handleEvent(event) {\n    if (!event || event.type === \"mutation\") {\n      const tab = this.tabs[Math.max(this.selectedIndex, 0)];\n      return tab == null ? void 0 : tab.setAttribute(ARIA_SELECTED, \"true\");\n    }\n    const { key } = event;\n    const tabs = [...this.tabs];\n    const prev = tabs.findIndex((tab) => tab.contains(event.target));\n    let next = prev;\n    if (event.defaultPrevented || prev === -1) return;\n    if (event.type === \"click\") setSelected(tabs[prev]);\n    if (event.type === \"keydown\" && !asButton(event)) {\n      if (key === \"ArrowDown\" || key === \"ArrowRight\")\n        next = (prev + 1) % tabs.length;\n      else if (key === \"ArrowUp\" || key === \"ArrowLeft\")\n        next = (prev || tabs.length) - 1;\n      else if (key === \"End\") next = tabs.length - 1;\n      else if (key === \"Home\") next = 0;\n      else if (key === \"Tab\") next = getSelectedIndex(tabs);\n      else return;\n      setTimeout(() => {\n        tabs[prev].tabIndex = -1;\n        tabs[next].tabIndex = 0;\n      });\n      if (key !== \"Tab\") {\n        event.preventDefault();\n        tabs[next].focus();\n      }\n    }\n  }\n  get tabsElement() {\n    return this.closest(\"u-tabs\");\n  }\n  get tabs() {\n    return this.querySelectorAll(\"u-tab\");\n  }\n  get selectedIndex() {\n    return getSelectedIndex(this.tabs);\n  }\n  set selectedIndex(index) {\n    setSelected(this.tabs[index]);\n  }\n};\nvar SKIP_ATTR_CHANGE = false;\nvar UHTMLTabElement = class extends UHTMLElement {\n  // Using ES2015 syntax for backwards compatibility\n  static get observedAttributes() {\n    return [\"id\", ARIA_SELECTED, ARIA_CONTROLS];\n  }\n  constructor() {\n    super();\n    attachStyle(\n      this,\n      \":host(:not([hidden])) { cursor: pointer; display: inline-block }\"\n    );\n  }\n  connectedCallback() {\n    attr(this, \"role\", \"tab\");\n    this.tabIndex = this.selected ? 0 : -1;\n  }\n  attributeChangedCallback() {\n    if (!SKIP_ATTR_CHANGE && this.selected && this.tabList) {\n      SKIP_ATTR_CHANGE = true;\n      const tabs = [...this.tabList.querySelectorAll(\"u-tab\")];\n      const panels = queryWithoutNested(\"u-tabpanel\", this.tabsElement || this);\n      const nextPanel = getPanel(this, panels[tabs.indexOf(this)]);\n      if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));\n      tabs.forEach((tab, index) => {\n        const panel = getPanel(tab, panels[index]);\n        tab.tabIndex = tab === this ? 0 : -1;\n        attr(tab, ARIA_SELECTED, `${tab === this}`);\n        if (panel) panel.hidden = panel !== nextPanel;\n        if (panel) attr(tab, ARIA_CONTROLS, panel.id);\n      });\n      SKIP_ATTR_CHANGE = false;\n    }\n  }\n  get tabsElement() {\n    return this.closest(\"u-tabs\");\n  }\n  get tabList() {\n    const tablist = this.parentElement;\n    return (tablist == null ? void 0 : tablist.nodeName) === \"U-TABLIST\" ? tablist : null;\n  }\n  get selected() {\n    return attr(this, ARIA_SELECTED) === \"true\";\n  }\n  set selected(value) {\n    attr(this, ARIA_SELECTED, `${!!value}`);\n  }\n  /** Retrieves the ordinal position of an tab in a tablist. */\n  get index() {\n    const tabList = this.tabList;\n    return tabList ? [...tabList.querySelectorAll(\"u-tab\")].indexOf(this) : 0;\n  }\n  get panel() {\n    return getPanel(this);\n  }\n};\nvar UHTMLTabPanelElement = class extends UHTMLElement {\n  // Using ES2015 syntax for backwards compatibility\n  static get observedAttributes() {\n    return [\"hidden\"];\n  }\n  constructor() {\n    super();\n    attachStyle(this, DISPLAY_BLOCK);\n  }\n  connectedCallback() {\n    attr(this, \"role\", \"tabpanel\");\n    this.hidden = getSelectedIndex(this.tabs) === -1;\n    this.attributeChangedCallback();\n  }\n  attributeChangedCallback() {\n    if (this.hidden || isFocusable(this.firstChild))\n      attr(this, \"tabindex\", null);\n    else this.tabIndex = 0;\n  }\n  get tabsElement() {\n    return this.closest(\"u-tabs\");\n  }\n  get tabs() {\n    const css = `u-tab[${ARIA_CONTROLS}=\"${this.id}\"]`;\n    return getRoot(this).querySelectorAll(css);\n  }\n};\nvar queryWithoutNested = (tag, self) => self.querySelectorAll(`${tag}:not(:scope u-tabpanel ${tag})`);\nvar getPanel = (tab, panel) => {\n  const id2 = attr(tab, ARIA_CONTROLS) || useId(panel);\n  const el = getRoot(tab).getElementById(id2);\n  return (el == null ? void 0 : el.nodeName) === \"U-TABPANEL\" ? el : null;\n};\nvar getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === \"true\");\nvar setSelected = (tab) => tab && attr(tab, \"aria-selected\", \"true\");\nvar isFocusable = (el) => el instanceof Element && !el.matches(':disabled,[tabindex^=\"-\"]') && el.matches(\n  `[contenteditable],[controls],[href],[tabindex],input:not([type=\"hidden\"]),select,textarea,button,summary,iframe`\n);\ncustomElements.define(\"u-tabs\", UHTMLTabsElement);\ncustomElements.define(\"u-tablist\", UHTMLTabListElement);\ncustomElements.define(\"u-tab\", UHTMLTabElement);\ncustomElements.define(\"u-tabpanel\", UHTMLTabPanelElement);\n\nexport { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };\n"],"names":["IS_BROWSER","IS_ANDROID","_a","SAFE_LABELLEDBY","DISPLAY_BLOCK","UHTMLElement","attr","el","name","value","_a2","events","action","element","rest","type","on","off","attachStyle","css","createElement","observers","mutationObserver","options","observer","detail","asButton","event","isClick","getRoot","node","root","id","useId","tagName","text","attrs","customElements","instance","ARIA_CONTROLS","ARIA_SELECTED","UHTMLTabsElement","queryWithoutNested","getSelectedIndex","index","setSelected","UHTMLTabListElement","tab","key","tabs","prev","next","SKIP_ATTR_CHANGE","UHTMLTabElement","panels","nextPanel","getPanel","panel","tablist","tabList","UHTMLTabPanelElement","isFocusable","tag","self","id2"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"u-tabs.js","sources":["../../../../../node_modules/@u-elements/u-tabs/dist/u-tabs.js"],"sourcesContent":["// ../utils.ts\nvar IS_BROWSER = typeof window !== \"undefined\" && typeof window.document !== \"undefined\" && typeof window.navigator !== \"undefined\";\nvar IS_ANDROID = IS_BROWSER && /android/i.test(navigator.userAgent);\nvar _a;\nIS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n/^Mac/i.test(((_a = navigator.userAgentData) == null ? void 0 : _a.platform) || navigator.platform);\nvar SAFE_LABELLEDBY = `${IS_ANDROID ? \"data\" : \"aria\"}-labelledby`;\nvar DISPLAY_BLOCK = \":host(:not([hidden])) { display: block }\";\nvar UHTMLElement = typeof HTMLElement === \"undefined\" ? class {\n} : HTMLElement;\nfunction attr(el, name, value) {\n  var _a2;\n  if (value === void 0) return (_a2 = el.getAttribute(name)) != null ? _a2 : null;\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n}\nvar events = (action, element, rest) => {\n  for (const type of rest[0].split(\",\")) {\n    rest[0] = type;\n    Element.prototype[`${action}EventListener`].apply(element, rest);\n  }\n};\nvar on = (element, ...rest) => events(\"add\", element, rest);\nvar off = (element, ...rest) => events(\"remove\", element, rest);\nvar attachStyle = (element, css) => element.attachShadow({ mode: \"open\" }).append(\n  createElement(\"slot\"),\n  // Unnamed slot does automatically render all top element nodes\n  createElement(\"style\", css)\n);\nvar observers = /* @__PURE__ */ new WeakMap();\nvar mutationObserver = (element, options) => {\n  if (options === void 0) return observers.get(element);\n  try {\n    observers.get(element).disconnect();\n    observers.delete(element);\n  } catch (err) {\n  }\n  if (options) {\n    const observer = new MutationObserver(\n      (detail) => element.handleEvent({ type: \"mutation\", detail })\n    );\n    observer.observe(element, options);\n    observers.set(element, observer);\n  }\n};\nvar asButton = (event) => {\n  const isClick = \"key\" in event && (event.key === \" \" || event.key === \"Enter\");\n  if (isClick) event.preventDefault();\n  if (isClick && event.target instanceof HTMLElement) event.target.click();\n  return isClick;\n};\nvar getRoot = (node) => {\n  var _a2;\n  const root = ((_a2 = node.getRootNode) == null ? void 0 : _a2.call(node)) || node.ownerDocument;\n  return root instanceof Document || root instanceof ShadowRoot ? root : document;\n};\nvar id = 0;\nvar useId = (el) => {\n  if (!el) return \"\";\n  if (!el.id) el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`;\n  return el.id;\n};\nvar createElement = (tagName, text, attrs) => {\n  const el = document.createElement(tagName);\n  if (text) el.textContent = text;\n  return el;\n};\nvar customElements = {\n  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)\n};\n\n// u-tabs.ts\nvar ARIA_CONTROLS = \"aria-controls\";\nvar ARIA_SELECTED = \"aria-selected\";\nvar UHTMLTabsElement = class extends UHTMLElement {\n  constructor() {\n    super();\n    attachStyle(this, DISPLAY_BLOCK);\n  }\n  get tabList() {\n    return queryWithoutNested(\"u-tablist\", this)[0] || null;\n  }\n  get selectedIndex() {\n    return getSelectedIndex(this.tabs);\n  }\n  set selectedIndex(index) {\n    setSelected(this.tabs[index]);\n  }\n  get tabs() {\n    return queryWithoutNested(\"u-tab\", this);\n  }\n  get panels() {\n    return queryWithoutNested(\"u-tabpanel\", this);\n  }\n};\nvar UHTMLTabListElement = class extends UHTMLElement {\n  constructor() {\n    super();\n    attachStyle(this, DISPLAY_BLOCK);\n  }\n  connectedCallback() {\n    attr(this, \"role\", \"tablist\");\n    on(this, \"click,keydown\", this);\n    mutationObserver(this, { childList: true });\n    if (this.tabs.length) this.handleEvent();\n  }\n  disconnectedCallback() {\n    off(this, \"click,keydown\", this);\n    mutationObserver(this, false);\n  }\n  handleEvent(event) {\n    if (!event || event.type === \"mutation\") {\n      const tab = this.tabs[Math.max(this.selectedIndex, 0)];\n      return tab == null ? void 0 : tab.setAttribute(ARIA_SELECTED, \"true\");\n    }\n    const { key } = event;\n    const tabs = [...this.tabs];\n    const prev = tabs.findIndex((tab) => tab.contains(event.target));\n    let next = prev;\n    if (event.defaultPrevented || prev === -1) return;\n    if (event.type === \"click\") setSelected(tabs[prev]);\n    if (event.type === \"keydown\" && !asButton(event)) {\n      if (key === \"ArrowDown\" || key === \"ArrowRight\")\n        next = (prev + 1) % tabs.length;\n      else if (key === \"ArrowUp\" || key === \"ArrowLeft\")\n        next = (prev || tabs.length) - 1;\n      else if (key === \"End\") next = tabs.length - 1;\n      else if (key === \"Home\") next = 0;\n      else if (key === \"Tab\") next = getSelectedIndex(tabs);\n      else return;\n      setTimeout(() => {\n        tabs[prev].tabIndex = -1;\n        tabs[next].tabIndex = 0;\n      });\n      if (key !== \"Tab\") {\n        event.preventDefault();\n        tabs[next].focus();\n      }\n    }\n  }\n  get tabsElement() {\n    return this.closest(\"u-tabs\");\n  }\n  get tabs() {\n    return this.querySelectorAll(\"u-tab\");\n  }\n  get selectedIndex() {\n    return getSelectedIndex(this.tabs);\n  }\n  set selectedIndex(index) {\n    setSelected(this.tabs[index]);\n  }\n};\nvar SKIP_ATTR_CHANGE = false;\nvar UHTMLTabElement = class extends UHTMLElement {\n  // Using ES2015 syntax for backwards compatibility\n  static get observedAttributes() {\n    return [\"id\", ARIA_SELECTED, ARIA_CONTROLS];\n  }\n  constructor() {\n    super();\n    attachStyle(\n      this,\n      \":host(:not([hidden])) { cursor: pointer; display: inline-block }\"\n    );\n  }\n  connectedCallback() {\n    attr(this, \"role\", \"tab\");\n    this.tabIndex = this.selected ? 0 : -1;\n  }\n  attributeChangedCallback() {\n    if (!SKIP_ATTR_CHANGE && this.selected && this.tabList) {\n      SKIP_ATTR_CHANGE = true;\n      const tabs = [...this.tabList.querySelectorAll(\"u-tab\")];\n      const panels = queryWithoutNested(\"u-tabpanel\", this.tabsElement || this);\n      const nextPanel = getPanel(this, panels[tabs.indexOf(this)]);\n      if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));\n      tabs.forEach((tab, index) => {\n        const panel = getPanel(tab, panels[index]);\n        tab.tabIndex = tab === this ? 0 : -1;\n        attr(tab, ARIA_SELECTED, `${tab === this}`);\n        if (panel) panel.hidden = panel !== nextPanel;\n        if (panel) attr(tab, ARIA_CONTROLS, panel.id);\n      });\n      SKIP_ATTR_CHANGE = false;\n    }\n  }\n  get tabsElement() {\n    return this.closest(\"u-tabs\");\n  }\n  get tabList() {\n    const tablist = this.parentElement;\n    return (tablist == null ? void 0 : tablist.nodeName) === \"U-TABLIST\" ? tablist : null;\n  }\n  get selected() {\n    return attr(this, ARIA_SELECTED) === \"true\";\n  }\n  set selected(value) {\n    attr(this, ARIA_SELECTED, `${!!value}`);\n  }\n  /** Retrieves the ordinal position of an tab in a tablist. */\n  get index() {\n    const tabList = this.tabList;\n    return tabList ? [...tabList.querySelectorAll(\"u-tab\")].indexOf(this) : 0;\n  }\n  get panel() {\n    return getPanel(this);\n  }\n};\nvar UHTMLTabPanelElement = class extends UHTMLElement {\n  // Using ES2015 syntax for backwards compatibility\n  static get observedAttributes() {\n    return [\"hidden\"];\n  }\n  constructor() {\n    super();\n    attachStyle(this, DISPLAY_BLOCK);\n  }\n  connectedCallback() {\n    attr(this, \"role\", \"tabpanel\");\n    this.hidden = getSelectedIndex(this.tabs) === -1;\n    this.attributeChangedCallback();\n  }\n  attributeChangedCallback() {\n    if (this.hidden || isFocusable(this.firstChild))\n      attr(this, \"tabindex\", null);\n    else this.tabIndex = 0;\n  }\n  get tabsElement() {\n    return this.closest(\"u-tabs\");\n  }\n  get tabs() {\n    const css = `u-tab[${ARIA_CONTROLS}=\"${this.id}\"]`;\n    return getRoot(this).querySelectorAll(css);\n  }\n};\nvar queryWithoutNested = (tag, self) => self.querySelectorAll(`${tag}:not(:scope u-tabpanel ${tag})`);\nvar getPanel = (tab, panel) => {\n  const id2 = attr(tab, ARIA_CONTROLS) || useId(panel);\n  const el = getRoot(tab).getElementById(id2);\n  return (el == null ? void 0 : el.nodeName) === \"U-TABPANEL\" ? el : null;\n};\nvar getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === \"true\");\nvar setSelected = (tab) => tab && attr(tab, \"aria-selected\", \"true\");\nvar isFocusable = (el) => el instanceof Element && !el.matches(':disabled,[tabindex^=\"-\"]') && el.matches(\n  `[contenteditable],[controls],[href],[tabindex],input:not([type=\"hidden\"]),select,textarea,button,summary,iframe`\n);\ncustomElements.define(\"u-tabs\", UHTMLTabsElement);\ncustomElements.define(\"u-tablist\", UHTMLTabListElement);\ncustomElements.define(\"u-tab\", UHTMLTabElement);\ncustomElements.define(\"u-tabpanel\", UHTMLTabPanelElement);\n\nexport { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };\n"],"names":["IS_BROWSER","IS_ANDROID","_a","SAFE_LABELLEDBY","DISPLAY_BLOCK","UHTMLElement","attr","el","name","value","_a2","events","action","element","rest","type","on","off","attachStyle","css","createElement","observers","mutationObserver","options","observer","detail","asButton","event","isClick","getRoot","node","root","id","useId","tagName","text","attrs","customElements","instance","ARIA_CONTROLS","ARIA_SELECTED","UHTMLTabsElement","queryWithoutNested","getSelectedIndex","index","setSelected","UHTMLTabListElement","tab","key","tabs","prev","next","SKIP_ATTR_CHANGE","UHTMLTabElement","panels","nextPanel","getPanel","panel","tablist","tabList","UHTMLTabPanelElement","isFocusable","tag","self","id2"],"mappings":"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","x_google_ignoreList":[0]}

package/mtds/field/field-observer.js

@@ -1,70 +1,70 @@
-import { UHTMLComboboxElement as p } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
-import { UHTMLDataListElement as C } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
-import h from "../styles.module.css.js";
-import { onLoaded as I, onMutation as S, on as l, QUICK_EVENT as m, isInputLike as g, attr as i, useId as b, anchorPosition as u } from "../utils.js";
-const v = h.field.split(" ")[0], x = h.validation.split(" "), E = x[0], a = (t, o) => {
-  var n;
-  return ((n = t.getPropertyValue(`--mtds-text-${o}`)) == null ? void 0 : n.slice(1, -1)) || "";
-};
-function M(t) {
-  for (const o of t)
-    if (o.isConnected) {
-      const n = [], s = [];
-      let c = null, r = null, d = !0;
-      for (const e of o.getElementsByTagName("*"))
-        e instanceof HTMLLabelElement ? n.push(e) : e instanceof p ? c = e : g(e) ? r = e : e.hasAttribute("data-description") ? s.push(e) : e.classList.contains(E) ? (d = i(e, "data-color") === "success" || !e.clientWidth || !e.clientHeight, s.unshift(e)) : e instanceof HTMLParagraphElement && (s.some((f) => f.contains(e)) || s.push(e));
-      if (r) {
-        for (const e of n) e.htmlFor = b(r);
-        A(c), L(r), y(r), i(r, "aria-describedby", s.map(b).join(" ") || null), i(r, "aria-invalid", `${!d}`);
+import { UHTMLComboboxElement as g } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
+import { UHTMLDataListElement as S } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
+import v from "../styles.module.css.js";
+import { onLoaded as I, onMutation as M, on as u, QUICK_EVENT as m, isInputLike as x, attr as n, useId as h, anchorPosition as p } from "../utils.js";
+const b = v.field.split(" ")[0], y = v.validation.split(" "), A = y[0], i = (t, o) => t.getPropertyValue(`--mtds-text-${o}`)?.slice(1, -1) || "";
+function L(t, o) {
+  for (const r of t)
+    if (r.isConnected) {
+      const l = [], s = [], f = [];
+      let c = null, a = null, d = !0;
+      for (const e of r.getElementsByTagName("*"))
+        e instanceof HTMLLabelElement ? l.push(e) : e instanceof g ? c = e : x(e) && !e.hidden ? a = e : e.hasAttribute("data-description") ? s.push(e) : e.classList.contains(A) ? (d = n(e, "data-color") === "success" || !e.clientHeight, f.push(e), s.unshift(e)) : e instanceof HTMLParagraphElement && (s.some((E) => E.contains(e)) || s.push(e));
+      if (a) {
+        for (const e of l) e.htmlFor = h(a);
+        if (o && n(r, "data-validation") === "form") {
+          d = a.matches(":valid");
+          for (const e of f) n(e, "hidden", d ? "" : null);
+        }
+        H(c), C(a), T(a), n(a, "aria-describedby", s.map(h).join(" ") || null), n(a, "aria-invalid", `${!d}`);
       }
     }
 }
-function y(t) {
+function T(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
     "--mtds-textarea-height",
     `${t.scrollHeight}px`
   ));
 }
-function A(t) {
-  var n;
-  if (!(t != null && t.list) || (n = t.list) != null && n.hasAttribute("popover")) return;
+function H(t) {
+  if (!t?.list || t.list?.hasAttribute("popover")) return;
   const o = window.getComputedStyle(t);
-  i(t, "data-sr-added", a(o, "combobox-added")), i(t, "data-sr-empty", a(o, "combobox-empty")), i(t, "data-sr-found", a(o, "combobox-found")), i(t, "data-sr-invalid", a(o, "combobox-invalid")), i(t, "data-sr-of", a(o, "combobox-of")), i(t, "data-sr-remove", a(o, "combobox-remove")), i(t, "data-sr-removed", a(o, "combobox-removed")), i(t.list, "data-sr-plural", a(o, "datalist-plural")), i(t.list, "data-sr-singular", a(o, "datalist-singular")), i(t.list, "popover", "manual");
+  n(t, "data-sr-added", i(o, "combobox-added")), n(t, "data-sr-empty", i(o, "combobox-empty")), n(t, "data-sr-found", i(o, "combobox-found")), n(t, "data-sr-invalid", i(o, "combobox-invalid")), n(t, "data-sr-of", i(o, "combobox-of")), n(t, "data-sr-remove", i(o, "combobox-remove")), n(t, "data-sr-removed", i(o, "combobox-removed")), n(t.list, "data-sr-plural", i(o, "datalist-plural")), n(t.list, "data-sr-singular", i(o, "datalist-singular")), n(t.list, "popover", "manual");
 }
-function L(t) {
-  const o = t == null ? void 0 : t.nextElementSibling, n = o && i(o, "data-count");
-  if (o && n) {
-    const s = Number(n) - t.value.length, c = s < 0, r = i(o, "aria-live") === "polite", d = window.getComputedStyle(o || t), e = a(d, "count-over"), f = a(d, "count-under");
-    if (r !== c) {
-      i(o, "aria-live", c ? "polite" : "off");
-      for (const T of x) o.classList.toggle(T, c);
+function C(t) {
+  const o = t?.nextElementSibling, r = o && n(o, "data-count");
+  if (o && r) {
+    const l = Number(r) - t.value.length, s = l < 0, f = n(o, "aria-live") === "polite", c = window.getComputedStyle(o || t), a = i(c, "count-over"), d = i(c, "count-under");
+    if (f !== s) {
+      n(o, "aria-live", s ? "polite" : "off");
+      for (const e of y) o.classList.toggle(e, s);
     }
-    o.textContent = (c ? e : f).replace(
+    o.textContent = (s ? a : d).replace(
       "%d",
-      `${Math.abs(s)}`
+      `${Math.abs(l)}`
     );
   }
 }
-function H({ target: t, newState: o }) {
-  if (t instanceof C) {
-    const n = t.getRootNode(), s = n == null ? void 0 : n.querySelector(
+function N({ target: t, newState: o }) {
+  if (t instanceof S) {
+    const l = t.getRootNode()?.querySelector(
       `[popovertarget="${t.id}"]`
     );
-    o === "closed" ? u(t, !1) : s && (t.style.width = `${s.clientWidth}px`, u(t, s, "bottom", !0));
+    o === "closed" ? p(t, !1) : l && (t.style.width = `${l.clientWidth}px`, p(t, l, n(t, "data-position") ?? "bottom", !0));
   }
 }
 function $({ target: t }) {
-  g(t) && (L(t), y(t));
+  x(t) && (C(t), T(t));
 }
-function N(t) {
-  var o, n;
-  (n = (o = t.target) == null ? void 0 : o.closest) != null && n.call(o, `.${v}`) && t.preventDefault();
+function w(t) {
+  const o = t.target?.closest?.(`.${b}`);
+  t.type === "invalid" && o && t.preventDefault(), L(document.getElementsByClassName(b), !0);
 }
-function w({ target: t }) {
-  const o = t instanceof p && t.list;
-  o && !(o != null && o.hidden) && setTimeout(() => u(o, t, 2, !0), 10);
+function D({ target: t }) {
+  const o = t instanceof g && t.list;
+  o && !o?.hidden && setTimeout(() => p(o, t, 2, !0), 10);
 }
 I(() => {
-  S(document.documentElement, v, M), l(document, "beforechange", w, m), l(document, "input", $, m), l(document, "invalid", N, !0), l(document, "toggle", H, m);
+  M(document.documentElement, b, L), u(document, "beforechange", D, m), u(document, "input", $, m), u(document, "invalid,submit", w, !0), u(document, "toggle", N, m);
 });
 //# sourceMappingURL=field-observer.js.map

package/mtds/field/field-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tanchorPosition,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>) {\n\tfor (const field of fields)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descs: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el)) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descs.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid =\n\t\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tdescs.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescs.some((desc) => desc.contains(el)) || descs.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descs.map(useId).join(\" \") || null); // Remove if empty\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tif (!el?.list || el.list?.hasAttribute(\"popover\")) return;\n\tconst style = window.getComputedStyle(el);\n\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\tattr(el.list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\tattr(el.list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\tattr(el.list, \"popover\", \"manual\");\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor) {\n\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\tanchorPosition(el, anchor, \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\n// Position combobox when changing content\nfunction handleBeforeChange({ target: el }: Event) {\n\tconst list = el instanceof UHTMLComboboxElement && el.list;\n\tif (list && !list?.hidden)\n\t\tsetTimeout(() => anchorPosition(list, el, 2, true), 10); // Reposition list if not hidden\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"beforechange\", handleBeforeChange, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","_a","handleMutation","fields","field","labels","descs","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","root","anchor","anchorPosition","handleInput","target","handleInvalid","event","_b","handleBeforeChange","list","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>, validate?: boolean) {\n\tfor (const field of fields)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descs: Element[] = [];\n\t\t\tconst valids: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descs.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalids.push(el);\n\t\t\t\t\tdescs.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescs.some((desc) => desc.contains(el)) || descs.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\tif (validate && attr(field, \"data-validation\") === \"form\") {\n\t\t\t\t\tvalid = input.matches(\":valid\");\n\t\t\t\t\tfor (const el of valids) attr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t}\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descs.map(useId).join(\" \") || null); // Remove if empty\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tif (!el?.list || el.list?.hasAttribute(\"popover\")) return;\n\tconst style = window.getComputedStyle(el);\n\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\tattr(el.list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\tattr(el.list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\tattr(el.list, \"popover\", \"manual\");\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor) {\n\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\tanchorPosition(el, anchor, attr(el, \"data-position\") ?? \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\t}\n}\n\nfunction handleValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\thandleMutation(document.getElementsByClassName(CSS_FIELD), true); // Update state\n}\n\n// Position combobox when changing content\nfunction handleBeforeChange({ target: el }: Event) {\n\tconst list = el instanceof UHTMLComboboxElement && el.list;\n\tif (list && !list?.hidden)\n\t\tsetTimeout(() => anchorPosition(list, el, 2, true), 10); // Reposition list if not hidden\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"beforechange\", handleBeforeChange, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid,submit\", handleValdiation, true); // Use capture as invalid and submit does not bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","handleMutation","fields","validate","field","labels","descs","valids","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","anchor","anchorPosition","handleInput","target","handleValdiation","event","handleBeforeChange","list","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.d.ts

@@ -1,6 +1,7 @@
 import { ReactUcombobox, UHTMLComboboxElement } from '@u-elements/u-combobox';
 import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
+import { AnchorPosition } from '../utils';
 type FieldBaseProps = {
     count?: number;
     description?: React.ReactNode;
@@ -22,6 +23,7 @@ type FieldComponent = <As extends React.ElementType = "div">(props: FieldProps<A
 export declare const FieldComp: FieldComponent;
 export type FieldDatalistProps = React.ComponentPropsWithoutRef<"datalist"> & {
     "data-nofilter"?: boolean;
+    "data-position"?: AnchorPosition;
 };
 export type FieldOptionProps = React.ComponentPropsWithoutRef<"option">;
 export type FieldComboboxProps = ReactUcombobox & {
@@ -33,6 +35,7 @@ export declare const Field: FieldComponent & {
     Combobox: React.ForwardRefExoticComponent<Omit<FieldComboboxProps, "ref"> & React.RefAttributes<UHTMLComboboxElement>>;
     Datalist: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, "ref"> & {
         "data-nofilter"?: boolean;
+        "data-position"?: AnchorPosition;
     } & React.RefAttributes<HTMLDataListElement>>;
     Option: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "ref"> & React.RefAttributes<HTMLOptionElement>>;
 };

package/mtds/field/field.js

@@ -1,6 +1,6 @@
-import { jsx as i, Fragment as W, jsxs as N } from "react/jsx-runtime";
-import { clsx as O } from "../external/clsx/dist/clsx.js";
-import { forwardRef as e } from "react";
+import { jsx as i, Fragment as W, jsxs as C } from "react/jsx-runtime";
+import { clsx as N } from "../external/clsx/dist/clsx.js";
+import { forwardRef as p } from "react";
 import "../alert/alert.js";
 import "../app/app.js";
 import "../avatar/avatar.js";
@@ -31,70 +31,70 @@ import "../tag/tag.js";
 import "../togglegroup/togglegroup.js";
 import "../typography/typography.js";
 import "../validation/validation.js";
-import n from "../styles.module.css.js";
-import { toCustomElementProps as f } from "../utils.js";
-const E = e(function({
+import m from "../styles.module.css.js";
+import { toCustomElementProps as c } from "../utils.js";
+const E = p(function({
   "data-size": o,
   as: t,
   className: a,
-  count: u,
-  description: b,
-  error: y,
-  helpText: h,
-  helpTextLabel: A,
-  label: F,
-  options: l,
-  prefix: s,
+  count: f,
+  description: u,
+  error: j,
+  helpText: b,
+  helpTextLabel: y,
+  label: h,
+  options: A,
+  prefix: l,
   style: D,
-  suffix: d,
+  suffix: s,
   validation: H,
-  ...m
-}, c) {
-  const x = t || "div", z = !!d || !!s, g = H || y, v = {
+  ...n
+}, d) {
+  const F = t || "div", z = !!s || !!l, x = H || j, g = {
     "data-size": o,
-    className: O(n.field, a),
+    className: N(m.field, a),
     style: D
   };
-  return t === "select" && !m.children && Object.assign(m, {
-    children: /* @__PURE__ */ i(W, { children: l == null ? void 0 : l.map((r) => typeof r == "string" ? { label: r, value: r } : r).map(({ label: r, value: C }) => /* @__PURE__ */ i("option", { value: C, children: r }, C)) })
-  }), t ? /* @__PURE__ */ N("div", { ...v, children: [
-    !!F && /* @__PURE__ */ i("label", { suppressHydrationWarning: !0, children: F }),
-    !!h && /* @__PURE__ */ i(w, { "aria-label": A, children: h }),
-    !!b && /* @__PURE__ */ i("p", { children: b }),
-    z ? /* @__PURE__ */ N(j, { children: [
-      !!s && /* @__PURE__ */ i("span", { children: s }),
-      /* @__PURE__ */ i(x, { className: n.input, ref: c, ...m }),
-      !!d && /* @__PURE__ */ i("span", { children: d })
+  return t === "select" && !n.children && Object.assign(n, {
+    children: /* @__PURE__ */ i(W, { children: A?.map((r) => typeof r == "string" ? { label: r, value: r } : r).map(({ label: r, value: v }) => /* @__PURE__ */ i("option", { value: v, children: r }, v)) })
+  }), t ? /* @__PURE__ */ C("div", { ...g, children: [
+    !!h && /* @__PURE__ */ i("label", { suppressHydrationWarning: !0, children: h }),
+    !!b && /* @__PURE__ */ i(w, { "aria-label": y, children: b }),
+    !!u && /* @__PURE__ */ i("p", { children: u }),
+    z ? /* @__PURE__ */ C(O, { children: [
+      !!l && /* @__PURE__ */ i("span", { children: l }),
+      /* @__PURE__ */ i(F, { className: m.input, ref: d, ...n }),
+      !!s && /* @__PURE__ */ i("span", { children: s })
     ] }) : /* @__PURE__ */ i(
-      x,
+      F,
       {
-        className: n.input,
+        className: m.input,
         suppressHydrationWarning: !0,
-        ref: c,
-        ...m
+        ref: d,
+        ...n
       }
     ),
-    !!g && /* @__PURE__ */ i("div", { className: n.validation, children: g }),
-    !!u && /* @__PURE__ */ i("p", { "data-count": u })
-  ] }) : /* @__PURE__ */ i("div", { ref: c, ...v, ...m });
-}), j = e(
+    !!x && /* @__PURE__ */ i("div", { className: m.validation, children: x }),
+    !!f && /* @__PURE__ */ i("p", { "data-count": f })
+  ] }) : /* @__PURE__ */ i("div", { ref: d, ...g, ...n });
+}), O = p(
   function({ className: o, ...t }, a) {
-    return /* @__PURE__ */ i("div", { className: O(n.affixes, o), ref: a, ...t });
+    return /* @__PURE__ */ i("div", { className: N(m.affixes, o), ref: a, ...t });
   }
-), P = e(
+), P = p(
   function(o, t) {
-    return /* @__PURE__ */ i("u-datalist", { ref: t, ...f(o) });
+    return /* @__PURE__ */ i("u-datalist", { ref: t, ...c(o) });
   }
-), R = e(
+), R = p(
   function(o, t) {
-    return /* @__PURE__ */ i("u-option", { ref: t, ...f(o) });
+    return /* @__PURE__ */ i("u-option", { ref: t, ...c(o) });
   }
-), T = e(
+), T = p(
   function(o, t) {
-    return /* @__PURE__ */ i("u-combobox", { ref: t, ...f(o) });
+    return /* @__PURE__ */ i("u-combobox", { ref: t, ...c(o) });
   }
 ), Fi = Object.assign(E, {
-  Affixes: j,
+  Affixes: O,
   Combobox: T,
   Datalist: P,
   Option: R

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxProps = ReactUcombobox & {\n\t\"data-multiple\"?: boolean;\n\t\"data-creatable\"?: boolean;\n};\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(props, ref) {\n\t\treturn <u-combobox ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldCombobox","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { type AnchorPosition, toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t\"data-position\"?: AnchorPosition;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxProps = ReactUcombobox & {\n\t\"data-multiple\"?: boolean;\n\t\"data-creatable\"?: boolean;\n};\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(props, ref) {\n\t\treturn <u-combobox ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldCombobox","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCa,MAAAA,IAA4BC,EAAiB,SAGzD;AAAA,EACC,aAAaC;AAAA,EACb,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,GACAC,GACC;AACD,QAAMC,IAAMf,KAAM,OACZgB,IAAU,CAAC,CAACL,KAAU,CAAC,CAACF,GACxBQ,IAAQL,KAAcR,GACtBc,IAAS;AAAA,IACd,aAAanB;AAAA,IACb,WAAWoB,EAAKC,EAAO,OAAOnB,CAAS;AAAA,IACvC,OAAAS;AAAA,EACD;AAGI,SAAAV,MAAO,YAAY,CAACa,EAAK,YAC5B,OAAO,OAAOA,GAAM;AAAA,IACnB,UACC,gBAAAQ,EAAAC,GAAA,EACE,UACEd,GAAA,IAAI,CAACe,MAAO,OAAOA,KAAM,WAAW,EAAE,OAAOA,GAAG,OAAOA,EAAE,IAAIA,CAAE,EAChE,IAAI,CAAC,EAAE,OAAAhB,GAAO,OAAAiB,EAAM,MACnB,gBAAAH,EAAA,UAAA,EAAmB,OAAAG,GAClB,UAAAjB,EADW,GAAAiB,CAEb,CACA,EACH,CAAA;AAAA,EAAA,CAED,GAGKxB,IACN,gBAAAyB,EAAC,OAAK,EAAA,GAAGP,GACP,UAAA;AAAA,IAAA,CAAC,CAACX,KAAS,gBAAAc,EAAC,SAAM,EAAA,0BAAwB,IAAE,UAAMd,GAAA;AAAA,IAClD,CAAC,CAACF,uBAAaqB,GAAS,EAAA,cAAYpB,GAAgB,UAASD,GAAA;AAAA,IAC7D,CAAC,CAACF,KAAe,gBAAAkB,EAAC,OAAG,UAAYlB,GAAA;AAAA,IACjCa,sBACCW,GACC,EAAA,UAAA;AAAA,MAAA,CAAC,CAAClB,KAAW,gBAAAY,EAAA,QAAA,EAAM,UAAOZ,GAAA;AAAA,wBAC1BM,GAAI,EAAA,WAAWK,EAAO,OAAO,KAAAN,GAAW,GAAGD,GAAM;AAAA,MACjD,CAAC,CAACF,KAAU,gBAAAU,EAAC,UAAM,UAAOV,EAAA,CAAA;AAAA,IAAA,EAAA,CAC5B,IAEA,gBAAAU;AAAA,MAACN;AAAA,MAAA;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,0BAAwB;AAAA,QACxB,KAAAN;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACL;AAAA,IAEA,CAAC,CAACI,KAAS,gBAAAI,EAAC,SAAI,WAAWD,EAAO,YAAa,UAAMH,GAAA;AAAA,IACrD,CAAC,CAACf,KAAU,gBAAAmB,EAAA,KAAA,EAAE,cAAYnB,EAAO,CAAA;AAAA,EAAA,GACnC,IAEC,gBAAAmB,EAAA,OAAA,EAAI,KAAAP,GAAW,GAAGI,GAAS,GAAGL,GAAM;AAEvC,CAAC,GAEKc,IAAe7B;AAAA,EACpB,SAAsB,EAAE,WAAAG,GAAW,GAAGY,EAAA,GAAQC,GAAK;AAEjD,WAAA,gBAAAO,EAAC,OAAI,EAAA,WAAWF,EAAKC,EAAO,SAASnB,CAAS,GAAG,KAAAa,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGxE,GAOMe,IAAgB9B;AAAA,EACrB,SAAuB+B,GAAOf,GAAK;AAClC,6BAAQ,cAAW,EAAA,KAAAA,GAAW,GAAGgB,EAAqBD,CAAK,GAAG;AAAA,EAAA;AAEhE,GAIME,IAAcjC;AAAA,EACnB,SAAqB+B,GAAOf,GAAK;AAChC,6BAAQ,YAAS,EAAA,KAAAA,GAAW,GAAGgB,EAAqBD,CAAK,GAAG;AAAA,EAAA;AAE9D,GAOMG,IAAgBlC;AAAA,EACrB,SAAuB+B,GAAOf,GAAK;AAClC,6BAAQ,cAAW,EAAA,KAAAA,GAAW,GAAGgB,EAAqBD,CAAK,GAAG;AAAA,EAAA;AAEhE,GAEaI,KAAQ,OAAO,OAAOpC,GAAW;AAAA,EAC7C,SAAS8B;AAAA,EACT,UAAUK;AAAA,EACV,UAAUJ;AAAA,EACV,QAAQG;AACT,CAAC;"}

package/mtds/field/field.stories.d.ts

@@ -158,6 +158,7 @@ export declare const Required: Story;
 export declare const Indeterminate: Story;
 export declare const Toggles: Story;
 export declare const WithValidation: Story;
+export declare const WithValidationForm: Story;
 export declare const WithAffixes: Story;
 export declare const WithCharacterCount: Story;
 export declare const WithCustomDescriptionTag: Story;
@@ -165,7 +166,8 @@ export declare const WithCombobox: Story;
 export declare const WithComboboxMultiple: Story;
 export declare const WithComboboxAPI: Story;
 export declare const WithComboboxCustomFilter: Story;
-export declare const ReactWithCombobx: Story;
+export declare const ReactWithCombobox: Story;
 export declare const ReactWithComboboxMultiple: Story;
+export declare const ReactWithComboboxLong: Story;
 export declare const ReactWithCombobxControlled: Story;
 export declare const ReactWithCombobxCustomFilter: Story;

package/mtds/fieldset/fieldset-observer.js

@@ -1,18 +1,17 @@
 import c from "../styles.module.css.js";
-import { onLoaded as r, onMutation as f, useId as m, attr as o, isInputLike as u } from "../utils.js";
+import { onLoaded as r, onMutation as f, attr as e, useId as u, isInputLike as m } from "../utils.js";
 const I = c.fieldset.split(" ")[0], p = c.validation.split(" ")[0], a = "aria-describedby", A = "aria-invalid";
 function L(l) {
   requestAnimationFrame(() => {
-    var e;
-    for (const i of l)
-      if (i.isConnected) {
-        const s = [];
-        let n = null;
-        for (const t of i.getElementsByTagName("*"))
-          t.classList.contains(p) ? n = m(t) : u(t) && s.push(t);
-        for (const t of s) {
-          const d = (e = o(t, a)) == null ? void 0 : e.replace(n || "#", "");
-          o(t, a, `${n || ""} ${d || ""}`.trim()), o(t, A, `${!!n}`);
+    for (const n of l)
+      if (n.isConnected) {
+        const o = [];
+        let i = null, s = !0;
+        for (const t of n.getElementsByTagName("*"))
+          t.classList.contains(p) ? (s = e(t, "data-color") === "success" || !t.clientHeight, i = u(t)) : m(t) && o.push(t);
+        for (const t of o) {
+          const d = e(t, a)?.replace(i || "#", "");
+          e(t, a, `${i || ""} ${d || ""}`.trim()), e(t, A, `${!s}`);
         }
       }
   });

package/mtds/fieldset/fieldset-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isInputLike, onLoaded, onMutation, useId } from \"../utils\";\n\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\nconst ARIA_DESC = \"aria-describedby\";\nconst ARIA_INVALID = \"aria-invalid\";\n\n// Using requestAnimationFrame to ensure it runs after field-observer\nfunction handleMutation(fieldsets: HTMLCollectionOf<Element>) {\n\trequestAnimationFrame(() => {\n\t\tfor (const fieldset of fieldsets)\n\t\t\tif (fieldset.isConnected) {\n\t\t\t\tconst inputs: HTMLInputElement[] = [];\n\t\t\t\tlet validationId: string | null = null;\n\n\t\t\t\tfor (const el of fieldset.getElementsByTagName(\"*\")) {\n\t\t\t\t\tif (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n\t\t\t\t\telse if (isInputLike(el)) inputs.push(el);\n\t\t\t\t}\n\n\t\t\t\tfor (const input of inputs) {\n\t\t\t\t\tconst desc = attr(input, ARIA_DESC)?.replace(validationId || \"#\", \"\");\n\n\t\t\t\t\tattr(input, ARIA_DESC, `${validationId || \"\"} ${desc || \"\"}`.trim());\n\t\t\t\t\tattr(input, ARIA_INVALID, `${!!validationId}`);\n\t\t\t\t}\n\t\t\t}\n\t});\n}\n\nonLoaded(() =>\n\tonMutation(document.documentElement, CSS_FIELDSET, handleMutation),\n);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","ARIA_DESC","ARIA_INVALID","handleMutation","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","desc","_a","attr","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAC/CE,IAAY,oBACZC,IAAe;AAGrB,SAASC,EAAeC,GAAsC;AAC7D,wBAAsB,MAAM;;AAC3B,eAAWC,KAAYD;AACtB,UAAIC,EAAS,aAAa;AACzB,cAAMC,IAA6B,CAAC;AACpC,YAAIC,IAA8B;AAElC,mBAAWC,KAAMH,EAAS,qBAAqB,GAAG;AACjD,UAAIG,EAAG,UAAU,SAASR,CAAc,IAAGO,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAGzC,mBAAWG,KAASL,GAAQ;AACrB,gBAAAM,KAAOC,IAAAC,EAAKH,GAAOV,CAAS,MAArB,gBAAAY,EAAwB,QAAQN,KAAgB,KAAK;AAE7D,UAAAO,EAAAH,GAAOV,GAAW,GAAGM,KAAgB,EAAE,IAAIK,KAAQ,EAAE,GAAG,KAAA,CAAM,GACnEE,EAAKH,GAAOT,GAAc,GAAG,CAAC,CAACK,CAAY,EAAE;AAAA,QAAA;AAAA,MAC9C;AAAA,EACD,CACD;AACF;AAEAQ;AAAA,EAAS,MACRC,EAAW,SAAS,iBAAiBlB,GAAcK,CAAc;AAClE;"}
+{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isInputLike, onLoaded, onMutation, useId } from \"../utils\";\n\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\nconst ARIA_DESC = \"aria-describedby\";\nconst ARIA_INVALID = \"aria-invalid\";\n\n// Using requestAnimationFrame to ensure it runs after field-observer\nfunction handleMutation(fieldsets: HTMLCollectionOf<Element>) {\n\trequestAnimationFrame(() => {\n\t\tfor (const fieldset of fieldsets)\n\t\t\tif (fieldset.isConnected) {\n\t\t\t\tconst inputs: HTMLInputElement[] = [];\n\t\t\t\tlet validId: string | null = null;\n\t\t\t\tlet valid = true;\n\n\t\t\t\tfor (const el of fieldset.getElementsByTagName(\"*\")) {\n\t\t\t\t\tif (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\t\tvalidId = useId(el);\n\t\t\t\t\t} else if (isInputLike(el)) inputs.push(el);\n\t\t\t\t}\n\n\t\t\t\tfor (const input of inputs) {\n\t\t\t\t\tconst desc = attr(input, ARIA_DESC)?.replace(validId || \"#\", \"\");\n\n\t\t\t\t\tattr(input, ARIA_DESC, `${validId || \"\"} ${desc || \"\"}`.trim());\n\t\t\t\t\tattr(input, ARIA_INVALID, `${!valid}`);\n\t\t\t\t}\n\t\t\t}\n\t});\n}\n\nonLoaded(() =>\n\tonMutation(document.documentElement, CSS_FIELDSET, handleMutation),\n);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","ARIA_DESC","ARIA_INVALID","handleMutation","fieldsets","fieldset","inputs","validId","valid","el","attr","useId","isInputLike","input","desc","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAC/CE,IAAY,oBACZC,IAAe;AAGrB,SAASC,EAAeC,GAAsC;AAC7D,wBAAsB,MAAM;AAC3B,eAAWC,KAAYD;AACtB,UAAIC,EAAS,aAAa;AACzB,cAAMC,IAA6B,CAAC;AACpC,YAAIC,IAAyB,MACzBC,IAAQ;AAEZ,mBAAWC,KAAMJ,EAAS,qBAAqB,GAAG;AACjD,UAAII,EAAG,UAAU,SAAST,CAAc,KACvCQ,IAAQE,EAAKD,GAAI,YAAY,MAAM,aAAa,CAACA,EAAG,cACpDF,IAAUI,EAAMF,CAAE,KACRG,EAAYH,CAAE,KAAGH,EAAO,KAAKG,CAAE;AAG3C,mBAAWI,KAASP,GAAQ;AACrB,gBAAAQ,IAAOJ,EAAKG,GAAOZ,CAAS,GAAG,QAAQM,KAAW,KAAK,EAAE;AAE1D,UAAAG,EAAAG,GAAOZ,GAAW,GAAGM,KAAW,EAAE,IAAIO,KAAQ,EAAE,GAAG,KAAA,CAAM,GAC9DJ,EAAKG,GAAOX,GAAc,GAAG,CAACM,CAAK,EAAE;AAAA,QAAA;AAAA,MACtC;AAAA,EACD,CACD;AACF;AAEAO;AAAA,EAAS,MACRC,EAAW,SAAS,iBAAiBlB,GAAcK,CAAc;AAClE;"}

package/mtds/illustrations/index.json

@@ -134,6 +134,23 @@
 		"categories": ["Mennesker"],
 		"tags": ["person", "menneske", "bonde", "høygaffel"]
 	},
+	"person-alert.svg": {
+		"categories": ["Mennesker", "Beredskap"],
+		"tags": [
+			"advarsel",
+			"alarm",
+			"beredskap",
+			"beredt",
+			"inspektør",
+			"menneske",
+			"obs",
+			"person",
+			"skilt",
+			"varseltrekant",
+			"varsle",
+			"varsling"
+		]
+	},
 	"inspector.svg": {
 		"categories": ["Mennesker"],
 		"tags": ["person", "menneske", "inspektør", "ipad", "tavle", "plansje"]

package/mtds/illustrations/person-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="621" height="1085" viewBox="0 0 621 1085"><path fill="#1E1A28" d="M103.9 1055.39s-7.1 19.02-7.92 23.25c-.8 3.65-2.58 4.95 10.48 5.07 0 0 77.53 1.22 82.82 0 3.5-.81 7.85-5.65 5.5-27.22l-90.89-1.1h.01ZM260.4 1056.6s-1.26 18.29 1.44 22.28c2.7 3.98 4.32 6.55 28.13 5.24 0 0 67.14 1.21 69.27-.51 2.13-1.73-10.1-28.28-10.1-28.28l-88.75 1.27Z"/><path fill="#0C4FA1" d="M96.3 476.1c-.54 35.96-5.3 223.46-5.83 243.7-.81 20.27-1.35 192.63-1.35 211.75 0 19.12-.54 124.12 1.87 127.54 2.42 3.42 102.57 5.99 107.67 2.28 5.1-3.7 0-173.2.8-193.47.54-20.27 3.76-120.42.54-202.04-3.23-81.62 2.63-96.72 4.52-96.72 1.9 0 3.53-4.01 11.05 73.04 7.52 77.05 22.82 217.17 26.04 251.12 3.22 34.25 12.08 166.95 15.58 168.37 3.5 1.43 98.28-.28 101.5-1.42 3.22-1.14-5.11-111.88-6.17-124.15-1.07-12.28-22.56-284.51-23.63-299.07-1.07-14.54-10.74-166.65-10.74-166.65s-113.31.27-122.97 1.14c-9.94.56-98.89 4.56-98.89 4.56h.02l-.02.02Z"/><path fill="#054449" d="M317.27 429.16c.13 28.25 2.25 55.5 2.8 67.47 0 0-114.56 11.43-161.64 5.76 0 0-60.22-2.7-63.35-2.7 0 0 .75-49.6.7-77.8a4049.9 4049.9 0 0 1 2.41-110.43c1.14-30.82-2.78-90.85 36.97-111.4 24.89-12.85 32.06-12.03 66.66-13.74 28.3-1.14 68.45 3.18 84.75 18.3 20.87 19.1 23.35 60.27 26.25 99.76 1.91 44.53 3.34 87.7 4.46 124.78Z"/><path fill="#C58F79" d="m508.92 374.22 7.42 37.86s-2.58 1.8 13.85 4.74c16.44 2.95 35.8-3.98 51.52-13.56 15.7-9.57 14.09-15.85 9.37-18.21-7.58-3.8-17.49-5.63-26.5-5.75-20.6-.25-6.4-7.4-1.56-9.98 4.63-2.48 10.07-7.64-3.32-10.74-13.4-3.1-40.68 9.96-50.77 15.65l-.01-.01Z"/><path fill="#054449" d="M239.07 255.03c3.34 7.87 9.98 17.92 36.86 45.68 20.94 21.63 20.73 31.86 57.09 65.77 19.92 18.58 31.98 31.11 58.84 39.23 22.16 6.7 72.12 17.49 127.14 19.12-.9-9.67-6.31-59.7-6.31-59.7-41.72-3.15-95.14-18.02-107.2-22.31-7.01-2.5-21.38-14.95-27.9-21.83-25.52-31.03-26.9-36.71-45.55-64.04-11.67-17.08-24.17-37.32-38.05-47.32-9.94-7.51-14.38-10.27-21.17-13.09-6.8-2.81-24.36-5-35.69 14.64-9.87 17.1-1.42 35.92 1.94 43.84Z"/><path fill="#C58F79" d="M268.92 118.43c-.35-1.93-2.06-2.97-4.05-3.82.82-15.59-2.43-25.49-9.36-35.5-5.82-8.38-13.95-16.75-25.34-20.82-10.1-3.61-34.84-2.66-44.78 1.35-23.78 9.04-33.14 31.13-34.36 55.53-2.03.52-3.83 1.28-4.42 3.11-1.3 3.11-1.97 6.07-1.12 9.5.8 2.78 2.57 4.52 6.1 6.88.97 11.36 4.55 22.22 10.43 31.23l1.22 1.85c9.23 14.16 21.59 22.4 36.37 22.4h11.65c14.7 0 28.64-8.15 37.87-22.22l3.68-5.6c5.52-8.38 9.06-18.43 10.31-29.07 3.02-1.52 4.7-2.91 5.7-5.23 1.28-3.26 1-6.3.1-9.59Z"/><path fill="#1E1A28" d="M264.5 102.53c-2.34-20.64-13.66-38.17-35.92-45.4-11.35-3.68-25.26-5.46-37.23-2.5-1.23.3-2.1.18-4.35.66-20.43 4.36-42 31.75-37.34 56.67.24 1.2.51 2.38.81 3.53 2.2-.02 4.7.55 6.65-.63 10.07-6.08 23.84-20.3 29.83-36.13 7.33 27.49 52.9 39.36 73.72 37.46 1.75-.17 3.3-.97 4.94-1.55-.04-3.68-.68-8.36-1.1-12.1Z"/><path fill="#F9CC76" d="M115.02 578.58c-.91-.7-3.73-4.94-4.08-6.12-5.36-17.9 15.86-68.85 23.2-87.54 35.11-89.18 83.56-177.16 126.35-263.08 14.96-30.06 35.21-85.43 59.33-107.26 9.56-8.66 17.25-.58 24.56 7.27 34.75 37.44 66.92 97.1 96.2 140.61C495.12 343.48 554 421.72 604.63 505.27c4.98 8.25 13.85 15.69 13.81 26.01-.02 8.2-5.51 15.44-13.56 16.94-23.12 4.31-395.15 26.9-449.5 31.46-8.86.75-33.75 4-40.37-1.14v.04Z"/><path fill="#C58F79" d="M112.23 495.54c9.44 3.14 33.52 13 39.52 23.41 6 10.4 6.14 13.54 4.4 33.99-.39 4.61-3.6 10.78-18.74 6.31-15.13-4.46-30.8-12.84-38.7-25.1-7.9-12.28-5.28-11.67-5.28-11.67l18.79-26.94Z"/><path fill="#054449" d="M182.07 221.56c-2.89-18.82-12.56-31.52-25.96-30.33-35.85 8.62-79.3 39.17-115.2 89.55C27.8 299.17 0 343.82 0 371.28c.94 70.4 80.55 148.85 89.91 160.31l41.24-35.25c-2.62-1.58-22.62-24.52-37.33-43.87-20.5-38.22-33.68-64-33.68-81.18 12.75-48.54 40.25-70.28 91.21-100.62 0 0 17.69-9.78 25.08-21.44 6.84-10.76 7.1-18.17 5.63-27.67h.01ZM329.04 422.52c-9.12-93.5-8.92-95.45-14.36-189.09.2-2.12 2.58-4.06 4.55-4.54 8.72-1.4 31.9-4.65 36.76 2.51 1.19 1.76 2.3 9.12 2.64 11.74 7.54 56.36 9.68 142.98 8.85 171.67-.19 6.38-1.1 15.04-8.1 17.54-5.05 1.8-28.05 1.58-30.34-9.81v-.02Zm34.35 38.63c-6.28-5.85-17.93-4.12-24.87-.26-12.9 7.19-16.72 31.06-3.6 39.63 17.06 11.15 46.86-1.36 40.69-23.42-1.74-6.24-9.7-13.61-12.22-15.97v.02Z"/></svg>