@digdir/designsystemet-web 0.0.1 → 1.12.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2024 Digitaliseringsdirektoratet (Digdir)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,21 +1,277 @@
-> ⚠️ **WARNING** ⚠️  
-> The web components created here are **not** meant to be used in production.
-> This project only serves as a playground for us to test using web components for some of our react components.
-> 
-> If you are here because you don't want to use React, you should take a look at only using our CSS package: [@digdir/designsystemet-css](../css/README.md).
-
-## Web Components
-
-Most of our components are plain HTML elements, and these don't need any JavaScript to work.
-However, some components need a bit of JavaScript to work properly.
-These components include:
-- Floating components (e.g. Popover, Tooltip, Dropdown)
-- Field
-- Components that need to manage focus or keyboard interaction (e.g. Tabs, ToggleGroup)
-- Components that need JavaScript to be managed
-
-## Current implementation
-We have implemented this as simple as possible. No framework, but pure JS.
-Rollup bundles it, and adds all dependencies (floating-ui) to the bundle, making for a single JS file.
-
-Run `pnpm dev` to build and start a local server. It does not have hot reloading.
+## `@digdir/designsystemet-web`
+
+### Table of contents
+
+- [`@digdir/designsystemet-web`](#digdirdesignsystemet-web)
+  - [Table of contents](#table-of-contents)
+  - [Get started](#get-started)
+    - [Types](#types)
+  - [Warnings:](#warnings)
+- [`<ds-breadcrumbs>`](#ds-breadcrumbs)
+- [`<ds-error-summary>`](#ds-error-summary)
+- [`<ds-field>`](#ds-field)
+  - [Counter](#counter)
+- [`<ds-pagination>`](#ds-pagination)
+- [`<ds-suggestion>`](#ds-suggestion)
+- [`<ds-tabs>`](#ds-tabs)
+- [`data-toggle-group`](#data-toggle-group)
+- [`data-tooltip`](#data-tooltip)
+- [`data-clickdelegatefor`](#data-clickdelegatefor)
+- [`readonly`](#readonly)
+- [Polyfills](#polyfills)
+  - [invokers-polyfill](#invokers-polyfill)
+  - [`<dialog>`](#dialog)
+    - [open \& close](#open--close)
+  - [`details` and `summary`](#details-and-summary)
+  - [`popover`](#popover)
+
+
+### Get started
+
+We recommend to import the whole package.
+This will register all web components and observers globally, so you only need to do this once.
+```ts
+import '@digdir/designsystemet-web';
+```
+#### Types
+Add the package to your `types` for types:
+```json
+{
+  "compilerOptions": {
+    "types": ["@digdir/designsystemet-web"]
+  }
+}
+```
+
+### Warnings:
+
+`@digdir/designsystemet-web` will warn you about deprecations and missing attributes.
+This can come in handy while developing, but can also easily be hidden, for example in production:
+
+```
+import `@digdir/designsystemet-web`;
+if (typeof window !== 'undefined' && isProduction()) window.dsWarnings = false;
+```
+
+
+
+## `<ds-breadcrumbs>`
+Automatically hides/shows `aria-label` on desktop/mobile and `aria-current="page"` on last link in list. No API.
+
+```html
+<ds-breadcrumbs class="ds-breadcrumbs" aria-label="You are here:">
+  <a href="#none" aria-label="Back to level 3">
+    Level 3
+  </a>
+  <ol>
+    <li><a href="#none">Level 1</a></li>
+    <li><a href="#none">Level 2</a></li>
+    <li><a href="#none">Level 3</a></li>
+  </ol>
+</ds-breadcrumbs>
+```
+
+## `<ds-error-summary>`
+Automatically takes focus when visible and sets `aria-labelledby` to the first child heading. No API.
+
+```html
+<ds-error-summary class="ds-error-summary">
+  <h2>Summary</h2>
+  <ul>
+    <li><a href="#none">Error 1</a></li>
+    <li><a href="#none">Error 2</a></li>
+    <li><a href="#none">Error 3</a></li>
+  </ul>
+</ds-error-summary>
+```
+
+## `<ds-field>`
+Connects inputs, labels and error messages.
+
+```html
+<ds-field class="ds-field">
+  <label>Label</label>
+  <input type="text" placeholder="Placeholder" class="ds-input" />
+  <div class="ds-validation-message" data-field="validation">
+    This is a validation message.
+  </div>
+</ds-field>
+```
+
+### Counter
+You can add a counter to inputs and textareas by adding the `data-field="counter"` attribute to a `<p>` element inside a `ds-field`.
+
+```html
+<ds-field class="ds-field">
+  <label>Label</label>
+  <textarea class="ds-input"></textarea>
+  <p data-field="counter" data-limit="20" data-over="%d tegn for mye" data-under="%d tegn igjen"></p>
+</ds-field>
+```
+
+| attribute  | type   | default               | required |
+|------------|--------|-----------------------|----------|
+| data-limit | number | undefined             | true     |
+| data-over  | string | %d tegn for mye       | false    |
+| data-under | string | %d tegn igjen         | false    |
+
+## `<ds-pagination>`
+Implements pagination, fills buttons with text.
+You can use both `<a>` and `<button>` elements inside the pagination.
+
+If you don't pass any attributes you can implement your own logic for current page and total pages.
+
+```html
+<ds-pagination class="ds-pagination" aria-label="Bla i sider:" data-href="?page=%d" data-current="2" data-total="100">
+  <ol>
+    <li><a>1</a></li>
+    <li><a>2</a></li>
+    <li><a>3</a></li>
+    <li><a>4</a></li>
+  </ol>
+</ds-pagination>
+```
+
+## `<ds-suggestion>`
+Extends `u-combobox` from u-elements. See documentation for [u-combobox](https://u-elements.github.io/u-elements/elements/u-combobox).
+
+```html
+<ds-field class="ds-field">
+  <label>Label</label>
+  <ds-suggestion class="ds-suggestion">
+    <input type="search" class="ds-input" />
+    <del aria-label="Fjern innhold"></del>
+    <u-datalist>
+      <u-option value="option-1">Option 1</u-option>
+      <u-option value="option-2">Option 2</u-option>
+      <u-option value="option-3">Option 3</u-option>
+    </u-datalist>
+  </ds-suggestion>
+</ds-field>
+```
+
+
+## `<ds-tabs>`
+Extends `u-tabs` from u-elements. See documentation for [u-tabs](https://u-elements.github.io/u-elements/elements/u-tabs).
+
+```html
+<ds-tabs class="ds-tabs">
+  <ds-tablist>
+    <ds-tab>Tab 1</ds-tab>
+    <ds-tab>Tab 2</ds-tab>
+    <ds-tab>Tab 3</ds-tab>
+  </ds-tablist>
+  <ds-tabpanel>Panel 1</ds-tabpanel>
+  <ds-tabpanel>Panel 2</ds-tabpanel>
+  <ds-tabpanel>Panel 3</ds-tabpanel>
+</ds-tabs>
+```
+
+## `data-toggle-group`
+This is implemented differently from `ToggleGroup` in the react package.
+
+An observer will look for `[data-toggle-group]` and add proper arrow navigation plus Enter-key support.
+
+```html
+<fieldset class="ds-toggle-group" data-toggle-group="Text alignment" data-variant="secondary">
+  <label>
+    <input type="radio" name="alignment-two" value="left" checked />
+    Left aligned
+  </label>
+  <label>
+    <input type="radio" name="alignment-two" value="center" />
+    Center aligned
+  </label>
+  <label>
+    <input type="radio" name="alignment-two" value="right" />
+    Right aligned
+  </label>
+</fieldset>
+```
+
+## `data-tooltip`
+Using a single element for rendering next to elements with `data-tooltip` attribute.
+Also automatically sets `aria-label` or `aria-description` as needed.
+
+```html
+<button data-placement="left" data-tooltip="left" class="ds-button">left</button>
+```
+## `data-clickdelegatefor`
+Used for delegating click event. For example, you can use this to delegate click events from a parent element to child elements that are added dynamically.
+
+```html
+<div class="ds-card" data-clickdelegatefor="target">
+  <a id="target" href="https://example.com" rel="noopener">Go to example</a>
+  <span>Clicking this card will open example in a new tab</span>
+</div>
+```
+
+## `readonly`
+Used for fixing `readonly` support on `select` and `input` elements. Add `aria-readonly="true"` to make the element behave as readonly, which means that it will not be editable by the user or call any change events.
+
+```html
+<select aria-readonly="true">
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+  <option value="3">Option 3</option>
+</select>
+```
+
+
+## Polyfills
+
+### invokers-polyfill
+We automatically attach [invokers-polyfill](https://www.npmjs.com/package/invokers-polyfill/v/0.5.2), which means that you get support for `command` and `commandfor`.
+
+### `<dialog>`
+Use the native `<dialog>` element. We polyfill support for [`closedby="any"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy#any). 
+
+```html
+<dialog class="ds-dialog" closedby="any" id="my-dialog">
+my dialog
+</dialog>
+```
+
+#### open & close
+
+Use invokers  `command` and `commandfor`, to open and close dialog.
+```html
+<button class="ds-button" type="button" command="show-modal" commandfor="my-dialog">
+  Open dialog
+</button>
+<dialog id="my-dialog" class="ds-dialog">
+  <button class="ds-button" command="close" commandfor="my-dialog">Close</button>
+</dialog>
+```
+
+### `details` and `summary`
+Use native elements. We polyfill a bug in Firefox when combined with Android Talkback screen reader to announce state and role properly.
+
+```html
+<details class="ds-details">
+  <summary>More info</summary>
+  <div>Lorem ipsum dolor sit amet.</div>
+</details>
+```
+
+
+### `popover`
+We use native popover functionality, but we attach an event listener that fixes placement of designsystem components.
+
+```html
+<button class="ds-button" popovertarget="popover">Open popover</button>
+<div class="ds-popover" popover id="popover" data-placement="left">
+  This is some popover content. It can be very long, but it will wrap and
+  stay within the viewport.
+</div>
+```
+
+| attribute     | type   | default    | required |
+|---------------|--------|------------|----------|
+| data-placement | string | top        | false    |
+| data-overscroll | 'contain' | undefined | undefined       | false    |
+| data-autoplacement | boolean | true          | false    |
+
+**If you don't use the class `ds-popover` you need to add the CSS property `--_ds-floating` to the popover element.** This can be `top`, `bottom`, `left` or `right`.
+
+

package/dist/cjs/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));exports.__toESM=s;

package/dist/cjs/breadcrumbs/breadcrumbs.cjs

@@ -0,0 +1,2 @@
+const e=require(`../utils/utils.cjs`),t=`aria-label`;var n=class extends e.DSElement{_items;_label=null;_render;_unresize;_unmutate;static get observedAttributes(){return[t]}connectedCallback(){this._label=e.attrOrCSS(this,t),this._items=this.getElementsByTagName(`a`),this._render=e.debounce(()=>r(this),100),this._unresize=e.on(window,`resize`,this._render),this._unmutate=e.onMutation(this,this._render,{childList:!0,subtree:!0})}attributeChangedCallback(e,t,n){n&&(this._label=n),this._render?.()}disconnectedCallback(){this._unresize?.(),this._unmutate?.(),this._unresize=this._unmutate=this._render=this._items=void 0}};const r=n=>{let r=n._items?.[n._items.length-1],i=r?.parentElement===n?null:r,a=!i?.offsetHeight;e.attr(n,`role`,a?null:`navigation`),e.attr(n,t,a?null:n._label);for(let t of n._items||[])e.attr(t,`aria-current`,t===i?`page`:null)};e.customElements.define(`ds-breadcrumbs`,n),exports.DSBreadcrumbsElement=n;
+//# sourceMappingURL=breadcrumbs.cjs.map

package/dist/cjs/breadcrumbs/breadcrumbs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.cjs","names":["DSElement","attrOrCSS","debounce","on","onMutation","customElements"],"sources":["../../../src/breadcrumbs/breadcrumbs.ts"],"sourcesContent":["import {\n  attr,\n  attrOrCSS,\n  customElements,\n  DSElement,\n  debounce,\n  on,\n  onMutation,\n} from '../utils/utils';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ds-breadcrumbs': DSBreadcrumbsElement;\n  }\n}\n\nconst ATTR_LABEL = 'aria-label';\n\nexport class DSBreadcrumbsElement extends DSElement {\n  _items?: HTMLCollectionOf<HTMLAnchorElement>; // Using underscore instead of private fields for backwards compatibility\n  _label: string | null = null;\n  _render?: () => void;\n  _unresize?: () => void;\n  _unmutate?: () => void;\n\n  static get observedAttributes() {\n    return [ATTR_LABEL]; // Using ES2015 syntax for backwards compatibility\n  }\n  connectedCallback() {\n    this._label = attrOrCSS(this, ATTR_LABEL); // Cache label for when list is hidden to prevent expensive DOM reads during resize\n    this._items = this.getElementsByTagName('a'); // Speed up by caching HTMLCollection\n    this._render = debounce(() => render(this), 100); // Debounce render to prevent multiple calls during resize and mutation observer calls\n    this._unresize = on(window, 'resize', this._render);\n    this._unmutate = onMutation(this, this._render, {\n      childList: true,\n      subtree: true,\n    });\n  }\n  attributeChangedCallback(_name: string, _prev?: string, next?: string) {\n    if (next) this._label = next; // Update cacheed label if aria-label attribute changes\n    this._render?.();\n  }\n  disconnectedCallback() {\n    this._unresize?.();\n    this._unmutate?.();\n    this._unresize = this._unmutate = this._render = this._items = undefined;\n  }\n}\n\nconst render = (self: DSBreadcrumbsElement) => {\n  const lastItem = self._items?.[self._items.length - 1];\n  const lastItemInList = lastItem?.parentElement === self ? null : lastItem;\n  const isListHidden = !lastItemInList?.offsetHeight;\n\n  attr(self, 'role', isListHidden ? null : 'navigation');\n  attr(self, ATTR_LABEL, isListHidden ? null : self._label); // Remove aria-label if list is hidden to prevent screen readers from announcing as breadcrumbs\n\n  for (const item of self._items || [])\n    attr(item, 'aria-current', item === lastItemInList ? 'page' : null);\n};\n\ncustomElements.define('ds-breadcrumbs', DSBreadcrumbsElement);\n"],"mappings":"sCAgBM,EAAa,aAEnB,IAAa,EAAb,cAA0CA,EAAAA,SAAU,CAClD,OACA,OAAwB,KACxB,QACA,UACA,UAEA,WAAW,oBAAqB,CAC9B,MAAO,CAAC,EAAW,CAErB,mBAAoB,CAClB,KAAK,OAASC,EAAAA,UAAU,KAAM,EAAW,CACzC,KAAK,OAAS,KAAK,qBAAqB,IAAI,CAC5C,KAAK,QAAUC,EAAAA,aAAe,EAAO,KAAK,CAAE,IAAI,CAChD,KAAK,UAAYC,EAAAA,GAAG,OAAQ,SAAU,KAAK,QAAQ,CACnD,KAAK,UAAYC,EAAAA,WAAW,KAAM,KAAK,QAAS,CAC9C,UAAW,GACX,QAAS,GACV,CAAC,CAEJ,yBAAyB,EAAe,EAAgB,EAAe,CACjE,IAAM,KAAK,OAAS,GACxB,KAAK,WAAW,CAElB,sBAAuB,CACrB,KAAK,aAAa,CAClB,KAAK,aAAa,CAClB,KAAK,UAAY,KAAK,UAAY,KAAK,QAAU,KAAK,OAAS,IAAA,KAInE,MAAM,EAAU,GAA+B,CAC7C,IAAM,EAAW,EAAK,SAAS,EAAK,OAAO,OAAS,GAC9C,EAAiB,GAAU,gBAAkB,EAAO,KAAO,EAC3D,EAAe,CAAC,GAAgB,aAEtC,EAAA,KAAK,EAAM,OAAQ,EAAe,KAAO,aAAa,CACtD,EAAA,KAAK,EAAM,EAAY,EAAe,KAAO,EAAK,OAAO,CAEzD,IAAK,IAAM,KAAQ,EAAK,QAAU,EAAE,CAClC,EAAA,KAAK,EAAM,eAAgB,IAAS,EAAiB,OAAS,KAAK,EAGvEC,EAAAA,eAAe,OAAO,iBAAkB,EAAqB"}

package/dist/cjs/clickdelegatefor/clickdelegatefor.cjs

@@ -0,0 +1,2 @@
+const e=require(`../utils/utils.cjs`),t=`:click-delegate-hover`,n=`data-clickdelegatefor`,r=`[${n}]`,i=e=>{let t=e.button===1||e.metaKey||e.ctrlKey,n=e.isTrusted&&e.button<2&&s(e);if(!(!n||n.contains(e.target))){if(t&&n instanceof HTMLAnchorElement)return window.open(n.href,void 0,n.rel);e.stopImmediatePropagation(),n.click()}};let a;const o=e=>{let n=s(e);a!==n&&(a&&a.classList.remove(t),n&&n.classList.add(t),a=n)},s=({target:e})=>{let t=(e instanceof Element?e.closest(r):null)?.getAttribute(n),i=t&&document.getElementById(t)||void 0,a=i&&e.closest(`a,button,label,input,select,textarea,details,dialog,[role="button"],[popover],[contenteditable]`);return(!a||a===i)&&!i?.disabled?i:void 0};e.onHotReload(`clickdelegatefor`,()=>[e.on(window,`click auxclick`,i,!0),e.on(document,`mouseover`,o,e.QUICK_EVENT)]);
+//# sourceMappingURL=clickdelegatefor.cjs.map

package/dist/cjs/clickdelegatefor/clickdelegatefor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickdelegatefor.cjs","names":["onHotReload","on","QUICK_EVENT"],"sources":["../../../src/clickdelegatefor/clickdelegatefor.ts"],"sourcesContent":["// Adding support for click deletagtion, following\n// https://open-ui.org/components/link-area-delegation-explainer/\n// and https://github.com/openui/open-ui/issues/1104#issuecomment-3151387080\nimport { on, onHotReload, QUICK_EVENT } from '../utils/utils';\n\nconst CLASS_HOVER = ':click-delegate-hover';\nconst ATTR_CLICKDELEGATEFOR = 'data-clickdelegatefor';\nconst SELECTOR_CLICKDELEGATEFOR = `[${ATTR_CLICKDELEGATEFOR}]`;\nconst SELECTOR_SKIP =\n  'a,button,label,input,select,textarea,details,dialog,[role=\"button\"],[popover],[contenteditable]';\n\nconst handleClickDelegateFor = (event: MouseEvent) => {\n  const isNewTab = event.button === 1 || event.metaKey || event.ctrlKey; // Middle click or cmd/ctrl + click should open in new tab\n  const isUserLeftOrMiddleClick = event.isTrusted && event.button < 2; // Only accept left or middle clicks, and ignore the programatic .click() we're about to trigger\n  const delegateTarget = isUserLeftOrMiddleClick && getDelegateTarget(event);\n\n  if (!delegateTarget || delegateTarget.contains(event.target as Node)) return; // Only proxy event if delegated target isn't part of the original target\n  if (isNewTab && delegateTarget instanceof HTMLAnchorElement)\n    return window.open(delegateTarget.href, undefined, delegateTarget.rel); // If middle click or cmd/ctrl click on link, open in new tab\n  event.stopImmediatePropagation(); // We'll trigger a new click event anyway, so prevent actions on this one\n  delegateTarget.click(); // Forward click to the clickable element\n};\n\nlet HOVER: Element | undefined;\nconst handleMouseOver = (event: Event) => {\n  const delegateTarget = getDelegateTarget(event);\n  if (HOVER === delegateTarget) return; // No change\n  if (HOVER) HOVER.classList.remove(CLASS_HOVER);\n  if (delegateTarget) delegateTarget.classList.add(CLASS_HOVER);\n  HOVER = delegateTarget;\n};\n\nconst getDelegateTarget = ({ target: el }: Event) => {\n  const scope =\n    el instanceof Element ? el.closest(SELECTOR_CLICKDELEGATEFOR) : null;\n  const id = scope?.getAttribute(ATTR_CLICKDELEGATEFOR);\n  const target = (id && document.getElementById(id)) || undefined;\n  const skip = target && (el as Element).closest(SELECTOR_SKIP); // Ignore if interactive\n\n  return (!skip || skip === target) && !(target as HTMLInputElement)?.disabled\n    ? target\n    : undefined; // Skip disabled inputs\n};\n\nonHotReload('clickdelegatefor', () => [\n  on(window, 'click auxclick', handleClickDelegateFor as EventListener, true), // Use capture to ensure we run before other click listeners\n  on(document, 'mouseover', handleMouseOver, QUICK_EVENT), // Use passive for better performance\n]);\n"],"mappings":"sCAKM,EAAc,wBACd,EAAwB,wBACxB,EAA4B,IAAI,EAAsB,GAItD,EAA0B,GAAsB,CACpD,IAAM,EAAW,EAAM,SAAW,GAAK,EAAM,SAAW,EAAM,QAExD,EAD0B,EAAM,WAAa,EAAM,OAAS,GAChB,EAAkB,EAAM,CAEtE,MAAC,GAAkB,EAAe,SAAS,EAAM,OAAe,EACpE,IAAI,GAAY,aAA0B,kBACxC,OAAO,OAAO,KAAK,EAAe,KAAM,IAAA,GAAW,EAAe,IAAI,CACxE,EAAM,0BAA0B,CAChC,EAAe,OAAO,GAGxB,IAAI,EACJ,MAAM,EAAmB,GAAiB,CACxC,IAAM,EAAiB,EAAkB,EAAM,CAC3C,IAAU,IACV,GAAO,EAAM,UAAU,OAAO,EAAY,CAC1C,GAAgB,EAAe,UAAU,IAAI,EAAY,CAC7D,EAAQ,IAGJ,GAAqB,CAAE,OAAQ,KAAgB,CAGnD,IAAM,GADJ,aAAc,QAAU,EAAG,QAAQ,EAA0B,CAAG,OAChD,aAAa,EAAsB,CAC/C,EAAU,GAAM,SAAS,eAAe,EAAG,EAAK,IAAA,GAChD,EAAO,GAAW,EAAe,QAAQ,kGAAc,CAE7D,OAAQ,CAAC,GAAQ,IAAS,IAAW,CAAE,GAA6B,SAChE,EACA,IAAA,IAGNA,EAAAA,YAAY,uBAA0B,CACpCC,EAAAA,GAAG,OAAQ,iBAAkB,EAAyC,GAAK,CAC3EA,EAAAA,GAAG,SAAU,YAAa,EAAiBC,EAAAA,YAAY,CACxD,CAAC"}

package/dist/cjs/dialog/dialog.cjs

@@ -0,0 +1,2 @@
+const e=require(`../utils/utils.cjs`);let t=!1;const n=({type:n,target:r,clientX:i=0,clientY:a=0})=>{if(n===`pointerdown`){let e=r?.closest?.(`dialog`)?.getBoundingClientRect();t=!!(e&&e.top<=a&&a<=e.bottom&&e.left<=i&&i<=e.right)}else{let n=r instanceof HTMLDialogElement&&!t&&e.attr(r,`closedby`)===`any`;t=!1,n&&requestAnimationFrame(()=>r.open&&r.close())}},r=()=>{for(let t of document.querySelectorAll(`button[command="show-modal"]`))e.attr(t,`aria-haspopup`,`dialog`)},i=({command:e,target:t})=>e===`--show-non-modal`&&t instanceof HTMLDialogElement&&t.show();e.onHotReload(`dialog`,()=>[e.on(document,`command`,i,e.QUICK_EVENT),e.on(document,`pointerdown pointerup`,n,e.QUICK_EVENT),e.onMutation(document,r,{attributeFilter:[`command`],attributes:!0,childList:!0,subtree:!0})]);
+//# sourceMappingURL=dialog.cjs.map

package/dist/cjs/dialog/dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.cjs","names":["attr","onHotReload","on","QUICK_EVENT","onMutation"],"sources":["../../../src/dialog/dialog.ts"],"sourcesContent":["import { attr, on, onHotReload, onMutation, QUICK_EVENT } from '../utils/utils';\n\n// Polyfill closedby functionaliy in Safari\n// Also in Safari 26.2 where `closedBy` property is supported natively,\n// but no corresponding functionality/behavior is implemented.\nlet DOWN_INSIDE = false; // Prevent close if selecting text inside dialog\nconst handleClosedbyAny = ({\n  type,\n  target: el,\n  clientX: x = 0,\n  clientY: y = 0,\n}: Partial<MouseEvent>) => {\n  if (type === 'pointerdown') {\n    const r = (el as Element)?.closest?.('dialog')?.getBoundingClientRect();\n    const isInside =\n      r && r.top <= y && y <= r.bottom && r.left <= x && x <= r.right;\n\n    DOWN_INSIDE = !!isInside;\n  } else {\n    const isDialog = el instanceof HTMLDialogElement;\n    const isClose = isDialog && !DOWN_INSIDE && attr(el, 'closedby') === 'any';\n\n    DOWN_INSIDE = false; // Reset on every pointerup\n    if (isClose) requestAnimationFrame(() => el.open && el.close()); // Close if browser did not do it\n  }\n};\n\n// Ensure buttons that trigger a modeal dialog has aria-haspopup=\"dialog\" for better screen reader experience\nconst handleAriaAttributes = () => {\n  for (const btn of document.querySelectorAll('button[command=\"show-modal\"]'))\n    attr(btn, 'aria-haspopup', 'dialog');\n};\n\nconst handleCommand = ({ command, target }: Event & { command?: string }) =>\n  command === '--show-non-modal' &&\n  target instanceof HTMLDialogElement &&\n  target.show();\n\nonHotReload('dialog', () => [\n  on(document, 'command', handleCommand, QUICK_EVENT),\n  on(document, 'pointerdown pointerup', handleClosedbyAny, QUICK_EVENT),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: ['command'],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"sCAKA,IAAI,EAAc,GAClB,MAAM,GAAqB,CACzB,OACA,OAAQ,EACR,QAAS,EAAI,EACb,QAAS,EAAI,KACY,CACzB,GAAI,IAAS,cAAe,CAC1B,IAAM,EAAK,GAAgB,UAAU,SAAS,EAAE,uBAAuB,CAIvE,EAAc,CAAC,EAFb,GAAK,EAAE,KAAO,GAAK,GAAK,EAAE,QAAU,EAAE,MAAQ,GAAK,GAAK,EAAE,WAGvD,CAEL,IAAM,EADW,aAAc,mBACH,CAAC,GAAeA,EAAAA,KAAK,EAAI,WAAW,GAAK,MAErE,EAAc,GACV,GAAS,0BAA4B,EAAG,MAAQ,EAAG,OAAO,CAAC,GAK7D,MAA6B,CACjC,IAAK,IAAM,KAAO,SAAS,iBAAiB,+BAA+B,CACzE,EAAA,KAAK,EAAK,gBAAiB,SAAS,EAGlC,GAAiB,CAAE,UAAS,YAChC,IAAY,oBACZ,aAAkB,mBAClB,EAAO,MAAM,CAEfC,EAAAA,YAAY,aAAgB,CAC1BC,EAAAA,GAAG,SAAU,UAAW,EAAeC,EAAAA,YAAY,CACnDD,EAAAA,GAAG,SAAU,wBAAyB,EAAmBC,EAAAA,YAAY,CACrEC,EAAAA,WAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,UAAU,CAC5B,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/cjs/error-summary/error-summary.cjs

@@ -0,0 +1,2 @@
+const e=require(`../utils/utils.cjs`);var t=class extends e.DSElement{connectedCallback(){e.on(this,`animationend`,this,e.QUICK_EVENT),requestAnimationFrame(()=>this.handleEvent({target:this}))}handleEvent({target:t}){if(t!==this)return;let n=this.querySelector(`h2,h3,h4,h5,h6`);n&&e.attr(this,`aria-labelledby`,e.useId(n)),e.attr(this,`tabindex`,`-1`),this.focus()}disconnectedCallback(){e.off(this,`animationend`,this,e.QUICK_EVENT)}};e.customElements.define(`ds-error-summary`,t),exports.DSErrorSummaryElement=t;
+//# sourceMappingURL=error-summary.cjs.map

package/dist/cjs/error-summary/error-summary.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-summary.cjs","names":["DSElement","QUICK_EVENT","useId","customElements"],"sources":["../../../src/error-summary/error-summary.ts"],"sourcesContent":["import {\n  attr,\n  customElements,\n  DSElement,\n  off,\n  on,\n  QUICK_EVENT,\n  useId,\n} from '../utils/utils';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ds-error-summary': DSErrorSummaryElement;\n  }\n}\n\nexport class DSErrorSummaryElement extends DSElement {\n  connectedCallback() {\n    on(this, 'animationend', this, QUICK_EVENT); // Using animationend to detect when element is visible\n    requestAnimationFrame(() => this.handleEvent({ target: this })); // Initial setup when children has rendered\n  }\n  handleEvent({ target }: Partial<Event>) {\n    if (target !== this) return; // Ignore if animation event was triggered by child\n    const heading = this.querySelector('h2,h3,h4,h5,h6');\n    if (heading) attr(this, 'aria-labelledby', useId(heading));\n    attr(this, 'tabindex', '-1');\n    this.focus();\n  }\n  disconnectedCallback() {\n    off(this, 'animationend', this, QUICK_EVENT);\n  }\n}\n\ncustomElements.define('ds-error-summary', DSErrorSummaryElement);\n"],"mappings":"sCAgBA,IAAa,EAAb,cAA2CA,EAAAA,SAAU,CACnD,mBAAoB,CAClB,EAAA,GAAG,KAAM,eAAgB,KAAMC,EAAAA,YAAY,CAC3C,0BAA4B,KAAK,YAAY,CAAE,OAAQ,KAAM,CAAC,CAAC,CAEjE,YAAY,CAAE,UAA0B,CACtC,GAAI,IAAW,KAAM,OACrB,IAAM,EAAU,KAAK,cAAc,iBAAiB,CAChD,GAAS,EAAA,KAAK,KAAM,kBAAmBC,EAAAA,MAAM,EAAQ,CAAC,CAC1D,EAAA,KAAK,KAAM,WAAY,KAAK,CAC5B,KAAK,OAAO,CAEd,sBAAuB,CACrB,EAAA,IAAI,KAAM,eAAgB,KAAMD,EAAAA,YAAY,GAIhDE,EAAAA,eAAe,OAAO,mBAAoB,EAAsB"}

package/dist/cjs/field/field.cjs

@@ -0,0 +1,2 @@
+const e=require(`../utils/utils.cjs`),t=`data-indeterminate`,n=new Set,r=new WeakMap,i=e.isBrowser()?document.getElementsByTagName(`fieldset`):[],a=e.isBrowser()&&CSS.supports(`field-sizing`,`content`),o=e.isWindows()?800:200,s=new WeakSet,c=e.debounce(()=>{for(let t of i)e.attr(t,`aria-labelledby`,`${e.useId(t.querySelector(`legend`))} ${e.useId(t.querySelector(`:scope > :is([data-field="description"],legend + p)`))}`.trim()||null);for(let i of n){let n=[],a=[],o,c,l=!1,d=!1;for(let t of i.getElementsByTagName(`*`))if(t instanceof HTMLLabelElement&&a.push(t),!t.hidden)if(p(t))o?e.warn(`Fields should only have one input element. Use <fieldset> to group multiple fields:`,i):o=t;else{let e=t.getAttribute(`data-field`);e===`counter`&&(c=t),e===`validation`?(n.unshift(t),l=!0,d||=f(t)):e&&n.push(t)}if(!o)e.warn(`Field is missing input element:`,i);else{c&&r.set(o,c);for(let t of a)e.attr(t,`for`,e.useId(o));let p=o.type===`radio`||o.type===`checkbox`,m=i.closest(`fieldset`)?.querySelector(`:scope > [data-field="validation"]`);m&&!m?.hidden&&(l=!0,d||=f(m),n.unshift(m));let h=e.attr(o,t);h&&(o.indeterminate=h===`true`),e.attr(i,`data-clickdelegatefor`,p?e.useId(o):null),e.attr(o,`aria-describedby`,n.map(e.useId).join(` `)||null),(l||s.has(o))&&(s[l?`add`:`delete`](o),e.attr(o,`aria-invalid`,`${d}`)),u(o)}}},0),l=e.isBrowser()?e.tag(`div`,{"aria-live":`polite`,style:`position:fixed;white-space:nowrap;clip:rect(0 0 0 0)`}):null,u=t=>{let n=t.target||t,i=r.get(n);if(i?.isConnected){let r=(Number(e.attr(i,`data-limit`))||0)-n.value.length,a=r<0?`over`:`under`,o=e.attrOrCSS(i,`data-${a}`)?.replace(`%d`,`${Math.abs(r)}`);e.attr(i,`data-label`,o),e.attr(i,`data-state`,a),e.attr(i,`data-color`,r<0?`danger`:null),t.type===`input`&&l&&o&&(l?.isConnected||document.body.appendChild(l),d(n,o))}!a&&n instanceof HTMLTextAreaElement&&(n.style.setProperty(`--_ds-field-sizing`,`auto`),n.style.setProperty(`--_ds-field-sizing`,`${n.scrollHeight}px`))},d=e.debounce((t,n)=>{let r=document.activeElement===t;l?.isConnected&&r&&e.setTextWithoutMutation(l,n)},o),f=e=>e.getAttribute(`data-color`)!==`success`,p=e=>e instanceof HTMLElement&&`validity`in e&&!(e instanceof HTMLButtonElement)&&e.type!==`hidden`;var m=class extends e.DSElement{connectedCallback(){n.add(this),c()}disconnectedCallback(){n.delete(this)}};e.customElements.define(`ds-field`,m),e.onHotReload(`field`,()=>[e.on(document,`input`,u,e.QUICK_EVENT),e.onMutation(document,c,{attributeFilter:[`value`,`hidden`,`data-field`,t],attributes:!0,childList:!0,subtree:!0})]),exports.DSFieldElement=m;
+//# sourceMappingURL=field.cjs.map

package/dist/cjs/field/field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.cjs","names":["isBrowser","isWindows","debounce","useId","attr","tag","attrOrCSS","DSElement","customElements","onHotReload","on","QUICK_EVENT","onMutation"],"sources":["../../../src/field/field.ts"],"sourcesContent":["import {\n  attr,\n  attrOrCSS,\n  customElements,\n  DSElement,\n  debounce,\n  isBrowser,\n  isWindows,\n  on,\n  onHotReload,\n  onMutation,\n  QUICK_EVENT,\n  setTextWithoutMutation,\n  tag,\n  useId,\n  warn,\n} from '../utils/utils';\n\n// TODO: Document that Validation must be hidden with \"hidden\" attribute (or completely removed from DOM), not display: none\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ds-field': DSFieldElement;\n  }\n}\n\nconst INDETERMINATE = 'data-indeterminate';\nconst FIELDS = new Set<DSFieldElement>(); // Set of Field\nconst COUNTS = new WeakMap<HTMLInputElement, Element>(); // Using WeakMap so removed inputs/counts does not cause memory leaks\nconst FIELDSETS = isBrowser() ? document.getElementsByTagName('fieldset') : [];\nconst HAS_FIELD_SIZING = isBrowser() && CSS.supports('field-sizing', 'content');\nconst COUNTER_DEBOUNCE = isWindows() ? 800 : 200; // Longer debounce on Windows due to NVDA performance\nconst HAS_VALIDATION = new WeakSet<HTMLInputElement>(); // Used to store inputs that have/had validation elements to manage aria-invalid\n\nconst handleMutations = debounce(() => {\n  for (const el of FIELDSETS) {\n    const labelledby = `${useId(el.querySelector('legend'))} ${useId(el.querySelector(':scope > :is([data-field=\"description\"],legend + p)'))}`;\n    attr(el, 'aria-labelledby', labelledby.trim() || null);\n  }\n  for (const field of FIELDS) {\n    const descs: Element[] = [];\n    const labels: HTMLLabelElement[] = [];\n    let input: HTMLInputElement | undefined;\n    let counter: Element | undefined;\n    let hasValidation = false;\n    let invalid = false;\n\n    for (const el of field.getElementsByTagName('*')) {\n      if (el instanceof HTMLLabelElement) labels.push(el);\n      if ((el as HTMLElement).hidden) continue; // Skip hidden elements except labels\n      if (isInputLike(el)) {\n        if (input)\n          warn(\n            `Fields should only have one input element. Use <fieldset> to group multiple fields:`,\n            field,\n          );\n        else input = el; // Only register if visible input\n      } else {\n        const type = el.getAttribute('data-field'); // Using getAttribute instead of attr for best performance\n        if (type === 'counter') counter = el;\n        if (type === 'validation') {\n          descs.unshift(el);\n          hasValidation = true;\n          invalid = invalid || isInvalid(el);\n        } else if (type) descs.push(el); // Adds both counter and descriptions\n      }\n    }\n\n    if (!input) warn(`Field is missing input element:`, field);\n    else {\n      if (counter) COUNTS.set(input, counter);\n      for (const label of labels) attr(label, 'for', useId(input));\n\n      const isBoolish = input.type === 'radio' || input.type === 'checkbox';\n      const fieldsetValidation = field\n        .closest('fieldset')\n        ?.querySelector<HTMLElement>(':scope > [data-field=\"validation\"]');\n      if (fieldsetValidation && !fieldsetValidation?.hidden) {\n        hasValidation = true;\n        invalid = invalid || isInvalid(fieldsetValidation);\n        descs.unshift(fieldsetValidation);\n      }\n\n      const indeterminate = attr(input, INDETERMINATE);\n      if (indeterminate) input.indeterminate = indeterminate === 'true';\n\n      attr(field, 'data-clickdelegatefor', isBoolish ? useId(input) : null); // Expand click area to ds-field if radio/checkbox\n      attr(input, 'aria-describedby', descs.map(useId).join(' ') || null);\n      if (hasValidation || HAS_VALIDATION.has(input)) {\n        HAS_VALIDATION[hasValidation ? 'add' : 'delete'](input); // Track if field has validation elements to avoid managing aria-invalid on every mutation\n        attr(input, 'aria-invalid', `${invalid}`); // Only manage aria-invalid when field has validation elements\n      }\n      updateField(input); // Update counter and textarea sizing\n    }\n  }\n}, 0); // Debounce to merge multiple mutations\n\nconst SR_ONLY = 'position:fixed;white-space:nowrap;clip:rect(0 0 0 0)';\nconst SR_LIVE = isBrowser()\n  ? tag('div', { 'aria-live': 'polite', style: SR_ONLY })\n  : null;\n\nconst updateField = (e: Event | Element) => {\n  const input = ((e as Event).target || e) as HTMLInputElement;\n  const counter = COUNTS.get(input);\n\n  if (counter?.isConnected) {\n    const limit = Number(attr(counter, 'data-limit')) || 0;\n    const count = limit - input.value.length;\n    const state = count < 0 ? 'over' : 'under';\n    const label = attrOrCSS(counter, `data-${state}`)?.replace(\n      '%d',\n      `${Math.abs(count)}`,\n    );\n\n    attr(counter, 'data-label', label); // Using attribute to prevent hydation errors, not using aria-label to make axe tests happy\n    attr(counter, 'data-state', state);\n    attr(counter, 'data-color', count < 0 ? 'danger' : null);\n\n    // Only update live region when user is actually typing\n    if ((e as Event).type === 'input' && SR_LIVE && label) {\n      if (!SR_LIVE?.isConnected) document.body.appendChild(SR_LIVE); // Prepare live region\n      debouncedCounterLiveRegion(input, label); // Debounce live region to avoid NVDA interupting announcing typed text\n    }\n  }\n  if (!HAS_FIELD_SIZING && input instanceof HTMLTextAreaElement) {\n    input.style.setProperty('--_ds-field-sizing', 'auto');\n    input.style.setProperty('--_ds-field-sizing', `${input.scrollHeight}px`);\n  }\n};\n\nconst debouncedCounterLiveRegion = debounce((input: Element, text: string) => {\n  const hasFocus = document.activeElement === input; // Only announce if input is still focused\n  if (SR_LIVE?.isConnected && hasFocus) setTextWithoutMutation(SR_LIVE, text);\n}, COUNTER_DEBOUNCE);\n\nconst isInvalid = (el: Element) => el.getAttribute('data-color') !== 'success';\nconst isInputLike = (el: unknown): el is HTMLInputElement =>\n  el instanceof HTMLElement &&\n  'validity' in el && // Adds support for custom elements implemeted with attachInternals()\n  !(el instanceof HTMLButtonElement) && // But skip <button> elements\n  (el as HTMLInputElement).type !== 'hidden'; // And skip input type=\"hidden\"\n\n// Custom element is used to performantly keep track of fields on the page\nexport class DSFieldElement extends DSElement {\n  connectedCallback() {\n    FIELDS.add(this); // Register field\n    handleMutations(); // Initial setup\n  }\n  disconnectedCallback() {\n    FIELDS.delete(this);\n  }\n}\n\ncustomElements.define('ds-field', DSFieldElement);\n\n// Listen for hidden to detect hidden validations, and listen for value to detect controlled React inputs\nonHotReload('field', () => [\n  on(document, 'input', updateField, QUICK_EVENT),\n  onMutation(document, handleMutations, {\n    attributeFilter: ['value', 'hidden', 'data-field', INDETERMINATE],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -1,37 +1,2 @@
-const require_utils = require('./utils.cjs');
-const require_breadcrumbs = require('./breadcrumbs.cjs');
-require('./clickdelegatefor.cjs');
-require('./details.cjs');
-require('./dialog.cjs');
-const require_error_summary = require('./error-summary.cjs');
-const require_field = require('./field.cjs');
-const require_pagination = require('./pagination.cjs');
-const require_suggestion = require('./suggestion.cjs');
-const require_tabs = require('./tabs.cjs');
-require('./popover.cjs');
-require('./toggle-group.cjs');
-require('./tooltip.cjs');
-
-//#region src/index.ts
-if (require_utils.isBrowser()) import("invokers-polyfill");
-
-//#endregion
-exports.DSBreadcrumbsElement = require_breadcrumbs.DSBreadcrumbsElement;
-exports.DSErrorSummaryElement = require_error_summary.DSErrorSummaryElement;
-exports.DSFieldElement = require_field.DSFieldElement;
-exports.DSPaginationElement = require_pagination.DSPaginationElement;
-exports.DSSuggestionElement = require_suggestion.DSSuggestionElement;
-exports.DSTabElement = require_tabs.DSTabElement;
-exports.DSTabListElement = require_tabs.DSTabListElement;
-exports.DSTabPanelElement = require_tabs.DSTabPanelElement;
-exports.DSTabsElement = require_tabs.DSTabsElement;
-exports.pagination = require_pagination.pagination;
-var _u_elements_u_datalist = require("@u-elements/u-datalist");
-Object.keys(_u_elements_u_datalist).forEach(function (k) {
-  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return _u_elements_u_datalist[k]; }
-  });
-});
-
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./_virtual/_rolldown/runtime.cjs`);const e=require(`./utils/utils.cjs`);require(`./clickdelegatefor/clickdelegatefor.cjs`),require(`./dialog/dialog.cjs`),require(`./popover/popover.cjs`),require(`./readonly/readonly.cjs`),require(`./toggle-group/toggle-group.cjs`);const t=require(`./tooltip/tooltip.cjs`),n=require(`./breadcrumbs/breadcrumbs.cjs`),r=require(`./error-summary/error-summary.cjs`),i=require(`./field/field.cjs`),a=require(`./pagination/pagination.cjs`),o=require(`./suggestion/suggestion.cjs`),s=require(`./tabs/tabs.cjs`);let c=require(`invokers-polyfill/fn`);require(`@u-elements/u-details/polyfill`),e.isBrowser()&&!(0,c.isSupported)()&&(0,c.apply)(),exports.DSBreadcrumbsElement=n.DSBreadcrumbsElement,exports.DSErrorSummaryElement=r.DSErrorSummaryElement,exports.DSFieldElement=i.DSFieldElement,exports.DSPaginationElement=a.DSPaginationElement,exports.DSSuggestionElement=o.DSSuggestionElement,exports.DSTabElement=s.DSTabElement,exports.DSTabListElement=s.DSTabListElement,exports.DSTabPanelElement=s.DSTabPanelElement,exports.DSTabsElement=s.DSTabsElement,exports.pagination=a.pagination,exports.setTooltipElement=t.setTooltipElement;var l=require(`@u-elements/u-datalist`);Object.keys(l).forEach(function(e){e!==`default`&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return l[e]}})});
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["isBrowser"],"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,IAAIA,yBAAW,CAAE,QAAO"}
+{"version":3,"file":"index.cjs","names":["isBrowser"],"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":"srBAmBIA,EAAAA,WAAW,EAAI,EAAA,EAAA,EAAA,cAAc,GAAE,EAAA,EAAA,QAAkB"}

package/dist/cjs/pagination/pagination.cjs

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

package/dist/cjs/pagination/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","names":["DSElement","attr","attrOrCSS","debounce","onMutation","customElements"],"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":"sCAgBM,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,cAAyCA,EAAAA,SAAU,CACjD,UACA,QAEA,WAAW,oBAAqB,CAC9B,MAAO,CAAC,EAAY,EAAc,EAAY,EAAU,CAE1D,mBAAoB,CAElB,IAAM,EAAQC,EAAAA,KAAK,KAAM,EAAW,CAC9B,EAAUA,EAAAA,KAAK,KAAM,EAAa,CACpC,GAAW,CAAC,GAAO,EAAA,KAAK,WAAW,EAAW,gBAAiB,KAAK,CACpE,GAAS,CAAC,GAAS,EAAA,KAAK,WAAW,EAAa,gBAAiB,KAAK,CAE1E,EAAA,KAAK,KAAM,EAAYC,EAAAA,UAAU,KAAM,EAAW,CAAC,CACnD,EAAA,KAAK,KAAM,OAAQ,aAAa,CAChC,KAAK,QAAUC,EAAAA,aAAe,EAAO,KAAK,CAAE,EAAE,CAC9C,KAAK,UAAYC,EAAAA,WAAW,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,OAAOH,EAAAA,KAAK,EAAM,EAAa,CAAC,CAC1C,EAAQ,OAAOA,EAAAA,KAAK,EAAM,EAAW,CAAC,CAG5C,GAAI,GAAW,EAAO,CACpB,IAAM,EAAQ,EAAK,iBAAiB,WAAW,CACzC,EAAO,EAAM,OAAS,EACtB,EAAOA,EAAAA,KAAK,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,EAAA,KAAK,EAAM,eAAgB,EAAM,EAAI,IAAI,QAAU,OAAS,KAAK,CACjE,EAAA,KAAK,EAAM,aAAc,GAAG,GAAQ,WAAW,CAC/C,EAAA,KAAK,EAAM,OAAQ,EAAO,KAAO,OAAO,CACxC,EAAA,KAAK,EAAM,WAAY,EAAO,KAAO,KAAK,CACtC,aAAgB,mBAAmB,EAAA,KAAK,EAAM,QAAS,GAAG,IAAO,CACjE,GAAQ,aAAgB,mBAC1B,EAAA,KAAK,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,GAGTI,EAAAA,eAAe,OAAO,gBAAiB,EAAoB"}

package/dist/cjs/popover/popover.cjs

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

package/dist/cjs/popover/popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.cjs","names":["attr","onHotReload","on","QUICK_EVENT"],"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":"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"}

package/dist/cjs/readonly/readonly.cjs

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

package/dist/cjs/readonly/readonly.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"readonly.cjs","names":["attr","onHotReload","on"],"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":"sCAEM,EAAc,IACjB,aAAc,mBAAqB,aAAc,oBACjD,EAAG,aAAa,WAAW,EAAIA,EAAAA,KAAK,EAAI,gBAAgB,GAAK,QAI1D,EAAiB,GAAsC,CAC3D,GAAI,EAAE,MAAQ,OAAS,EAAW,EAAE,OAAO,GACzC,EAAE,gBAAgB,CACd,EAAE,KAAK,WAAW,QAAQ,EAAIA,EAAAA,KAAK,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,EAGtBC,EAAAA,YAAY,eAAkB,CAC5BC,EAAAA,GAAG,SAAU,UAAW,EAAc,CACtCA,EAAAA,GAAG,SAAU,QAAS,EAAY,CAClCA,EAAAA,GAAG,SAAU,YAAa,EAAgB,CAC3C,CAAC"}

package/dist/cjs/suggestion/suggestion.cjs

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

package/dist/cjs/suggestion/suggestion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion.cjs","names":["UHTMLComboboxElement","onMutation","QUICK_EVENT","useId","customElements"],"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":"2HAiBA,IAAa,EAAb,cAAyCA,EAAAA,oBAAqB,CAC5D,UACA,QAEA,mBAAoB,CAClB,MAAM,mBAAmB,CACzB,KAAK,YAAgB,EAAO,KAAK,CACjC,KAAK,UAAYC,EAAAA,WAAW,KAAM,KAAK,QAAS,CAAE,UAAW,GAAM,CAAC,CACpE,EAAA,GAAG,KAAM,SAAU,EAAsBC,EAAAA,YAAY,CAEvD,sBAAuB,CACrB,MAAM,sBAAsB,CAC5B,KAAK,aAAa,CAClB,KAAK,UAAY,KAAK,QAAU,IAAA,GAChC,EAAA,IAAI,KAAM,SAAU,EAAsBA,EAAAA,YAAY,GAK1D,MAAM,GAAU,CAAE,UAAS,UAAgC,CACrD,GAAW,CAAC,EAAQ,aAAa,EAAA,KAAK,EAAS,cAAe,IAAI,CAClE,GAAS,EAAA,KAAK,EAAS,gBAAiBC,EAAAA,MAAM,EAAK,EAAI,KAAK,CAC5D,GAAM,EAAA,KAAK,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,EAG7EC,EAAAA,eAAe,OAAO,gBAAiB,EAAoB"}

package/dist/cjs/tabs/tabs.cjs

@@ -0,0 +1,2 @@
+const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../utils/utils.cjs`);let n=require(`@u-elements/u-tabs`);n=e.__toESM(n);var r=class extends n.UHTMLTabsElement{},i=class extends n.UHTMLTabListElement{},a=class extends n.UHTMLTabElement{},o=class extends n.UHTMLTabPanelElement{};t.customElements.define(`ds-tabs`,r),t.customElements.define(`ds-tablist`,i),t.customElements.define(`ds-tab`,a),t.customElements.define(`ds-tabpanel`,o),exports.DSTabElement=a,exports.DSTabListElement=i,exports.DSTabPanelElement=o,exports.DSTabsElement=r;
+//# sourceMappingURL=tabs.cjs.map

package/dist/cjs/tabs/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","names":["UTabs","customElements"],"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":"wIAYA,IAAa,EAAb,cAAmCA,EAAM,gBAAiB,GAC7C,EAAb,cAAsCA,EAAM,mBAAoB,GACnD,EAAb,cAAkCA,EAAM,eAAgB,GAC3C,EAAb,cAAuCA,EAAM,oBAAqB,GAElEC,EAAAA,eAAe,OAAO,UAAW,EAAc,CAC/CA,EAAAA,eAAe,OAAO,aAAc,EAAiB,CACrDA,EAAAA,eAAe,OAAO,SAAU,EAAa,CAC7CA,EAAAA,eAAe,OAAO,cAAe,EAAkB"}

package/dist/cjs/toggle-group/toggle-group.cjs

@@ -0,0 +1,2 @@
+const e=require(`../utils/utils.cjs`),t=`data-toggle-group`,n=`[${t}]`,r=e.debounce(()=>{for(let r of document.querySelectorAll(n))e.attr(r,`aria-label`,e.attrOrCSS(r,t))},0),i=e=>{let t=e.target instanceof HTMLInputElement&&e.target.closest(n);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()}};e.onHotReload(`toggle-group`,()=>[e.on(document,`keydown`,i),e.onMutation(document,r,{attributeFilter:[t],attributes:!0,childList:!0,subtree:!0})]);
+//# sourceMappingURL=toggle-group.cjs.map

package/dist/cjs/toggle-group/toggle-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.cjs","names":["debounce","attrOrCSS","onHotReload","on","onMutation"],"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":"sCASM,EAAmB,oBACnB,EAAuB,IAAI,EAAiB,GAE5C,EAAuBA,EAAAA,aAAe,CAC1C,IAAK,IAAM,KAAS,SAAS,iBAAiB,EAAqB,CACjE,EAAA,KAAK,EAAO,aAAcC,EAAAA,UAAU,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,GAInEC,EAAAA,YAAY,mBAAsB,CAChCC,EAAAA,GAAG,SAAU,UAAW,EAAc,CACtCC,EAAAA,WAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAiB,CACnC,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/cjs/tooltip/tooltip.cjs

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

package/dist/cjs/tooltip/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","names":["debounce","attrOrCSS","attr","tag","onHotReload","on","QUICK_EVENT","onMutation"],"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":"sCAaA,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,EAAA,KAAK,kDAAmD,EAAG,CAC7D,EAAM,GAAM,IAAA,IAGR,EAAuBA,EAAAA,aAAe,CAC1C,IAAK,IAAM,KAAM,SAAS,iBAAiB,EAAiB,CAAE,CAC5D,IAAM,EAAO,EAAG,aAAa,EAAW,EAAI,EAAG,aAAa,EAAU,CAChE,EAAO,EAAG,aAAa,EAAa,EAAIC,EAAAA,UAAU,EAAI,EAAa,CAEzE,GAAI,IAAS,EAAM,CACjB,IAAM,EAAUC,EAAAA,KAAK,EAAI,OAAO,GAAK,OAAS,EAAG,aAAa,MAAM,CACpE,EAAA,KAAK,EAAI,EAAc,EAAK,CAC5B,EAAA,KAAK,EAAI,EAAY,EAAU,KAAO,EAAK,CAC3C,EAAA,KAAK,EAAI,EAAW,EAAU,EAAO,KAAK,CACrC,EAAG,QAAQ,kDAAqB,EACnC,EAAA,KAAK,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,IAAMC,EAAAA,IAAI,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,EAAA,KAAK,EAAK,UAAW,SAAS,CAC9B,EAAA,KAAK,EAAK,EAAa,GAAQ,aAAa,EAAY,EAAI,KAAK,CACjE,EAAA,KAAK,EAAK,EAAa,GAAW,GAAO,aAAa,EAAW,EAAK,KAAK,CAC3E,EAAA,uBAAuB,EAAKD,EAAAA,KAAK,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,IAKvBE,EAAAA,YAAY,cAAiB,CAC3BC,EAAAA,GAAG,SAAU,uBAAwB,EAAgBC,EAAAA,YAAY,CACjED,EAAAA,GAAG,SAAU,iBAAkB,EAAaC,EAAAA,YAAY,CACxDC,EAAAA,WAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAa,CAC/B,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/cjs/utils/utils.cjs

@@ -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||``}exports.DSElement=r,exports.QUICK_EVENT=e,exports.attr=o,exports.attrOrCSS=c,exports.customElements=_,exports.debounce=i,exports.isBrowser=t,exports.isWindows=n,exports.off=u,exports.on=l,exports.onHotReload=d,exports.onMutation=p,exports.setTextWithoutMutation=m,exports.tag=g,exports.useId=b,exports.warn=a;
+//# sourceMappingURL=utils.cjs.map