@botiverse/raft-ui 0.84.0 → 0.86.0

package/dist/components/notification-center/notification-center.mjs

@@ -162,7 +162,7 @@ function NotificationCenterPopup({ viewport = "desktop", size = "md", className,
 			side,
 			sideOffset,
 			sticky,
-			className: "isolate z-50 outline-none",
+			className: "isolate z-popup outline-none",
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				"aria-label": props["aria-label"] ?? "Notification center",
 				"data-slot": "notification-center-popup",

package/dist/components/panel/panel-header.recipe.mjs

@@ -61,7 +61,7 @@ const panelHeader = tv({
 			"flex h-(--shell-header-height,var(--header-height)) shrink-0 items-center gap-3 max-md:gap-2",
 			panelHeadEdges,
 			"border-b border-line-seam bg-layer-canvas text-foreground",
-			"max-md:sticky max-md:top-0 max-md:z-30"
+			"max-md:sticky max-md:top-0 max-md:z-chrome"
 		]
 	}, {
 		slots: ["sectionHeader"],

package/dist/components/panel/panel-split-action.recipe.mjs

@@ -21,7 +21,7 @@ const panelSplitAction = tv({ base: [
 const splitActionMainParts = [
 	"pointer-events-auto rounded-e-none",
 	"after:end-0",
-	"focus-visible:z-1 aria-pressed:z-1 data-pressed:z-1",
+	"focus-visible:z-raised aria-pressed:z-raised data-pressed:z-raised",
 	"bg-(--split-action-main-tint,transparent)",
 	"group-hover/split-action:bg-fill-subtle",
 	"hover:bg-fill-medium active:bg-fill-medium"
@@ -40,7 +40,7 @@ const panelSplitActionMenu = tv({
 		"pointer-events-auto min-w-0 rounded-s-none px-0",
 		"w-6 me-5 md:pointer-fine:w-5 md:pointer-fine:me-0",
 		"after:start-0 after:inset-e-[-21.5px] md:pointer-fine:after:-end-[calc(var(--spacing-control-hit)+1.5px)]",
-		"focus-visible:z-1",
+		"focus-visible:z-raised",
 		"[[data-split-action-main][data-pressed]~&]:[--split-action-menu-tint:var(--fill-subtle)]",
 		"[[data-split-action-main][aria-pressed=true]~&]:[--split-action-menu-tint:var(--fill-subtle)]",
 		"bg-(--split-action-menu-tint,transparent)",

package/dist/components/popover/popover.mjs

@@ -9,7 +9,7 @@ import { Popover } from "@base-ui/react/popover";
 const popover = tv({
 	slots: {
 		trigger: ["select-none"],
-		positioner: ["isolate z-50 outline-none"],
+		positioner: ["isolate z-popup outline-none"],
 		content: [
 			"max-h-(--available-height) min-w-[220px] overflow-hidden",
 			"outline-none",

package/dist/components/preview-card/preview-card.mjs

@@ -10,7 +10,7 @@ import { PreviewCard } from "@base-ui/react/preview-card";
 const previewCard = tv({
 	slots: {
 		trigger: [],
-		positioner: ["isolate z-50 outline-none"],
+		positioner: ["isolate z-popup outline-none"],
 		popup: [
 			"max-h-(--available-height) min-w-[220px] overflow-hidden",
 			"outline-none",

package/dist/components/pull-to-refresh/pull-to-refresh-indicator.mjs

@@ -45,7 +45,7 @@ const pullToRefreshIndicator = tv({
 			surface: ["size-full"]
 		},
 		android: {
-			root: ["sticky top-0 z-10 h-0 overflow-visible"],
+			root: ["sticky top-0 z-sticky h-0 overflow-visible"],
 			surface: [
 				"absolute inset-x-0 top-0 mx-auto size-10 rounded-full bg-layer-popover shadow-float",
 				"translate-y-[calc(var(--pull-distance)-100%)]",

package/dist/components/resizable/resizable.recipe.mjs

@@ -4,7 +4,7 @@ const resizable = tv({ slots: {
 	group: ["flex size-full  min-h-0 min-w-0", "data-[orientation=vertical]:flex-col"],
 	panel: ["min-h-0 min-w-0"],
 	handle: [
-		"right-0 z-10 cursor-ew-resize touch-none select-none",
+		"right-0 z-control cursor-ew-resize touch-none select-none",
 		"relative -mr-3 flex w-3 shrink-0 items-center justify-center pointer-coarse:-mr-6 pointer-coarse:w-6",
 		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
 		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground",

package/dist/components/scroll-area/scroll-area.css

@@ -469,6 +469,7 @@
   .r-scroll-area > .r-scroll-area__gutters {
     pointer-events: none;
     user-select: none;
+    /* raft-ui: z-index the gutters paint over every layer inside the area (its root is isolate) until slock's layers inside its ScrollAreas are named (#218 step 2); then var(--z-index-scrollbar). */
     z-index: 2147483647;
   }
   /*

package/dist/components/select/select.mjs

@@ -39,7 +39,7 @@ const select = tv({
 			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
 		],
 		value: ["flex min-w-0 flex-1 truncate text-left"],
-		positioner: ["isolate z-50 outline-none"],
+		positioner: ["isolate z-popup outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
 			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
@@ -92,7 +92,7 @@ const select = tv({
 		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
 		separator: ["h-px shrink-0 border-0", "-mx-1 my-1 bg-line-hairline"],
 		scrollArrow: [
-			"absolute inset-x-0 z-10 flex h-6 w-full cursor-default items-center justify-center",
+			"absolute inset-x-0 z-raised flex h-6 w-full cursor-default items-center justify-center",
 			"outline-none transition-colors",
 			"data-[direction=up]:top-0 data-[direction=down]:bottom-0",
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0",

package/dist/components/selection-toolbar/selection-toolbar.d.mts

@@ -46,7 +46,7 @@ export type SelectionToolbarItemProps = {
  * handling only: the control keeps its role and its own keys.
  */
 export declare function SelectionToolbarItem({ children }: SelectionToolbarItemProps): import("react").JSX.Element;
-export type SelectionToolbarActionsProps = Omit<FitToolbarGroupProps, "wrapOrder" | "firstLine" | "collapseOrder" | "collapsed">;
+export type SelectionToolbarActionsProps = Omit<FitToolbarGroupProps, "wrapOrder" | "firstLine" | "collapseOrder" | "collapsed" | "moreOrder" | "moreItem" | "end">;
 /** The actions on the selection, in one row. */
 export declare function SelectionToolbarActions({ className, ...props }: SelectionToolbarActionsProps): import("react").JSX.Element;
 export type SelectionToolbarActionProps = Omit<ButtonProps, "variant" | "size" | "children"> & {

package/dist/components/selection-toolbar/selection-toolbar.recipe.mjs

@@ -3,7 +3,7 @@ import { tv } from "../../lib/tv.mjs";
 const selectionToolbar = tv({
 	slots: {
 		dock: [
-			"pointer-events-none absolute inset-x-0 bottom-0 z-10 flex justify-center",
+			"pointer-events-none absolute inset-x-0 bottom-0 z-float flex justify-center",
 			"px-5 pb-[calc(--spacing(3)+env(safe-area-inset-bottom))]",
 			"*:pointer-events-auto"
 		],

package/dist/components/sidebar/sidebar.recipe.mjs

@@ -16,7 +16,7 @@ const sidebarRecipe = tv({ slots: {
 		headEdgePull,
 		"[@media(max-height:600px)]:h-(--header-height-short)"
 	],
-	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
+	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 z-below hidden"],
 	sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
 	sidebarHeaderTitle: ["truncate font-bold", "font-sans text-headline text-foreground max-md:text-foreground-on-frame"],
 	sidebarGroupLabel: ["px-5 pt-4 pb-0 md:pointer-fine:px-(--sidebar-glyph-axis) md:pointer-fine:pt-2", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],

package/dist/components/tabs/tabs.mjs

@@ -22,7 +22,7 @@ const tabs = tv({
 		],
 		background: ["", "hidden"],
 		tab: [
-			"relative z-10 flex shrink-0 cursor-pointer touch-manipulation select-none [-webkit-touch-callout:none] items-center gap-1.5 whitespace-nowrap outline-none",
+			"relative isolate flex shrink-0 cursor-pointer touch-manipulation select-none [-webkit-touch-callout:none] items-center gap-1.5 whitespace-nowrap outline-none",
 			"data-[reorderable=true]:cursor-pointer data-[dragging-source=true]:cursor-grabbing",
 			"font-sans text-callout font-semibold text-foreground-muted",
 			"transition-[background-color,box-shadow,color] duration-100 ease-out",
@@ -31,7 +31,7 @@ const tabs = tv({
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg:not([class*='size-'])]:size-4",
 			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled"
 		],
-		content: ["relative z-10 inline-flex items-center gap-[inherit]"],
+		content: ["relative z-raised inline-flex items-center gap-[inherit]"],
 		label: [""],
 		panel: ["outline-none"],
 		indicator: ["", "hidden"]
@@ -416,7 +416,7 @@ function SortableTabsTab({ value, ...props }) {
 		...baseStyle,
 		transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
 		transition,
-		zIndex: isDragging ? 20 : baseStyle?.zIndex,
+		zIndex: isDragging ? "var(--z-index-raised)" : baseStyle?.zIndex,
 		cursor: isDragging ? "grabbing" : "pointer",
 		...isDragging && !home ? PLACE_STYLE : null
 	}), [
@@ -483,7 +483,7 @@ function TabsTabButton({ value, sortableRef, dropPlace = false, className, child
 			"data-slot": "tabs-tab-content",
 			className: content({ className: dropPlace ? "invisible" : void 0 }),
 			children
-		}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-10 rounded-control" }) : null]
+		}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-raised rounded-control" }) : null]
 	});
 }
 function TabsLabel({ className, ...props }) {

package/dist/components/task-dnd/task-dnd.recipe.mjs

@@ -2,9 +2,9 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/task-dnd/task-dnd.recipe.ts
 const taskDnd = tv({ slots: {
 	draggable: [
-		"group/task-draggable relative cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
+		"group/task-draggable relative isolate cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
 		"outline-none",
-		"data-[dragging=true]:z-20 data-[dragging=true]:will-change-transform",
+		"data-[dragging=true]:z-raised data-[dragging=true]:will-change-transform",
 		"data-[disabled=true]:cursor-default data-[disabled=true]:touch-auto",
 		"rounded-container",
 		"focus-visible:shadow-focus"

package/dist/components/thread-panel/thread-panel.recipe.mjs

@@ -17,7 +17,7 @@ const threadPanel = tv({ slots: {
 	titleMeta: ["font-normal text-foreground-hint"],
 	actions: panelHeadActions,
 	search: [
-		"relative z-20 flex shrink-0 items-center gap-1.5 py-2",
+		"relative z-chrome flex shrink-0 items-center gap-1.5 py-2",
 		"[&>[data-slot=input-group]]:min-w-0 *:data-[slot=input-group]:flex-1",
 		"border-b border-line-hairline bg-layer-canvas px-(--surface-inset)"
 	],

package/dist/components/toast/toast.mjs

@@ -10,8 +10,8 @@ import { Toast } from "@base-ui/react/toast";
 //#region src/components/toast/toast.tsx
 const toastStyles = tv({
 	slots: {
-		viewport: ["pointer-events-none isolate z-80 w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
-		positioner: ["isolate z-[calc(80-var(--toast-index))] outline-none"],
+		viewport: ["pointer-events-none isolate z-toast w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
+		positioner: ["isolate z-[calc(var(--z-index-toast)-var(--toast-index))] outline-none"],
 		root: [
 			"group/toast pointer-events-auto",
 			"select-text",
@@ -101,7 +101,7 @@ const toastStyles = tv({
 		layout: {
 			stacked: { root: [
 				"absolute inset-x-0 bottom-0 mx-auto h-(--toast-stack-height) origin-bottom",
-				"z-[calc(70-var(--toast-index))]",
+				"z-[calc(var(--z-index-toast)-var(--toast-index))]",
 				"before:pointer-events-auto before:absolute before:inset-x-0 before:top-full before:h-[calc(var(--toast-gap)+3px)] before:content-['']",
 				"[--toast-peek-dir:-1]",
 				"transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek)*var(--toast-peek-dir))))_scale(var(--toast-scale))]",
@@ -185,8 +185,8 @@ const toastAction = tv({ slots: {
 		"data-[loading=true]:cursor-wait data-[loading=true]:opacity-100",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 **:data-icon:size-[1em] [&_svg:not([class*='size-'])]:size-3"
 	],
-	content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
-	loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+	content: "relative z-raised inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+	loadingIndicator: "pointer-events-none absolute inset-0 z-raised flex items-center justify-center"
 } });
 const createToastManager = Toast.createToastManager;
 const useToastManager = Toast.useToastManager;

package/dist/components/tooltip/tooltip.mjs

@@ -9,7 +9,7 @@ import { Tooltip } from "@base-ui/react/tooltip";
 const tooltip = tv({
 	slots: {
 		trigger: ["select-none"],
-		positioner: ["isolate z-50 pointer-events-none outline-none"],
+		positioner: ["isolate z-popup pointer-events-none outline-none"],
 		content: [
 			"pointer-events-none relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-2.5 py-1",
 			"origin-(--transform-origin) outline-none",
@@ -25,7 +25,7 @@ const tooltip = tv({
 		],
 		body: [
 			"block min-w-0 text-footnote whitespace-normal wrap-break-word",
-			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 **:data-[slot=kbd]:ml-1.5",
+			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-raised **:data-[slot=kbd]:ml-1.5",
 			"**:data-[slot=kbd-group]:ml-1.5 [&_[data-slot=kbd-group]_[data-slot=kbd]]:ml-0",
 			"**:data-[slot=kbd]:h-4 **:data-[slot=kbd]:min-w-4 **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:py-0",
 			"[&_[data-slot=kbd][data-glyph=icon]]:px-0",

package/dist/lib/list-cell.mjs

@@ -5,7 +5,7 @@ const listCell = [
 	"md:pointer-fine:[--cell-pad-x:calc(var(--page-inset)-var(--cell-inset-x))]",
 	"[--cell-inset-end:max(0px,calc(var(--cell-inset-x)-var(--scrollbar-size,0px)))]",
 	"pr-[calc(var(--cell-inset-end)+var(--cell-pad-x))] pl-[calc(var(--cell-inset-x)+var(--cell-pad-x))]",
-	"before:pointer-events-none before:absolute before:-z-1 before:block before:content-['']",
+	"before:pointer-events-none before:absolute before:z-below before:block before:content-['']",
 	"before:inset-y-0 before:right-(--cell-inset-end) before:left-(--cell-inset-x)",
 	"before:rounded-(--cell-radius) before:border-0",
 	"before:transition-colors before:duration-150 before:ease-out"

package/dist/lint/no-raw-z-index.mjs

@@ -0,0 +1,142 @@
+import { classContext, constDeclarator, propertyKey, stringValue } from "./prefer-scroll-area.mjs";
+//#region src/lint/no-raw-z-index.ts
+/**
+* raft-ui/no-raw-z-index: every z-index is a named layer of the scale
+* (design/foundations/elevation.md#layer-order), so a number of the app's own,
+* which ranks its layer above or below layers it doesn't know about, is
+* reported where an app writes it.
+*
+* Reported:
+* - a Tailwind z-index class with a number or an arbitrary value (`z-10`,
+*   `-z-1`, `z-[60]`, `z-(--my-z)`, `[z-index:5]`, with any variant prefix or
+*   `!`) in a string or template literal that is a class, found as
+*   `raft-ui/prefer-scroll-area` finds one (a `className`, `class` or
+*   `*ClassName` attribute or property, an argument of `cn`, `tv` and the
+*   like, or a `const` of the same file used as a class). `z-auto` and the
+*   named layers (`z-raised`, `max-md:z-chrome`) are not reported;
+* - a `zIndex` property whose value is a number or a numeric string
+*   (`style={{ zIndex: 10 }}`, `const s = { zIndex: open ? 20 : "5" }`), a
+*   `zIndex={n}` JSX attribute, and an assignment `el.style.zIndex = "n"`.
+*   A `var(--z-index-…)` string is a name, and is not reported.
+*
+* Allowed with a `raft-ui: z-index <reason>` comment, line or block, on the
+* line above the reported string or property (or at the end of its line), as
+* for `raft-ui/prefer-scroll-area`. A comment without a reason doesn't count.
+*/
+const RAW_Z_CLASS = /(?<![\w-])!?-?z-(?:\d+|\[[^\]\s]*\]|\([^)\s]*\))!?(?![\w-])/;
+const RAW_Z_ARBITRARY = /\[z-index:[^\]]*\]/;
+const NUMERIC = /^\s*[-+]?\d+(?:\.\d+)?\s*$/;
+const ESCAPE = /\braft-ui:\s*z-index\s+\S/;
+/** Whether a class string has a z-index class with a number or an arbitrary value. */
+function hasRawZIndexClass(value) {
+	if (!value.includes("z-")) return false;
+	return RAW_Z_CLASS.test(value) || RAW_Z_ARBITRARY.test(value);
+}
+/** The numeric literals a `zIndex` value can be: `10`, `-1`, `"10"`, `a ? 20 : undefined`. */
+function numericLiterals(node, out) {
+	if (node.type === "ConditionalExpression") {
+		numericLiterals(node.consequent, out);
+		numericLiterals(node.alternate, out);
+	} else if (node.type === "LogicalExpression") {
+		numericLiterals(node.left, out);
+		numericLiterals(node.right, out);
+	} else if (node.type === "TSAsExpression" || node.type === "TSSatisfiesExpression" || node.type === "ParenthesizedExpression" || node.type === "JSXExpressionContainer") numericLiterals(node.expression, out);
+	else if (node.type === "UnaryExpression" && (node.operator === "-" || node.operator === "+")) {
+		if (numericLiterals(node.argument, []).length > 0) out.push(node);
+	} else if (node.type === "Literal" && typeof node.value === "number") out.push(node);
+	else {
+		const text = stringValue(node);
+		if (text !== void 0 && NUMERIC.test(text)) out.push(node);
+	}
+	return out;
+}
+const noRawZIndex = {
+	meta: {
+		type: "suggestion",
+		docs: {
+			description: "A z-index is a named layer of the Raft Design System's scale (z-raised, z-sticky, ...), not a number.",
+			url: "https://raft-design.botiverse.build/foundations/elevation/#layer-order"
+		},
+		messages: { noRawZIndex: "Use a named layer instead of a z-index number: z-below, z-base, z-raised (inside an `isolate` root), z-control, z-sticky, z-float, z-chrome, z-cover, z-app; a popup, dialog, lightbox, toast or drag lift takes raft-ui's own component and no z-index. If this number must stay, say why in a `// raft-ui: z-index <reason>` comment on the line above. https://raft-design.botiverse.build/foundations/elevation/#layer-order" },
+		schema: []
+	},
+	create(context) {
+		const sourceCode = context.sourceCode ?? context.getSourceCode?.();
+		let escapeLines;
+		function line(index) {
+			return sourceCode.getLocFromIndex(index).line;
+		}
+		/** The lines an escape comment covers: the one it ends on and the next. */
+		function escaped() {
+			if (escapeLines) return escapeLines;
+			escapeLines = /* @__PURE__ */ new Set();
+			for (const comment of sourceCode?.getAllComments() ?? []) {
+				if (!ESCAPE.test(comment.value)) continue;
+				const end = comment.loc?.end.line ?? line(comment.range[1]);
+				escapeLines.add(end);
+				escapeLines.add(end + 1);
+			}
+			return escapeLines;
+		}
+		function startLine(node) {
+			return node.loc?.start.line ?? line(node.range[0]);
+		}
+		/** Reports `node` unless an escape comment covers the line `anchor` starts on. */
+		function report(node, anchor) {
+			const lines = escaped();
+			if (lines.size > 0 && lines.has(startLine(anchor))) return;
+			context.report({
+				node,
+				messageId: "noRawZIndex"
+			});
+		}
+		const constStrings = /* @__PURE__ */ new Map();
+		const classNames = /* @__PURE__ */ new Set();
+		function checkClassString(node, value) {
+			if (!hasRawZIndexClass(value)) return;
+			if (classContext(node)) return report(node, node);
+			const declarator = constDeclarator(node);
+			if (!declarator) return;
+			const name = declarator.id.name;
+			constStrings.set(name, [...constStrings.get(name) ?? [], node]);
+		}
+		function checkZIndexValue(value, anchor) {
+			for (const literal of numericLiterals(value, [])) report(literal, anchor);
+		}
+		return {
+			Literal(node) {
+				if (typeof node.value === "string") checkClassString(node, node.value);
+			},
+			TemplateLiteral(node) {
+				checkClassString(node, node.quasis.map((quasi) => quasi.value.raw).join(" "));
+			},
+			Identifier(node) {
+				const parent = node.parent;
+				if (parent?.type === "Property" && parent.key === node && !parent.computed && !parent.shorthand) return;
+				if (classContext(node)) classNames.add(node.name);
+			},
+			Property(node) {
+				if (propertyKey(node) !== "zIndex") return;
+				checkZIndexValue(node.value, node);
+			},
+			JSXAttribute(node) {
+				const name = node.name;
+				if (name?.type !== "JSXIdentifier" || name.name !== "zIndex") return;
+				const value = node.value;
+				if (value) checkZIndexValue(value, node);
+			},
+			AssignmentExpression(node) {
+				const target = node.left;
+				if (target.type !== "MemberExpression") return;
+				const property = target.property;
+				if ((target.computed ? stringValue(property) : property.type === "Identifier" ? property.name : void 0) !== "zIndex") return;
+				checkZIndexValue(node.right, node);
+			},
+			"Program:exit"() {
+				for (const name of classNames) for (const node of constStrings.get(name) ?? []) report(node, node);
+			}
+		};
+	}
+};
+//#endregion
+export { hasRawZIndexClass, noRawZIndex };

package/dist/lint/prefer-scroll-area.mjs

@@ -186,4 +186,4 @@ const preferScrollArea = {
 	}
 };
 //#endregion
-export { hasNativeScrollClass, preferScrollArea };
+export { attributeName, classContext, constDeclarator, hasNativeScrollClass, preferScrollArea, propertyKey, stringValue };

package/dist/lint/recommended.json

@@ -2,6 +2,7 @@
   "plugins": [],
   "jsPlugins": ["@botiverse/raft-ui/lint"],
   "rules": {
-    "raft-ui/prefer-scroll-area": "error"
+    "raft-ui/prefer-scroll-area": "error",
+    "raft-ui/no-raw-z-index": "off"
   }
 }

package/dist/lint.d.mts

@@ -13,8 +13,14 @@ export interface RaftUiLintPlugin {
   configs: Record<string, RaftUiLintConfig>;
 }
 export declare const rules: Record<string, RuleModule>;
-/** Every rule of the plugin with its severity, as `recommended.json` lists them. */
-export declare const recommendedRules: Record<string, "error">;
+/**
+ * Every rule of the plugin with its severity, as `recommended.json` lists them.
+ * A rule an app can't pass yet ships `off`, so an app that lints with
+ * `--max-warnings=0` (slock) stays green on the upgrade; an app turns it on in
+ * its own `rules` to clear what it reports, and it turns `error` here once the
+ * app has.
+ */
+export declare const recommendedRules: Record<string, "error" | "warn" | "off">;
 declare const plugin: RaftUiLintPlugin;
 /** ESLint flat config: `export default [raftUi.configs.recommended]`. */
 export declare const recommended: RaftUiLintConfig;

package/dist/lint.mjs

@@ -1,4 +1,5 @@
 import { preferScrollArea } from "./lint/prefer-scroll-area.mjs";
+import { noRawZIndex } from "./lint/no-raw-z-index.mjs";
 //#region src/lint/index.ts
 /**
 * raft-ui's lint plugin: the Raft Design System's rules for the code of an app
@@ -10,9 +11,21 @@ import { preferScrollArea } from "./lint/prefer-scroll-area.mjs";
 * rule added in a later release reaches the app with the upgrade. See
 * design/about/use-raft-ui.md#lint-rules.
 */
-const rules = { "prefer-scroll-area": preferScrollArea };
-/** Every rule of the plugin with its severity, as `recommended.json` lists them. */
-const recommendedRules = { "raft-ui/prefer-scroll-area": "error" };
+const rules = {
+	"prefer-scroll-area": preferScrollArea,
+	"no-raw-z-index": noRawZIndex
+};
+/**
+* Every rule of the plugin with its severity, as `recommended.json` lists them.
+* A rule an app can't pass yet ships `off`, so an app that lints with
+* `--max-warnings=0` (slock) stays green on the upgrade; an app turns it on in
+* its own `rules` to clear what it reports, and it turns `error` here once the
+* app has.
+*/
+const recommendedRules = {
+	"raft-ui/prefer-scroll-area": "error",
+	"raft-ui/no-raw-z-index": "off"
+};
 const plugin = {
 	meta: { name: "raft-ui" },
 	rules,

package/dist/styles.css

@@ -200,6 +200,34 @@
   }
 }
 
+/* Raft Design System layer order (design/foundations/elevation.md#layer-order).
+   Each name is an ordinary Tailwind `z-*` utility (`z-raised`, `max-md:z-chrome`,
+   `before:z-below`) and a variable for CSS (`var(--z-index-sticky)`). In-page
+   layers stay below 50, where the overlays begin; nothing sits above toasts or
+   the drag lift. `z-below`, `z-base` and `z-raised` are local: the component's
+   root is `isolate`, so they rank parts inside it only. A component that needs
+   a third local layer orders it by DOM order inside its own `isolate`.
+   Static, so every variable exists for an app's own CSS whether or not a
+   utility uses it. `z-index-named.test.ts` keeps the order. */
+@theme static {
+  --z-index-below: -1;
+  --z-index-base: 0;
+  --z-index-raised: 1;
+  --z-index-control: 10;
+  --z-index-sticky: 20;
+  --z-index-float: 30;
+  --z-index-chrome: 35;
+  --z-index-cover: 40;
+  --z-index-app: 45;
+  --z-index-scrollbar: 49;
+  --z-index-popup: 50;
+  --z-index-dialog: 50;
+  --z-index-dialog-layer: 60;
+  --z-index-lightbox: 70;
+  --z-index-toast: 80;
+  --z-index-drag: 999;
+}
+
 @theme inline {
   /* A drag settling: the drop and cancel glide, siblings sliding apart, a
      layout reflowing on a drop (design/foundations/motion.md). */

package/dist/wip.d.mts

@@ -43,7 +43,7 @@ import { CommentMarginLayout, CommentMarginLayoutItem, CommentMarginLayoutOption
 import { CommentMarker, CommentMarkerProps } from "./components/comment/comment-marker.mjs";
 import { UseCommentMarginFitsOptions, useCommentMarginFits } from "./components/comment/use-comment-margin-fits.mjs";
 import "./components/comment/index.mjs";
-import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
+import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMore, FitToolbarMoreItems, FitToolbarMoreProps, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, FitToolbarSearch, FitToolbarSearchProps, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
 import "./components/fit-toolbar/index.mjs";
 import { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActionProps, SelectionToolbarActions, SelectionToolbarActionsProps, SelectionToolbarClose, SelectionToolbarCloseProps, SelectionToolbarCount, SelectionToolbarCountProps, SelectionToolbarCountValue, SelectionToolbarCountValueProps, SelectionToolbarDock, SelectionToolbarDockProps, SelectionToolbarHint, SelectionToolbarHintProps, SelectionToolbarItem, SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, SelectionToolbarMoreProps, SelectionToolbarProps } from "./components/selection-toolbar/selection-toolbar.mjs";
 import "./components/selection-toolbar/index.mjs";
@@ -81,4 +81,4 @@ import { KbdButton, KbdButtonCaret, KbdButtonCaretProps, KbdButtonPlaceholder, K
 import "./components/kbd-button/index.mjs";
 import { WebTopBarCenter, WebTopBarCenterProps, WebTopBarEnd, WebTopBarEndProps, WebTopBarRoot, WebTopBarRootProps, WebTopBarStart, WebTopBarStartProps } from "./components/web-top-bar/web-top-bar.mjs";
 import "./components/web-top-bar/index.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps, AvatarGroupButton, type AvatarGroupButtonProps, ButtonSplit, ButtonSplitMain, type ButtonSplitMainProps, ButtonSplitMenu, type ButtonSplitMenuProps, type ButtonSplitProps, type ButtonSplitSize, type ButtonSplitVariant, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, type DialogFooterNoteProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarPicker, type FitToolbarPickerProps, type FitToolbarProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, KbdButton, KbdButtonCaret, type KbdButtonCaretProps, KbdButtonPlaceholder, type KbdButtonPlaceholderProps, type KbdButtonProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, LightboxBody, type LightboxBodyProps, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemTrailing, type MessageItemTrailingProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, SelectionToolbar, SelectionToolbarAction, type SelectionToolbarActionProps, SelectionToolbarActions, type SelectionToolbarActionsProps, SelectionToolbarClose, type SelectionToolbarCloseProps, SelectionToolbarCount, type SelectionToolbarCountProps, SelectionToolbarCountValue, type SelectionToolbarCountValueProps, SelectionToolbarDock, type SelectionToolbarDockProps, SelectionToolbarHint, type SelectionToolbarHintProps, SelectionToolbarItem, type SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, type SelectionToolbarMoreProps, type SelectionToolbarProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, WebTopBarCenter, type WebTopBarCenterProps, WebTopBarEnd, type WebTopBarEndProps, WebTopBarRoot, type WebTopBarRootProps, WebTopBarStart, type WebTopBarStartProps, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps, AvatarGroupButton, type AvatarGroupButtonProps, ButtonSplit, ButtonSplitMain, type ButtonSplitMainProps, ButtonSplitMenu, type ButtonSplitMenuProps, type ButtonSplitProps, type ButtonSplitSize, type ButtonSplitVariant, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, type DialogFooterNoteProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMore, FitToolbarMoreItems, type FitToolbarMoreProps, FitToolbarPicker, type FitToolbarPickerProps, type FitToolbarProps, FitToolbarSearch, type FitToolbarSearchProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, KbdButton, KbdButtonCaret, type KbdButtonCaretProps, KbdButtonPlaceholder, type KbdButtonPlaceholderProps, type KbdButtonProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, LightboxBody, type LightboxBodyProps, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemTrailing, type MessageItemTrailingProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, SelectionToolbar, SelectionToolbarAction, type SelectionToolbarActionProps, SelectionToolbarActions, type SelectionToolbarActionsProps, SelectionToolbarClose, type SelectionToolbarCloseProps, SelectionToolbarCount, type SelectionToolbarCountProps, SelectionToolbarCountValue, type SelectionToolbarCountValueProps, SelectionToolbarDock, type SelectionToolbarDockProps, SelectionToolbarHint, type SelectionToolbarHintProps, SelectionToolbarItem, type SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, type SelectionToolbarMoreProps, type SelectionToolbarProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, WebTopBarCenter, type WebTopBarCenterProps, WebTopBarEnd, type WebTopBarEndProps, WebTopBarRoot, type WebTopBarRootProps, WebTopBarStart, type WebTopBarStartProps, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/dist/wip.mjs

@@ -10,7 +10,7 @@ import { HoldThenMoveTouchSensor, MouseOnlyPointerSensor, TOUCH_DRAG_DISTANCE_PX
 import { PopoverActions, PopoverBody } from "./components/popover/popover.mjs";
 import { MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel } from "./components/mobile-nav/mobile-nav-server.mjs";
 import { PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta } from "./components/preview-card/preview-card.mjs";
-import { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
+import { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
 import { AvatarGroupButton } from "./components/avatar/avatar.mjs";
 import { MessageItemTrailing } from "./components/message-item/message-item-content.mjs";
 import { MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName } from "./components/message-item/message-item-delegated.mjs";
@@ -52,4 +52,4 @@ import { SaveStatus, SaveStatusError, SaveStatusSaved } from "./components/save-
 import { TaskCompletionControl } from "./components/task-completion-control/task-completion-control.mjs";
 import { KbdButton, KbdButtonCaret, KbdButtonPlaceholder } from "./components/kbd-button/kbd-button.mjs";
 import { WebTopBarCenter, WebTopBarEnd, WebTopBarRoot, WebTopBarStart } from "./components/web-top-bar/web-top-bar.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle, AvatarGroupButton, ButtonSplit, ButtonSplitMain, ButtonSplitMenu, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdButton, KbdButtonCaret, KbdButtonPlaceholder, KbdShortcut, LIFT_CLASS, LightboxBody, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageItemTrailing, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, WebTopBarCenter, WebTopBarEnd, WebTopBarRoot, WebTopBarStart, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle, AvatarGroupButton, ButtonSplit, ButtonSplitMain, ButtonSplitMenu, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdButton, KbdButtonCaret, KbdButtonPlaceholder, KbdShortcut, LIFT_CLASS, LightboxBody, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageItemTrailing, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, WebTopBarCenter, WebTopBarEnd, WebTopBarRoot, WebTopBarStart, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.84.0",
+  "version": "0.86.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",

package/skills/raft-ui-guide/SKILL.md

@@ -91,6 +91,7 @@ When reviewing or editing code that uses raft-ui, check:
 - [ ] Product state (upload, permissions, read/unread) lives in the app; the component renders parts, not a `state` prop
 - [ ] No shadow written as `shadow-[var(--…)]`: named utility or fully literal
 - [ ] Every region that scrolls is a `ScrollArea` (or `PanelScrollViewport` in a Panel), not `overflow-auto` / `overflow-scroll`; a native scroller kept on purpose has a `// raft-ui: native-scroll <reason>` comment. The `raft-ui/prefer-scroll-area` lint rule checks it: https://raft-design.botiverse.build/about/use-raft-ui.md#lint-rules
+- [ ] Every z-index is a layer name (`z-raised`, `z-control`, `z-sticky`, `z-float`, `z-chrome`, `z-cover`, `z-app`; `var(--z-index-…)` in CSS), never a number; popups, dialogs, lightboxes, toasts and drag lifts take raft-ui's components and no z-index. A number kept on purpose has a `// raft-ui: z-index <reason>` comment. The `raft-ui/no-raw-z-index` lint rule checks it: https://raft-design.botiverse.build/foundations/elevation.md#layer-order
 
 ## Stability