@octans/ui 1.3.0 → 1.5.0

package/dist/ui.js

@@ -4950,7 +4950,11 @@ var cs = {
 				width: i,
 				height: i,
 				...o,
-				class: [t.icon, a]
+				class: [
+					t.icon,
+					!e.size && t.themeSized,
+					a
+				]
 			});
 		};
 		return () => {
@@ -4971,12 +4975,13 @@ var cs = {
 		};
 	}
 }), fs = {
-	icon: "_icon_a8pc0_1",
-	wrapper: "_wrapper_a8pc0_5",
-	overlay: "_overlay_a8pc0_10",
-	faded: "_faded_a8pc0_16",
-	contained: "_contained_a8pc0_20",
-	badge: "_badge_a8pc0_33"
+	icon: "_icon_1wljv_2",
+	themeSized: "_themeSized_1wljv_15",
+	wrapper: "_wrapper_1wljv_20",
+	overlay: "_overlay_1wljv_25",
+	faded: "_faded_1wljv_31",
+	contained: "_contained_1wljv_35",
+	badge: "_badge_1wljv_48"
 }, J = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
@@ -9604,18 +9609,18 @@ var bm = ["aria-label", "data-ui-tooltip"], xm = /*#__PURE__*/ J(/* @__PURE__ */
 		};
 	}
 }), [["__cssModules", { $style: {
-	Badge: "_Badge_u74sd_1",
-	pip: "_pip_u74sd_12",
-	statusInfo: "_statusInfo_u74sd_24",
-	statusSuccess: "_statusSuccess_u74sd_32",
-	statusWarning: "_statusWarning_u74sd_40",
-	statusAttention: "_statusAttention_u74sd_41",
-	statusError: "_statusError_u74sd_50",
-	statusNew: "_statusNew_u74sd_58",
-	progressIncomplete: "_progressIncomplete_u74sd_68",
-	progressPartiallyComplete: "_progressPartiallyComplete_u74sd_72",
-	progressComplete: "_progressComplete_u74sd_76",
-	sizeSmall: "_sizeSmall_u74sd_80"
+	Badge: "_Badge_1n011_2",
+	pip: "_pip_1n011_13",
+	statusInfo: "_statusInfo_1n011_35",
+	statusSuccess: "_statusSuccess_1n011_43",
+	statusWarning: "_statusWarning_1n011_51",
+	statusAttention: "_statusAttention_1n011_52",
+	statusError: "_statusError_1n011_61",
+	statusNew: "_statusNew_1n011_69",
+	progressIncomplete: "_progressIncomplete_1n011_79",
+	progressPartiallyComplete: "_progressPartiallyComplete_1n011_83",
+	progressComplete: "_progressComplete_1n011_87",
+	sizeSmall: "_sizeSmall_1n011_91"
 } }]]), wm = y({
 	components: {
 		Icon: Y,
@@ -9636,18 +9641,19 @@ var bm = ["aria-label", "data-ui-tooltip"], xm = /*#__PURE__*/ J(/* @__PURE__ */
 		this.$emit("close");
 	} }
 }), Tm = {
-	Banner: "_Banner_1y5e8_1",
-	Icon: "_Icon_1y5e8_8",
-	content: "_content_1y5e8_13",
-	title: "_title_1y5e8_22",
-	close: "_close_1y5e8_27",
-	"status-default": "_status-default_1y5e8_35",
-	"status-info": "_status-info_1y5e8_41",
-	"status-success": "_status-success_1y5e8_47",
-	"status-warning": "_status-warning_1y5e8_53",
-	"status-attention": "_status-attention_1y5e8_54",
-	"status-error": "_status-error_1y5e8_60",
-	"status-new": "_status-new_1y5e8_66"
+	Banner: "_Banner_r0ruf_2",
+	Icon: "_Icon_r0ruf_9",
+	content: "_content_r0ruf_14",
+	info: "_info_r0ruf_33",
+	title: "_title_r0ruf_37",
+	close: "_close_r0ruf_42",
+	"status-default": "_status-default_r0ruf_62",
+	"status-info": "_status-info_r0ruf_68",
+	"status-success": "_status-success_r0ruf_74",
+	"status-warning": "_status-warning_r0ruf_80",
+	"status-attention": "_status-attention_r0ruf_81",
+	"status-error": "_status-error_r0ruf_87",
+	"status-new": "_status-new_r0ruf_93"
 };
 //#endregion
 //#region src/components/Banner/Banner.vue
@@ -10396,13 +10402,13 @@ var Um = /*#__PURE__*/ J(y({
 		subdued: { type: Boolean }
 	}
 }), [["__cssModules", { $style: {
-	Card: "_Card_pe7r3_1",
-	header: "_header_pe7r3_7",
-	actions: "_actions_pe7r3_13",
-	action: "_action_pe7r3_13",
-	title: "_title_pe7r3_21",
-	title__custom: "_title__custom_pe7r3_28",
-	subdued: "_subdued_pe7r3_34"
+	Card: "_Card_25mga_2",
+	header: "_header_25mga_24",
+	actions: "_actions_25mga_30",
+	action: "_action_25mga_30",
+	title: "_title_25mga_38",
+	title__custom: "_title__custom_25mga_45",
+	subdued: "_subdued_25mga_51"
 } }]]), Wm = /*#__PURE__*/ J(y({
 	name: "CardSection",
 	setup(e, { slots: t }) {
@@ -10415,7 +10421,8 @@ var Um = /*#__PURE__*/ J(y({
 					n.CardSection,
 					e.subdued && n.subdued,
 					r && n.CardSection__header,
-					!e.padded && n.CardSection__noPadding
+					e.flush && n.CardSection__flush,
+					!e.padded && !e.flush && n.CardSection__noPadding
 				],
 				"data-card-section": !0
 			}, [r, t.default && t.default()]);
@@ -10429,18 +10436,20 @@ var Um = /*#__PURE__*/ J(y({
 		padded: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		flush: { type: Boolean }
 	}
 }), [["__cssModules", { $style: {
-	CardSection: "_CardSection_7r0tf_1",
-	header: "_header_7r0tf_9",
-	actions: "_actions_7r0tf_15",
-	action: "_action_7r0tf_15",
-	title: "_title_7r0tf_23",
-	title__custom: "_title__custom_7r0tf_31",
-	subdued: "_subdued_7r0tf_37",
-	CardSection__noPadding: "_CardSection__noPadding_7r0tf_41",
-	CardSection__header: "_CardSection__header_7r0tf_51"
+	CardSection: "_CardSection_1wq3s_12",
+	header: "_header_1wq3s_22",
+	actions: "_actions_1wq3s_28",
+	action: "_action_1wq3s_28",
+	title: "_title_1wq3s_36",
+	title__custom: "_title__custom_1wq3s_44",
+	subdued: "_subdued_1wq3s_50",
+	CardSection__noPadding: "_CardSection__noPadding_1wq3s_54",
+	CardSection__header: "_CardSection__header_1wq3s_64",
+	CardSection__flush: "_CardSection__flush_1wq3s_68"
 } }]]), Gm = /*#__PURE__*/ J(y({
 	name: "Choice",
 	setup(e, t) {
@@ -13300,39 +13309,38 @@ var Rg = /*#__PURE__*/ J(Fg, [["render", Lg], ["__cssModules", { $style: Ig }]])
 		return (e, t) => (L(), d(ae(N())));
 	}
 }), [["__cssModules", { $style: {
-	DataTable: "_DataTable_dvx0u_1",
-	hasClickableRows: "_hasClickableRows_dvx0u_24",
-	isCompact: "_isCompact_dvx0u_28",
-	RowCell: "_RowCell_dvx0u_28",
-	Table: "_Table_dvx0u_32",
-	Row: "_Row_dvx0u_28",
-	Cell: "_Cell_dvx0u_52",
-	Row_isSelected: "_Row_isSelected_dvx0u_60",
-	Cell_sortable: "_Cell_sortable_dvx0u_67",
-	SortIcon: "_SortIcon_dvx0u_74",
-	Cell_isSorted: "_Cell_isSorted_dvx0u_78",
-	Cell_wrap: "_Cell_wrap_dvx0u_82",
-	CellWrapContent: "_CellWrapContent_dvx0u_88",
-	Cell_fixed: "_Cell_fixed_dvx0u_115",
-	hasBulkActions: "_hasBulkActions_dvx0u_124",
-	Cell_bulkActions: "_Cell_bulkActions_dvx0u_128 _Cell_fixed_dvx0u_115",
-	hasScrollLeft: "_hasScrollLeft_dvx0u_141",
-	ScrollContainerOuter: "_ScrollContainerOuter_dvx0u_141",
-	Cell_fixedLast: "_Cell_fixedLast_dvx0u_141",
-	NoFixedLeft: "_NoFixedLeft_dvx0u_145",
-	Cell_numeric: "_Cell_numeric_dvx0u_156",
-	Cell_total: "_Cell_total_dvx0u_160",
-	Cell_actions: "_Cell_actions_dvx0u_164",
-	hasScrollRight: "_hasScrollRight_dvx0u_176",
-	NoFixedRight: "_NoFixedRight_dvx0u_180",
-	ActionButton: "_ActionButton_dvx0u_191",
-	ScrollContainerInner: "_ScrollContainerInner_dvx0u_195",
-	sDisableBounce: "_sDisableBounce_dvx0u_199",
-	RowCheckbox: "_RowCheckbox_dvx0u_207",
-	hasSelection: "_hasSelection_dvx0u_212",
-	HeaderContent: "_HeaderContent_dvx0u_212",
-	Loader: "_Loader_dvx0u_228",
-	EmptyText: "_EmptyText_dvx0u_242"
+	DataTable: "_DataTable_1fukg_1",
+	hasClickableRows: "_hasClickableRows_1fukg_18",
+	isCompact: "_isCompact_1fukg_22",
+	RowCell: "_RowCell_1fukg_22",
+	Table: "_Table_1fukg_26",
+	Cell: "_Cell_1fukg_39",
+	Row_isSelected: "_Row_isSelected_1fukg_47",
+	Cell_sortable: "_Cell_sortable_1fukg_54",
+	SortIcon: "_SortIcon_1fukg_61",
+	Cell_isSorted: "_Cell_isSorted_1fukg_65",
+	Cell_wrap: "_Cell_wrap_1fukg_69",
+	CellWrapContent: "_CellWrapContent_1fukg_75",
+	Cell_fixed: "_Cell_fixed_1fukg_102",
+	hasBulkActions: "_hasBulkActions_1fukg_111",
+	Cell_bulkActions: "_Cell_bulkActions_1fukg_115 _Cell_fixed_1fukg_102",
+	hasScrollLeft: "_hasScrollLeft_1fukg_128",
+	ScrollContainerOuter: "_ScrollContainerOuter_1fukg_128",
+	Cell_fixedLast: "_Cell_fixedLast_1fukg_128",
+	NoFixedLeft: "_NoFixedLeft_1fukg_132",
+	Cell_numeric: "_Cell_numeric_1fukg_143",
+	Cell_total: "_Cell_total_1fukg_147",
+	Cell_actions: "_Cell_actions_1fukg_151",
+	hasScrollRight: "_hasScrollRight_1fukg_163",
+	NoFixedRight: "_NoFixedRight_1fukg_167",
+	ActionButton: "_ActionButton_1fukg_178",
+	ScrollContainerInner: "_ScrollContainerInner_1fukg_182",
+	sDisableBounce: "_sDisableBounce_1fukg_186",
+	RowCheckbox: "_RowCheckbox_1fukg_194",
+	hasSelection: "_hasSelection_1fukg_199",
+	HeaderContent: "_HeaderContent_1fukg_199",
+	Loader: "_Loader_1fukg_215",
+	EmptyText: "_EmptyText_1fukg_229"
 } }]]), Jg = ["onClick"], Yg = [
 	"value",
 	"placeholder",
@@ -14056,15 +14064,16 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 			default: !1
 		},
 		edge: { default: "right" },
-		size: { default: 700 },
+		size: {},
 		peek: { default: 100 },
 		padded: { type: Boolean },
-		animateInDuration: { default: 700 },
-		animateOutDuration: { default: 700 },
+		animateInDuration: {},
+		animateOutDuration: {},
 		minIndex: { default: 1e3 },
 		color: {},
 		containerClass: {},
 		contentClass: {},
+		footerClass: {},
 		loading: {
 			type: Boolean,
 			default: !1
@@ -14081,48 +14090,73 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 		"close"
 	],
 	setup(e, { emit: t }) {
-		let i = j_(), o = e, s = t, c = W(), u = l(() => o.edge === "left" || o.edge === "right"), h = l(() => o.edge === "right" || o.edge === "bottom" ? 1 : -1), v = R(0), y = R(!1), b = R(!0), x = R(window.innerWidth), S = R(window.innerHeight), C = l(() => u.value ? x.value : S.value), w = R(0), T = new A_({
-			index: v,
+		let i = j_(), o = e, s = t, c = W(), u = {
+			size: 700,
+			inDuration: 700,
+			outDuration: 700
+		};
+		function h(e) {
+			return typeof window > "u" ? "" : getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+		}
+		function v(e, t) {
+			let n = parseFloat(h(e));
+			return Number.isFinite(n) ? n : t;
+		}
+		function y(e, t) {
+			let n = h(e), r = parseFloat(n);
+			return Number.isFinite(r) ? /s\s*$/.test(n) && !/ms\s*$/.test(n) ? r * 1e3 : r : t;
+		}
+		let b = R({ ...u });
+		function x() {
+			b.value = {
+				size: v("--octans-sheet-size", u.size),
+				inDuration: y("--octans-sheet-in-duration", u.inDuration),
+				outDuration: y("--octans-sheet-out-duration", u.outDuration)
+			};
+		}
+		x();
+		let S = l(() => o.size ?? b.value.size), C = l(() => o.animateInDuration ?? b.value.inDuration), w = l(() => o.animateOutDuration ?? b.value.outDuration), T = l(() => o.edge === "left" || o.edge === "right"), E = l(() => o.edge === "right" || o.edge === "bottom" ? 1 : -1), D = R(0), O = R(!1), k = R(!0), A = R(window.innerWidth), M = R(window.innerHeight), F = l(() => T.value ? A.value : M.value), ee = R(0), I = new A_({
+			index: D,
 			peek: o.peek,
-			isActive: y,
-			offset: w
-		}), E = l(() => h.value > 0 ? Math.max(0, C.value - A.value) : 0), D = l(() => h.value > 0 ? C.value : -A.value);
-		function O(e) {
-			return u.value ? `translate(${e}px, 0)` : `translate(0, ${e}px)`;
-		}
-		let k = l(() => {
-			let e = u.value ? { width: A.value + "px" } : { height: A.value + "px" };
-			if (!y.value && w.value) {
-				let t = E.value - h.value * w.value, n = Math.max(0, C.value - A.value);
-				e.transform = O(Math.min(Math.max(t, 0), n));
-			} else y.value && (e.transform = O(E.value));
+			isActive: O,
+			offset: ee
+		}), te = l(() => E.value > 0 ? Math.max(0, F.value - V.value) : 0), ne = l(() => E.value > 0 ? F.value : -V.value);
+		function re(e) {
+			return T.value ? `translate(${e}px, 0)` : `translate(0, ${e}px)`;
+		}
+		let ie = l(() => {
+			let e = T.value ? { width: V.value + "px" } : { height: V.value + "px" };
+			if (!O.value && ee.value) {
+				let t = te.value - E.value * ee.value, n = Math.max(0, F.value - V.value);
+				e.transform = re(Math.min(Math.max(t, 0), n));
+			} else O.value && (e.transform = re(te.value));
 			return e;
-		}), A = l(() => y.value ? Math.min(o.size, C.value) : o.size), M = l(() => {
+		}), V = l(() => O.value ? Math.min(S.value, F.value) : S.value), ae = l(() => {
 			let e = [];
 			return o.secondaryActions && e.push(...o.secondaryActions), o.primaryAction && e.push({
 				type: "primary",
 				...o.primaryAction
 			}), e;
 		});
-		function F(e) {
-			v.value = Math.max(o.minIndex, i.getNextZIndex()), b.value = !0, i.add(T), e instanceof HTMLElement && (e.style.transitionDuration = `${o.animateInDuration}ms`, e.style.transform = O(D.value)), s("before-open");
+		function oe(e) {
+			x(), D.value = Math.max(o.minIndex, i.getNextZIndex()), k.value = !0, i.add(I), e instanceof HTMLElement && (e.style.transitionDuration = `${C.value}ms`, e.style.transform = re(ne.value)), s("before-open");
 		}
-		function ee(e, t) {
-			e instanceof HTMLElement && (e.style.transform = O(E.value)), y.value = !0, setTimeout(t, o.animateInDuration);
+		function se(e, t) {
+			e instanceof HTMLElement && (e.style.transform = re(te.value)), O.value = !0, setTimeout(t, C.value);
 		}
-		function I() {
-			b.value = !1, s("after-open");
+		function ce() {
+			k.value = !1, s("after-open");
 		}
-		function te(e) {
-			e instanceof HTMLElement && (e.style.transitionDuration = `${o.animateOutDuration}ms`, e.style.transform = O(D.value)), i.beforeRemove(T), s("before-close");
+		function le(e) {
+			e instanceof HTMLElement && (e.style.transitionDuration = `${w.value}ms`, e.style.transform = re(ne.value)), i.beforeRemove(I), s("before-close");
 		}
-		function ne(e, t) {
-			setTimeout(t, o.animateOutDuration);
+		function ue(e, t) {
+			setTimeout(t, w.value);
 		}
-		function re() {
-			i.remove(T), b.value = !0, s("after-close");
+		function de() {
+			i.remove(I), k.value = !0, s("after-close");
 		}
-		function ie() {
+		function fe() {
 			o.loading || (s("update", !1), s("close"));
 		}
 		if (!document.getElementById("sheetManager")) {
@@ -14130,22 +14164,22 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 			e.id = "sheetManager", document.body.appendChild(e);
 		}
 		i.setOverflowClass(c.preventScroll);
-		let V = pm(() => {
-			x.value = window.innerWidth, S.value = window.innerHeight;
+		let pe = pm(() => {
+			A.value = window.innerWidth, M.value = window.innerHeight;
 		}, 250, { leading: !0 });
-		return window.addEventListener("resize", V), P(() => {
-			V && window.removeEventListener("resize", V), i.remove(T);
+		return window.addEventListener("resize", pe), P(() => {
+			pe && window.removeEventListener("resize", pe), i.remove(I);
 		}), (t, i) => (L(), d(r, { to: "#sheetManager" }, [m("div", {
 			class: j([
 				"UIElement",
 				t.$style.sheet,
-				v.value === 0 && t.$style.foreground,
-				v.value > 0 && t.$style.background
+				D.value === 0 && t.$style.foreground,
+				D.value > 0 && t.$style.background
 			]),
 			style: N({
-				zIndex: v.value,
-				"--sheet-in-duration": `${e.animateInDuration}ms`,
-				"--sheet-out-duration": `${e.animateOutDuration}ms`
+				zIndex: D.value,
+				"--sheet-in-duration": `${C.value}ms`,
+				"--sheet-out-duration": `${w.value}ms`
 			})
 		}, [
 			B(t.$slots, "external"),
@@ -14159,7 +14193,7 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 				default: K(() => [e.visible ? (L(), p("div", {
 					key: 0,
 					class: j(t.$style.backdrop),
-					onClick: ie
+					onClick: fe
 				}, null, 2)) : f("", !0)]),
 				_: 1
 			}, 8, [
@@ -14170,12 +14204,12 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 			]),
 			_(a, {
 				name: "Sheet-container",
-				onBeforeEnter: F,
-				onEnter: ee,
-				onAfterEnter: I,
-				onBeforeLeave: te,
-				onLeave: ne,
-				onAfterLeave: re
+				onBeforeEnter: oe,
+				onEnter: se,
+				onAfterEnter: ce,
+				onBeforeLeave: le,
+				onLeave: ue,
+				onAfterLeave: de
 			}, {
 				default: K(() => [e.visible ? (L(), p("div", {
 					key: 0,
@@ -14184,7 +14218,7 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 						t.$style[`container__${e.edge}`],
 						e.containerClass
 					]),
-					style: N(k.value)
+					style: N(ie.value)
 				}, [
 					e.loading ? (L(), p("div", {
 						key: 0,
@@ -14199,14 +14233,14 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 					}, [
 						m("div", {
 							class: j(t.$style.close),
-							onClick: ie
+							onClick: fe
 						}, [_(U(Y), { icon: "mdi:close" })], 2),
 						m("div", { class: j(t.$style.title) }, H(e.title), 3),
-						m("div", { class: j(t.$style.actions) }, [B(t.$slots, "actions"), M.value.length ? (L(), d(U(Bf), {
+						m("div", { class: j(t.$style.actions) }, [B(t.$slots, "actions"), ae.value.length ? (L(), d(U(Bf), {
 							key: 0,
 							style: N([t.$slots.actions && "margin-left: 8px"])
 						}, {
-							default: K(() => [(L(!0), p(n, null, z(M.value, (e, t) => (L(), d(U(Z), {
+							default: K(() => [(L(!0), p(n, null, z(ae.value, (e, t) => (L(), d(U(Z), {
 								key: t,
 								type: e.type,
 								disabled: e.disabled,
@@ -14232,46 +14266,47 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 					], 6),
 					_(U(hm), {
 						class: j(t.$style.contentWrapper),
-						disabled: b.value,
-						padding: e.padded ? "30px" : "0",
+						disabled: k.value,
+						padding: e.padded ? "var(--octans-sheet-padding, 30px)" : "0",
 						contain: ""
 					}, {
-						default: K(() => [m("div", { class: j([
-							t.$style.content,
-							e.padded && t.$style.contentPadded,
-							e.contentClass
-						]) }, [B(t.$slots, "default")], 2)]),
+						default: K(() => [m("div", { class: j([t.$style.content, e.contentClass]) }, [B(t.$slots, "default")], 2)]),
 						_: 3
 					}, 8, [
 						"class",
 						"disabled",
 						"padding"
-					])
+					]),
+					t.$slots.footer ? (L(), p("div", {
+						key: 1,
+						class: j(t.$style.footer)
+					}, [m("div", { class: j([t.$style.footerContent, e.footerClass]) }, [B(t.$slots, "footer")], 2)], 2)) : f("", !0)
 				], 6)) : f("", !0)]),
 				_: 3
 			})
 		], 6)]));
 	}
 }), [["__cssModules", { $style: {
-	preventScroll: "_preventScroll_75lsk_1",
-	sheet: "_sheet_75lsk_5",
-	backdrop: "_backdrop_75lsk_10",
-	container: "_container_75lsk_21",
-	container__right: "_container__right_75lsk_34",
-	container__left: "_container__left_75lsk_35",
-	container__top: "_container__top_75lsk_39",
-	container__bottom: "_container__bottom_75lsk_40",
-	loader: "_loader_75lsk_44",
-	header: "_header_75lsk_57",
-	close: "_close_75lsk_68",
-	title: "_title_75lsk_78",
-	actions: "_actions_75lsk_83",
-	contentWrapper: "_contentWrapper_75lsk_88",
-	contentPadded: "_contentPadded_75lsk_93",
-	backdropEnterActive: "_backdropEnterActive_75lsk_98",
-	backdropLeaveActive: "_backdropLeaveActive_75lsk_102",
-	backdropEnter: "_backdropEnter_75lsk_98",
-	backdropLeaveTo: "_backdropLeaveTo_75lsk_107"
+	preventScroll: "_preventScroll_lbhfg_2",
+	sheet: "_sheet_lbhfg_6",
+	backdrop: "_backdrop_lbhfg_11",
+	container: "_container_lbhfg_22",
+	container__right: "_container__right_lbhfg_35",
+	container__left: "_container__left_lbhfg_36",
+	container__top: "_container__top_lbhfg_40",
+	container__bottom: "_container__bottom_lbhfg_41",
+	loader: "_loader_lbhfg_45",
+	header: "_header_lbhfg_58",
+	close: "_close_lbhfg_69",
+	title: "_title_lbhfg_79",
+	actions: "_actions_lbhfg_84",
+	contentWrapper: "_contentWrapper_lbhfg_89",
+	footer: "_footer_lbhfg_94",
+	footerContent: "_footerContent_lbhfg_111",
+	backdropEnterActive: "_backdropEnterActive_lbhfg_118",
+	backdropLeaveActive: "_backdropLeaveActive_lbhfg_122",
+	backdropEnter: "_backdropEnter_lbhfg_118",
+	backdropLeaveTo: "_backdropLeaveTo_lbhfg_127"
 } }]]), N_ = ["data-ui-tooltip", "data-ui-tooltip-position"], P_ = ["disabled"], F_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 	__name: "Tag",
 	props: {
@@ -16943,28 +16978,28 @@ var Wv = /*#__PURE__*/ J(Bv, [["render", Uv], ["__cssModules", { $style: Vv }]])
 		], 2)], 2));
 	}
 }), [["__cssModules", { $style: {
-	Page: "_Page_10byo_2",
-	Page__narrow: "_Page__narrow_10byo_10",
-	Page__wide: "_Page__wide_10byo_14",
-	Page__fullWidth: "_Page__fullWidth_10byo_18",
-	Page_container: "_Page_container_10byo_22",
-	Page_loader: "_Page_loader_10byo_26",
-	Page_header: "_Page_header_10byo_43",
-	Page_headerMain: "_Page_headerMain_10byo_49",
-	Page_breadcrumbs: "_Page_breadcrumbs_10byo_53",
-	Page_titleWrapper: "_Page_titleWrapper_10byo_57",
-	Page_title: "_Page_title_10byo_57",
-	Page_subtitle: "_Page_subtitle_10byo_68",
-	Page_helpIcon: "_Page_helpIcon_10byo_73",
-	Page_badge: "_Page_badge_10byo_84",
-	PageActions: "_PageActions_10byo_88",
-	PageAction: "_PageAction_10byo_88",
-	PageAction_button: "_PageAction_button_10byo_96",
-	Breadcrumb: "_Breadcrumb_10byo_103",
-	Breadcrumb_button: "_Breadcrumb_button_10byo_108",
-	PageActions_collapsed: "_PageActions_collapsed_10byo_116",
-	Page_content: "_Page_content_10byo_120",
-	Page_headerPrimaryActionWrapper: "_Page_headerPrimaryActionWrapper_10byo_125"
+	Page: "_Page_1m4q3_2",
+	Page__narrow: "_Page__narrow_1m4q3_10",
+	Page__wide: "_Page__wide_1m4q3_14",
+	Page__fullWidth: "_Page__fullWidth_1m4q3_18",
+	Page_container: "_Page_container_1m4q3_22",
+	Page_loader: "_Page_loader_1m4q3_26",
+	Page_header: "_Page_header_1m4q3_43",
+	Page_headerMain: "_Page_headerMain_1m4q3_49",
+	Page_breadcrumbs: "_Page_breadcrumbs_1m4q3_53",
+	Page_titleWrapper: "_Page_titleWrapper_1m4q3_57",
+	Page_title: "_Page_title_1m4q3_57",
+	Page_subtitle: "_Page_subtitle_1m4q3_68",
+	Page_helpIcon: "_Page_helpIcon_1m4q3_73",
+	Page_badge: "_Page_badge_1m4q3_84",
+	PageActions: "_PageActions_1m4q3_88",
+	PageAction: "_PageAction_1m4q3_88",
+	PageAction_button: "_PageAction_button_1m4q3_96",
+	Breadcrumb: "_Breadcrumb_1m4q3_103",
+	Breadcrumb_button: "_Breadcrumb_button_1m4q3_108",
+	PageActions_collapsed: "_PageActions_collapsed_1m4q3_116",
+	Page_content: "_Page_content_1m4q3_120",
+	Page_headerPrimaryActionWrapper: "_Page_headerPrimaryActionWrapper_1m4q3_133"
 } }]]), ay = /*#__PURE__*/ J(/* @__PURE__ */ y({
 	__name: "PageActions",
 	props: {
@@ -19483,11 +19518,11 @@ var _b = [
 		}, 1032, ["class", "style"]))), 128))], 2));
 	}
 }), [["__cssModules", { $style: {
-	ResourceList_header: "_ResourceList_header_vme8d_1",
-	ResourceList_headerCell: "_ResourceList_headerCell_vme8d_6",
-	ResourceList_row: "_ResourceList_row_vme8d_10",
-	ResourceList_cell: "_ResourceList_cell_vme8d_14",
-	ResourceList_cell__numeric: "_ResourceList_cell__numeric_vme8d_18"
+	ResourceList_header: "_ResourceList_header_1e833_1",
+	ResourceList_headerCell: "_ResourceList_headerCell_1e833_6",
+	ResourceList_row: "_ResourceList_row_1e833_10",
+	ResourceList_cell: "_ResourceList_cell_1e833_14",
+	ResourceList_cell__numeric: "_ResourceList_cell__numeric_1e833_18"
 } }]]), Pb = /* @__PURE__ */ Ne({
 	ActionList: () => vs,
 	AppFrame: () => xm,
@@ -20078,6 +20113,7 @@ var Kx = [
 		tokens: [
 			$("border", "Default dividers and outlines"),
 			$("border-strong", "Heavier dividers — decorative"),
+			$("table-header-border", "Rule under a DataTable or ResourceList header. Defaults to the row-rule weight; set to border-strong for a heavier bar"),
 			$("border-input", "Control outlines — deliberately soft; set to neutral-500 for strict WCAG 1.4.11"),
 			$("border-error"),
 			$("border-focus", "Focus outline colour")
@@ -20112,7 +20148,11 @@ var Kx = [
 			...Zx("info"),
 			...Zx("success"),
 			...Zx("warning"),
-			...Zx("error", { states: !0 })
+			...Zx("error", { states: !0 }),
+			$("tint-info", "What a status tint (Badge, Banner) mixes from. Follows the fill"),
+			$("tint-success", "Follows the success fill"),
+			$("tint-warning", "The true amber, NOT the warning fill — that is the deep 700 step, chosen to carry white text, and dilutes to beige"),
+			$("tint-error", "Follows the error fill")
 		]
 	},
 	{
@@ -20178,6 +20218,73 @@ var Kx = [
 			}
 		]
 	},
+	{
+		title: "Badge & Banner",
+		tier: "semantic",
+		description: "How strongly a status Badge or Banner tints itself with its role colour. Two dials rather than one, because a badge is a small object that has to hold its own against the card it sits on and a banner is a large panel where the same strength stops being a background. The four surfaces under each are DERIVED from that component’s dial — move the dial and all four follow; set one directly only to make a single status sit apart.",
+		tokens: [
+			{
+				name: "badge-surface-strength",
+				kind: "percent",
+				description: "How much role colour a status Badge mixes in"
+			},
+			{
+				name: "banner-surface-strength",
+				kind: "percent",
+				description: "How much role colour a status Banner mixes in"
+			},
+			{
+				name: "badge-ink",
+				kind: "color",
+				description: "Forces one label colour on every status Badge. Unset = each status keeps its own text colour"
+			},
+			{
+				name: "banner-ink",
+				kind: "color",
+				description: "Forces one label colour on every status Banner. Unset = each status keeps its own text colour"
+			},
+			{
+				name: "badge-info-surface",
+				kind: "color",
+				description: "Derived from the Badge dial"
+			},
+			{
+				name: "badge-success-surface",
+				kind: "color",
+				description: "Derived from the Badge dial"
+			},
+			{
+				name: "badge-warning-surface",
+				kind: "color",
+				description: "Derived from the Badge dial"
+			},
+			{
+				name: "badge-error-surface",
+				kind: "color",
+				description: "Derived from the Badge dial"
+			},
+			{
+				name: "banner-info-surface",
+				kind: "color",
+				description: "Derived from the Banner dial"
+			},
+			{
+				name: "banner-success-surface",
+				kind: "color",
+				description: "Derived from the Banner dial"
+			},
+			{
+				name: "banner-warning-surface",
+				kind: "color",
+				description: "Derived from the Banner dial"
+			},
+			{
+				name: "banner-error-surface",
+				kind: "color",
+				description: "Derived from the Banner dial"
+			}
+		]
+	},
 	{
 		title: "Tabs",
 		tier: "semantic",
@@ -20205,6 +20312,57 @@ var Kx = [
 			}
 		]
 	},
+	{
+		title: "Sheet",
+		tier: "semantic",
+		description: "How big a Sheet is and how fast it moves. In the theme rather than the global stylesheet for the same reason as the Tabs indicator: how wide a product’s sheets are, and whether they glide or snap, is a decision worth carrying rather than repeating at every call site. The size and the two durations are read by Sheet from the computed style — it slides by a transform it computes itself, so the numbers have to reach it as numbers — and are re-read each time a sheet opens.",
+		tokens: [
+			{
+				name: "sheet-size",
+				kind: "length",
+				description: "Default width of a left/right sheet, height of a top/bottom one"
+			},
+			{
+				name: "sheet-padding",
+				kind: "length",
+				description: "Gutter that `<Sheet padded>` puts around its content"
+			},
+			{
+				name: "sheet-in-duration",
+				kind: "duration",
+				description: "Default open animation; 0ms opens instantly"
+			},
+			{
+				name: "sheet-out-duration",
+				kind: "duration",
+				description: "Default close animation; 0ms closes instantly"
+			},
+			{
+				name: "sheet-footer-align",
+				kind: "keyword",
+				description: "How the footer slot lays its row out — any justify-content value"
+			},
+			{
+				name: "sheet-footer-gap",
+				kind: "length",
+				description: "Space between items in a sheet footer"
+			}
+		]
+	},
+	{
+		title: "Icons",
+		tier: "semantic",
+		description: "Two knobs an app sets once instead of passing props at every call site. Both defaults are what the library has always drawn, so setting either is opt-in and cannot silently move existing icons.",
+		tokens: [{
+			name: "icon-size",
+			kind: "length",
+			description: "Size of an Icon with no `size` prop. 1em follows the surrounding font"
+		}, {
+			name: "icon-valign",
+			kind: "length",
+			description: "Vertical alignment of every Icon; -0.125em suits icons inline with text"
+		}]
+	},
 	{
 		title: "Typography",
 		tier: "semantic",