@digdir/designsystemet-web 0.0.1

package/dist/esm/field.js

@@ -0,0 +1,115 @@
+import { DSElement, QUICK_EVENT, attr, customElements, debounce, isBrowser, isWindows, off, on, onHotReload, onMutation, tag, useId } from "./utils.js";
+
+//#region src/field.ts
+const CSS_FIELD_SIZE = "--_ds-field-sizing";
+const ATTR_COUNTER_TEXT = "data-counter-text";
+const ATTR_COUNTER_ARIA = "data-counter-aria";
+const ATTR_FIELD = "data-field";
+const TYPE_DESCRIPTION = "description";
+const TYPE_VALIDATION = "validation";
+const COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
+const COUNTER_TEXT = {
+	over: "%d tegn for mye",
+	under: "%d tegn for mye",
+	hint: "Maks %d tegn tillatt."
+};
+const SELECTOR_FIELDSET_DESCRIPTION = `:scope > [${ATTR_FIELD}="${TYPE_DESCRIPTION}"],:scope > legend + p`;
+const SELECTOR_FIELDSET_VALIDATION = `:scope > [${ATTR_FIELD}="${TYPE_VALIDATION}"]`;
+const SELECTOR_FIELD_COUNTER = "[data-field=\"counter\"]";
+const FIELDS = /* @__PURE__ */ new Set();
+const FILEDSETS = isBrowser() ? document.getElementsByTagName("fieldset") : [];
+const STYLE_SR_ONLY = `position:absolute;clip:rect(0 0 0 0);overflow:hidden;width:1px;height:1px;white-space:nowrap;pointer-events:none`;
+const handleMutations = debounce(() => {
+	setupFieldsets();
+	setupFields();
+}, 100);
+const setupFieldsets = () => {
+	for (const fieldset of FILEDSETS) attr(fieldset, "aria-labelledby", [fieldset.querySelector("legend"), fieldset.querySelector(SELECTOR_FIELDSET_DESCRIPTION)].filter(isNotHidden).map(useId).join(" "));
+};
+const setupFields = () => {
+	for (const field of FIELDS) {
+		const descs = [];
+		const labels = [];
+		let input;
+		for (const el of field.getElementsByTagName("*")) if (el instanceof HTMLLabelElement) labels.push(el);
+		else if (isInputLike(el)) {
+			if (input) console.warn(`Designsystemet: Fields should only have one input element. Use <fieldset> to group multiple fields:`, field);
+			input = el;
+		} else if (isNotHidden(el)) {
+			const type = el.getAttribute(ATTR_FIELD);
+			if (type === TYPE_VALIDATION) descs.unshift(el);
+			else if (type) descs.push(el);
+		}
+		if (!input) console.warn(`Designsystemet: Field is missing input element:`, field);
+		else {
+			for (const label of labels) attr(label, "for", useId(input));
+			const isBoolish = input.type === "radio" || input.type === "checkbox";
+			const fieldsetValidation = field.closest("fieldset")?.querySelector(SELECTOR_FIELDSET_VALIDATION);
+			if (isNotHidden(fieldsetValidation)) descs.unshift(fieldsetValidation);
+			field.handleEvent({ target: input });
+			attr(field, "data-clickdelegatefor", isBoolish ? useId(input) : null);
+			attr(input, "aria-describedby", descs.map(useId).join(" "));
+			attr(input, "aria-invalid", `${descs.some(isInvalid)}`);
+		}
+	}
+};
+const getCounterText = (el, key, num) => (attr(el, `data-${key}`) || COUNTER_TEXT[key]).replace("%d", `${Math.abs(num)}`);
+const setupCounter = (field, target) => {
+	const el = isInputLike(target) && field.querySelector(SELECTOR_FIELD_COUNTER);
+	if (el) {
+		const live = field.shadowRoot?.lastElementChild;
+		const limit = Number(attr(el, "data-limit")) || 0;
+		const count = limit - target.value.length;
+		const text = getCounterText(el, count < 0 ? "over" : "under", count);
+		attr(el, ATTR_COUNTER_TEXT, text);
+		attr(el, ATTR_COUNTER_ARIA, getCounterText(el, "hint", limit));
+		attr(el, "data-color", count < 0 ? "danger" : null);
+		setupCounterLiveRegion(live, text);
+	}
+};
+const setupCounterLiveRegion = debounce((live, text) => {
+	live.textContent = text;
+}, COUNTER_DEBOUNCE);
+const setupTextareaFieldSizingiOS = (target) => {
+	if (target instanceof HTMLTextAreaElement) {
+		target.style.setProperty(CSS_FIELD_SIZE, "auto");
+		target.style.setProperty(CSS_FIELD_SIZE, `${target.scrollHeight}px`);
+	}
+};
+const isInputLike = (el) => el instanceof HTMLElement && "validity" in el && !(el instanceof HTMLButtonElement);
+const isNotHidden = (el) => !!el && !el.hidden;
+const isInvalid = (el) => el.getAttribute(ATTR_FIELD) === TYPE_VALIDATION && attr(el, "data-color") !== "success";
+var DSFieldElement = class extends DSElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(tag("slot"), tag("div", {
+			"aria-live": "polite",
+			style: STYLE_SR_ONLY
+		}));
+	}
+	connectedCallback() {
+		FIELDS.add(this);
+		on(this, "input", this, QUICK_EVENT);
+		handleMutations();
+	}
+	handleEvent({ target }) {
+		setupCounter(this, target);
+		setupTextareaFieldSizingiOS(target);
+	}
+	disconnectedCallback() {
+		off(this, "input", this, QUICK_EVENT);
+		FIELDS.delete(this);
+	}
+};
+customElements.define("ds-field", DSFieldElement);
+onHotReload("field", () => [onMutation(document, handleMutations, {
+	debounce: false,
+	attributeFilter: ["hidden", ATTR_FIELD],
+	attributes: true,
+	childList: true,
+	subtree: true
+})]);
+
+//#endregion
+export { DSFieldElement };
+//# sourceMappingURL=field.js.map

package/dist/esm/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../src/field.ts"],"sourcesContent":["import {\r\n  attr,\r\n  customElements,\r\n  DSElement,\r\n  debounce,\r\n  isBrowser,\r\n  off,\r\n  on,\r\n  onHotReload,\r\n  onMutation,\r\n  QUICK_EVENT,\r\n  tag,\r\n  useId,\r\n  isWindows,\r\n} from './utils';\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'ds-field': DSFieldElement;\r\n  }\r\n}\r\n\r\nconst CSS_FIELD_SIZE = '--_ds-field-sizing';\r\nconst ATTR_COUNTER_TEXT = 'data-counter-text';\r\nconst ATTR_COUNTER_ARIA = 'data-counter-aria';\r\nconst ATTR_FIELD = 'data-field';\r\nconst TYPE_DESCRIPTION = 'description';\r\nconst TYPE_VALIDATION = 'validation';\r\nconst COUNTER_DEBOUNCE = isWindows() ? 800 : 200; // Longer debounce on Windows due to NVDA performance\r\nconst COUNTER_TEXT = {\r\n  over: '%d tegn for mye',\r\n  under: '%d tegn for mye',\r\n  hint: 'Maks %d tegn tillatt.',\r\n};\r\n\r\nconst SELECTOR_FIELDSET_DESCRIPTION = `:scope > [${ATTR_FIELD}=\"${TYPE_DESCRIPTION}\"],:scope > legend + p`; // legend + p is kept for backwards compatibility\r\nconst SELECTOR_FIELDSET_VALIDATION = `:scope > [${ATTR_FIELD}=\"${TYPE_VALIDATION}\"]`;\r\nconst SELECTOR_FIELD_COUNTER = '[data-field=\"counter\"]';\r\n\r\nconst FIELDS = new Set<DSFieldElement>();\r\nconst FILEDSETS = isBrowser() ? document.getElementsByTagName('fieldset') : [];\r\nconst STYLE_SR_ONLY = `position:absolute;clip:rect(0 0 0 0);overflow:hidden;width:1px;height:1px;white-space:nowrap;pointer-events:none`;\r\n\r\n// TODO: Document that Validation must be hidden with \"hidden\" attribute (or completely removed from DOM), not display: none\r\nconst handleMutations = debounce(() => {\r\n  setupFieldsets();\r\n  setupFields();\r\n}, 100); // Debounce to avoid excessive calculations on multiple mutations\r\n\r\n// Connect fieldset legend and descriptions\r\nconst setupFieldsets = () => {\r\n  for (const fieldset of FILEDSETS) {\r\n    const labelledby = [\r\n      fieldset.querySelector('legend'),\r\n      fieldset.querySelector(SELECTOR_FIELDSET_DESCRIPTION),\r\n    ].filter(isNotHidden);\r\n\r\n    attr(fieldset, 'aria-labelledby', labelledby.map(useId).join(' '));\r\n  }\r\n};\r\n\r\nconst setupFields = () => {\r\n  for (const field of FIELDS) {\r\n    const descs: Element[] = [];\r\n    const labels: HTMLLabelElement[] = [];\r\n    let input: HTMLInputElement | undefined;\r\n\r\n    for (const el of field.getElementsByTagName('*')) {\r\n      if (el instanceof HTMLLabelElement) labels.push(el);\r\n      else if (isInputLike(el)) {\r\n        if (input)\r\n          console.warn(\r\n            `Designsystemet: Fields should only have one input element. Use <fieldset> to group multiple fields:`,\r\n            field,\r\n          );\r\n        input = el;\r\n      } else if (isNotHidden(el)) {\r\n        const type = el.getAttribute(ATTR_FIELD); // Using getAttribute not attr for best performance\r\n        if (type === TYPE_VALIDATION) descs.unshift(el);\r\n        else if (type) descs.push(el);\r\n      }\r\n    }\r\n\r\n    if (!input)\r\n      console.warn(`Designsystemet: Field is missing input element:`, field);\r\n    else {\r\n      for (const label of labels) attr(label, 'for', useId(input));\r\n\r\n      const isBoolish = input.type === 'radio' || input.type === 'checkbox';\r\n      const fieldsetValidation = field\r\n        .closest('fieldset')\r\n        ?.querySelector(SELECTOR_FIELDSET_VALIDATION);\r\n      if (isNotHidden(fieldsetValidation)) descs.unshift(fieldsetValidation);\r\n\r\n      field.handleEvent({ target: input }); // Run counter and textrarea resize\r\n      attr(field, 'data-clickdelegatefor', isBoolish ? useId(input) : null); // Expand click area to ds-field if radio/checkbox\r\n      attr(input, 'aria-describedby', descs.map(useId).join(' '));\r\n      attr(input, 'aria-invalid', `${descs.some(isInvalid)}`);\r\n    }\r\n  }\r\n};\r\n\r\nconst getCounterText = (el: Element, key: keyof typeof COUNTER_TEXT, num: number) =>\r\n  (attr(el, `data-${key}`) || COUNTER_TEXT[key]).replace('%d', `${Math.abs(num)}`);\r\n\r\nconst setupCounter = (field: DSFieldElement, target: EventTarget | null) => {\r\n  const el =\r\n    isInputLike(target) &&\r\n    field.querySelector<HTMLElement>(SELECTOR_FIELD_COUNTER);\r\n\r\n  if (el) {\r\n    const live = field.shadowRoot?.lastElementChild as HTMLElement;\r\n    const limit = Number(attr(el, 'data-limit')) || 0;\r\n    const count = limit - target.value.length;\r\n    const text = getCounterText(el, count < 0 ? 'over' : 'under', count);\r\n\r\n    attr(el, ATTR_COUNTER_TEXT, text);\r\n    attr(el, ATTR_COUNTER_ARIA, getCounterText(el, 'hint', limit));\r\n    attr(el, 'data-color', count < 0 ? 'danger' : null);\r\n    setupCounterLiveRegion(live, text); // Debounce live region to avoid NVDA interupting announcing typed text\r\n  }\r\n};\r\n\r\nconst setupCounterLiveRegion = debounce((live: Element, text: string) => {\r\n  live.textContent = text;\r\n}, COUNTER_DEBOUNCE);\r\n\r\n// iOS does not support field-sizing: content, so we need to manually resize\r\nconst setupTextareaFieldSizingiOS = (target: EventTarget | null) => {\r\n  if (target instanceof HTMLTextAreaElement) {\r\n    target.style.setProperty(CSS_FIELD_SIZE, 'auto');\r\n    target.style.setProperty(CSS_FIELD_SIZE, `${target.scrollHeight}px`);\r\n  }\r\n};\r\n\r\nconst isInputLike = (el: unknown): el is HTMLInputElement =>\r\n  el instanceof HTMLElement &&\r\n  'validity' in el && // Adds support for custom elements implemeted with attachInternals()\r\n  !(el instanceof HTMLButtonElement); // But skip <button> elements\r\n\r\nconst isNotHidden = (el?: Element | null): el is Element =>\r\n  !!el && !(el as HTMLElement).hidden;\r\n\r\nconst isInvalid = (el: Element): boolean =>\r\n  el.getAttribute(ATTR_FIELD) === TYPE_VALIDATION &&\r\n  attr(el, 'data-color') !== 'success';\r\n\r\n// Custom element is used to performantly keep track of fields on the page\r\nexport class DSFieldElement extends DSElement {\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' }).append(\r\n      tag('slot'),\r\n      tag('div', { 'aria-live': 'polite', style: STYLE_SR_ONLY }), // Used to announce counter updates\r\n    );\r\n  }\r\n  connectedCallback() {\r\n    FIELDS.add(this);\r\n    on(this, 'input', this, QUICK_EVENT);\r\n    handleMutations(); // Initial setup\r\n  }\r\n  handleEvent({ target }: { target: EventTarget | null }) {\r\n    setupCounter(this, target);\r\n    setupTextareaFieldSizingiOS(target);\r\n  }\r\n  disconnectedCallback() {\r\n    off(this, 'input', this, QUICK_EVENT);\r\n    FIELDS.delete(this);\r\n  }\r\n}\r\n\r\ncustomElements.define('ds-field', DSFieldElement);\r\n\r\nonHotReload('field', () => [\r\n  onMutation(document, handleMutations, {\r\n    debounce: false, // No need to timeout debounce here as we handle it ourselves\r\n    attributeFilter: ['hidden', ATTR_FIELD], // Listen for hidden to detect hidden validations\r\n    attributes: true,\r\n    childList: true,\r\n    subtree: true,\r\n  }),\r\n]);\r\n"],"mappings":"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"}

package/dist/esm/index.js

@@ -0,0 +1,22 @@
+import { isBrowser } from "./utils.js";
+import { DSBreadcrumbsElement } from "./breadcrumbs.js";
+import "./clickdelegatefor.js";
+import "./details.js";
+import "./dialog.js";
+import { DSErrorSummaryElement } from "./error-summary.js";
+import { DSFieldElement } from "./field.js";
+import { DSPaginationElement, pagination } from "./pagination.js";
+import { DSSuggestionElement } from "./suggestion.js";
+import { DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement } from "./tabs.js";
+import "./popover.js";
+import "./toggle-group.js";
+import "./tooltip.js";
+
+export * from "@u-elements/u-datalist"
+
+//#region src/index.ts
+if (isBrowser()) import("invokers-polyfill");
+
+//#endregion
+export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, pagination };
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { isBrowser } from './utils';\r\n\r\n// Ensure polyfill is loaded in browser environment only\r\nif (isBrowser()) import('invokers-polyfill');\r\n\r\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements\r\nexport * from './breadcrumbs';\r\nexport * from './error-summary';\r\nexport * from './field';\r\nexport * from './pagination';\r\nexport * from './suggestion';\r\nexport * from './tabs';\r\nimport './clickdelegatefor';\r\nimport './details';\r\nimport './dialog';\r\nimport './popover';\r\nimport './toggle-group';\r\nimport './tooltip';\r\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA,IAAI,WAAW,CAAE,QAAO"}

package/dist/esm/pagination.js

@@ -0,0 +1,71 @@
+import { DSElement, attr, attrRequiredWarning, customElements, onMutation } from "./utils.js";
+
+//#region src/pagination.ts
+const ATTR_LABEL = "aria-label";
+const ATTR_CURRENT = "data-current";
+const ATTR_TOTAL = "data-total";
+const ATTR_HREF = "data-href";
+const 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;
+	static get observedAttributes() {
+		return [ATTR_CURRENT, ATTR_TOTAL];
+	}
+	connectedCallback() {
+		attrRequiredWarning(this, ATTR_LABEL);
+		if (attr(this, ATTR_TOTAL)) attrRequiredWarning(this, ATTR_CURRENT);
+		if (attr(this, ATTR_CURRENT)) attrRequiredWarning(this, ATTR_TOTAL);
+		this._unmutate = onMutation(this, this.render.bind(this), {
+			childList: true,
+			subtree: true,
+			debounce: 0
+		});
+	}
+	disconnectedCallback() {
+		this._unmutate?.();
+		this._unmutate = void 0;
+	}
+	render() {
+		const items = this.querySelectorAll("button,a");
+		const href = attr(this, ATTR_HREF);
+		const CURRENT = attr(this, ATTR_CURRENT) || void 0;
+		const TOTAL = attr(this, ATTR_TOTAL) || void 0;
+		if (!CURRENT || !TOTAL) return;
+		const { next, prev, pages } = pagination({
+			current: parseInt(CURRENT, 10),
+			total: parseInt(TOTAL, 10),
+			show: items.length - 2
+		});
+		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-hidden", page ? null : "true");
+			attr(item, "data-page", `${page}`);
+			attr(item, "tabindex", page ? null : "-1");
+			if (item instanceof HTMLButtonElement) attr(item, "value", `${page}`);
+			if (href) attr(item, "href", href.replace("$page", `${page}`));
+		});
+	}
+};
+customElements.define("ds-pagination", DSPaginationElement);
+function getSteps(now, max, show = Number.POSITIVE_INFINITY) {
+	const offset = (show - 1) / 2;
+	const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);
+	const end = Math.min(Math.max(now + Math.ceil(offset), 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;
+}
+
+//#endregion
+export { DSPaginationElement, pagination };
+//# sourceMappingURL=pagination.js.map

package/dist/esm/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../src/pagination.ts"],"sourcesContent":["import {\r\n  attr,\r\n  attrRequiredWarning,\r\n  customElements,\r\n  DSElement,\r\n  onMutation,\r\n} from './utils';\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'ds-pagination': DSPaginationElement;\r\n  }\r\n}\r\n\r\nconst ATTR_LABEL = 'aria-label';\r\nconst ATTR_CURRENT = 'data-current';\r\nconst ATTR_TOTAL = 'data-total';\r\nconst ATTR_HREF = 'data-href';\r\n\r\n// Expose pagination logic if wanting to do custom rendering (i.e. in React/Vue/etc)\r\nexport const pagination = ({ current = 1, total = 10, show = 7 }) => ({\r\n  prev: current > 1 ? current - 1 : 0,\r\n  next: current < total ? current + 1 : 0,\r\n  pages: getSteps(current, total, show).map((page, index) => ({\r\n    current: page === current && ('page' as const),\r\n    key: `key-${page}-${index}`,\r\n    page,\r\n  })),\r\n});\r\n\r\nexport class DSPaginationElement extends DSElement {\r\n  _unmutate?: () => void;\r\n\r\n  static get observedAttributes() {\r\n    return [ATTR_CURRENT, ATTR_TOTAL]; // Using ES2015 syntax for backwards compatibility\r\n  }\r\n  connectedCallback() {\r\n    attrRequiredWarning(this, ATTR_LABEL);\r\n    if (attr(this, ATTR_TOTAL)) attrRequiredWarning(this, ATTR_CURRENT);\r\n    if (attr(this, ATTR_CURRENT)) attrRequiredWarning(this, ATTR_TOTAL);\r\n\r\n    this._unmutate = onMutation(this, this.render.bind(this), {\r\n      childList: true,\r\n      subtree: true,\r\n      debounce: 0,\r\n    });\r\n  }\r\n  disconnectedCallback() {\r\n    this._unmutate?.();\r\n    this._unmutate = undefined;\r\n  }\r\n  render() {\r\n    const items = this.querySelectorAll('button,a');\r\n    const href = attr(this, ATTR_HREF);\r\n    const CURRENT = attr(this, ATTR_CURRENT) || undefined;\r\n    const TOTAL = attr(this, ATTR_TOTAL) || undefined;\r\n\r\n    if (!CURRENT || !TOTAL) return;\r\n\r\n    const { next, prev, pages } = pagination({\r\n      current: parseInt(CURRENT, 10),\r\n      total: parseInt(TOTAL, 10),\r\n      show: items.length - 2,\r\n    });\r\n\r\n    items.forEach((item, i) => {\r\n      const page = i ? (items[i + 1] ? pages[i - 1]?.page : next) : prev; // First is prev, last is next\r\n      attr(item, 'aria-current', pages[i - 1]?.current ? 'true' : null);\r\n      attr(item, 'aria-hidden', page ? null : 'true');\r\n      attr(item, 'data-page', `${page}`);\r\n      attr(item, 'tabindex', page ? null : '-1');\r\n      if (item instanceof HTMLButtonElement) attr(item, 'value', `${page}`);\r\n      if (href) attr(item, 'href', href.replace('$page', `${page}`));\r\n    });\r\n  }\r\n}\r\n\r\ncustomElements.define('ds-pagination', DSPaginationElement);\r\n\r\nfunction getSteps(now: number, max: number, show = Number.POSITIVE_INFINITY) {\r\n  const offset = (show - 1) / 2;\r\n  const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);\r\n  const end = Math.min(Math.max(now + Math.ceil(offset), show), max);\r\n  const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);\r\n\r\n  if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);\r\n  if (show > 3 && end < max) pages.splice(-2, 2, 0, max);\r\n  return pages;\r\n}\r\n"],"mappings":";;;AAcA,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,aAAa;AACnB,MAAM,YAAY;AAGlB,MAAa,cAAc,EAAE,UAAU,GAAG,QAAQ,IAAI,OAAO,SAAS;CACpE,MAAM,UAAU,IAAI,UAAU,IAAI;CAClC,MAAM,UAAU,QAAQ,UAAU,IAAI;CACtC,OAAO,SAAS,SAAS,OAAO,KAAK,CAAC,KAAK,MAAM,WAAW;EAC1D,SAAS,SAAS,WAAY;EAC9B,KAAK,OAAO,KAAK,GAAG;EACpB;EACD,EAAE;CACJ;AAED,IAAa,sBAAb,cAAyC,UAAU;CACjD;CAEA,WAAW,qBAAqB;AAC9B,SAAO,CAAC,cAAc,WAAW;;CAEnC,oBAAoB;AAClB,sBAAoB,MAAM,WAAW;AACrC,MAAI,KAAK,MAAM,WAAW,CAAE,qBAAoB,MAAM,aAAa;AACnE,MAAI,KAAK,MAAM,aAAa,CAAE,qBAAoB,MAAM,WAAW;AAEnE,OAAK,YAAY,WAAW,MAAM,KAAK,OAAO,KAAK,KAAK,EAAE;GACxD,WAAW;GACX,SAAS;GACT,UAAU;GACX,CAAC;;CAEJ,uBAAuB;AACrB,OAAK,aAAa;AAClB,OAAK,YAAY;;CAEnB,SAAS;EACP,MAAM,QAAQ,KAAK,iBAAiB,WAAW;EAC/C,MAAM,OAAO,KAAK,MAAM,UAAU;EAClC,MAAM,UAAU,KAAK,MAAM,aAAa,IAAI;EAC5C,MAAM,QAAQ,KAAK,MAAM,WAAW,IAAI;AAExC,MAAI,CAAC,WAAW,CAAC,MAAO;EAExB,MAAM,EAAE,MAAM,MAAM,UAAU,WAAW;GACvC,SAAS,SAAS,SAAS,GAAG;GAC9B,OAAO,SAAS,OAAO,GAAG;GAC1B,MAAM,MAAM,SAAS;GACtB,CAAC;AAEF,QAAM,SAAS,MAAM,MAAM;GACzB,MAAM,OAAO,IAAK,MAAM,IAAI,KAAK,MAAM,IAAI,IAAI,OAAO,OAAQ;AAC9D,QAAK,MAAM,gBAAgB,MAAM,IAAI,IAAI,UAAU,SAAS,KAAK;AACjE,QAAK,MAAM,eAAe,OAAO,OAAO,OAAO;AAC/C,QAAK,MAAM,aAAa,GAAG,OAAO;AAClC,QAAK,MAAM,YAAY,OAAO,OAAO,KAAK;AAC1C,OAAI,gBAAgB,kBAAmB,MAAK,MAAM,SAAS,GAAG,OAAO;AACrE,OAAI,KAAM,MAAK,MAAM,QAAQ,KAAK,QAAQ,SAAS,GAAG,OAAO,CAAC;IAC9D;;;AAIN,eAAe,OAAO,iBAAiB,oBAAoB;AAE3D,SAAS,SAAS,KAAa,KAAa,OAAO,OAAO,mBAAmB;CAC3E,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,MAAM,KAAK,MAAM,OAAO,EAAE,MAAM,OAAO,EAAE,EAAE,EAAE;CAC7E,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,KAAK,KAAK,OAAO,EAAE,KAAK,EAAE,IAAI;CAClE,MAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,OAAO,GAAG,GAAG,MAAM,IAAI,MAAM;AAE1E,KAAI,OAAO,KAAK,QAAQ,EAAG,OAAM,OAAO,GAAG,GAAG,GAAG,EAAE;AACnD,KAAI,OAAO,KAAK,MAAM,IAAK,OAAM,OAAO,IAAI,GAAG,GAAG,IAAI;AACtD,QAAO"}

package/dist/esm/popover.js

@@ -0,0 +1,88 @@
+import { QUICK_EVENT, attr, on, onHotReload } from "./utils.js";
+import { autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
+
+//#region src/popover.ts
+const ATTR_PLACEMENT = "data-placement";
+const ATTR_FLOATING = "data-floating";
+const ATTR_AUTOPLACEMENT = "data-autoplacement";
+const CSS_FLOATING = "--_ds-floating";
+const CSS_FLOATING_ARROW_X = "--_ds-floating-arrow-x";
+const CSS_FLOATING_ARROW_Y = "--_ds-floating-arrow-y";
+const CSS_FLOATING_OVERSCROLL = "--_ds-floating-overscroll";
+const POPOVERS = /* @__PURE__ */ new Map();
+function handleToggle(event) {
+	const { newState, target, source = event.detail } = event;
+	if (!isDSFloating(target)) return;
+	if (newState === "closed") return POPOVERS.get(target)?.();
+	if (!source || source === target) return;
+	const padding = 10;
+	const overscroll = getCSSProp(target, CSS_FLOATING_OVERSCROLL);
+	const placement = attr(target, ATTR_PLACEMENT) || attr(source, ATTR_PLACEMENT) || getCSSProp(target, CSS_FLOATING);
+	const shiftOffset = placement.match(/left|right/gi) ? source.offsetHeight : source.offsetWidth;
+	const autoPlacement = attr(target, ATTR_AUTOPLACEMENT) || attr(source, ATTR_AUTOPLACEMENT);
+	const options = {
+		strategy: "absolute",
+		placement,
+		middleware: [
+			offset(parseFloat(getComputedStyle(target, "::before").height) || 0),
+			shift({
+				padding,
+				limiter: limitShift({ offset: { mainAxis: shiftOffset } })
+			}),
+			arrowPseudo(),
+			...autoPlacement !== "false" ? [flip({
+				padding,
+				crossAxis: false
+			})] : [],
+			...overscroll ? [size({ apply({ availableHeight }) {
+				if (overscroll === "fit") target.style.width = `${source.clientWidth}px`;
+				target.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+			} })] : []
+		]
+	};
+	const unfloat = autoUpdate(source, target, async () => {
+		if (!source?.isConnected) return POPOVERS.get(target)?.();
+		const { x, y } = await computePosition(source, target, options);
+		target.style.translate = `${x}px ${y}px`;
+	});
+	POPOVERS.set(target, () => POPOVERS.delete(target) && unfloat());
+}
+function handleBeforeToggle({ target: el, newState }) {
+	if (newState === "open" && isDSFloating(el)) attr(el, "popover", "manual");
+}
+function handleClickOutside({ target: el }) {
+	for (const [popover] of POPOVERS) if (!popover.contains(el)) {
+		const id = popover.id;
+		const trigger = `[popovertarget="${id}"],[commandfor="${id}"]`;
+		if (!el?.closest?.(trigger)) popover.hidePopover();
+	}
+}
+function handleKeydown(event) {
+	const last = event.key === "Escape" && Array.from(POPOVERS.keys()).pop();
+	if (last) last.hidePopover();
+	if (last) event.preventDefault?.();
+}
+onHotReload("popover", () => [
+	on(document, "beforetoggle", handleBeforeToggle, QUICK_EVENT),
+	on(document, "click", handleClickOutside, QUICK_EVENT),
+	on(document, "keydown", handleKeydown),
+	on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)
+]);
+const getCSSProp = (el, prop) => getComputedStyle(el).getPropertyValue(prop).trim();
+const isDSFloating = (el) => el instanceof HTMLElement && !!getCSSProp(el, CSS_FLOATING);
+const 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(CSS_FLOATING_ARROW_X, x);
+		target.style.setProperty(CSS_FLOATING_ARROW_Y, y);
+		attr(target, ATTR_FLOATING, data.placement);
+		return data;
+	}
+});
+
+//#endregion
+//# sourceMappingURL=popover.js.map

package/dist/esm/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../src/popover.ts"],"sourcesContent":["import type { ComputePositionConfig, MiddlewareState } from '@floating-ui/dom';\r\nimport {\r\n  autoUpdate,\r\n  computePosition,\r\n  limitShift,\r\n  flip,\r\n  offset,\r\n  shift,\r\n  size,\r\n} from '@floating-ui/dom';\r\nimport { attr, on, onHotReload, QUICK_EVENT } from './utils';\r\n\r\nconst ATTR_PLACEMENT = 'data-placement';\r\nconst ATTR_FLOATING = 'data-floating';\r\nconst ATTR_AUTOPLACEMENT = 'data-autoplacement';\r\nconst CSS_FLOATING = '--_ds-floating';\r\nconst CSS_FLOATING_ARROW_X = '--_ds-floating-arrow-x';\r\nconst CSS_FLOATING_ARROW_Y = '--_ds-floating-arrow-y';\r\nconst CSS_FLOATING_OVERSCROLL = '--_ds-floating-overscroll';\r\nconst POPOVERS = new Map<HTMLElement, () => void>();\r\n\r\n// Sometimes use \"ds-toggle\" event while waiting for better support of\r\n// event.source (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source)\r\ntype DSToggleEvent = Partial<ToggleEvent> & {\r\n  detail?: HTMLElement;\r\n  source?: HTMLElement;\r\n};\r\n\r\nfunction handleToggle(event: DSToggleEvent) {\r\n  const { newState, target, source = event.detail } = event;\r\n\r\n  if (!isDSFloating(target)) return;\r\n  if (newState === 'closed') return POPOVERS.get(target)?.(); // Cleanup on close\r\n  if (!source || source === target) return; // No need to update\r\n  const padding = 10;\r\n  const overscroll = getCSSProp(target, CSS_FLOATING_OVERSCROLL);\r\n  const placement = attr(target, ATTR_PLACEMENT) || attr(source, ATTR_PLACEMENT) || getCSSProp(target, CSS_FLOATING);\r\n  const shiftOffset = placement.match(/left|right/gi) ? source.offsetHeight : source.offsetWidth;\r\n  const autoPlacement = attr(target, ATTR_AUTOPLACEMENT) || attr(source, ATTR_AUTOPLACEMENT);\r\n  const options = {\r\n    strategy: 'absolute',\r\n    placement,\r\n    middleware: [\r\n      offset(parseFloat(getComputedStyle(target, '::before').height) || 0),\r\n      shift({\r\n        padding,\r\n        limiter: limitShift({ offset: { mainAxis: shiftOffset } }) // Prevent from shifing away from source\r\n      }),\r\n      arrowPseudo(),\r\n      ...(autoPlacement !== 'false' ? [flip({ padding, crossAxis: false })] : []),\r\n      ...(overscroll\r\n        ? [\r\n            size({\r\n              apply({ availableHeight }) {\r\n                if (overscroll === 'fit')\r\n                  target.style.width = `${source.clientWidth}px`;\r\n                target.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;\r\n              },\r\n            }),\r\n          ]\r\n        : []),\r\n    ],\r\n  } as ComputePositionConfig;\r\n  const unfloat = autoUpdate(source, target, async () => {\r\n    if (!source?.isConnected) return POPOVERS.get(target)?.(); // Cleanup if source element is removed\r\n    const { x, y } = await computePosition(source, target, options);\r\n    target.style.translate = `${x}px ${y}px`;\r\n  });\r\n  POPOVERS.set(target, () => POPOVERS.delete(target) && unfloat());\r\n}\r\n\r\nfunction handleBeforeToggle({ target: el, newState }: Partial<ToggleEvent>) {\r\n  if (newState === 'open' && isDSFloating(el)) attr(el, 'popover', 'manual'); // Make manual to prevent closing when clicking scrollbar\r\n}\r\n\r\n// Since we use manual popover, we also manually need to close on outside click\r\nfunction handleClickOutside({ target: el }: Event) {\r\n  for (const [popover] of POPOVERS)\r\n    if (!popover.contains(el as Node)) {\r\n      const id = popover.id;\r\n      const trigger = `[popovertarget=\"${id}\"],[commandfor=\"${id}\"]`;\r\n      if (!(el as Element)?.closest?.(trigger)) popover.hidePopover();\r\n    }\r\n}\r\n\r\nfunction handleKeydown(event: Partial<KeyboardEvent>) {\r\n  const last = event.key === 'Escape' && Array.from(POPOVERS.keys()).pop();\r\n  if (last) last.hidePopover();\r\n  if (last) event.preventDefault?.(); // Prevent minimize fullscreen Safari\r\n}\r\n\r\nonHotReload('popover', () => [\r\n  on(document, 'beforetoggle', handleBeforeToggle, QUICK_EVENT), // Use capture since toggle does not bubble\r\n  on(document, 'click', handleClickOutside, QUICK_EVENT), // Close open popovers on outside click\r\n  on(document, 'keydown', handleKeydown),\r\n  on(document, 'toggle ds-toggle-source', handleToggle, QUICK_EVENT), // Use capture since the toggle event does not bubble\r\n]);\r\n\r\nconst getCSSProp = (el: Element, prop: string) =>\r\n  getComputedStyle(el).getPropertyValue(prop).trim();\r\n\r\nconst isDSFloating = (el?: EventTarget | null): el is HTMLElement =>\r\n  el instanceof HTMLElement && !!getCSSProp(el, CSS_FLOATING);\r\n\r\nconst arrowPseudo = () => ({\r\n  name: 'arrowPseudo',\r\n  fn(data: MiddlewareState) {\r\n    const target = data.elements.floating;\r\n    const source = data.rects.reference;\r\n    const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;\r\n    const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;\r\n\r\n    target.style.setProperty(CSS_FLOATING_ARROW_X, x);\r\n    target.style.setProperty(CSS_FLOATING_ARROW_Y, y);\r\n    attr(target, ATTR_FLOATING, data.placement);\r\n    return data;\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/esm/src/breadcrumbs.d.ts

@@ -0,0 +1,16 @@
+import { DSElement } from './utils';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-breadcrumbs': DSBreadcrumbsElement;
+    }
+}
+export declare class DSBreadcrumbsElement extends DSElement {
+    _items?: HTMLCollectionOf<HTMLAnchorElement>;
+    _unresize?: () => void;
+    _unmutate?: () => void;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/esm/src/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,SAAS,CAAC;AAEjB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF;AAKD,qBAAa,oBAAqB,SAAQ,SAAS;IACjD,MAAM,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,MAAM,KAAK,kBAAkB,aAE5B;IACD,iBAAiB;IAWjB,wBAAwB;IAoBxB,oBAAoB;CAKrB"}

package/dist/esm/src/clickdelegatefor.d.ts

@@ -0,0 +1,2 @@
+export declare const handleClickDelegateFor: (event: MouseEvent) => void;
+//# sourceMappingURL=clickdelegatefor.d.ts.map

package/dist/esm/src/clickdelegatefor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickdelegatefor.d.ts","sourceRoot":"","sources":["../../../src/clickdelegatefor.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB,GAAI,OAAO,UAAU,SAcvD,CAAC"}

package/dist/esm/src/details.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=details.d.ts.map

package/dist/esm/src/details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../../../src/details.ts"],"names":[],"mappings":""}

package/dist/esm/src/dialog.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dialog.d.ts.map

package/dist/esm/src/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog.ts"],"names":[],"mappings":""}

package/dist/esm/src/error-summary.d.ts

@@ -0,0 +1,12 @@
+import { DSElement } from './utils';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-error-summary': DSErrorSummaryElement;
+    }
+}
+export declare class DSErrorSummaryElement extends DSElement {
+    connectedCallback(): void;
+    handleEvent({ target }: Partial<Event>): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=error-summary.d.ts.map

package/dist/esm/src/error-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-summary.d.ts","sourceRoot":"","sources":["../../../src/error-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAA+B,MAAM,SAAS,CAAC;AAEvE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF;AAED,qBAAa,qBAAsB,SAAQ,SAAS;IAClD,iBAAiB;IAIjB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC;IAOtC,oBAAoB;CAGrB"}

package/dist/esm/src/field.d.ts

@@ -0,0 +1,15 @@
+import { DSElement } from './utils';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-field': DSFieldElement;
+    }
+}
+export declare class DSFieldElement extends DSElement {
+    constructor();
+    connectedCallback(): void;
+    handleEvent({ target }: {
+        target: EventTarget | null;
+    }): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=field.d.ts.map

package/dist/esm/src/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAWV,MAAM,SAAS,CAAC;AAEjB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;AAgID,qBAAa,cAAe,SAAQ,SAAS;;IAQ3C,iBAAiB;IAKjB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE;IAItD,oBAAoB;CAIrB"}

package/dist/esm/src/index.d.ts

@@ -0,0 +1,14 @@
+export * from '@u-elements/u-datalist';
+export * from './breadcrumbs';
+export * from './error-summary';
+export * from './field';
+export * from './pagination';
+export * from './suggestion';
+export * from './tabs';
+import './clickdelegatefor';
+import './details';
+import './dialog';
+import './popover';
+import './toggle-group';
+import './tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,gBAAgB,CAAC;AACxB,OAAO,WAAW,CAAC"}

package/dist/esm/src/pagination.d.ts

@@ -0,0 +1,27 @@
+import { DSElement } from './utils';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-pagination': DSPaginationElement;
+    }
+}
+export declare const pagination: ({ current, total, show }: {
+    current?: number | undefined;
+    total?: number | undefined;
+    show?: number | undefined;
+}) => {
+    prev: number;
+    next: number;
+    pages: {
+        current: false | "page";
+        key: string;
+        page: number;
+    }[];
+};
+export declare class DSPaginationElement extends DSElement {
+    _unmutate?: () => void;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}
+//# sourceMappingURL=pagination.d.ts.map

package/dist/esm/src/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAEV,MAAM,SAAS,CAAC;AAEjB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF;AAQD,eAAO,MAAM,UAAU,GAAI;;;;CAAqC;;;;;;;;CAQ9D,CAAC;AAEH,qBAAa,mBAAoB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,MAAM,KAAK,kBAAkB,aAE5B;IACD,iBAAiB;IAWjB,oBAAoB;IAIpB,MAAM;CAwBP"}

package/dist/esm/src/popover.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=popover.d.ts.map

package/dist/esm/src/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/popover.ts"],"names":[],"mappings":""}

package/dist/esm/src/suggestion.d.ts

@@ -0,0 +1,11 @@
+import { UHTMLComboboxElement } from '@u-elements/u-combobox';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-suggestion': DSSuggestionElement;
+    }
+}
+export declare class DSSuggestionElement extends UHTMLComboboxElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=suggestion.d.ts.map

package/dist/esm/src/suggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion.d.ts","sourceRoot":"","sources":["../../../src/suggestion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF;AAED,qBAAa,mBAAoB,SAAQ,oBAAoB;IAC3D,iBAAiB;IAIjB,oBAAoB;CAIrB"}

package/dist/esm/src/tabs.d.ts

@@ -0,0 +1,18 @@
+import * as UTabs from '@u-elements/u-tabs';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-tabs': DSTabsElement;
+        'ds-tablist': DSTabListElement;
+        'ds-tab': DSTabElement;
+        'ds-tabpanel': DSTabPanelElement;
+    }
+}
+export declare class DSTabsElement extends UTabs.UHTMLTabsElement {
+}
+export declare class DSTabListElement extends UTabs.UHTMLTabListElement {
+}
+export declare class DSTabElement extends UTabs.UHTMLTabElement {
+}
+export declare class DSTabPanelElement extends UTabs.UHTMLTabPanelElement {
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/esm/src/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;QACzB,YAAY,EAAE,gBAAgB,CAAC;QAC/B,QAAQ,EAAE,YAAY,CAAC;QACvB,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF;AAED,qBAAa,aAAc,SAAQ,KAAK,CAAC,gBAAgB;CAAG;AAC5D,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB;CAAG;AAClE,qBAAa,YAAa,SAAQ,KAAK,CAAC,eAAe;CAAG;AAC1D,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB;CAAG"}

package/dist/esm/src/toggle-group.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/esm/src/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group.ts"],"names":[],"mappings":""}

package/dist/esm/src/tooltip.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/esm/src/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip.ts"],"names":[],"mappings":""}

package/dist/esm/src/utils.d.ts

@@ -0,0 +1,78 @@
+export declare const QUICK_EVENT: {
+    passive: boolean;
+    capture: boolean;
+};
+export declare const isBrowser: () => boolean;
+export declare const isWindows: () => boolean;
+export declare const DSElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare function debounce<T extends unknown[]>(callback: (...args: T) => void, delay: number): (this: unknown, ...args: T) => void;
+/**
+ * attr
+ * @description Utility to quickly get, set and remove attributes
+ * @param el The Element to read/write attributes from
+ * @param name The attribute name to get, set or remove, or a object to set multiple attributes
+ * @param value A valid attribute value or null to remove attribute
+ */
+export declare const attr: (el: Element, name: string, value?: string | null) => string | null;
+/**
+ * attrRequiredWarning
+ * @description Warn if element is missing attribute
+ * @param el The Element to read/write attributes from
+ * @param ...names The attribute name(s) check
+ */
+export declare const attrRequiredWarning: (el: Element, name: string) => true | void;
+/**
+ * on
+ * @param el The Element to use as EventTarget
+ * @param types A space separated string of event types
+ * @param listener An event listener function or listener object
+ */
+export declare const on: (el: Node | Window | ShadowRoot, ...rest: Parameters<typeof Element.prototype.addEventListener>) => (() => void);
+/**
+ * off
+ * @param el The Element to use as EventTarget
+ * @param types A space separated string of event types
+ * @param listener An event listener function or listener object
+ */
+export declare const off: (el: Node | Window | ShadowRoot, ...rest: Parameters<typeof Element.prototype.removeEventListener>) => void;
+declare global {
+    interface Window {
+        _dsHotReloadCleanup?: Map<string, Array<() => void>>;
+    }
+}
+/**
+ * onHotReload
+ * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading
+ * @param key The key to identify setup and corresponding cleanup
+ * @param callback The callback to run when the page is ready
+ */
+export declare const onHotReload: (key: string, setup: () => Array<() => void>) => void;
+/**
+ * Speed up MutationObserver by debouncing and only running when page is visible
+ * @return new MutaionObserver
+ */
+export declare const onMutation: (el: Node, callback: (observer: MutationObserver) => void, options: MutationObserverInit & {
+    debounce?: number | false;
+}) => () => void;
+/**
+ * tag
+ * @description creates element and assigns properties
+ * @param tagName The tagname of element to create
+ * @param attrs Optional attributes to add to the element
+ * @param text Optional text content to add to the element
+ * @return HTMLElement with props
+ */
+export declare const tag: <TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, attrs?: Record<string, string | null> | null) => HTMLElementTagNameMap[TagName];
+/**
+ * customElements.define
+ * @description Defines a customElement if running in browser and if not already registered
+ * Scoped/named "customElements.define" so @custom-elements-manifest/analyzer can find tag names
+ */
+export declare const customElements: {
+    define: (name: string, instance: CustomElementConstructor) => true | void | CustomElementConstructor;
+};
+export declare function useId(el?: Element | null): string;
+//# sourceMappingURL=utils.d.ts.map