@fabric-msft/fabric-web 5.0.0 → 7.0.0

package/esm/components/overflow-item/overflow-item.js

@@ -0,0 +1,77 @@
+import { attr, FASTElement } from '@microsoft/fast-element';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @internal Event dispatched when overflow-relevant attributes change.
+ */
+const OVERFLOW_ITEM_UPDATE_EVENT = "fabric-overflow-item-update";
+/**
+ * OverflowItem
+ * @summary Wraps a single overflowable child element. The parent
+ * `fabric-overflow` container observes slotted children and manages
+ * registration/deregistration automatically.
+ *
+ * @example
+ * ```html
+ * <fabric-overflow>
+ *   <fabric-overflow-item overflow-id="item-1" priority="1">
+ *     <button>Item 1</button>
+ *   </fabric-overflow-item>
+ * </fabric-overflow>
+ * ```
+ *
+ * @attr {string} overflow-id - Unique identifier for this overflow item. Required.
+ * @attr {number} priority - Lower priority items are hidden first. Defaults to 0.
+ * @attr {string} group-id - Optional group identifier for grouped overflow behavior.
+ * @attr {boolean} pinned - When true, the item is always visible and never overflows.
+ *
+ * @slot - Default slot for the item content.
+ *
+ * @extends FASTElement
+ * @tagname fabric-overflow-item
+ * @public
+ */
+class OverflowItem extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Lower priority items are hidden first when the container overflows.
+     * @default 0
+     */
+    this.priority = 0;
+    /**
+     * When true, the item is always visible regardless of overflow.
+     * @default false
+     */
+    this.pinned = false;
+  }
+  priorityChanged() {
+    this.$emit(OVERFLOW_ITEM_UPDATE_EVENT);
+  }
+  pinnedChanged() {
+    this.$emit(OVERFLOW_ITEM_UPDATE_EVENT);
+  }
+}
+__decorate([attr({
+  attribute: "overflow-id"
+})], OverflowItem.prototype, "overflowId", void 0);
+__decorate([attr({
+  converter: {
+    fromView: Number,
+    toView: String
+  }
+})], OverflowItem.prototype, "priority", void 0);
+__decorate([attr({
+  attribute: "group-id"
+})], OverflowItem.prototype, "groupId", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], OverflowItem.prototype, "pinned", void 0);
+
+export { OVERFLOW_ITEM_UPDATE_EVENT, OverflowItem };

package/esm/components/overflow-item/overflow-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-item.js","sourceRoot":"","sources":["../../../../src/components/overflow-item/overflow-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,6BAA6B,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAOE;;;WAGG;QAEH,aAAQ,GAAW,CAAC,CAAC;QAQrB;;;WAGG;QAEH,WAAM,GAAY,KAAK,CAAC;IAS1B,CAAC;IAPS,eAAe;QACrB,IAAI,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;IACzC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;IACzC,CAAC;CACF;AA7BC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDACf;AAOpB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;8CACrC;AAMrB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;6CACJ;AAO5B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF"}

package/esm/components/overflow-item/overflow-item.styles.js

@@ -0,0 +1,13 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@fluentui/web-components';
+
+/**
+ * Styles for the {@link OverflowItem} component.
+ * @public
+ */
+const styles = css`
+  ${display("inline-flex")}
+
+  :host{flex-shrink:0}:host(:focus-within){position:relative}:host([data-overflowing]){display:none}`;
+
+export { styles };

package/esm/components/overflow-item/overflow-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-item.styles.js","sourceRoot":"","sources":["../../../../src/components/overflow-item/overflow-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;CAazB,CAAC"}

package/esm/components/overflow-item/overflow-item.template.js

@@ -0,0 +1,9 @@
+import { html } from '@microsoft/fast-element';
+
+/**
+ * The template for the {@link OverflowItem} component.
+ * @public
+ */
+const template = html`<template><slot></slot></template>`;
+
+export { template };

package/esm/components/overflow-item/overflow-item.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-item.template.js","sourceRoot":"","sources":["../../../../src/components/overflow-item/overflow-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,IAAI,CAAc;;;;CAI5E,CAAC"}

package/esm/components/pagination/define.js

@@ -0,0 +1,29 @@
+import { DesignSystem } from '../design-system.js';
+import { definition } from '../dropdown/dropdown.definition.js';
+import { definition as definition$1 } from '../listbox/listbox.definition.js';
+import { definition as definition$2 } from '../option/option.definition.js';
+import { definition as definition$3 } from './pagination.definition.js';
+
+/**
+ * Registers the pagination element and all of its internal dependencies
+ * (dropdown, listbox, option) with the provided registry.
+ *
+ * @param registry - The CustomElementRegistry to register with. Defaults to `customElements`.
+ *
+ * @example
+ * ```ts
+ * import { definePagination } from "@fabric-msft/fabric-web";
+ * definePagination(); // registers fabric-pagination and its dependencies
+ * ```
+ *
+ * @public
+ */
+function definePagination(registry = customElements) {
+  definition.define(registry);
+  definition$1.define(registry);
+  definition$2.define(registry);
+  definition$3.define(registry);
+}
+definePagination(DesignSystem.registry);
+
+export { definePagination };

package/esm/components/pagination/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/pagination/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACtF,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,gBAAgB,CAC9B,WAAkC,cAAc;IAEhD,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpC,iBAAiB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACnC,gBAAgB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAClC,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC;AAED,gBAAgB,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/pagination/index.js

@@ -0,0 +1,9 @@
+/**
+ * Public exports for the pagination component.
+ */
+export { definition as PaginationDefinition } from "./pagination.definition.js";
+export { definePagination } from "./define.js";
+export { Pagination } from "./pagination.js";
+export { PaginationEventNames } from "./pagination.events.js";
+export { PaginationVariants } from "./pagination.options.js";
+//# sourceMappingURL=index.js.map

package/esm/components/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/esm/components/pagination/pagination.definition.js

@@ -0,0 +1,18 @@
+import { DesignSystem } from '../design-system.js';
+import { Pagination } from './pagination.js';
+import { styles } from './pagination.styles.js';
+import { template } from './pagination.template.js';
+
+/**
+ * FAST element definition for `fabric-pagination`.
+ */
+const definition = Pagination.compose({
+  name: `${DesignSystem.prefix}-pagination`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/esm/components/pagination/pagination.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.definition.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,aAAa;IACzC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/pagination/pagination.events.js

@@ -0,0 +1,11 @@
+/**
+ * DOM custom event names emitted by `fabric-pagination`.
+ */
+const PaginationEventNames = {
+  /**
+   * Fired when the current page changes due to user or programmatic navigation.
+   */
+  pageChange: "page-change"
+};
+
+export { PaginationEventNames };

package/esm/components/pagination/pagination.events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.events.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.events.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,UAAU,EAAE,aAAa;CACjB,CAAC"}

package/esm/components/pagination/pagination.js

@@ -0,0 +1,416 @@
+import { observable, attr, FASTElement } from '@microsoft/fast-element';
+import { getString } from '@fabric-msft/localization';
+import { PaginationEventNames } from './pagination.events.js';
+import { PaginationVariants, PAGE_VISIBLE_SLOT_COUNT, PAGE_WINDOW_SIZE } from './pagination.options.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const responsiveBreakpoints = {
+  compactWithBoundaries: 480,
+  numeric: 640,
+  full: 1024
+};
+/**
+ * Pagination web component state and behavior.
+ *
+ * Renders an accessible pagination control in either the `default` or
+ * `compact` variant. The public API stays focused on pagination state while
+ * the component owns its internal ARIA relationships.
+ *
+ * @summary Provides page navigation in default and compact variants.
+ * @slot label-previous - Visible text content for the previous button in the default variant.
+ * @slot label-next - Visible text content for the next button in the default variant.
+ * @fires page-change - Fired when the current page changes due to user or programmatic navigation.
+ * @example
+ * ```html
+ * <fabric-pagination variant="default" current-page="5" total-pages="10"></fabric-pagination>
+ * ```
+ * @example Localized compact dropdown options
+ * ```html
+ * <fabric-pagination
+ *   variant="compact"
+ *   current-page="3"
+ *   total-pages="10"
+ *   label-page-option="Seite {page} von {total}"
+ *   label-page-button="Seite {page}"
+ * ></fabric-pagination>
+ * ```
+ */
+class Pagination extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.responsiveLayout = "full";
+    this.isPaginationStateNormalizationQueued = false;
+    this.updateResponsiveLayout = () => {
+      this.responsiveLayout = this.resolveResponsiveLayout();
+    };
+    /**
+     * Visual variant of the control.
+     */
+    this.variant = PaginationVariants.default;
+    /**
+     * Currently selected page (1-based).
+     *
+     * Reflected to the `current-page` attribute.
+     */
+    this.currentPage = 1;
+    /**
+     * Total number of available pages.
+     *
+     * Reflected to the `total-pages` attribute.
+     */
+    this.totalPages = 1;
+    /**
+     * Disables interaction when true.
+     */
+    this.disabled = false;
+    /**
+     * Localizable template string for compact-variant dropdown option labels.
+     *
+     * Use `{page}` and `{total}` as substitution tokens.
+     *
+     * @default "Page {page} of {total}"
+     * @example `"Seite {page} von {total}"` → `"Seite 3 von 10"`
+     */
+    this.labelPageOption = "";
+    /**
+     * Localizable template string for default-variant page-number button `aria-label` values.
+     *
+     * Use `{page}` as the substitution token.
+     *
+     * @default "Page {page}"
+     * @example `"Seite {page}"` → `"Seite 5"`
+     */
+    this.labelPageButton = "";
+    /**
+     * Accessible label for the navigation landmark.
+     *
+     * Reflected to the `label-navigation` attribute.
+     */
+    this.labelNavigation = "";
+    /**
+     * Accessible label for the first-page button (compact variant).
+     *
+     * Reflected to the `label-first-page` attribute.
+     */
+    this.labelFirstPage = "";
+    /**
+     * Accessible label for the previous-page button (compact variant).
+     *
+     * Reflected to the `label-previous-page` attribute.
+     */
+    this.labelPreviousPage = "";
+    /**
+     * Accessible label for the next-page button (compact variant).
+     *
+     * Reflected to the `label-next-page` attribute.
+     */
+    this.labelNextPage = "";
+    /**
+     * Accessible label for the last-page button (compact variant).
+     *
+     * Reflected to the `label-last-page` attribute.
+     */
+    this.labelLastPage = "";
+    /**
+     * Accessible label for the page-summary dropdown (compact variant).
+     *
+     * Reflected to the `label-page-summary` attribute.
+     */
+    this.labelPageSummary = "";
+    /**
+     * Accessible label for the page-number group (default variant).
+     *
+     * Reflected to the `label-page-numbers` attribute.
+     */
+    this.labelPageNumbers = "";
+    /**
+     * Visible label for the previous button in the default variant.
+     *
+     * Reflected to the `label-previous` attribute and used as the fallback for
+     * the `label-previous` slot.
+     */
+    this.labelPrevious = "";
+    /**
+     * Visible label for the next button in the default variant.
+     *
+     * Reflected to the `label-next` attribute and used as the fallback for the
+     * `label-next` slot.
+     */
+    this.labelNext = "";
+  }
+  /** @internal */
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", this.updateResponsiveLayout);
+    this.queuePaginationStateNormalization();
+    this.updateResponsiveLayout();
+  }
+  /** @internal */
+  disconnectedCallback() {
+    var _a;
+    (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.updateResponsiveLayout);
+    super.disconnectedCallback();
+  }
+  /** Handles compact dropdown selection changes. */
+  handleCompactDropdownChange(event) {
+    this.goToPage(Number(event.currentTarget.value));
+  }
+  /** @internal */
+  currentPageChanged() {
+    if (this.isConnected) this.queuePaginationStateNormalization();
+  }
+  /** @internal */
+  totalPagesChanged() {
+    if (this.isConnected) this.queuePaginationStateNormalization();
+  }
+  /** @internal Whether the current responsive state should use compact dropdown controls. */
+  get usesCompactControls() {
+    return this.variant === PaginationVariants.compact || this.responsiveLayout === "compact-minimal" || this.responsiveLayout === "compact";
+  }
+  /** @internal Whether compact mode should include first/last boundary controls. */
+  get showCompactBoundaryControls() {
+    return this.variant === PaginationVariants.compact || this.responsiveLayout !== "compact-minimal";
+  }
+  /** @internal Whether default mode should show visible Previous/Next text labels. */
+  get showTextNavigation() {
+    return this.responsiveLayout === "full";
+  }
+  /** @internal Gets a localized string used by the pagination template. */
+  getLocalizedString(key) {
+    return getString(key);
+  }
+  /**
+   * Builds the display string for a compact-variant dropdown option.
+   *
+   * Substitutes `{page}` and `{total}` tokens in {@link labelPageOption}.
+   *
+   * @param page - 1-based page number.
+   */
+  pageOptionLabel(page) {
+    return this.formatLabelTemplate(this.labelPageOption || this.getLocalizedString("Pagination_PageOption"), {
+      page: String(page),
+      total: String(this.normalizedTotalPages)
+    });
+  }
+  /**
+   * Builds the `aria-label` string for a default-variant page-number button.
+   *
+   * Substitutes the `{page}` token in {@link labelPageButton}.
+   *
+   * @param page - 1-based page number.
+   */
+  pageButtonLabel(page) {
+    return this.formatLabelTemplate(this.labelPageButton || this.getLocalizedString("Pagination_PageButton"), {
+      page: String(page)
+    });
+  }
+  /**
+   * Replaces all supported localization tokens in a label template.
+   */
+  formatLabelTemplate(template, values) {
+    return Object.entries(values).reduce((label, [token, value]) => label.split(`{${token}}`).join(value), template);
+  }
+  /**
+   * Sanitized total page count constrained to an integer >= 1.
+   */
+  get normalizedTotalPages() {
+    return this.sanitizeTotalPages(this.totalPages);
+  }
+  /**
+   * Sanitized current page constrained to the valid page range.
+   */
+  get normalizedCurrentPage() {
+    return this.sanitizePage(this.currentPage);
+  }
+  /**
+   * Navigates to a specific page number.
+   *
+   * No-ops when disabled or when the requested page equals the current page.
+   *
+   * @param page - Requested destination page.
+   */
+  goToPage(page) {
+    if (this.disabled) return;
+    const next = this.sanitizePage(page);
+    const current = this.normalizedCurrentPage;
+    if (next === current) return;
+    const previous = current;
+    this.currentPage = next;
+    this.emitPageChange(previous, next);
+  }
+  /**
+   * Navigates to the next page.
+   */
+  nextPage() {
+    this.goToPage(this.normalizedCurrentPage + 1);
+  }
+  /**
+   * Navigates to the previous page.
+   */
+  previousPage() {
+    this.goToPage(this.normalizedCurrentPage - 1);
+  }
+  /**
+   * Navigates to the first page.
+   */
+  firstPage() {
+    this.goToPage(1);
+  }
+  /**
+   * Navigates to the last page.
+   */
+  lastPage() {
+    this.goToPage(this.normalizedTotalPages);
+  }
+  /**
+   * Computed item model used by the template to render page controls.
+   */
+  get pageItems() {
+    const total = this.normalizedTotalPages;
+    const current = this.normalizedCurrentPage;
+    if (total <= PAGE_VISIBLE_SLOT_COUNT) {
+      return Array.from({
+        length: total
+      }, (_, index) => index + 1);
+    }
+    if (current <= PAGE_WINDOW_SIZE - 2) {
+      return [...Array.from({
+        length: PAGE_WINDOW_SIZE
+      }, (_, index) => index + 1), "ellipsis", total];
+    }
+    if (current >= total - (PAGE_WINDOW_SIZE - 3)) {
+      return [1, "ellipsis", ...Array.from({
+        length: PAGE_WINDOW_SIZE
+      }, (_, index) => total - PAGE_WINDOW_SIZE + 1 + index)];
+    }
+    return [1, "ellipsis", current - 1, current, current + 1, "ellipsis", total];
+  }
+  /**
+   * Normalizes total pages into a finite integer >= 1.
+   *
+   * @param value - Raw total page input.
+   * @returns Sanitized total pages value.
+   */
+  sanitizeTotalPages(value) {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) return 1;
+    return Math.max(1, Math.round(parsed));
+  }
+  /**
+   * Normalizes a page number into the valid range `1..normalizedTotalPages`.
+   *
+   * @param value - Raw page input.
+   * @returns Sanitized page value.
+   */
+  sanitizePage(value) {
+    return this.sanitizePageForTotal(value, this.normalizedTotalPages);
+  }
+  sanitizePageForTotal(value, totalPages) {
+    const parsed = Number(value);
+    const rounded = Number.isFinite(parsed) ? Math.round(parsed) : 1;
+    return Math.min(totalPages, Math.max(1, rounded));
+  }
+  queuePaginationStateNormalization() {
+    if (this.isPaginationStateNormalizationQueued) return;
+    this.isPaginationStateNormalizationQueued = true;
+    queueMicrotask(() => {
+      this.isPaginationStateNormalizationQueued = false;
+      if (this.isConnected) this.normalizePaginationState();
+    });
+  }
+  normalizePaginationState() {
+    const totalPages = this.sanitizeTotalPages(this.totalPages);
+    const currentPage = this.sanitizePageForTotal(this.currentPage, totalPages);
+    if (this.totalPages !== totalPages) {
+      this.totalPages = totalPages;
+    }
+    if (this.currentPage !== currentPage) {
+      this.currentPage = currentPage;
+    }
+  }
+  resolveResponsiveLayout() {
+    var _a;
+    const width = (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.innerWidth;
+    if (typeof width !== "number") return "full";
+    if (width < responsiveBreakpoints.compactWithBoundaries) {
+      return "compact-minimal";
+    }
+    if (width < responsiveBreakpoints.numeric) {
+      return "compact";
+    }
+    if (width < responsiveBreakpoints.full) {
+      return "numeric";
+    }
+    return "full";
+  }
+  /**
+   * Emits the pagination page-change custom event.
+   *
+   * @param previousPage - Page before the change.
+   * @param currentPage - Page after the change.
+   */
+  emitPageChange(previousPage, currentPage) {
+    const detail = {
+      previousPage,
+      currentPage
+    };
+    this.dispatchEvent(new CustomEvent(PaginationEventNames.pageChange, {
+      detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+__decorate([observable], Pagination.prototype, "responsiveLayout", void 0);
+__decorate([attr], Pagination.prototype, "variant", void 0);
+__decorate([attr({
+  attribute: "current-page"
+})], Pagination.prototype, "currentPage", void 0);
+__decorate([attr({
+  attribute: "total-pages"
+})], Pagination.prototype, "totalPages", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Pagination.prototype, "disabled", void 0);
+__decorate([attr({
+  attribute: "label-page-option"
+})], Pagination.prototype, "labelPageOption", void 0);
+__decorate([attr({
+  attribute: "label-page-button"
+})], Pagination.prototype, "labelPageButton", void 0);
+__decorate([attr({
+  attribute: "label-navigation"
+})], Pagination.prototype, "labelNavigation", void 0);
+__decorate([attr({
+  attribute: "label-first-page"
+})], Pagination.prototype, "labelFirstPage", void 0);
+__decorate([attr({
+  attribute: "label-previous-page"
+})], Pagination.prototype, "labelPreviousPage", void 0);
+__decorate([attr({
+  attribute: "label-next-page"
+})], Pagination.prototype, "labelNextPage", void 0);
+__decorate([attr({
+  attribute: "label-last-page"
+})], Pagination.prototype, "labelLastPage", void 0);
+__decorate([attr({
+  attribute: "label-page-summary"
+})], Pagination.prototype, "labelPageSummary", void 0);
+__decorate([attr({
+  attribute: "label-page-numbers"
+})], Pagination.prototype, "labelPageNumbers", void 0);
+__decorate([attr({
+  attribute: "label-previous"
+})], Pagination.prototype, "labelPrevious", void 0);
+__decorate([attr({
+  attribute: "label-next"
+})], Pagination.prototype, "labelNext", void 0);
+
+export { Pagination };

package/esm/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"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"}

package/esm/components/pagination/pagination.options.js

@@ -0,0 +1,26 @@
+/**
+ * Number of page buttons visible at the start or end of a truncated range.
+ *
+ * When the active page is near a range boundary, the design shows five
+ * consecutive pages plus an ellipsis and the opposite boundary page.
+ */
+const PAGE_WINDOW_SIZE = 5;
+/**
+ * Maximum number of visible page slots in default pagination.
+ */
+const PAGE_VISIBLE_SLOT_COUNT = 7;
+/**
+ * Supported visual variants for `fabric-pagination`.
+ */
+const PaginationVariants = {
+  /**
+   * Full pagination with previous/next controls and page number buttons.
+   */
+  default: "default",
+  /**
+   * Condensed pagination with first/previous/next/last icon controls and summary text.
+   */
+  compact: "compact"
+};
+
+export { PAGE_VISIBLE_SLOT_COUNT, PAGE_WINDOW_SIZE, PaginationVariants };

package/esm/components/pagination/pagination.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.options.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.options.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC;;OAEG;IACH,OAAO,EAAE,SAAS;IAClB;;OAEG;IACH,OAAO,EAAE,SAAS;CACV,CAAC"}