@digdir/designsystemet-web 1.20.0 → 1.21.0

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.d.ts

@@ -156,93 +156,81 @@ declare class DSTabElement extends UTabs.UHTMLTabElement {}
 declare class DSTabPanelElement extends UTabs.UHTMLTabPanelElement {}
 //#endregion
 export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, initTooltips, pagination, setTooltipElement };
-import type * as PreactTypes from 'preact'
-import type * as ReactTypes from 'react'
-import type * as SvelteTypes from 'svelte/elements'
-import type * as VueJSX from '@vue/runtime-dom'
-import type { JSX as QwikJSX } from '@builder.io/qwik/jsx-runtime'
-import type { JSX as SolidJSX } from 'solid-js'
 
 
-export type PreactDsbreadcrumbs = PreactTypes.JSX.HTMLAttributes<DSBreadcrumbsElement> & {  }
-export type ReactDsbreadcrumbs = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSBreadcrumbsElement>, DSBreadcrumbsElement> & { class?: string }
-export type QwikDsbreadcrumbs = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDsbreadcrumbs = VueJSX.HTMLAttributes
-export type SvelteDsbreadcrumbs = SvelteTypes.HTMLAttributes<DSBreadcrumbsElement> & {  }
-export type SolidDsbreadcrumbs = SolidJSX.HTMLAttributes<DSBreadcrumbsElement>
+export type PreactDstabs = PreactTypes.JSX.HTMLAttributes<DSTabsElement> & {  }
+export type ReactDstabs = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabsElement>, DSTabsElement> & { class?: string }
+export type QwikDstabs = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDstabs = VueJSX.HTMLAttributes
+export type SvelteDstabs = SvelteTypes.HTMLAttributes<DSTabsElement> & {  }
+export type SolidDstabs = SolidJSX.HTMLAttributes<DSTabsElement>
 
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-breadcrumbs': ReactDsbreadcrumbs } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-breadcrumbs': PreactDsbreadcrumbs } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-breadcrumbs': QwikDsbreadcrumbs } } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tabs': ReactDstabs } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tabs': PreactDstabs } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tabs': QwikDstabs } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-breadcrumbs': VueDsbreadcrumbs } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-breadcrumbs': SvelteDsbreadcrumbs } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tabs': VueDstabs } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tabs': SvelteDstabs } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-breadcrumbs': SolidDsbreadcrumbs }
+    interface IntrinsicElements { 'ds-tabs': SolidDstabs }
     interface CustomEvents {  }
   }
 }
+export type PreactDstablist = PreactTypes.JSX.HTMLAttributes<DSTabListElement> & {  }
+export type ReactDstablist = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabListElement>, DSTabListElement> & { class?: string }
+export type QwikDstablist = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDstablist = VueJSX.HTMLAttributes
+export type SvelteDstablist = SvelteTypes.HTMLAttributes<DSTabListElement> & {  }
+export type SolidDstablist = SolidJSX.HTMLAttributes<DSTabListElement>
 
-
-export type PreactDserrorsummary = PreactTypes.JSX.HTMLAttributes<DSErrorSummaryElement> & {  }
-export type ReactDserrorsummary = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSErrorSummaryElement>, DSErrorSummaryElement> & { class?: string }
-export type QwikDserrorsummary = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDserrorsummary = VueJSX.HTMLAttributes
-export type SvelteDserrorsummary = SvelteTypes.HTMLAttributes<DSErrorSummaryElement> & {  }
-export type SolidDserrorsummary = SolidJSX.HTMLAttributes<DSErrorSummaryElement>
-
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-error-summary': ReactDserrorsummary } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-error-summary': PreactDserrorsummary } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-error-summary': QwikDserrorsummary } } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tablist': ReactDstablist } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tablist': PreactDstablist } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tablist': QwikDstablist } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-error-summary': VueDserrorsummary } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-error-summary': SvelteDserrorsummary } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tablist': VueDstablist } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tablist': SvelteDstablist } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-error-summary': SolidDserrorsummary }
+    interface IntrinsicElements { 'ds-tablist': SolidDstablist }
     interface CustomEvents {  }
   }
 }
+export type PreactDstab = PreactTypes.JSX.HTMLAttributes<DSTabElement> & {  }
+export type ReactDstab = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabElement>, DSTabElement> & { class?: string }
+export type QwikDstab = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDstab = VueJSX.HTMLAttributes
+export type SvelteDstab = SvelteTypes.HTMLAttributes<DSTabElement> & {  }
+export type SolidDstab = SolidJSX.HTMLAttributes<DSTabElement>
 
-
-export type PreactDsfield = PreactTypes.JSX.HTMLAttributes<DSFieldElement> & {  }
-export type ReactDsfield = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSFieldElement>, DSFieldElement> & { class?: string }
-export type QwikDsfield = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDsfield = VueJSX.HTMLAttributes
-export type SvelteDsfield = SvelteTypes.HTMLAttributes<DSFieldElement> & {  }
-export type SolidDsfield = SolidJSX.HTMLAttributes<DSFieldElement>
-
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-field': ReactDsfield } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-field': PreactDsfield } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-field': QwikDsfield } } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tab': ReactDstab } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tab': PreactDstab } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tab': QwikDstab } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-field': VueDsfield } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-field': SvelteDsfield } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tab': VueDstab } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tab': SvelteDstab } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-field': SolidDsfield }
+    interface IntrinsicElements { 'ds-tab': SolidDstab }
     interface CustomEvents {  }
   }
 }
+export type PreactDstabpanel = PreactTypes.JSX.HTMLAttributes<DSTabPanelElement> & {  }
+export type ReactDstabpanel = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabPanelElement>, DSTabPanelElement> & { class?: string }
+export type QwikDstabpanel = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDstabpanel = VueJSX.HTMLAttributes
+export type SvelteDstabpanel = SvelteTypes.HTMLAttributes<DSTabPanelElement> & {  }
+export type SolidDstabpanel = SolidJSX.HTMLAttributes<DSTabPanelElement>
 
-
-export type PreactDspagination = PreactTypes.JSX.HTMLAttributes<DSPaginationElement> & {  }
-export type ReactDspagination = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSPaginationElement>, DSPaginationElement> & { class?: string }
-export type QwikDspagination = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDspagination = VueJSX.HTMLAttributes
-export type SvelteDspagination = SvelteTypes.HTMLAttributes<DSPaginationElement> & {  }
-export type SolidDspagination = SolidJSX.HTMLAttributes<DSPaginationElement>
-
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-pagination': ReactDspagination } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-pagination': PreactDspagination } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-pagination': QwikDspagination } } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tabpanel': ReactDstabpanel } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tabpanel': PreactDstabpanel } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tabpanel': QwikDstabpanel } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-pagination': VueDspagination } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-pagination': SvelteDspagination } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tabpanel': VueDstabpanel } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tabpanel': SvelteDstabpanel } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-pagination': SolidDspagination }
+    interface IntrinsicElements { 'ds-tabpanel': SolidDstabpanel }
     interface CustomEvents {  }
   }
 }
@@ -269,79 +257,85 @@ declare module 'solid-js' {
 }
 
 
-export type PreactDstabs = PreactTypes.JSX.HTMLAttributes<DSTabsElement> & {  }
-export type ReactDstabs = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabsElement>, DSTabsElement> & { class?: string }
-export type QwikDstabs = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDstabs = VueJSX.HTMLAttributes
-export type SvelteDstabs = SvelteTypes.HTMLAttributes<DSTabsElement> & {  }
-export type SolidDstabs = SolidJSX.HTMLAttributes<DSTabsElement>
+export type PreactDspagination = PreactTypes.JSX.HTMLAttributes<DSPaginationElement> & {  }
+export type ReactDspagination = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSPaginationElement>, DSPaginationElement> & { class?: string }
+export type QwikDspagination = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDspagination = VueJSX.HTMLAttributes
+export type SvelteDspagination = SvelteTypes.HTMLAttributes<DSPaginationElement> & {  }
+export type SolidDspagination = SolidJSX.HTMLAttributes<DSPaginationElement>
 
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tabs': ReactDstabs } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tabs': PreactDstabs } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tabs': QwikDstabs } } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-pagination': ReactDspagination } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-pagination': PreactDspagination } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-pagination': QwikDspagination } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tabs': VueDstabs } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tabs': SvelteDstabs } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-pagination': VueDspagination } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-pagination': SvelteDspagination } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-tabs': SolidDstabs }
+    interface IntrinsicElements { 'ds-pagination': SolidDspagination }
     interface CustomEvents {  }
   }
 }
-export type PreactDstablist = PreactTypes.JSX.HTMLAttributes<DSTabListElement> & {  }
-export type ReactDstablist = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabListElement>, DSTabListElement> & { class?: string }
-export type QwikDstablist = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDstablist = VueJSX.HTMLAttributes
-export type SvelteDstablist = SvelteTypes.HTMLAttributes<DSTabListElement> & {  }
-export type SolidDstablist = SolidJSX.HTMLAttributes<DSTabListElement>
 
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tablist': ReactDstablist } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tablist': PreactDstablist } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tablist': QwikDstablist } } }
+
+export type PreactDsfield = PreactTypes.JSX.HTMLAttributes<DSFieldElement> & {  }
+export type ReactDsfield = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSFieldElement>, DSFieldElement> & { class?: string }
+export type QwikDsfield = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDsfield = VueJSX.HTMLAttributes
+export type SvelteDsfield = SvelteTypes.HTMLAttributes<DSFieldElement> & {  }
+export type SolidDsfield = SolidJSX.HTMLAttributes<DSFieldElement>
+
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-field': ReactDsfield } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-field': PreactDsfield } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-field': QwikDsfield } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tablist': VueDstablist } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tablist': SvelteDstablist } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-field': VueDsfield } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-field': SvelteDsfield } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-tablist': SolidDstablist }
+    interface IntrinsicElements { 'ds-field': SolidDsfield }
     interface CustomEvents {  }
   }
 }
-export type PreactDstab = PreactTypes.JSX.HTMLAttributes<DSTabElement> & {  }
-export type ReactDstab = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabElement>, DSTabElement> & { class?: string }
-export type QwikDstab = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDstab = VueJSX.HTMLAttributes
-export type SvelteDstab = SvelteTypes.HTMLAttributes<DSTabElement> & {  }
-export type SolidDstab = SolidJSX.HTMLAttributes<DSTabElement>
 
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tab': ReactDstab } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tab': PreactDstab } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tab': QwikDstab } } }
+
+export type PreactDserrorsummary = PreactTypes.JSX.HTMLAttributes<DSErrorSummaryElement> & {  }
+export type ReactDserrorsummary = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSErrorSummaryElement>, DSErrorSummaryElement> & { class?: string }
+export type QwikDserrorsummary = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDserrorsummary = VueJSX.HTMLAttributes
+export type SvelteDserrorsummary = SvelteTypes.HTMLAttributes<DSErrorSummaryElement> & {  }
+export type SolidDserrorsummary = SolidJSX.HTMLAttributes<DSErrorSummaryElement>
+
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-error-summary': ReactDserrorsummary } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-error-summary': PreactDserrorsummary } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-error-summary': QwikDserrorsummary } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tab': VueDstab } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tab': SvelteDstab } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-error-summary': VueDserrorsummary } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-error-summary': SvelteDserrorsummary } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-tab': SolidDstab }
+    interface IntrinsicElements { 'ds-error-summary': SolidDserrorsummary }
     interface CustomEvents {  }
   }
 }
-export type PreactDstabpanel = PreactTypes.JSX.HTMLAttributes<DSTabPanelElement> & {  }
-export type ReactDstabpanel = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSTabPanelElement>, DSTabPanelElement> & { class?: string }
-export type QwikDstabpanel = QwikJSX.IntrinsicElements['div'] & { class?: string }
-export type VueDstabpanel = VueJSX.HTMLAttributes
-export type SvelteDstabpanel = SvelteTypes.HTMLAttributes<DSTabPanelElement> & {  }
-export type SolidDstabpanel = SolidJSX.HTMLAttributes<DSTabPanelElement>
 
-declare global { namespace React.JSX { interface IntrinsicElements { 'ds-tabpanel': ReactDstabpanel } } }
-declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-tabpanel': PreactDstabpanel } } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-tabpanel': QwikDstabpanel } } }
+
+export type PreactDsbreadcrumbs = PreactTypes.JSX.HTMLAttributes<DSBreadcrumbsElement> & {  }
+export type ReactDsbreadcrumbs = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSBreadcrumbsElement>, DSBreadcrumbsElement> & { class?: string }
+export type QwikDsbreadcrumbs = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDsbreadcrumbs = VueJSX.HTMLAttributes
+export type SvelteDsbreadcrumbs = SvelteTypes.HTMLAttributes<DSBreadcrumbsElement> & {  }
+export type SolidDsbreadcrumbs = SolidJSX.HTMLAttributes<DSBreadcrumbsElement>
+
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-breadcrumbs': ReactDsbreadcrumbs } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-breadcrumbs': PreactDsbreadcrumbs } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-breadcrumbs': QwikDsbreadcrumbs } } }
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-tabpanel': VueDstabpanel } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tabpanel': SvelteDstabpanel } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-breadcrumbs': VueDsbreadcrumbs } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-breadcrumbs': SvelteDsbreadcrumbs } }
 declare module 'solid-js' {
   namespace JSX {
-    interface IntrinsicElements { 'ds-tabpanel': SolidDstabpanel }
+    interface IntrinsicElements { 'ds-breadcrumbs': SolidDsbreadcrumbs }
     interface CustomEvents {  }
   }
 }

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.20.0";
+var version = "1.21.0";
 //#endregion
 //#region src/utils/utils.ts
 const ARIA_DESC = "aria-description";
@@ -477,17 +477,11 @@ if (!IS_SUPPORTED) onHotReload(ATTR_GROUP, () => [
 	}
 ]);
 //#endregion
-//#region ../../node_modules/.pnpm/invokers-polyfill@1.0.3/node_modules/invokers-polyfill/invoker.js
+//#region ../../node_modules/.pnpm/invokers-polyfill@1.0.4/node_modules/invokers-polyfill/invoker.js
 function isSupported$1() {
 	return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
 }
 function apply$1() {
-	document.addEventListener("invoke", (e) => {
-		if (e.type == "invoke" && e.isTrusted) {
-			e.stopImmediatePropagation();
-			e.preventDefault();
-		}
-	}, true);
 	document.addEventListener("command", (e) => {
 		if (e.type == "command" && e.isTrusted) {
 			e.stopImmediatePropagation();
@@ -658,7 +652,7 @@ function apply$1() {
 		if (invokee.popover) {
 			const canShow = !invokee.matches(":popover-open");
 			const shouldShow = canShow && (command === "toggle-popover" || command === "show-popover");
-			const shouldHide = !canShow && command === "hide-popover";
+			const shouldHide = !canShow && (command === "toggle-popover" || command === "hide-popover");
 			if (shouldShow) invokee.showPopover({ source });
 			else if (shouldHide) invokee.hidePopover();
 		} else if (invokee.localName === "dialog") {
@@ -1786,7 +1780,7 @@ const TEXTS = {
 	under: "%d tegn igjen"
 };
 const debouncedCounterLiveRegion = debounce((input, text) => {
-	if (document?.activeElement === input) announce(text);
+	if (isBrowser() && document.activeElement === input) announce(text);
 }, COUNTER_DEBOUNCE);
 const isInvalidColor = (el) => {
 	const color = el.getAttribute("data-color");