@octans/ui 1.2.0 → 1.4.0

package/dist/ui.js

@@ -5004,6 +5004,7 @@ var cs = {
 	props: {
 		label: { type: String },
 		helpText: { type: String },
+		content: { type: Function },
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -5029,7 +5030,7 @@ var cs = {
 				return e.icon && t.push(w(Y, {
 					icon: e.icon,
 					style: "margin-right: 10px"
-				})), e.helpText ? t.push(w("div", [w("div", e.label), w(ms, { props: { type: "subdued" } }, { default: () => e.helpText })])) : t.push(w("div", e.label)), e.dropdown && t.push(w(Y, {
+				})), e.content ? t.push(w("div", [e.content()])) : e.helpText ? t.push(w("div", [w("div", e.label), w(ms, { props: { type: "subdued" } }, { default: () => e.helpText })])) : t.push(w("div", e.label)), e.dropdown && t.push(w(Y, {
 					icon: "mdi:menu-right",
 					style: "margin-left: 10px"
 				})), t;
@@ -5082,6 +5083,7 @@ var cs = {
 				tooltip: t.tooltip,
 				"tooltip-position": t.tooltipPosition,
 				helpText: t.helpText,
+				content: t.content,
 				dropdown: ""
 			}, null, 8, [
 				"icon",
@@ -5089,7 +5091,8 @@ var cs = {
 				"disabled",
 				"tooltip",
 				"tooltip-position",
-				"helpText"
+				"helpText",
+				"content"
 			]))]),
 			_: 2
 		}, 1032, [
@@ -5105,6 +5108,7 @@ var cs = {
 			tooltip: t.tooltip,
 			"tooltip-position": t.tooltipPosition,
 			helpText: t.helpText,
+			content: t.content,
 			url: t.url,
 			external: t.external,
 			onClick: (e) => o(t)
@@ -5115,6 +5119,7 @@ var cs = {
 			"tooltip",
 			"tooltip-position",
 			"helpText",
+			"content",
 			"url",
 			"external",
 			"onClick"
@@ -9599,18 +9604,18 @@ var bm = ["aria-label", "data-ui-tooltip"], xm = /*#__PURE__*/ J(/* @__PURE__ */
 		};
 	}
 }), [["__cssModules", { $style: {
-	Badge: "_Badge_bo5dp_1",
-	pip: "_pip_bo5dp_12",
-	statusInfo: "_statusInfo_bo5dp_24",
-	statusSuccess: "_statusSuccess_bo5dp_32",
-	statusWarning: "_statusWarning_bo5dp_40",
-	statusAttention: "_statusAttention_bo5dp_41",
-	statusError: "_statusError_bo5dp_50",
-	statusNew: "_statusNew_bo5dp_58",
-	progressIncomplete: "_progressIncomplete_bo5dp_68",
-	progressPartiallyComplete: "_progressPartiallyComplete_bo5dp_72",
-	progressComplete: "_progressComplete_bo5dp_76",
-	sizeSmall: "_sizeSmall_bo5dp_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,
@@ -9631,18 +9636,18 @@ 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_1615y_2",
+	Icon: "_Icon_1615y_9",
+	content: "_content_1615y_14",
+	title: "_title_1615y_23",
+	close: "_close_1615y_28",
+	"status-default": "_status-default_1615y_48",
+	"status-info": "_status-info_1615y_54",
+	"status-success": "_status-success_1615y_60",
+	"status-warning": "_status-warning_1615y_66",
+	"status-attention": "_status-attention_1615y_67",
+	"status-error": "_status-error_1615y_73",
+	"status-new": "_status-new_1615y_79"
 };
 //#endregion
 //#region src/components/Banner/Banner.vue
@@ -14294,10 +14299,10 @@ var M_ = /*#__PURE__*/ J(/* @__PURE__ */ y({
 		}, [_(U(Y), { icon: "mdi:close" })], 10, P_)], 10, N_));
 	}
 }), [["__cssModules", { $style: {
-	Tag: "_Tag_1nh5i_1",
-	Tag__isRequired: "_Tag__isRequired_1nh5i_13",
-	Tag_button: "_Tag_button_1nh5i_13",
-	Tag_text: "_Tag_text_1nh5i_18"
+	Tag: "_Tag_8pqn7_1",
+	Tag__isRequired: "_Tag__isRequired_8pqn7_13",
+	Tag_button: "_Tag_button_8pqn7_13",
+	Tag_text: "_Tag_text_8pqn7_18"
 } }]]), I_ = y({
 	methods: { $t: Q },
 	components: {
@@ -14711,12 +14716,20 @@ var $_ = y({
 		onDragEnd(e) {
 			let t = this.isDragArmed;
 			if (this.endDragTracking(), !t || !this.isOpen) return;
+			if (this.searchAtPoint(e.clientX, e.clientY)) {
+				this.ignoreNextDocClick = !0, this.$refs.searchInput?.focus();
+				return;
+			}
 			let n = this.optionAtPoint(e.clientX, e.clientY);
 			!n || n.disabled || (this.multiple && (this.ignoreNextDocClick = !0), this.toggleOption(n));
 		},
 		endDragTracking() {
 			document.removeEventListener("mousemove", this.onDragMove), document.removeEventListener("mouseup", this.onDragEnd), this.dragOrigin = null, this.isDragArmed = !1;
 		},
+		searchAtPoint(e, t) {
+			let n = document.elementFromPoint?.(e, t);
+			return !!(n && n.closest("[data-select-search]"));
+		},
 		optionAtPoint(e, t) {
 			let n = document.elementFromPoint?.(e, t), r = n && n.closest("[data-option-index]");
 			if (!r) return;
@@ -14847,40 +14860,40 @@ function tv(e) {
 	return e === " " || e >= "0" && e <= "9" || e >= "a" && e <= "z";
 }
 var nv = {
-	Select: "_Select_17yri_1",
-	isReadonly: "_isReadonly_17yri_5",
-	control: "_control_17yri_9",
-	isDisabled: "_isDisabled_17yri_14",
-	hasError: "_hasError_17yri_35",
-	isOpen: "_isOpen_17yri_48",
-	popperPlacement_top: "_popperPlacement_top_17yri_52",
-	popperPlacement_bottom: "_popperPlacement_bottom_17yri_58",
-	DisplayText: "_DisplayText_17yri_68",
-	isEmpty: "_isEmpty_17yri_72",
-	more: "_more_17yri_76",
-	caret: "_caret_17yri_80",
-	showDescription: "_showDescription_17yri_87",
-	DisplayText_label: "_DisplayText_label_17yri_95",
-	DisplayText_desc: "_DisplayText_desc_17yri_100",
-	ClearButton: "_ClearButton_17yri_111",
-	Dropdown: "_Dropdown_17yri_120",
-	Dropdown__minWidthSet: "_Dropdown__minWidthSet_17yri_146",
-	Dropdown_search: "_Dropdown_search_17yri_153",
-	Dropdown_searchIcon: "_Dropdown_searchIcon_17yri_160",
-	Dropdown_searchCloseIcon: "_Dropdown_searchCloseIcon_17yri_166",
-	Dropdown_searchInput: "_Dropdown_searchInput_17yri_176",
-	Dropdown_content: "_Dropdown_content_17yri_190",
-	NoResults: "_NoResults_17yri_195",
-	OptionGroup: "_OptionGroup_17yri_201",
-	OptionGroup_title: "_OptionGroup_title_17yri_205",
-	Option: "_Option_17yri_201",
-	ToggleAll: "_ToggleAll_17yri_214",
-	Option_check: "_Option_check_17yri_225",
-	Option_desc: "_Option_desc_17yri_231",
-	Option__disabled: "_Option__disabled_17yri_238",
-	Option__active: "_Option__active_17yri_243",
-	Tags: "_Tags_17yri_254",
-	Tag: "_Tag_17yri_254"
+	Select: "_Select_1ft2q_1",
+	isReadonly: "_isReadonly_1ft2q_5",
+	control: "_control_1ft2q_9",
+	isDisabled: "_isDisabled_1ft2q_14",
+	hasError: "_hasError_1ft2q_35",
+	isOpen: "_isOpen_1ft2q_48",
+	popperPlacement_top: "_popperPlacement_top_1ft2q_52",
+	popperPlacement_bottom: "_popperPlacement_bottom_1ft2q_58",
+	DisplayText: "_DisplayText_1ft2q_68",
+	isEmpty: "_isEmpty_1ft2q_72",
+	more: "_more_1ft2q_76",
+	caret: "_caret_1ft2q_80",
+	showDescription: "_showDescription_1ft2q_96",
+	DisplayText_label: "_DisplayText_label_1ft2q_104",
+	DisplayText_desc: "_DisplayText_desc_1ft2q_109",
+	ClearButton: "_ClearButton_1ft2q_120",
+	Dropdown: "_Dropdown_1ft2q_129",
+	Dropdown__minWidthSet: "_Dropdown__minWidthSet_1ft2q_155",
+	Dropdown_search: "_Dropdown_search_1ft2q_162",
+	Dropdown_searchIcon: "_Dropdown_searchIcon_1ft2q_169",
+	Dropdown_searchCloseIcon: "_Dropdown_searchCloseIcon_1ft2q_175",
+	Dropdown_searchInput: "_Dropdown_searchInput_1ft2q_185",
+	Dropdown_content: "_Dropdown_content_1ft2q_199",
+	NoResults: "_NoResults_1ft2q_204",
+	OptionGroup: "_OptionGroup_1ft2q_210",
+	OptionGroup_title: "_OptionGroup_title_1ft2q_214",
+	Option: "_Option_1ft2q_210",
+	ToggleAll: "_ToggleAll_1ft2q_223",
+	Option_check: "_Option_check_1ft2q_234",
+	Option_desc: "_Option_desc_1ft2q_240",
+	Option__disabled: "_Option__disabled_1ft2q_247",
+	Option__active: "_Option__active_1ft2q_252",
+	Tags: "_Tags_1ft2q_263",
+	Tag: "_Tag_1ft2q_263"
 }, rv = ["tabindex", "aria-required"], iv = ["innerHTML"], av = [
 	"data-option-index",
 	"onMousedown",
@@ -14888,14 +14901,14 @@ var nv = {
 ];
 function ov(e, t, r, i, a, o) {
 	let s = V("Spinner"), c = V("Icon"), l = V("Tag"), u = V("CheckboxControl"), h = V("ScrollPane"), v = V("MaybeMountingPortal"), y = V("Labelled");
-	return L(), d(y, {
+	return L(), d(y, k(e.$attrs, {
 		label: e.label,
 		error: e.error,
 		"help-text": e.helpText,
 		"help-text-html": e.helpTextHtml,
 		"help-link": e.helpLink,
 		required: e.required
-	}, {
+	}), {
 		default: K(() => [m("div", { class: j(["UIElement", [
 			e.$style.Select,
 			e.error && e.$style.hasError,
@@ -14934,7 +14947,8 @@ function ov(e, t, r, i, a, o) {
 				e.loading ? f("", !0) : (L(), d(c, {
 					key: 2,
 					class: j(e.$style.caret),
-					icon: "mdi:menu-down"
+					icon: "mdi:menu-down",
+					size: "20px"
 				}, null, 8, ["class"]))
 			], 42, rv),
 			e.multiple && e.tags && e.selectedOptions.length > 0 ? (L(), p("div", {
@@ -14968,7 +14982,8 @@ function ov(e, t, r, i, a, o) {
 				}, [
 					e.showSearch ? (L(), p("div", {
 						key: 0,
-						class: j(e.$style.Dropdown_search)
+						class: j(e.$style.Dropdown_search),
+						"data-select-search": ""
 					}, [
 						_(c, {
 							class: j(e.$style.Dropdown_searchIcon),
@@ -15058,7 +15073,7 @@ function ov(e, t, r, i, a, o) {
 			}, 8, ["teleport"])) : f("", !0)
 		], 2)]),
 		_: 3
-	}, 8, [
+	}, 16, [
 		"label",
 		"error",
 		"help-text",
@@ -17931,101 +17946,108 @@ var fy = /*#__PURE__*/ J(cy, [["render", dy], ["__cssModules", { $style: ly }]])
 	props: {
 		selected: {},
 		tabs: { default: () => [] },
-		theme: { default: "blue" }
+		indicator: {}
 	},
 	emits: ["update:selected"],
 	setup(e, { emit: t }) {
-		let r = e, i = t, a = R({}), o = R(), s = R([]), c = R(null), u = l(() => r.tabs.filter((e) => a.value[e.value])), h = l(() => u.value.map((e) => ({
+		let r = e, i = t, a = ge(), o = W(), s = {
+			underline: "indicatorUnderline",
+			bar: "indicatorBar"
+		}, c = l(() => r.indicator ? o[s[r.indicator]] : null), u = R({}), h = R(), v = R([]), b = R(null), x = l(() => r.tabs.filter((e) => u.value[e.value]));
+		function S(e) {
+			return a.tab ? a.tab({ tab: e }) : [e.label, e.badge ? w(Cm, {
+				status: e.badgeStatus,
+				progress: e.badgeProgress,
+				class: o.Tab_badge
+			}, () => e.badge) : null];
+		}
+		let C = y({
+			props: { tab: {
+				type: Object,
+				required: !0
+			} },
+			setup: (e) => () => S(e.tab)
+		}), T = l(() => x.value.map((e) => ({
 			label: e.label,
 			icon: e.value === r.selected ? "mdi:check" : null,
 			disabled: e.disabled,
-			onAction: () => b(e)
-		}))), v = l(() => u.value.some((e) => e.value === r.selected)), y = l(() => {
+			content: () => S(e),
+			onAction: () => O(e)
+		}))), E = l(() => x.value.some((e) => e.value === r.selected)), D = l(() => {
 			let e = r.tabs.find((e) => e.value === r.selected);
-			return v.value && e?.label || "";
+			return E.value && e?.label || "";
 		});
-		function b(e) {
+		function O(e) {
 			e.disabled || i("update:selected", e.value, e);
 		}
-		function x() {
-			let e = {}, t = o.value?.getBoundingClientRect().width, n = 150;
-			s.value.forEach((i, a) => {
+		function k() {
+			let e = {}, t = h.value?.getBoundingClientRect().width, n = 150;
+			v.value.forEach((i, a) => {
 				let o = r.tabs[a], s = i.offsetWidth;
 				n += s, e[o.value] = n >= (t || 0);
-			}), a.value = e;
+			}), u.value = e;
 		}
 		return F(() => {
-			o.value && (c.value = new ResizeObserver(pm(x, 100, {
+			h.value && (b.value = new ResizeObserver(pm(k, 100, {
 				leading: !0,
 				trailing: !0
-			})), c.value.observe(o.value));
+			})), b.value.observe(h.value));
 		}), P(() => {
-			c.value &&= (c.value.disconnect(), null);
+			b.value &&= (b.value.disconnect(), null);
 		}), (t, r) => (L(), p("div", { class: j([
 			"UIElement",
-			t.$style.Tabs,
-			e.theme === "purple" && t.$style.Purple
+			U(o).Tabs,
+			c.value
 		]) }, [m("div", {
-			class: j(t.$style.Tab_container),
+			class: j(U(o).Tab_container),
 			ref_key: "tabContainer",
-			ref: o
-		}, [(L(!0), p(n, null, z(e.tabs, (n) => (L(), p("button", {
-			key: n.value,
+			ref: h
+		}, [(L(!0), p(n, null, z(e.tabs, (t) => (L(), p("button", {
+			key: t.value,
 			type: "button",
 			class: j([
-				t.$style.Tab,
-				n.disabled && t.$style.Tab__disabled,
-				e.selected === n.value && t.$style.Tab__selected
+				U(o).Tab,
+				t.disabled && U(o).Tab__disabled,
+				e.selected === t.value && U(o).Tab__selected
 			]),
-			onClick: (e) => b(n),
+			onClick: (e) => O(t),
 			onMouseup: r[0] ||= (e) => e.currentTarget?.blur(),
 			ref_for: !0,
 			ref_key: "tabElements",
-			ref: s,
+			ref: v,
 			style: N({
-				visibility: a.value[n.value] ? "hidden" : "visible",
-				position: a.value[n.value] ? "absolute" : "relative"
+				visibility: u.value[t.value] ? "hidden" : "visible",
+				position: u.value[t.value] ? "absolute" : "relative"
 			})
-		}, [m("div", { class: j(t.$style.Tab_title) }, [B(t.$slots, "tab", { tab: n }, () => [g(H(n.label) + " ", 1), n.badge ? (L(), d(U(Cm), {
+		}, [m("div", { class: j(U(o).Tab_title) }, [_(U(C), { tab: t }, null, 8, ["tab"])], 2), m("div", { class: j(U(o).Tab_bar) }, null, 2)], 46, ky))), 128)), T.value.length > 0 ? (L(), d(U(vs), {
 			key: 0,
-			status: n.badgeStatus,
-			progress: n.badgeProgress,
-			class: j(t.$style.Tab_badge)
-		}, {
-			default: K(() => [g(H(n.badge), 1)]),
-			_: 2
-		}, 1032, [
-			"status",
-			"progress",
-			"class"
-		])) : f("", !0)])], 2), m("div", { class: j(t.$style.Tab_bar) }, null, 2)], 46, ky))), 128)), h.value.length > 0 ? (L(), d(U(vs), {
-			key: 0,
-			items: h.value,
+			items: T.value,
 			placement: "bottom-end",
-			class: j([t.$style.TruncatedTabsButton, v.value && t.$style.selected])
+			class: j([U(o).TruncatedTabsButton, E.value && U(o).selected])
 		}, {
 			default: K(() => [_(U(Z), {
 				type: "link",
-				icon: y.value ? "" : "mdi:dots-horizontal",
-				dropdown: !!y.value
+				icon: D.value ? "" : "mdi:dots-horizontal",
+				dropdown: !!D.value
 			}, {
-				default: K(() => [g(H(y.value), 1)]),
+				default: K(() => [g(H(D.value), 1)]),
 				_: 1
 			}, 8, ["icon", "dropdown"])]),
 			_: 1
 		}, 8, ["items", "class"])) : f("", !0)], 2)], 2));
 	}
 }), [["__cssModules", { $style: {
-	Purple: "_Purple_16dei_1",
-	Tab_container: "_Tab_container_16dei_1",
-	Tab: "_Tab_16dei_1",
-	Tab__disabled: "_Tab__disabled_16dei_7",
-	Tab_title: "_Tab_title_16dei_10",
-	Tab_bar: "_Tab_bar_16dei_18",
-	Tab__selected: "_Tab__selected_16dei_26",
-	TruncatedTabsButton: "_TruncatedTabsButton_16dei_36",
-	selected: "_selected_16dei_42",
-	Tab_badge: "_Tab_badge_16dei_107"
+	indicatorUnderline: "_indicatorUnderline_1pw24_10",
+	indicatorBar: "_indicatorBar_1pw24_17",
+	Tab_container: "_Tab_container_1pw24_24",
+	Tab: "_Tab_1pw24_24",
+	Tab__disabled: "_Tab__disabled_1pw24_44",
+	Tab_title: "_Tab_title_1pw24_44",
+	Tab_bar: "_Tab_bar_1pw24_53",
+	Tab__selected: "_Tab__selected_1pw24_63",
+	Tab_badge: "_Tab_badge_1pw24_93",
+	TruncatedTabsButton: "_TruncatedTabsButton_1pw24_100",
+	selected: "_selected_1pw24_107"
 } }]]), jy = { TextContainer: "_TextContainer_rpyk3_1" }, My = {};
 function Ny(e, t) {
 	return L(), p("div", { class: j(["UIElement", e.$style.TextContainer]) }, [B(e.$slots, "default")], 2);
@@ -20025,6 +20047,7 @@ var Kx = [
 			$("surface", "Cards, panels, the default background"),
 			Yx("surface-raised", "Menus, popovers, modals — above the surface"),
 			$("surface-sunken", "Table headers, wells, code blocks"),
+			$("surface-neutral", "Neutral chips on a surface — Badge, Tag"),
 			$("surface-app", "The application background behind cards"),
 			Yx("surface-hover", "Hover wash over a surface"),
 			Yx("surface-selected", "Selected rows and items — the primary's soft tint"),
@@ -20155,6 +20178,100 @@ 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",
+		description: "The mark under the selected tab — the one part of a component that lives in the theme, so a product can carry the choice rather than set it in code. The defaults draw an underline; a rounded bar sitting on the divider is the same mark with different numbers (5px / rounded / offset -2px / gap 8px).",
+		tokens: [
+			{
+				name: "tabs-indicator-height",
+				kind: "length",
+				description: "Thickness of the mark"
+			},
+			{
+				name: "tabs-indicator-radius",
+				kind: "radius",
+				description: "Rounding of the mark — 0 is a square rule"
+			},
+			{
+				name: "tabs-indicator-offset",
+				kind: "length",
+				description: "Vertical shift; negative drops it onto the divider"
+			},
+			{
+				name: "tabs-label-gap",
+				kind: "length",
+				description: "Space between the label and the mark"
+			}
+		]
+	},
 	{
 		title: "Typography",
 		tier: "semantic",