@plitzi/sdk-elements 0.38.5 → 0.38.7

package/dist/elements/structure/ModalContainer/declaration.d.ts

@@ -105,11 +105,12 @@ declare const declaration: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly position: "absolute";
+                        readonly position: "fixed";
                         readonly top: "0";
                         readonly bottom: "0";
                         readonly left: "0";
                         readonly right: "0";
+                        readonly 'z-index': "200";
                     };
                 };
                 readonly backgroundContainer: {
@@ -119,6 +120,7 @@ declare const declaration: {
                         readonly left: "0";
                         readonly top: "0";
                         readonly position: "absolute";
+                        readonly 'z-index': "210";
                         readonly 'background-color': "black";
                         readonly opacity: "0.5";
                     };
@@ -130,8 +132,11 @@ declare const declaration: {
                         readonly position: "absolute";
                         readonly top: "50%";
                         readonly left: "50%";
+                        readonly 'z-index': "250";
                         readonly width: "500px";
-                        readonly height: "300px";
+                        readonly 'max-width': "calc(100vw - 32px)";
+                        readonly 'max-height': "calc(100dvh - 32px)";
+                        readonly overflow: "auto";
                         readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
                         readonly transform: "translate3d(-50%, -50%, 0px)";
                         readonly 'border-top-left-radius': "8px";
@@ -163,25 +168,40 @@ declare const declaration: {
                 };
                 readonly headerCloseButton: {
                     readonly default: {
-                        readonly height: "20px";
-                        readonly width: "20px";
-                        readonly padding: "4px";
+                        readonly height: "28px";
+                        readonly width: "28px";
+                        readonly 'padding-top': "4px";
+                        readonly 'padding-bottom': "4px";
+                        readonly 'padding-left': "4px";
+                        readonly 'padding-right': "4px";
                         readonly display: "flex";
                         readonly 'justify-content': "center";
                         readonly 'align-items': "center";
+                        readonly 'flex-shrink': "0";
+                        readonly 'border-top-left-radius': "4px";
+                        readonly 'border-top-right-radius': "4px";
+                        readonly 'border-bottom-left-radius': "4px";
+                        readonly 'border-bottom-right-radius': "4px";
+                        readonly 'background-color': "transparent";
+                        readonly color: "inherit";
+                        readonly 'font-style': "inherit";
+                        readonly 'font-weight': "inherit";
+                        readonly 'line-height': "inherit";
+                        readonly 'font-family': "inherit";
+                        readonly 'font-size': "inherit";
                         readonly cursor: "pointer";
                     };
-                    readonly bodyContainer: {
-                        readonly default: {
-                            readonly display: "flex";
-                            readonly 'flex-direction': "column";
-                            readonly 'flex-grow': "1";
-                            readonly 'flex-basis': "0";
-                            readonly 'padding-top': "20px";
-                            readonly 'padding-bottom': "20px";
-                            readonly 'padding-left': "20px";
-                            readonly 'padding-right': "20px";
-                        };
+                };
+                readonly bodyContainer: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly 'flex-grow': "1";
+                        readonly 'flex-basis': "auto";
+                        readonly 'padding-top': "20px";
+                        readonly 'padding-bottom': "20px";
+                        readonly 'padding-left': "20px";
+                        readonly 'padding-right': "20px";
                     };
                 };
             };

package/dist/elements/structure/ModalContainer/declaration.mjs

@@ -87,11 +87,12 @@ var t = e()({
 			displayMode: "desktop",
 			style: {
 				base: { default: {
-					position: "absolute",
+					position: "fixed",
 					top: "0",
 					bottom: "0",
 					left: "0",
-					right: "0"
+					right: "0",
+					"z-index": "200"
 				} },
 				backgroundContainer: { default: {
 					height: "100%",
@@ -99,6 +100,7 @@ var t = e()({
 					left: "0",
 					top: "0",
 					position: "absolute",
+					"z-index": "210",
 					"background-color": "black",
 					opacity: "0.5"
 				} },
@@ -108,8 +110,11 @@ var t = e()({
 					position: "absolute",
 					top: "50%",
 					left: "50%",
+					"z-index": "250",
 					width: "500px",
-					height: "300px",
+					"max-width": "calc(100vw - 32px)",
+					"max-height": "calc(100dvh - 32px)",
+					overflow: "auto",
 					"background-color": "light-dark(white, oklch(0.21 0.006 285.885))",
 					transform: "translate3d(-50%, -50%, 0px)",
 					"border-top-left-radius": "8px",
@@ -134,27 +139,40 @@ var t = e()({
 					"font-weight": "500",
 					"line-height": "1.2"
 				} },
-				headerCloseButton: {
-					default: {
-						height: "20px",
-						width: "20px",
-						padding: "4px",
-						display: "flex",
-						"justify-content": "center",
-						"align-items": "center",
-						cursor: "pointer"
-					},
-					bodyContainer: { default: {
-						display: "flex",
-						"flex-direction": "column",
-						"flex-grow": "1",
-						"flex-basis": "0",
-						"padding-top": "20px",
-						"padding-bottom": "20px",
-						"padding-left": "20px",
-						"padding-right": "20px"
-					} }
-				}
+				headerCloseButton: { default: {
+					height: "28px",
+					width: "28px",
+					"padding-top": "4px",
+					"padding-bottom": "4px",
+					"padding-left": "4px",
+					"padding-right": "4px",
+					display: "flex",
+					"justify-content": "center",
+					"align-items": "center",
+					"flex-shrink": "0",
+					"border-top-left-radius": "4px",
+					"border-top-right-radius": "4px",
+					"border-bottom-left-radius": "4px",
+					"border-bottom-right-radius": "4px",
+					"background-color": "transparent",
+					color: "inherit",
+					"font-style": "inherit",
+					"font-weight": "inherit",
+					"line-height": "inherit",
+					"font-family": "inherit",
+					"font-size": "inherit",
+					cursor: "pointer"
+				} },
+				bodyContainer: { default: {
+					display: "flex",
+					"flex-direction": "column",
+					"flex-grow": "1",
+					"flex-basis": "auto",
+					"padding-top": "20px",
+					"padding-bottom": "20px",
+					"padding-left": "20px",
+					"padding-right": "20px"
+				} }
 			},
 			subTypes: {}
 		},

package/dist/elements/structure/ModalContainer/index.d.ts

@@ -99,11 +99,12 @@ declare const ModalContainer: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly position: "absolute";
+                        readonly position: "fixed";
                         readonly top: "0";
                         readonly bottom: "0";
                         readonly left: "0";
                         readonly right: "0";
+                        readonly 'z-index': "200";
                     };
                 };
                 readonly backgroundContainer: {
@@ -113,6 +114,7 @@ declare const ModalContainer: {
                         readonly left: "0";
                         readonly top: "0";
                         readonly position: "absolute";
+                        readonly 'z-index': "210";
                         readonly 'background-color': "black";
                         readonly opacity: "0.5";
                     };
@@ -124,8 +126,11 @@ declare const ModalContainer: {
                         readonly position: "absolute";
                         readonly top: "50%";
                         readonly left: "50%";
+                        readonly 'z-index': "250";
                         readonly width: "500px";
-                        readonly height: "300px";
+                        readonly 'max-width': "calc(100vw - 32px)";
+                        readonly 'max-height': "calc(100dvh - 32px)";
+                        readonly overflow: "auto";
                         readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
                         readonly transform: "translate3d(-50%, -50%, 0px)";
                         readonly 'border-top-left-radius': "8px";
@@ -157,25 +162,40 @@ declare const ModalContainer: {
                 };
                 readonly headerCloseButton: {
                     readonly default: {
-                        readonly height: "20px";
-                        readonly width: "20px";
-                        readonly padding: "4px";
+                        readonly height: "28px";
+                        readonly width: "28px";
+                        readonly 'padding-top': "4px";
+                        readonly 'padding-bottom': "4px";
+                        readonly 'padding-left': "4px";
+                        readonly 'padding-right': "4px";
                         readonly display: "flex";
                         readonly 'justify-content': "center";
                         readonly 'align-items': "center";
+                        readonly 'flex-shrink': "0";
+                        readonly 'border-top-left-radius': "4px";
+                        readonly 'border-top-right-radius': "4px";
+                        readonly 'border-bottom-left-radius': "4px";
+                        readonly 'border-bottom-right-radius': "4px";
+                        readonly 'background-color': "transparent";
+                        readonly color: "inherit";
+                        readonly 'font-style': "inherit";
+                        readonly 'font-weight': "inherit";
+                        readonly 'line-height': "inherit";
+                        readonly 'font-family': "inherit";
+                        readonly 'font-size': "inherit";
                         readonly cursor: "pointer";
                     };
-                    readonly bodyContainer: {
-                        readonly default: {
-                            readonly display: "flex";
-                            readonly 'flex-direction': "column";
-                            readonly 'flex-grow': "1";
-                            readonly 'flex-basis': "0";
-                            readonly 'padding-top': "20px";
-                            readonly 'padding-bottom': "20px";
-                            readonly 'padding-left': "20px";
-                            readonly 'padding-right': "20px";
-                        };
+                };
+                readonly bodyContainer: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly 'flex-grow': "1";
+                        readonly 'flex-basis': "auto";
+                        readonly 'padding-top': "20px";
+                        readonly 'padding-bottom': "20px";
+                        readonly 'padding-left': "20px";
+                        readonly 'padding-right': "20px";
                     };
                 };
             };

package/dist/elements/structure/Pagination/Pagination.mjs

@@ -15,22 +15,22 @@ var h = (e, t) => {
 	let n = new URL(window.location.href);
 	return t <= 1 ? n.searchParams.delete(e) : n.searchParams.set(e, String(t)), `${n.pathname}${n.search}`;
 }, g = ({ ref: e, className: g = "", children: _, pageInfo: v = u, mode: y = "pages", pageParam: b = "page", target: x = "url", windowSize: S = 5, previousLabel: C = "Previous", nextLabel: w = "Next", loadMoreLabel: T = "Load more", label: E = "Pagination" }) => {
-	let { id: D } = t(), { settings: { previewMode: O }, contexts: { InteractionsContext: k } } = c(), { interactionsManager: A } = a(k), [j] = l("navigation.navigate"), M = v.page ?? 1, N = v.pageCount ?? 0, P = v.hasPrevPage ?? M > 1, F = v.hasNextPage ?? !1, I = s(() => i(M, N, S), [
-		M,
+	let { id: D, definition: { styleSelectors: O } } = t(), { settings: { previewMode: k }, contexts: { InteractionsContext: A } } = c(), { interactionsManager: j } = a(A), [M] = l("navigation.navigate"), N = v.page ?? 1, P = v.pageCount ?? 0, F = v.hasPrevPage ?? N > 1, I = v.hasNextPage ?? !1, L = s(() => i(N, P, S), [
 		N,
+		P,
 		S
-	]), L = o((e) => {
+	]), R = o((e) => {
 		let t = Math.max(e, 1);
-		D && A.interactionTrigger(D, "onPageChange", { page: t }), x === "url" && j(h(b, t));
+		D && j.interactionTrigger(D, "onPageChange", { page: t }), x === "url" && M(h(b, t));
 	}, [
 		D,
-		A,
-		x,
 		j,
+		x,
+		M,
 		b
-	]), R = o((e) => (t) => {
-		t.preventDefault(), L(e);
-	}, [L]), z = N === 0 && !F && !P;
+	]), z = o((e) => (t) => {
+		t.preventDefault(), R(e);
+	}, [R]), B = P === 0 && !I && !F;
 	return /* @__PURE__ */ p(n, {
 		ref: e,
 		tag: "nav",
@@ -40,35 +40,35 @@ var h = (e, t) => {
 		children: [
 			y === "loadMore" && /* @__PURE__ */ f("button", {
 				type: "button",
-				className: "plitzi-component__pagination-more",
-				disabled: !F && O,
-				onClick: R(M + 1),
+				className: m("plitzi-component__pagination-more", O.loadMore),
+				disabled: !I && k,
+				onClick: z(N + 1),
 				children: T
 			}),
 			y === "pages" && /* @__PURE__ */ p(d, { children: [
 				/* @__PURE__ */ f("button", {
 					type: "button",
-					className: "plitzi-component__pagination-prev",
-					disabled: !P && O,
-					onClick: R(M - 1),
+					className: m("plitzi-component__pagination-prev", O.previous),
+					disabled: !F && k,
+					onClick: z(N - 1),
 					children: C
 				}),
-				I.map((e) => /* @__PURE__ */ f("button", {
+				L.map((e) => /* @__PURE__ */ f("button", {
 					type: "button",
-					className: m("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === M }),
-					"aria-current": e === M ? "page" : void 0,
-					onClick: R(e),
+					className: m("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === N }, O.page),
+					"aria-current": e === N ? "page" : void 0,
+					onClick: z(e),
 					children: e
 				}, e)),
 				/* @__PURE__ */ f("button", {
 					type: "button",
-					className: "plitzi-component__pagination-next",
-					disabled: !F && O,
-					onClick: R(M + 1),
+					className: m("plitzi-component__pagination-next", O.next),
+					disabled: !I && k,
+					onClick: z(N + 1),
 					children: w
 				})
 			] }),
-			!O && z && /* @__PURE__ */ f("span", {
+			!k && B && /* @__PURE__ */ f("span", {
 				className: "plitzi-component__pagination-hint",
 				children: "Bind pageInfo"
 			}),

package/dist/elements/structure/Pagination/declaration.d.ts

@@ -33,11 +33,15 @@ declare const declaration: {
         readonly definition: {
             readonly label: "Pagination";
             readonly type: "pagination";
-            readonly description: "Pages through a list. Bind it to a provider page info: in URL mode it writes the page into the address bar so the result stays shareable and indexable, and in load-more mode it announces the next page for the provider to append.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly previous: "";
+                readonly page: "";
+                readonly next: "";
+                readonly loadMore: "";
             };
             readonly initialState: {
                 readonly visibility: true;

package/dist/elements/structure/Pagination/declaration.mjs

@@ -27,10 +27,16 @@ var n = e()({
 		definition: {
 			label: "Pagination",
 			type: "pagination",
-			description: "Pages through a list. Bind it to a provider page info: in URL mode it writes the page into the address bar so the result stays shareable and indexable, and in load-more mode it announces the next page for the provider to append.",
+			description: "Pages through a list. Bind it to a provider page info: in URL mode it writes the page into the address bar so the result stays shareable and indexable, and in load-more mode it announces the next page for the provider to append. Its buttons take a class through their slots: `previous`, `page` (each numbered one — the page shown carries `aria-current=\"page\"`, so the class's `current` state dresses it), `next` and `loadMore`; one with nowhere to go is disabled, the `disabled` state.",
 			items: [],
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				previous: "",
+				page: "",
+				next: "",
+				loadMore: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {

package/dist/elements/structure/Pagination/index.d.ts

@@ -32,11 +32,15 @@ declare const Pagination: {
         readonly definition: {
             readonly label: "Pagination";
             readonly type: "pagination";
-            readonly description: "Pages through a list. Bind it to a provider page info: in URL mode it writes the page into the address bar so the result stays shareable and indexable, and in load-more mode it announces the next page for the provider to append.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly previous: "";
+                readonly page: "";
+                readonly next: "";
+                readonly loadMore: "";
             };
             readonly initialState: {
                 readonly visibility: true;

package/dist/elements/structure/TabContainer/TabContainerItem/TabContainerItem.mjs

@@ -45,7 +45,8 @@ var a = (e, t, n) => {
 		id: g,
 		role: "tabpanel",
 		"aria-labelledby": h,
-		tabIndex: 0
+		tabIndex: 0,
+		hidden: !m
 	};
 	return /* @__PURE__ */ r(t, {
 		ref: s,