@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/pagination/pagination.js

@@ -1,4 +1,4 @@
-import { Button } from "../button/button.js";
+import { IconButton } from "../button/button.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import { Select } from "../select-field/select.js";
 import { PaginationContext, usePagination } from "./pagination-context.js";
@@ -304,73 +304,81 @@ var stepTo = (step, pageIndex, pageCount) => {
 };
 var PageStep = (t0) => {
 	const $ = c(22);
-	let children;
-	let label;
 	let onClick;
 	let props;
+	let render;
 	let step;
 	if ($[0] !== t0) {
-		({step, label, children, onClick, ...props} = t0);
+		({step, render, onClick, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = label;
-		$[3] = onClick;
-		$[4] = props;
-		$[5] = step;
+		$[1] = onClick;
+		$[2] = props;
+		$[3] = render;
+		$[4] = step;
 	} else {
-		children = $[1];
-		label = $[2];
-		onClick = $[3];
-		props = $[4];
-		step = $[5];
+		onClick = $[1];
+		props = $[2];
+		render = $[3];
+		step = $[4];
 	}
 	const { pageIndex, pageCount, onPageIndexChange } = usePagination();
 	let t1;
-	if ($[6] !== pageCount || $[7] !== pageIndex || $[8] !== step) {
+	if ($[5] !== pageCount || $[6] !== pageIndex || $[7] !== step) {
 		t1 = stepTo(step, pageIndex, pageCount);
-		$[6] = pageCount;
-		$[7] = pageIndex;
-		$[8] = step;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[5] = pageCount;
+		$[6] = pageIndex;
+		$[7] = step;
+		$[8] = t1;
+	} else t1 = $[8];
 	const { target, unavailable } = t1;
 	const t2 = unavailable || void 0;
 	const t3 = unavailable || void 0;
 	let t4;
-	if ($[10] !== onClick || $[11] !== onPageIndexChange || $[12] !== target || $[13] !== unavailable) {
+	if ($[9] !== onClick || $[10] !== onPageIndexChange || $[11] !== target || $[12] !== unavailable) {
 		t4 = (event) => {
 			onClick?.(event);
 			if (!unavailable) onPageIndexChange(target);
 		};
-		$[10] = onClick;
-		$[11] = onPageIndexChange;
-		$[12] = target;
-		$[13] = unavailable;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[9] = onClick;
+		$[10] = onPageIndexChange;
+		$[11] = target;
+		$[12] = unavailable;
+		$[13] = t4;
+	} else t4 = $[13];
 	let t5;
-	if ($[15] !== children || $[16] !== label || $[17] !== props || $[18] !== t2 || $[19] !== t3 || $[20] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Button, {
-			variant: "tertiary",
+	if ($[14] !== props || $[15] !== t2 || $[16] !== t3 || $[17] !== t4) {
+		t5 = {
+			type: "button",
 			...props,
-			iconOnly: true,
-			icon: children,
-			label,
 			"aria-disabled": t2,
 			"data-disabled": t3,
 			onClick: t4
-		});
-		$[15] = children;
-		$[16] = label;
-		$[17] = props;
-		$[18] = t2;
-		$[19] = t3;
-		$[20] = t4;
-		$[21] = t5;
-	} else t5 = $[21];
-	return t5;
+		};
+		$[14] = props;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== render || $[20] !== t5) {
+		t6 = {
+			render,
+			props: t5
+		};
+		$[19] = render;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return useRender(t6);
 };
-/** Goes to the first page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+/**
+* Goes to the first page; marked `aria-disabled`, and kept in the tab order, on
+* the first page. It renders whichever button it is given.
+*
+* @example
+* <Pagination.First render={<IconButton label="First page" variant="tertiary"><FirstPageIcon /></IconButton>} />
+*/
 var PaginationFirst = (props) => {
 	const $ = c(2);
 	let t0;
@@ -384,7 +392,13 @@ var PaginationFirst = (props) => {
 	} else t0 = $[1];
 	return t0;
 };
-/** Goes back a page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+/**
+* Goes back a page; marked `aria-disabled`, and kept in the tab order, on the
+* first page. It renders whichever button it is given.
+*
+* @example
+* <Pagination.Previous render={<IconButton label="Previous page" variant="tertiary"><ChevronLeftIcon /></IconButton>} />
+*/
 var PaginationPrevious = (props) => {
 	const $ = c(2);
 	let t0;
@@ -398,7 +412,13 @@ var PaginationPrevious = (props) => {
 	} else t0 = $[1];
 	return t0;
 };
-/** Goes on a page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+/**
+* Goes on a page; marked `aria-disabled`, and kept in the tab order, on the
+* last page. It renders whichever button it is given.
+*
+* @example
+* <Pagination.Next render={<IconButton label="Next page" variant="tertiary"><ChevronRightIcon /></IconButton>} />
+*/
 var PaginationNext = (props) => {
 	const $ = c(2);
 	let t0;
@@ -412,7 +432,13 @@ var PaginationNext = (props) => {
 	} else t0 = $[1];
 	return t0;
 };
-/** Goes to the last page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+/**
+* Goes to the last page; marked `aria-disabled`, and kept in the tab order, on
+* the last page. It renders whichever button it is given.
+*
+* @example
+* <Pagination.Last render={<IconButton label="Last page" variant="tertiary"><LastPageIcon /></IconButton>} />
+*/
 var PaginationLast = (props) => {
 	const $ = c(2);
 	let t0;
@@ -426,214 +452,180 @@ var PaginationLast = (props) => {
 	} else t0 = $[1];
 	return t0;
 };
-/** `First`, `Previous`, `Next` and `Last` in a row. */
+/**
+* The step buttons it is given, `First`, `Previous`, `Next` and `Last`, in a row.
+*
+* @example
+* <Pagination.Controls>
+* 	<Pagination.Previous render={previousButton} />
+* 	<Pagination.Next render={nextButton} />
+* </Pagination.Controls>
+*/
 var PaginationControls = (t0) => {
-	const $ = c(40);
+	const $ = c(14);
 	let className;
-	let firstIcon;
-	let firstLabel;
-	let lastIcon;
-	let lastLabel;
-	let nextIcon;
-	let nextLabel;
-	let previousIcon;
-	let previousLabel;
 	let props;
 	let ref;
 	let render;
 	if ($[0] !== t0) {
-		({firstLabel, previousLabel, nextLabel, lastLabel, firstIcon, previousIcon, nextIcon, lastIcon, render, className, ref, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = firstIcon;
-		$[3] = firstLabel;
-		$[4] = lastIcon;
-		$[5] = lastLabel;
-		$[6] = nextIcon;
-		$[7] = nextLabel;
-		$[8] = previousIcon;
-		$[9] = previousLabel;
-		$[10] = props;
-		$[11] = ref;
-		$[12] = render;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
 		className = $[1];
-		firstIcon = $[2];
-		firstLabel = $[3];
-		lastIcon = $[4];
-		lastLabel = $[5];
-		nextIcon = $[6];
-		nextLabel = $[7];
-		previousIcon = $[8];
-		previousLabel = $[9];
-		props = $[10];
-		ref = $[11];
-		render = $[12];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	let t1;
-	if ($[13] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(pagination_module_default.controls, className);
-		$[13] = className;
-		$[14] = t1;
-	} else t1 = $[14];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[15] !== firstIcon || $[16] !== firstLabel) {
-		t2 = /* @__PURE__ */ jsx(PaginationFirst, {
-			label: firstLabel,
-			children: firstIcon
-		});
-		$[15] = firstIcon;
-		$[16] = firstLabel;
-		$[17] = t2;
-	} else t2 = $[17];
-	let t3;
-	if ($[18] !== previousIcon || $[19] !== previousLabel) {
-		t3 = /* @__PURE__ */ jsx(PaginationPrevious, {
-			label: previousLabel,
-			children: previousIcon
-		});
-		$[18] = previousIcon;
-		$[19] = previousLabel;
-		$[20] = t3;
-	} else t3 = $[20];
-	let t4;
-	if ($[21] !== nextIcon || $[22] !== nextLabel) {
-		t4 = /* @__PURE__ */ jsx(PaginationNext, {
-			label: nextLabel,
-			children: nextIcon
-		});
-		$[21] = nextIcon;
-		$[22] = nextLabel;
-		$[23] = t4;
-	} else t4 = $[23];
-	let t5;
-	if ($[24] !== lastIcon || $[25] !== lastLabel) {
-		t5 = /* @__PURE__ */ jsx(PaginationLast, {
-			label: lastLabel,
-			children: lastIcon
-		});
-		$[24] = lastIcon;
-		$[25] = lastLabel;
-		$[26] = t5;
-	} else t5 = $[26];
-	let t6;
-	if ($[27] !== t2 || $[28] !== t3 || $[29] !== t4 || $[30] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t2,
-			t3,
-			t4,
-			t5
-		] });
-		$[27] = t2;
-		$[28] = t3;
-		$[29] = t4;
-		$[30] = t5;
-		$[31] = t6;
-	} else t6 = $[31];
-	let t7;
-	if ($[32] !== props || $[33] !== t1 || $[34] !== t6) {
-		t7 = {
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
 			...props,
-			className: t1,
-			children: t6
+			className: t1
 		};
-		$[32] = props;
-		$[33] = t1;
-		$[34] = t6;
-		$[35] = t7;
-	} else t7 = $[35];
-	let t8;
-	if ($[36] !== ref || $[37] !== render || $[38] !== t7) {
-		t8 = {
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
 			defaultTagName: "div",
 			render,
 			ref,
-			props: t7
+			props: t2
 		};
-		$[36] = ref;
-		$[37] = render;
-		$[38] = t7;
-		$[39] = t8;
-	} else t8 = $[39];
-	return useRender(t8);
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 var PaginationContent = (t0) => {
-	const $ = c(24);
-	let checkIcon;
-	let controls;
-	let expandIcon;
-	let indexLabel;
-	let pageSizeLabel;
-	if ($[0] !== t0) {
-		({pageSizeLabel, indexLabel, checkIcon, expandIcon, ...controls} = t0);
-		$[0] = t0;
-		$[1] = checkIcon;
-		$[2] = controls;
-		$[3] = expandIcon;
-		$[4] = indexLabel;
-		$[5] = pageSizeLabel;
-	} else {
-		checkIcon = $[1];
-		controls = $[2];
-		expandIcon = $[3];
-		indexLabel = $[4];
-		pageSizeLabel = $[5];
-	}
+	const $ = c(34);
+	const { pageSizeLabel, indexLabel, checkIcon, expandIcon, firstLabel, previousLabel, nextLabel, lastLabel, firstIcon, previousIcon, nextIcon, lastIcon } = t0;
 	let t1;
-	if ($[6] !== pageSizeLabel) {
+	if ($[0] !== pageSizeLabel) {
 		t1 = /* @__PURE__ */ jsx(Select.Label, { children: pageSizeLabel });
-		$[6] = pageSizeLabel;
-		$[7] = t1;
-	} else t1 = $[7];
+		$[0] = pageSizeLabel;
+		$[1] = t1;
+	} else t1 = $[1];
 	let t2;
-	if ($[8] !== expandIcon) {
-		t2 = /* @__PURE__ */ jsx(Select.Trigger, { icon: expandIcon });
-		$[8] = expandIcon;
-		$[9] = t2;
-	} else t2 = $[9];
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Select.Value, {});
+		$[2] = t2;
+	} else t2 = $[2];
 	let t3;
-	if ($[10] !== checkIcon) {
-		t3 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(Select.Items, { checkIcon }) }) }) }) });
-		$[10] = checkIcon;
-		$[11] = t3;
-	} else t3 = $[11];
+	if ($[3] !== expandIcon) {
+		t3 = /* @__PURE__ */ jsxs(Select.Trigger, { children: [t2, /* @__PURE__ */ jsx(Select.Icon, { children: expandIcon })] });
+		$[3] = expandIcon;
+		$[4] = t3;
+	} else t3 = $[4];
 	let t4;
-	if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(PaginationPageSize, { children: [
+	if ($[5] !== checkIcon) {
+		t4 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(Select.Items, { checkIcon }) }) }) }) });
+		$[5] = checkIcon;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t1 || $[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(PaginationPageSize, { children: [
 			t1,
-			t2,
-			t3
+			t3,
+			t4
 		] });
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	let t5;
-	if ($[16] !== indexLabel) {
-		t5 = /* @__PURE__ */ jsx(PaginationIndex, { label: indexLabel });
-		$[16] = indexLabel;
-		$[17] = t5;
-	} else t5 = $[17];
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[18] !== controls) {
-		t6 = /* @__PURE__ */ jsx(PaginationControls, { ...controls });
-		$[18] = controls;
-		$[19] = t6;
-	} else t6 = $[19];
+	if ($[11] !== indexLabel) {
+		t6 = /* @__PURE__ */ jsx(PaginationIndex, { label: indexLabel });
+		$[11] = indexLabel;
+		$[12] = t6;
+	} else t6 = $[12];
 	let t7;
-	if ($[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t4,
+	if ($[13] !== firstIcon || $[14] !== firstLabel) {
+		t7 = /* @__PURE__ */ jsx(PaginationFirst, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			label: firstLabel,
+			children: firstIcon
+		}) });
+		$[13] = firstIcon;
+		$[14] = firstLabel;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== previousIcon || $[17] !== previousLabel) {
+		t8 = /* @__PURE__ */ jsx(PaginationPrevious, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			label: previousLabel,
+			children: previousIcon
+		}) });
+		$[16] = previousIcon;
+		$[17] = previousLabel;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== nextIcon || $[20] !== nextLabel) {
+		t9 = /* @__PURE__ */ jsx(PaginationNext, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			label: nextLabel,
+			children: nextIcon
+		}) });
+		$[19] = nextIcon;
+		$[20] = nextLabel;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== lastIcon || $[23] !== lastLabel) {
+		t10 = /* @__PURE__ */ jsx(PaginationLast, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			label: lastLabel,
+			children: lastIcon
+		}) });
+		$[22] = lastIcon;
+		$[23] = lastLabel;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(PaginationControls, { children: [
+			t7,
+			t8,
+			t9,
+			t10
+		] });
+		$[25] = t10;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== t11 || $[31] !== t5 || $[32] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t5,
-			t6
+			t6,
+			t11
 		] });
-		$[20] = t4;
-		$[21] = t5;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	return t7;
+		$[30] = t11;
+		$[31] = t5;
+		$[32] = t6;
+		$[33] = t12;
+	} else t12 = $[33];
+	return t12;
 };
 /** The page size, the index and the four step buttons, in a `Root`. */
 var Prefab = (t0) => {
@@ -728,8 +720,9 @@ var Prefab = (t0) => {
 * The pager for a paged list, over any source: the page size, which page is on
 * screen, and buttons to the first, previous, next and last page. Its parts
 * compose another pager: `Root` holds where the list stands, `PageSize` picks
-* rows per page, `Index` says which page is on screen, and `Controls`, or
-* `First`, `Previous`, `Next` and `Last` on their own, step through the pages.
+* rows per page, `Index` says which page is on screen, and `First`, `Previous`,
+* `Next` and `Last`, each rendering the button it is given, step through the
+* pages, in a `Controls` row or on their own.
 *
 * @example
 * <Pagination

package/dist/components/password-field/password-field.css

@@ -1,64 +1,64 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._strength_1dakz_3 {
+  ._strength_1q8qt_3 {
     display: flex;
     flex-direction: column;
-    gap: var(--sys-unit-2);
+    gap: var(--password-strength-gap, var(--sys-unit-2));
   }
-  ._meter_1dakz_8 {
-    --meter-fill: var(
+  ._meter_1q8qt_8 {
+    --_meter-fill: var(
     	--password-strength-weak-fill,
     	var(--sys-color-error-fg)
     );
     display: grid;
     grid-template-columns: 1fr auto;
-    gap: var(--sys-unit-2) var(--sys-unit-4);
+    gap: var(--password-strength-meter-gap, var(--sys-unit-2) var(--sys-unit-4));
     align-items: center;
   }
-  ._meter_1dakz_8[data-score="2"] {
-    --meter-fill: var(
+  ._meter_1q8qt_8[data-score="2"] {
+    --_meter-fill: var(
     	--password-strength-fair-fill,
     	var(--sys-color-warning-fg)
     );
   }
-  ._meter_1dakz_8[data-score="3"], ._meter_1dakz_8[data-score="4"] {
-    --meter-fill: var(
+  ._meter_1q8qt_8[data-score="3"], ._meter_1q8qt_8[data-score="4"] {
+    --_meter-fill: var(
     	--password-strength-strong-fill,
     	var(--sys-color-success-fg)
     );
   }
-  ._meterLabel_1dakz_30 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-label-medium);
+  ._meterLabel_1q8qt_30 {
+    color: var(--field-label-fg, var(--sys-color-text));
+    font: var(--field-label-font, var(--sys-font-label-medium));
     cursor: default;
   }
-  ._meterValue_1dakz_35 {
-    color: var(--meter-fill);
+  ._meterValue_1q8qt_35 {
+    color: var(--_meter-fill);
     font: var(--password-strength-value-font, var(--sys-font-label-small));
     text-align: end;
   }
-  ._meterTrack_1dakz_40 {
+  ._meterTrack_1q8qt_40 {
     grid-column: 1/3;
     overflow: hidden;
-    border-radius: var(--sys-radius-xs);
+    border-radius: var(--password-strength-track-radius, var(--sys-radius-xs));
     block-size: var(--password-strength-track-size, var(--sys-unit-2));
     background: var(--password-strength-track-bg, var(--sys-color-surface-highest));
   }
-  ._meterIndicator_1dakz_47 {
-    border-radius: var(--sys-radius-xs);
-    background: var(--meter-fill);
+  ._meterIndicator_1q8qt_47 {
+    border-radius: var(--password-strength-indicator-radius, var(--password-strength-track-radius, var(--sys-radius-xs)));
+    background: var(--_meter-fill);
   }
   @media not (prefers-reduced-motion) {
-    ._meterIndicator_1dakz_47 {
+    ._meterIndicator_1q8qt_47 {
       transition: inline-size var(--sys-motion-short) var(--sys-motion-standard), background var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._feedback_1dakz_56 {
+  ._feedback_1q8qt_56 {
     color: var(--password-strength-feedback-fg, var(--sys-color-text-muted));
     font: var(--password-strength-feedback-font, var(--sys-font-body-small));
   }
-  ._suggestions_1dakz_60 {
-    padding-inline-start: var(--sys-unit-12);
+  ._suggestions_1q8qt_60 {
+    padding-inline-start: var(--password-strength-suggestions-pad-start, var(--sys-unit-12));
     color: var(--password-strength-feedback-fg, var(--sys-color-text-muted));
     font: var(--password-strength-feedback-font, var(--sys-font-body-small));
     list-style: disc;