@nubisco/ui 5.4.1 → 5.6.0

package/dist/Select-CB4BSCaj.js

@@ -0,0 +1,405 @@
+import { t as e } from "./Icon-rREAqsu0.js";
+import { t } from "./Label-glcQoGCr.js";
+import { t as n } from "./Message-Ciyc2nN6.js";
+import { t as r } from "./Grid-CgUyhsw4.js";
+import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ee, openBlock as _, ref as v, renderList as te, renderSlot as y, toDisplayString as b, unref as x, useId as S, vModelText as ne, watch as re, withCtx as C, withDirectives as ie, withKeys as ae, withModifiers as w } from "vue";
+import { regular as T } from "@nubisco/ui/icons/caret-down";
+import { regular as E } from "@nubisco/ui/icons/caret-up";
+//#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
+var oe = [
+	"id",
+	"aria-expanded",
+	"aria-disabled",
+	"aria-required",
+	"disabled"
+], se = [
+	"id",
+	"aria-expanded",
+	"aria-disabled",
+	"aria-required",
+	"disabled"
+], ce = {
+	key: 1,
+	class: "nb-select__inner-label"
+}, le = {
+	key: 0,
+	class: "nb-select__asterisk",
+	"aria-hidden": "true"
+}, ue = ["aria-multiselectable"], de = [
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], fe = {
+	key: 0,
+	class: "nb-select__option-check",
+	"aria-hidden": "true"
+}, pe = {
+	key: 0,
+	viewBox: "0 0 10 8",
+	fill: "none",
+	width: "10",
+	height: "8"
+}, me = { class: "nb-select__option-label" }, D = {
+	key: 0,
+	class: "nb-select__empty"
+}, O = ["placeholder", "onKeydown"], k = /* @__PURE__ */ p({
+	__name: "Select",
+	props: {
+		modelValue: { default: null },
+		options: { default: () => [] },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		creatable: {
+			type: Boolean,
+			default: !1
+		},
+		createPlaceholder: { default: "" },
+		placeholder: { default: "Select…" },
+		name: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		id: { default: void 0 },
+		label: { default: "" },
+		error: { default: "" },
+		warning: { default: "" },
+		helper: { default: "" },
+		variant: { default: "default" },
+		size: { default: "md" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"create"
+	],
+	setup(p, { expose: k, emit: A }) {
+		let j = p, M = A, N = v("");
+		function he() {
+			let e = N.value.trim();
+			e && (M("create", e), N.value = "");
+		}
+		let P = v(!1), F = v(!1), I = v(-1), L = v(null), R = v(null), z = v(null), B = v({
+			position: "fixed",
+			top: "0px",
+			left: "0px",
+			width: "0px",
+			zIndex: "9999"
+		}), ge = `nb-select-${S()}`, V = o(() => j.id ?? ge), H = o(() => j.modelValue == null ? [] : Array.isArray(j.modelValue) ? j.modelValue : [j.modelValue]), U = o(() => {
+			if (!(j.multiple || H.value.length !== 1)) return (j.options ?? []).find((e) => e.value === H.value[0])?.icon;
+		}), W = o(() => {
+			if (H.value.length === 0) return "";
+			let e = j.options ?? [];
+			return j.multiple ? H.value.length === 1 ? e.find((e) => e.value === H.value[0])?.label ?? String(H.value[0]) : H.value.length === 2 ? H.value.map((t) => e.find((e) => e.value === t)?.label ?? String(t)).join(", ") : `${H.value.length} selected` : e.find((e) => e.value === H.value[0])?.label ?? String(H.value[0]);
+		});
+		function G(e) {
+			return H.value.includes(e);
+		}
+		function K(e) {
+			if (e.disabled) return;
+			let t;
+			if (j.multiple) {
+				let n = [...H.value], r = n.indexOf(e.value);
+				r >= 0 ? n.splice(r, 1) : n.push(e.value), t = n;
+			} else t = e.value, Y();
+			M("update:modelValue", t), M("change", t);
+		}
+		function q() {
+			if (!R.value) return;
+			let e = R.value.getBoundingClientRect(), t = z.value?.offsetHeight ?? 0, n = window.innerHeight - e.bottom, r = e.top;
+			B.value = {
+				position: "fixed",
+				top: t > 0 && n < t && r > n ? `${e.top - t}px` : `${e.bottom}px`,
+				left: `${e.left}px`,
+				width: `${e.width}px`,
+				zIndex: "9999"
+			};
+		}
+		function J() {
+			if (j.disabled) return;
+			P.value = !0, q();
+			let e = j.options ?? [];
+			I.value = H.value.length > 0 ? Math.max(0, e.findIndex((e) => e.value === H.value[0])) : -1, m(() => {
+				q(), $();
+			});
+		}
+		function Y() {
+			P.value = !1, I.value = -1;
+		}
+		function X() {
+			P.value ? Y() : J();
+		}
+		function Z(e) {
+			let t = e.target, n = L.value?.contains(t) ?? !1, r = z.value?.contains(t) ?? !1;
+			!n && !r && Y();
+		}
+		function Q() {
+			P.value && q();
+		}
+		re(P, (e) => {
+			e ? (document.addEventListener("mousedown", Z), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("mousedown", Z), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
+		}), ee(() => {
+			document.removeEventListener("mousedown", Z), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+		});
+		function _e(e) {
+			let t = j.options ?? [];
+			if (!P.value) {
+				(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), J());
+				return;
+			}
+			e.key === "Escape" ? (Y(), e.preventDefault()) : e.key === "Tab" ? Y() : e.key === "ArrowDown" ? (e.preventDefault(), I.value = Math.min(I.value + 1, t.length - 1), $()) : e.key === "ArrowUp" ? (e.preventDefault(), I.value = Math.max(I.value - 1, 0), $()) : (e.key === "Enter" || e.key === " ") && I.value >= 0 && (e.preventDefault(), K(t[I.value]));
+		}
+		function $() {
+			m(() => {
+				!z.value || I.value < 0 || z.value.querySelectorAll(".nb-select__option")[I.value]?.scrollIntoView({ block: "nearest" });
+			});
+		}
+		let ve = o(() => [
+			"nb-select",
+			`nb-select--${j.variant}`,
+			`nb-select--${j.size}`,
+			{
+				"nb-select--open": P.value,
+				"nb-select--focused": F.value && !P.value,
+				"nb-select--error": !!j.error,
+				"nb-select--warning": !j.error && !!j.warning,
+				"nb-select--multiple": j.multiple
+			}
+		]);
+		return k({
+			open: J,
+			close: Y
+		}), (o, m) => (_(), l(i, null, [u("div", {
+			ref_key: "rootRef",
+			ref: L,
+			class: h(ve.value),
+			onKeydown: _e
+		}, [p.variant === "default" ? (_(), l(i, { key: 0 }, [
+			o.$slots.label ? y(o.$slots, "label", { key: 0 }) : p.label ? (_(), s(t, {
+				key: 1,
+				for: V.value,
+				required: p.required,
+				disabled: p.disabled
+			}, {
+				default: C(() => [d(b(p.label), 1)]),
+				_: 1
+			}, 8, [
+				"for",
+				"required",
+				"disabled"
+			])) : c("", !0),
+			u("button", {
+				id: V.value,
+				ref_key: "triggerRef",
+				ref: R,
+				type: "button",
+				class: "nb-select__trigger",
+				role: "combobox",
+				"aria-expanded": P.value,
+				"aria-haspopup": "listbox",
+				"aria-disabled": p.disabled || void 0,
+				"aria-required": p.required || void 0,
+				disabled: p.disabled || void 0,
+				onClick: X,
+				onFocus: m[0] ||= (e) => F.value = !0,
+				onBlur: m[1] ||= (e) => F.value = !1
+			}, [
+				u("span", { class: h(["nb-select__value", {
+					"nb-select__value--placeholder": !W.value,
+					"nb-select__value--with-icon": !!U.value
+				}]) }, [U.value ? (_(), s(e, {
+					key: 0,
+					class: "nb-select__value-icon",
+					name: U.value,
+					size: 16
+				}, null, 8, ["name"])) : c("", !0), W.value ? y(o.$slots, "value", {
+					key: 1,
+					values: H.value
+				}, () => [d(b(W.value), 1)]) : (_(), l(i, { key: 2 }, [d(b(p.placeholder), 1)], 64))], 2),
+				p.error ? (_(), s(n, {
+					key: 0,
+					variant: "error",
+					"icon-only": !0,
+					class: "nb-select__status-icon"
+				}, {
+					default: C(() => [d(b(p.error), 1)]),
+					_: 1
+				})) : p.warning ? (_(), s(n, {
+					key: 1,
+					variant: "warning",
+					"icon-only": !0,
+					class: "nb-select__status-icon"
+				}, {
+					default: C(() => [d(b(p.warning), 1)]),
+					_: 1
+				})) : c("", !0),
+				f(r, {
+					align: "center",
+					justify: "center",
+					class: "nb-select__caret"
+				}, {
+					default: C(() => [f(e, {
+						name: P.value ? x(E) : x(T),
+						size: 16
+					}, null, 8, ["name"])]),
+					_: 1
+				})
+			], 40, oe),
+			p.error ? (_(), s(n, {
+				key: 2,
+				variant: "error",
+				class: "nb-select__message"
+			}, {
+				default: C(() => [d(b(p.error), 1)]),
+				_: 1
+			})) : p.warning ? (_(), s(n, {
+				key: 3,
+				variant: "warning",
+				class: "nb-select__message"
+			}, {
+				default: C(() => [d(b(p.warning), 1)]),
+				_: 1
+			})) : p.helper ? (_(), s(n, {
+				key: 4,
+				variant: "helper",
+				class: "nb-select__message"
+			}, {
+				default: C(() => [d(b(p.helper), 1)]),
+				_: 1
+			})) : c("", !0)
+		], 64)) : p.variant === "fluid" ? (_(), l(i, { key: 1 }, [u("button", {
+			id: V.value,
+			ref_key: "triggerRef",
+			ref: R,
+			type: "button",
+			class: "nb-select__trigger",
+			role: "combobox",
+			"aria-expanded": P.value,
+			"aria-haspopup": "listbox",
+			"aria-disabled": p.disabled || void 0,
+			"aria-required": p.required || void 0,
+			disabled: p.disabled || void 0,
+			onClick: X,
+			onFocus: m[2] ||= (e) => F.value = !0,
+			onBlur: m[3] ||= (e) => F.value = !1
+		}, [p.label || o.$slots.label ? (_(), s(r, {
+			key: 0,
+			dir: "row",
+			align: "center",
+			gap: "xs",
+			class: "nb-select__inner-header"
+		}, {
+			default: C(() => [o.$slots.label ? y(o.$slots, "label", { key: 0 }) : (_(), l("label", ce, [d(b(p.label) + " ", 1), p.required ? (_(), l("span", le, "*")) : c("", !0)])), p.helper && !p.error && !p.warning ? (_(), s(n, {
+				key: 2,
+				variant: "helper",
+				"icon-only": !0,
+				class: "nb-select__inner-message"
+			}, {
+				default: C(() => [d(b(p.helper), 1)]),
+				_: 1
+			})) : c("", !0)]),
+			_: 3
+		})) : c("", !0), f(r, {
+			dir: "row",
+			align: "end",
+			flex: "",
+			class: "nb-select__value-row"
+		}, {
+			default: C(() => [u("span", { class: h(["nb-select__value", {
+				"nb-select__value--placeholder": !W.value,
+				"nb-select__value--with-icon": !!U.value
+			}]) }, [U.value ? (_(), s(e, {
+				key: 0,
+				class: "nb-select__value-icon",
+				name: U.value,
+				size: 16
+			}, null, 8, ["name"])) : c("", !0), W.value ? y(o.$slots, "value", {
+				key: 1,
+				values: H.value
+			}, () => [d(b(W.value), 1)]) : (_(), l(i, { key: 2 }, [d(b(p.placeholder), 1)], 64))], 2), f(r, {
+				align: "center",
+				justify: "center",
+				class: "nb-select__caret"
+			}, {
+				default: C(() => [f(e, {
+					name: P.value ? x(E) : x(T),
+					size: 16
+				}, null, 8, ["name"])]),
+				_: 1
+			})]),
+			_: 3
+		})], 40, se), p.error ? (_(), s(n, {
+			key: 0,
+			variant: "error",
+			class: "nb-select__fluid-message"
+		}, {
+			default: C(() => [d(b(p.error), 1)]),
+			_: 1
+		})) : p.warning ? (_(), s(n, {
+			key: 1,
+			variant: "warning",
+			class: "nb-select__fluid-message"
+		}, {
+			default: C(() => [d(b(p.warning), 1)]),
+			_: 1
+		})) : c("", !0)], 64)) : c("", !0)], 34), (_(), s(a, { to: "body" }, [P.value ? (_(), l("div", {
+			key: 0,
+			ref_key: "dropdownRef",
+			ref: z,
+			class: "nb-select__dropdown",
+			style: g(B.value),
+			role: "listbox",
+			"aria-multiselectable": p.multiple || void 0
+		}, [
+			(_(!0), l(i, null, te(p.options, (t, n) => (_(), l("div", {
+				key: t.value,
+				class: h(["nb-select__option", {
+					"nb-select__option--selected": G(t.value),
+					"nb-select__option--highlighted": I.value === n,
+					"nb-select__option--disabled": t.disabled
+				}]),
+				role: "option",
+				"aria-selected": G(t.value),
+				"aria-disabled": t.disabled || void 0,
+				onMouseenter: (e) => I.value = n,
+				onClick: (e) => K(t)
+			}, [
+				p.multiple ? (_(), l("span", fe, [G(t.value) ? (_(), l("svg", pe, [...m[7] ||= [u("path", {
+					d: "M1 4l3 3 5-6",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, null, -1)]])) : c("", !0)])) : c("", !0),
+				t.icon ? (_(), s(e, {
+					key: 1,
+					class: "nb-select__option-icon",
+					name: t.icon,
+					size: 16
+				}, null, 8, ["name"])) : c("", !0),
+				u("span", me, [y(o.$slots, "option", { option: t }, () => [d(b(t.label), 1)])])
+			], 42, de))), 128)),
+			!p.options || p.options.length === 0 ? (_(), l("div", D, " No options ")) : c("", !0),
+			p.creatable ? (_(), l("div", {
+				key: 1,
+				class: "nb-select__create",
+				onMousedown: m[6] ||= w(() => {}, ["prevent"])
+			}, [ie(u("input", {
+				"onUpdate:modelValue": m[4] ||= (e) => N.value = e,
+				type: "text",
+				class: "nb-select__create-input",
+				placeholder: p.createPlaceholder || "Add new…",
+				onKeydown: [ae(w(he, ["prevent"]), ["enter"]), m[5] ||= w(() => {}, ["stop"])]
+			}, null, 40, O), [[ne, N.value]])], 32)) : c("", !0)
+		], 12, ue)) : c("", !0)]))], 64));
+	}
+});
+//#endregion
+export { k as t };

package/dist/Submenu-QgPVi2bN.cjs

@@ -0,0 +1 @@
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./Icon-C8R_r_In.cjs`);let t=require(`vue`),n=require(`@nubisco/ui/icons/caret-right`);var r=[`aria-expanded`,`aria-disabled`,`onKeydown`],i={class:`nb-menu-item__label`},a=(0,t.defineComponent)({__name:`Submenu`,props:{icon:{default:void 0},label:{},disabled:{type:Boolean,default:!1}},setup(a){let o=a,s=(0,t.ref)(null),c=(0,t.ref)(null),l=(0,t.ref)(!1),u=(0,t.inject)(`nb-menu`,null),d=null,f=null,p=(0,t.computed)(()=>`nb-menu--${u?.size??`md`}`),m=(0,t.ref)({position:`fixed`,top:`0px`,left:`0px`,zIndex:`var(--nb-zindex-menu)`});function h(){if(!s.value)return;let e=s.value.getBoundingClientRect(),t=e.right,n=e.top;t+200>window.innerWidth&&(t=e.left-200),n+200>window.innerHeight&&(n=Math.max(8,window.innerHeight-200)),m.value={position:`fixed`,top:`${n}px`,left:`${t}px`,zIndex:`var(--nb-zindex-menu)`}}function g(){o.disabled||(S(),l.value=!0,h(),(0,t.nextTick)(()=>{if(c.value&&s.value){let e=s.value.getBoundingClientRect(),t=c.value.getBoundingClientRect(),n=e.right;n+t.width>window.innerWidth&&(n=e.left-t.width);let r=e.top;r+t.height>window.innerHeight&&(r=Math.max(8,window.innerHeight-t.height)),m.value={position:`fixed`,top:`${r}px`,left:`${n}px`,zIndex:`var(--nb-zindex-menu)`}}}))}function _(){if(S(),!l.value)return;let e=!!c.value?.contains(document.activeElement);l.value=!1,e&&s.value?.focus()}function v(){return c.value?Array.from(c.value.querySelectorAll(`[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]`)):[]}function y(e,t){let n=v();for(let r=e;r>=0&&r<n.length;r+=t)if(n[r].getAttribute(`aria-disabled`)!==`true`){n[r].focus();return}}function b(){o.disabled||(g(),(0,t.nextTick)(()=>y(0,1)))}function x(e){let t=v().indexOf(document.activeElement);e.key===`ArrowDown`?(e.preventDefault(),e.stopPropagation(),y(t+1,1)):e.key===`ArrowUp`?(e.preventDefault(),e.stopPropagation(),t>0&&y(t-1,-1)):e.key===`ArrowLeft`||e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),_()):e.key===`Tab`&&(_(),u?.close())}(0,t.watch)(c,(e,t)=>{t&&u?.unregisterSurface(t),e&&u?.registerSurface(e)});function S(){d&&=(clearTimeout(d),null),f&&=(clearTimeout(f),null)}function C(){S(),d=setTimeout(g,150)}function w(){S(),f=setTimeout(_,150)}function T(){S()}function E(){S(),f=setTimeout(_,150)}function D(){o.disabled||(l.value?_():g())}return(0,t.onBeforeUnmount)(()=>{S(),c.value&&u?.unregisterSurface(c.value)}),(o,u)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[(0,t.createElementVNode)(`li`,{ref_key:`triggerRef`,ref:s,class:(0,t.normalizeClass)([`nb-menu-item nb-submenu-trigger`,{"nb-menu-item--disabled":a.disabled,"nb-menu-item--highlighted":l.value}]),role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":l.value,"aria-disabled":a.disabled||void 0,tabindex:-1,onMouseenter:C,onMouseleave:w,onKeydown:[(0,t.withKeys)((0,t.withModifiers)(b,[`prevent`]),[`right`]),(0,t.withKeys)((0,t.withModifiers)(b,[`prevent`]),[`enter`]),(0,t.withKeys)((0,t.withModifiers)(b,[`prevent`]),[`space`]),(0,t.withKeys)((0,t.withModifiers)(_,[`prevent`]),[`left`]),(0,t.withKeys)((0,t.withModifiers)(_,[`prevent`]),[`escape`])],onClick:D},[a.icon?((0,t.openBlock)(),(0,t.createBlock)(e.t,{key:0,name:a.icon,size:16,class:`nb-menu-item__icon`},null,8,[`name`])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,i,(0,t.toDisplayString)(a.label),1),(0,t.createVNode)(e.t,{name:(0,t.unref)(n.regular),size:14,class:`nb-submenu-trigger__caret`},null,8,[`name`])],42,r),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.createVNode)(t.Transition,{name:`nb-submenu`},{default:(0,t.withCtx)(()=>[l.value?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,ref_key:`submenuRef`,ref:c,role:`menu`,class:(0,t.normalizeClass)([`nb-menu nb-submenu`,[p.value]]),style:(0,t.normalizeStyle)(m.value),onMouseenter:T,onMouseleave:E,onKeydown:x},[(0,t.renderSlot)(o.$slots,`default`)],38)):(0,t.createCommentVNode)(``,!0)]),_:3})]))],64))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/dist/Submenu-SQTJc81U.js

@@ -0,0 +1,148 @@
+import { t as e } from "./Icon-rREAqsu0.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, inject as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, unref as b, watch as x, withCtx as S, withKeys as C, withModifiers as w } from "vue";
+import { regular as T } from "@nubisco/ui/icons/caret-right";
+//#region src/components/Submenu.vue?vue&type=script&setup=true&lang.ts
+var E = [
+	"aria-expanded",
+	"aria-disabled",
+	"onKeydown"
+], D = { class: "nb-menu-item__label" }, O = /* @__PURE__ */ u({
+	__name: "Submenu",
+	props: {
+		icon: { default: void 0 },
+		label: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(u) {
+		let O = u, k = _(null), A = _(null), j = _(!1), M = d("nb-menu", null), N = null, P = null, F = i(() => `nb-menu--${M?.size ?? "md"}`), I = _({
+			position: "fixed",
+			top: "0px",
+			left: "0px",
+			zIndex: "var(--nb-zindex-menu)"
+		});
+		function L() {
+			if (!k.value) return;
+			let e = k.value.getBoundingClientRect(), t = e.right, n = e.top;
+			t + 200 > window.innerWidth && (t = e.left - 200), n + 200 > window.innerHeight && (n = Math.max(8, window.innerHeight - 200)), I.value = {
+				position: "fixed",
+				top: `${n}px`,
+				left: `${t}px`,
+				zIndex: "var(--nb-zindex-menu)"
+			};
+		}
+		function R() {
+			O.disabled || (W(), j.value = !0, L(), f(() => {
+				if (A.value && k.value) {
+					let e = k.value.getBoundingClientRect(), t = A.value.getBoundingClientRect(), n = e.right;
+					n + t.width > window.innerWidth && (n = e.left - t.width);
+					let r = e.top;
+					r + t.height > window.innerHeight && (r = Math.max(8, window.innerHeight - t.height)), I.value = {
+						position: "fixed",
+						top: `${r}px`,
+						left: `${n}px`,
+						zIndex: "var(--nb-zindex-menu)"
+					};
+				}
+			}));
+		}
+		function z() {
+			if (W(), !j.value) return;
+			let e = !!A.value?.contains(document.activeElement);
+			j.value = !1, e && k.value?.focus();
+		}
+		function B() {
+			return A.value ? Array.from(A.value.querySelectorAll("[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]")) : [];
+		}
+		function V(e, t) {
+			let n = B();
+			for (let r = e; r >= 0 && r < n.length; r += t) if (n[r].getAttribute("aria-disabled") !== "true") {
+				n[r].focus();
+				return;
+			}
+		}
+		function H() {
+			O.disabled || (R(), f(() => V(0, 1)));
+		}
+		function U(e) {
+			let t = B().indexOf(document.activeElement);
+			e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), V(t + 1, 1)) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), t > 0 && V(t - 1, -1)) : e.key === "ArrowLeft" || e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), z()) : e.key === "Tab" && (z(), M?.close());
+		}
+		x(A, (e, t) => {
+			t && M?.unregisterSurface(t), e && M?.registerSurface(e);
+		});
+		function W() {
+			N &&= (clearTimeout(N), null), P &&= (clearTimeout(P), null);
+		}
+		function G() {
+			W(), N = setTimeout(R, 150);
+		}
+		function K() {
+			W(), P = setTimeout(z, 150);
+		}
+		function q() {
+			W();
+		}
+		function J() {
+			W(), P = setTimeout(z, 150);
+		}
+		function Y() {
+			O.disabled || (j.value ? z() : R());
+		}
+		return h(() => {
+			W(), A.value && M?.unregisterSurface(A.value);
+		}), (i, d) => (g(), s(t, null, [c("li", {
+			ref_key: "triggerRef",
+			ref: k,
+			class: p(["nb-menu-item nb-submenu-trigger", {
+				"nb-menu-item--disabled": u.disabled,
+				"nb-menu-item--highlighted": j.value
+			}]),
+			role: "menuitem",
+			"aria-haspopup": "menu",
+			"aria-expanded": j.value,
+			"aria-disabled": u.disabled || void 0,
+			tabindex: -1,
+			onMouseenter: G,
+			onMouseleave: K,
+			onKeydown: [
+				C(w(H, ["prevent"]), ["right"]),
+				C(w(H, ["prevent"]), ["enter"]),
+				C(w(H, ["prevent"]), ["space"]),
+				C(w(z, ["prevent"]), ["left"]),
+				C(w(z, ["prevent"]), ["escape"])
+			],
+			onClick: Y
+		}, [
+			u.icon ? (g(), a(e, {
+				key: 0,
+				name: u.icon,
+				size: 16,
+				class: "nb-menu-item__icon"
+			}, null, 8, ["name"])) : o("", !0),
+			c("span", D, y(u.label), 1),
+			l(e, {
+				name: b(T),
+				size: 14,
+				class: "nb-submenu-trigger__caret"
+			}, null, 8, ["name"])
+		], 42, E), (g(), a(n, { to: "body" }, [l(r, { name: "nb-submenu" }, {
+			default: S(() => [j.value ? (g(), s("ul", {
+				key: 0,
+				ref_key: "submenuRef",
+				ref: A,
+				role: "menu",
+				class: p(["nb-menu nb-submenu", [F.value]]),
+				style: m(I.value),
+				onMouseenter: q,
+				onMouseleave: J,
+				onKeydown: U
+			}, [v(i.$slots, "default")], 38)) : o("", !0)]),
+			_: 3
+		})]))], 64));
+	}
+});
+//#endregion
+export { O as t };

package/dist/TableOfContents-BD-79w4n.cjs

@@ -0,0 +1 @@
+const e=require(`./chunk-D-qHiVGv.cjs`),t=require(`./composables/useReducedMotion.composable.cjs`),n=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),r=require(`./composables/useStableId.composable.cjs`),i=require(`./composables/useSurfaceLayer.composable.cjs`),a=require(`./Button-D-XSNjSL.cjs`);let o=require(`vue`),s=require(`@nubisco/ui/icons/caret-right`);s=e.n(s);let c=require(`@nubisco/ui/icons/list-dashes`);c=e.n(c);var l=[`href`,`aria-current`,`data-id`,`onClick`],u=(0,o.defineComponent)({name:`TableOfContentsList`,__name:`TableOfContentsList`,props:{nodes:{},active:{},nested:{type:Boolean}},emits:[`go`],setup(e,{emit:t}){let n=t;function r(e,t){e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button===0&&(e.preventDefault(),n(`go`,t))}return(t,i)=>{let a=(0,o.resolveComponent)(`TableOfContentsList`,!0);return(0,o.openBlock)(),(0,o.createElementBlock)(`ol`,{class:(0,o.normalizeClass)([`nb-toc-list`,{"nb-toc-list--nested":e.nested}])},[((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(e.nodes,t=>((0,o.openBlock)(),(0,o.createElementBlock)(`li`,{key:t.id,class:`nb-toc-list__item`},[(0,o.createElementVNode)(`a`,{class:(0,o.normalizeClass)([`nb-toc-list__link`,{"nb-toc-list__link--active":t.id===e.active}]),href:`#${t.id}`,"aria-current":t.id===e.active?`location`:void 0,"data-id":t.id,onClick:e=>r(e,t)},(0,o.toDisplayString)(t.label),11,l),t.children.length>0?((0,o.openBlock)(),(0,o.createBlock)(a,{key:0,nodes:t.children,active:e.active,nested:``,onGo:i[0]||=e=>n(`go`,e)},null,8,[`nodes`,`active`])):(0,o.createCommentVNode)(``,!0)]))),128))],2)}}}),d=n.t(u,[[`__scopeId`,`data-v-d0f98dc3`]]),f=[`aria-label`],p={class:`nb-toc__head`},m={class:`nb-toc__title`},h=(0,o.defineComponent)({__name:`TableOfContents`,props:{items:{},active:{default:void 0},open:{type:Boolean,default:void 0},variant:{default:`docked`},collapsible:{type:Boolean,default:!0},title:{default:`Contents`},label:{default:`Table of contents`},showLabel:{default:`Show contents`},hideLabel:{default:`Hide contents`},root:{default:null},resolveTarget:{type:Function,default:void 0},spy:{type:Boolean,default:!0},offset:{default:96},updateHash:{type:Boolean,default:!0},followHash:{type:Boolean,default:!1}},emits:[`update:active`,`update:open`,`navigate`],setup(e,{expose:n,emit:l}){let u=e,h=l,g=`${r.useStableId({})}-nav`,_=(0,o.ref)(null),v=(0,o.ref)(null),{layerProps:y}=i.useSurfaceLayer({overlay:!0}),b=(0,o.computed)(()=>u.variant===`floating`?y.value:{}),x=(0,o.ref)(u.variant!==`floating`),S=(0,o.computed)(()=>u.open??x.value),C=(0,o.computed)(()=>u.variant===`floating`||u.collapsible);function w(e){!e&&!C.value||(x.value=e,h(`update:open`,e),e||(0,o.nextTick)(()=>T()))}function T(){(v.value?.$el)?.focus()}function E(e){u.variant!==`floating`||!S.value||(e.stopPropagation(),w(!1))}(0,o.watch)(()=>u.variant,e=>{x.value=e!==`floating`});let D=(0,o.computed)(()=>{let e=[],t=[];for(let n of u.items){let r={...n,children:[]};for(;t.length>0&&t[t.length-1].level>=n.level;)t.pop();t.length===0?e.push(r):t[t.length-1].children.push(r),t.push(r)}return e}),O=(0,o.ref)(null),k=(0,o.computed)(()=>u.active===void 0?O.value:u.active);function A(e){e!==k.value&&(O.value=e,h(`update:active`,e))}function j(e,t){return u.resolveTarget?u.resolveTarget(e,t):u.root?u.root.querySelector(`[id="${e.id.replace(/(["\\])/g,`\\$1`)}"]`):typeof document>`u`?null:document.getElementById(e.id)}function M(e){let t=e?.parentElement??null;for(;t;){let{overflowY:e}=getComputedStyle(t);if(e===`auto`||e===`scroll`)return t;t=t.parentElement}return window}function N(e,t,n,r){if(n){for(let t=e.length-1;t>=0;t--)if(e[t]<r)return t}let i=-1;for(let n=0;n<e.length&&e[n]<=t;n++)i=n;return i}let P=null,F=null,I=0;function L(){if(F=null,!u.spy||typeof window>`u`||Date.now()<I)return;let e=u.items.map((e,t)=>({item:e,el:j(e,t)})).filter(e=>!!e.el);if(e.length===0){A(null);return}let t=P??window,n=0,r=window.innerHeight,i=window.scrollY,a=document.documentElement.scrollHeight;if(t!==window){let e=t;n=e.getBoundingClientRect().top,r=e.clientHeight,i=e.scrollTop,a=e.scrollHeight}let o=a>r&&i+r>=a-2,s=N(e.map(({el:e})=>e.getBoundingClientRect().top-n),u.offset,o,r);A(s>=0?e[s].item.id:null)}function R(){F===null&&(F=typeof requestAnimationFrame==`function`?requestAnimationFrame(L):setTimeout(L,16))}function z(){B(),!(!u.spy||typeof window>`u`)&&(P=M(u.items.map((e,t)=>j(e,t)).find(Boolean)??u.root??_.value),P.addEventListener(`scroll`,R,{passive:!0}),window.addEventListener(`resize`,R,{passive:!0}),R())}function B(){P?.removeEventListener(`scroll`,R),typeof window<`u`&&window.removeEventListener(`resize`,R),P=null}function V(e,n={}){let r=typeof e==`string`?e:e.id,i=u.items.findIndex(e=>e.id===r);if(i<0)return;let a=u.items[i],o=j(a,i);if(!o)return;let s=n.instant||t.prefersReducedMotion();if(o.scrollIntoView?.({behavior:s?`auto`:`smooth`,block:`start`}),A(r),I=s?0:Date.now()+700,u.updateHash)try{let{pathname:e,search:t}=window.location;window.history.replaceState(window.history.state,``,`${e}${t}#${r}`)}catch{}o.closest(`[contenteditable="true"]`)||(o.hasAttribute(`tabindex`)||o.setAttribute(`tabindex`,`-1`),o.focus({preventScroll:!0})),u.variant===`floating`&&(x.value=!1,h(`update:open`,!1)),h(`navigate`,a)}let H=!1;function U(){if(!u.followHash||H||typeof window>`u`)return;let e=decodeURIComponent(window.location.hash.slice(1));if(!e){H=!0;return}let t=u.items.findIndex(t=>t.id===e);t<0||!j(u.items[t],t)||(H=!0,V(e,{instant:!0}))}return(0,o.watch)(()=>u.items,()=>void(0,o.nextTick)(()=>{z(),U()}),{flush:`post`,deep:!0}),(0,o.watch)(()=>[u.root,u.spy],()=>void(0,o.nextTick)(z),{flush:`post`}),(0,o.onMounted)(()=>{z(),(0,o.nextTick)(U)}),(0,o.onBeforeUnmount)(()=>{B(),F!==null&&(typeof cancelAnimationFrame==`function`&&cancelAnimationFrame(F),clearTimeout(F))}),n({go:V,measure:L}),(t,n)=>((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{ref_key:`rootEl`,ref:_,class:(0,o.normalizeClass)([`nb-toc`,`nb-toc--${e.variant}`,{"nb-toc--open":S.value}]),onKeydown:(0,o.withKeys)(E,[`esc`])},[S.value?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,(0,o.mergeProps)({key:1,class:`nb-toc__body`},b.value),[(0,o.createElementVNode)(`nav`,{id:g,class:`nb-toc__nav`,"aria-label":e.label},[(0,o.createElementVNode)(`div`,p,[(0,o.createElementVNode)(`span`,m,(0,o.toDisplayString)(e.title),1),C.value?((0,o.openBlock)(),(0,o.createBlock)(a.t,{key:0,size:`xs`,variant:`ghost`,icon:s,"aria-label":e.hideLabel,title:e.hideLabel,"aria-expanded":!0,"aria-controls":g,onClick:n[1]||=e=>w(!1)},null,8,[`aria-label`,`title`])):(0,o.createCommentVNode)(``,!0)]),(0,o.createVNode)(d,{nodes:D.value,active:k.value,onGo:V},null,8,[`nodes`,`active`])],8,f)],16)):((0,o.openBlock)(),(0,o.createBlock)(a.t,{key:0,ref_key:`showButton`,ref:v,size:`sm`,variant:`ghost`,icon:c,class:`nb-toc__show`,"aria-label":e.showLabel,title:e.showLabel,"aria-expanded":!1,"aria-controls":g,onClick:n[0]||=e=>w(!0)},null,8,[`aria-label`,`title`]))],34))}}),g=n.t(h,[[`__scopeId`,`data-v-cb6a1ca7`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});