@digdir/designsystemet-web 0.0.1 → 1.12.0

package/dist/esm/index.js

@@ -1,22 +1,2 @@
-import { isBrowser } from "./utils.js";
-import { DSBreadcrumbsElement } from "./breadcrumbs.js";
-import "./clickdelegatefor.js";
-import "./details.js";
-import "./dialog.js";
-import { DSErrorSummaryElement } from "./error-summary.js";
-import { DSFieldElement } from "./field.js";
-import { DSPaginationElement, pagination } from "./pagination.js";
-import { DSSuggestionElement } from "./suggestion.js";
-import { DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement } from "./tabs.js";
-import "./popover.js";
-import "./toggle-group.js";
-import "./tooltip.js";
-
-export * from "@u-elements/u-datalist"
-
-//#region src/index.ts
-if (isBrowser()) import("invokers-polyfill");
-
-//#endregion
-export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, pagination };
+import{isBrowser as e}from"./utils/utils.js";import"./clickdelegatefor/clickdelegatefor.js";import"./dialog/dialog.js";import"./popover/popover.js";import"./readonly/readonly.js";import"./toggle-group/toggle-group.js";import{setTooltipElement as t}from"./tooltip/tooltip.js";import{DSBreadcrumbsElement as n}from"./breadcrumbs/breadcrumbs.js";import{DSErrorSummaryElement as r}from"./error-summary/error-summary.js";import{DSFieldElement as i}from"./field/field.js";import{DSPaginationElement as a,pagination as o}from"./pagination/pagination.js";import{DSSuggestionElement as s}from"./suggestion/suggestion.js";import{DSTabElement as c,DSTabListElement as l,DSTabPanelElement as u,DSTabsElement as d}from"./tabs/tabs.js";import{apply as f,isSupported as p}from"invokers-polyfill/fn";import"@u-elements/u-details/polyfill";export*from"@u-elements/u-datalist";e()&&!p()&&f();export{n as DSBreadcrumbsElement,r as DSErrorSummaryElement,i as DSFieldElement,a as DSPaginationElement,s as DSSuggestionElement,c as DSTabElement,l as DSTabListElement,u as DSTabPanelElement,d as DSTabsElement,o as pagination,t as setTooltipElement};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { isBrowser } from './utils';\r\n\r\n// Ensure polyfill is loaded in browser environment only\r\nif (isBrowser()) import('invokers-polyfill');\r\n\r\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements\r\nexport * from './breadcrumbs';\r\nexport * from './error-summary';\r\nexport * from './field';\r\nexport * from './pagination';\r\nexport * from './suggestion';\r\nexport * from './tabs';\r\nimport './clickdelegatefor';\r\nimport './details';\r\nimport './dialog';\r\nimport './popover';\r\nimport './toggle-group';\r\nimport './tooltip';\r\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA,IAAI,WAAW,CAAE,QAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { isSupported, apply as polyfillInvokers } from 'invokers-polyfill/fn';\nimport { isBrowser } from './utils/utils';\nimport '@u-elements/u-details/polyfill'; // Polyfill for <details> element for Android Firefox + Talkback\nimport './clickdelegatefor/clickdelegatefor';\nimport './dialog/dialog';\nimport './popover/popover';\nimport './readonly/readonly';\nimport './toggle-group/toggle-group';\nimport './tooltip/tooltip';\n\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements\nexport * from './breadcrumbs/breadcrumbs';\nexport * from './error-summary/error-summary';\nexport * from './field/field';\nexport * from './pagination/pagination';\nexport * from './suggestion/suggestion';\nexport * from './tabs/tabs';\nexport * from './tooltip/tooltip';\n\nif (isBrowser() && !isSupported()) polyfillInvokers(); // Ensure invoker commands polyfill is loaded in browser environment only\n"],"mappings":"21BAmBI,GAAW,EAAI,CAAC,GAAa,EAAE,GAAkB"}

package/dist/esm/pagination/pagination.js

@@ -0,0 +1,2 @@
+import{DSElement as e,attr as t,attrOrCSS as n,customElements as r,debounce as i,onMutation as a,warn as o}from"../utils/utils.js";const s=`aria-label`,c=`data-current`,l=`data-total`,u=`data-href`,d=({current:e=1,total:t=10,show:n=7})=>({prev:e>1?e-1:0,next:e<t?e+1:0,pages:m(e,t,n).map((t,n)=>({current:t===e&&`page`,key:`key-${t}-${n}`,page:t}))});var f=class extends e{_unmutate;_render;static get observedAttributes(){return[s,c,l,u]}connectedCallback(){let e=t(this,l),r=t(this,c);r&&!e&&o(`Missing ${l} attribute on:`,this),e&&!r&&o(`Missing ${c} attribute on:`,this),t(this,s,n(this,s)),t(this,`role`,`navigation`),this._render=i(()=>p(this),0),this._unmutate=a(this,this._render,{childList:!0,subtree:!0})}attributeChangedCallback(){this._render?.()}disconnectedCallback(){this._unmutate?.(),this._unmutate=this._render=void 0}};const p=e=>{let n=Number(t(e,c)),r=Number(t(e,l));if(n&&r){let i=e.querySelectorAll(`button,a`),a=i.length-2,o=t(e,u),{next:s,prev:c,pages:l}=d({current:n,total:r,show:a});i.forEach((e,n)=>{let r=n?i[n+1]?l[n-1]?.page:s:c;t(e,`aria-current`,l[n-1]?.current?`true`:null),t(e,`aria-label`,`${r??`hidden`}`),t(e,`role`,r?null:`none`),t(e,`tabindex`,r?null:`-1`),e instanceof HTMLButtonElement&&t(e,`value`,`${r}`),o&&e instanceof HTMLAnchorElement&&t(e,`href`,o.replace(`%d`,`${r}`))})}},m=(e,t,n=1/0)=>{let r=(n-1)/2,i=Math.max(Math.min(e-Math.floor(r),t-n+1),1),a=Math.min(Math.max(e+Math.ceil(r),n),t),o=Array.from({length:a+1-i},(e,t)=>t+i);return n>4&&i>1&&o.splice(0,2,1,0),n>3&&a<t&&o.splice(-2,2,0,t),o};r.define(`ds-pagination`,f);export{f as DSPaginationElement,d as pagination};
+//# sourceMappingURL=pagination.js.map

package/dist/esm/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/pagination/pagination.ts"],"sourcesContent":["import {\n  attr,\n  attrOrCSS,\n  customElements,\n  DSElement,\n  debounce,\n  onMutation,\n  warn,\n} from '../utils/utils';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ds-pagination': DSPaginationElement;\n  }\n}\n\nconst ATTR_LABEL = 'aria-label';\nconst ATTR_CURRENT = 'data-current';\nconst ATTR_TOTAL = 'data-total';\nconst ATTR_HREF = 'data-href';\n\n// Expose pagination logic if wanting to do custom rendering (i.e. in React/Vue/etc)\nexport const pagination = ({ current = 1, total = 10, show = 7 }) => ({\n  prev: current > 1 ? current - 1 : 0,\n  next: current < total ? current + 1 : 0,\n  pages: getSteps(current, total, show).map((page, index) => ({\n    current: page === current && ('page' as const),\n    key: `key-${page}-${index}`,\n    page,\n  })),\n});\n\nexport class DSPaginationElement extends DSElement {\n  _unmutate?: () => void; // Using underscore instead of private fields for backwards compatibility\n  _render?: () => void;\n\n  static get observedAttributes() {\n    return [ATTR_LABEL, ATTR_CURRENT, ATTR_TOTAL, ATTR_HREF]; // Using ES2015 syntax for backwards compatibility\n  }\n  connectedCallback() {\n    // Check for required attributes\n    const total = attr(this, ATTR_TOTAL);\n    const current = attr(this, ATTR_CURRENT);\n    if (current && !total) warn(`Missing ${ATTR_TOTAL} attribute on:`, this);\n    if (total && !current) warn(`Missing ${ATTR_CURRENT} attribute on:`, this);\n\n    attr(this, ATTR_LABEL, attrOrCSS(this, ATTR_LABEL));\n    attr(this, 'role', 'navigation');\n    this._render = debounce(() => render(this), 0); // Debounce groups mutation observer calls and attributeChangedCallback calls\n    this._unmutate = onMutation(this, this._render, {\n      childList: true,\n      subtree: true,\n    });\n  }\n  attributeChangedCallback() {\n    this._render?.();\n  }\n  disconnectedCallback() {\n    this._unmutate?.();\n    this._unmutate = this._render = undefined;\n  }\n}\n\nconst render = (self: DSPaginationElement) => {\n  const current = Number(attr(self, ATTR_CURRENT));\n  const total = Number(attr(self, ATTR_TOTAL));\n\n  // Allowing server side generated pagination, buy only doing client side updates if total/current attributes are provided\n  if (current && total) {\n    const items = self.querySelectorAll('button,a');\n    const show = items.length - 2;\n    const href = attr(self, ATTR_HREF);\n    const { next, prev, pages } = pagination({ current, total, show });\n    items.forEach((item, i) => {\n      const page = i ? (items[i + 1] ? pages[i - 1]?.page : next) : prev; // First is prev, last is next\n      attr(item, 'aria-current', pages[i - 1]?.current ? 'true' : null);\n      attr(item, 'aria-label', `${page ?? 'hidden'}`); // Used for CSS content and to hide if more items than pages, using aria-label to make Axe tests and VoiceOver rotor happy\n      attr(item, 'role', page ? null : 'none'); // Prevent validation errors for aria-hidden buttons\n      attr(item, 'tabindex', page ? null : '-1');\n      if (item instanceof HTMLButtonElement) attr(item, 'value', `${page}`);\n      if (href && item instanceof HTMLAnchorElement)\n        attr(item, 'href', href.replace('%d', `${page}`));\n    });\n  }\n};\n\nconst getSteps = (\n  now: number,\n  max: number,\n  show = Number.POSITIVE_INFINITY,\n) => {\n  const offset = (show - 1) / 2;\n  const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);\n  const end = Math.min(Math.max(now + Math.ceil(offset), show), max);\n  const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);\n\n  if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);\n  if (show > 3 && end < max) pages.splice(-2, 2, 0, max);\n  return pages;\n};\n\ncustomElements.define('ds-pagination', DSPaginationElement);\n"],"mappings":"mIAgBA,MAAM,EAAa,aACb,EAAe,eACf,EAAa,aACb,EAAY,YAGL,GAAc,CAAE,UAAU,EAAG,QAAQ,GAAI,OAAO,MAAS,CACpE,KAAM,EAAU,EAAI,EAAU,EAAI,EAClC,KAAM,EAAU,EAAQ,EAAU,EAAI,EACtC,MAAO,EAAS,EAAS,EAAO,EAAK,CAAC,KAAK,EAAM,KAAW,CAC1D,QAAS,IAAS,GAAY,OAC9B,IAAK,OAAO,EAAK,GAAG,IACpB,OACD,EAAE,CACJ,EAED,IAAa,EAAb,cAAyC,CAAU,CACjD,UACA,QAEA,WAAW,oBAAqB,CAC9B,MAAO,CAAC,EAAY,EAAc,EAAY,EAAU,CAE1D,mBAAoB,CAElB,IAAM,EAAQ,EAAK,KAAM,EAAW,CAC9B,EAAU,EAAK,KAAM,EAAa,CACpC,GAAW,CAAC,GAAO,EAAK,WAAW,EAAW,gBAAiB,KAAK,CACpE,GAAS,CAAC,GAAS,EAAK,WAAW,EAAa,gBAAiB,KAAK,CAE1E,EAAK,KAAM,EAAY,EAAU,KAAM,EAAW,CAAC,CACnD,EAAK,KAAM,OAAQ,aAAa,CAChC,KAAK,QAAU,MAAe,EAAO,KAAK,CAAE,EAAE,CAC9C,KAAK,UAAY,EAAW,KAAM,KAAK,QAAS,CAC9C,UAAW,GACX,QAAS,GACV,CAAC,CAEJ,0BAA2B,CACzB,KAAK,WAAW,CAElB,sBAAuB,CACrB,KAAK,aAAa,CAClB,KAAK,UAAY,KAAK,QAAU,IAAA,KAIpC,MAAM,EAAU,GAA8B,CAC5C,IAAM,EAAU,OAAO,EAAK,EAAM,EAAa,CAAC,CAC1C,EAAQ,OAAO,EAAK,EAAM,EAAW,CAAC,CAG5C,GAAI,GAAW,EAAO,CACpB,IAAM,EAAQ,EAAK,iBAAiB,WAAW,CACzC,EAAO,EAAM,OAAS,EACtB,EAAO,EAAK,EAAM,EAAU,CAC5B,CAAE,OAAM,OAAM,SAAU,EAAW,CAAE,UAAS,QAAO,OAAM,CAAC,CAClE,EAAM,SAAS,EAAM,IAAM,CACzB,IAAM,EAAO,EAAK,EAAM,EAAI,GAAK,EAAM,EAAI,IAAI,KAAO,EAAQ,EAC9D,EAAK,EAAM,eAAgB,EAAM,EAAI,IAAI,QAAU,OAAS,KAAK,CACjE,EAAK,EAAM,aAAc,GAAG,GAAQ,WAAW,CAC/C,EAAK,EAAM,OAAQ,EAAO,KAAO,OAAO,CACxC,EAAK,EAAM,WAAY,EAAO,KAAO,KAAK,CACtC,aAAgB,mBAAmB,EAAK,EAAM,QAAS,GAAG,IAAO,CACjE,GAAQ,aAAgB,mBAC1B,EAAK,EAAM,OAAQ,EAAK,QAAQ,KAAM,GAAG,IAAO,CAAC,EACnD,GAIA,GACJ,EACA,EACA,EAAO,MACJ,CACH,IAAM,GAAU,EAAO,GAAK,EACtB,EAAQ,KAAK,IAAI,KAAK,IAAI,EAAM,KAAK,MAAM,EAAO,CAAE,EAAM,EAAO,EAAE,CAAE,EAAE,CACvE,EAAM,KAAK,IAAI,KAAK,IAAI,EAAM,KAAK,KAAK,EAAO,CAAE,EAAK,CAAE,EAAI,CAC5D,EAAQ,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAI,EAAO,EAAG,EAAG,IAAM,EAAI,EAAM,CAI1E,OAFI,EAAO,GAAK,EAAQ,GAAG,EAAM,OAAO,EAAG,EAAG,EAAG,EAAE,CAC/C,EAAO,GAAK,EAAM,GAAK,EAAM,OAAO,GAAI,EAAG,EAAG,EAAI,CAC/C,GAGT,EAAe,OAAO,gBAAiB,EAAoB"}

package/dist/esm/popover/popover.js

@@ -0,0 +1,2 @@
+import{QUICK_EVENT as e,attr as t,on as n,onHotReload as r}from"../utils/utils.js";import{autoUpdate as i,computePosition as a,flip as o,limitShift as s,offset as c,shift as l,size as u}from"@floating-ui/dom";const d=`data-placement`,f=`data-autoplacement`,p=new Map;function m(e){let{newState:n,oldState:r,target:m,source:h=e.detail}=e,g=m instanceof HTMLElement&&_(m,`--_ds-floating`);if(!g)return;if(n===`closed`)return p.get(m)?.();if(!h){let e=m.getRootNode(),t=`[popovertarget="${m.id}"],[commandfor="${m.id}"]`;h=m.id&&e?.querySelector?.(t)||void 0}if(!h||h===m||r&&r===n)return;let y=_(m,`--_ds-floating-overscroll`),b=t(m,d)||t(h,d)||g,x=t(m,f)||t(h,f),S=parseFloat(getComputedStyle(m,`::before`).height)||0,C=b.match(/left|right/gi)?`Height`:`Width`,w=h[`offset${C}`]/2+S;if(b===`none`)return;let T={strategy:`absolute`,placement:b,middleware:[c(S||0),l({padding:10,limiter:s({offset:{mainAxis:w}})}),v(),...x===`false`?[]:[o({padding:10,crossAxis:!1})],...y?[u({apply({availableHeight:e}){y===`fit`&&(m.style.width=`${h.clientWidth}px`),m.style.maxHeight=`${Math.max(50,e-20)}px`}})]:[]]},E=i(h,m,async()=>{if(!h?.isConnected)return p.get(m)?.();let{x:e,y:t}=await a(h,m,T);m.style.translate=`${e}px ${t}px`});p.set(m,()=>p.delete(m)&&E())}let h;const g=({type:e})=>{if(e===`mousedown`&&(h=!1),e===`scroll`&&h===!1&&(h=!0),e===`mouseup`&&h)for(let[e]of p)e.showPopover()};r(`popover`,()=>[n(document,`mousedown scroll mouseup`,g,!0),n(document,`toggle ds-toggle-source`,m,e)]);const _=(e,t)=>getComputedStyle(e).getPropertyValue(t).trim(),v=()=>({name:`arrowPseudo`,fn(e){let n=e.elements.floating,r=e.rects.reference,i=`${Math.round(r.width/2+r.x-e.x)}px`,a=`${Math.round(r.height/2+r.y-e.y)}px`;return n.style.setProperty(`--_ds-floating-arrow-x`,i),n.style.setProperty(`--_ds-floating-arrow-y`,a),t(n,`data-floating`,e.placement),e}});
+//# sourceMappingURL=popover.js.map

package/dist/esm/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/popover/popover.ts"],"sourcesContent":["import type { ComputePositionConfig, MiddlewareState } from '@floating-ui/dom';\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { attr, on, onHotReload, QUICK_EVENT } from '../utils/utils';\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'ds-toggle-source': CustomEvent<Element>;\n  }\n}\n\nconst ATTR_PLACE = 'data-placement';\nconst ATTR_AUTO = 'data-autoplacement';\nconst POPOVERS = new Map<HTMLElement, () => void>();\n\n// Sometimes use \"ds-toggle\" event while waiting for better support of\n// event.source (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source)\nfunction handleToggle(\n  event: Partial<ToggleEvent> & {\n    detail?: HTMLElement;\n    source?: HTMLElement;\n  },\n) {\n  let { newState, oldState, target: el, source = event.detail } = event;\n  const float = el instanceof HTMLElement && getCSSProp(el, '--_ds-floating');\n\n  if (!float) return;\n  if (newState === 'closed') return POPOVERS.get(el)?.(); // Cleanup on close\n  if (!source) {\n    const root = el.getRootNode() as Document; // Support shadow DOM\n    const css = `[popovertarget=\"${el.id}\"],[commandfor=\"${el.id}\"]`;\n    source = (el.id && root?.querySelector?.<HTMLElement>(css)) || undefined; // Polyfill ToggleEvent .source for older browsers\n  }\n  if (!source || source === el || (oldState && oldState === newState)) return; // No need to update\n  const padding = 10;\n  const overscroll = getCSSProp(el, '--_ds-floating-overscroll');\n  const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;\n  const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);\n  const arrowSize = parseFloat(getComputedStyle(el, '::before').height) || 0;\n  const shiftProp = placement.match(/left|right/gi) ? 'Height' : 'Width';\n  const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;\n\n  if (placement === 'none') return; // No need to position\n\n  const options = {\n    strategy: 'absolute',\n    placement,\n    middleware: [\n      offset(arrowSize || 0), // Add space for arrow or default to 8px\n      shift({\n        padding,\n        limiter: limitShift({ offset: { mainAxis: shiftLimit } }), // Prevent from shifing away from source\n      }),\n      arrowPseudo(),\n      ...(auto !== 'false' ? [flip({ padding, crossAxis: false })] : []),\n      ...(overscroll\n        ? [\n            size({\n              apply({ availableHeight }) {\n                if (overscroll === 'fit')\n                  el.style.width = `${source.clientWidth}px`;\n                el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;\n              },\n            }),\n          ]\n        : []),\n    ],\n  } as ComputePositionConfig;\n  const unfloat = autoUpdate(source, el, async () => {\n    if (!source?.isConnected) return POPOVERS.get(el)?.(); // Cleanup if source element is removed\n    const { x, y } = await computePosition(source, el, options);\n    el.style.translate = `${x}px ${y}px`;\n  });\n  POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());\n}\n\n// Prevent closing when mouse interacts with scrollbar\nlet IS_SCROLL: boolean | undefined;\nconst handleScrollbar = ({ type }: Event) => {\n  if (type === 'mousedown') IS_SCROLL = false;\n  if (type === 'scroll' && IS_SCROLL === false) IS_SCROLL = true;\n  if (type === 'mouseup' && IS_SCROLL)\n    for (const [popover] of POPOVERS) popover.showPopover(); // Immediately show again to prevent flicker\n};\n\nonHotReload('popover', () => [\n  on(document, 'mousedown scroll mouseup', handleScrollbar, true),\n  on(document, 'toggle ds-toggle-source', handleToggle, QUICK_EVENT), // Use capture since the toggle event does not bubble\n]);\n\nconst getCSSProp = (el: Element, prop: string) =>\n  getComputedStyle(el).getPropertyValue(prop).trim();\n\nconst arrowPseudo = () => ({\n  name: 'arrowPseudo',\n  fn(data: MiddlewareState) {\n    const target = data.elements.floating;\n    const source = data.rects.reference;\n    const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;\n    const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;\n\n    target.style.setProperty('--_ds-floating-arrow-x', x);\n    target.style.setProperty('--_ds-floating-arrow-y', y);\n    attr(target, 'data-floating', data.placement);\n    return data;\n  },\n});\n"],"mappings":"iNAkBA,MAAM,EAAa,iBACb,EAAY,qBACZ,EAAW,IAAI,IAIrB,SAAS,EACP,EAIA,CACA,GAAI,CAAE,WAAU,WAAU,OAAQ,EAAI,SAAS,EAAM,QAAW,EAC1D,EAAQ,aAAc,aAAe,EAAW,EAAI,iBAAiB,CAE3E,GAAI,CAAC,EAAO,OACZ,GAAI,IAAa,SAAU,OAAO,EAAS,IAAI,EAAG,IAAI,CACtD,GAAI,CAAC,EAAQ,CACX,IAAM,EAAO,EAAG,aAAa,CACvB,EAAM,mBAAmB,EAAG,GAAG,kBAAkB,EAAG,GAAG,IAC7D,EAAU,EAAG,IAAM,GAAM,gBAA6B,EAAI,EAAK,IAAA,GAEjE,GAAI,CAAC,GAAU,IAAW,GAAO,GAAY,IAAa,EAAW,OACrE,IACM,EAAa,EAAW,EAAI,4BAA4B,CACxD,EAAY,EAAK,EAAI,EAAW,EAAI,EAAK,EAAQ,EAAW,EAAI,EAChE,EAAO,EAAK,EAAI,EAAU,EAAI,EAAK,EAAQ,EAAU,CACrD,EAAY,WAAW,iBAAiB,EAAI,WAAW,CAAC,OAAO,EAAI,EACnE,EAAY,EAAU,MAAM,eAAe,CAAG,SAAW,QACzD,EAAa,EAAO,SAAS,KAAe,EAAI,EAEtD,GAAI,IAAc,OAAQ,OAE1B,IAAM,EAAU,CACd,SAAU,WACV,YACA,WAAY,CACV,EAAO,GAAa,EAAE,CACtB,EAAM,CACJ,WACA,QAAS,EAAW,CAAE,OAAQ,CAAE,SAAU,EAAY,CAAE,CAAC,CAC1D,CAAC,CACF,GAAa,CACb,GAAI,IAAS,QAAkD,EAAE,CAA1C,CAAC,EAAK,CAAE,WAAS,UAAW,GAAO,CAAC,CAAC,CAC5D,GAAI,EACA,CACE,EAAK,CACH,MAAM,CAAE,mBAAmB,CACrB,IAAe,QACjB,EAAG,MAAM,MAAQ,GAAG,EAAO,YAAY,KACzC,EAAG,MAAM,UAAY,GAAG,KAAK,IAAI,GAAI,EAAkB,GAAY,CAAC,KAEvE,CAAC,CACH,CACD,EAAE,CACP,CACF,CACK,EAAU,EAAW,EAAQ,EAAI,SAAY,CACjD,GAAI,CAAC,GAAQ,YAAa,OAAO,EAAS,IAAI,EAAG,IAAI,CACrD,GAAM,CAAE,IAAG,KAAM,MAAM,EAAgB,EAAQ,EAAI,EAAQ,CAC3D,EAAG,MAAM,UAAY,GAAG,EAAE,KAAK,EAAE,KACjC,CACF,EAAS,IAAI,MAAU,EAAS,OAAO,EAAG,EAAI,GAAS,CAAC,CAI1D,IAAI,EACJ,MAAM,GAAmB,CAAE,UAAkB,CAG3C,GAFI,IAAS,cAAa,EAAY,IAClC,IAAS,UAAY,IAAc,KAAO,EAAY,IACtD,IAAS,WAAa,EACxB,IAAK,GAAM,CAAC,KAAY,EAAU,EAAQ,aAAa,EAG3D,EAAY,cAAiB,CAC3B,EAAG,SAAU,2BAA4B,EAAiB,GAAK,CAC/D,EAAG,SAAU,0BAA2B,EAAc,EAAY,CACnE,CAAC,CAEF,MAAM,GAAc,EAAa,IAC/B,iBAAiB,EAAG,CAAC,iBAAiB,EAAK,CAAC,MAAM,CAE9C,OAAqB,CACzB,KAAM,cACN,GAAG,EAAuB,CACxB,IAAM,EAAS,EAAK,SAAS,SACvB,EAAS,EAAK,MAAM,UACpB,EAAI,GAAG,KAAK,MAAM,EAAO,MAAQ,EAAI,EAAO,EAAI,EAAK,EAAE,CAAC,IACxD,EAAI,GAAG,KAAK,MAAM,EAAO,OAAS,EAAI,EAAO,EAAI,EAAK,EAAE,CAAC,IAK/D,OAHA,EAAO,MAAM,YAAY,yBAA0B,EAAE,CACrD,EAAO,MAAM,YAAY,yBAA0B,EAAE,CACrD,EAAK,EAAQ,gBAAiB,EAAK,UAAU,CACtC,GAEV"}

package/dist/esm/readonly/readonly.js

@@ -0,0 +1,2 @@
+import{attr as e,on as t,onHotReload as n}from"../utils/utils.js";const r=t=>(t instanceof HTMLSelectElement||t instanceof HTMLInputElement)&&(t.hasAttribute(`readonly`)||e(t,`aria-readonly`)===`true`),i=t=>{if(t.key!==`Tab`&&r(t.target)&&(t.preventDefault(),t.key?.startsWith(`Arrow`)&&e(t.target,`type`)===`radio`)){let e=document.querySelectorAll(`input[name="${t.target.name}"]`),n=t.key?.match(/Arrow(Right|Down)/)?1:-1;e[(e.length+[...e].indexOf(t.target)+n)%e.length]?.focus()}},a=e=>{let t=e.target?.closest?.(`label`)?.control||e.target;r(t)&&(e.preventDefault(),t.focus())},o=e=>{e.target instanceof HTMLSelectElement&&r(e.target)&&e.preventDefault()};n(`readonly`,()=>[t(document,`keydown`,i),t(document,`click`,a),t(document,`mousedown`,o)]);
+//# sourceMappingURL=readonly.js.map

package/dist/esm/readonly/readonly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readonly.js","names":[],"sources":["../../../src/readonly/readonly.ts"],"sourcesContent":["import { attr, on, onHotReload } from '../utils/utils';\n\nconst isReadOnly = (el: unknown): el is HTMLInputElement | HTMLSelectElement =>\n  (el instanceof HTMLSelectElement || el instanceof HTMLInputElement) &&\n  (el.hasAttribute('readonly') || attr(el, 'aria-readonly') === 'true');\n\n// Allow tabbing when readonly, and only fix readonly input/select elements (since type select and non-text-inputs do not support readonly)\n// If radio buttons, move focus without changing checked state\nconst handleKeyDown = (e: Event & Partial<KeyboardEvent>) => {\n  if (e.key !== 'Tab' && isReadOnly(e.target)) {\n    e.preventDefault();\n    if (e.key?.startsWith('Arrow') && attr(e.target, 'type') === 'radio') {\n      const all = document.querySelectorAll(`input[name=\"${e.target.name}\"]`);\n      const move = e.key?.match(/Arrow(Right|Down)/) ? 1 : -1;\n      const next = all.length + [...all].indexOf(e.target) + move;\n      (all[next % all.length] as HTMLElement)?.focus();\n    }\n  }\n};\n\nconst handleClick = (e: Event) => {\n  const input = (e.target as Element)?.closest?.('label')?.control || e.target;\n  if (isReadOnly(input)) {\n    e.preventDefault();\n    input.focus();\n  }\n};\n\nconst handleMouseDown = (e: Event) => {\n  if (e.target instanceof HTMLSelectElement && isReadOnly(e.target))\n    e.preventDefault();\n};\n\nonHotReload('readonly', () => [\n  on(document, 'keydown', handleKeyDown),\n  on(document, 'click', handleClick), // click needed for <label> and <input>\n  on(document, 'mousedown', handleMouseDown), // mousedown needed for <select>\n]);\n"],"mappings":"kEAEA,MAAM,EAAc,IACjB,aAAc,mBAAqB,aAAc,oBACjD,EAAG,aAAa,WAAW,EAAI,EAAK,EAAI,gBAAgB,GAAK,QAI1D,EAAiB,GAAsC,CAC3D,GAAI,EAAE,MAAQ,OAAS,EAAW,EAAE,OAAO,GACzC,EAAE,gBAAgB,CACd,EAAE,KAAK,WAAW,QAAQ,EAAI,EAAK,EAAE,OAAQ,OAAO,GAAK,SAAS,CACpE,IAAM,EAAM,SAAS,iBAAiB,eAAe,EAAE,OAAO,KAAK,IAAI,CACjE,EAAO,EAAE,KAAK,MAAM,oBAAoB,CAAG,EAAI,GAEpD,GADY,EAAI,OAAS,CAAC,GAAG,EAAI,CAAC,QAAQ,EAAE,OAAO,CAAG,GAC3C,EAAI,SAAyB,OAAO,GAKhD,EAAe,GAAa,CAChC,IAAM,EAAS,EAAE,QAAoB,UAAU,QAAQ,EAAE,SAAW,EAAE,OAClE,EAAW,EAAM,GACnB,EAAE,gBAAgB,CAClB,EAAM,OAAO,GAIX,EAAmB,GAAa,CAChC,EAAE,kBAAkB,mBAAqB,EAAW,EAAE,OAAO,EAC/D,EAAE,gBAAgB,EAGtB,EAAY,eAAkB,CAC5B,EAAG,SAAU,UAAW,EAAc,CACtC,EAAG,SAAU,QAAS,EAAY,CAClC,EAAG,SAAU,YAAa,EAAgB,CAC3C,CAAC"}

package/dist/esm/suggestion/suggestion.js

@@ -0,0 +1,2 @@
+import{QUICK_EVENT as e,attr as t,customElements as n,off as r,on as i,onMutation as a,useId as o}from"../utils/utils.js";import{UHTMLComboboxElement as s}from"@u-elements/u-combobox";var c=class extends s{_unmutate;_render;connectedCallback(){super.connectedCallback(),this._render=()=>l(this),this._unmutate=a(this,this._render,{childList:!0}),i(this,`toggle`,u,e)}disconnectedCallback(){super.disconnectedCallback(),this._unmutate?.(),this._unmutate=this._render=void 0,r(this,`toggle`,u,e)}};const l=({control:e,list:n})=>{e&&!e.placeholder&&t(e,`placeholder`,` `),e&&t(e,`popovertarget`,o(n)||null),n&&t(n,`popover`,`manual`)},u=e=>{let t=e.currentTarget,n=e.newState===`open`&&t.control;n&&t.list?.dispatchEvent(new CustomEvent(`ds-toggle-source`,{detail:n}))};n.define(`ds-suggestion`,c);export{c as DSSuggestionElement};
+//# sourceMappingURL=suggestion.js.map

package/dist/esm/suggestion/suggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion.js","names":[],"sources":["../../../src/suggestion/suggestion.ts"],"sourcesContent":["import { UHTMLComboboxElement } from '@u-elements/u-combobox';\nimport {\n  attr,\n  customElements,\n  off,\n  on,\n  onMutation,\n  QUICK_EVENT,\n  useId,\n} from '../utils/utils';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ds-suggestion': DSSuggestionElement;\n  }\n}\n\nexport class DSSuggestionElement extends UHTMLComboboxElement {\n  _unmutate?: ReturnType<typeof onMutation>; // Using underscore instead of private fields for backwards compatibility\n  _render?: () => void;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._render = () => render(this);\n    this._unmutate = onMutation(this, this._render, { childList: true }); // .control and .list are direct children of the custom element\n    on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._unmutate?.();\n    this._unmutate = this._render = undefined;\n    off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n  }\n}\n\n// A non-empty placeholder attribute is required to activate the :placeholder-shown pseudo selector used in our chevron styling\nconst render = ({ control, list }: DSSuggestionElement) => {\n  if (control && !control.placeholder) attr(control, 'placeholder', ' '); // .control comes from UHTMLComboboxElement\n  if (control) attr(control, 'popovertarget', useId(list) || null);\n  if (list) attr(list, 'popover', 'manual'); // Ensure popover attribute is set on the list\n};\n\n// Since showPopover({ source }) is not supported in all browsers yet:\nconst polyfillToggleSource = (event: Partial<ToggleEvent>) => {\n  const self = event.currentTarget as DSSuggestionElement;\n  const detail = event.newState === 'open' && self.control; // .control comes from UHTMLComboboxElement\n\n  if (detail)\n    self.list?.dispatchEvent(new CustomEvent('ds-toggle-source', { detail }));\n};\n\ncustomElements.define('ds-suggestion', DSSuggestionElement);\n"],"mappings":"wLAiBA,IAAa,EAAb,cAAyC,CAAqB,CAC5D,UACA,QAEA,mBAAoB,CAClB,MAAM,mBAAmB,CACzB,KAAK,YAAgB,EAAO,KAAK,CACjC,KAAK,UAAY,EAAW,KAAM,KAAK,QAAS,CAAE,UAAW,GAAM,CAAC,CACpE,EAAG,KAAM,SAAU,EAAsB,EAAY,CAEvD,sBAAuB,CACrB,MAAM,sBAAsB,CAC5B,KAAK,aAAa,CAClB,KAAK,UAAY,KAAK,QAAU,IAAA,GAChC,EAAI,KAAM,SAAU,EAAsB,EAAY,GAK1D,MAAM,GAAU,CAAE,UAAS,UAAgC,CACrD,GAAW,CAAC,EAAQ,aAAa,EAAK,EAAS,cAAe,IAAI,CAClE,GAAS,EAAK,EAAS,gBAAiB,EAAM,EAAK,EAAI,KAAK,CAC5D,GAAM,EAAK,EAAM,UAAW,SAAS,EAIrC,EAAwB,GAAgC,CAC5D,IAAM,EAAO,EAAM,cACb,EAAS,EAAM,WAAa,QAAU,EAAK,QAE7C,GACF,EAAK,MAAM,cAAc,IAAI,YAAY,mBAAoB,CAAE,SAAQ,CAAC,CAAC,EAG7E,EAAe,OAAO,gBAAiB,EAAoB"}

package/dist/esm/tabs/tabs.js

@@ -0,0 +1,2 @@
+import{customElements as e}from"../utils/utils.js";import*as t from"@u-elements/u-tabs";var n=class extends t.UHTMLTabsElement{},r=class extends t.UHTMLTabListElement{},i=class extends t.UHTMLTabElement{},a=class extends t.UHTMLTabPanelElement{};e.define(`ds-tabs`,n),e.define(`ds-tablist`,r),e.define(`ds-tab`,i),e.define(`ds-tabpanel`,a);export{i as DSTabElement,r as DSTabListElement,a as DSTabPanelElement,n as DSTabsElement};
+//# sourceMappingURL=tabs.js.map

package/dist/esm/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/tabs/tabs.ts"],"sourcesContent":["import * as UTabs from '@u-elements/u-tabs';\nimport { customElements } from '../utils/utils';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ds-tabs': DSTabsElement;\n    'ds-tablist': DSTabListElement;\n    'ds-tab': DSTabElement;\n    'ds-tabpanel': DSTabPanelElement;\n  }\n}\n\nexport class DSTabsElement extends UTabs.UHTMLTabsElement {}\nexport class DSTabListElement extends UTabs.UHTMLTabListElement {}\nexport class DSTabElement extends UTabs.UHTMLTabElement {}\nexport class DSTabPanelElement extends UTabs.UHTMLTabPanelElement {}\n\ncustomElements.define('ds-tabs', DSTabsElement);\ncustomElements.define('ds-tablist', DSTabListElement);\ncustomElements.define('ds-tab', DSTabElement);\ncustomElements.define('ds-tabpanel', DSTabPanelElement);\n"],"mappings":"wFAYA,IAAa,EAAb,cAAmC,EAAM,gBAAiB,GAC7C,EAAb,cAAsC,EAAM,mBAAoB,GACnD,EAAb,cAAkC,EAAM,eAAgB,GAC3C,EAAb,cAAuC,EAAM,oBAAqB,GAElE,EAAe,OAAO,UAAW,EAAc,CAC/C,EAAe,OAAO,aAAc,EAAiB,CACrD,EAAe,OAAO,SAAU,EAAa,CAC7C,EAAe,OAAO,cAAe,EAAkB"}

package/dist/esm/toggle-group/toggle-group.js

@@ -0,0 +1,2 @@
+import{attr as e,attrOrCSS as t,debounce as n,on as r,onHotReload as i,onMutation as a}from"../utils/utils.js";const o=`data-toggle-group`,s=`[${o}]`,c=n(()=>{for(let n of document.querySelectorAll(s))e(n,`aria-label`,t(n,o))},0),l=e=>{let t=e.target instanceof HTMLInputElement&&e.target.closest(s);if(t&&(e.key===`Enter`&&e.target.click(),e.key?.startsWith(`Arrow`))){e.preventDefault?.();let n=t.getElementsByTagName(`input`),r=[...n].indexOf(e.target),i=e.key.match(/Arrow(Right|Down)/)?1:-1;n[(n.length+r+i)%n.length]?.focus()}};i(`toggle-group`,()=>[r(document,`keydown`,l),a(document,c,{attributeFilter:[o],attributes:!0,childList:!0,subtree:!0})]);
+//# sourceMappingURL=toggle-group.js.map

package/dist/esm/toggle-group/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../src/toggle-group/toggle-group.ts"],"sourcesContent":["import {\n  attr,\n  attrOrCSS,\n  debounce,\n  on,\n  onHotReload,\n  onMutation,\n} from '../utils/utils';\n\nconst ATTR_TOGGLEGROUP = 'data-toggle-group';\nconst SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;\n\nconst handleAriaAttributes = debounce(() => {\n  for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP))\n    attr(group, 'aria-label', attrOrCSS(group, ATTR_TOGGLEGROUP));\n}, 0); // Debounce to merge multiple mutations\n\nconst handleKeydown = (event: Partial<KeyboardEvent>) => {\n  const group =\n    event.target instanceof HTMLInputElement &&\n    event.target.closest(SELECTOR_TOGGLEGROUP);\n\n  if (!group) return;\n  if (event.key === 'Enter') event.target.click(); // Forward Enter, but no need to listen for space key, as this is handled by the browser\n  if (event.key?.startsWith('Arrow')) {\n    event.preventDefault?.();\n    const inputs = group.getElementsByTagName('input');\n    const index = [...inputs].indexOf(event.target);\n    const move = event.key.match(/Arrow(Right|Down)/) ? 1 : -1;\n    inputs[(inputs.length + index + move) % inputs.length]?.focus();\n  }\n};\n\nonHotReload('toggle-group', () => [\n  on(document, 'keydown', handleKeydown),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: [ATTR_TOGGLEGROUP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"+GASA,MAAM,EAAmB,oBACnB,EAAuB,IAAI,EAAiB,GAE5C,EAAuB,MAAe,CAC1C,IAAK,IAAM,KAAS,SAAS,iBAAiB,EAAqB,CACjE,EAAK,EAAO,aAAc,EAAU,EAAO,EAAiB,CAAC,EAC9D,EAAE,CAEC,EAAiB,GAAkC,CACvD,IAAM,EACJ,EAAM,kBAAkB,kBACxB,EAAM,OAAO,QAAQ,EAAqB,CAEvC,OACD,EAAM,MAAQ,SAAS,EAAM,OAAO,OAAO,CAC3C,EAAM,KAAK,WAAW,QAAQ,EAAE,CAClC,EAAM,kBAAkB,CACxB,IAAM,EAAS,EAAM,qBAAqB,QAAQ,CAC5C,EAAQ,CAAC,GAAG,EAAO,CAAC,QAAQ,EAAM,OAAO,CACzC,EAAO,EAAM,IAAI,MAAM,oBAAoB,CAAG,EAAI,GACxD,GAAQ,EAAO,OAAS,EAAQ,GAAQ,EAAO,SAAS,OAAO,GAInE,EAAY,mBAAsB,CAChC,EAAG,SAAU,UAAW,EAAc,CACtC,EAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAiB,CACnC,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/esm/tooltip/tooltip.js

@@ -0,0 +1,2 @@
+import{QUICK_EVENT as e,attr as t,attrOrCSS as n,debounce as r,on as i,onHotReload as a,onMutation as o,setTextWithoutMutation as s,tag as c,warn as l}from"../utils/utils.js";let u,d,f=0,p=0;const m=`data-tooltip`,h=`data-color`,g=`aria-label`,_=`aria-description`,v=`[${h}]`,y=`[${m}]`,b=`data-color-scheme`,x=`[${b}]`,S=e=>{e&&!(e instanceof HTMLElement)&&l(`setTooltipElement expects an HTMLElement, got: `,e),u=e||void 0},C=r(()=>{for(let e of document.querySelectorAll(y)){let r=e.getAttribute(g)||e.getAttribute(_),i=e.getAttribute(m)||n(e,m);if(r!==i){let n=t(e,`role`)!==`img`&&e.textContent?.trim();t(e,m,i),t(e,g,n?null:i),t(e,_,n?i:null),e.matches(`a,button,input,label,select,textarea,[tabindex]`)||l(`Missing tabindex="0" attribute on: `,e)}}},0),w=({type:e,target:n})=>{if(clearTimeout(f),n===u)return;if(e===`mouseover`&&!d){f=setTimeout(w,300,{target:n});return}let r=n?.closest?.(`[${m}]`);if(r===d)return;if(!r)return T();u||=c(`div`,{class:`ds-tooltip`}),u.isConnected||document.body.appendChild(u);let i=r.closest(v),a=r.closest(x),o=i!==a&&i?.contains(a);clearTimeout(p),t(u,`popover`,`manual`),t(u,b,a?.getAttribute(b)||null),t(u,h,o&&i?.getAttribute(h)||null),s(u,t(r,m)),u.showPopover(),u.dispatchEvent(new CustomEvent(`ds-toggle-source`,{detail:r})),d=r},T=()=>u?.isConnected&&u.popover&&u.hidePopover(),E=e=>{if(e?.type===`keydown`)return e?.key===`Escape`&&u?.hidePopover();e?e.target===u&&e.newState===`closed`&&(p=setTimeout(E,300)):d=void 0};a(`tooltip`,()=>[i(document,`blur focus mouseover`,w,e),i(document,`toggle keydown`,E,e),o(document,C,{attributeFilter:[m],attributes:!0,childList:!0,subtree:!0})]);export{S as setTooltipElement};
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/tooltip/tooltip.ts"],"sourcesContent":["import {\n  attr,\n  attrOrCSS,\n  debounce,\n  on,\n  onHotReload,\n  onMutation,\n  QUICK_EVENT,\n  setTextWithoutMutation,\n  tag,\n  warn,\n} from '../utils/utils';\n\nlet TIP: HTMLElement | undefined;\nlet SOURCE: Element | undefined;\nlet HOVER_TIMER: number | ReturnType<typeof setTimeout> = 0;\nlet SKIP_TIMER: number | ReturnType<typeof setTimeout> = 0;\nconst ATTR_TOOLTIP = 'data-tooltip';\nconst ATTR_COLOR = 'data-color';\nconst ARIA_LABEL = 'aria-label';\nconst ARIA_DESC = 'aria-description';\nconst SELECTOR_COLOR = `[${ATTR_COLOR}]`;\nconst SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;\nconst ATTR_SCHEME = 'data-color-scheme';\nconst SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;\nconst SELECTOR_INTERACTIVE = 'a,button,input,label,select,textarea,[tabindex]';\nconst DELAY_HOVER = 300;\nconst DELAY_SKIP = 300;\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  TIP = el || undefined;\n};\n\nconst handleAriaAttributes = debounce(() => {\n  for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {\n    const aria = el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC); // Using getAttribute for best performance\n    const text = el.getAttribute(ATTR_TOOLTIP) || attrOrCSS(el, ATTR_TOOLTIP); // Only parse CSS if attribute is empty for better performance\n\n    if (aria !== text) {\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.matches(SELECTOR_INTERACTIVE))\n        warn('Missing tabindex=\"0\" attribute on: ', el);\n    }\n  }\n}, 0); // Debounce to merge multiple mutations\n\nconst handleInterest = ({ type, target }: Event) => {\n  clearTimeout(HOVER_TIMER);\n\n  if (target === TIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  if (type === 'mouseover' && !SOURCE) {\n    HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target }); // Delay mouse showing tooltip if not already shown\n    return;\n  }\n\n  const source = (target as Element)?.closest?.(`[${ATTR_TOOLTIP}]`);\n  if (source === SOURCE) return; // No need to update\n  if (!source) return hideTooltip(); // If no new anchor, cleanup previous autoUpdate\n  if (!TIP) TIP = tag('div', { class: 'ds-tooltip' });\n  if (!TIP.isConnected) document.body.appendChild(TIP); // Ensure connected\n\n  const color = source.closest(SELECTOR_COLOR); // Match source color of source element\n  const scheme = source.closest(SELECTOR_SCHEME); // Match source color-scheme 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  clearTimeout(SKIP_TIMER);\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  setTextWithoutMutation(TIP, attr(source, ATTR_TOOLTIP));\n  TIP.showPopover();\n  TIP.dispatchEvent(new CustomEvent('ds-toggle-source', { detail: source })); // Since showPopover({ source }) is not supported in all browsers yet\n  SOURCE = source;\n};\n\nconst hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover(); // Only hide if connected and activated\n\nconst handleClose = (event?: Partial<ToggleEvent & KeyboardEvent>) => {\n  if (event?.type === 'keydown')\n    return event?.key === 'Escape' && TIP?.hidePopover();\n  if (!event) SOURCE = undefined;\n  else if (event.target === TIP && event.newState === 'closed')\n    SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);\n};\n\nonHotReload('tooltip', () => [\n  on(document, 'blur focus mouseover', handleInterest, QUICK_EVENT),\n  on(document, 'toggle keydown', handleClose, QUICK_EVENT),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: [ATTR_TOOLTIP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"+KAaA,IAAI,EACA,EACA,EAAsD,EACtD,EAAqD,EACzD,MAAM,EAAe,eACf,EAAa,aACb,EAAa,aACb,EAAY,mBACZ,EAAiB,IAAI,EAAW,GAChC,EAAmB,IAAI,EAAa,GACpC,EAAc,oBACd,EAAkB,IAAI,EAAY,GAU3B,EAAqB,GAA4B,CACxD,GAAM,EAAE,aAAc,cACxB,EAAK,kDAAmD,EAAG,CAC7D,EAAM,GAAM,IAAA,IAGR,EAAuB,MAAe,CAC1C,IAAK,IAAM,KAAM,SAAS,iBAAiB,EAAiB,CAAE,CAC5D,IAAM,EAAO,EAAG,aAAa,EAAW,EAAI,EAAG,aAAa,EAAU,CAChE,EAAO,EAAG,aAAa,EAAa,EAAI,EAAU,EAAI,EAAa,CAEzE,GAAI,IAAS,EAAM,CACjB,IAAM,EAAU,EAAK,EAAI,OAAO,GAAK,OAAS,EAAG,aAAa,MAAM,CACpE,EAAK,EAAI,EAAc,EAAK,CAC5B,EAAK,EAAI,EAAY,EAAU,KAAO,EAAK,CAC3C,EAAK,EAAI,EAAW,EAAU,EAAO,KAAK,CACrC,EAAG,QAAQ,kDAAqB,EACnC,EAAK,sCAAuC,EAAG,IAGpD,EAAE,CAEC,GAAkB,CAAE,OAAM,YAAoB,CAGlD,GAFA,aAAa,EAAY,CAErB,IAAW,EAAK,OACpB,GAAI,IAAS,aAAe,CAAC,EAAQ,CACnC,EAAc,WAAW,EAAgB,IAAa,CAAE,SAAQ,CAAC,CACjE,OAGF,IAAM,EAAU,GAAoB,UAAU,IAAI,EAAa,GAAG,CAClE,GAAI,IAAW,EAAQ,OACvB,GAAI,CAAC,EAAQ,OAAO,GAAa,CACjC,AAAU,IAAM,EAAI,MAAO,CAAE,MAAO,aAAc,CAAC,CAC9C,EAAI,aAAa,SAAS,KAAK,YAAY,EAAI,CAEpD,IAAM,EAAQ,EAAO,QAAQ,EAAe,CACtC,EAAS,EAAO,QAAQ,EAAgB,CACxC,EAAU,IAAU,GAAU,GAAO,SAAS,EAAe,CACnE,aAAa,EAAW,CACxB,EAAK,EAAK,UAAW,SAAS,CAC9B,EAAK,EAAK,EAAa,GAAQ,aAAa,EAAY,EAAI,KAAK,CACjE,EAAK,EAAK,EAAa,GAAW,GAAO,aAAa,EAAW,EAAK,KAAK,CAC3E,EAAuB,EAAK,EAAK,EAAQ,EAAa,CAAC,CACvD,EAAI,aAAa,CACjB,EAAI,cAAc,IAAI,YAAY,mBAAoB,CAAE,OAAQ,EAAQ,CAAC,CAAC,CAC1E,EAAS,GAGL,MAAoB,GAAK,aAAe,EAAI,SAAW,EAAI,aAAa,CAExE,EAAe,GAAiD,CACpE,GAAI,GAAO,OAAS,UAClB,OAAO,GAAO,MAAQ,UAAY,GAAK,aAAa,CACjD,EACI,EAAM,SAAW,GAAO,EAAM,WAAa,WAClD,EAAa,WAAW,EAAa,IAAW,EAFtC,EAAS,IAAA,IAKvB,EAAY,cAAiB,CAC3B,EAAG,SAAU,uBAAwB,EAAgB,EAAY,CACjE,EAAG,SAAU,iBAAkB,EAAa,EAAY,CACxD,EAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAa,CAC/B,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/esm/utils/utils.js

@@ -0,0 +1,2 @@
+const e={passive:!0,capture:!0},t=()=>typeof window<`u`&&typeof document<`u`,n=()=>t()&&/^Win/i.test(navigator.userAgentData?.platform||navigator.platform),r=typeof HTMLElement>`u`?class{}:HTMLElement;function i(e,t){let n;return function(...r){clearTimeout(n),n=setTimeout(()=>e.apply(this,r),t)}}const a=(e,...t)=>typeof window>`u`||window.dsWarnings===!1||console.warn(`Designsystemet: ${e}`,...t),o=(e,t,n)=>n===void 0?e.getAttribute(t)??null:(n===null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n),null),s=/^["']|["']$/g,c=(e,t)=>{let n=o(e,t);return n||=getComputedStyle(e).getPropertyValue(`--_ds-${t}`).replace(s,``).trim()||null,n||a(`Missing ${t} on:`,e),n},l=(e,...t)=>{let[n,...r]=t;for(let t of n.split(` `))e.addEventListener(t,...r);return()=>u(e,...t)},u=(e,...t)=>{let[n,...r]=t;for(let t of n.split(` `))e.removeEventListener(t,...r)},d=(e,n)=>{t()&&(window._dsHotReloadCleanup||(window._dsHotReloadCleanup=new Map),window._dsHotReloadCleanup?.get(e)?.map(e=>e()),window._dsHotReloadCleanup?.set(e,n()))};let f=!1;const p=(e,t,n)=>{let r=0,i=()=>{if(!e.isConnected)return a();t(o),o.takeRecords(),r=0},a=()=>o?.disconnect?.(),o=new MutationObserver(()=>{!f&&!r&&(r=requestAnimationFrame(i))});return o.observe(e,n),requestAnimationFrame(i),a},m=(e,t)=>{f=!0,e.textContent=t,requestAnimationFrame(h)},h=()=>{f=!1},g=(e,t)=>{let n=document.createElement(e);if(t)for(let[e,r]of Object.entries(t))o(n,e,r);return n},_={define:(e,n)=>!t()||window.customElements.get(e)||window.customElements.define(e,n)};let v=0;const y=`${Date.now().toString(36)}${Math.random().toString(36).slice(2,5)}`;function b(e){return e&&!e.id&&(e.id=`${y}${++v}`),e?.id||``}export{r as DSElement,e as QUICK_EVENT,o as attr,c as attrOrCSS,_ as customElements,i as debounce,t as isBrowser,n as isWindows,u as off,l as on,d as onHotReload,p as onMutation,m as setTextWithoutMutation,g as tag,b as useId,a as warn};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/utils/utils.ts"],"sourcesContent":["export const QUICK_EVENT = { passive: true, capture: true };\n\n// Using function instead of constant to support evnironments where DOM can be unloaded (like Vitest with jsdom)\nexport const isBrowser = () =>\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\nexport const isWindows = () =>\n  isBrowser() &&\n  // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n  /^Win/i.test(navigator.userAgentData?.platform || navigator.platform);\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const DSElement =\n  typeof HTMLElement === 'undefined'\n    ? (class {} as typeof HTMLElement)\n    : HTMLElement;\n\nexport function debounce<T extends unknown[]>(\n  callback: (...args: T) => void,\n  delay: number,\n) {\n  let timer: ReturnType<typeof setTimeout>;\n\n  return function (this: unknown, ...args: T) {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), delay);\n  };\n}\n\n/**\n * warn\n * @description Utility to console.warn, but can be silenced in production with window.dsWarnings = false;\n */\ndeclare global {\n  interface Window {\n    dsWarnings?: boolean;\n  }\n}\nexport const warn = (\n  message: string,\n  ...args: Parameters<typeof console.warn>\n) =>\n  typeof window === 'undefined' ||\n  window.dsWarnings === false ||\n  console.warn(`Designsystemet: ${message}`, ...args);\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to read/write attributes from\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport const attr = (\n  el: Element,\n  name: string,\n  value?: string | null,\n): string | null => {\n  if (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n};\n\n/**\n * attrOrCSS\n * @description Retrieves and updates attribute based on attribute or CSS property value\n * @param el The Element to read attributes/CSS from\n * @param name Attribute or CSS property to get\n * @return string attribute or CSS property value\n */\nconst STRIP_SURROUNDING_QUOTES = /^[\"']|[\"']$/g; // Matches surrounding single or double quotes\nexport const attrOrCSS = (el: Element, name: string) => {\n  let value = attr(el, name);\n  if (!value) {\n    const prop = getComputedStyle(el).getPropertyValue(`--_ds-${name}`);\n    value = prop.replace(STRIP_SURROUNDING_QUOTES, '').trim() || null;\n  }\n  if (!value) warn(`Missing ${name} on:`, el);\n  return value;\n};\n\n/**\n * on\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n  el: Node | Window | ShadowRoot,\n  ...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n  const [types, ...options] = rest;\n  for (const type of types.split(' ')) el.addEventListener(type, ...options);\n  return () => off(el, ...rest);\n};\n\n/**\n * off\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n  el: Node | Window | ShadowRoot,\n  ...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => {\n  const [types, ...options] = rest;\n  for (const type of types.split(' ')) el.removeEventListener(type, ...options);\n};\n\n// Used to store cleanup functions for hot-reloading\ndeclare global {\n  interface Window {\n    _dsHotReloadCleanup?: Map<string, Array<() => void>>;\n  }\n}\n\n/**\n * onHotReload\n * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading\n * @param key The key to identify setup and corresponding cleanup\n * @param callback The callback to run when the page is ready\n */\nexport const onHotReload = (key: string, setup: () => Array<() => void>) => {\n  if (!isBrowser()) return; // Skip if not in modern browser environment, but on each call as Vitest might have unloaded jsdom between tests\n  if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = new Map(); // Hot reload cleanup support supporting all build tools\n\n  window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup()); // Run previous cleanup\n  window._dsHotReloadCleanup?.set(key, setup()); // Store new cleanup\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nlet SKIP_MUTATIONS = false;\nexport const onMutation = (\n  el: Node,\n  callback: (observer: MutationObserver) => void,\n  options: MutationObserverInit,\n) => {\n  let queue = 0;\n  const onFrame = () => {\n    if (!el.isConnected) return cleanup(); // Stop observing if element is removed from DOM\n    callback(observer);\n    observer.takeRecords(); // Clear records in case mutations happened during callback\n    queue = 0;\n  };\n  const cleanup = () => observer?.disconnect?.();\n  const observer = new MutationObserver(() => {\n    if (!SKIP_MUTATIONS && !queue) queue = requestAnimationFrame(onFrame); // requestAnimationFrame only runs when page is visible\n  });\n\n  observer.observe(el, options);\n  requestAnimationFrame(onFrame); // Initial run when page is visible and children has mounted\n  return cleanup;\n};\n\n/**\n * Many mutation observers need to watch childNodes, thus running on all `textContent` changes\n * This utility allows skipping mutation observers while updating textContent\n */\nexport const setTextWithoutMutation = (el: Element, text: string | null) => {\n  SKIP_MUTATIONS = true;\n  el.textContent = text;\n  requestAnimationFrame(enableMutations); // Let all mutationobservers run before enabling again\n};\nconst enableMutations = () => {\n  SKIP_MUTATIONS = false;\n};\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n  tagName: TagName,\n  attrs?: Record<string, string | null> | null,\n): HTMLElementTagNameMap[TagName] => {\n  const el = document.createElement(tagName);\n  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n  return el;\n};\n\n/**\n * customElements.define\n * @description Defines a customElement if running in browser and if not already registered\n * Scoped/named \"customElements.define\" so @custom-elements-manifest/analyzer can find tag names\n */\nexport const customElements = {\n  define: (name: string, instance: CustomElementConstructor) =>\n    !isBrowser() ||\n    window.customElements.get(name) ||\n    window.customElements.define(name, instance),\n};\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst hash = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId(el?: Element | null) {\n  if (el && !el.id) el.id = `${hash}${++id}`;\n  return el?.id || '';\n}\n"],"mappings":"AAAA,MAAa,EAAc,CAAE,QAAS,GAAM,QAAS,GAAM,CAG9C,MACX,OAAO,OAAW,KAAe,OAAO,SAAa,IAE1C,MACX,GAAW,EAEX,QAAQ,KAAK,UAAU,eAAe,UAAY,UAAU,SAAS,CAG1D,EACX,OAAO,YAAgB,IAClB,KAAM,GACP,YAEN,SAAgB,EACd,EACA,EACA,CACA,IAAI,EAEJ,OAAO,SAAyB,GAAG,EAAS,CAC1C,aAAa,EAAM,CACnB,EAAQ,eAAiB,EAAS,MAAM,KAAM,EAAK,CAAE,EAAM,EAa/D,MAAa,GACX,EACA,GAAG,IAEH,OAAO,OAAW,KAClB,OAAO,aAAe,IACtB,QAAQ,KAAK,mBAAmB,IAAW,GAAG,EAAK,CASxC,GACX,EACA,EACA,IAEI,IAAU,IAAA,GAAkB,EAAG,aAAa,EAAK,EAAI,MACrD,IAAU,KAAM,EAAG,gBAAgB,EAAK,CACnC,EAAG,aAAa,EAAK,GAAK,GAAO,EAAG,aAAa,EAAM,EAAM,CAC/D,MAUH,EAA2B,eACpB,GAAa,EAAa,IAAiB,CACtD,IAAI,EAAQ,EAAK,EAAI,EAAK,CAM1B,MALA,CAEE,IADa,iBAAiB,EAAG,CAAC,iBAAiB,SAAS,IAAO,CACtD,QAAQ,EAA0B,GAAG,CAAC,MAAM,EAAI,KAE1D,GAAO,EAAK,WAAW,EAAK,MAAO,EAAG,CACpC,GASI,GACX,EACA,GAAG,IACc,CACjB,GAAM,CAAC,EAAO,GAAG,GAAW,EAC5B,IAAK,IAAM,KAAQ,EAAM,MAAM,IAAI,CAAE,EAAG,iBAAiB,EAAM,GAAG,EAAQ,CAC1E,UAAa,EAAI,EAAI,GAAG,EAAK,EASlB,GACX,EACA,GAAG,IACM,CACT,GAAM,CAAC,EAAO,GAAG,GAAW,EAC5B,IAAK,IAAM,KAAQ,EAAM,MAAM,IAAI,CAAE,EAAG,oBAAoB,EAAM,GAAG,EAAQ,EAgBlE,GAAe,EAAa,IAAmC,CACrE,GAAW,GACX,OAAO,sBAAqB,OAAO,oBAAsB,IAAI,KAElE,OAAO,qBAAqB,IAAI,EAAI,EAAE,IAAK,GAAY,GAAS,CAAC,CACjE,OAAO,qBAAqB,IAAI,EAAK,GAAO,CAAC,GAO/C,IAAI,EAAiB,GACrB,MAAa,GACX,EACA,EACA,IACG,CACH,IAAI,EAAQ,EACN,MAAgB,CACpB,GAAI,CAAC,EAAG,YAAa,OAAO,GAAS,CACrC,EAAS,EAAS,CAClB,EAAS,aAAa,CACtB,EAAQ,GAEJ,MAAgB,GAAU,cAAc,CACxC,EAAW,IAAI,qBAAuB,CACtC,CAAC,GAAkB,CAAC,IAAO,EAAQ,sBAAsB,EAAQ,GACrE,CAIF,OAFA,EAAS,QAAQ,EAAI,EAAQ,CAC7B,sBAAsB,EAAQ,CACvB,GAOI,GAA0B,EAAa,IAAwB,CAC1E,EAAiB,GACjB,EAAG,YAAc,EACjB,sBAAsB,EAAgB,EAElC,MAAwB,CAC5B,EAAiB,IAWN,GACX,EACA,IACmC,CACnC,IAAM,EAAK,SAAS,cAAc,EAAQ,CAC1C,GAAI,EAAO,IAAK,GAAM,CAAC,EAAK,KAAQ,OAAO,QAAQ,EAAM,CAAE,EAAK,EAAI,EAAK,EAAI,CAC7E,OAAO,GAQI,EAAiB,CAC5B,QAAS,EAAc,IACrB,CAAC,GAAW,EACZ,OAAO,eAAe,IAAI,EAAK,EAC/B,OAAO,eAAe,OAAO,EAAM,EAAS,CAC/C,CAMD,IAAI,EAAK,EACT,MAAM,EAAO,GAAG,KAAK,KAAK,CAAC,SAAS,GAAG,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,EAAG,EAAE,GAChF,SAAgB,EAAM,EAAqB,CAEzC,OADI,GAAM,CAAC,EAAG,KAAI,EAAG,GAAK,GAAG,IAAO,EAAE,KAC/B,GAAI,IAAM"}

package/dist/index.d.ts

@@ -0,0 +1,321 @@
+export * from '@u-elements/u-datalist';
+import { UHTMLComboboxElement } from '@u-elements/u-combobox';
+import * as UTabs from '@u-elements/u-tabs';
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'ds-toggle-source': CustomEvent<Element>;
+    }
+}
+
+/**
+ * setTooltipElement
+ * @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.
+ * @param el The HTMLElement to use as tooltip
+ */
+declare const setTooltipElement: (el?: HTMLElement | null) => void;
+
+declare const DSElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+/**
+ * warn
+ * @description Utility to console.warn, but can be silenced in production with window.dsWarnings = false;
+ */
+declare global {
+    interface Window {
+        dsWarnings?: boolean;
+    }
+}
+declare global {
+    interface Window {
+        _dsHotReloadCleanup?: Map<string, Array<() => void>>;
+    }
+}
+declare const onMutation: (el: Node, callback: (observer: MutationObserver) => void, options: MutationObserverInit) => () => void;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-breadcrumbs': DSBreadcrumbsElement;
+    }
+}
+declare class DSBreadcrumbsElement extends DSElement {
+    _items?: HTMLCollectionOf<HTMLAnchorElement>;
+    _label: string | null;
+    _render?: () => void;
+    _unresize?: () => void;
+    _unmutate?: () => void;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, _prev?: string, next?: string): void;
+    disconnectedCallback(): void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-error-summary': DSErrorSummaryElement;
+    }
+}
+declare class DSErrorSummaryElement extends DSElement {
+    connectedCallback(): void;
+    handleEvent({ target }: Partial<Event>): void;
+    disconnectedCallback(): void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-field': DSFieldElement;
+    }
+}
+declare class DSFieldElement extends DSElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-pagination': DSPaginationElement;
+    }
+}
+declare const pagination: ({ current, total, show }: {
+    current?: number | undefined;
+    total?: number | undefined;
+    show?: number | undefined;
+}) => {
+    prev: number;
+    next: number;
+    pages: {
+        current: false | "page";
+        key: string;
+        page: number;
+    }[];
+};
+declare class DSPaginationElement extends DSElement {
+    _unmutate?: () => void;
+    _render?: () => void;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-suggestion': DSSuggestionElement;
+    }
+}
+declare class DSSuggestionElement extends UHTMLComboboxElement {
+    _unmutate?: ReturnType<typeof onMutation>;
+    _render?: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-tabs': DSTabsElement;
+        'ds-tablist': DSTabListElement;
+        'ds-tab': DSTabElement;
+        'ds-tabpanel': DSTabPanelElement;
+    }
+}
+declare class DSTabsElement extends UTabs.UHTMLTabsElement {
+}
+declare class DSTabListElement extends UTabs.UHTMLTabListElement {
+}
+declare class DSTabElement extends UTabs.UHTMLTabElement {
+}
+declare class DSTabPanelElement extends UTabs.UHTMLTabPanelElement {
+}
+
+export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, 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>
+
+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-breadcrumbs': VueDsbreadcrumbs } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-breadcrumbs': SvelteDsbreadcrumbs } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'ds-breadcrumbs': SolidDsbreadcrumbs }
+    interface CustomEvents {  }
+  }
+}
+
+
+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-error-summary': VueDserrorsummary } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-error-summary': SvelteDserrorsummary } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'ds-error-summary': SolidDserrorsummary }
+    interface CustomEvents {  }
+  }
+}
+
+
+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-field': VueDsfield } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-field': SvelteDsfield } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'ds-field': SolidDsfield }
+    interface CustomEvents {  }
+  }
+}
+
+
+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 } } }
+// 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 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'ds-pagination': SolidDspagination }
+    interface CustomEvents {  }
+  }
+}
+
+
+export type PreactDssuggestion = PreactTypes.JSX.HTMLAttributes<DSSuggestionElement> & {  }
+export type ReactDssuggestion = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<DSSuggestionElement>, DSSuggestionElement> & { class?: string }
+export type QwikDssuggestion = QwikJSX.IntrinsicElements['div'] & { class?: string }
+export type VueDssuggestion = VueJSX.HTMLAttributes
+export type SvelteDssuggestion = SvelteTypes.HTMLAttributes<DSSuggestionElement> & {  }
+export type SolidDssuggestion = SolidJSX.HTMLAttributes<DSSuggestionElement>
+
+declare global { namespace React.JSX { interface IntrinsicElements { 'ds-suggestion': ReactDssuggestion } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'ds-suggestion': PreactDssuggestion } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'ds-suggestion': QwikDssuggestion } } }
+// Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'ds-suggestion': VueDssuggestion } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-suggestion': SvelteDssuggestion } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'ds-suggestion': SolidDssuggestion }
+    interface CustomEvents {  }
+  }
+}
+
+
+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-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-tabs': VueDstabs } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tabs': SvelteDstabs } }
+declare module 'solid-js' {
+  namespace JSX {
+    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>
+
+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-tablist': VueDstablist } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tablist': SvelteDstablist } }
+declare module 'solid-js' {
+  namespace JSX {
+    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>
+
+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-tab': VueDstab } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tab': SvelteDstab } }
+declare module 'solid-js' {
+  namespace JSX {
+    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>
+
+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-tabpanel': VueDstabpanel } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'ds-tabpanel': SvelteDstabpanel } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'ds-tabpanel': SolidDstabpanel }
+    interface CustomEvents {  }
+  }
+}