@moodlehq/design-system 4.0.0 → 5.0.0

package/dist/components/favourite-button/FavouriteButton.d.ts

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface FavouriteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Whether the item is currently selected as a favourite.
+     * Controls the filled/outlined icon state and `aria-pressed`.
+     */
+    selected?: boolean;
+    /**
+     * Accessible name announced by screen readers.
+     * Must be a translated string provided by the caller.
+     * Typically "Add to favourites" or "Remove from favourites".
+     */
+    'aria-label': string;
+}
+export declare const FavouriteButton: import('react').ForwardRefExoticComponent<FavouriteButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/favourite-button/FavouriteButton.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region components/favourite-button/FavouriteButton.tsx
+var FavouriteButton = forwardRef(function FavouriteButton({ selected = false, className, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		className: [
+			"mds-favourite-button",
+			selected ? "mds-favourite-button--selected" : null,
+			className
+		].filter(Boolean).join(" "),
+		type: "button",
+		"aria-label": ariaLabel,
+		"aria-pressed": selected,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "mds-favourite-button__icon",
+			"aria-hidden": "true"
+		})
+	});
+});
+//#endregion
+export { FavouriteButton };
+
+//# sourceMappingURL=FavouriteButton.js.map

package/dist/components/favourite-button/FavouriteButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavouriteButton.js","names":[],"sources":["../../../components/favourite-button/FavouriteButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nexport interface FavouriteButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> {\n  /**\n   * Whether the item is currently selected as a favourite.\n   * Controls the filled/outlined icon state and `aria-pressed`.\n   */\n  selected?: boolean;\n\n  /**\n   * Accessible name announced by screen readers.\n   * Must be a translated string provided by the caller.\n   * Typically \"Add to favourites\" or \"Remove from favourites\".\n   */\n  'aria-label': string;\n}\n\nexport const FavouriteButton = forwardRef<\n  HTMLButtonElement,\n  FavouriteButtonProps\n>(function FavouriteButton(\n  { selected = false, className, 'aria-label': ariaLabel, ...props },\n  ref,\n) {\n  const classes = [\n    'mds-favourite-button',\n    selected ? 'mds-favourite-button--selected' : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={classes}\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-pressed={selected}\n      {...props}\n    >\n      <span className=\"mds-favourite-button__icon\" aria-hidden=\"true\" />\n    </button>\n  );\n});\n"],"mappings":";;;AAqBA,IAAa,kBAAkB,WAG7B,SAAS,gBACT,EAAE,WAAW,OAAO,WAAW,cAAc,WAAW,GAAG,SAC3D,KACA;CASA,OACE,oBAAC,UAAD;EACO;EACL,WAXY;GACd;GACA,WAAW,mCAAmC;GAC9C;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAKO;EACX,MAAK;EACL,cAAY;EACZ,gBAAc;EACd,GAAI;YAEJ,oBAAC,QAAD;GAAM,WAAU;GAA6B,eAAY;EAAQ,CAAA;CAC3D,CAAA;AAEZ,CAAC"}

package/dist/components/favourite-button/index.css

@@ -0,0 +1,86 @@
+/* Favourite button (icon-only toggle) */
+
+.mds-favourite-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mds-spacing-xs);
+  border: none;
+  border-radius: var(--mds-border-radius-pill);
+  background-color: var(--mds-bg-surface-default);
+  color: var(--mds-text-default);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+}
+
+.mds-favourite-button__icon {
+  display: block;
+  inline-size: var(--mds-icons-xs);
+  block-size: var(--mds-icons-xs);
+  background-color: currentColor;
+  mask-image: url('./assets/star-outline.svg');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-image: url('./assets/star-outline.svg');
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+
+.mds-favourite-button--selected .mds-favourite-button__icon {
+  mask-image: url('./assets/star-filled.svg');
+  -webkit-mask-image: url('./assets/star-filled.svg');
+}
+
+/* Unselected states */
+.mds-favourite-button:hover:not(:disabled) {
+  background-color: var(--mds-bg-surface-subtle);
+  color: var(--mds-text-subtle);
+}
+
+.mds-favourite-button:active:not(:disabled) {
+  background-color: var(--mds-bg-surface-strong);
+  color: var(--mds-text-default);
+}
+
+/* Selected states */
+.mds-favourite-button--selected {
+  background-color: var(--mds-bg-surface-default);
+  color: var(--mds-text-link-primary-default);
+}
+
+.mds-favourite-button--selected:hover:not(:disabled) {
+  background-color: var(--mds-bg-surface-subtle);
+  color: var(--mds-text-link-primary-hover);
+}
+
+.mds-favourite-button--selected:active:not(:disabled) {
+  background-color: var(--mds-bg-surface-strong);
+  color: var(--mds-text-link-primary-default);
+}
+
+/* Disabled states */
+.mds-favourite-button:disabled {
+  background-color: var(--mds-bg-surface-default);
+  color: var(--mds-text-muted);
+  cursor: not-allowed;
+}
+
+.mds-favourite-button--selected:disabled {
+  color: var(--mds-text-link-primary-disabled);
+}
+
+/* Focus ring */
+.mds-favourite-button:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.mds-favourite-button:focus-visible {
+  box-shadow: none;
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: 0;
+}

package/dist/components/favourite-button/index.d.ts

@@ -0,0 +1,2 @@
+export { FavouriteButton } from './FavouriteButton';
+export type { FavouriteButtonProps } from './FavouriteButton';

package/dist/components/favourite-button/index.js

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

package/dist/components/index.css

@@ -0,0 +1,12 @@
+@import './activity-icon/index.css';
+@import './badge/index.css';
+@import './button/index.css';
+@import './checkbox/index.css';
+@import './choicebox/index.css';
+@import './close-button/index.css';
+@import './favourite-button/index.css';
+@import './link/index.css';
+@import './nav-pill/index.css';
+@import './pagination/index.css';
+@import './progress-bar/index.css';
+@import './radio/index.css';

package/dist/components/index.d.ts

@@ -6,7 +6,19 @@ export { Button } from './button';
 export type { ButtonProps } from './button';
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export { Choicebox } from './choicebox';
+export type { ChoiceboxProps } from './choicebox';
 export { CloseButton } from './close-button';
 export type { CloseButtonProps } from './close-button';
+export { FavouriteButton } from './favourite-button';
+export type { FavouriteButtonProps } from './favourite-button';
+export { Link } from './link';
+export type { LinkProps } from './link';
+export { NavPill } from './nav-pill';
+export type { NavPillProps } from './nav-pill';
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination';
+export { ProgressBar } from './progress-bar';
+export type { ProgressBarProps } from './progress-bar';
 export { Radio } from './radio';
 export type { RadioProps } from './radio';

package/dist/components/link/Link.d.ts

@@ -0,0 +1,11 @@
+import { AnchorHTMLAttributes, ReactElement } from 'react';
+type IconElement = ReactElement<'i' | 'svg'>;
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    label: string;
+    variant?: string;
+    disabled?: boolean;
+    startIcon?: IconElement;
+    endIcon?: IconElement;
+}
+export declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/link/Link.js

@@ -0,0 +1,65 @@
+import { forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/link/Link.tsx
+var allowedVariants = ["primary", "secondary"];
+var isIconElement = (el, propName) => {
+	return isValidElement(el) && (el.type === "i" || el.type === "svg");
+};
+var Link = forwardRef(function Link({ label, variant, disabled = false, startIcon, endIcon, className, href, target, rel, onClick, tabIndex, role, ...props }, ref) {
+	const resolvedVariant = variant && allowedVariants.includes(variant) ? variant : "primary";
+	const resolvedStartIcon = isIconElement(startIcon, "startIcon") ? startIcon : null;
+	const resolvedEndIcon = isIconElement(endIcon, "endIcon") ? endIcon : null;
+	const handleClick = (event) => {
+		if (disabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+	};
+	const resolvedRel = (() => {
+		if (target !== "_blank") return rel;
+		const parts = new Set([
+			...(rel ?? "").split(/\s+/).filter(Boolean),
+			"noopener",
+			"noreferrer"
+		]);
+		return Array.from(parts).join(" ");
+	})();
+	const classes = ["mds-link", `mds-link--${resolvedVariant}`];
+	if (disabled) classes.push("mds-link--disabled");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("a", {
+		ref,
+		...props,
+		className: classes.join(" "),
+		href: disabled ? void 0 : href,
+		target,
+		rel: resolvedRel,
+		"aria-disabled": disabled || void 0,
+		tabIndex: disabled ? -1 : tabIndex,
+		role: disabled ? role ?? "link" : role,
+		onClick: handleClick,
+		children: [
+			resolvedStartIcon ? /* @__PURE__ */ jsx("span", {
+				className: "mds-link__icon",
+				"aria-hidden": "true",
+				children: resolvedStartIcon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "mds-link__label",
+				children: label
+			}),
+			resolvedStartIcon ? null : resolvedEndIcon ? /* @__PURE__ */ jsx("span", {
+				className: "mds-link__icon",
+				"aria-hidden": "true",
+				children: resolvedEndIcon
+			}) : null
+		]
+	});
+});
+Link.displayName = "Link";
+//#endregion
+export { Link };
+
+//# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":[],"sources":["../../../components/link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactElement } from 'react';\nimport { forwardRef, isValidElement } from 'react';\n\ntype LinkVariant = 'primary' | 'secondary';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  label: string;\n  variant?: string;\n  disabled?: boolean;\n  startIcon?: IconElement;\n  endIcon?: IconElement;\n}\n\nconst allowedVariants: LinkVariant[] = ['primary', 'secondary'];\n\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n  const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n  if (!valid && el != null && import.meta.env.DEV) {\n    console.error(`Link: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    label,\n    variant,\n    disabled = false,\n    startIcon,\n    endIcon,\n    className,\n    href,\n    target,\n    rel,\n    onClick,\n    tabIndex,\n    role,\n    ...props\n  },\n  ref,\n) {\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as LinkVariant)\n      ? (variant as LinkVariant)\n      : 'primary';\n  const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n    ? startIcon\n    : null;\n  const resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n  if (import.meta.env.DEV) {\n    const hasAccessibleName =\n      label.trim().length > 0 ||\n      Boolean(props['aria-label']?.trim()) ||\n      Boolean(props['aria-labelledby']?.trim());\n\n    if (!hasAccessibleName) {\n      console.warn(\n        'Link: provide a label, aria-label, or aria-labelledby for accessibility.',\n      );\n    }\n\n    if (variant && !allowedVariants.includes(variant as LinkVariant)) {\n      console.warn(\n        `[MDS Link] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n\n    if (resolvedStartIcon && resolvedEndIcon) {\n      console.warn(\n        'Link: pass either startIcon or endIcon, not both. Rendering startIcon only.',\n      );\n    }\n  }\n\n  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n    // Anchors have no native disabled state, so block activation explicitly.\n    if (disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    onClick?.(event);\n  };\n\n  // When opening in a new tab, ensure the page can't access window.opener\n  // and browsers don't send the Referer header (reverse tabnabbing protection).\n  const resolvedRel = (() => {\n    if (target !== '_blank') return rel;\n    const parts = new Set([\n      ...(rel ?? '').split(/\\s+/).filter(Boolean),\n      'noopener',\n      'noreferrer',\n    ]);\n    return Array.from(parts).join(' ');\n  })();\n\n  const classes = ['mds-link', `mds-link--${resolvedVariant}`];\n  if (disabled) {\n    classes.push('mds-link--disabled');\n  }\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <a\n      ref={ref}\n      {...props}\n      className={classes.join(' ')}\n      href={disabled ? undefined : href}\n      target={target}\n      rel={resolvedRel}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : tabIndex}\n      role={disabled ? (role ?? 'link') : role}\n      onClick={handleClick}\n    >\n      {resolvedStartIcon ? (\n        <span className=\"mds-link__icon\" aria-hidden=\"true\">\n          {resolvedStartIcon}\n        </span>\n      ) : null}\n      <span className=\"mds-link__label\">{label}</span>\n      {resolvedStartIcon ? null : resolvedEndIcon ? (\n        <span className=\"mds-link__icon\" aria-hidden=\"true\">\n          {resolvedEndIcon}\n        </span>\n      ) : null}\n    </a>\n  );\n});\n\nLink.displayName = 'Link';\n"],"mappings":";;;AAeA,IAAM,kBAAiC,CAAC,WAAW,WAAW;AAE9D,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAa,OAAO,WAAyC,SAAS,KACpE,EACE,OACA,SACA,WAAW,OACX,WACA,SACA,WACA,MACA,QACA,KACA,SACA,UACA,MACA,GAAG,SAEL,KACA;CACA,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAsB,IACrD,UACD;CACN,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,MAAM,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CA2BtE,MAAM,eAAe,UAAyC;EAE5D,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EAEA,UAAU,KAAK;CACjB;CAIA,MAAM,qBAAqB;EACzB,IAAI,WAAW,UAAU,OAAO;EAChC,MAAM,QAAQ,IAAI,IAAI;GACpB,IAAI,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO;GAC1C;GACA;EACF,CAAC;EACD,OAAO,MAAM,KAAK,KAAK,EAAE,KAAK,GAAG;CACnC,GAAG;CAEH,MAAM,UAAU,CAAC,YAAY,aAAa,iBAAiB;CAC3D,IAAI,UACF,QAAQ,KAAK,oBAAoB;CAEnC,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,OACE,qBAAC,KAAD;EACO;EACL,GAAI;EACJ,WAAW,QAAQ,KAAK,GAAG;EAC3B,MAAM,WAAW,KAAA,IAAY;EACrB;EACR,KAAK;EACL,iBAAe,YAAY,KAAA;EAC3B,UAAU,WAAW,KAAK;EAC1B,MAAM,WAAY,QAAQ,SAAU;EACpC,SAAS;YAVX;GAYG,oBACC,oBAAC,QAAD;IAAM,WAAU;IAAiB,eAAY;cAC1C;GACG,CAAA,IACJ;GACJ,oBAAC,QAAD;IAAM,WAAU;cAAmB;GAAY,CAAA;GAC9C,oBAAoB,OAAO,kBAC1B,oBAAC,QAAD;IAAM,WAAU;IAAiB,eAAY;cAC1C;GACG,CAAA,IACJ;EACH;;AAEP,CAAC;AAED,KAAK,cAAc"}

package/dist/components/link/index.css

@@ -0,0 +1,122 @@
+.mds-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mds-spacing-xs);
+
+  color: var(--mds-text-link-primary-default);
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-regular);
+  font-size: var(--mds-font-size-paragraph-default);
+  line-height: var(--mds-line-height-paragraph-xs);
+  letter-spacing: var(--mds-letter-spacing-default);
+  text-decoration: none;
+
+  cursor: pointer;
+}
+
+.mds-link:hover:not(:focus-visible) {
+  color: var(--mds-text-link-primary-hover);
+}
+
+.mds-link:active {
+  color: var(--mds-text-link-primary-hover);
+}
+
+/* Underline on hover applies only to the label text, not the icon.
+   Pressed state has no underline (Figma). Thickness and position use
+   from-font so the underline follows the font's own metrics. */
+.mds-link:hover:not(:focus-visible) .mds-link__label {
+  text-decoration: underline;
+  text-decoration-thickness: from-font;
+  text-underline-position: from-font;
+}
+
+/* Slide icon toward the label on hover using transform so the link node width
+   stays constant (gap remains --mds-spacing-xs; only the icon moves visually). */
+.mds-link:hover:not(:focus-visible) .mds-link__icon:first-child {
+  transform: translateX(var(--mds-spacing-xxs));
+}
+
+.mds-link:hover:not(:focus-visible) .mds-link__icon:last-child {
+  transform: translateX(calc(-1 * var(--mds-spacing-xxs)));
+}
+
+[dir='rtl'] .mds-link:hover:not(:focus-visible) .mds-link__icon:first-child {
+  transform: translateX(calc(-1 * var(--mds-spacing-xxs)));
+}
+
+[dir='rtl'] .mds-link:hover:not(:focus-visible) .mds-link__icon:last-child {
+  transform: translateX(var(--mds-spacing-xxs));
+}
+
+/* Reset icon position on press */
+.mds-link:active .mds-link__icon {
+  transform: none;
+}
+
+.mds-link:focus {
+  outline: none;
+}
+
+.mds-link:focus-visible {
+  /* Bottom-only focus underline matching Figma: 2px border-bottom, 1px gap below content */
+  outline: none;
+  border-radius: 0;
+  padding-bottom: var(--mds-spacing-offset);
+  border-bottom: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+}
+
+.mds-link.mds-link--secondary {
+  color: var(--mds-text-subtle);
+}
+
+.mds-link.mds-link--secondary:hover:not(:focus-visible),
+.mds-link.mds-link--secondary:active {
+  color: var(--mds-text-default);
+}
+
+.mds-link.mds-link--disabled,
+.mds-link.mds-link--disabled:hover,
+.mds-link.mds-link--disabled:active {
+  color: var(--mds-text-link-primary-disabled);
+  pointer-events: none;
+}
+
+.mds-link.mds-link--disabled .mds-link__icon,
+.mds-link.mds-link--disabled:hover .mds-link__icon,
+.mds-link.mds-link--disabled:active .mds-link__icon {
+  transform: none;
+}
+
+.mds-link.mds-link--disabled .mds-link__label,
+.mds-link.mds-link--disabled:hover .mds-link__label,
+.mds-link.mds-link--disabled:active .mds-link__label {
+  text-decoration: none;
+}
+
+.mds-link.mds-link--secondary.mds-link--disabled,
+.mds-link.mds-link--secondary.mds-link--disabled:hover,
+.mds-link.mds-link--secondary.mds-link--disabled:active {
+  color: var(--mds-text-muted);
+}
+
+.mds-link__icon,
+.mds-link__icon i,
+.mds-link__icon svg {
+  inline-size: var(--mds-icons-xs);
+  block-size: var(--mds-icons-xs);
+  font-size: var(--mds-icons-xs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-link__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 150ms ease;
+}
+
+.mds-link__label {
+  text-align: start;
+}

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

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

package/dist/components/link/index.js

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

package/dist/components/nav-pill/NavPill.d.ts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes } from 'react';
+export interface NavPillProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'aria-current' | 'aria-disabled' | 'role'> {
+    /**
+     * Visible label text. Must be a caller-supplied translated string.
+     */
+    label: string;
+    /**
+     * Whether this pill is currently the active/selected navigation item.
+     * Controls the active-indicator dot and selected visual styles.
+     */
+    selected?: boolean;
+    /**
+     * Destination URL for the navigation pill.
+     */
+    href: string;
+    /**
+     * Marks the anchor as non-interactive while preserving anchor semantics.
+     */
+    disabled?: boolean;
+}
+export declare const NavPill: import('react').ForwardRefExoticComponent<NavPillProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/components/nav-pill/NavPill.js

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/nav-pill/NavPill.tsx
+var NavPill = forwardRef(function NavPill({ label, selected = false, className, disabled, onClick, href, target, rel, tabIndex, ...props }, ref) {
+	const isDisabled = selected ? false : disabled;
+	const classes = [
+		"mds-nav-pill",
+		selected ? "mds-nav-pill--selected" : null,
+		className
+	].filter(Boolean).join(" ");
+	const resolvedHref = isDisabled ? void 0 : href;
+	const resolvedRel = (() => {
+		if (target !== "_blank") return rel;
+		const parts = new Set([
+			...(rel ?? "").split(/\s+/).filter(Boolean),
+			"noopener",
+			"noreferrer"
+		]);
+		return Array.from(parts).join(" ");
+	})();
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsxs("a", {
+		ref,
+		...props,
+		className: classes,
+		target,
+		rel: resolvedRel,
+		href: resolvedHref,
+		"aria-disabled": isDisabled ? "true" : void 0,
+		tabIndex: isDisabled ? -1 : tabIndex,
+		role: isDisabled ? "link" : void 0,
+		onClick: handleClick,
+		"aria-current": selected ? "page" : void 0,
+		children: [selected && /* @__PURE__ */ jsx("span", {
+			className: "mds-nav-pill__indicator",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "mds-nav-pill__label",
+			children: label
+		})]
+	});
+});
+NavPill.displayName = "NavPill";
+//#endregion
+export { NavPill };
+
+//# sourceMappingURL=NavPill.js.map

package/dist/components/nav-pill/NavPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavPill.js","names":[],"sources":["../../../components/nav-pill/NavPill.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent } from 'react';\nimport { forwardRef } from 'react';\n\nexport interface NavPillProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  'href' | 'aria-current' | 'aria-disabled' | 'role'\n> {\n  /**\n   * Visible label text. Must be a caller-supplied translated string.\n   */\n  label: string;\n\n  /**\n   * Whether this pill is currently the active/selected navigation item.\n   * Controls the active-indicator dot and selected visual styles.\n   */\n  selected?: boolean;\n\n  /**\n   * Destination URL for the navigation pill.\n   */\n  href: string;\n\n  /**\n   * Marks the anchor as non-interactive while preserving anchor semantics.\n   */\n  disabled?: boolean;\n}\n\nexport const NavPill = forwardRef<HTMLAnchorElement, NavPillProps>(\n  function NavPill(\n    {\n      label,\n      selected = false,\n      className,\n      disabled,\n      onClick,\n      href,\n      target,\n      rel,\n      tabIndex,\n      ...props\n    },\n    ref,\n  ) {\n    // A selected pill represents the active navigation destination and cannot\n    // be disabled — disabling it would leave users with no way to identify\n    // the current location. Silently ignore the disabled prop when selected.\n    if (import.meta.env.DEV && selected && disabled) {\n      console.warn(\n        '[MDS NavPill] A selected NavPill cannot be disabled. ' +\n          'The disabled prop is ignored when selected=true.',\n      );\n    }\n    const isDisabled = selected ? false : disabled;\n\n    const classes = [\n      'mds-nav-pill',\n      selected ? 'mds-nav-pill--selected' : null,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const resolvedHref = isDisabled ? undefined : href;\n\n    // Align anchor hardening with Link: when opening in a new tab, enforce\n    // noopener+noreferrer to prevent opener access and referrer leakage.\n    const resolvedRel = (() => {\n      if (target !== '_blank') return rel;\n      const parts = new Set([\n        ...(rel ?? '').split(/\\s+/).filter(Boolean),\n        'noopener',\n        'noreferrer',\n      ]);\n      return Array.from(parts).join(' ');\n    })();\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n      if (isDisabled) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      onClick?.(event);\n    };\n\n    return (\n      <a\n        ref={ref}\n        {...props}\n        className={classes}\n        target={target}\n        rel={resolvedRel}\n        href={resolvedHref}\n        aria-disabled={isDisabled ? 'true' : undefined}\n        tabIndex={isDisabled ? -1 : tabIndex}\n        role={isDisabled ? 'link' : undefined}\n        onClick={handleClick}\n        aria-current={selected ? 'page' : undefined}\n      >\n        {/* Active-indicator dot: only visible when selected */}\n        {selected && (\n          <span className=\"mds-nav-pill__indicator\" aria-hidden=\"true\" />\n        )}\n        <span className=\"mds-nav-pill__label\">{label}</span>\n      </a>\n    );\n  },\n);\n\nNavPill.displayName = 'NavPill';\n"],"mappings":";;;AA6BA,IAAa,UAAU,WACrB,SAAS,QACP,EACE,OACA,WAAW,OACX,WACA,UACA,SACA,MACA,QACA,KACA,UACA,GAAG,SAEL,KACA;CAUA,MAAM,aAAa,WAAW,QAAQ;CAEtC,MAAM,UAAU;EACd;EACA,WAAW,2BAA2B;EACtC;CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;CAEX,MAAM,eAAe,aAAa,KAAA,IAAY;CAI9C,MAAM,qBAAqB;EACzB,IAAI,WAAW,UAAU,OAAO;EAChC,MAAM,QAAQ,IAAI,IAAI;GACpB,IAAI,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO;GAC1C;GACA;EACF,CAAC;EACD,OAAO,MAAM,KAAK,KAAK,EAAE,KAAK,GAAG;CACnC,GAAG;CAEH,MAAM,eAAe,UAAyC;EAC5D,IAAI,YAAY;GACd,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EAEA,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,KAAD;EACO;EACL,GAAI;EACJ,WAAW;EACH;EACR,KAAK;EACL,MAAM;EACN,iBAAe,aAAa,SAAS,KAAA;EACrC,UAAU,aAAa,KAAK;EAC5B,MAAM,aAAa,SAAS,KAAA;EAC5B,SAAS;EACT,gBAAc,WAAW,SAAS,KAAA;YAXpC,CAcG,YACC,oBAAC,QAAD;GAAM,WAAU;GAA0B,eAAY;EAAQ,CAAA,GAEhE,oBAAC,QAAD;GAAM,WAAU;aAAuB;EAAY,CAAA,CAClD;;AAEP,CACF;AAEA,QAAQ,cAAc"}

package/dist/components/nav-pill/index.css

@@ -0,0 +1,96 @@
+/* Nav pill — compact navigation destination indicator */
+
+.mds-nav-pill,
+.mds-nav-pill:visited {
+  /* Reset anchor/link defaults */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mds-spacing-xxs);
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  border-radius: var(--mds-border-radius-md);
+
+  /* Label colour: unselected default */
+  color: var(--mds-text-subtle);
+  text-decoration: none;
+}
+
+.mds-nav-pill:hover,
+.mds-nav-pill:focus,
+.mds-nav-pill:active,
+.mds-nav-pill:visited {
+  text-decoration: none;
+}
+
+/* ---- Label ---- */
+
+.mds-nav-pill__label {
+  /* UI small — matches Figma: $font-size-sm / font-weight/medium / line-height/paragraph/xs */
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-small);
+  font-weight: var(--mds-font-weight-medium);
+  line-height: var(--mds-line-height-paragraph-xs);
+  white-space: nowrap;
+}
+
+/* ---- Active-indicator dot (selected state only) ---- */
+
+.mds-nav-pill__indicator {
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: var(--mds-border-radius-pill);
+  background-color: var(--mds-bg-interactive-primary-default);
+  flex-shrink: 0;
+}
+
+/* ---- Hover (unselected) ---- */
+
+.mds-nav-pill:hover:not([aria-disabled='true']):not(.mds-nav-pill--selected) {
+  background-color: var(--mds-bg-nav-pill-hover);
+}
+
+/* ---- Pressed / active (unselected) ---- */
+
+.mds-nav-pill:active:not([aria-disabled='true']):not(.mds-nav-pill--selected) {
+  background-color: var(--mds-bg-nav-pill-pressed);
+}
+
+/* ---- Focus-visible ring — keyboard navigation ---- */
+
+.mds-nav-pill:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.mds-nav-pill:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+/* ---- Disabled ---- */
+
+.mds-nav-pill[aria-disabled='true'] {
+  color: var(--mds-text-muted);
+  cursor: not-allowed;
+  background-color: transparent;
+}
+
+/* ---- Selected state ---- */
+
+.mds-nav-pill--selected {
+  color: var(--mds-text-default);
+  background-color: var(--mds-bg-nav-pill-selected);
+}
+
+.mds-nav-pill--selected:visited {
+  color: var(--mds-text-default);
+}
+
+.mds-nav-pill--selected:hover:not([aria-disabled='true']) {
+  background-color: var(--mds-bg-nav-pill-selected);
+}

package/dist/components/nav-pill/index.d.ts

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

package/dist/components/nav-pill/index.js

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

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

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { PageLabelFormatter } from './pagination.helpers';
+export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
+    /** Total number of pages */
+    totalPages: number;
+    /** Current page number (1-indexed) */
+    currentPage: number;
+    /** Callback fired when the page changes */
+    onPageChange: (page: number) => void;
+    /** Accessible name for the pagination landmark. */
+    ariaLabel?: string;
+    /** Accessible label used for the previous-page button. */
+    previousPageLabel?: string;
+    /** Accessible label used for the next-page button. */
+    nextPageLabel?: string;
+    /** Returns the accessible label for each numbered page button. */
+    pageLabelFormatter?: PageLabelFormatter;
+    /**
+     * Controls which variant of pagination to render.
+     * Accepts a broad string so JS consumers can be validated at runtime.
+     * - `'full'` (default): Shows page numbers between previous and next controls.
+     *   The visible page count reduces automatically as the viewport width narrows
+     *   (9 → 7 → 5 items), and collapses to grouped appearance when the viewport
+     *   is too narrow to fit any page numbers. First and last pages are always shown
+     *   when needed.
+     * - `'grouped'`: Shows only previous and next controls without page numbers.
+     */
+    variant?: string;
+    /** Disables all interactive elements, preventing focus, hover, and page-change events. */
+    disabled?: boolean;
+}
+export declare const Pagination: ({ totalPages, currentPage, onPageChange, ariaLabel, previousPageLabel, nextPageLabel, pageLabelFormatter, variant, disabled, className, ...props }: PaginationProps) => import("react").JSX.Element | null;