@digdir/designsystemet-web 1.19.1 → 1.20.0

package/dist/esm/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-import{ARIA_DESC as e,ARIA_LABEL as t,QUICK_EVENT as n,announce as r,attr as i,attrOrCSS as a,getComposedTarget as o,getRoot as s,isBrowser as c,on as l,onHotReload as u,onMutation as d,tag as f,warn as p}from"../utils/utils.js";import"../popover/popover.js";let m,h,g,_,v=0;const y=`data-color`,b=`data-color-scheme`,x=`data-size`,S=`data-tooltip`,C=c()&&/iPad|iPhone|iPod/.test(navigator.userAgent),w=`[${y}]`,T=`[${b}]`,E=`[${x}]`,D=`[${S}]`,O=e=>{e&&!(e instanceof HTMLElement)&&p(`setTooltipElement expects an HTMLElement, got: `,e),P(),v=0,m=e||void 0},k=(e=document)=>{for(let t of e?.querySelectorAll(D)||[])j(t)},A=(e,t)=>{if(!t)return k();for(let e of t)if(e.target!==m)if(e.attributeName===S)j(e.target);else for(let t of e.addedNodes)t.nodeType===1&&(t.hasAttribute(S)?j(t):k(t))},j=(n,o=!0)=>{let c=a(n,S)||``;if(c[0]===`#`&&(c=s(n).getElementById(c.slice(1))?.textContent?.trim()||``),c!==(n.getAttribute(`aria-label`)||n.getAttribute(`aria-description`))){let r=i(n,`role`)!==`img`&&n.textContent?.trim();i(n,S,c),i(n,t,r?null:c),i(n,e,r?c:null),n.tabIndex===-1&&p(`Missing tabindex="0" attribute on: `,n)}n===_&&m?.textContent!==c&&(m&&(m.textContent=c),c&&o&&document.activeElement===n&&r(c))},M=e=>{let t=o(e);if(!t||g===t||m?.contains(t))return;g=t;let n=g?.closest?.(D)||void 0;if(_!==n&&(_&&P(),_=n,n)){if(e.type===`focus`||C||300>Date.now()-v)return N();e.type===`mousemove`&&(h=setTimeout(N,300))}},N=()=>{if(!_)return P();m||=f(`div`,{class:`ds-tooltip`}),m.isConnected||document.body.appendChild(m);let e=_.closest(w),t=_.closest(T),n=_.closest(E),r=e!==t&&e?.contains(t);i(m,`popover`,`manual`),i(m,b,t?.getAttribute(b)||null),i(m,y,r&&e?.getAttribute(y)||null),i(m,x,n?.getAttribute(x)||null),j(_,!1),m.showPopover(),m.dispatchEvent(new CustomEvent(`ds-toggle-source`,{bubbles:!0,composed:!0,detail:_}))},P=e=>{(e?.type!==`keydown`||e?.key===`Escape`)&&(_&&m?.isConnected&&m.popover&&m.hidePopover(),e||(v=Date.now()),clearTimeout(h),_=void 0)};u(`tooltip`,()=>[l(document,`focus mousemove`,M,n),l(document,`keydown`,P,n),d(document,A,{attributeFilter:[S],attributes:!0,childList:!0,subtree:!0})]);export{k as initTooltips,O as setTooltipElement};
+import{ARIA_DESC as e,ARIA_LABEL as t,QUICK_EVENT as n,announce as r,attr as i,attrOrCSS as a,getComposedTarget as o,getRoot as s,isBrowser as c,on as l,onHotReload as u,onMutation as d,tag as f,warn as p}from"../utils/utils.js";import"../popover/popover.js";let m,h,g,_,v=0;const y=`data-color`,b=`data-color-scheme`,x=`data-size`,S=`data-tooltip`,C=c()&&/iPad|iPhone|iPod/.test(navigator.userAgent),w=`[${y}]`,T=`[${b}]`,E=`[${x}]`,D=`[${S}]`,O=e=>{e&&!(e instanceof HTMLElement)&&p(`setTooltipElement expects an HTMLElement, got: `,e),P(),v=0,m=e||void 0},k=(e=document)=>{for(let t of e?.querySelectorAll(D)||[])j(t)},A=(e,t)=>{if(!t)return k();for(let e of t)if(e.target!==m){if(e.attributeName===S)j(e.target);else for(let t of e.addedNodes)t.nodeType===1&&(t.hasAttribute(S)?j(t):k(t))}},j=(n,o=!0)=>{let c=a(n,S)||``;if(c[0]===`#`&&(c=s(n).getElementById(c.slice(1))?.textContent?.trim()||``),c!==(n.getAttribute(`aria-label`)||n.getAttribute(`aria-description`))){let r=i(n,`role`)!==`img`&&n.textContent?.trim();i(n,S,c),i(n,t,r?null:c),i(n,e,r?c:null),n.tabIndex===-1&&p(`Missing tabindex="0" attribute on: `,n)}n===_&&m?.textContent!==c&&(m&&(m.textContent=c),c&&o&&document.activeElement===n&&r(c))},M=e=>{let t=o(e);if(!t||g===t||m?.contains(t))return;g=t;let n=g?.closest?.(D)||void 0;if(_!==n&&(_&&P(),_=n,n)){if(e.type===`focus`||C||300>Date.now()-v)return N();e.type===`mousemove`&&(h=setTimeout(N,300))}},N=()=>{if(!_)return P();m||=f(`div`,{class:`ds-tooltip`}),m.isConnected||document.body.appendChild(m);let e=_.closest(w),t=_.closest(T),n=_.closest(E),r=e!==t&&e?.contains(t);i(m,`popover`,`manual`),i(m,b,t?.getAttribute(b)||null),i(m,y,r&&e?.getAttribute(y)||null),i(m,x,n?.getAttribute(x)||null),j(_,!1),m.showPopover(),m.dispatchEvent(new CustomEvent(`ds-toggle-source`,{bubbles:!0,composed:!0,detail:_}))},P=e=>{(e?.type!==`keydown`||e?.key===`Escape`)&&(_&&m?.isConnected&&m.popover&&m.hidePopover(),e||(v=Date.now()),clearTimeout(h),_=void 0)};u(`tooltip`,()=>[l(document,`focus mousemove`,M,n),l(document,`keydown`,P,n),d(document,A,{attributeFilter:[S],attributes:!0,childList:!0,subtree:!0})]);export{k as initTooltips,O as setTooltipElement};
 //# sourceMappingURL=tooltip.js.map

package/dist/esm/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/tooltip/tooltip.ts"],"sourcesContent":["import '../popover/popover'; // Ensure popover is imported when using individual imports, since tooltip relies on it\nimport {\n  ARIA_DESC,\n  ARIA_LABEL,\n  announce,\n  attr,\n  attrOrCSS,\n  getComposedTarget,\n  getRoot,\n  isBrowser,\n  on,\n  onHotReload,\n  onMutation,\n  QUICK_EVENT,\n  tag,\n  warn,\n} from '../utils/utils';\n\nlet TIP: HTMLElement | undefined;\nlet TIMER: ReturnType<typeof setTimeout> | undefined;\nlet TARGET: Element | undefined; // Used to speed up mousemove handling\nlet OPEN: Element | undefined;\nlet LAST_HIDE = 0;\nconst ATTR_COLOR = 'data-color';\nconst ATTR_SCHEME = 'data-color-scheme';\nconst ATTR_SIZE = 'data-size';\nconst ATTR_TOOLTIP = 'data-tooltip';\nconst DELAY_HOVER = 300;\nconst DELAY_SKIP = 300;\nconst IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent); // Needed to omit DELAY_HOVER since iOS triggers mousemove before click\nconst SELECTOR_COLOR = `[${ATTR_COLOR}]`;\nconst SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;\nconst SELECTOR_SIZE = `[${ATTR_SIZE}]`;\nconst SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;\n\n/**\n * setTooltipElement\n * @description Allows setting a custom tooltip element. It does not need to, and should not, be injected to document.body, as we inject on hover to ensure React hydration works as expected.\n * @param el The HTMLElement to use as tooltip\n */\nexport const setTooltipElement = (el?: HTMLElement | null) => {\n  if (el && !(el instanceof HTMLElement))\n    warn('setTooltipElement expects an HTMLElement, got: ', el);\n  hide(); // Reset when changing source\n  LAST_HIDE = 0; // Reset last hide time to re-enable delay\n  TIP = el || undefined;\n};\n\nexport const initTooltips = (\n  scope: Element | ShadowRoot | Document | null = document,\n) => {\n  for (const el of scope?.querySelectorAll(SELECTOR_TOOLTIP) || [])\n    setupText(el);\n};\n\n// Initial run has no MutationRecords, so we set records to [null] to ensure we run the querySelectorAll for any existing elements with data-tooltip\nconst handleMutations = (_: Document, records?: MutationRecord[]) => {\n  if (!records) return initTooltips();\n  for (const r of records) {\n    if (r.target === TIP) continue; // Ignore mutations on tooltip itself\n    if (r.attributeName === ATTR_TOOLTIP) setupText(r.target as Element);\n    else\n      for (const el of r.addedNodes as NodeListOf<Element>) {\n        if (el.nodeType !== 1) continue;\n        if (el.hasAttribute(ATTR_TOOLTIP)) setupText(el);\n        else initTooltips(el); // Check for any child elements with data-tooltip\n      }\n  }\n};\n\nconst setupText = (el: Element, canAnnounce = true) => {\n  let text = attrOrCSS(el, ATTR_TOOLTIP) || '';\n\n  // Allow using another element as source.\n  // Note: Only checks on initial mutation, as we do not want to keep checking if the source element is removed or changed,\n  // since this would be a performance issue. If the source element is removed, the tooltip will be empty and not shown.\n  if (text[0] === '#')\n    text = getRoot(el).getElementById(text.slice(1))?.textContent?.trim() || '';\n\n  if (text !== (el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC))) {\n    const hasText = attr(el, 'role') !== 'img' && el.textContent?.trim(); // If role=\"img\", ignore text\n    attr(el, ATTR_TOOLTIP, text); // Set data-tooltip attribute to speed up future mutations\n    attr(el, ARIA_LABEL, hasText ? null : text); // Set aria-label if element does not have text\n    attr(el, ARIA_DESC, hasText ? text : null); // Set aria-description if element has text\n    if ((el as HTMLElement).tabIndex === -1)\n      warn('Missing tabindex=\"0\" attribute on: ', el);\n  }\n  if (el === OPEN && TIP?.textContent !== text) {\n    if (TIP) TIP.textContent = text; // Update tooltip text if it is already open\n    if (text && canAnnounce && document.activeElement === el) announce(text); // Only announce if focus is on the source\n  }\n};\n\nconst handleInterest = (e: Event) => {\n  const target = getComposedTarget(e);\n  if (!target || TARGET === target || TIP?.contains(target as Node)) return; // Same target, or allow tooltip to be hovered (following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus)\n  TARGET = target;\n\n  const source = TARGET?.closest?.(SELECTOR_TOOLTIP) || undefined;\n  if (OPEN === source) return; // Same source, no need to update\n  if (OPEN) hide(); // Reset previous tooltip, since we are moving to a new source\n  OPEN = source;\n\n  if (!source) return; // No source, no need to show tooltip\n  if (e.type === 'focus' || IS_IOS || DELAY_SKIP > Date.now() - LAST_HIDE)\n    return show(); // Instantly show if focus or if we just closed a tooltip\n  if (e.type === 'mousemove') TIMER = setTimeout(show, DELAY_HOVER); // Delay mouse showing tooltip if not already shown\n};\n\nconst show = () => {\n  if (!OPEN) return hide(); // If no new anchor, cleanup previous autoUpdate\n  if (!TIP) TIP = tag('div', { class: 'ds-tooltip' });\n  if (!TIP.isConnected) document.body.appendChild(TIP);\n\n  const color = OPEN.closest(SELECTOR_COLOR); // Match source color of source element\n  const scheme = OPEN.closest(SELECTOR_SCHEME); // Match source color-scheme of source element\n  const size = OPEN.closest(SELECTOR_SIZE); // Match source size of source element\n  const isReset = color !== scheme && color?.contains(scheme as Node); // If data-scheme is closer to target, it will reset data-color\n\n  attr(TIP, 'popover', 'manual'); // Ensure popover behavior\n  attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null); // Fallback to null to reset if not scheme found\n  attr(TIP, ATTR_COLOR, (isReset && color?.getAttribute(ATTR_COLOR)) || null); // Fallback to null to reset if not scheme found\n  attr(TIP, ATTR_SIZE, size?.getAttribute(ATTR_SIZE) || null); // Fallback to null to reset if not size found\n  setupText(OPEN, false); // If mutation observer is not triggered, ensure tooltip text is updated\n  TIP.showPopover();\n  TIP.dispatchEvent(\n    new CustomEvent('ds-toggle-source', {\n      bubbles: true,\n      composed: true, // Enable bubbling out of shadow DOM boundaries\n      detail: OPEN, // Since showPopover({ source }) is not supported in all browsers yet\n    }),\n  );\n};\n\nconst hide = (event?: Partial<KeyboardEvent>) => {\n  if (event?.type === 'keydown' && event?.key !== 'Escape') return;\n  if (OPEN && TIP?.isConnected && TIP.popover) TIP.hidePopover(); // Only hide if connected and activated\n  if (!event) LAST_HIDE = Date.now(); // If closing with keyboard, do not show next tooltip instantly\n  clearTimeout(TIMER);\n  OPEN = undefined;\n};\n\nonHotReload('tooltip', () => [\n  on(document, 'focus mousemove', handleInterest, QUICK_EVENT),\n  on(document, 'keydown', hide, QUICK_EVENT),\n  onMutation(document, handleMutations, {\n    attributeFilter: [ATTR_TOOLTIP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/tooltip/tooltip.ts"],"sourcesContent":["import '../popover/popover'; // Ensure popover is imported when using individual imports, since tooltip relies on it\nimport {\n  ARIA_DESC,\n  ARIA_LABEL,\n  announce,\n  attr,\n  attrOrCSS,\n  getComposedTarget,\n  getRoot,\n  isBrowser,\n  on,\n  onHotReload,\n  onMutation,\n  QUICK_EVENT,\n  tag,\n  warn,\n} from '../utils/utils';\n\nlet TIP: HTMLElement | undefined;\nlet TIMER: ReturnType<typeof setTimeout> | undefined;\nlet TARGET: Element | undefined; // Used to speed up mousemove handling\nlet OPEN: Element | undefined;\nlet LAST_HIDE = 0;\nconst ATTR_COLOR = 'data-color';\nconst ATTR_SCHEME = 'data-color-scheme';\nconst ATTR_SIZE = 'data-size';\nconst ATTR_TOOLTIP = 'data-tooltip';\nconst DELAY_HOVER = 300;\nconst DELAY_SKIP = 300;\nconst IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent); // Needed to omit DELAY_HOVER since iOS triggers mousemove before click\nconst SELECTOR_COLOR = `[${ATTR_COLOR}]`;\nconst SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;\nconst SELECTOR_SIZE = `[${ATTR_SIZE}]`;\nconst SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;\n\n/**\n * setTooltipElement\n * @description Allows setting a custom tooltip element. It does not need to, and should not, be injected to document.body, as we inject on hover to ensure React hydration works as expected.\n * @param el The HTMLElement to use as tooltip\n */\nexport const setTooltipElement = (el?: HTMLElement | null) => {\n  if (el && !(el instanceof HTMLElement))\n    warn('setTooltipElement expects an HTMLElement, got: ', el);\n  hide(); // Reset when changing source\n  LAST_HIDE = 0; // Reset last hide time to re-enable delay\n  TIP = el || undefined;\n};\n\nexport const initTooltips = (\n  scope: Element | ShadowRoot | Document | null = document,\n) => {\n  for (const el of scope?.querySelectorAll(SELECTOR_TOOLTIP) || [])\n    setupText(el);\n};\n\n// Initial run has no MutationRecords, so we set records to [null] to ensure we run the querySelectorAll for any existing elements with data-tooltip\nconst handleMutations = (_: Document, records?: MutationRecord[]) => {\n  if (!records) return initTooltips();\n  for (const r of records) {\n    if (r.target === TIP) continue; // Ignore mutations on tooltip itself\n    if (r.attributeName === ATTR_TOOLTIP) setupText(r.target as Element);\n    else\n      for (const el of r.addedNodes as NodeListOf<Element>) {\n        if (el.nodeType !== 1) continue;\n        if (el.hasAttribute(ATTR_TOOLTIP)) setupText(el);\n        else initTooltips(el); // Check for any child elements with data-tooltip\n      }\n  }\n};\n\nconst setupText = (el: Element, canAnnounce = true) => {\n  let text = attrOrCSS(el, ATTR_TOOLTIP) || '';\n\n  // Allow using another element as source.\n  // Note: Only checks on initial mutation, as we do not want to keep checking if the source element is removed or changed,\n  // since this would be a performance issue. If the source element is removed, the tooltip will be empty and not shown.\n  if (text[0] === '#')\n    text = getRoot(el).getElementById(text.slice(1))?.textContent?.trim() || '';\n\n  if (text !== (el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC))) {\n    const hasText = attr(el, 'role') !== 'img' && el.textContent?.trim(); // If role=\"img\", ignore text\n    attr(el, ATTR_TOOLTIP, text); // Set data-tooltip attribute to speed up future mutations\n    attr(el, ARIA_LABEL, hasText ? null : text); // Set aria-label if element does not have text\n    attr(el, ARIA_DESC, hasText ? text : null); // Set aria-description if element has text\n    if ((el as HTMLElement).tabIndex === -1)\n      warn('Missing tabindex=\"0\" attribute on: ', el);\n  }\n  if (el === OPEN && TIP?.textContent !== text) {\n    if (TIP) TIP.textContent = text; // Update tooltip text if it is already open\n    if (text && canAnnounce && document.activeElement === el) announce(text); // Only announce if focus is on the source\n  }\n};\n\nconst handleInterest = (e: Event) => {\n  const target = getComposedTarget(e);\n  if (!target || TARGET === target || TIP?.contains(target as Node)) return; // Same target, or allow tooltip to be hovered (following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus)\n  TARGET = target;\n\n  const source = TARGET?.closest?.(SELECTOR_TOOLTIP) || undefined;\n  if (OPEN === source) return; // Same source, no need to update\n  if (OPEN) hide(); // Reset previous tooltip, since we are moving to a new source\n  OPEN = source;\n\n  if (!source) return; // No source, no need to show tooltip\n  if (e.type === 'focus' || IS_IOS || DELAY_SKIP > Date.now() - LAST_HIDE)\n    return show(); // Instantly show if focus or if we just closed a tooltip\n  if (e.type === 'mousemove') TIMER = setTimeout(show, DELAY_HOVER); // Delay mouse showing tooltip if not already shown\n};\n\nconst show = () => {\n  if (!OPEN) return hide(); // If no new anchor, cleanup previous autoUpdate\n  if (!TIP) TIP = tag('div', { class: 'ds-tooltip' });\n  if (!TIP.isConnected) document.body.appendChild(TIP);\n\n  const color = OPEN.closest(SELECTOR_COLOR); // Match source color of source element\n  const scheme = OPEN.closest(SELECTOR_SCHEME); // Match source color-scheme of source element\n  const size = OPEN.closest(SELECTOR_SIZE); // Match source size of source element\n  const isReset = color !== scheme && color?.contains(scheme as Node); // If data-scheme is closer to target, it will reset data-color\n\n  attr(TIP, 'popover', 'manual'); // Ensure popover behavior\n  attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null); // Fallback to null to reset if not scheme found\n  attr(TIP, ATTR_COLOR, (isReset && color?.getAttribute(ATTR_COLOR)) || null); // Fallback to null to reset if not scheme found\n  attr(TIP, ATTR_SIZE, size?.getAttribute(ATTR_SIZE) || null); // Fallback to null to reset if not size found\n  setupText(OPEN, false); // If mutation observer is not triggered, ensure tooltip text is updated\n  TIP.showPopover();\n  TIP.dispatchEvent(\n    new CustomEvent('ds-toggle-source', {\n      bubbles: true,\n      composed: true, // Enable bubbling out of shadow DOM boundaries\n      detail: OPEN, // Since showPopover({ source }) is not supported in all browsers yet\n    }),\n  );\n};\n\nconst hide = (event?: Partial<KeyboardEvent>) => {\n  if (event?.type === 'keydown' && event?.key !== 'Escape') return;\n  if (OPEN && TIP?.isConnected && TIP.popover) TIP.hidePopover(); // Only hide if connected and activated\n  if (!event) LAST_HIDE = Date.now(); // If closing with keyboard, do not show next tooltip instantly\n  clearTimeout(TIMER);\n  OPEN = undefined;\n};\n\nonHotReload('tooltip', () => [\n  on(document, 'focus mousemove', handleInterest, QUICK_EVENT),\n  on(document, 'keydown', hide, QUICK_EVENT),\n  onMutation(document, handleMutations, {\n    attributeFilter: [ATTR_TOOLTIP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"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"}

package/dist/index.js

@@ -4,7 +4,7 @@ import { UHTMLComboboxElement } from "@u-elements/u-combobox";
 import * as UTabs from "@u-elements/u-tabs";
 export * from "@u-elements/u-datalist";
 //#region package.json
-var version = "1.19.1";
+var version = "1.20.0";
 //#endregion
 //#region src/utils/utils.ts
 const ARIA_DESC = "aria-description";
@@ -212,9 +212,10 @@ const handleClickDelegateFor = (event) => {
 	const target = getComposedTarget(event);
 	const delegateTarget = event.button < 2 && getDelegateTarget(event);
 	if (!delegateTarget || delegateTarget.contains(target)) return;
+	for (const el of getComposedPath(target)) if (el.control === delegateTarget) return;
 	if (isNewTab && delegateTarget instanceof HTMLAnchorElement) return window.open(delegateTarget.href, void 0, delegateTarget.rel);
 	event.stopImmediatePropagation();
-	if (delegateTarget.nodeName !== "LABEL") delegateTarget.click();
+	delegateTarget.click();
 };
 let HOVER;
 let TARGET$1;
@@ -280,9 +281,14 @@ onHotReload("dialog", () => [
 //#region src/fieldset/fieldset.ts
 const FIELDSETS = isBrowser() ? document.getElementsByTagName("fieldset") : [];
 const handleFieldsetMutations = () => {
-	for (const el of FIELDSETS) {
-		if (el.hasAttribute("aria-labelledby")) continue;
-		attr(el, ARIA_LABELLEDBY, `${useId(el.querySelector("legend"))} ${useId(el.querySelector(":scope > :is([data-field=\"description\"],legend + p)"))}`.trim() || null);
+	for (const fieldset of FIELDSETS) {
+		if (fieldset.hasAttribute("aria-labelledby")) continue;
+		let labelledby = "";
+		for (const el of fieldset.children) {
+			const name = el.nodeName;
+			if (name === "LEGEND" || el.getAttribute("data-field") === "description" || name === "P" && el.previousElementSibling?.nodeName === "LEGEND") labelledby += `${useId(el)} `;
+		}
+		attr(fieldset, ARIA_LABELLEDBY, labelledby.trim() || null);
 	}
 };
 onHotReload("fieldset", () => [onMutation(document, handleFieldsetMutations, {
@@ -699,7 +705,7 @@ function apply$1() {
 //#region src/invokers/invokers.ts
 if (isBrowser() && !isSupported$1()) apply$1();
 //#endregion
-//#region ../../node_modules/.pnpm/@oddbird+popover-polyfill@0.7.1/node_modules/@oddbird/popover-polyfill/dist/popover-fn.js
+//#region ../../node_modules/.pnpm/@oddbird+popover-polyfill@0.7.1_patch_hash=6227913935a153774e0e2569cb889d63767e7a5d572dbc6beeadfb2e77ed5c11/node_modules/@oddbird/popover-polyfill/dist/popover-fn.js
 var ToggleEvent = class extends Event {
 	oldState;
 	newState;
@@ -1035,7 +1041,7 @@ function setInvokerAriaExpanded(el, force = false) {
 var ShadowRoot2 = globalThis.ShadowRoot || function() {};
 var DEFAULT_LAYER_NAME = "popover-polyfill";
 function isSupported() {
-	return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
+	return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype && "showPopover" in HTMLElement.prototype;
 }
 function isPolyfilled() {
 	var _a;
@@ -1054,7 +1060,7 @@ function hasLayerSupport() {
 function getStyles(layerName) {
 	var _a;
 	const useLayer = hasLayerSupport();
-	const layerNameEscaped = (layerName ?? ((_a = window.POPOVER_POLYFILL_OPTIONS) == null ? void 0 : _a.layerName) ?? DEFAULT_LAYER_NAME).split(".").map(CSS.escape).join(".");
+	const layerNameEscaped = (layerName ?? ((_a = window.POPOVER_POLYFILL_OPTIONS) == null ? void 0 : _a.layerName) ?? DEFAULT_LAYER_NAME).split(".").map((c) => CSS.escape(c)).join(".");
 	return `
 ${useLayer ? `@layer ${layerNameEscaped} {` : ""}
   :where([popover]) {
@@ -1128,7 +1134,7 @@ function injectStyles(root, layerName) {
 	} catch {
 		popoverStyleSheet = false;
 	}
-	if (popoverStyleSheet === false) {
+	if (popoverStyleSheet === false || !root.adoptedStyleSheets) {
 		const sheet = document.createElement("style");
 		sheet.textContent = styles;
 		if (root instanceof Document) root.head.prepend(sheet);
@@ -1169,6 +1175,7 @@ function apply(opts) {
 		showPopover: {
 			enumerable: true,
 			configurable: true,
+			writable: true,
 			value(options = {}) {
 				showPopover(this);
 			}
@@ -1176,6 +1183,7 @@ function apply(opts) {
 		hidePopover: {
 			enumerable: true,
 			configurable: true,
+			writable: true,
 			value() {
 				hidePopover(this, true, true);
 			}
@@ -1183,6 +1191,7 @@ function apply(opts) {
 		togglePopover: {
 			enumerable: true,
 			configurable: true,
+			writable: true,
 			value(options = {}) {
 				if (typeof options === "boolean") options = { force: options };
 				if (visibilityState.get(this) === "showing" && options.force === void 0 || options.force === false) hidePopover(this, true, true);
@@ -1282,7 +1291,7 @@ function apply(opts) {
 	const onKeydown = (event) => {
 		const key = event.key;
 		const target = event.target;
-		if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) hideAllPopoversUntil(target.ownerDocument, true, true);
+		if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) hideAllPopoversUntil(target.ownerDocument || target, true, true);
 	};
 	const addEventListeners = (root) => {
 		root.addEventListener("click", handleInvokerActivation);
@@ -1321,6 +1330,7 @@ function toggle(el, newState, oldState, source) {
 	const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
 	const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
 	if (placement === "none") return;
+	let sized = false;
 	const options = {
 		strategy: "absolute",
 		placement,
@@ -1336,8 +1346,14 @@ function toggle(el, newState, oldState, source) {
 				crossAxis: false
 			})] : [],
 			...overscroll ? [size({ apply({ availableHeight }) {
-				if (overscroll === "fit") el.style.width = `${source.offsetWidth}px`;
-				el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+				if (sized) return;
+				sized = true;
+				const width = `${source.offsetWidth}px`;
+				const maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+				requestAnimationFrame(() => {
+					if (overscroll === "fit" && el.style.width !== width) el.style.width = width;
+					if (el.style.maxHeight !== maxHeight) el.style.maxHeight = maxHeight;
+				});
 			} })] : []
 		]
 	};
@@ -1363,40 +1379,62 @@ const handleClick$1 = (e) => {
 	if (root instanceof ShadowRoot && !ROOTS.has(root)) ROOTS.set(root, on(root, "toggle", handleToggle, QUICK_EVENT));
 };
 onHotReload("popover", () => {
-	const isFunction = (fn) => typeof fn === "function";
+	const descriptors = Object.getOwnPropertyDescriptors(HTMLElement.prototype);
 	const togglePopover = HTMLElement.prototype.togglePopover;
 	const showPopover = HTMLElement.prototype.showPopover;
 	const hidePopover = HTMLElement.prototype.hidePopover;
-	if (isFunction(togglePopover)) HTMLElement.prototype.togglePopover = function(opt) {
-		const isOpen = this.matches(":popover-open");
-		const isBool = typeof opt === "boolean";
-		const prev = isOpen ? "open" : "closed";
-		const next = (isBool ? opt : opt?.force ?? !isOpen) ? "open" : "closed";
-		const source = isBool ? void 0 : opt?.source;
-		const result = togglePopover.call(this, opt);
-		toggle(this, next, prev, source);
-		return result;
-	};
-	if (isFunction(showPopover)) HTMLElement.prototype.showPopover = function(opt) {
-		const prev = this.matches(":popover-open") ? "open" : "closed";
-		const result = showPopover.call(this, opt);
-		toggle(this, "open", prev, opt?.source);
-		return result;
-	};
-	if (isFunction(hidePopover)) HTMLElement.prototype.hidePopover = function() {
-		const prev = this.matches(":popover-open") ? "open" : "closed";
-		const result = hidePopover.call(this);
-		toggle(this, "closed", prev);
-		return result;
-	};
+	Object.defineProperties(HTMLElement.prototype, {
+		togglePopover: {
+			...descriptors.togglePopover,
+			value(opt) {
+				const isOpen = this.matches(":popover-open");
+				const isBool = typeof opt === "boolean";
+				const prev = isOpen ? "open" : "closed";
+				const next = (isBool ? opt : opt?.force ?? !isOpen) ? "open" : "closed";
+				const source = isBool ? void 0 : opt?.source;
+				const result = togglePopover?.call(this, opt);
+				toggle(this, next, prev, source);
+				return result;
+			}
+		},
+		showPopover: {
+			...descriptors.showPopover,
+			value(opt) {
+				const prev = this.matches(":popover-open") ? "open" : "closed";
+				const result = showPopover?.call(this, opt);
+				toggle(this, "open", prev, opt?.source);
+				return result;
+			}
+		},
+		hidePopover: {
+			...descriptors.hidePopover,
+			value() {
+				const prev = this.matches(":popover-open") ? "open" : "closed";
+				const result = hidePopover?.call(this);
+				toggle(this, "closed", prev);
+				return result;
+			}
+		}
+	});
 	return [
 		on(document, "click", handleClick$1, QUICK_EVENT),
 		on(document, "pointerdown pointerup scroll", handleScrollbar, QUICK_EVENT),
 		on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT),
 		() => {
-			HTMLElement.prototype.togglePopover = togglePopover;
-			HTMLElement.prototype.showPopover = showPopover;
-			HTMLElement.prototype.hidePopover = hidePopover;
+			Object.defineProperties(HTMLElement.prototype, {
+				togglePopover: {
+					...descriptors.togglePopover,
+					value: togglePopover
+				},
+				showPopover: {
+					...descriptors.showPopover,
+					value: showPopover
+				},
+				hidePopover: {
+					...descriptors.hidePopover,
+					value: hidePopover
+				}
+			});
 			for (const [, off] of ROOTS) off();
 			ROOTS.clear();
 		}
@@ -1688,9 +1726,12 @@ const render$2 = (self) => {
 customElements.define("ds-error-summary", DSErrorSummaryElement);
 //#endregion
 //#region src/field/field.ts
+const ATTR_FIELD = "data-field";
+const ATTR_LIMIT = "data-limit";
 const ATTR_INVALID = "aria-invalid";
 const ATTR_DESCRIBEDBY = "aria-describedby";
 const ATTR_INDETERMINATE = "data-indeterminate";
+const SELECTOR_VALIDATION = `:scope > [${ATTR_FIELD}="validation"]`;
 const COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
 const WARNING_MULTIPLE_INPUTS = `Fields should only have one input element. Use <fieldset> to group multiple fields:`;
 const handleFieldMutation = (field) => {
@@ -1706,22 +1747,22 @@ const handleFieldMutation = (field) => {
 		if (isInputLike(el)) if (field._input?.isConnected && field._input !== el) warn(WARNING_MULTIPLE_INPUTS, field);
 		else field._input = el;
 		else {
-			const type = el.getAttribute("data-field");
+			const type = el.getAttribute(ATTR_FIELD);
 			if (type === "counter") field._counter = el;
 			if (type === "validation") {
 				nextDescs.unshift(useId(el));
 				hasValidation = true;
-				invalid = invalid || isInvalid(el);
+				invalid = invalid || isInvalidColor(el);
 			} else if (type) nextDescs.push(useId(el));
 		}
 	}
 	if (!field._input?.isConnected) return;
 	const input = field._input;
 	for (const label of labels) attr(label, "for", useId(input) || null);
-	const fieldsetValidation = field.closest("fieldset")?.querySelector(":scope > [data-field=\"validation\"]");
+	const fieldsetValidation = field.closest("fieldset")?.querySelector(SELECTOR_VALIDATION);
 	if (fieldsetValidation && !fieldsetValidation?.hidden) {
 		hasValidation = true;
-		invalid = invalid || isInvalid(fieldsetValidation);
+		invalid = invalid || isInvalidColor(fieldsetValidation);
 		nextDescs.unshift(useId(fieldsetValidation));
 	}
 	const indeterminate = attr(input, ATTR_INDETERMINATE);
@@ -1732,7 +1773,7 @@ const handleFieldMutation = (field) => {
 	field._descs = nextDescs;
 	const hadValidation = field._validation;
 	if (hasValidation && !hadValidation && !input.hasAttribute(ATTR_INVALID)) {
-		attr(input, ATTR_INVALID, "true");
+		attr(input, ATTR_INVALID, invalid ? "true" : null);
 		field._validation = true;
 	} else if (!hasValidation && hadValidation) {
 		attr(input, ATTR_INVALID, null);
@@ -1745,9 +1786,12 @@ const TEXTS = {
 	under: "%d tegn igjen"
 };
 const debouncedCounterLiveRegion = debounce((input, text) => {
-	if (document.activeElement === input) announce(text);
+	if (document?.activeElement === input) announce(text);
 }, COUNTER_DEBOUNCE);
-const isInvalid = (el) => el.getAttribute("data-color") !== "success";
+const isInvalidColor = (el) => {
+	const color = el.getAttribute("data-color");
+	return !color || color === "danger";
+};
 const isInputLike = (el) => el instanceof HTMLElement && "validity" in el && !(el instanceof HTMLButtonElement) && el.type !== "hidden";
 var DSFieldElement = class extends DSElement {
 	_counter;
@@ -1760,8 +1804,8 @@ var DSFieldElement = class extends DSElement {
 		this._unevents = on(this, "input", this, QUICK_EVENT);
 		this._unmutate = onMutation(this, () => handleFieldMutation(this), {
 			attributeFilter: [
-				"data-field",
-				"data-limit",
+				ATTR_FIELD,
+				ATTR_LIMIT,
 				"hidden",
 				"id",
 				"value",
@@ -1775,13 +1819,14 @@ var DSFieldElement = class extends DSElement {
 	handleEvent(event) {
 		const { _counter, _input } = this;
 		if (_counter?.isConnected && _input) {
-			const count = (Number(attr(_counter, "data-limit")) || 0) - _input.value.length;
+			const count = (Number(attr(_counter, ATTR_LIMIT)) || 0) - _input.value.length;
 			const state = count < 0 ? "over" : "under";
 			const label = (attrOrCSS(_counter, `data-${state}`) || TEXTS[state])?.replace("%d", `${Math.abs(count)}`);
 			if (!label) warn(`Missing data-${state} on:`, _counter);
 			attr(_counter, "data-label", label);
 			attr(_counter, "data-state", state);
 			attr(_counter, "data-color", count < 0 ? "danger" : null);
+			attr(_input, "aria-invalid", count < 0 ? "true" : null);
 			if (event?.type === "input" && label) debouncedCounterLiveRegion(_input, label);
 		}
 		if (_input instanceof HTMLTextAreaElement) {
@@ -1902,14 +1947,12 @@ var DSSuggestionElement = class extends UHTMLComboboxElement {
 const render = (self) => {
 	const { control, list } = self;
 	const datalist = list || self.querySelector("u-datalist");
-	if (control) {
-		attr(control, "popovertarget", list ? useId(list) : null);
-		if (!control.placeholder) attr(control, "placeholder", " ");
-	}
+	if (control) attr(control, "popovertarget", list ? useId(list) : null);
 	if (datalist) {
 		attr(datalist, "popover", "manual");
 		attr(datalist, "data-is-floating", "true");
 	}
+	handleEmpty({ currentTarget: self });
 };
 const handleEmpty = ({ currentTarget: self }) => {
 	const { creatable, control, options } = self;