@moodlehq/design-system 4.1.0 → 5.0.0

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,100 @@
+import { calculateVisiblePageNumbers, resolvePaginationInputs, useViewportMaxVisible } from "./pagination.helpers.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/pagination/Pagination.tsx
+var MAX_VISIBLE_ELEMENTS = 9;
+var Pagination = ({ totalPages, currentPage, onPageChange, ariaLabel = "Pagination", previousPageLabel = "Previous page", nextPageLabel = "Next page", pageLabelFormatter, variant = "full", disabled = false, className, ...props }) => {
+	const { resolvedVariant, resolvedPageLabelFormatter, sanitizedTotalPages, sanitizedCurrentPage } = resolvePaginationInputs(variant, pageLabelFormatter, totalPages, currentPage);
+	const viewportMaxVisible = useViewportMaxVisible();
+	const [pendingCurrentPage, setPendingCurrentPage] = useState(null);
+	const adaptiveResult = resolvedVariant === "full" ? viewportMaxVisible : MAX_VISIBLE_ELEMENTS;
+	const effectiveVariant = resolvedVariant === "full" && adaptiveResult === null ? "grouped" : resolvedVariant;
+	const maxVisible = adaptiveResult ?? MAX_VISIBLE_ELEMENTS;
+	const validCurrentPage = Math.max(1, Math.min(sanitizedCurrentPage, sanitizedTotalPages));
+	const previousValidCurrentPageRef = useRef(validCurrentPage);
+	useEffect(() => {
+		const didControlledPageChange = previousValidCurrentPageRef.current !== validCurrentPage;
+		if (pendingCurrentPage !== null && (pendingCurrentPage === validCurrentPage || didControlledPageChange)) setPendingCurrentPage(null);
+		previousValidCurrentPageRef.current = validCurrentPage;
+	}, [validCurrentPage, pendingCurrentPage]);
+	const visualCurrentPage = pendingCurrentPage ?? validCurrentPage;
+	const canGoPrevious = visualCurrentPage > 1;
+	const canGoNext = visualCurrentPage < sanitizedTotalPages;
+	const { showBoundaryPages, pageNumbers, showLeftEllipsis, showRightEllipsis } = useMemo(() => calculateVisiblePageNumbers(visualCurrentPage, sanitizedTotalPages, maxVisible), [
+		visualCurrentPage,
+		sanitizedTotalPages,
+		maxVisible
+	]);
+	if (sanitizedTotalPages < 2) return null;
+	const handlePageChange = (page) => {
+		if (page !== visualCurrentPage && page >= 1 && page <= sanitizedTotalPages) {
+			setPendingCurrentPage(page);
+			onPageChange(page);
+		}
+	};
+	const classes = ["mds-pagination", `mds-pagination--${effectiveVariant}`];
+	if (className) classes.push(className);
+	const renderPageButton = (page) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "mds-pagination__page",
+		onClick: () => handlePageChange(page),
+		disabled,
+		"aria-label": resolvedPageLabelFormatter(page),
+		"aria-current": page === visualCurrentPage ? "page" : void 0,
+		"data-current": page === visualCurrentPage,
+		children: page
+	}, page);
+	return /* @__PURE__ */ jsxs("nav", {
+		className: classes.join(" "),
+		"aria-label": ariaLabel,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "mds-pagination__button mds-pagination__button--prev",
+				onClick: () => handlePageChange(visualCurrentPage - 1),
+				disabled: disabled || !canGoPrevious,
+				"aria-label": previousPageLabel,
+				tabIndex: !disabled && canGoPrevious ? 0 : -1,
+				children: /* @__PURE__ */ jsx("i", {
+					className: "fa-solid fa-chevron-left",
+					"aria-hidden": "true"
+				})
+			}),
+			effectiveVariant === "full" && /* @__PURE__ */ jsxs("div", {
+				className: "mds-pagination__pages",
+				children: [
+					showBoundaryPages && renderPageButton(1),
+					showLeftEllipsis && /* @__PURE__ */ jsx("span", {
+						className: "mds-pagination__ellipsis",
+						"aria-hidden": "true",
+						children: "…"
+					}, "left-ellipsis"),
+					pageNumbers.map(renderPageButton),
+					showRightEllipsis && /* @__PURE__ */ jsx("span", {
+						className: "mds-pagination__ellipsis",
+						"aria-hidden": "true",
+						children: "…"
+					}, "right-ellipsis"),
+					showBoundaryPages && renderPageButton(sanitizedTotalPages)
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "mds-pagination__button mds-pagination__button--next",
+				onClick: () => handlePageChange(visualCurrentPage + 1),
+				disabled: disabled || !canGoNext,
+				"aria-label": nextPageLabel,
+				tabIndex: !disabled && canGoNext ? 0 : -1,
+				children: /* @__PURE__ */ jsx("i", {
+					className: "fa-solid fa-chevron-right",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { Pagination };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../components/pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  calculateVisiblePageNumbers,\n  resolvePaginationInputs,\n  useViewportMaxVisible,\n  type PageLabelFormatter,\n} from './pagination.helpers';\n\nconst MAX_VISIBLE_ELEMENTS = 9;\n\nexport interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {\n  /** Total number of pages */\n  totalPages: number;\n\n  /** Current page number (1-indexed) */\n  currentPage: number;\n\n  /** Callback fired when the page changes */\n  onPageChange: (page: number) => void;\n\n  /** Accessible name for the pagination landmark. */\n  ariaLabel?: string;\n\n  /** Accessible label used for the previous-page button. */\n  previousPageLabel?: string;\n\n  /** Accessible label used for the next-page button. */\n  nextPageLabel?: string;\n\n  /** Returns the accessible label for each numbered page button. */\n  pageLabelFormatter?: PageLabelFormatter;\n\n  /**\n   * Controls which variant of pagination to render.\n   * Accepts a broad string so JS consumers can be validated at runtime.\n   * - `'full'` (default): Shows page numbers between previous and next controls.\n   *   The visible page count reduces automatically as the viewport width narrows\n   *   (9 → 7 → 5 items), and collapses to grouped appearance when the viewport\n   *   is too narrow to fit any page numbers. First and last pages are always shown\n   *   when needed.\n   * - `'grouped'`: Shows only previous and next controls without page numbers.\n   */\n  variant?: string;\n\n  /** Disables all interactive elements, preventing focus, hover, and page-change events. */\n  disabled?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  ariaLabel = 'Pagination',\n  previousPageLabel = 'Previous page',\n  nextPageLabel = 'Next page',\n  pageLabelFormatter,\n  variant = 'full',\n  disabled = false,\n  className,\n  ...props\n}: PaginationProps) => {\n  const {\n    resolvedVariant,\n    resolvedPageLabelFormatter,\n    sanitizedTotalPages,\n    sanitizedCurrentPage,\n  } = resolvePaginationInputs(\n    variant,\n    pageLabelFormatter,\n    totalPages,\n    currentPage,\n  );\n  const viewportMaxVisible = useViewportMaxVisible();\n\n  const [pendingCurrentPage, setPendingCurrentPage] = useState<number | null>(\n    null,\n  );\n\n  // Derive effective variant and page-slot count from viewport width.\n  // Explicit 'grouped' is never auto-upgraded; only 'full' adapts.\n  const adaptiveResult =\n    resolvedVariant === 'full' ? viewportMaxVisible : MAX_VISIBLE_ELEMENTS;\n  const effectiveVariant =\n    resolvedVariant === 'full' && adaptiveResult === null\n      ? 'grouped'\n      : resolvedVariant;\n  const maxVisible = adaptiveResult ?? MAX_VISIBLE_ELEMENTS;\n\n  // Clamp current page to valid range\n  const validCurrentPage = Math.max(\n    1,\n    Math.min(sanitizedCurrentPage, sanitizedTotalPages),\n  );\n\n  const previousValidCurrentPageRef = useRef(validCurrentPage);\n\n  // Keep the visual current page responsive while parent state catches up.\n  // Once a controlled currentPage update arrives, return to controlled rendering.\n  useEffect(() => {\n    const didControlledPageChange =\n      previousValidCurrentPageRef.current !== validCurrentPage;\n\n    if (\n      pendingCurrentPage !== null &&\n      (pendingCurrentPage === validCurrentPage || didControlledPageChange)\n    ) {\n      setPendingCurrentPage(null);\n    }\n\n    previousValidCurrentPageRef.current = validCurrentPage;\n  }, [validCurrentPage, pendingCurrentPage]);\n\n  const visualCurrentPage = pendingCurrentPage ?? validCurrentPage;\n\n  const canGoPrevious = visualCurrentPage > 1;\n  const canGoNext = visualCurrentPage < sanitizedTotalPages;\n\n  const {\n    showBoundaryPages,\n    pageNumbers,\n    showLeftEllipsis,\n    showRightEllipsis,\n  } = useMemo(\n    () =>\n      calculateVisiblePageNumbers(\n        visualCurrentPage,\n        sanitizedTotalPages,\n        maxVisible,\n      ),\n    [visualCurrentPage, sanitizedTotalPages, maxVisible],\n  );\n\n  // Only show pagination if there are 2 or more pages\n  if (sanitizedTotalPages < 2) {\n    return null;\n  }\n\n  const handlePageChange = (page: number) => {\n    if (\n      page !== visualCurrentPage &&\n      page >= 1 &&\n      page <= sanitizedTotalPages\n    ) {\n      setPendingCurrentPage(page);\n      onPageChange(page);\n    }\n  };\n\n  const classes = ['mds-pagination', `mds-pagination--${effectiveVariant}`];\n  if (className) {\n    classes.push(className);\n  }\n\n  // First, middle, and last page buttons share identical behavior; keeping the\n  // markup here avoids three nearly identical JSX branches below.\n  const renderPageButton = (page: number) => (\n    <button\n      key={page}\n      type=\"button\"\n      className=\"mds-pagination__page\"\n      onClick={() => handlePageChange(page)}\n      disabled={disabled}\n      aria-label={resolvedPageLabelFormatter(page)}\n      aria-current={page === visualCurrentPage ? 'page' : undefined}\n      data-current={page === visualCurrentPage}\n    >\n      {page}\n    </button>\n  );\n\n  return (\n    <nav className={classes.join(' ')} aria-label={ariaLabel} {...props}>\n      {/* Previous button */}\n      <button\n        type=\"button\"\n        className=\"mds-pagination__button mds-pagination__button--prev\"\n        onClick={() => handlePageChange(visualCurrentPage - 1)}\n        disabled={disabled || !canGoPrevious}\n        aria-label={previousPageLabel}\n        tabIndex={!disabled && canGoPrevious ? 0 : -1}\n      >\n        <i className=\"fa-solid fa-chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      {/* Page numbers are hidden in the grouped variant. */}\n      {effectiveVariant === 'full' && (\n        <div className=\"mds-pagination__pages\">\n          {showBoundaryPages && renderPageButton(1)}\n\n          {/* Left ellipsis */}\n          {showLeftEllipsis && (\n            <span\n              key=\"left-ellipsis\"\n              className=\"mds-pagination__ellipsis\"\n              aria-hidden=\"true\"\n            >\n              …\n            </span>\n          )}\n\n          {/* Page numbers */}\n          {pageNumbers.map(renderPageButton)}\n\n          {/* Right ellipsis */}\n          {showRightEllipsis && (\n            <span\n              key=\"right-ellipsis\"\n              className=\"mds-pagination__ellipsis\"\n              aria-hidden=\"true\"\n            >\n              …\n            </span>\n          )}\n\n          {showBoundaryPages && renderPageButton(sanitizedTotalPages)}\n        </div>\n      )}\n\n      {/* Next button */}\n      <button\n        type=\"button\"\n        className=\"mds-pagination__button mds-pagination__button--next\"\n        onClick={() => handlePageChange(visualCurrentPage + 1)}\n        disabled={disabled || !canGoNext}\n        aria-label={nextPageLabel}\n        tabIndex={!disabled && canGoNext ? 0 : -1}\n      >\n        <i className=\"fa-solid fa-chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </nav>\n  );\n};\n"],"mappings":";;;;AASA,IAAM,uBAAuB;AAwC7B,IAAa,cAAc,EACzB,YACA,aACA,cACA,YAAY,cACZ,oBAAoB,iBACpB,gBAAgB,aAChB,oBACA,UAAU,QACV,WAAW,OACX,WACA,GAAG,YACkB;CACrB,MAAM,EACJ,iBACA,4BACA,qBACA,yBACE,wBACF,SACA,oBACA,YACA,WACF;CACA,MAAM,qBAAqB,sBAAsB;CAEjD,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,IACF;CAIA,MAAM,iBACJ,oBAAoB,SAAS,qBAAqB;CACpD,MAAM,mBACJ,oBAAoB,UAAU,mBAAmB,OAC7C,YACA;CACN,MAAM,aAAa,kBAAkB;CAGrC,MAAM,mBAAmB,KAAK,IAC5B,GACA,KAAK,IAAI,sBAAsB,mBAAmB,CACpD;CAEA,MAAM,8BAA8B,OAAO,gBAAgB;CAI3D,gBAAgB;EACd,MAAM,0BACJ,4BAA4B,YAAY;EAE1C,IACE,uBAAuB,SACtB,uBAAuB,oBAAoB,0BAE5C,sBAAsB,IAAI;EAG5B,4BAA4B,UAAU;CACxC,GAAG,CAAC,kBAAkB,kBAAkB,CAAC;CAEzC,MAAM,oBAAoB,sBAAsB;CAEhD,MAAM,gBAAgB,oBAAoB;CAC1C,MAAM,YAAY,oBAAoB;CAEtC,MAAM,EACJ,mBACA,aACA,kBACA,sBACE,cAEA,4BACE,mBACA,qBACA,UACF,GACF;EAAC;EAAmB;EAAqB;CAAU,CACrD;CAGA,IAAI,sBAAsB,GACxB,OAAO;CAGT,MAAM,oBAAoB,SAAiB;EACzC,IACE,SAAS,qBACT,QAAQ,KACR,QAAQ,qBACR;GACA,sBAAsB,IAAI;GAC1B,aAAa,IAAI;EACnB;CACF;CAEA,MAAM,UAAU,CAAC,kBAAkB,mBAAmB,kBAAkB;CACxE,IAAI,WACF,QAAQ,KAAK,SAAS;CAKxB,MAAM,oBAAoB,SACxB,oBAAC,UAAD;EAEE,MAAK;EACL,WAAU;EACV,eAAe,iBAAiB,IAAI;EAC1B;EACV,cAAY,2BAA2B,IAAI;EAC3C,gBAAc,SAAS,oBAAoB,SAAS,KAAA;EACpD,gBAAc,SAAS;YAEtB;CACK,GAVD,IAUC;CAGV,OACE,qBAAC,OAAD;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,cAAY;EAAW,GAAI;YAA9D;GAEE,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe,iBAAiB,oBAAoB,CAAC;IACrD,UAAU,YAAY,CAAC;IACvB,cAAY;IACZ,UAAU,CAAC,YAAY,gBAAgB,IAAI;cAE3C,oBAAC,KAAD;KAAG,WAAU;KAA2B,eAAY;IAAQ,CAAA;GACtD,CAAA;GAGP,qBAAqB,UACpB,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,qBAAqB,iBAAiB,CAAC;KAGvC,oBACC,oBAAC,QAAD;MAEE,WAAU;MACV,eAAY;gBACb;KAEK,GALA,eAKA;KAIP,YAAY,IAAI,gBAAgB;KAGhC,qBACC,oBAAC,QAAD;MAEE,WAAU;MACV,eAAY;gBACb;KAEK,GALA,gBAKA;KAGP,qBAAqB,iBAAiB,mBAAmB;IACvD;;GAIP,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe,iBAAiB,oBAAoB,CAAC;IACrD,UAAU,YAAY,CAAC;IACvB,cAAY;IACZ,UAAU,CAAC,YAAY,YAAY,IAAI;cAEvC,oBAAC,KAAD;KAAG,WAAU;KAA4B,eAAY;IAAQ,CAAA;GACvD,CAAA;EACL;;AAET"}

package/dist/components/pagination/index.css

@@ -0,0 +1,139 @@
+.mds-pagination {
+  display: flex;
+  gap: var(--mds-spacing-xxs);
+  align-items: center;
+  flex-wrap: wrap;
+  font-family: inherit;
+  direction: inherit;
+}
+
+/* Shared base styles for buttons and page items */
+.mds-pagination__button,
+.mds-pagination__page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  padding: var(--mds-spacing-xs);
+  border: var(--mds-stroke-weight-sm) solid transparent;
+  border-radius: var(--mds-border-radius-xs);
+  background-color: transparent;
+  color: var(--mds-text-default);
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Keep hover affordance on prev/next controls only. Page-number buttons must
+   switch state atomically to avoid visible handoff when ellipsis positions move. */
+.mds-pagination__button {
+  transition: background-color 150ms ease;
+}
+
+.mds-pagination__page {
+  transition: none;
+}
+
+.mds-pagination__button:hover:not(:disabled),
+.mds-pagination__page:hover:not(:disabled) {
+  background-color: var(--mds-bg-interactive-secondary-hover);
+}
+
+.mds-pagination__button:active:not(:disabled),
+.mds-pagination__page:active:not(:disabled) {
+  background-color: var(--mds-bg-interactive-secondary-active);
+}
+
+.mds-pagination__button:focus,
+.mds-pagination__page:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.mds-pagination__button:focus-visible:not(:disabled),
+.mds-pagination__page:focus-visible:not(:disabled) {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+.mds-pagination__button:disabled,
+.mds-pagination__page:disabled {
+  color: var(--mds-text-muted);
+  cursor: not-allowed;
+}
+
+/* Icon sizing */
+.mds-pagination__button i {
+  /* width/font-size use --mds-icons-sm (= scale-600 = 1rem = 16px, the icon md size). */
+  width: var(--mds-icons-sm);
+  font-size: var(--mds-icons-sm);
+  line-height: var(--mds-line-height-paragraph-xs);
+}
+
+/* Full variant */
+.mds-pagination--full .mds-pagination__pages {
+  display: flex;
+  gap: var(--mds-spacing-xxs);
+  align-items: center;
+}
+
+/* Page items */
+.mds-pagination__page {
+  line-height: var(--mds-line-height-paragraph-xs);
+}
+
+/* Current page state */
+.mds-pagination__page[data-current='true'] {
+  background-color: var(--mds-bg-interactive-primary-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-pagination__page[data-current='true']:disabled {
+  background-color: transparent;
+  color: var(--mds-text-muted);
+}
+
+.mds-pagination__page[data-current='true']:hover:not(:disabled) {
+  background-color: var(--mds-bg-interactive-primary-hover);
+}
+
+.mds-pagination__page[data-current='true']:active:not(:disabled) {
+  background-color: var(--mds-bg-interactive-primary-active);
+}
+
+.mds-pagination__page[data-current='true']:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+/* Ellipsis */
+.mds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  color: var(--mds-text-muted);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Grouped variant - only shows prev/next buttons */
+.mds-pagination--grouped .mds-pagination__pages {
+  display: none;
+}
+
+/* Grouped button styling */
+.mds-pagination--grouped .mds-pagination__button {
+  border-color: var(--mds-border-interactive-secondary-default);
+}
+
+/* Flip prev/next chevrons in RTL so they point in the correct travel direction */
+[dir='rtl'] .mds-pagination__button i {
+  transform: scaleX(-1);
+}

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

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/components/pagination/index.js

@@ -0,0 +1,2 @@
+import { Pagination } from "./Pagination.js";
+export { Pagination };

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

@@ -0,0 +1,26 @@
+export type PaginationVariant = 'full' | 'grouped';
+export type PageLabelFormatter = (page: number) => string;
+interface ResolvedPaginationInputs {
+    resolvedVariant: PaginationVariant;
+    resolvedPageLabelFormatter: PageLabelFormatter;
+    sanitizedTotalPages: number;
+    sanitizedCurrentPage: number;
+}
+export declare const MAX_VISIBLE_ELEMENTS = 9;
+/**
+ * Calculate which page numbers to display given the current page, total pages,
+ * and the maximum number of visible slots (boundaries + ellipses + center pages).
+ *
+ * Slot accounting for any maxVisible M:
+ *   Near start / near end (1 ellipsis): 1 boundary + M-3 center + 1 ellipsis + 1 boundary
+ *   Middle (2 ellipses):                1 boundary + 1 ellipsis + M-4 center + 1 ellipsis + 1 boundary
+ */
+export declare function calculateVisiblePageNumbers(currentPage: number, totalPages: number, maxVisible: number): {
+    showBoundaryPages: boolean;
+    showLeftEllipsis: boolean;
+    showRightEllipsis: boolean;
+    pageNumbers: number[];
+};
+export declare function useViewportMaxVisible(): number | null;
+export declare function resolvePaginationInputs(variant: string, pageLabelFormatter: PageLabelFormatter | undefined, totalPages: number, currentPage: number): ResolvedPaginationInputs;
+export {};

package/dist/components/pagination/pagination.helpers.js

@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+var allowedVariants = ["full", "grouped"];
+var VIEWPORT_BREAKPOINT_MEDIA_QUERIES = [
+	"(min-width: 576px)",
+	"(min-width: 768px)",
+	"(min-width: 992px)"
+];
+var defaultPageLabelFormatter = (page) => `Page ${page}`;
+/**
+* Returns how many page-number slots to show based on the current viewport width.
+* Returns null when the viewport is too narrow for even a minimal 5-item row,
+* which signals an auto-collapse to grouped appearance.
+*
+* Thresholds align with MDS / Bootstrap 5 breakpoints:
+*   xxs  < 576 px → null  (grouped, no page numbers)
+*   sm  ≥ 576 px →    5
+*   md  ≥ 768 px →    7
+*   lg  ≥ 992 px →    9
+*/
+function getViewportMaxVisible() {
+	if (typeof window === "undefined") return 9;
+	const w = window.innerWidth;
+	if (w >= 992) return 9;
+	if (w >= 768) return 7;
+	if (w >= 576) return 5;
+	return null;
+}
+/**
+* Calculate which page numbers to display given the current page, total pages,
+* and the maximum number of visible slots (boundaries + ellipses + center pages).
+*
+* Slot accounting for any maxVisible M:
+*   Near start / near end (1 ellipsis): 1 boundary + M-3 center + 1 ellipsis + 1 boundary
+*   Middle (2 ellipses):                1 boundary + 1 ellipsis + M-4 center + 1 ellipsis + 1 boundary
+*/
+function calculateVisiblePageNumbers(currentPage, totalPages, maxVisible) {
+	if (totalPages <= maxVisible) return {
+		showBoundaryPages: false,
+		showLeftEllipsis: false,
+		showRightEllipsis: false,
+		pageNumbers: Array.from({ length: totalPages }, (_, i) => i + 1)
+	};
+	const middleForSingle = maxVisible - 3;
+	const middleForDouble = maxVisible - 4;
+	const halfMiddle = Math.floor(middleForDouble / 2);
+	const nearStartThreshold = 1 + middleForSingle - halfMiddle;
+	const nearEndThreshold = totalPages - nearStartThreshold + 1;
+	if (currentPage <= nearStartThreshold) {
+		const startPage = 2;
+		const endPage = 1 + middleForSingle;
+		return {
+			showBoundaryPages: true,
+			showLeftEllipsis: false,
+			showRightEllipsis: true,
+			pageNumbers: Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i)
+		};
+	}
+	if (currentPage >= nearEndThreshold) {
+		const endPage = totalPages - 1;
+		const startPage = endPage - middleForSingle + 1;
+		return {
+			showBoundaryPages: true,
+			showLeftEllipsis: true,
+			showRightEllipsis: false,
+			pageNumbers: Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i)
+		};
+	}
+	const startPage = currentPage - halfMiddle;
+	const endPage = currentPage + middleForDouble - halfMiddle - 1;
+	return {
+		showBoundaryPages: true,
+		showLeftEllipsis: true,
+		showRightEllipsis: true,
+		pageNumbers: Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i)
+	};
+}
+function sanitizePositiveInteger(value, propName, fallbackValue) {
+	if (!Number.isFinite(value)) return fallbackValue;
+	const normalizedValue = Math.trunc(value);
+	if (normalizedValue < 1 || normalizedValue !== value) return Math.max(1, normalizedValue);
+	return normalizedValue;
+}
+function addMediaQueryChangeListener(mediaQueryList, listener) {
+	if (typeof mediaQueryList.addEventListener === "function") {
+		mediaQueryList.addEventListener("change", listener);
+		return;
+	}
+	mediaQueryList.addListener(listener);
+}
+function removeMediaQueryChangeListener(mediaQueryList, listener) {
+	if (typeof mediaQueryList.removeEventListener === "function") {
+		mediaQueryList.removeEventListener("change", listener);
+		return;
+	}
+	mediaQueryList.removeListener(listener);
+}
+function useViewportMaxVisible() {
+	const [viewportMaxVisible, setViewportMaxVisible] = useState(getViewportMaxVisible);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handler = () => setViewportMaxVisible(getViewportMaxVisible());
+		if (typeof window.matchMedia !== "function") {
+			window.addEventListener("resize", handler);
+			return () => window.removeEventListener("resize", handler);
+		}
+		const mediaQueryLists = VIEWPORT_BREAKPOINT_MEDIA_QUERIES.map((query) => window.matchMedia(query));
+		mediaQueryLists.forEach((mediaQueryList) => {
+			addMediaQueryChangeListener(mediaQueryList, handler);
+		});
+		return () => {
+			mediaQueryLists.forEach((mediaQueryList) => {
+				removeMediaQueryChangeListener(mediaQueryList, handler);
+			});
+		};
+	}, []);
+	return viewportMaxVisible;
+}
+function resolvePaginationVariant(variant) {
+	return allowedVariants.includes(variant) ? variant : "full";
+}
+function resolvePageLabelFormatter(pageLabelFormatter) {
+	if (pageLabelFormatter !== void 0 && typeof pageLabelFormatter !== "function");
+	return typeof pageLabelFormatter === "function" ? pageLabelFormatter : defaultPageLabelFormatter;
+}
+function resolvePaginationInputs(variant, pageLabelFormatter, totalPages, currentPage) {
+	return {
+		resolvedVariant: resolvePaginationVariant(variant),
+		resolvedPageLabelFormatter: resolvePageLabelFormatter(pageLabelFormatter),
+		sanitizedTotalPages: sanitizePositiveInteger(totalPages, "totalPages", 1),
+		sanitizedCurrentPage: sanitizePositiveInteger(currentPage, "currentPage", 1)
+	};
+}
+//#endregion
+export { calculateVisiblePageNumbers, resolvePaginationInputs, useViewportMaxVisible };
+
+//# sourceMappingURL=pagination.helpers.js.map

package/dist/components/pagination/pagination.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.helpers.js","names":[],"sources":["../../../components/pagination/pagination.helpers.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type PaginationVariant = 'full' | 'grouped';\nexport type PageLabelFormatter = (page: number) => string;\n\ninterface ResolvedPaginationInputs {\n  resolvedVariant: PaginationVariant;\n  resolvedPageLabelFormatter: PageLabelFormatter;\n  sanitizedTotalPages: number;\n  sanitizedCurrentPage: number;\n}\n\nexport const MAX_VISIBLE_ELEMENTS = 9;\n\nconst allowedVariants: PaginationVariant[] = ['full', 'grouped'];\nconst VIEWPORT_BREAKPOINT_MEDIA_QUERIES = [\n  '(min-width: 576px)',\n  '(min-width: 768px)',\n  '(min-width: 992px)',\n] as const;\nconst defaultPageLabelFormatter: PageLabelFormatter = (page) => `Page ${page}`;\n\n/**\n * Returns how many page-number slots to show based on the current viewport width.\n * Returns null when the viewport is too narrow for even a minimal 5-item row,\n * which signals an auto-collapse to grouped appearance.\n *\n * Thresholds align with MDS / Bootstrap 5 breakpoints:\n *   xxs  < 576 px → null  (grouped, no page numbers)\n *   sm  ≥ 576 px →    5\n *   md  ≥ 768 px →    7\n *   lg  ≥ 992 px →    9\n */\nfunction getViewportMaxVisible(): number | null {\n  if (typeof window === 'undefined') return MAX_VISIBLE_ELEMENTS;\n  const w = window.innerWidth;\n  if (w >= 992) return 9;\n  if (w >= 768) return 7;\n  if (w >= 576) return 5;\n  return null;\n}\n\n/**\n * Calculate which page numbers to display given the current page, total pages,\n * and the maximum number of visible slots (boundaries + ellipses + center pages).\n *\n * Slot accounting for any maxVisible M:\n *   Near start / near end (1 ellipsis): 1 boundary + M-3 center + 1 ellipsis + 1 boundary\n *   Middle (2 ellipses):                1 boundary + 1 ellipsis + M-4 center + 1 ellipsis + 1 boundary\n */\nexport function calculateVisiblePageNumbers(\n  currentPage: number,\n  totalPages: number,\n  maxVisible: number,\n): {\n  showBoundaryPages: boolean;\n  showLeftEllipsis: boolean;\n  showRightEllipsis: boolean;\n  pageNumbers: number[];\n} {\n  // All pages fit within budget — no boundary markers or ellipses needed.\n  if (totalPages <= maxVisible) {\n    return {\n      showBoundaryPages: false,\n      showLeftEllipsis: false,\n      showRightEllipsis: false,\n      pageNumbers: Array.from({ length: totalPages }, (_, i) => i + 1),\n    };\n  }\n\n  // Center pages when a single ellipsis is visible (near start or near end).\n  const middleForSingle = maxVisible - 3;\n  // Center pages when both ellipses are visible (middle position).\n  const middleForDouble = maxVisible - 4;\n  const halfMiddle = Math.floor(middleForDouble / 2);\n\n  // Page at which the left ellipsis first appears (near-start → middle transition).\n  const nearStartThreshold = 1 + middleForSingle - halfMiddle;\n  // Page at which the right ellipsis disappears (middle → near-end transition).\n  const nearEndThreshold = totalPages - nearStartThreshold + 1;\n\n  if (currentPage <= nearStartThreshold) {\n    const startPage = 2;\n    const endPage = 1 + middleForSingle;\n    return {\n      showBoundaryPages: true,\n      showLeftEllipsis: false,\n      showRightEllipsis: true,\n      pageNumbers: Array.from(\n        { length: endPage - startPage + 1 },\n        (_, i) => startPage + i,\n      ),\n    };\n  }\n\n  if (currentPage >= nearEndThreshold) {\n    const endPage = totalPages - 1;\n    const startPage = endPage - middleForSingle + 1;\n    return {\n      showBoundaryPages: true,\n      showLeftEllipsis: true,\n      showRightEllipsis: false,\n      pageNumbers: Array.from(\n        { length: endPage - startPage + 1 },\n        (_, i) => startPage + i,\n      ),\n    };\n  }\n\n  // Middle position — both ellipses visible.\n  const startPage = currentPage - halfMiddle;\n  const endPage = currentPage + middleForDouble - halfMiddle - 1;\n  return {\n    showBoundaryPages: true,\n    showLeftEllipsis: true,\n    showRightEllipsis: true,\n    pageNumbers: Array.from(\n      { length: endPage - startPage + 1 },\n      (_, i) => startPage + i,\n    ),\n  };\n}\n\nfunction warnInvalidProp(\n  propName: string,\n  value: unknown,\n  fallbackDescription: string,\n) {\n  if (!import.meta.env.DEV) {\n    return;\n  }\n\n  console.warn(\n    `[MDS Pagination] Invalid ${propName} \"${String(value)}\". Falling back to ${fallbackDescription}.`,\n  );\n}\n\nfunction sanitizePositiveInteger(\n  value: number,\n  propName: 'totalPages' | 'currentPage',\n  fallbackValue: number,\n): number {\n  if (!Number.isFinite(value)) {\n    warnInvalidProp(propName, value, String(fallbackValue));\n    return fallbackValue;\n  }\n\n  const normalizedValue = Math.trunc(value);\n  if (normalizedValue < 1 || normalizedValue !== value) {\n    const safeValue = Math.max(1, normalizedValue);\n    warnInvalidProp(propName, value, String(safeValue));\n    return safeValue;\n  }\n\n  return normalizedValue;\n}\n\nfunction addMediaQueryChangeListener(\n  mediaQueryList: MediaQueryList,\n  listener: () => void,\n) {\n  // Safari still supports the older addListener/removeListener pair, so keep\n  // this compatibility layer until the library drops that browser range.\n  if (typeof mediaQueryList.addEventListener === 'function') {\n    mediaQueryList.addEventListener('change', listener);\n    return;\n  }\n\n  mediaQueryList.addListener(listener);\n}\n\nfunction removeMediaQueryChangeListener(\n  mediaQueryList: MediaQueryList,\n  listener: () => void,\n) {\n  if (typeof mediaQueryList.removeEventListener === 'function') {\n    mediaQueryList.removeEventListener('change', listener);\n    return;\n  }\n\n  mediaQueryList.removeListener(listener);\n}\n\nexport function useViewportMaxVisible() {\n  // Initialise from current viewport width so the first render already matches the viewport.\n  const [viewportMaxVisible, setViewportMaxVisible] = useState<number | null>(\n    getViewportMaxVisible,\n  );\n\n  useEffect(() => {\n    // window is available in browser environments; absent in jsdom / SSR.\n    if (typeof window === 'undefined') return;\n\n    const handler = () => setViewportMaxVisible(getViewportMaxVisible());\n\n    if (typeof window.matchMedia !== 'function') {\n      window.addEventListener('resize', handler);\n      return () => window.removeEventListener('resize', handler);\n    }\n\n    const mediaQueryLists = VIEWPORT_BREAKPOINT_MEDIA_QUERIES.map((query) =>\n      window.matchMedia(query),\n    );\n\n    mediaQueryLists.forEach((mediaQueryList) => {\n      addMediaQueryChangeListener(mediaQueryList, handler);\n    });\n\n    return () => {\n      mediaQueryLists.forEach((mediaQueryList) => {\n        removeMediaQueryChangeListener(mediaQueryList, handler);\n      });\n    };\n  }, []);\n\n  return viewportMaxVisible;\n}\n\nfunction resolvePaginationVariant(variant: string): PaginationVariant {\n  if (\n    import.meta.env.DEV &&\n    variant &&\n    !allowedVariants.includes(variant as PaginationVariant)\n  ) {\n    console.warn(\n      `[MDS Pagination] Invalid variant \"${variant}\". Falling back to \"full\". Allowed: ${allowedVariants.join(', ')}`,\n    );\n  }\n\n  return allowedVariants.includes(variant as PaginationVariant)\n    ? (variant as PaginationVariant)\n    : 'full';\n}\n\nfunction resolvePageLabelFormatter(pageLabelFormatter?: PageLabelFormatter) {\n  if (\n    pageLabelFormatter !== undefined &&\n    typeof pageLabelFormatter !== 'function'\n  ) {\n    warnInvalidProp(\n      'pageLabelFormatter',\n      pageLabelFormatter,\n      'the default page label formatter',\n    );\n  }\n\n  return typeof pageLabelFormatter === 'function'\n    ? pageLabelFormatter\n    : defaultPageLabelFormatter;\n}\n\nexport function resolvePaginationInputs(\n  variant: string,\n  pageLabelFormatter: PageLabelFormatter | undefined,\n  totalPages: number,\n  currentPage: number,\n): ResolvedPaginationInputs {\n  // Resolve every JS-facing input in one place so the render path can assume\n  // normalized values and stay focused on layout decisions.\n  return {\n    resolvedVariant: resolvePaginationVariant(variant),\n    resolvedPageLabelFormatter: resolvePageLabelFormatter(pageLabelFormatter),\n    sanitizedTotalPages: sanitizePositiveInteger(totalPages, 'totalPages', 1),\n    sanitizedCurrentPage: sanitizePositiveInteger(\n      currentPage,\n      'currentPage',\n      1,\n    ),\n  };\n}\n"],"mappings":"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"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from 'react';
+type ProgressBarStatus = 'in-progress' | 'loading' | 'error' | 'warning';
+type ProgressBarLabelVariant = 'title-and-count' | 'title' | 'inline' | 'none';
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current progress value in the range defined by `min` and `max`. */
+    value?: number;
+    /** Lower bound for the progress range. Defaults to 0. */
+    min?: number;
+    /** Upper bound for the progress range. Defaults to 100. */
+    max?: number;
+    /** Visual state of the progress indicator — controls fill and track colours. */
+    status?: ProgressBarStatus;
+    /**
+     * Controls label layout:
+     * - `title-and-count`: title + count row above the bar (default)
+     * - `title`: title only above the bar
+     * - `inline`: bar with count beside it in a row
+     * - `none`: bar only, no visible label
+     */
+    labelVariant?: ProgressBarLabelVariant;
+    /** Pre-translated title text rendered above the bar (title-and-count / title variants).
+     *  Also used as the accessible name for the bar when no visible label is present. */
+    title?: string;
+    /**
+     * Pre-translated count or percentage text, e.g. "3 of 10" or "50%".
+     * The component intentionally does not calculate or format this from
+     * `value`, `min`, and `max`; word order, plural rules, and number formatting
+     * belong to the consuming application's i18n layer.
+     */
+    count?: string;
+    /** Controls striped animation when status is loading. */
+    animated?: boolean;
+}
+export declare const ProgressBar: ({ value, min, max, status, labelVariant, title, count, animated, className, ...props }: ProgressBarProps) => import("react").JSX.Element;
+export {};

package/dist/components/progress-bar/ProgressBar.js

@@ -0,0 +1,86 @@
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/progress-bar/ProgressBar.tsx
+var allowedStatuses = [
+	"in-progress",
+	"loading",
+	"error",
+	"warning"
+];
+var allowedLabels = [
+	"title-and-count",
+	"title",
+	"inline",
+	"none"
+];
+var ProgressBar = ({ value = 0, min = 0, max = 100, status, labelVariant = "title-and-count", title, count, animated = false, className, ...props }) => {
+	const titleId = useId();
+	const isAllowedStatus = !!status && allowedStatuses.includes(status);
+	const isAllowedLabelVariant = allowedLabels.includes(labelVariant);
+	const hasAscendingRange = Number.isFinite(min) && Number.isFinite(max) && min < max;
+	const resolvedMin = hasAscendingRange ? min : 0;
+	const resolvedMax = hasAscendingRange ? max : 100;
+	const resolvedStatus = isAllowedStatus ? status : "in-progress";
+	const resolvedLabel = isAllowedLabelVariant ? labelVariant : "title-and-count";
+	const clampedValue = Math.min(resolvedMax, Math.max(resolvedMin, value));
+	const fillPercent = (clampedValue - resolvedMin) / (resolvedMax - resolvedMin) * 100;
+	const visualStatus = fillPercent === 0 ? "empty" : fillPercent === 100 ? "completed" : resolvedStatus;
+	const isTitleCount = resolvedLabel === "title-and-count";
+	const isTitle = resolvedLabel === "title";
+	const isInline = resolvedLabel === "inline";
+	const showTitleRow = isTitleCount || isTitle;
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = props;
+	const hasVisibleTitle = showTitleRow && Boolean(title);
+	const trackLabelledby = ariaLabelledby ?? (hasVisibleTitle && !ariaLabel ? titleId : void 0);
+	const trackAriaLabel = ariaLabel ?? (!hasVisibleTitle ? title : void 0);
+	const wrapperClasses = [
+		"mds-progress-bar",
+		`mds-progress-bar--label-${resolvedLabel}`,
+		`mds-progress-bar--${visualStatus}`
+	];
+	if (className) wrapperClasses.push(className);
+	const fillClasses = [
+		"mds-progress-bar-fill",
+		"progress-bar",
+		visualStatus === "loading" ? "progress-bar-striped" : "",
+		visualStatus === "loading" && animated ? "progress-bar-animated" : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClasses.join(" "),
+		...restProps,
+		children: [
+			showTitleRow && /* @__PURE__ */ jsxs("div", {
+				className: "mds-progress-bar-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: "mds-progress-bar-title",
+					children: title
+				}), isTitleCount && /* @__PURE__ */ jsx("span", {
+					className: "mds-progress-bar-count",
+					children: count
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mds-progress-bar-track progress",
+				role: "progressbar",
+				"aria-valuenow": clampedValue,
+				"aria-valuemin": resolvedMin,
+				"aria-valuemax": resolvedMax,
+				"aria-labelledby": trackLabelledby,
+				"aria-label": trackAriaLabel,
+				children: /* @__PURE__ */ jsx("div", {
+					className: fillClasses,
+					style: { width: `${fillPercent}%` }
+				})
+			}),
+			isInline && /* @__PURE__ */ jsx("span", {
+				className: "mds-progress-bar-count",
+				children: count
+			})
+		]
+	});
+};
+//#endregion
+export { ProgressBar };
+
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useId } from 'react';\n\ntype ProgressBarStatus = 'in-progress' | 'loading' | 'error' | 'warning';\n\ntype ProgressBarVisualStatus = 'empty' | ProgressBarStatus | 'completed';\n\ntype ProgressBarLabelVariant = 'title-and-count' | 'title' | 'inline' | 'none';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Current progress value in the range defined by `min` and `max`. */\n  value?: number;\n  /** Lower bound for the progress range. Defaults to 0. */\n  min?: number;\n  /** Upper bound for the progress range. Defaults to 100. */\n  max?: number;\n  /** Visual state of the progress indicator — controls fill and track colours. */\n  status?: ProgressBarStatus;\n  /**\n   * Controls label layout:\n   * - `title-and-count`: title + count row above the bar (default)\n   * - `title`: title only above the bar\n   * - `inline`: bar with count beside it in a row\n   * - `none`: bar only, no visible label\n   */\n  labelVariant?: ProgressBarLabelVariant;\n  /** Pre-translated title text rendered above the bar (title-and-count / title variants).\n   *  Also used as the accessible name for the bar when no visible label is present. */\n  title?: string;\n  /**\n   * Pre-translated count or percentage text, e.g. \"3 of 10\" or \"50%\".\n   * The component intentionally does not calculate or format this from\n   * `value`, `min`, and `max`; word order, plural rules, and number formatting\n   * belong to the consuming application's i18n layer.\n   */\n  count?: string;\n  /** Controls striped animation when status is loading. */\n  animated?: boolean;\n}\n\nconst allowedStatuses: ProgressBarStatus[] = [\n  'in-progress',\n  'loading',\n  'error',\n  'warning',\n];\n\nconst allowedLabels: ProgressBarLabelVariant[] = [\n  'title-and-count',\n  'title',\n  'inline',\n  'none',\n];\n\nexport const ProgressBar = ({\n  value = 0,\n  min = 0,\n  max = 100,\n  status,\n  labelVariant = 'title-and-count',\n  title,\n  count,\n  animated = false,\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const titleId = useId();\n\n  const isAllowedStatus =\n    !!status && allowedStatuses.includes(status as ProgressBarStatus);\n  const isAllowedLabelVariant = allowedLabels.includes(\n    labelVariant as ProgressBarLabelVariant,\n  );\n\n  // Normalize range inputs to finite numbers and ensure an ascending range.\n  const hasFiniteRange = Number.isFinite(min) && Number.isFinite(max);\n  const hasAscendingRange = hasFiniteRange && min < max;\n  const resolvedMin = hasAscendingRange ? min : 0;\n  const resolvedMax = hasAscendingRange ? max : 100;\n  const isValueInRange = value >= resolvedMin && value <= resolvedMax;\n\n  const resolvedStatus: ProgressBarStatus = isAllowedStatus\n    ? status\n    : 'in-progress';\n  const resolvedLabel: ProgressBarLabelVariant = isAllowedLabelVariant\n    ? labelVariant\n    : 'title-and-count';\n  const clampedValue = Math.min(resolvedMax, Math.max(resolvedMin, value));\n  const fillPercent =\n    ((clampedValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100;\n  // At 0% and 100% fill, visual styling is derived from normalized position,\n  // regardless of status.\n  const visualStatus: ProgressBarVisualStatus =\n    fillPercent === 0\n      ? 'empty'\n      : fillPercent === 100\n        ? 'completed'\n        : resolvedStatus;\n\n  if (import.meta.env.DEV) {\n    if (status && !isAllowedStatus) {\n      console.warn(\n        `[MDS ProgressBar] Invalid status \"${status}\". Falling back to \"in-progress\". Allowed: ${allowedStatuses.join(', ')}`,\n      );\n    }\n    if (!isAllowedLabelVariant) {\n      console.warn(\n        `[MDS ProgressBar] Invalid labelVariant \"${labelVariant}\". Falling back to \"title-and-count\". Allowed: ${allowedLabels.join(', ')}`,\n      );\n    }\n    if (!hasAscendingRange) {\n      console.warn(\n        `[MDS ProgressBar] Invalid range min=\"${min}\" max=\"${max}\". Falling back to min=0 and max=100 with min < max required.`,\n      );\n    }\n    if (!isValueInRange) {\n      console.warn(\n        `[MDS ProgressBar] value \"${value}\" is outside the allowed range [${resolvedMin}–${resolvedMax}] and will be clamped.`,\n      );\n    }\n  }\n\n  const isTitleCount = resolvedLabel === 'title-and-count';\n  const isTitle = resolvedLabel === 'title';\n  const isInline = resolvedLabel === 'inline';\n  const showTitleRow = isTitleCount || isTitle;\n\n  // Extract aria-* props so they can be forwarded to the progressbar track element,\n  // which carries role=\"progressbar\" — the accessible element in this component.\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...restProps\n  } = props;\n\n  // Derive accessible name for the track:\n  // - Explicit aria-labelledby wins if provided.\n  // - If a visible title element is present and no explicit aria-label, point to it.\n  const hasVisibleTitle = showTitleRow && Boolean(title);\n  const trackLabelledby =\n    ariaLabelledby ?? (hasVisibleTitle && !ariaLabel ? titleId : undefined);\n\n  // aria-label is used when no visible title is rendered (inline / none variants)\n  // and no labelledby reference applies.\n  const trackAriaLabel = ariaLabel ?? (!hasVisibleTitle ? title : undefined);\n\n  // Check derived accessible-name values regardless of the labelVariant\n  if (import.meta.env.DEV && !trackAriaLabel && !trackLabelledby) {\n    console.warn(\n      '[MDS ProgressBar] No accessible name found. Provide a title prop or aria-label / aria-labelledby.',\n    );\n  }\n\n  const wrapperClasses = [\n    'mds-progress-bar',\n    `mds-progress-bar--label-${resolvedLabel}`,\n    `mds-progress-bar--${visualStatus}`,\n  ];\n  if (className) wrapperClasses.push(className);\n\n  const fillClasses = [\n    'mds-progress-bar-fill',\n    'progress-bar',\n    // In loading status, stripes are always shown; motion is controlled by `animated`.\n    visualStatus === 'loading' ? 'progress-bar-striped' : '',\n    visualStatus === 'loading' && animated ? 'progress-bar-animated' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={wrapperClasses.join(' ')} {...restProps}>\n      {showTitleRow && (\n        <div className=\"mds-progress-bar-label\">\n          <span id={titleId} className=\"mds-progress-bar-title\">\n            {title}\n          </span>\n          {isTitleCount && (\n            <span className=\"mds-progress-bar-count\">{count}</span>\n          )}\n        </div>\n      )}\n      <div\n        className=\"mds-progress-bar-track progress\"\n        role=\"progressbar\"\n        aria-valuenow={clampedValue}\n        aria-valuemin={resolvedMin}\n        aria-valuemax={resolvedMax}\n        aria-labelledby={trackLabelledby}\n        aria-label={trackAriaLabel}\n      >\n        <div className={fillClasses} style={{ width: `${fillPercent}%` }} />\n      </div>\n      {isInline && <span className=\"mds-progress-bar-count\">{count}</span>}\n    </div>\n  );\n};\n"],"mappings":";;;AAwCA,IAAM,kBAAuC;CAC3C;CACA;CACA;CACA;AACF;AAEA,IAAM,gBAA2C;CAC/C;CACA;CACA;CACA;AACF;AAEA,IAAa,eAAe,EAC1B,QAAQ,GACR,MAAM,GACN,MAAM,KACN,QACA,eAAe,mBACf,OACA,OACA,WAAW,OACX,WACA,GAAG,YACmB;CACtB,MAAM,UAAU,MAAM;CAEtB,MAAM,kBACJ,CAAC,CAAC,UAAU,gBAAgB,SAAS,MAA2B;CAClE,MAAM,wBAAwB,cAAc,SAC1C,YACF;CAIA,MAAM,oBADiB,OAAO,SAAS,GAAG,KAAK,OAAO,SAAS,GAAG,KACtB,MAAM;CAClD,MAAM,cAAc,oBAAoB,MAAM;CAC9C,MAAM,cAAc,oBAAoB,MAAM;CAG9C,MAAM,iBAAoC,kBACtC,SACA;CACJ,MAAM,gBAAyC,wBAC3C,eACA;CACJ,MAAM,eAAe,KAAK,IAAI,aAAa,KAAK,IAAI,aAAa,KAAK,CAAC;CACvE,MAAM,eACF,eAAe,gBAAgB,cAAc,eAAgB;CAGjE,MAAM,eACJ,gBAAgB,IACZ,UACA,gBAAgB,MACd,cACA;CAyBR,MAAM,eAAe,kBAAkB;CACvC,MAAM,UAAU,kBAAkB;CAClC,MAAM,WAAW,kBAAkB;CACnC,MAAM,eAAe,gBAAgB;CAIrC,MAAM,EACJ,cAAc,WACd,mBAAmB,gBACnB,GAAG,cACD;CAKJ,MAAM,kBAAkB,gBAAgB,QAAQ,KAAK;CACrD,MAAM,kBACJ,mBAAmB,mBAAmB,CAAC,YAAY,UAAU,KAAA;CAI/D,MAAM,iBAAiB,cAAc,CAAC,kBAAkB,QAAQ,KAAA;CAShE,MAAM,iBAAiB;EACrB;EACA,2BAA2B;EAC3B,qBAAqB;CACvB;CACA,IAAI,WAAW,eAAe,KAAK,SAAS;CAE5C,MAAM,cAAc;EAClB;EACA;EAEA,iBAAiB,YAAY,yBAAyB;EACtD,iBAAiB,aAAa,WAAW,0BAA0B;CACrE,EACG,OAAO,OAAO,EACd,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EAAK,WAAW,eAAe,KAAK,GAAG;EAAG,GAAI;YAA9C;GACG,gBACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAU;eAC1B;IACG,CAAA,GACL,gBACC,oBAAC,QAAD;KAAM,WAAU;eAA0B;IAAY,CAAA,CAErD;;GAEP,oBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,mBAAiB;IACjB,cAAY;cAEZ,oBAAC,OAAD;KAAK,WAAW;KAAa,OAAO,EAAE,OAAO,GAAG,YAAY,GAAG;IAAI,CAAA;GAChE,CAAA;GACJ,YAAY,oBAAC,QAAD;IAAM,WAAU;cAA0B;GAAY,CAAA;EAChE;;AAET"}