@nkootstra/block-kit 0.3.5 → 0.4.0

package/dist/index.js

@@ -50,12 +50,12 @@ function toViewOutput(view, state, identity) {
 		bot_id: "B00000000",
 		callback_id: view.callback_id ?? "",
 		type: view.type,
-		title: view.title ?? null,
-		close: view.close ?? null,
-		submit: view.submit ?? null,
-		blocks: view.blocks,
+		title: normalizeText(view.title ?? null),
+		close: normalizeText(view.close ?? null),
+		submit: normalizeText(view.submit ?? null),
+		blocks: normalizeBlocks(view.blocks),
 		private_metadata: view.private_metadata ?? "",
-		state: { values: state },
+		state: { values: normalizeState(state) },
 		hash: view.hash ?? "0.0000000000",
 		clear_on_close: view.clear_on_close ?? false,
 		notify_on_close: view.notify_on_close ?? false,
@@ -112,6 +112,35 @@ function normalizeEchoes(entry) {
 function normalizeState(state) {
 	return Object.fromEntries(Object.entries(state).map(([blockId, elements]) => [blockId, Object.fromEntries(Object.entries(elements).map(([actionId, value]) => [actionId, normalizeEchoes(value)]))]));
 }
+/**
+* Blocks as Slack echoes a stored view: every text object normalized like {@link normalizeText},
+* and an input block's `optional` and `dispatch_action` filled in as `false`.
+*/
+function normalizeBlocks(blocks) {
+	return normalizeBlockNode(blocks);
+}
+function normalizeBlockNode(node) {
+	if (Array.isArray(node)) return node.map(normalizeBlockNode);
+	if (typeof node !== "object" || node === null) return node;
+	const object = node;
+	if ((object.type === "plain_text" || object.type === "mrkdwn") && typeof object.text === "string") return normalizeText(object);
+	const out = Object.fromEntries(Object.entries(object).map(([key, value]) => [key, normalizeBlockNode(value)]));
+	if (object.type === "input") {
+		out.optional ??= false;
+		out.dispatch_action ??= false;
+	}
+	return out;
+}
+/** `enterprise` and `is_enterprise_install`, as every interaction payload carries them. */
+function enterpriseFields(id) {
+	return {
+		enterprise: id.team?.enterprise_id ? {
+			id: id.team.enterprise_id,
+			name: id.team.enterprise_name ?? ""
+		} : null,
+		is_enterprise_install: id.isEnterpriseInstall
+	};
+}
 function buildBlockActionsPayload({ action, state, container, identity }) {
 	const id = resolveIdentity(identity);
 	state = normalizeState(state);
@@ -119,11 +148,7 @@ function buildBlockActionsPayload({ action, state, container, identity }) {
 		type: "block_actions",
 		actions: [normalizeEchoes(action)],
 		team: id.team,
-		enterprise: id.team?.enterprise_id ? {
-			id: id.team.enterprise_id,
-			name: id.team.enterprise_name ?? ""
-		} : null,
-		is_enterprise_install: id.isEnterpriseInstall,
+		...enterpriseFields(id),
 		user: id.user,
 		token: id.token,
 		response_url: id.responseUrl,
@@ -163,6 +188,7 @@ function buildViewSubmissionPayload({ view, state, identity, responseUrls }) {
 	return {
 		type: "view_submission",
 		team: id.team,
+		...enterpriseFields(id),
 		user: {
 			id: id.user.id,
 			name: id.user.name ?? id.user.username ?? "",
@@ -181,6 +207,7 @@ function buildViewClosedPayload({ view, state, identity, isCleared }) {
 	return {
 		type: "view_closed",
 		team: id.team,
+		...enterpriseFields(id),
 		user: {
 			id: id.user.id,
 			name: id.user.name ?? id.user.username ?? "",
@@ -203,7 +230,8 @@ function buildBlockSuggestionPayload({ actionId, blockId, value, container, stat
 		action_id: actionId,
 		block_id: blockId,
 		value,
-		team: id.team
+		team: id.team,
+		...enterpriseFields(id)
 	};
 	if (container.type === "message") return {
 		...base,
@@ -1040,10 +1068,10 @@ function BlockKitProvider(props) {
 		containerRef.current = container;
 	}, []);
 	const dispatch = useCallback((action, scope) => {
-		const full = {
+		const full = normalizeEchoes({
 			...action,
 			action_ts: action.action_ts ?? actionTs()
-		};
+		});
 		const message = scope?.message;
 		onAction?.(full, {
 			state: stateRef.current,
@@ -5982,33 +6010,89 @@ function Text({ text, emojiSize = 22 }) {
 }
 //#endregion
 //#region src/confirm/ConfirmDialog.tsx
-/** Slack's confirmation dialog: blocks the triggering action until the user picks confirm/deny. */
+/**
+* Slack's confirmation dialog (`c-dialog`): blocks the triggering action until the user confirms or
+* denies. Escape, the close button and a click on the overlay all deny.
+*
+* Slack marks it `role="dialog"`; this keeps `alertdialog`, the role WAI-ARIA gives a dialog that
+* interrupts to ask for a confirmation, so screen readers announce its text on open. Focus starts
+* on the deny button, the least destructive choice, stays inside while it's open, and goes back to
+* whatever opened it when it closes.
+*/
 function ConfirmDialog({ confirm, onConfirm, onDeny }) {
 	const { theme } = useBlockKit();
 	const confirmStyle = confirm.style ?? "primary";
+	const titleId = useId();
+	const textId = useId();
+	const dialogRef = useRef(null);
+	const denyRef = useRef(null);
+	useEffect(() => {
+		const opener = document.activeElement;
+		denyRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
+	}, []);
+	function onKeyDown(event) {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onDeny();
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const buttons = [...dialogRef.current?.querySelectorAll("button") ?? []];
+		const first = buttons[0];
+		const last = buttons.at(-1);
+		if (event.shiftKey && document.activeElement === first) {
+			event.preventDefault();
+			last?.focus();
+		} else if (!event.shiftKey && document.activeElement === last) {
+			event.preventDefault();
+			first?.focus();
+		}
+	}
 	const node = /* @__PURE__ */ jsx("div", {
 		className: "sbk-confirm__overlay",
 		role: "presentation",
 		"data-theme": theme,
 		onClick: onDeny,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
 			className: "sbk-confirm",
 			role: "alertdialog",
 			"aria-modal": "true",
-			"aria-label": confirm.title?.text,
+			"aria-labelledby": confirm.title ? titleId : void 0,
+			"aria-label": confirm.title ? void 0 : confirm.confirm?.text ?? "Confirm",
+			"aria-describedby": textId,
+			onKeyDown,
 			onClick: (event) => event.stopPropagation(),
 			children: [
-				confirm.title && /* @__PURE__ */ jsx("h2", {
-					className: "sbk-confirm__title",
-					children: confirm.title.text
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-confirm__header",
+					children: [confirm.title && /* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "sbk-confirm__title",
+						children: confirm.title.text
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-confirm__close",
+						"aria-label": "Close",
+						onClick: onDeny,
+						children: /* @__PURE__ */ jsx(CloseIcon, {
+							width: "20",
+							height: "20"
+						})
+					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
+					id: textId,
 					className: "sbk-confirm__text",
 					children: /* @__PURE__ */ jsx(Text, { text: confirm.text })
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "sbk-confirm__actions",
 					children: [/* @__PURE__ */ jsx("button", {
+						ref: denyRef,
 						type: "button",
 						className: "sbk-confirm__button sbk-confirm__button--deny",
 						onClick: onDeny,
@@ -6181,31 +6265,107 @@ function todayISO() {
 	const now = /* @__PURE__ */ new Date();
 	return toISO(now.getFullYear(), now.getMonth(), now.getDate());
 }
-function Caret({ direction }) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 20 20",
-		width: "20",
-		height: "20",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			fillRule: "evenodd",
-			d: direction === "left" ? "M12.28 5.22a.75.75 0 0 1 0 1.06L8.56 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0" : "M7.72 14.78a.75.75 0 0 1 0-1.06L11.44 10 7.72 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0",
-			clipRule: "evenodd"
+/** Slack's calendar header icons, 20×20. */
+const NAV_PATHS = {
+	"previous-year": "M11.03 2.78a.75.75 0 1 0-1.06-1.06L2.22 9.47a.75.75 0 0 0 0 1.06l7.75 7.75a.75.75 0 1 0 1.06-1.06L3.81 10zm6.25 0a.75.75 0 0 0-1.06-1.06L8.47 9.47a.75.75 0 0 0 0 1.06l7.75 7.75a.75.75 0 1 0 1.06-1.06L10.06 10z",
+	"previous-month": "M14.53 1.72a.75.75 0 0 1 0 1.06L7.31 10l7.22 7.22a.75.75 0 1 1-1.06 1.06l-7.75-7.75a.75.75 0 0 1 0-1.06l7.75-7.75a.75.75 0 0 1 1.06 0",
+	"next-month": "M5.72 1.72a.75.75 0 0 1 1.06 0l7.75 7.75a.75.75 0 0 1 0 1.06l-7.75 7.75a.75.75 0 0 1-1.06-1.06L12.94 10 5.72 2.78a.75.75 0 0 1 0-1.06",
+	"next-year": "M3.78 1.72a.75.75 0 0 0-1.06 1.06L9.94 10l-7.22 7.22a.75.75 0 1 0 1.06 1.06l7.75-7.75a.75.75 0 0 0 0-1.06zm6.25 0a.75.75 0 1 0-1.06 1.06L16.19 10l-7.22 7.22a.75.75 0 1 0 1.06 1.06l7.75-7.75a.75.75 0 0 0 0-1.06z"
+};
+/** A header button that moves the calendar by `months`. */
+function NavButton({ icon, label, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "sbk-calendar__nav",
+		onClick,
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 20 20",
+			width: "20",
+			height: "20",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: NAV_PATHS[icon]
+			})
 		})
 	});
 }
+/** The day `delta` days after the `YYYY-MM-DD` date, as `YYYY-MM-DD`. */
+function addDays(iso, delta) {
+	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
+	d.setUTCDate(d.getUTCDate() + delta);
+	return toISO(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+}
+/** Days the arrow keys move the focused day: a day sideways, a week up or down. */
+const ARROW_DAYS = {
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -7,
+	ArrowDown: 7
+};
 /** A month grid matching Slack's `c-date_picker_calendar`: a bordered 7-column grid of 44×42
-* day cells, a ring around today, and solid blue for the selected day. */
+* day cells, a ring around today, and solid blue for the selected day. The grid is one tab stop:
+* the focused day (the selected one, else today, else the 1st) takes Tab, and the arrow keys move
+* it a day or a week, turning the month when they cross its edge. */
 function Calendar({ value, onSelect, onClear }) {
 	const initial = value ? /* @__PURE__ */ new Date(`${value}T00:00:00Z`) : /* @__PURE__ */ new Date();
 	const [year, setYear] = useState(initial.getUTCFullYear());
 	const [month, setMonth] = useState(initial.getUTCMonth());
+	const [focused, setFocused] = useState(() => {
+		if (value) return value;
+		const today = todayISO();
+		return today.startsWith(toISO(year, month, 1).slice(0, 7)) ? today : toISO(year, month, 1);
+	});
+	const gridRef = useRef(null);
+	const [keyboard, setKeyboard] = useState(false);
+	const moveFocus = useRef(false);
+	useEffect(() => {
+		if (!moveFocus.current) return;
+		moveFocus.current = false;
+		gridRef.current?.querySelector(`[data-date="${focused}"]`)?.focus();
+	}, [
+		focused,
+		year,
+		month
+	]);
+	function onGridKeyDown(e) {
+		const delta = ARROW_DAYS[e.key];
+		if (delta === void 0) return;
+		e.preventDefault();
+		setKeyboard(true);
+		const next = addDays(focused, delta);
+		const [y = year, m = month + 1] = next.split("-").map(Number);
+		moveFocus.current = true;
+		setFocused(next);
+		if (y !== year || m - 1 !== month) {
+			setYear(y);
+			setMonth(m - 1);
+		}
+	}
+	const shown = toISO(year, month, 1).slice(0, 7);
+	const tabStop = focused.startsWith(shown) ? focused : toISO(year, month, 1);
 	const first = new Date(Date.UTC(year, month, 1));
 	const startWeekday = first.getUTCDay();
 	const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
 	const cells = [...Array(startWeekday).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
 	const today = todayISO();
+	const lastRow = Math.floor((startWeekday + daysInMonth - 1) / 7);
+	const lastRowFull = (startWeekday + daysInMonth) % 7 === 0;
+	/** The grid's outer corners a day sits on, which Slack rounds. */
+	function corners(day) {
+		const at = startWeekday + day - 1;
+		const row = Math.floor(at / 7);
+		const col = at % 7;
+		const out = [];
+		if (day === 1 || row === 1 && col === 0) out.push("top-left");
+		if (row === 0 && col === 6) out.push("top-right");
+		if (row === lastRow && col === 0) out.push("bottom-left");
+		if (day === daysInMonth || !lastRowFull && row === lastRow - 1 && col === 6) out.push("bottom-right");
+		return out;
+	}
 	function go(delta) {
 		const d = new Date(Date.UTC(year, month + delta, 1));
 		setYear(d.getUTCFullYear());
@@ -6216,50 +6376,59 @@ function Calendar({ value, onSelect, onClear }) {
 		year: "numeric",
 		timeZone: "UTC"
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "sbk-calendar",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "sbk-calendar__header",
 				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "sbk-calendar__nav",
-						onClick: () => go(-1),
-						"aria-label": "Previous month",
-						children: /* @__PURE__ */ jsx(Caret, { direction: "left" })
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "previous-year",
+						label: "Previous year",
+						onClick: () => go(-12)
+					}),
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "previous-month",
+						label: "Previous month",
+						onClick: () => go(-1)
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "sbk-calendar__label",
 						children: monthLabel
 					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "sbk-calendar__nav",
-						onClick: () => go(1),
-						"aria-label": "Next month",
-						children: /* @__PURE__ */ jsx(Caret, { direction: "right" })
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "next-month",
+						label: "Next month",
+						onClick: () => go(1)
+					}),
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "next-year",
+						label: "Next year",
+						onClick: () => go(12)
 					})
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "sbk-calendar__weekdays",
 				children: [
-					"Sun",
-					"Mon",
-					"Tue",
-					"Wed",
-					"Thu",
-					"Fri",
-					"Sat"
+					"Su",
+					"Mo",
+					"Tu",
+					"We",
+					"Th",
+					"Fr",
+					"Sa"
 				].map((w) => /* @__PURE__ */ jsx("span", { children: w }, w))
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "sbk-calendar__grid",
+				className: `sbk-calendar__grid${keyboard ? " sbk-calendar__grid--keyboard" : ""}`,
+				ref: gridRef,
+				onKeyDown: onGridKeyDown,
+				onPointerDown: () => setKeyboard(false),
 				children: cells.map((day, i) => {
 					if (day === null) return /* @__PURE__ */ jsx("span", { className: "sbk-calendar__cell sbk-calendar__cell--empty" }, i);
 					const iso = toISO(year, month, day);
-					const classes = ["sbk-calendar__cell"];
+					const classes = ["sbk-calendar__cell", ...corners(day).map((c) => `sbk-calendar__cell--${c}`)];
 					if (iso === value) classes.push("sbk-calendar__cell--selected");
 					if (iso === today) classes.push("sbk-calendar__cell--today");
 					return /* @__PURE__ */ jsx("button", {
@@ -6267,22 +6436,24 @@ function Calendar({ value, onSelect, onClear }) {
 						className: classes.join(" "),
 						"aria-pressed": iso === value,
 						"aria-current": iso === today ? "date" : void 0,
+						"data-date": iso,
+						tabIndex: iso === tabStop ? 0 : -1,
+						onFocus: () => setFocused(iso),
 						onClick: () => onSelect(iso),
 						children: day
 					}, iso);
 				})
-			}),
-			onClear && value && /* @__PURE__ */ jsx("div", {
-				className: "sbk-calendar__footer",
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "sbk-calendar__clear",
-					onClick: onClear,
-					children: "Clear selection"
-				})
 			})
 		]
-	});
+	}), onClear && value && /* @__PURE__ */ jsx("div", {
+		className: "sbk-calendar__footer",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "sbk-calendar__clear",
+			onClick: onClear,
+			children: "Clear selection"
+		})
+	})] });
 }
 //#endregion
 //#region src/elements/dateFormat.ts
@@ -6381,6 +6552,11 @@ const InputBlockContext = createContext(false);
 function useInInputBlock() {
 	return useContext(InputBlockContext);
 }
+/** True while rendering the element of an `input` block marked `optional`, which Slack lets the user empty. */
+const InputOptionalContext = createContext(false);
+function useInOptionalInput() {
+	return useContext(InputOptionalContext);
+}
 /** The id of the error shown under an `input` block's element, while it has one. */
 const InputErrorContext = createContext(void 0);
 /**
@@ -6398,14 +6574,18 @@ function useInvalidProps() {
 //#region src/elements/Popover.tsx
 /** Space between the anchor and the popover, as in Slack's menus. */
 const DEFAULT_GAP = 4;
+/** The least space kept between a popover and the window's left and right edges. */
+const EDGE = 8;
 /**
 * The layer a menu or calendar opens in. Slack mounts its popovers at the top of the page, so a
 * message list, a modal body or a carousel never clips them; this portals to `<body>` the same way
 * and keeps the popover pinned to its anchor as the page scrolls or resizes, or its content does.
+* Where keeping its alignment would run it past the window's left or right edge (a narrow phone
+* screen), it shifts just enough to stay inside.
 * The layer is as wide as the anchor, so a child sized `width: 100%` matches the control it opened
 * from.
 */
-function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
+function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, offsetX = 0, onPlaced, children }) {
 	const { theme } = useBlockKit();
 	const layerRef = useRef(null);
 	const [position, setPosition] = useState(null);
@@ -6426,9 +6606,19 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 			const fitsAbove = above >= 0;
 			let top = !fitsBelow && fitsAbove ? above : below;
 			if (!fitsBelow && !fitsAbove) top = Math.max(gap, Math.min(below, window.innerHeight - height - gap));
+			layer.style.width = `${a.width}px`;
+			const content = layer.firstElementChild?.getBoundingClientRect();
+			const layerLeft = layer.getBoundingClientRect().left;
+			let left = a.left + offsetX;
+			if (content) {
+				const contentLeft = left + content.left - layerLeft;
+				const room = document.documentElement.clientWidth - EDGE;
+				const shift = Math.max(EDGE - contentLeft, Math.min(0, room - (contentLeft + content.width)));
+				left += shift;
+			}
 			setPosition({
 				top,
-				left: a.left,
+				left,
 				width: a.width
 			});
 		}
@@ -6443,7 +6633,18 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 			window.removeEventListener("resize", place);
 			resize?.disconnect();
 		};
-	}, [anchorRef, gap]);
+	}, [
+		anchorRef,
+		gap,
+		offsetX
+	]);
+	const placed = position !== null;
+	const notified = useRef(false);
+	useEffect(() => {
+		if (!placed || notified.current) return;
+		notified.current = true;
+		onPlaced?.();
+	}, [placed]);
 	useEffect(() => {
 		function onDocDown(e) {
 			const target = e.target;
@@ -6483,14 +6684,27 @@ function formatDate$1(date, long) {
 function DatePicker({ element, blockId }) {
 	const { setValue, dispatch } = useBlockKit();
 	const inInputBlock = useInInputBlock();
+	const clearable = useInOptionalInput();
 	const { ask, dialog } = useConfirm(element.confirm);
 	const [date, setDate] = useState(element.initial_date);
 	const [open, setOpen] = useState(false);
 	const rootRef = useRef(null);
 	const inputRef = useFocusOnLoad(element);
 	const invalid = useInvalidProps();
-	const loadFocus = useRef(element.focus_on_load === true);
+	const quietFocus = useRef(element.focus_on_load === true);
+	const focusCalendar = useRef(false);
+	const popupRef = useRef(null);
 	const actionId = element.action_id ?? "";
+	function focusDay() {
+		popupRef.current?.querySelector(".sbk-calendar__grid [tabindex='0']")?.focus();
+	}
+	function close() {
+		setOpen(false);
+		const input = inputRef.current;
+		if (!input || document.activeElement === input) return;
+		quietFocus.current = true;
+		input.focus();
+	}
 	useEffect(() => {
 		if (date) setValue(blockId, actionId, {
 			type: "datepicker",
@@ -6500,7 +6714,7 @@ function DatePicker({ element, blockId }) {
 	async function pick(next) {
 		if (!await ask()) return;
 		setDate(next);
-		setOpen(false);
+		close();
 		setValue(blockId, actionId, {
 			type: "datepicker",
 			selected_date: next
@@ -6516,7 +6730,7 @@ function DatePicker({ element, blockId }) {
 	async function clear() {
 		if (!await ask()) return;
 		setDate(void 0);
-		setOpen(false);
+		close();
 		setValue(blockId, actionId, {
 			type: "datepicker",
 			selected_date: null
@@ -6547,12 +6761,27 @@ function DatePicker({ element, blockId }) {
 						...invalid,
 						ref: inputRef,
 						onFocus: () => {
-							if (loadFocus.current) loadFocus.current = false;
+							if (quietFocus.current) quietFocus.current = false;
 							else setOpen(true);
 						},
-						onClick: () => setOpen(true),
+						onMouseDown: () => {
+							focusCalendar.current = true;
+						},
+						onClick: () => {
+							if (open) focusDay();
+							else focusCalendar.current = true;
+							setOpen(true);
+						},
 						onKeyDown: (e) => {
 							if (e.key === "Escape") setOpen(false);
+							if (e.key === "ArrowDown") {
+								e.preventDefault();
+								if (open) focusDay();
+								else {
+									focusCalendar.current = true;
+									setOpen(true);
+								}
+							}
 						}
 					}),
 					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datepicker__chevron" })
@@ -6560,13 +6789,26 @@ function DatePicker({ element, blockId }) {
 			}),
 			open && /* @__PURE__ */ jsx(Popover, {
 				anchorRef: rootRef,
+				gap: -4,
 				onDismiss: () => setOpen(false),
+				onPlaced: () => {
+					if (focusCalendar.current) focusDay();
+					focusCalendar.current = false;
+				},
 				children: /* @__PURE__ */ jsx("div", {
 					className: "sbk-datepicker__popup",
+					ref: popupRef,
+					role: "dialog",
+					"aria-label": "Choose a date",
+					onKeyDown: (e) => {
+						if (e.key !== "Escape") return;
+						e.preventDefault();
+						close();
+					},
 					children: /* @__PURE__ */ jsx(Calendar, {
 						value: date,
 						onSelect: pick,
-						onClear: clear
+						onClear: clearable ? clear : void 0
 					})
 				})
 			}),
@@ -6942,9 +7184,11 @@ function Overflow({ element, blockId }) {
 	const triggerRef = useRef(null);
 	const listRef = useRef(null);
 	const actionId = element.action_id ?? "";
+	const idPrefix = useId();
 	async function choose(option) {
 		if (!await ask()) return;
 		setOpen(false);
+		triggerRef.current?.focus();
 		dispatch({
 			type: "overflow",
 			action_id: actionId,
@@ -6985,11 +7229,15 @@ function Overflow({ element, blockId }) {
 			open && /* @__PURE__ */ jsx(Popover, {
 				anchorRef: rootRef,
 				onDismiss: () => setOpen(false),
+				onPlaced: () => listRef.current?.focus(),
 				children: /* @__PURE__ */ jsx("div", {
 					className: "sbk-overflow__menu",
 					role: "menu",
 					ref: listRef,
+					tabIndex: -1,
+					"aria-activedescendant": nav.active >= 0 ? `${idPrefix}-${nav.active}` : void 0,
 					children: element.options.map((option, i) => /* @__PURE__ */ jsx("div", {
+						id: `${idPrefix}-${i}`,
 						role: "menuitem",
 						className: "sbk-overflow__option",
 						onClick: () => choose(option),
@@ -7280,6 +7528,236 @@ function RichTextInput({ element, blockId }) {
 	});
 }
 //#endregion
+//#region src/elements/useCombobox.ts
+/**
+* The typeable trigger Slack's select and time pickers share (`c-select_input`): a text input with
+* role="combobox" that shows the chosen value while closed, and the query while its list is open.
+* Typing filters the list and highlights its first row; the arrow keys move the highlight, Enter
+* picks it, Escape and Tab close the list and put the chosen value back.
+*/
+function useCombobox({ query, onQueryChange, count, initialIndex, onChoose, onSubmitQuery, listRef, returnFocusRef, open: controlledOpen, onOpenChange }) {
+	const [ownOpen, setOwnOpen] = useState(false);
+	const open = controlledOpen ?? ownOpen;
+	const setOpenState = onOpenChange ?? setOwnOpen;
+	const inputRef = useRef(null);
+	const id = useId();
+	const listId = `${id}-list`;
+	const optionId = (index) => `${id}-option-${index}`;
+	function setOpen(next) {
+		setOpenState(next);
+		if (!next) onQueryChange("");
+	}
+	const nav = useMenuNavigation({
+		open,
+		count,
+		initialIndex,
+		onChoose,
+		onClose: () => {
+			setOpen(false);
+			(returnFocusRef ?? inputRef).current?.focus();
+		},
+		onOpen: () => setOpenState(true),
+		listRef
+	});
+	/** Keys for the input, or for a container around a button trigger and its list. */
+	function onKeyDown(e) {
+		if (e.key === "Tab") {
+			if (open) setOpen(false);
+			return;
+		}
+		if (open && e.key === "Enter" && nav.active < 0 && query.trim()) {
+			e.preventDefault();
+			onSubmitQuery?.(query.trim());
+			return;
+		}
+		nav.onKeyDown(e);
+	}
+	/** Props for the input. `display` is the chosen value, shown while the list is closed. */
+	function inputProps(display, placeholder) {
+		return {
+			ref: inputRef,
+			type: "text",
+			role: "combobox",
+			autoComplete: "off",
+			size: 1,
+			spellCheck: false,
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": open ? listId : void 0,
+			"aria-activedescendant": open && nav.active >= 0 ? optionId(nav.active) : void 0,
+			"aria-label": placeholder,
+			placeholder: open ? display ?? placeholder : placeholder,
+			value: open ? query : display ?? "",
+			onClick: () => setOpenState(true),
+			onChange: (e) => {
+				onQueryChange(e.target.value);
+				setOpenState(true);
+				nav.setActive(0);
+			},
+			onKeyDown
+		};
+	}
+	/** Props for the row at `index`, tying it to the input's aria-activedescendant. */
+	function optionProps(index) {
+		return {
+			id: optionId(index),
+			...nav.itemProps(index)
+		};
+	}
+	return {
+		open,
+		setOpen,
+		onKeyDown,
+		listId,
+		inputRef,
+		inputProps,
+		optionProps,
+		active: nav.active
+	};
+}
+//#endregion
+//#region src/elements/accessoryContext.ts
+/**
+* True for an element rendered as a section block's accessory. Slack draws some elements
+* differently there: a multi-select becomes a small button that opens a "Select options" dialog.
+*/
+const SectionAccessoryContext = createContext(false);
+//#endregion
+//#region src/elements/SelectDialog.tsx
+const optionId = (option) => option.value ?? option.text.text;
+/**
+* Slack's "Select options" dialog, which a `multi_static_select` in a section accessory opens
+* instead of an inline menu. Picks are a draft: the option list stays open while choosing, and
+* nothing is sent until Confirm. Cancel, the close button and Escape discard the draft.
+*/
+function SelectDialog({ options, initial, placeholder, onConfirm, onCancel }) {
+	const { theme } = useBlockKit();
+	const titleId = useId();
+	const [draft, setDraft] = useState(initial);
+	const [query, setQuery] = useState("");
+	const fieldRef = useRef(null);
+	const listRef = useRef(null);
+	const rows = options.filter((o) => o.text.text.toLowerCase().includes(query.toLowerCase()));
+	const chosen = (option) => draft.some((d) => optionId(d) === optionId(option));
+	const toggle = (option) => setDraft((current) => chosen(option) ? current.filter((d) => optionId(d) !== optionId(option)) : [...current, option]);
+	const combo = useCombobox({
+		query,
+		onQueryChange: setQuery,
+		count: rows.length,
+		initialIndex: 0,
+		onChoose: (i) => {
+			const option = rows[i];
+			if (option) toggle(option);
+		},
+		listRef
+	});
+	useEffect(() => {
+		combo.inputRef.current?.focus();
+	}, []);
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "sbk-root sbk-select-dialog__overlay",
+		"data-theme": theme,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sbk-select-dialog",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			onKeyDown: (e) => {
+				if (e.key !== "Escape") return;
+				e.preventDefault();
+				e.stopPropagation();
+				onCancel();
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-select-dialog__header",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "sbk-select-dialog__title",
+						id: titleId,
+						children: "Select options"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-select-dialog__close",
+						"aria-label": "Close",
+						onClick: onCancel,
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-select-dialog__body",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "sbk-select-dialog__field",
+						ref: fieldRef,
+						children: [draft.map((option) => /* @__PURE__ */ jsxs("span", {
+							className: "sbk-select__chip",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sbk-select__chip-label",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sbk-select__chip-text",
+									children: /* @__PURE__ */ jsx("span", { children: option.text.text })
+								})
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "sbk-select__chip-remove",
+								"aria-label": `Remove ${option.text.text}`,
+								onClick: () => toggle(option),
+								children: /* @__PURE__ */ jsx(CloseIcon, {})
+							})]
+						}, optionId(option))), /* @__PURE__ */ jsx("input", {
+							...combo.inputProps(void 0, placeholder),
+							placeholder: draft.length > 0 ? "" : placeholder,
+							className: "sbk-select-dialog__input"
+						})]
+					}), combo.open && /* @__PURE__ */ jsx(Popover, {
+						anchorRef: fieldRef,
+						onDismiss: () => combo.setOpen(false),
+						children: /* @__PURE__ */ jsx("div", {
+							className: "sbk-select__menu sbk-select-dialog__menu",
+							role: "listbox",
+							"aria-multiselectable": "true",
+							id: combo.listId,
+							ref: listRef,
+							children: rows.map((option, i) => /* @__PURE__ */ jsx("div", {
+								role: "option",
+								"aria-selected": chosen(option),
+								className: `sbk-select__option${chosen(option) ? " sbk-select__option--selected" : ""}`,
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => toggle(option),
+								...combo.optionProps(i),
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sbk-select__option-text",
+									children: /* @__PURE__ */ jsx(Text, { text: option.text })
+								})
+							}, optionId(option)))
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-select-dialog__footer",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-button",
+						onClick: onCancel,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sbk-button__label",
+							children: "Cancel"
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-button sbk-button--primary",
+						onClick: () => onConfirm(draft),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sbk-button__label",
+							children: "Confirm"
+						})
+					})]
+				})
+			]
+		})
+	}), document.body);
+}
+//#endregion
 //#region src/elements/Select.tsx
 function parseType(type) {
 	const multi = type.startsWith("multi_");
@@ -7349,7 +7827,6 @@ function Select({ element, blockId }) {
 	const [query, setQuery] = useState("");
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
-	useFocusOnLoad(element, triggerRef);
 	const invalid = useInvalidProps();
 	const listRef = useRef(null);
 	const remote = source === "external" && loadOptions !== void 0;
@@ -7470,28 +7947,166 @@ function Select({ element, blockId }) {
 	})) : [{ options: filteredOptions }];
 	const flatOptions = visibleGroups.flatMap((g) => g.options);
 	const isSelected = (option) => items.some((i) => i.id === (option.value ?? option.text.text));
-	const nav = useMenuNavigation({
+	const showSearchOnly = source !== "static";
+	const typeable = source === "static" && !multi;
+	const dialogMode = useContext(SectionAccessoryContext) && multi && source === "static";
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const combo = useCombobox({
 		open,
+		onOpenChange: setOpen,
+		query,
+		onQueryChange: setQuery,
 		count: flatOptions.length,
 		initialIndex: Math.max(0, flatOptions.findIndex(isSelected)),
 		onChoose: (i) => {
 			const option = flatOptions[i];
 			if (option) selectItem(optionToItem(option));
 		},
-		onClose: () => {
-			setOpen(false);
-			triggerRef.current?.focus();
+		onSubmitQuery: (typed) => {
+			if (showSearchOnly && !remote) selectItem({
+				id: typed,
+				label: resolveLabel(typed)
+			});
 		},
-		onOpen: () => setOpen(true),
-		listRef
+		listRef,
+		returnFocusRef: typeable ? void 0 : triggerRef
 	});
+	useFocusOnLoad(element, typeable ? combo.inputRef : triggerRef);
 	const closedLabel = multi ? void 0 : items[0] ? items[0].label || resolveLabel(items[0].id) : void 0;
 	const placeholder = element.placeholder?.text ?? "Select an item";
-	const showSearchOnly = source !== "static";
+	const menu = open && /* @__PURE__ */ jsx(Popover, {
+		anchorRef: rootRef,
+		onDismiss: () => combo.setOpen(false),
+		offsetX: typeable ? -12 : 0,
+		gap: -4,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `sbk-select__menu${typeable ? " sbk-select__menu--typeable" : ""}`,
+			role: "listbox",
+			id: combo.listId,
+			ref: listRef,
+			children: [
+				!typeable && (showSearchOnly || allOptions(element).length > 8) && /* @__PURE__ */ jsxs("div", {
+					className: "sbk-select__search",
+					children: [/* @__PURE__ */ jsx(SearchIcon$1, {}), /* @__PURE__ */ jsx("input", {
+						autoFocus: true,
+						className: "sbk-select__search-input",
+						placeholder: source === "static" || source === "external" ? "Search options" : `Search ${source}`,
+						value: query,
+						onChange: (e) => setQuery(e.target.value)
+					})]
+				}),
+				(() => {
+					let index = 0;
+					return visibleGroups.map((group, gi) => {
+						const rows = group.options.map((option) => {
+							const i = index++;
+							return /* @__PURE__ */ jsx(SelectOption, {
+								option,
+								selected: isSelected(option),
+								onSelect: () => selectItem(optionToItem(option)),
+								navProps: combo.optionProps(i)
+							}, option.value ?? i);
+						});
+						return group.label === void 0 ? rows : /* @__PURE__ */ jsxs("div", {
+							className: "sbk-select__group",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "sbk-select__group-label",
+								children: group.label
+							}), rows]
+						}, gi);
+					});
+				})(),
+				remote && loading && /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__status",
+					children: "Loading…"
+				}),
+				remote && !loading && remoteGroups !== void 0 && flatOptions.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__status",
+					children: "No results"
+				}),
+				showSearchOnly && items.length > 0 && multi && /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__group-label",
+					children: "Selected"
+				}),
+				showSearchOnly && multi && items.map((item) => /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__option sbk-select__option--selected",
+					children: item.label || resolveLabel(item.id)
+				}, item.id))
+			]
+		})
+	});
+	if (dialogMode) {
+		const closeDialog = () => {
+			setDialogOpen(false);
+			triggerRef.current?.focus();
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: `sbk-select sbk-select--multi${sizeClass}`,
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					ref: triggerRef,
+					type: "button",
+					className: "sbk-select__control",
+					onClick: () => setDialogOpen(true),
+					"aria-haspopup": "dialog",
+					"aria-expanded": dialogOpen,
+					...invalid,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sbk-select__placeholder",
+						children: items.length > 0 ? `${items.length} selected` : placeholder
+					})
+				}),
+				dialogOpen && /* @__PURE__ */ jsx(SelectDialog, {
+					options: allOptions(element),
+					initial: items.flatMap((i) => i.option ? [i.option] : []),
+					placeholder,
+					onCancel: closeDialog,
+					onConfirm: async (selected) => {
+						closeDialog();
+						if (!await ask()) return;
+						await commit(selected.map(optionToItem));
+					}
+				}),
+				dialog
+			]
+		});
+	}
+	if (typeable) {
+		const display = items[0] !== void 0 && isUnresolved(items[0]) ? void 0 : closedLabel;
+		const overlay = display !== void 0 && !open;
+		return /* @__PURE__ */ jsxs("div", {
+			className: `sbk-select sbk-select--typeable${sizeClass}`,
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "sbk-select__control",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							...combo.inputProps(display, placeholder),
+							...invalid,
+							className: `sbk-select__input${overlay ? " sbk-select__input--behind" : ""}`
+						}),
+						/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-select__chevron" }),
+						overlay && /* @__PURE__ */ jsx("span", {
+							className: "sbk-select__content",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sbk-select__content-text",
+								children: display
+							})
+						})
+					]
+				}),
+				menu,
+				dialog
+			]
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: `sbk-select${multi ? " sbk-select--multi" : ""}${multi && items.length > 0 ? " sbk-select--chips" : ""}${sizeClass}`,
 		ref: rootRef,
-		onKeyDown: nav.onKeyDown,
+		onKeyDown: combo.onKeyDown,
 		children: [
 			multi && element.max_selected_items && /* @__PURE__ */ jsxs("p", {
 				className: "sbk-select__max-info",
@@ -7550,70 +8165,7 @@ function Select({ element, blockId }) {
 					children: placeholder
 				}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-select__chevron" })]
 			}),
-			open && /* @__PURE__ */ jsx(Popover, {
-				anchorRef: rootRef,
-				onDismiss: () => setOpen(false),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "sbk-select__menu",
-					role: "listbox",
-					ref: listRef,
-					children: [
-						(showSearchOnly || allOptions(element).length > 8) && /* @__PURE__ */ jsxs("div", {
-							className: "sbk-select__search",
-							children: [/* @__PURE__ */ jsx(SearchIcon$1, {}), /* @__PURE__ */ jsx("input", {
-								autoFocus: true,
-								className: "sbk-select__search-input",
-								placeholder: source === "static" || source === "external" ? "Search options" : `Search ${source}`,
-								value: query,
-								onChange: (e) => setQuery(e.target.value),
-								onKeyDown: (e) => {
-									if (e.key === "Enter" && query.trim() && showSearchOnly && !remote) selectItem({
-										id: query.trim(),
-										label: resolveLabel(query.trim())
-									});
-								}
-							})]
-						}),
-						(() => {
-							let index = 0;
-							return visibleGroups.map((group, gi) => {
-								const rows = group.options.map((option) => {
-									const i = index++;
-									return /* @__PURE__ */ jsx(SelectOption, {
-										option,
-										selected: isSelected(option),
-										onSelect: () => selectItem(optionToItem(option)),
-										navProps: nav.itemProps(i)
-									}, option.value ?? i);
-								});
-								return group.label === void 0 ? rows : /* @__PURE__ */ jsxs("div", {
-									className: "sbk-select__group",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "sbk-select__group-label",
-										children: group.label
-									}), rows]
-								}, gi);
-							});
-						})(),
-						remote && loading && /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__status",
-							children: "Loading…"
-						}),
-						remote && !loading && remoteGroups !== void 0 && flatOptions.length === 0 && /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__status",
-							children: "No results"
-						}),
-						showSearchOnly && items.length > 0 && multi && /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__group-label",
-							children: "Selected"
-						}),
-						showSearchOnly && multi && items.map((item) => /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__option sbk-select__option--selected",
-							children: item.label || resolveLabel(item.id)
-						}, item.id))
-					]
-				})
-			}),
+			menu,
 			dialog
 		]
 	});
@@ -7715,28 +8267,47 @@ function TextInput({ element, blockId }) {
 }
 //#endregion
 //#region src/elements/TimePicker.tsx
-/** Formats `HH:mm` the way Slack's closed timepicker shows it, e.g. "1:37 PM". */
+/** Formats `HH:mm` the way Slack's timepicker shows it, e.g. "1:37 PM". */
 function formatTime(time) {
 	const [h = 0, m = 0] = time.split(":").map(Number);
 	const period = h >= 12 ? "PM" : "AM";
 	return `${h % 12 === 0 ? 12 : h % 12}:${String(m).padStart(2, "0")} ${period}`;
 }
-/** Every 30 minutes, as Slack's timepicker list offers. */
-function timeOptions() {
-	const times = [];
-	for (let h = 0; h < 24; h++) for (const m of [0, 30]) times.push(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
-	return times;
+/** Every hour of the day, as Slack's timepicker list offers. */
+const HOURS = Array.from({ length: 24 }, (_, h) => `${String(h).padStart(2, "0")}:00`);
+/**
+* Reads a typed time as `HH:mm`: "2:15 PM", "2:15pm", "2pm", "14:15" or "9". Without AM or PM the
+* hour is read on a 24-hour clock. Slack accepts typed times too; whether it keeps one off the hour
+* (2:15 PM) or rounds it hasn't been verified, so the minutes are kept as typed.
+*/
+function parseTime(input) {
+	const match = /^(\d{1,2})(?::?(\d{2}))?\s*([ap])\.?m?\.?$|^(\d{1,2})(?::(\d{2}))?$/i.exec(input.trim());
+	if (!match) return void 0;
+	const meridiem = match[3]?.toLowerCase();
+	let hour = Number(match[1] ?? match[4]);
+	const minute = Number(match[2] ?? match[5] ?? 0);
+	if (minute > 59) return void 0;
+	if (meridiem) {
+		if (hour < 1 || hour > 12) return void 0;
+		hour = hour % 12 + (meridiem === "p" ? 12 : 0);
+	} else if (hour > 23) return;
+	return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
+const squash = (text) => text.toLowerCase().replace(/\s+/g, "");
+/** The rows for a query: the hours whose label starts with it, after a typed time the list lacks. */
+function timesFor(query) {
+	if (!query.trim()) return HOURS;
+	const typed = parseTime(query);
+	const hours = HOURS.filter((t) => squash(formatTime(t)).startsWith(squash(query)));
+	return typed && !hours.includes(typed) && !HOURS.includes(typed) ? [typed, ...hours] : hours;
 }
 function TimePicker({ element, blockId }) {
 	const { setValue, dispatch } = useBlockKit();
 	const { ask, dialog } = useConfirm(element.confirm);
 	const [time, setTime] = useState(element.initial_time);
-	const [open, setOpen] = useState(false);
 	const rootRef = useRef(null);
-	const triggerRef = useRef(null);
-	useFocusOnLoad(element, triggerRef);
-	const invalid = useInvalidProps();
 	const listRef = useRef(null);
+	const invalid = useInvalidProps();
 	const actionId = element.action_id ?? "";
 	useEffect(() => {
 		if (time) setValue(blockId, actionId, {
@@ -7745,9 +8316,9 @@ function TimePicker({ element, blockId }) {
 		});
 	}, []);
 	async function pick(next) {
+		combo.setOpen(false);
 		if (!await ask()) return;
 		setTime(next);
-		setOpen(false);
 		setValue(blockId, actionId, {
 			type: "timepicker",
 			selected_time: next
@@ -7760,57 +8331,68 @@ function TimePicker({ element, blockId }) {
 			...element.initial_time !== void 0 ? { initial_time: element.initial_time } : {}
 		});
 	}
-	const times = timeOptions();
-	const nav = useMenuNavigation({
-		open,
+	const [query, setQuery] = useState("");
+	const times = timesFor(query);
+	const combo = useCombobox({
+		query,
+		onQueryChange: setQuery,
 		count: times.length,
 		initialIndex: time ? times.indexOf(time) : -1,
 		onChoose: (i) => {
 			const t = times[i];
 			if (t) pick(t);
 		},
-		onClose: () => {
-			setOpen(false);
-			triggerRef.current?.focus();
+		onSubmitQuery: (typed) => {
+			const t = parseTime(typed);
+			if (t) pick(t);
 		},
-		onOpen: () => setOpen(true),
 		listRef
 	});
+	useFocusOnLoad(element, combo.inputRef);
+	const display = time ? formatTime(time) : void 0;
+	const input = combo.inputProps(display, element.placeholder?.text ?? "Select time");
+	const overlay = display !== void 0 && !combo.open;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-timepicker",
 		ref: rootRef,
-		onKeyDown: nav.onKeyDown,
 		children: [
-			/* @__PURE__ */ jsxs("button", {
-				ref: triggerRef,
-				type: "button",
+			/* @__PURE__ */ jsxs("label", {
 				className: "sbk-timepicker__control",
-				onClick: () => setOpen((o) => !o),
-				"aria-haspopup": "listbox",
-				"aria-expanded": open,
-				...invalid,
 				children: [
 					/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-timepicker__icon" }),
-					/* @__PURE__ */ jsx("span", {
-						className: time ? "sbk-timepicker__value" : "sbk-timepicker__placeholder",
-						children: time ? formatTime(time) : element.placeholder?.text ?? "Select time"
+					/* @__PURE__ */ jsx("input", {
+						...input,
+						...invalid,
+						className: `sbk-timepicker__input${overlay ? " sbk-timepicker__input--behind" : ""}`
 					}),
-					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-timepicker__chevron" })
+					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-timepicker__chevron" }),
+					overlay && /* @__PURE__ */ jsx("span", {
+						className: "sbk-timepicker__content",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sbk-timepicker__content-text",
+							children: display
+						})
+					})
 				]
 			}),
-			open && /* @__PURE__ */ jsx(Popover, {
+			combo.open && /* @__PURE__ */ jsx(Popover, {
 				anchorRef: rootRef,
-				onDismiss: () => setOpen(false),
+				onDismiss: () => combo.setOpen(false),
+				offsetX: -12,
+				gap: -4,
 				children: /* @__PURE__ */ jsx("div", {
 					className: "sbk-timepicker__menu",
 					role: "listbox",
+					id: combo.listId,
 					ref: listRef,
 					children: times.map((t, i) => /* @__PURE__ */ jsx("div", {
 						role: "option",
 						"aria-selected": t === time,
 						className: `sbk-timepicker__option${t === time ? " sbk-timepicker__option--selected" : ""}`,
+						onMouseDown: (e) => e.preventDefault(),
 						onClick: () => pick(t),
-						...nav.itemProps(i),
+						...combo.optionProps(i),
 						children: formatTime(t)
 					}, t))
 				})
@@ -9663,15 +10245,18 @@ function Input({ block, blockId }) {
 				className: "sbk-input__element",
 				children: /* @__PURE__ */ jsx(InputBlockContext.Provider, {
 					value: true,
-					children: /* @__PURE__ */ jsx(InputErrorContext.Provider, {
-						value: error ? errorId : void 0,
-						children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
-							element,
-							blockId
-						}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
-							element,
-							blockId
-						}) })
+					children: /* @__PURE__ */ jsx(InputOptionalContext.Provider, {
+						value: block.optional === true,
+						children: /* @__PURE__ */ jsx(InputErrorContext.Provider, {
+							value: error ? errorId : void 0,
+							children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
+								element,
+								blockId
+							}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
+								element,
+								blockId
+							}) })
+						})
 					})
 				})
 			}),
@@ -10110,6 +10695,7 @@ function TaskRow({ task }) {
 	const expandable = Boolean(task.details || task.output || sources.length > 0);
 	return /* @__PURE__ */ jsxs("li", {
 		className: "sbk-plan__task",
+		tabIndex: 0,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "sbk-plan__step",
 			"aria-hidden": "true",
@@ -10560,9 +11146,12 @@ function Section({ block, blockId }) {
 			})]
 		}), accessory && /* @__PURE__ */ jsx("div", {
 			className: `sbk-section__accessory sbk-section__accessory--${accessory.type}`,
-			children: /* @__PURE__ */ jsx(Element, {
-				element: accessory,
-				blockId
+			children: /* @__PURE__ */ jsx(SectionAccessoryContext.Provider, {
+				value: true,
+				children: /* @__PURE__ */ jsx(Element, {
+					element: accessory,
+					blockId
+				})
 			})
 		})]
 	});