@bitrise/bitkit-v2 0.3.458 → 0.3.460-beta.2893

package/dist/theme/slot-recipes/UISideNav.recipe.d.ts

@@ -0,0 +1,117 @@
+/**
+ * The footprint the rail keeps in the page. The expanded rail overlays the content rather than
+ * pushing it, so this is the gutter a layout reserves beside the navigation — exported so a
+ * consumer does not have to hardcode the number and drift from it.
+ */
+export declare const uiSideNavRailWidth: `${number}rem`;
+declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
+    layout: {
+        rail: {
+            root: {
+                paddingBlockEnd: "12";
+                transition: "width 100ms ease-out";
+                transitionDelay: "50ms";
+                width: `${number}rem`;
+                _motionReduce: {
+                    transition: "none";
+                };
+                '&[data-expanded]': {
+                    transitionDelay: "100ms";
+                    width: `${number}rem`;
+                };
+            };
+            workspace: {
+                paddingInline: "16";
+                minWidth: `${number}rem`;
+            };
+            workspaceControl: {
+                minWidth: `${number}rem`;
+            };
+            workspaceMenu: {
+                width: `${number}rem`;
+            };
+            item: {
+                gap: "24";
+                paddingBlock: "12";
+                minWidth: `${number}rem`;
+            };
+            link: {
+                gap: "24";
+                minWidth: `${number}rem`;
+            };
+            footerSeparator: {
+                '[data-expanded] &': {
+                    paddingInline: "16";
+                };
+            };
+            footerHeading: {
+                minWidth: `${number}rem`;
+            };
+        };
+        drawer: {
+            root: {
+                overflowX: "hidden";
+                overflowY: "auto";
+                width: "full";
+            };
+            workspaceRoot: {
+                background: "sys/ui/sidenav/bg";
+                insetBlockStart: number;
+                position: "sticky";
+                zIndex: number;
+            };
+            workspace: {
+                paddingBlock: "16";
+                paddingInlineEnd: "24";
+                paddingInlineStart: "16";
+            };
+            item: {
+                gap: "12";
+                paddingBlock: "16";
+            };
+            link: {
+                gap: "12";
+            };
+            footer: {
+                paddingBlockEnd: "16";
+                paddingBlockStart: "12";
+                position: "relative";
+            };
+            footerHeading: {
+                paddingBlockStart: "12";
+                '&[data-section]': {
+                    marginBlockStart: "12";
+                    paddingBlockStart: "24";
+                    position: "relative";
+                    _before: {
+                        background: "border/inverse";
+                        content: "\"\"";
+                        height: "1";
+                        insetBlockStart: number;
+                        insetInline: number;
+                        opacity: number;
+                        position: "absolute";
+                    };
+                };
+            };
+            footerSeparator: {
+                insetBlockStart: number;
+                insetInline: number;
+                paddingBlock: number;
+                paddingInline: number;
+                position: "absolute";
+            };
+            workspaceMenu: {
+                maxHeight: "var(--available-height)";
+                '& [data-slot="item-list"]': {
+                    maxHeight: "none";
+                };
+            };
+            body: {
+                flex: "1 0 auto";
+                paddingBlock: "8";
+            };
+        };
+    };
+}>;
+export default uiSideNavSlotRecipe;

package/dist/theme/slot-recipes/UISideNav.recipe.js

@@ -0,0 +1,448 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/UISideNav.recipe.ts
+/**
+* The rail's two widths. The collapsed rail is exactly wide enough for the 24px icon at its
+* 24px inline-start padding, which centres the icon and puts the label's first pixel on the
+* rail's trailing edge — so the expanded row and the collapsed row are the same row, clipped.
+*/
+var RAIL_WIDTH_COLLAPSED = rem(72);
+/**
+* The footprint the rail keeps in the page. The expanded rail overlays the content rather than
+* pushing it, so this is the gutter a layout reserves beside the navigation — exported so a
+* consumer does not have to hardcode the number and drift from it.
+*/
+var uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;
+var RAIL_WIDTH_EXPANDED = rem(256);
+var DRAWER_WIDTH = rem(320);
+/**
+* The workspace menu is wider than the rail it hangs off, so a long workspace name has somewhere
+* to go. The drawer leaves it alone and lets the menu take the panel's width instead.
+*/
+var WORKSPACE_MENU_WIDTH = rem(360);
+/**
+* Every row is laid out at the expanded width and clipped by the root, rather than reflowing
+* between the two states. Without it the label would be handed a 72px row, ellipsis itself, and
+* re-wrap on every hover.
+*/
+var railRow = { minWidth: RAIL_WIDTH_EXPANDED };
+var uiSideNavSlotRecipe = defineSlotRecipe({
+	className: "ui-side-nav",
+	slots: [
+		"backdrop",
+		"body",
+		"closeButton",
+		"content",
+		"footer",
+		"footerHeading",
+		"footerSeparator",
+		"item",
+		"itemIcon",
+		"itemIndicator",
+		"itemLabel",
+		"link",
+		"linkIcon",
+		"linkIconBlock",
+		"linkLabel",
+		"linkSecondaryText",
+		"linkStatusDot",
+		"linkTextBlock",
+		"positioner",
+		"root",
+		"workspace",
+		"workspaceChevron",
+		"workspaceControl",
+		"workspaceLabel",
+		"workspaceMenu",
+		"workspaceRoot",
+		"workspaceTextBlock",
+		"workspaceValue"
+	],
+	base: {
+		root: {
+			background: "sys/ui/sidenav/bg",
+			display: "flex",
+			flexDirection: "column",
+			height: "full",
+			overflow: "hidden",
+			whiteSpace: "nowrap"
+		},
+		workspace: {
+			alignItems: "center",
+			background: "sys/ui/sidenav/item/bg",
+			borderRadius: 0,
+			borderWidth: 0,
+			color: "text/on-color",
+			cursor: "pointer",
+			display: "flex",
+			flexShrink: 0,
+			gap: "16",
+			height: rem(72),
+			minHeight: rem(72),
+			position: "relative",
+			textAlign: "start",
+			width: "full",
+			_after: {
+				background: "border/inverse",
+				content: "\"\"",
+				height: "1",
+				insetBlockEnd: 0,
+				insetInline: 0,
+				opacity: .2,
+				position: "absolute"
+			},
+			_hover: {
+				background: "sys/ui/sidenav/item/bg-hover",
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_active: { background: "sys/ui/sidenav/item/bg-active" }
+		},
+		/**
+		* The Select's own wrapper. It sizes to its content by default, which would leave the
+		* workspace cell narrower than the panel in the drawer, where no minimum width props it out.
+		*/
+		workspaceControl: { width: "full" },
+		/** The element the Select mounts on, which is what the drawer's header sticks to. */
+		workspaceRoot: {
+			flexShrink: 0,
+			width: "full"
+		},
+		workspaceTextBlock: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			minWidth: 0
+		},
+		workspaceLabel: {
+			opacity: .6,
+			textStyle: "heading/h6",
+			textTransform: "uppercase"
+		},
+		workspaceValue: {
+			opacity: .8,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			textStyle: "body/lg/regular"
+		},
+		workspaceChevron: {
+			flexShrink: 0,
+			transition: "rotate 150ms ease-out",
+			"&[data-state=\"open\"]": { rotate: "180deg" },
+			_motionReduce: { transition: "none" }
+		},
+		body: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			minHeight: 0
+		},
+		item: {
+			alignItems: "center",
+			background: "sys/ui/sidenav/item/bg",
+			color: "sys/ui/sidenav/item/fg",
+			cursor: "pointer",
+			display: "flex",
+			flexShrink: 0,
+			overflow: "hidden",
+			paddingInlineEnd: "8",
+			paddingInlineStart: "24",
+			position: "relative",
+			textDecoration: "none",
+			width: "full",
+			_hover: {
+				background: "sys/ui/sidenav/item/bg-hover",
+				color: "sys/ui/sidenav/item/fg-hover",
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_active: {
+				background: "sys/ui/sidenav/item/bg-active",
+				color: "sys/ui/sidenav/item/fg-active"
+			},
+			"&[data-selected]": {
+				background: "sys/ui/sidenav/item/bg-selected",
+				color: "sys/ui/sidenav/item/fg-active",
+				_hover: {
+					background: "sys/ui/sidenav/item/bg-hover",
+					_active: { background: "sys/ui/sidenav/item/bg-active" }
+				},
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
+		},
+		itemIcon: { flexShrink: 0 },
+		itemLabel: {
+			flex: 1,
+			minWidth: 0,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			textStyle: "body/lg/semibold"
+		},
+		itemIndicator: {
+			background: "sys/ui/sidenav/item/indicator",
+			insetBlock: 0,
+			insetInlineStart: 0,
+			position: "absolute",
+			width: "4"
+		},
+		footer: {
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: 0,
+			marginBlockStart: "auto"
+		},
+		/**
+		* The rule above the footer, drawn as its own band rather than a border on the footer: the
+		* design insets the line from both edges and gives it breathing room, which a border cannot do.
+		*/
+		footerSeparator: {
+			flexShrink: 0,
+			paddingBlock: "8",
+			paddingInline: "12",
+			_before: {
+				background: "border/inverse",
+				content: "\"\"",
+				display: "block",
+				height: "1",
+				opacity: .2,
+				width: "full"
+			}
+		},
+		footerHeading: {
+			color: "text/on-color",
+			opacity: .6,
+			paddingBlockEnd: "12",
+			paddingInline: "24",
+			textStyle: "heading/h6",
+			textTransform: "uppercase"
+		},
+		/** Shared by both of the footer row's elements: an anchor for a destination, a button for a
+		* row that opens something in place. The reset keeps the two indistinguishable. */
+		link: {
+			alignItems: "center",
+			background: "sys/ui/sidenav/item/bg",
+			borderWidth: 0,
+			color: "sys/ui/sidenav/item/fg",
+			cursor: "pointer",
+			display: "flex",
+			flexShrink: 0,
+			overflow: "hidden",
+			paddingBlock: "12",
+			paddingInline: "24",
+			textAlign: "start",
+			textDecoration: "none",
+			width: "full",
+			_hover: {
+				background: "sys/ui/sidenav/item/bg-hover",
+				color: "sys/ui/sidenav/item/fg-hover",
+				_active: { background: "sys/ui/sidenav/item/bg-active" }
+			},
+			_active: {
+				background: "sys/ui/sidenav/item/bg-active",
+				color: "sys/ui/sidenav/item/fg-active"
+			},
+			_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" },
+			"&[data-with-secondary]": {
+				height: rem(56),
+				paddingBlock: 0
+			}
+		},
+		linkTextBlock: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			justifyContent: "center",
+			minWidth: 0
+		},
+		linkLabel: {
+			flex: 1,
+			minWidth: 0,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			textStyle: "body/lg/regular",
+			"[data-with-secondary] &": {
+				flex: "none",
+				textStyle: "body/md/semibold"
+			}
+		},
+		linkSecondaryText: {
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			textStyle: "body/sm/regular"
+		},
+		linkIcon: { flexShrink: 0 },
+		/** Wraps the icon so the status dot can hang off its trailing bottom corner. */
+		linkIconBlock: {
+			display: "flex",
+			flexShrink: 0,
+			position: "relative"
+		},
+		linkStatusDot: {
+			borderRadius: "full",
+			height: "8",
+			insetBlockEnd: "-2px",
+			insetInlineEnd: "-4px",
+			position: "absolute",
+			width: "8",
+			"&[data-status=\"neutral\"]": { background: "sys/ui/sidenav/badge/neutral" },
+			"&[data-status=\"success\"]": { background: "sys/ui/sidenav/badge/green" },
+			"&[data-status=\"critical\"]": { background: "sys/ui/sidenav/badge/red" }
+		},
+		backdrop: {
+			background: "utilities/overlay",
+			inset: 0,
+			position: "fixed",
+			zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))",
+			_open: {
+				animationDuration: "slow",
+				animationName: "fade-in"
+			},
+			_closed: {
+				animationDuration: "moderate",
+				animationName: "fade-out"
+			}
+		},
+		positioner: {
+			alignItems: "stretch",
+			display: "flex",
+			inset: 0,
+			justifyContent: "flex-start",
+			overscrollBehaviorY: "none",
+			position: "fixed",
+			zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
+		},
+		content: {
+			background: "sys/ui/sidenav/bg",
+			boxShadow: "elevation/lg",
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: "100dvh",
+			overflow: "visible",
+			outline: "none",
+			position: "relative",
+			width: DRAWER_WIDTH,
+			maxWidth: "calc(100vw - 55px)",
+			_open: {
+				animationDuration: "slowest",
+				animationName: {
+					base: "slide-from-left-full, fade-in",
+					_rtl: "slide-from-right-full, fade-in"
+				},
+				animationTimingFunction: "ease-in-smooth"
+			},
+			_closed: {
+				animationDuration: "slower",
+				animationName: {
+					base: "slide-to-left-full, fade-out",
+					_rtl: "slide-to-right-full, fade-out"
+				},
+				animationTimingFunction: "ease-in-smooth"
+			}
+		},
+		closeButton: {
+			alignItems: "center",
+			display: "flex",
+			height: rem(72),
+			insetBlockStart: 0,
+			insetInlineStart: "100%",
+			paddingInlineStart: "8",
+			position: "absolute"
+		}
+	},
+	variants: { layout: {
+		rail: {
+			root: {
+				paddingBlockEnd: "12",
+				transition: "width 100ms ease-out",
+				transitionDelay: "50ms",
+				width: RAIL_WIDTH_COLLAPSED,
+				_motionReduce: { transition: "none" },
+				"&[data-expanded]": {
+					transitionDelay: "100ms",
+					width: RAIL_WIDTH_EXPANDED
+				}
+			},
+			workspace: {
+				...railRow,
+				paddingInline: "16"
+			},
+			workspaceControl: railRow,
+			workspaceMenu: { width: WORKSPACE_MENU_WIDTH },
+			item: {
+				...railRow,
+				gap: "24",
+				paddingBlock: "12"
+			},
+			link: {
+				...railRow,
+				gap: "24"
+			},
+			footerSeparator: { "[data-expanded] &": { paddingInline: "16" } },
+			footerHeading: railRow
+		},
+		drawer: {
+			root: {
+				overflowX: "hidden",
+				overflowY: "auto",
+				width: "full"
+			},
+			workspaceRoot: {
+				background: "sys/ui/sidenav/bg",
+				insetBlockStart: 0,
+				position: "sticky",
+				zIndex: 1
+			},
+			workspace: {
+				paddingBlock: "16",
+				paddingInlineEnd: "24",
+				paddingInlineStart: "16"
+			},
+			item: {
+				gap: "12",
+				paddingBlock: "16"
+			},
+			link: { gap: "12" },
+			footer: {
+				paddingBlockEnd: "16",
+				paddingBlockStart: "12",
+				position: "relative"
+			},
+			footerHeading: {
+				paddingBlockStart: "12",
+				"&[data-section]": {
+					marginBlockStart: "12",
+					paddingBlockStart: "24",
+					position: "relative",
+					_before: {
+						background: "border/inverse",
+						content: "\"\"",
+						height: "1",
+						insetBlockStart: 0,
+						insetInline: 0,
+						opacity: .2,
+						position: "absolute"
+					}
+				}
+			},
+			footerSeparator: {
+				insetBlockStart: 0,
+				insetInline: 0,
+				paddingBlock: 0,
+				paddingInline: 0,
+				position: "absolute"
+			},
+			workspaceMenu: {
+				maxHeight: "var(--available-height)",
+				"& [data-slot=\"item-list\"]": { maxHeight: "none" }
+			},
+			body: {
+				flex: "1 0 auto",
+				paddingBlock: "8"
+			}
+		}
+	} },
+	defaultVariants: { layout: "rail" }
+});
+//#endregion
+export { uiSideNavSlotRecipe as default, uiSideNavRailWidth };
+
+//# sourceMappingURL=UISideNav.recipe.js.map

package/dist/theme/slot-recipes/UISideNav.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The rail's two widths. The collapsed rail is exactly wide enough for the 24px icon at its\n * 24px inline-start padding, which centres the icon and puts the label's first pixel on the\n * rail's trailing edge — so the expanded row and the collapsed row are the same row, clipped.\n */\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation — exported so a\n * consumer does not have to hardcode the number and drift from it.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\n\n/**\n * The workspace menu is wider than the rail it hangs off, so a long workspace name has somewhere\n * to go. The drawer leaves it alone and lets the menu take the panel's width instead.\n */\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\n/**\n * Every row is laid out at the expanded width and clipped by the root, rather than reflowing\n * between the two states. Without it the label would be handed a 72px row, ellipsis itself, and\n * re-wrap on every hover.\n */\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n  className: 'ui-side-nav',\n  slots: [\n    'backdrop',\n    'body',\n    'closeButton',\n    'content',\n    'footer',\n    'footerHeading',\n    'footerSeparator',\n    'item',\n    'itemIcon',\n    'itemIndicator',\n    'itemLabel',\n    'link',\n    'linkIcon',\n    'linkIconBlock',\n    'linkLabel',\n    'linkSecondaryText',\n    'linkStatusDot',\n    'linkTextBlock',\n    'positioner',\n    'root',\n    'workspace',\n    'workspaceChevron',\n    'workspaceControl',\n    'workspaceLabel',\n    'workspaceMenu',\n    'workspaceRoot',\n    'workspaceTextBlock',\n    'workspaceValue',\n  ],\n  base: {\n    root: {\n      background: 'sys/ui/sidenav/bg',\n      display: 'flex',\n      flexDirection: 'column',\n      // The consumer owns the positioning: the website fixes it below a 48px header and feeds it\n      // a dynamic margin for the Intercom banner. Filling the height given is all this does.\n      height: 'full',\n      // What makes the rail a rail. Every row is laid out at the expanded width, so this is the\n      // only thing hiding the labels.\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n    workspace: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      // The Select recipe styles the trigger as a form control. This slot has to undo that\n      // before it can be a navigation cell.\n      borderRadius: 0,\n      borderWidth: 0,\n      color: 'text/on-color',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '16',\n      height: rem(72),\n      minHeight: rem(72),\n      position: 'relative',\n      textAlign: 'start',\n      width: 'full',\n      // The 1px rule under the cell. A pseudo-element rather than a border so it cannot add to\n      // the 72px height the avatar and its padding already fill exactly.\n      _after: {\n        background: 'border/inverse',\n        content: '\"\"',\n        height: '1',\n        insetBlockEnd: 0,\n        insetInline: 0,\n        opacity: 0.2,\n        position: 'absolute',\n      },\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n      },\n    },\n    /**\n     * The Select's own wrapper. It sizes to its content by default, which would leave the\n     * workspace cell narrower than the panel in the drawer, where no minimum width props it out.\n     */\n    workspaceControl: {\n      width: 'full',\n    },\n    /** The element the Select mounts on, which is what the drawer's header sticks to. */\n    workspaceRoot: {\n      flexShrink: 0,\n      width: 'full',\n    },\n    workspaceTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    workspaceLabel: {\n      // The design draws this at 60% of the on-colour white. There is no sidenav token for it,\n      // so it is the opacity Figma itself applies, not an invented colour.\n      opacity: 0.6,\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    workspaceValue: {\n      opacity: 0.8,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/lg/regular',\n    },\n    workspaceChevron: {\n      flexShrink: 0,\n      transition: 'rotate 150ms ease-out',\n      // The design draws a chevron-up when the menu is open. It is the same glyph turned over,\n      // so it is a rotation rather than a second icon.\n      '&[data-state=\"open\"]': {\n        rotate: '180deg',\n      },\n      _motionReduce: {\n        transition: 'none',\n      },\n    },\n    body: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minHeight: 0,\n    },\n    item: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      // Both the icon and the label take their colour from the row, which is how one token pair\n      // drives the whole 80%-to-100% shift the design asks for.\n      color: 'sys/ui/sidenav/item/fg',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'hidden',\n      paddingInlineEnd: '8',\n      paddingInlineStart: '24',\n      position: 'relative',\n      textDecoration: 'none',\n      width: 'full',\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        color: 'sys/ui/sidenav/item/fg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n        color: 'sys/ui/sidenav/item/fg-active',\n      },\n      // The selected row is dimmer on hover than at rest. That reads backwards, but it is what\n      // the component set draws: bg-selected at rest, bg-hover under the pointer.\n      '&[data-selected]': {\n        background: 'sys/ui/sidenav/item/bg-selected',\n        color: 'sys/ui/sidenav/item/fg-active',\n        _hover: {\n          background: 'sys/ui/sidenav/item/bg-hover',\n          _active: {\n            background: 'sys/ui/sidenav/item/bg-active',\n          },\n        },\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      // `focusVisibleRing: 'inside'` still resolves to a zero offset, which draws the ring on the\n      // border box. The row is full-bleed, so that would be clipped by the rail — pull it in.\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    itemIcon: {\n      flexShrink: 0,\n    },\n    itemLabel: {\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/lg/semibold',\n    },\n    itemIndicator: {\n      background: 'sys/ui/sidenav/item/indicator',\n      insetBlock: 0,\n      insetInlineStart: 0,\n      position: 'absolute',\n      width: '4',\n    },\n    footer: {\n      display: 'flex',\n      flexDirection: 'column',\n      flexShrink: 0,\n      // Holds the footer at the bottom however short the navigation is.\n      marginBlockStart: 'auto',\n    },\n    /**\n     * The rule above the footer, drawn as its own band rather than a border on the footer: the\n     * design insets the line from both edges and gives it breathing room, which a border cannot do.\n     */\n    footerSeparator: {\n      flexShrink: 0,\n      paddingBlock: '8',\n      // The collapsed inset. Unlike the rows, the rule follows the rail's own width rather than\n      // being laid out at 256 and clipped, so it needs a narrower inset while the rail is narrow.\n      paddingInline: '12',\n      _before: {\n        background: 'border/inverse',\n        content: '\"\"',\n        display: 'block',\n        height: '1',\n        opacity: 0.2,\n        width: 'full',\n      },\n    },\n    footerHeading: {\n      color: 'text/on-color',\n      opacity: 0.6,\n      paddingBlockEnd: '12',\n      paddingInline: '24',\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    /** Shared by both of the footer row's elements: an anchor for a destination, a button for a\n     * row that opens something in place. The reset keeps the two indistinguishable. */\n    link: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      borderWidth: 0,\n      color: 'sys/ui/sidenav/item/fg',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'hidden',\n      paddingBlock: '12',\n      paddingInline: '24',\n      textAlign: 'start',\n      textDecoration: 'none',\n      width: 'full',\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        color: 'sys/ui/sidenav/item/fg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n        color: 'sys/ui/sidenav/item/fg-active',\n      },\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n      // A row carrying a second line is the status row, which the design draws one step taller and\n      // on a tighter type scale. Its own height rather than padding, because 12 above and below a\n      // 36px text block would overshoot the 56 the design fixes it at.\n      '&[data-with-secondary]': {\n        height: rem(56),\n        paddingBlock: 0,\n      },\n    },\n    linkTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'center',\n      minWidth: 0,\n    },\n    linkLabel: {\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/lg/regular',\n      '[data-with-secondary] &': {\n        flex: 'none',\n        textStyle: 'body/md/semibold',\n      },\n    },\n    linkSecondaryText: {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/sm/regular',\n    },\n    linkIcon: {\n      flexShrink: 0,\n    },\n    /** Wraps the icon so the status dot can hang off its trailing bottom corner. */\n    linkIconBlock: {\n      display: 'flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    linkStatusDot: {\n      borderRadius: 'full',\n      height: '8',\n      // Clear of the icon's corner by the 4 and 2 the design offsets it.\n      insetBlockEnd: '-2px',\n      insetInlineEnd: '-4px',\n      position: 'absolute',\n      width: '8',\n      '&[data-status=\"neutral\"]': {\n        background: 'sys/ui/sidenav/badge/neutral',\n      },\n      '&[data-status=\"success\"]': {\n        background: 'sys/ui/sidenav/badge/green',\n      },\n      '&[data-status=\"critical\"]': {\n        background: 'sys/ui/sidenav/badge/red',\n      },\n    },\n    backdrop: {\n      background: 'utilities/overlay',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n      _open: {\n        animationDuration: 'slow',\n        animationName: 'fade-in',\n      },\n      _closed: {\n        animationDuration: 'moderate',\n        animationName: 'fade-out',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      // The drawer comes in from the leading edge, unlike every other drawer in the library.\n      justifyContent: 'flex-start',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    content: {\n      background: 'sys/ui/sidenav/bg',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      // The close button hangs off the trailing edge, so this must not clip.\n      overflow: 'visible',\n      outline: 'none',\n      position: 'relative',\n      width: DRAWER_WIDTH,\n      // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n      // design frame is drawn at. Narrower phones give the panel up, not the button.\n      maxWidth: 'calc(100vw - 55px)',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-left-full, fade-in',\n          _rtl: 'slide-from-right-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-left-full, fade-out',\n          _rtl: 'slide-to-right-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    closeButton: {\n      alignItems: 'center',\n      display: 'flex',\n      height: rem(72),\n      insetBlockStart: 0,\n      // Sits outside the panel but stays a child of the drawer content, so the dialog's focus\n      // trap still reaches it.\n      insetInlineStart: '100%',\n      paddingInlineStart: '8',\n      position: 'absolute',\n    },\n  },\n\n  variants: {\n    layout: {\n      rail: {\n        root: {\n          paddingBlockEnd: '12',\n          // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n          // somewhere else does not drag it open.\n          transition: 'width 100ms ease-out',\n          transitionDelay: '50ms',\n          width: RAIL_WIDTH_COLLAPSED,\n          _motionReduce: {\n            transition: 'none',\n          },\n          '&[data-expanded]': {\n            transitionDelay: '100ms',\n            width: RAIL_WIDTH_EXPANDED,\n          },\n        },\n        workspace: { ...railRow, paddingInline: '16' },\n        workspaceControl: railRow,\n        workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n        item: { ...railRow, gap: '24', paddingBlock: '12' },\n        link: { ...railRow, gap: '24' },\n        footerSeparator: {\n          '[data-expanded] &': {\n            paddingInline: '16',\n          },\n        },\n        footerHeading: railRow,\n      },\n      drawer: {\n        root: {\n          // Everything below the workspace cell scrolls together rather than the navigation\n          // scrolling inside a footer that stays put — the panel is one column, not two panes.\n          overflowX: 'hidden',\n          overflowY: 'auto',\n          width: 'full',\n        },\n        workspaceRoot: {\n          // Opaque, because the rows pass underneath it rather than beside it.\n          background: 'sys/ui/sidenav/bg',\n          insetBlockStart: 0,\n          position: 'sticky',\n          zIndex: 1,\n        },\n        workspace: {\n          paddingBlock: '16',\n          paddingInlineEnd: '24',\n          paddingInlineStart: '16',\n        },\n        item: { gap: '12', paddingBlock: '16' },\n        link: { gap: '12' },\n        footer: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '12',\n          position: 'relative',\n        },\n        // A heading starts a new section inside the footer, so it carries the same rule the\n        // footer draws at its own top — laid over the gap above it rather than taking a row.\n        footerHeading: {\n          // A `label` sits right under the footer's own rule, so it only needs the rest of the\n          // 24 the design leaves above a heading.\n          paddingBlockStart: '12',\n          // A section heading opens a block of its own further down, so it carries the same rule\n          // — laid over the gap above it rather than taking a row of its own.\n          '&[data-section]': {\n            marginBlockStart: '12',\n            paddingBlockStart: '24',\n            position: 'relative',\n            _before: {\n              background: 'border/inverse',\n              content: '\"\"',\n              height: '1',\n              insetBlockStart: 0,\n              insetInline: 0,\n              opacity: 0.2,\n              position: 'absolute',\n            },\n          },\n        },\n        // Full bleed, and laid over the block's leading edge rather than in the flow: in the flow\n        // the rule's own pixel would push every block below it down by one.\n        footerSeparator: {\n          insetBlockStart: 0,\n          insetInline: 0,\n          paddingBlock: 0,\n          paddingInline: 0,\n          position: 'absolute',\n        },\n        workspaceMenu: {\n          // The panel is the whole screen, so the menu takes the height it can get rather than\n          // the desktop cap — which would leave a short list floating in a tall drawer.\n          maxHeight: 'var(--available-height)',\n          '& [data-slot=\"item-list\"]': { maxHeight: 'none' },\n        },\n        // The panel no longer clips, so a list too long for a short phone has to scroll inside\n        // its own box rather than spilling over the footer below it.\n        // Grows into the free space when the list is short, and keeps its full height when it is\n        // not — the panel scrolls instead of the rows being squeezed.\n        body: { flex: '1 0 auto', paddingBlock: '8' },\n      },\n    },\n  },\n\n  defaultVariants: {\n    layout: 'rail',\n  },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}