@skf-design-system/ui-components 1.0.2-beta.16 → 1.0.2-beta.18

package/dist/components/menu/menu.component.js

@@ -6,7 +6,7 @@ const e = class e extends t {
   }
   /** @internal */
   addEventListeners(i) {
-    i.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
+    i.addEventListener(this.triggerEvent, this.open, { signal: this._signal });
   }
 };
 e.styles = [t.styles, a];

package/dist/components/pagination/pagination.component.d.ts

@@ -0,0 +1,40 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
+import { type Language } from '../../utilities/localize.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-pagination>` is a component that displays a list of actions or options
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @tagname skf-pagination
+ */
+export declare class SkfPagination extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** The number of items to display on each 'page' */
+    itemsPerPage: number;
+    /** Sets the internal language of the component */
+    lang: Language;
+    /** If true, hides both the delimiter and the total value */
+    noTotal: boolean;
+    /** The active page number. */
+    page: number;
+    /** The total number of items being paginated. */
+    total: number;
+    /** @internal Event that triggers when user selects previous or next page. Fires 'change' event. */
+    _handlePageChange(page: number): void;
+    /** @internal */
+    private _getPageStart;
+    /** @internal */
+    private _getPageEnd;
+    /** @internal */
+    private get _disabledNext();
+    /** @internal */
+    private get disabledPrev();
+    /** @internal */
+    private _handlePrev;
+    /** @internal */
+    private _handleNext;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/pagination/pagination.component.js

@@ -0,0 +1,101 @@
+var m = (e) => {
+  throw TypeError(e);
+};
+var c = (e, a, t) => a.has(e) || m("Cannot " + t);
+var l = (e, a, t) => (c(e, a, "read from private field"), t ? t.call(e) : a.get(e)), u = (e, a, t) => a.has(e) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), P = (e, a, t, i) => (c(e, a, "write to private field"), i ? i.call(e, t) : a.set(e, t), t);
+import "../icon/icon.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { componentStyles as _ } from "../../styles/component.styles.js";
+import { LocalizeController as v } from "../../utilities/localize.js";
+import { nothing as y, html as b } from "lit";
+import { property as n } from "lit/decorators.js";
+import { styles as $ } from "./pagination.styles.js";
+var x = Object.defineProperty, h = (e, a, t, i) => {
+  for (var s = void 0, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (s = d(a, t, s) || s);
+  return s && x(a, t, s), s;
+}, r;
+const g = class g extends f {
+  constructor() {
+    super(...arguments);
+    u(this, r);
+    P(this, r, new v(this)), this.itemsPerPage = 50, this.lang = "en", this.noTotal = !1, this.page = 1, this.total = 0, this._handlePrev = () => {
+      this.disabledPrev || this._handlePageChange(this.page - 1);
+    }, this._handleNext = () => {
+      this._disabledNext || this._handlePageChange(this.page + 1);
+    };
+  }
+  /** @internal Event that triggers when user selects previous or next page. Fires 'change' event. */
+  _handlePageChange(t) {
+    this.page = t, this.dispatchEvent(
+      new CustomEvent("page-change", {
+        detail: { page: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** @internal */
+  _getPageStart() {
+    const t = this.page, i = this.itemsPerPage;
+    return (t - 1) * i + 1;
+  }
+  /** @internal */
+  _getPageEnd() {
+    const t = this._getPageStart(), i = this.itemsPerPage, s = this.total;
+    return Math.min(t + i - 1, s);
+  }
+  /** @internal */
+  get _disabledNext() {
+    return this._getPageEnd() >= this.total;
+  }
+  /** @internal */
+  get disabledPrev() {
+    return this.page <= 1;
+  }
+  render() {
+    const t = this._getPageStart(), i = this._getPageEnd(), s = this.total;
+    return b`
+			<div id="root">
+				<span id="pager">${t} - ${i}</span>
+				${this.noTotal ? y : b`<span id="delimiter">${l(this, r).term("of")} ${s}</span>`}
+				<button
+					@click=${this._handlePrev}
+					?disabled=${this.disabledPrev}
+					aria-label=${l(this, r).term("previousPage")}
+					type="button"
+				>
+					<skf-icon data-color="custom" name="chevronLeft"></skf-icon>
+				</button>
+				<button
+					@click=${this._handleNext}
+					?disabled=${this._disabledNext}
+					aria-label=${l(this, r).term("nextPage")}
+					type="button"
+				>
+					<skf-icon data-color="custom" name="chevronRight"></skf-icon>
+				</button>
+			</div>
+		`;
+  }
+};
+r = new WeakMap(), g.styles = [_, $];
+let o = g;
+h([
+  n({ type: Number, attribute: "items-per-page" })
+], o.prototype, "itemsPerPage");
+h([
+  n({ type: String })
+], o.prototype, "lang");
+h([
+  n({ type: Boolean, attribute: "no-total" })
+], o.prototype, "noTotal");
+h([
+  n({ type: Number })
+], o.prototype, "page");
+h([
+  n({ type: Number })
+], o.prototype, "total");
+export {
+  o as SkfPagination
+};

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,8 @@
+import { SkfPagination } from './pagination.component.js';
+export * from './pagination.component.js';
+export default SkfPagination;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-pagination': SkfPagination;
+    }
+}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,6 @@
+import { SkfPagination as a } from "./pagination.component.js";
+a.define("skf-pagination");
+export {
+  a as SkfPagination,
+  a as default
+};

package/dist/components/pagination/pagination.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,50 @@
+import { css as o } from "lit";
+const t = o`
+	@layer components {
+		@layer base {
+			:host {
+				contain: layout;
+			}
+
+			#root {
+				--_skf-pagination-btn-color: var(--skf-icon-color-secondary);
+
+				align-items: center;
+				display: inline-flex;
+			}
+
+			#pager {
+				font-weight: var(--skf-font-weight-bold);
+			}
+
+			#delimiter {
+				margin-inline: var(--skf-spacing-25);
+			}
+
+			button {
+				border-radius: var(--skf-border-radius-sm);
+				color: var(--_skf-pagination-btn-color);
+				display: flex;
+				margin-inline-start: var(--skf-spacing-50);
+				place-content: center;
+			}
+		}
+
+		@layer states {
+			button:focus-visible {
+				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+			}
+
+			button:disabled {
+				--_skf-pagination-btn-color: var(--skf-interactive-icon-color-disabled);
+			}
+
+			button:not(:disabled):hover {
+				background-color: var(--skf-interactive-bg-color-secondary-hover);
+			}
+		}
+	}
+`;
+export {
+  t as styles
+};

package/dist/components/popover/popover.component.js

@@ -16,7 +16,7 @@ const n = class n extends h {
   }
   /** @internal */
   addEventListeners(r) {
-    r.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
+    r.addEventListener(this.triggerEvent, this.open, { signal: this._signal });
   }
 };
 n.styles = [h.styles, w];

package/dist/components/select/select.component.d.ts

@@ -55,8 +55,8 @@ export declare class SkfSelect extends FormBase {
     set selectedValues(values: string[]);
     get selectedValues(): string[];
     /** A readonly property that returns the selected slot(s) text content in a array */
-    set selectedOptionsText(values: string[]);
-    get selectedOptionsText(): string[];
+    set selectedOptionsText(values: (string | null)[]);
+    get selectedOptionsText(): (string | null)[];
     /** If defined, displays provided label */
     label?: string;
     /** Sets the internal language of the component */

package/dist/components/select/select.component.js

@@ -258,7 +258,7 @@ const f = class f extends L {
 									${this.selectedOptions.map(
       (t) => p`
 											<skf-tag
-												style="${`view-transition-name: tag-${t.textContent.replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
+												style="${`view-transition-name: tag-${t.textContent}-${t.value.replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
 												removable
 												.callbackOnRemove=${(e) => (e.stopPropagation(), e.preventDefault(), document.startViewTransition || t.removeAttribute("selected"), document.startViewTransition(() => {
         t.removeAttribute("selected");

package/dist/components/tooltip/tooltip.component.js

@@ -14,13 +14,13 @@ const e = class e extends t {
       () => {
         this.close("blur");
       },
-      { signal: this.signal }
-    ), s.addEventListener("focus", this.open, { signal: this.signal }), s.addEventListener("mouseenter", this.open, { signal: this.signal }), s.addEventListener(
+      { signal: this._signal }
+    ), s.addEventListener("focus", this.open, { signal: this._signal }), s.addEventListener("mouseenter", this.open, { signal: this._signal }), s.addEventListener(
       "mouseleave",
       () => {
         this.close("mouseleave");
       },
-      { signal: this.signal }
+      { signal: this._signal }
     );
   }
 };

package/dist/custom-elements.json

@@ -4856,6 +4856,155 @@
       ],
       "typeDefinitionPath": "components/menu/menu.d.ts"
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/pagination/pagination.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-pagination>` is a component that displays a list of actions or options",
+          "name": "SkfPagination",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "itemsPerPage",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "The number of items to display on each 'page'",
+              "attribute": "items-per-page"
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "Language"
+              },
+              "default": "'en'",
+              "description": "Sets the internal language of the component",
+              "attribute": "lang",
+              "expandedType": {
+                "text": "'en' | 'es' | 'pt' | 'sv'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "noTotal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, hides both the delimiter and the total value",
+              "attribute": "no-total"
+            },
+            {
+              "kind": "field",
+              "name": "page",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The active page number.",
+              "attribute": "page"
+            },
+            {
+              "kind": "field",
+              "name": "total",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The total number of items being paginated.",
+              "attribute": "total"
+            }
+          ],
+          "events": [
+            {
+              "name": "page-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "items-per-page",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "The number of items to display on each 'page'",
+              "fieldName": "itemsPerPage"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "Language"
+              },
+              "default": "'en'",
+              "description": "Sets the internal language of the component",
+              "fieldName": "lang",
+              "expandedType": {
+                "text": "'en' | 'es' | 'pt' | 'sv'"
+              }
+            },
+            {
+              "name": "no-total",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, hides both the delimiter and the total value",
+              "fieldName": "noTotal"
+            },
+            {
+              "name": "page",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The active page number.",
+              "fieldName": "page"
+            },
+            {
+              "name": "total",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The total number of items being paginated.",
+              "fieldName": "total"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-pagination",
+          "customElement": true,
+          "modulePath": "src/components/pagination/pagination.component.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfPagination",
+          "declaration": {
+            "name": "SkfPagination",
+            "module": "src/components/pagination/pagination.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/pagination/pagination.d.ts"
+    },
     {
       "kind": "javascript-module",
       "path": "components/popover/popover.js",

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as SkfMenuItem } from './components/menu/menu-item.js';
 export { default as SkfMenu } from './components/menu/menu.js';
 export { default as SkfNavItem } from './components/nav/nav-item.js';
 export { default as SkfNav } from './components/nav/nav.js';
+export { default as SkfPagination } from './components/pagination/pagination.js';
 export { default as SkfPopover } from './components/popover/popover.js';
 export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';

package/dist/index.js

@@ -23,6 +23,7 @@ import "./components/menu/menu-item.js";
 import "./components/menu/menu.js";
 import "./components/nav/nav-item.js";
 import "./components/nav/nav.js";
+import "./components/pagination/pagination.js";
 import "./components/popover/popover.js";
 import "./components/progress/progress.js";
 import "./components/radio/radio.js";
@@ -43,95 +44,97 @@ import "./components/toast/toast-item.js";
 import "./components/toast/toast-wrapper.js";
 import "./components/toast/toast.js";
 import "./components/tooltip/tooltip.js";
-import { SkfAccordionItem as U } from "./components/accordion/accordion-item.component.js";
-import { SkfAccordion as X } from "./components/accordion/accordion.component.js";
-import { SkfAlert as Z } from "./components/alert/alert.component.js";
-import { SkfBreadcrumbItem as $ } from "./components/breadcrumb/breadcrumb-item.component.js";
-import { SkfBreadcrumb as ro } from "./components/breadcrumb/breadcrumb.component.js";
-import { SkfButton as po } from "./components/button/button.component.js";
-import { SkfCard as eo } from "./components/card/card.component.js";
-import { SkfCheckbox as io } from "./components/checkbox/checkbox.component.js";
-import { SkfDatepickerCalendar as ko } from "./components/datepicker/datepicker-calendar.component.js";
-import { SkfDatepickerPopup as ao } from "./components/datepicker/datepicker-popup.component.js";
-import { SkfDatepicker as co } from "./components/datepicker/datepicker.component.js";
-import { SkfDialog as Io } from "./components/dialog/dialog.component.js";
+import { SkfAccordionItem as V } from "./components/accordion/accordion-item.component.js";
+import { SkfAccordion as Y } from "./components/accordion/accordion.component.js";
+import { SkfAlert as _ } from "./components/alert/alert.component.js";
+import { SkfBreadcrumbItem as oo } from "./components/breadcrumb/breadcrumb-item.component.js";
+import { SkfBreadcrumb as to } from "./components/breadcrumb/breadcrumb.component.js";
+import { SkfButton as mo } from "./components/button/button.component.js";
+import { SkfCard as fo } from "./components/card/card.component.js";
+import { SkfCheckbox as So } from "./components/checkbox/checkbox.component.js";
+import { SkfDatepickerCalendar as xo } from "./components/datepicker/datepicker-calendar.component.js";
+import { SkfDatepickerPopup as no } from "./components/datepicker/datepicker-popup.component.js";
+import { SkfDatepicker as uo } from "./components/datepicker/datepicker.component.js";
+import { SkfDialog as To } from "./components/dialog/dialog.component.js";
 import { SkfDivider as lo } from "./components/divider/divider.component.js";
-import { SkfDrawer as bo } from "./components/drawer/drawer.component.js";
-import { SkfHeader as Do } from "./components/header/header.component.js";
+import { SkfDrawer as so } from "./components/drawer/drawer.component.js";
+import { SkfHeader as Bo } from "./components/header/header.component.js";
 import { SkfHeading as vo } from "./components/heading/heading.component.js";
-import { SkfIcon as Po } from "./components/icon/icon.component.js";
-import { SkfInput as Lo } from "./components/input/input.component.js";
-import { SkfLink as wo } from "./components/link/link.component.js";
-import { SkfLoader as Mo } from "./components/loader/loader.component.js";
-import { SkfLogo as Oo } from "./components/logo/logo.component.js";
-import { SkfMenuItem as Ro } from "./components/menu/menu-item.component.js";
-import { SkfMenu as jo } from "./components/menu/menu.component.js";
-import { SkfNavItem as yo } from "./components/nav/nav-item.component.js";
-import { SkfNav as Eo } from "./components/nav/nav.component.js";
-import { SkfPopover as Jo } from "./components/popover/popover.component.js";
-import { SkfProgress as Qo } from "./components/progress/progress.component.js";
-import { SkfRadio as Vo } from "./components/radio/radio.component.js";
-import { SkfSegmentedButtonItem as Yo } from "./components/segmented-button/segmented-button-item.component.js";
-import { SkfSegmentedButton as _o } from "./components/segmented-button/segmented-button.component.js";
-import { SkfSelectOptionGroup as or } from "./components/select/select-option-group.component.js";
-import { SkfSelectOption as tr } from "./components/select/select-option.component.js";
-import { SkfSelect as mr } from "./components/select/select.component.js";
-import { SkfStepperItem as fr } from "./components/stepper/stepper-item.component.js";
-import { SkfStepper as Sr } from "./components/stepper/stepper.component.js";
-import { SkfSwitch as xr } from "./components/switch/switch.component.js";
-import { SkfTabPanel as nr } from "./components/tabs/tab-panel.component.js";
-import { SkfTab as dr } from "./components/tabs/tab.component.js";
-import { SkfTabs as Ir } from "./components/tabs/tabs.component.js";
-import { SkfTag as lr } from "./components/tag/tag.component.js";
-import { SkfTextArea as br } from "./components/textarea/textarea.component.js";
-import { SkfToastItem as Dr } from "./components/toast/toast-item.component.js";
-import { SkfToastWrapper as vr } from "./components/toast/toast-wrapper.component.js";
-import { SkfToast as Pr } from "./components/toast/toast.component.js";
-import { SkfTooltip as Lr } from "./components/tooltip/tooltip.component.js";
+import { SkfIcon as Co } from "./components/icon/icon.component.js";
+import { SkfInput as ho } from "./components/input/input.component.js";
+import { SkfLink as Ho } from "./components/link/link.component.js";
+import { SkfLoader as No } from "./components/loader/loader.component.js";
+import { SkfLogo as Go } from "./components/logo/logo.component.js";
+import { SkfMenuItem as Wo } from "./components/menu/menu-item.component.js";
+import { SkfMenu as qo } from "./components/menu/menu.component.js";
+import { SkfNavItem as zo } from "./components/nav/nav-item.component.js";
+import { SkfNav as Fo } from "./components/nav/nav.component.js";
+import { SkfPagination as Ko } from "./components/pagination/pagination.component.js";
+import { SkfPopover as Uo } from "./components/popover/popover.component.js";
+import { SkfProgress as Xo } from "./components/progress/progress.component.js";
+import { SkfRadio as Zo } from "./components/radio/radio.component.js";
+import { SkfSegmentedButtonItem as $o } from "./components/segmented-button/segmented-button-item.component.js";
+import { SkfSegmentedButton as rr } from "./components/segmented-button/segmented-button.component.js";
+import { SkfSelectOptionGroup as pr } from "./components/select/select-option-group.component.js";
+import { SkfSelectOption as er } from "./components/select/select-option.component.js";
+import { SkfSelect as ir } from "./components/select/select.component.js";
+import { SkfStepperItem as kr } from "./components/stepper/stepper-item.component.js";
+import { SkfStepper as ar } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as cr } from "./components/switch/switch.component.js";
+import { SkfTabPanel as ur } from "./components/tabs/tab-panel.component.js";
+import { SkfTab as Tr } from "./components/tabs/tab.component.js";
+import { SkfTabs as lr } from "./components/tabs/tabs.component.js";
+import { SkfTag as sr } from "./components/tag/tag.component.js";
+import { SkfTextArea as Br } from "./components/textarea/textarea.component.js";
+import { SkfToastItem as vr } from "./components/toast/toast-item.component.js";
+import { SkfToastWrapper as Cr } from "./components/toast/toast-wrapper.component.js";
+import { SkfToast as hr } from "./components/toast/toast.component.js";
+import { SkfTooltip as Hr } from "./components/tooltip/tooltip.component.js";
 export {
-  X as SkfAccordion,
-  U as SkfAccordionItem,
-  Z as SkfAlert,
-  ro as SkfBreadcrumb,
-  $ as SkfBreadcrumbItem,
-  po as SkfButton,
-  eo as SkfCard,
-  io as SkfCheckbox,
-  co as SkfDatepicker,
-  ko as SkfDatepickerCalendar,
-  ao as SkfDatepickerPopup,
-  Io as SkfDialog,
+  Y as SkfAccordion,
+  V as SkfAccordionItem,
+  _ as SkfAlert,
+  to as SkfBreadcrumb,
+  oo as SkfBreadcrumbItem,
+  mo as SkfButton,
+  fo as SkfCard,
+  So as SkfCheckbox,
+  uo as SkfDatepicker,
+  xo as SkfDatepickerCalendar,
+  no as SkfDatepickerPopup,
+  To as SkfDialog,
   lo as SkfDivider,
-  bo as SkfDrawer,
-  Do as SkfHeader,
+  so as SkfDrawer,
+  Bo as SkfHeader,
   vo as SkfHeading,
-  Po as SkfIcon,
-  Lo as SkfInput,
-  wo as SkfLink,
-  Mo as SkfLoader,
-  Oo as SkfLogo,
-  jo as SkfMenu,
-  Ro as SkfMenuItem,
-  Eo as SkfNav,
-  yo as SkfNavItem,
-  Jo as SkfPopover,
-  Qo as SkfProgress,
-  Vo as SkfRadio,
-  _o as SkfSegmentedButton,
-  Yo as SkfSegmentedButtonItem,
-  mr as SkfSelect,
-  tr as SkfSelectOption,
-  or as SkfSelectOptionGroup,
-  Sr as SkfStepper,
-  fr as SkfStepperItem,
-  xr as SkfSwitch,
-  dr as SkfTab,
-  nr as SkfTabPanel,
-  Ir as SkfTabs,
-  lr as SkfTag,
-  br as SkfTextArea,
-  Pr as SkfToast,
-  Dr as SkfToastItem,
-  vr as SkfToastWrapper,
-  Lr as SkfTooltip
+  Co as SkfIcon,
+  ho as SkfInput,
+  Ho as SkfLink,
+  No as SkfLoader,
+  Go as SkfLogo,
+  qo as SkfMenu,
+  Wo as SkfMenuItem,
+  Fo as SkfNav,
+  zo as SkfNavItem,
+  Ko as SkfPagination,
+  Uo as SkfPopover,
+  Xo as SkfProgress,
+  Zo as SkfRadio,
+  rr as SkfSegmentedButton,
+  $o as SkfSegmentedButtonItem,
+  ir as SkfSelect,
+  er as SkfSelectOption,
+  pr as SkfSelectOptionGroup,
+  ar as SkfStepper,
+  kr as SkfStepperItem,
+  cr as SkfSwitch,
+  Tr as SkfTab,
+  ur as SkfTabPanel,
+  lr as SkfTabs,
+  sr as SkfTag,
+  Br as SkfTextArea,
+  hr as SkfToast,
+  vr as SkfToastItem,
+  Cr as SkfToastWrapper,
+  Hr as SkfTooltip
 };

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -16,6 +16,8 @@ export declare class SkfPopoverBase extends SkfElement {
     static styles: CSSResultGroup;
     static classMap: {};
     _skipClosingThisTick: boolean;
+    _abortCtrl: AbortController;
+    _signal: AbortSignal;
     /** @internal - The popover element, aka `this` */
     $popover: this;
     /** Where the popover is positioned relative to the anchor element if it fits */
@@ -40,7 +42,6 @@ export declare class SkfPopoverBase extends SkfElement {
      * Used to store the outside click listener reference for cleanup and to avoid duplicates
      */
     _skfPopoverOutsideClickListener?: (e: MouseEvent) => void;
-    protected signal: AbortSignal;
     protected popoverController: PopoverController;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,23 +1,21 @@
-import { flip as $, offset as O, arrow as E, computePosition as T } from "@floating-ui/dom";
+import { flip as y, offset as $, arrow as O, computePosition as _ } from "@floating-ui/dom";
 import { SkfElement as C } from "../../components/skf-element.js";
-import { PopoverController as k } from "../../controllers/popover.controller.js";
-import { uuid as P } from "../../helpers/uuid.js";
-import { watch as u } from "../../helpers/watch.js";
-import { componentStyles as _ } from "../../../styles/component.styles.js";
-import { nothing as A, html as v } from "lit";
-import { property as g, state as d, query as S } from "lit/decorators.js";
-import { classMap as L } from "lit/directives/class-map.js";
-import { styles as x } from "./popover.styles.js";
-var F = Object.defineProperty, M = Object.getOwnPropertyDescriptor, r = (m, t, s, o) => {
-  for (var e = o > 1 ? void 0 : o ? M(t, s) : t, n = m.length - 1, a; n >= 0; n--)
-    (a = m[n]) && (e = (o ? a(t, s, e) : a(e)) || e);
-  return o && e && F(t, s, e), e;
-};
-let h = new AbortController();
-var p;
-const i = (p = class extends C {
+import { PopoverController as E } from "../../controllers/popover.controller.js";
+import { uuid as T } from "../../helpers/uuid.js";
+import { watch as f } from "../../helpers/watch.js";
+import { componentStyles as k } from "../../../styles/component.styles.js";
+import { nothing as P, html as m } from "lit";
+import { property as u, state as c, query as S } from "lit/decorators.js";
+import { classMap as A } from "lit/directives/class-map.js";
+import { styles as L } from "./popover.styles.js";
+var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (g, t, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? F(t, s) : t, n = g.length - 1, a; n >= 0; n--)
+    (a = g[n]) && (e = (o ? a(t, s, e) : a(e)) || e);
+  return o && e && x(t, s, e), e;
+}, h;
+const i = (h = class extends C {
   constructor() {
-    super(...arguments), this._skipClosingThisTick = !1, this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.signal = h.signal, this.popoverController = new k(this), this._toggleOpen = (t) => {
+    super(...arguments), this._skipClosingThisTick = !1, this._abortCtrl = new AbortController(), this._signal = this._abortCtrl.signal, this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.popoverController = new E(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
       const s = t.newState === "open";
@@ -31,9 +29,9 @@ const i = (p = class extends C {
       this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
     }, this.reposition = async () => {
       if (!this.$anchor) return;
-      const t = [$(), O(this.offset)];
-      this.arrow && t.push(E({ element: this.$arrow }));
-      const { x: s, y: o, middlewareData: e } = await T(this.$anchor, this.$popover, {
+      const t = [y(), $(this.offset)];
+      this.arrow && t.push(O({ element: this.$arrow }));
+      const { x: s, y: o, middlewareData: e } = await _(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
@@ -42,7 +40,7 @@ const i = (p = class extends C {
         left: `${String(s)}px`,
         top: `${String(o)}px`
       }), this.arrow) {
-        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", c = e.flip?.index, f = e.arrow?.x, l = e.arrow?.y, w = typeof f == "number" ? `${String(f)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", y = {
+        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", w = {
           bottom: 45,
           right: 135,
           top: 225,
@@ -50,19 +48,19 @@ const i = (p = class extends C {
         };
         Object.assign(this.$arrow.style, {
           top: b,
-          [this.placement.includes("left") ? "right" : "left"]: w,
-          [c ? n : a]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(y[a] + (c ? 180 : 0)).toString()}deg`
+          [this.placement.includes("left") ? "right" : "left"]: v,
+          [p ? n : a]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(w[a] + (p ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
     }, this.open = (t) => {
-      t.stopPropagation();
+      t.stopPropagation(), this.tagName === "SKF-TOOLTIP" && this.isOpen && this.close();
       const o = this.tagName === "SKF-MENU" ? void 0 : !0;
-      this._toggleOpen(o), h = new AbortController(), this.signal = h.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.tagName === "SKF-TOOLTIP" && this.$anchor?.setAttribute("aria-describedby", this.id);
+      this._toggleOpen(o), this._abortCtrl = new AbortController(), this._signal = this._abortCtrl.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this._signal }), this.tagName === "SKF-TOOLTIP" && this.$anchor?.setAttribute("aria-describedby", this.id);
     }, this.close = (t = "") => {
-      console.log("Popover closing", t), this._toggleOpen(!1), h.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
+      console.log("Popover closing", t), this._toggleOpen(!1), this._abortCtrl.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
     };
   }
   connectedCallback() {
@@ -71,7 +69,7 @@ const i = (p = class extends C {
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), h.abort();
+    super.disconnectedCallback(), this._abortCtrl.abort();
   }
   async handleAnchorEl() {
     if (!this.$anchor) return;
@@ -82,25 +80,25 @@ const i = (p = class extends C {
         const e = this.contains(o.relatedTarget);
         t && e || this._skipClosingThisTick || this.close("anchor focus out");
       },
-      { signal: this.signal }
+      { signal: this._signal }
     ), this.addEventListener(
       "focusout",
       (o) => {
         const e = this.contains(o.relatedTarget);
         t && e || this.close("popover focusout");
       },
-      { signal: this.signal }
+      { signal: this._signal }
     ), this._skfPopoverOutsideClickListener ??= (o) => {
       this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close("outside click") : (this._skipClosingThisTick = !0, setTimeout(() => {
         this._skipClosingThisTick = !1;
       }, 0));
     }, document.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
-      signal: this.signal
+      signal: this._signal
     });
     const s = window.top && window.self !== window.top;
     console.log("contains frames", s), s && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
-      signal: this.signal
-    }), this.$popover.id = await P(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
+      signal: this._signal
+    }), this.$popover.id = await T(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this._signal });
   }
   /** @internal eventlisteners here should implement abort signal */
   addEventListeners(t) {
@@ -108,13 +106,13 @@ const i = (p = class extends C {
   }
   /** @internal */
   removeEventListeners() {
-    h.abort();
+    this._abortCtrl.abort();
   }
   render() {
-    return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), v`
-			<div class=${L({ popover: !0, ...p.classMap })} id="root">
+    return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), m`
+			<div class=${A({ popover: !0, ...h.classMap })} id="root">
 				<slot></slot>
-				${this.arrow ? v`<div id="arrow"></div>` : A}
+				${this.arrow ? m`<div id="arrow"></div>` : P}
 			</div>
 		`;
   }
@@ -129,54 +127,54 @@ const i = (p = class extends C {
       '[tabindex]:not([tabindex="-1"])'
     ]).length > 0;
     function e(n, a) {
-      const c = Array.from(
+      const p = Array.from(
         n.querySelectorAll(a.join(", "))
-      ), f = Array.from(n.querySelectorAll("*")).map((l) => l.shadowRoot).filter((l) => l !== null);
-      for (const l of f)
-        c.push(
+      ), d = Array.from(n.querySelectorAll("*")).map((l) => l.shadowRoot).filter((l) => l !== null);
+      for (const l of d)
+        p.push(
           ...e(l, a)
         );
-      return c;
+      return p;
     }
   }
-}, p.styles = [_, x], p.classMap = {}, p);
+}, h.styles = [k, L], h.classMap = {}, h);
 r([
-  g()
+  u()
 ], i.prototype, "placement", 2);
 r([
-  g()
+  u()
 ], i.prototype, "variant", 2);
 r([
-  g()
+  u()
 ], i.prototype, "anchor", 2);
 r([
-  d()
+  c()
 ], i.prototype, "isOpen", 2);
 r([
-  d()
+  c()
 ], i.prototype, "offset", 2);
 r([
-  d()
+  c()
 ], i.prototype, "$anchor", 2);
 r([
-  d()
+  c()
 ], i.prototype, "arrow", 2);
 r([
-  d()
+  c()
 ], i.prototype, "triggerEvent", 2);
 r([
   S("#arrow")
 ], i.prototype, "$arrow", 2);
 r([
-  u("isOpen", { afterUpdate: !0 })
+  f("isOpen", { afterUpdate: !0 })
 ], i.prototype, "handleToggleOpen", 2);
 r([
-  u("$anchor")
+  f("$anchor")
 ], i.prototype, "handleAnchorEl", 1);
 r([
-  u("anchor")
+  f("anchor")
 ], i.prototype, "handleAnchorChange", 2);
-let W = i;
+let z = i;
 export {
-  W as SkfPopoverBase
+  z as SkfPopoverBase
 };

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import "../utilities/localize.js";
 import { registerTranslation as o } from "@shoelace-style/localize";
-const t = {
+const a = {
   $code: "en",
   $name: "English",
   $dir: "ltr",
@@ -12,8 +12,11 @@ const t = {
   loading: "Loading",
   mainNavigation: "Main navigation",
   nextMonth: "Next month",
+  nextPage: "Next page",
   nextYear: "Next year",
+  of: "of",
   previousMonth: "Previous month",
+  previousPage: "Previous page",
   previousYear: "Previous year",
   required: "Required",
   selectedDay: "Selected day",
@@ -21,7 +24,7 @@ const t = {
   showPassword: "Show password",
   today: "Today"
 };
-o(t);
+o(a);
 export {
-  t as default
+  a as default
 };

package/dist/translations/es.js

@@ -1,6 +1,6 @@
 import "../utilities/localize.js";
 import { registerTranslation as r } from "@shoelace-style/localize";
-const o = {
+const a = {
   $code: "es",
   $name: "Spanish",
   $dir: "ltr",
@@ -12,8 +12,11 @@ const o = {
   loading: "Cargando",
   mainNavigation: "Navegación principal",
   nextMonth: "Próximo mes",
+  nextPage: "Próxima página",
   nextYear: "Próximo año",
+  of: "de",
   previousMonth: "Mes anterior",
+  previousPage: "Página anterior",
   previousYear: "Año anterior",
   required: "Requerido",
   selectedDay: "Día seleccionado",
@@ -21,7 +24,7 @@ const o = {
   showPassword: "Mostrar contraseña",
   today: "Hoy"
 };
-r(o);
+r(a);
 export {
-  o as default
+  a as default
 };

package/dist/translations/pt.js

@@ -1,6 +1,6 @@
 import "../utilities/localize.js";
-import { registerTranslation as o } from "@shoelace-style/localize";
-const r = {
+import { registerTranslation as r } from "@shoelace-style/localize";
+const a = {
   $code: "pt",
   $name: "Português",
   $dir: "ltr",
@@ -12,8 +12,11 @@ const r = {
   loading: "Carregando",
   mainNavigation: "Navegação principal",
   nextMonth: "Próximo mês",
+  nextPage: "Próxima página",
   nextYear: "Próximo ano",
+  of: "de",
   previousMonth: "Mês anterior",
+  previousPage: "Página anterior",
   previousYear: "Ano anterior",
   required: "Obrigatório",
   selectedDay: "Dia selecionado",
@@ -21,7 +24,7 @@ const r = {
   showPassword: "Mostrar senha",
   today: "Hoje"
 };
-o(r);
+r(a);
 export {
-  r as default
+  a as default
 };

package/dist/translations/sv.js

@@ -12,8 +12,11 @@ const n = {
   loading: "Läser in",
   mainNavigation: "Huvudnavigering",
   nextMonth: "Nästa månad",
+  nextPage: "Nästa sida",
   nextYear: "Nästa år",
+  of: "av",
   previousMonth: "Föregående månad",
+  previousPage: "Föregående sida",
   previousYear: "Föregående år",
   required: "Obligatoriskt",
   selectedDay: "Vald dag",

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -23,6 +23,7 @@ import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput } from "../../components/input/input.component.js";
 import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SkfMenu } from "../../components/menu/menu.component.js";
+import type { SkfPagination } from "../../components/pagination/pagination.component.js";
 import type { SkfPopover } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio } from "../../components/radio/radio.component.js";
@@ -793,6 +794,27 @@ export type SkfMenuProps = {
 }
 
 
+export type SkfPaginationProps = {
+  /** The number of items to display on each 'page' */
+  "items-per-page"?: SkfPagination['itemsPerPage'];
+  /** The number of items to display on each 'page' */
+  "itemsPerPage"?: SkfPagination['itemsPerPage'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfPagination['lang'];
+  /** If true, hides both the delimiter and the total value */
+  "no-total"?: SkfPagination['noTotal'];
+  /** If true, hides both the delimiter and the total value */
+  "noTotal"?: SkfPagination['noTotal'];
+  /** The active page number. */
+  "page"?: SkfPagination['page'];
+  /** The total number of items being paginated. */
+  "total"?: SkfPagination['total'];
+
+  /**  */
+  "onpage-change"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
 export type SkfPopoverProps = {
   /** The placement of the popover */
   "placement"?: unknown;
@@ -1956,6 +1978,28 @@ export type SkfTooltipProps = {
     "skf-menu": Partial<SkfMenuProps & BaseProps<SkfMenu> & BaseEvents>;
 
 
+  /**
+     * The `<skf-pagination>` is a component that displays a list of actions or options
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `items-per-page`/`itemsPerPage`: The number of items to display on each 'page' 
+ * - `lang`: Sets the internal language of the component 
+ * - `no-total`/`noTotal`: If true, hides both the delimiter and the total value 
+ * - `page`: The active page number. 
+ * - `total`: The total number of items being paginated. 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `page-change`: undefined
+  */
+    "skf-pagination": Partial<SkfPaginationProps & BaseProps<SkfPagination> & BaseEvents>;
+
+
   /**
      * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
  * 

package/dist/types/vue/index.d.ts

@@ -24,6 +24,7 @@ import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
 import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
 import type { SkfMenu, CustomEvent } from "../../components/menu/menu.component.js";
+import type { SkfPagination, CustomEvent } from "../../components/pagination/pagination.component.js";
 import type { SkfPopover, CustomEvent } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
@@ -491,6 +492,22 @@ type SkfMenuProps = {
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SkfPaginationProps = {
+  /** The number of items to display on each 'page' */
+  "items-per-page"?: SkfPagination["itemsPerPage"];
+  /** Sets the internal language of the component */
+  lang?: SkfPagination["lang"];
+  /** If true, hides both the delimiter and the total value */
+  "no-total"?: SkfPagination["noTotal"];
+  /** The active page number. */
+  page?: SkfPagination["page"];
+  /** The total number of items being paginated. */
+  total?: SkfPagination["total"];
+
+  /**  */
+  "onpage-change"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
@@ -1147,6 +1164,16 @@ export type CustomElements = {
    */
   "skf-menu": DefineComponent<SkfMenuProps>;
 
+  /**
+   * The `<skf-pagination>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **page-change**
+   */
+  "skf-pagination": DefineComponent<SkfPaginationProps>;
+
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
    *

package/dist/utilities/localize.d.ts

@@ -16,8 +16,11 @@ export interface Translation extends DefaultTranslation {
     loading: string;
     mainNavigation: string;
     nextMonth: string;
+    nextPage: string;
     nextYear: string;
+    of: string;
     previousMonth: string;
+    previousPage: string;
     previousYear: string;
     required: string;
     selectedDay: string;

package/dist/vscode.html-custom-data.json

@@ -943,6 +943,38 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-pagination",
+      "description": "The `<skf-pagination>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **page-change**",
+      "attributes": [
+        {
+          "name": "items-per-page",
+          "description": "The number of items to display on each 'page'",
+          "values": []
+        },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
+        {
+          "name": "no-total",
+          "description": "If true, hides both the delimiter and the total value",
+          "values": []
+        },
+        {
+          "name": "page",
+          "description": "The active page number.",
+          "values": []
+        },
+        {
+          "name": "total",
+          "description": "The total number of items being paginated.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-popover",
       "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the popover is opened\n- **skf-closed** - Fired when the popover is closed\n\n### **Slots:**\n - _default_ - The popover content",

package/dist/web-types.json

@@ -2065,6 +2065,69 @@
             ]
           }
         },
+        {
+          "name": "skf-pagination",
+          "description": "The `<skf-pagination>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **page-change**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "items-per-page",
+              "description": "The number of items to display on each 'page'",
+              "value": { "type": "number", "default": "50" }
+            },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
+            {
+              "name": "no-total",
+              "description": "If true, hides both the delimiter and the total value",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "page",
+              "description": "The active page number.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "total",
+              "description": "The total number of items being paginated.",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [{ "name": "page-change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              {
+                "name": "itemsPerPage",
+                "description": "The number of items to display on each 'page'",
+                "type": "number"
+              },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
+              {
+                "name": "noTotal",
+                "description": "If true, hides both the delimiter and the total value",
+                "type": "boolean"
+              },
+              {
+                "name": "page",
+                "description": "The active page number.",
+                "type": "number"
+              },
+              {
+                "name": "total",
+                "description": "The total number of items being paginated.",
+                "type": "number"
+              }
+            ],
+            "events": [{ "name": "page-change", "type": "CustomEvent" }]
+          }
+        },
         {
           "name": "skf-popover",
           "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the popover is opened\n- **skf-closed** - Fired when the popover is closed\n\n### **Slots:**\n - _default_ - The popover content",

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.16",
+  "version": "1.0.2-beta.18",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@js-temporal/polyfill": "^0.5.1",