@digdir/designsystemet-web 0.0.1 → 1.12.0

package/dist/index.js

@@ -0,0 +1,710 @@
+// src/index.ts
+import { isSupported, apply as polyfillInvokers } from "invokers-polyfill/fn";
+
+// src/utils/utils.ts
+var QUICK_EVENT = { passive: true, capture: true };
+var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+var isWindows = () => isBrowser() && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
+/^Win/i.test(navigator.userAgentData?.platform || navigator.platform);
+var DSElement = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+function debounce(callback, delay) {
+  let timer;
+  return function(...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback.apply(this, args), delay);
+  };
+}
+var warn = (message, ...args) => typeof window === "undefined" || window.dsWarnings === false || console.warn(`Designsystemet: ${message}`, ...args);
+var attr = (el, name, value) => {
+  if (value === void 0) return el.getAttribute(name) ?? null;
+  if (value === null) el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+  return null;
+};
+var STRIP_SURROUNDING_QUOTES = /^["']|["']$/g;
+var attrOrCSS = (el, name) => {
+  let value = attr(el, name);
+  if (!value) {
+    const prop = getComputedStyle(el).getPropertyValue(`--_ds-${name}`);
+    value = prop.replace(STRIP_SURROUNDING_QUOTES, "").trim() || null;
+  }
+  if (!value) warn(`Missing ${name} on:`, el);
+  return value;
+};
+var on = (el, ...rest) => {
+  const [types, ...options] = rest;
+  for (const type of types.split(" ")) el.addEventListener(type, ...options);
+  return () => off(el, ...rest);
+};
+var off = (el, ...rest) => {
+  const [types, ...options] = rest;
+  for (const type of types.split(" ")) el.removeEventListener(type, ...options);
+};
+var onHotReload = (key, setup) => {
+  if (!isBrowser()) return;
+  if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = /* @__PURE__ */ new Map();
+  window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup());
+  window._dsHotReloadCleanup?.set(key, setup());
+};
+var SKIP_MUTATIONS = false;
+var onMutation = (el, callback, options) => {
+  let queue = 0;
+  const onFrame = () => {
+    if (!el.isConnected) return cleanup();
+    callback(observer);
+    observer.takeRecords();
+    queue = 0;
+  };
+  const cleanup = () => observer?.disconnect?.();
+  const observer = new MutationObserver(() => {
+    if (!SKIP_MUTATIONS && !queue) queue = requestAnimationFrame(onFrame);
+  });
+  observer.observe(el, options);
+  requestAnimationFrame(onFrame);
+  return cleanup;
+};
+var setTextWithoutMutation = (el, text) => {
+  SKIP_MUTATIONS = true;
+  el.textContent = text;
+  requestAnimationFrame(enableMutations);
+};
+var enableMutations = () => {
+  SKIP_MUTATIONS = false;
+};
+var tag = (tagName, attrs) => {
+  const el = document.createElement(tagName);
+  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);
+  return el;
+};
+var customElements = {
+  define: (name, instance) => !isBrowser() || window.customElements.get(name) || window.customElements.define(name, instance)
+};
+var id = 0;
+var hash = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+function useId(el) {
+  if (el && !el.id) el.id = `${hash}${++id}`;
+  return el?.id || "";
+}
+
+// src/index.ts
+import "@u-elements/u-details/polyfill";
+
+// src/clickdelegatefor/clickdelegatefor.ts
+var CLASS_HOVER = ":click-delegate-hover";
+var ATTR_CLICKDELEGATEFOR = "data-clickdelegatefor";
+var SELECTOR_CLICKDELEGATEFOR = `[${ATTR_CLICKDELEGATEFOR}]`;
+var SELECTOR_SKIP = 'a,button,label,input,select,textarea,details,dialog,[role="button"],[popover],[contenteditable]';
+var handleClickDelegateFor = (event) => {
+  const isNewTab = event.button === 1 || event.metaKey || event.ctrlKey;
+  const isUserLeftOrMiddleClick = event.isTrusted && event.button < 2;
+  const delegateTarget = isUserLeftOrMiddleClick && getDelegateTarget(event);
+  if (!delegateTarget || delegateTarget.contains(event.target)) return;
+  if (isNewTab && delegateTarget instanceof HTMLAnchorElement)
+    return window.open(delegateTarget.href, void 0, delegateTarget.rel);
+  event.stopImmediatePropagation();
+  delegateTarget.click();
+};
+var HOVER;
+var handleMouseOver = (event) => {
+  const delegateTarget = getDelegateTarget(event);
+  if (HOVER === delegateTarget) return;
+  if (HOVER) HOVER.classList.remove(CLASS_HOVER);
+  if (delegateTarget) delegateTarget.classList.add(CLASS_HOVER);
+  HOVER = delegateTarget;
+};
+var getDelegateTarget = ({ target: el }) => {
+  const scope = el instanceof Element ? el.closest(SELECTOR_CLICKDELEGATEFOR) : null;
+  const id2 = scope?.getAttribute(ATTR_CLICKDELEGATEFOR);
+  const target = id2 && document.getElementById(id2) || void 0;
+  const skip = target && el.closest(SELECTOR_SKIP);
+  return (!skip || skip === target) && !target?.disabled ? target : void 0;
+};
+onHotReload("clickdelegatefor", () => [
+  on(window, "click auxclick", handleClickDelegateFor, true),
+  // Use capture to ensure we run before other click listeners
+  on(document, "mouseover", handleMouseOver, QUICK_EVENT)
+  // Use passive for better performance
+]);
+
+// src/dialog/dialog.ts
+var DOWN_INSIDE = false;
+var handleClosedbyAny = ({
+  type,
+  target: el,
+  clientX: x = 0,
+  clientY: y = 0
+}) => {
+  if (type === "pointerdown") {
+    const r = el?.closest?.("dialog")?.getBoundingClientRect();
+    const isInside = r && r.top <= y && y <= r.bottom && r.left <= x && x <= r.right;
+    DOWN_INSIDE = !!isInside;
+  } else {
+    const isDialog = el instanceof HTMLDialogElement;
+    const isClose = isDialog && !DOWN_INSIDE && attr(el, "closedby") === "any";
+    DOWN_INSIDE = false;
+    if (isClose) requestAnimationFrame(() => el.open && el.close());
+  }
+};
+var handleAriaAttributes = () => {
+  for (const btn of document.querySelectorAll('button[command="show-modal"]'))
+    attr(btn, "aria-haspopup", "dialog");
+};
+var handleCommand = ({ command, target }) => command === "--show-non-modal" && target instanceof HTMLDialogElement && target.show();
+onHotReload("dialog", () => [
+  on(document, "command", handleCommand, QUICK_EVENT),
+  on(document, "pointerdown pointerup", handleClosedbyAny, QUICK_EVENT),
+  onMutation(document, handleAriaAttributes, {
+    attributeFilter: ["command"],
+    attributes: true,
+    childList: true,
+    subtree: true
+  })
+]);
+
+// src/popover/popover.ts
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  limitShift,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+var ATTR_PLACE = "data-placement";
+var ATTR_AUTO = "data-autoplacement";
+var POPOVERS = /* @__PURE__ */ new Map();
+function handleToggle(event) {
+  let { newState, oldState, target: el, source = event.detail } = event;
+  const float = el instanceof HTMLElement && getCSSProp(el, "--_ds-floating");
+  if (!float) return;
+  if (newState === "closed") return POPOVERS.get(el)?.();
+  if (!source) {
+    const root = el.getRootNode();
+    const css = `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
+    source = el.id && root?.querySelector?.(css) || void 0;
+  }
+  if (!source || source === el || oldState && oldState === newState) return;
+  const padding = 10;
+  const overscroll = getCSSProp(el, "--_ds-floating-overscroll");
+  const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;
+  const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);
+  const arrowSize = parseFloat(getComputedStyle(el, "::before").height) || 0;
+  const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
+  const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
+  if (placement === "none") return;
+  const options = {
+    strategy: "absolute",
+    placement,
+    middleware: [
+      offset(arrowSize || 0),
+      // Add space for arrow or default to 8px
+      shift({
+        padding,
+        limiter: limitShift({ offset: { mainAxis: shiftLimit } })
+        // Prevent from shifing away from source
+      }),
+      arrowPseudo(),
+      ...auto !== "false" ? [flip({ padding, crossAxis: false })] : [],
+      ...overscroll ? [
+        size({
+          apply({ availableHeight }) {
+            if (overscroll === "fit")
+              el.style.width = `${source.clientWidth}px`;
+            el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+          }
+        })
+      ] : []
+    ]
+  };
+  const unfloat = autoUpdate(source, el, async () => {
+    if (!source?.isConnected) return POPOVERS.get(el)?.();
+    const { x, y } = await computePosition(source, el, options);
+    el.style.translate = `${x}px ${y}px`;
+  });
+  POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());
+}
+var IS_SCROLL;
+var handleScrollbar = ({ type }) => {
+  if (type === "mousedown") IS_SCROLL = false;
+  if (type === "scroll" && IS_SCROLL === false) IS_SCROLL = true;
+  if (type === "mouseup" && IS_SCROLL)
+    for (const [popover] of POPOVERS) popover.showPopover();
+};
+onHotReload("popover", () => [
+  on(document, "mousedown scroll mouseup", handleScrollbar, true),
+  on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)
+  // Use capture since the toggle event does not bubble
+]);
+var getCSSProp = (el, prop) => getComputedStyle(el).getPropertyValue(prop).trim();
+var arrowPseudo = () => ({
+  name: "arrowPseudo",
+  fn(data) {
+    const target = data.elements.floating;
+    const source = data.rects.reference;
+    const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;
+    const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;
+    target.style.setProperty("--_ds-floating-arrow-x", x);
+    target.style.setProperty("--_ds-floating-arrow-y", y);
+    attr(target, "data-floating", data.placement);
+    return data;
+  }
+});
+
+// src/readonly/readonly.ts
+var isReadOnly = (el) => (el instanceof HTMLSelectElement || el instanceof HTMLInputElement) && (el.hasAttribute("readonly") || attr(el, "aria-readonly") === "true");
+var handleKeyDown = (e) => {
+  if (e.key !== "Tab" && isReadOnly(e.target)) {
+    e.preventDefault();
+    if (e.key?.startsWith("Arrow") && attr(e.target, "type") === "radio") {
+      const all = document.querySelectorAll(`input[name="${e.target.name}"]`);
+      const move = e.key?.match(/Arrow(Right|Down)/) ? 1 : -1;
+      const next = all.length + [...all].indexOf(e.target) + move;
+      all[next % all.length]?.focus();
+    }
+  }
+};
+var handleClick = (e) => {
+  const input = e.target?.closest?.("label")?.control || e.target;
+  if (isReadOnly(input)) {
+    e.preventDefault();
+    input.focus();
+  }
+};
+var handleMouseDown = (e) => {
+  if (e.target instanceof HTMLSelectElement && isReadOnly(e.target))
+    e.preventDefault();
+};
+onHotReload("readonly", () => [
+  on(document, "keydown", handleKeyDown),
+  on(document, "click", handleClick),
+  // click needed for <label> and <input>
+  on(document, "mousedown", handleMouseDown)
+  // mousedown needed for <select>
+]);
+
+// src/toggle-group/toggle-group.ts
+var ATTR_TOGGLEGROUP = "data-toggle-group";
+var SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;
+var handleAriaAttributes2 = debounce(() => {
+  for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP))
+    attr(group, "aria-label", attrOrCSS(group, ATTR_TOGGLEGROUP));
+}, 0);
+var handleKeydown = (event) => {
+  const group = event.target instanceof HTMLInputElement && event.target.closest(SELECTOR_TOGGLEGROUP);
+  if (!group) return;
+  if (event.key === "Enter") event.target.click();
+  if (event.key?.startsWith("Arrow")) {
+    event.preventDefault?.();
+    const inputs = group.getElementsByTagName("input");
+    const index = [...inputs].indexOf(event.target);
+    const move = event.key.match(/Arrow(Right|Down)/) ? 1 : -1;
+    inputs[(inputs.length + index + move) % inputs.length]?.focus();
+  }
+};
+onHotReload("toggle-group", () => [
+  on(document, "keydown", handleKeydown),
+  onMutation(document, handleAriaAttributes2, {
+    attributeFilter: [ATTR_TOGGLEGROUP],
+    attributes: true,
+    childList: true,
+    subtree: true
+  })
+]);
+
+// src/tooltip/tooltip.ts
+var TIP;
+var SOURCE;
+var HOVER_TIMER = 0;
+var SKIP_TIMER = 0;
+var ATTR_TOOLTIP = "data-tooltip";
+var ATTR_COLOR = "data-color";
+var ARIA_LABEL = "aria-label";
+var ARIA_DESC = "aria-description";
+var SELECTOR_COLOR = `[${ATTR_COLOR}]`;
+var SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;
+var ATTR_SCHEME = "data-color-scheme";
+var SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;
+var SELECTOR_INTERACTIVE = "a,button,input,label,select,textarea,[tabindex]";
+var DELAY_HOVER = 300;
+var DELAY_SKIP = 300;
+var setTooltipElement = (el) => {
+  if (el && !(el instanceof HTMLElement))
+    warn("setTooltipElement expects an HTMLElement, got: ", el);
+  TIP = el || void 0;
+};
+var handleAriaAttributes3 = debounce(() => {
+  for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {
+    const aria = el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC);
+    const text = el.getAttribute(ATTR_TOOLTIP) || attrOrCSS(el, ATTR_TOOLTIP);
+    if (aria !== text) {
+      const hasText = attr(el, "role") !== "img" && el.textContent?.trim();
+      attr(el, ATTR_TOOLTIP, text);
+      attr(el, ARIA_LABEL, hasText ? null : text);
+      attr(el, ARIA_DESC, hasText ? text : null);
+      if (!el.matches(SELECTOR_INTERACTIVE))
+        warn('Missing tabindex="0" attribute on: ', el);
+    }
+  }
+}, 0);
+var handleInterest = ({ type, target }) => {
+  clearTimeout(HOVER_TIMER);
+  if (target === TIP) return;
+  if (type === "mouseover" && !SOURCE) {
+    HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
+    return;
+  }
+  const source = target?.closest?.(`[${ATTR_TOOLTIP}]`);
+  if (source === SOURCE) return;
+  if (!source) return hideTooltip();
+  if (!TIP) TIP = tag("div", { class: "ds-tooltip" });
+  if (!TIP.isConnected) document.body.appendChild(TIP);
+  const color = source.closest(SELECTOR_COLOR);
+  const scheme = source.closest(SELECTOR_SCHEME);
+  const isReset = color !== scheme && color?.contains(scheme);
+  clearTimeout(SKIP_TIMER);
+  attr(TIP, "popover", "manual");
+  attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null);
+  attr(TIP, ATTR_COLOR, isReset && color?.getAttribute(ATTR_COLOR) || null);
+  setTextWithoutMutation(TIP, attr(source, ATTR_TOOLTIP));
+  TIP.showPopover();
+  TIP.dispatchEvent(new CustomEvent("ds-toggle-source", { detail: source }));
+  SOURCE = source;
+};
+var hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover();
+var handleClose = (event) => {
+  if (event?.type === "keydown")
+    return event?.key === "Escape" && TIP?.hidePopover();
+  if (!event) SOURCE = void 0;
+  else if (event.target === TIP && event.newState === "closed")
+    SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);
+};
+onHotReload("tooltip", () => [
+  on(document, "blur focus mouseover", handleInterest, QUICK_EVENT),
+  on(document, "toggle keydown", handleClose, QUICK_EVENT),
+  onMutation(document, handleAriaAttributes3, {
+    attributeFilter: [ATTR_TOOLTIP],
+    attributes: true,
+    childList: true,
+    subtree: true
+  })
+]);
+
+// src/index.ts
+export * from "@u-elements/u-datalist";
+
+// src/breadcrumbs/breadcrumbs.ts
+var ATTR_LABEL = "aria-label";
+var DSBreadcrumbsElement = class extends DSElement {
+  _items;
+  // Using underscore instead of private fields for backwards compatibility
+  _label = null;
+  _render;
+  _unresize;
+  _unmutate;
+  static get observedAttributes() {
+    return [ATTR_LABEL];
+  }
+  connectedCallback() {
+    this._label = attrOrCSS(this, ATTR_LABEL);
+    this._items = this.getElementsByTagName("a");
+    this._render = debounce(() => render(this), 100);
+    this._unresize = on(window, "resize", this._render);
+    this._unmutate = onMutation(this, this._render, {
+      childList: true,
+      subtree: true
+    });
+  }
+  attributeChangedCallback(_name, _prev, next) {
+    if (next) this._label = next;
+    this._render?.();
+  }
+  disconnectedCallback() {
+    this._unresize?.();
+    this._unmutate?.();
+    this._unresize = this._unmutate = this._render = this._items = void 0;
+  }
+};
+var render = (self) => {
+  const lastItem = self._items?.[self._items.length - 1];
+  const lastItemInList = lastItem?.parentElement === self ? null : lastItem;
+  const isListHidden = !lastItemInList?.offsetHeight;
+  attr(self, "role", isListHidden ? null : "navigation");
+  attr(self, ATTR_LABEL, isListHidden ? null : self._label);
+  for (const item of self._items || [])
+    attr(item, "aria-current", item === lastItemInList ? "page" : null);
+};
+customElements.define("ds-breadcrumbs", DSBreadcrumbsElement);
+
+// src/error-summary/error-summary.ts
+var DSErrorSummaryElement = class extends DSElement {
+  connectedCallback() {
+    on(this, "animationend", this, QUICK_EVENT);
+    requestAnimationFrame(() => this.handleEvent({ target: this }));
+  }
+  handleEvent({ target }) {
+    if (target !== this) return;
+    const heading = this.querySelector("h2,h3,h4,h5,h6");
+    if (heading) attr(this, "aria-labelledby", useId(heading));
+    attr(this, "tabindex", "-1");
+    this.focus();
+  }
+  disconnectedCallback() {
+    off(this, "animationend", this, QUICK_EVENT);
+  }
+};
+customElements.define("ds-error-summary", DSErrorSummaryElement);
+
+// src/field/field.ts
+var INDETERMINATE = "data-indeterminate";
+var FIELDS = /* @__PURE__ */ new Set();
+var COUNTS = /* @__PURE__ */ new WeakMap();
+var FIELDSETS = isBrowser() ? document.getElementsByTagName("fieldset") : [];
+var HAS_FIELD_SIZING = isBrowser() && CSS.supports("field-sizing", "content");
+var COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
+var HAS_VALIDATION = /* @__PURE__ */ new WeakSet();
+var handleMutations = debounce(() => {
+  for (const el of FIELDSETS) {
+    const labelledby = `${useId(el.querySelector("legend"))} ${useId(el.querySelector(':scope > :is([data-field="description"],legend + p)'))}`;
+    attr(el, "aria-labelledby", labelledby.trim() || null);
+  }
+  for (const field of FIELDS) {
+    const descs = [];
+    const labels = [];
+    let input;
+    let counter;
+    let hasValidation = false;
+    let invalid = false;
+    for (const el of field.getElementsByTagName("*")) {
+      if (el instanceof HTMLLabelElement) labels.push(el);
+      if (el.hidden) continue;
+      if (isInputLike(el)) {
+        if (input)
+          warn(
+            `Fields should only have one input element. Use <fieldset> to group multiple fields:`,
+            field
+          );
+        else input = el;
+      } else {
+        const type = el.getAttribute("data-field");
+        if (type === "counter") counter = el;
+        if (type === "validation") {
+          descs.unshift(el);
+          hasValidation = true;
+          invalid = invalid || isInvalid(el);
+        } else if (type) descs.push(el);
+      }
+    }
+    if (!input) warn(`Field is missing input element:`, field);
+    else {
+      if (counter) COUNTS.set(input, counter);
+      for (const label of labels) attr(label, "for", useId(input));
+      const isBoolish = input.type === "radio" || input.type === "checkbox";
+      const fieldsetValidation = field.closest("fieldset")?.querySelector(':scope > [data-field="validation"]');
+      if (fieldsetValidation && !fieldsetValidation?.hidden) {
+        hasValidation = true;
+        invalid = invalid || isInvalid(fieldsetValidation);
+        descs.unshift(fieldsetValidation);
+      }
+      const indeterminate = attr(input, INDETERMINATE);
+      if (indeterminate) input.indeterminate = indeterminate === "true";
+      attr(field, "data-clickdelegatefor", isBoolish ? useId(input) : null);
+      attr(input, "aria-describedby", descs.map(useId).join(" ") || null);
+      if (hasValidation || HAS_VALIDATION.has(input)) {
+        HAS_VALIDATION[hasValidation ? "add" : "delete"](input);
+        attr(input, "aria-invalid", `${invalid}`);
+      }
+      updateField(input);
+    }
+  }
+}, 0);
+var SR_ONLY = "position:fixed;white-space:nowrap;clip:rect(0 0 0 0)";
+var SR_LIVE = isBrowser() ? tag("div", { "aria-live": "polite", style: SR_ONLY }) : null;
+var updateField = (e) => {
+  const input = e.target || e;
+  const counter = COUNTS.get(input);
+  if (counter?.isConnected) {
+    const limit = Number(attr(counter, "data-limit")) || 0;
+    const count = limit - input.value.length;
+    const state = count < 0 ? "over" : "under";
+    const label = attrOrCSS(counter, `data-${state}`)?.replace(
+      "%d",
+      `${Math.abs(count)}`
+    );
+    attr(counter, "data-label", label);
+    attr(counter, "data-state", state);
+    attr(counter, "data-color", count < 0 ? "danger" : null);
+    if (e.type === "input" && SR_LIVE && label) {
+      if (!SR_LIVE?.isConnected) document.body.appendChild(SR_LIVE);
+      debouncedCounterLiveRegion(input, label);
+    }
+  }
+  if (!HAS_FIELD_SIZING && input instanceof HTMLTextAreaElement) {
+    input.style.setProperty("--_ds-field-sizing", "auto");
+    input.style.setProperty("--_ds-field-sizing", `${input.scrollHeight}px`);
+  }
+};
+var debouncedCounterLiveRegion = debounce((input, text) => {
+  const hasFocus = document.activeElement === input;
+  if (SR_LIVE?.isConnected && hasFocus) setTextWithoutMutation(SR_LIVE, text);
+}, COUNTER_DEBOUNCE);
+var isInvalid = (el) => el.getAttribute("data-color") !== "success";
+var isInputLike = (el) => el instanceof HTMLElement && "validity" in el && // Adds support for custom elements implemeted with attachInternals()
+!(el instanceof HTMLButtonElement) && // But skip <button> elements
+el.type !== "hidden";
+var DSFieldElement = class extends DSElement {
+  connectedCallback() {
+    FIELDS.add(this);
+    handleMutations();
+  }
+  disconnectedCallback() {
+    FIELDS.delete(this);
+  }
+};
+customElements.define("ds-field", DSFieldElement);
+onHotReload("field", () => [
+  on(document, "input", updateField, QUICK_EVENT),
+  onMutation(document, handleMutations, {
+    attributeFilter: ["value", "hidden", "data-field", INDETERMINATE],
+    attributes: true,
+    childList: true,
+    subtree: true
+  })
+]);
+
+// src/pagination/pagination.ts
+var ATTR_LABEL2 = "aria-label";
+var ATTR_CURRENT = "data-current";
+var ATTR_TOTAL = "data-total";
+var ATTR_HREF = "data-href";
+var pagination = ({ current = 1, total = 10, show = 7 }) => ({
+  prev: current > 1 ? current - 1 : 0,
+  next: current < total ? current + 1 : 0,
+  pages: getSteps(current, total, show).map((page, index) => ({
+    current: page === current && "page",
+    key: `key-${page}-${index}`,
+    page
+  }))
+});
+var DSPaginationElement = class extends DSElement {
+  _unmutate;
+  // Using underscore instead of private fields for backwards compatibility
+  _render;
+  static get observedAttributes() {
+    return [ATTR_LABEL2, ATTR_CURRENT, ATTR_TOTAL, ATTR_HREF];
+  }
+  connectedCallback() {
+    const total = attr(this, ATTR_TOTAL);
+    const current = attr(this, ATTR_CURRENT);
+    if (current && !total) warn(`Missing ${ATTR_TOTAL} attribute on:`, this);
+    if (total && !current) warn(`Missing ${ATTR_CURRENT} attribute on:`, this);
+    attr(this, ATTR_LABEL2, attrOrCSS(this, ATTR_LABEL2));
+    attr(this, "role", "navigation");
+    this._render = debounce(() => render2(this), 0);
+    this._unmutate = onMutation(this, this._render, {
+      childList: true,
+      subtree: true
+    });
+  }
+  attributeChangedCallback() {
+    this._render?.();
+  }
+  disconnectedCallback() {
+    this._unmutate?.();
+    this._unmutate = this._render = void 0;
+  }
+};
+var render2 = (self) => {
+  const current = Number(attr(self, ATTR_CURRENT));
+  const total = Number(attr(self, ATTR_TOTAL));
+  if (current && total) {
+    const items = self.querySelectorAll("button,a");
+    const show = items.length - 2;
+    const href = attr(self, ATTR_HREF);
+    const { next, prev, pages } = pagination({ current, total, show });
+    items.forEach((item, i) => {
+      const page = i ? items[i + 1] ? pages[i - 1]?.page : next : prev;
+      attr(item, "aria-current", pages[i - 1]?.current ? "true" : null);
+      attr(item, "aria-label", `${page ?? "hidden"}`);
+      attr(item, "role", page ? null : "none");
+      attr(item, "tabindex", page ? null : "-1");
+      if (item instanceof HTMLButtonElement) attr(item, "value", `${page}`);
+      if (href && item instanceof HTMLAnchorElement)
+        attr(item, "href", href.replace("%d", `${page}`));
+    });
+  }
+};
+var getSteps = (now, max, show = Number.POSITIVE_INFINITY) => {
+  const offset2 = (show - 1) / 2;
+  const start = Math.max(Math.min(now - Math.floor(offset2), max - show + 1), 1);
+  const end = Math.min(Math.max(now + Math.ceil(offset2), show), max);
+  const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
+  if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);
+  if (show > 3 && end < max) pages.splice(-2, 2, 0, max);
+  return pages;
+};
+customElements.define("ds-pagination", DSPaginationElement);
+
+// src/suggestion/suggestion.ts
+import { UHTMLComboboxElement } from "@u-elements/u-combobox";
+var DSSuggestionElement = class extends UHTMLComboboxElement {
+  _unmutate;
+  // Using underscore instead of private fields for backwards compatibility
+  _render;
+  connectedCallback() {
+    super.connectedCallback();
+    this._render = () => render3(this);
+    this._unmutate = onMutation(this, this._render, { childList: true });
+    on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unmutate?.();
+    this._unmutate = this._render = void 0;
+    off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+  }
+};
+var render3 = ({ control, list }) => {
+  if (control && !control.placeholder) attr(control, "placeholder", " ");
+  if (control) attr(control, "popovertarget", useId(list) || null);
+  if (list) attr(list, "popover", "manual");
+};
+var polyfillToggleSource = (event) => {
+  const self = event.currentTarget;
+  const detail = event.newState === "open" && self.control;
+  if (detail)
+    self.list?.dispatchEvent(new CustomEvent("ds-toggle-source", { detail }));
+};
+customElements.define("ds-suggestion", DSSuggestionElement);
+
+// src/tabs/tabs.ts
+import * as UTabs from "@u-elements/u-tabs";
+var DSTabsElement = class extends UTabs.UHTMLTabsElement {
+};
+var DSTabListElement = class extends UTabs.UHTMLTabListElement {
+};
+var DSTabElement = class extends UTabs.UHTMLTabElement {
+};
+var DSTabPanelElement = class extends UTabs.UHTMLTabPanelElement {
+};
+customElements.define("ds-tabs", DSTabsElement);
+customElements.define("ds-tablist", DSTabListElement);
+customElements.define("ds-tab", DSTabElement);
+customElements.define("ds-tabpanel", DSTabPanelElement);
+
+// src/index.ts
+if (isBrowser() && !isSupported()) polyfillInvokers();
+export {
+  DSBreadcrumbsElement,
+  DSErrorSummaryElement,
+  DSFieldElement,
+  DSPaginationElement,
+  DSSuggestionElement,
+  DSTabElement,
+  DSTabListElement,
+  DSTabPanelElement,
+  DSTabsElement,
+  pagination,
+  setTooltipElement
+};