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

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"UISideNavWorkspaceSelector.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavWorkspaceSelector.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectTriggerProps } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useState } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {\n  /**\n   * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —\n   * a workspace always has one, unlike a plain menu item.\n   */\n  avatar?: string;\n};\n\n/**\n * The list length at which the design adds the search input. Below it the menu is short enough\n * to read at a glance and a search field would only be in the way. Exported for the stories,\n * which label each list by the side of this it falls on — not part of the package's surface.\n */\nexport const searchableFrom = 6;\n\nexport type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {\n  /**\n   * A single `BitkitSelectMenuAction` shown under the list, typically \"Create workspace\". Its\n   * presence is the toggle — there is no boolean for it.\n   */\n  children?: BitkitSelectMenuActionChild;\n  isLoading?: boolean;\n  /** The small uppercase caption above the workspace name. */\n  label?: string;\n  onValueChange?: (value: string) => void;\n  /** The selected workspace's `value`. */\n  value?: string;\n  workspaces: Array<BitkitUISideNavWorkspaceProps>;\n  // The copy is the design's, not the consumer's, so the placeholder is not on the way through.\n} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst UISideNavWorkspaceSelector = forwardRef<HTMLButtonElement, BitkitUISideNavWorkspaceSelectorProps>(\n  (props, ref) => {\n    const {\n      children,\n      css,\n      emptyHelperText,\n      emptyLabel,\n      errorHelperText,\n      errorLabel,\n      isLoading,\n      label = 'Workspace',\n      onScrolledToBottom,\n      onSearchChange,\n      onValueChange,\n      searchValue,\n      value,\n      workspaces,\n      ...rest\n    } = props;\n\n    const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();\n\n    const [ownQuery, setOwnQuery] = useState('');\n\n    // A consumer that passes `onSearchChange` is searching somewhere we cannot see — a server, a\n    // paged list — so `workspaces` is already the result and its length says nothing about how\n    // many there are. They keep the input and the filtering; otherwise both are ours.\n    const isSearchDelegated = onSearchChange !== undefined;\n    const query = isSearchDelegated ? searchValue : ownQuery;\n    const hasSearch = isSearchDelegated || workspaces.length >= searchableFrom;\n\n    const matches =\n      isSearchDelegated || !ownQuery\n        ? workspaces\n        : workspaces.filter((workspace) => workspace.label.toLowerCase().includes(ownQuery.toLowerCase()));\n\n    // `null` rather than nothing for a workspace without a logo: that is what tells the menu to\n    // draw the initials, where an absent `avatar` would leave the row with no avatar at all.\n    const items: Array<BitkitSelectMenuItemProps> = matches.map((workspace) => ({\n      ...workspace,\n      avatar: workspace.avatar ?? null,\n    }));\n\n    const collection = createListCollection({ items });\n    const selected = workspaces.find((workspace) => workspace.value === value);\n\n    return (\n      <Select.Root\n        collection={collection}\n        css={styles.workspaceRoot}\n        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\n        }}\n        onValueChange={(details) => onValueChange?.(details.value[0])}\n        // Tucked into the rail rather than hung off it: inset from the rail's edge and lapping\n        // over the workspace cell, so the menu reads as the cell unfolding.\n        positioning={\n          isMobile\n            ? { gutter: 0, offset: { crossAxis: 16 }, overflowPadding: 16 }\n            : { gutter: -8, offset: { crossAxis: 16 }, placement: 'bottom-start' }\n        }\n        size=\"lg\"\n        value={value === undefined ? undefined : [value]}\n      >\n        <Select.Control css={styles.workspaceControl}>\n          <Select.HiddenSelect />\n          <Select.Trigger ref={ref} {...rest} css={[styles.workspace, css]}>\n            {selected?.avatar ? (\n              <BitkitAvatar\n                borderColor=\"border/minimal\"\n                borderWidth=\"1\"\n                name={selected.label}\n                size=\"40\"\n                src={selected.avatar}\n                variant=\"image\"\n              />\n            ) : (\n              <BitkitAvatar\n                borderColor=\"border/minimal\"\n                borderWidth=\"1\"\n                name={selected?.label ?? ''}\n                size=\"40\"\n                variant=\"letters\"\n              />\n            )}\n            <Box css={styles.workspaceTextBlock}>\n              <Text css={styles.workspaceLabel}>{label}</Text>\n              <Text css={styles.workspaceValue}>{selected?.label}</Text>\n            </Box>\n            <Select.Indicator css={styles.workspaceChevron}>\n              <IconChevronDown />\n            </Select.Indicator>\n          </Select.Trigger>\n        </Select.Control>\n        {/*\n          In the drawer the menu goes to the panel rather than the document: the panel scrolls\n          under its own header, so a menu left in the flow would travel with the rows and be\n          clipped by them, and anywhere outside the panel is outside the dialog's focus trap.\n        */}\n        <Portal container={isMobile ? menuContainerRef : undefined}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              contentProps={{ css: styles.workspaceMenu }}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              errorHelperText={errorHelperText}\n              errorLabel={errorLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={hasSearch ? (onSearchChange ?? setOwnQuery) : undefined}\n              searchPlaceholder=\"Search your workspaces\"\n              searchValue={query}\n              size=\"lg\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    );\n  },\n);\n\nUISideNavWorkspaceSelector.displayName = 'BitkitUISideNav.WorkspaceSelector';\n\nexport default UISideNavWorkspaceSelector;\n"],"mappings":";;;;;;;;;;;AAqDA,IAAM,6BAA6B,YAChC,OAAO,QAAQ;CACd,MAAM,EACJ,UACA,KACA,iBACA,YACA,iBACA,YACA,WACA,QAAQ,aACR,oBACA,gBACA,eACA,aACA,OACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,kBAAkB,aAAa,WAAW,oBAAoB;CAEhF,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAK3C,MAAM,oBAAoB,mBAAmB,KAAA;CAC7C,MAAM,QAAQ,oBAAoB,cAAc;CAChD,MAAM,YAAY,qBAAqB,WAAW,UAAA;CASlD,MAAM,SANJ,qBAAqB,CAAC,WAClB,aACA,WAAW,QAAQ,cAAc,UAAU,MAAM,YAAY,CAAC,CAAC,SAAS,SAAS,YAAY,CAAC,CAAC,EAAA,CAI7C,KAAK,eAAe;EAC1E,GAAG;EACH,QAAQ,UAAU,UAAU;CAC9B,EAAE;CAEF,MAAM,aAAa,qBAAqB,EAAE,MAAM,CAAC;CACjD,MAAM,WAAW,WAAW,MAAM,cAAc,UAAU,UAAU,KAAK;CAEzE,OACE,qBAAC,OAAO,MAAR;EACc;EACZ,KAAK,OAAO;EACZ,eAAe,YAAY;GACzB,YAAY,QAAQ,IAAI;GACxB,IAAI,CAAC,QAAQ,MAAM,YAAY,EAAE;EACnC;EACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;EAG5D,aACE,WACI;GAAE,QAAQ;GAAG,QAAQ,EAAE,WAAW,GAAG;GAAG,iBAAiB;EAAG,IAC5D;GAAE,QAAQ;GAAI,QAAQ,EAAE,WAAW,GAAG;GAAG,WAAW;EAAe;EAEzE,MAAK;EACL,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,CAAC,KAAK;EAhBjD,UAAA,CAkBE,qBAAC,OAAO,SAAR;GAAgB,KAAK,OAAO;GAA5B,UAAA,CACE,oBAAC,OAAO,cAAR,CAAsB,CAAA,GACtB,qBAAC,OAAO,SAAR;IAAqB;IAAK,GAAI;IAAM,KAAK,CAAC,OAAO,WAAW,GAAG;IAA/D,UAAA;KACG,UAAU,SACT,oBAAC,cAAD;MACE,aAAY;MACZ,aAAY;MACZ,MAAM,SAAS;MACf,MAAK;MACL,KAAK,SAAS;MACd,SAAQ;KACT,CAAA,IAED,oBAAC,cAAD;MACE,aAAY;MACZ,aAAY;MACZ,MAAM,UAAU,SAAS;MACzB,MAAK;MACL,SAAQ;KACT,CAAA;KAEH,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAiB,UAAA;MAAY,CAAA,GAC/C,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAiB,UAAA,UAAU;MAAY,CAAA,CACtD;;KACL,oBAAC,OAAO,WAAR;MAAkB,KAAK,OAAO;MAC5B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACF,CAAA;IACJ;GACF,CAAA,CAAA;EAMhB,CAAA,GAAA,oBAAC,QAAD;GAAQ,WAAW,WAAW,mBAAmB,KAAA;GAC/C,UAAA,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;IACc;IACZ,cAAc,EAAE,KAAK,OAAO,cAAc;IACzB;IACL;IACK;IACL;IACD;IACS;IACpB,gBAAgB,YAAa,kBAAkB,cAAe,KAAA;IAC9D,mBAAkB;IAClB,aAAa;IACb,MAAK;IAEJ;GACe,CAAA,EACD,CAAA;EACb,CAAA,CACG;;AAEjB,CACF;AAEA,2BAA2B,cAAc"}
+{"version":3,"file":"UISideNavWorkspaceSelector.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavWorkspaceSelector.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectTriggerProps } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {\n  /**\n   * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —\n   * a workspace always has one, unlike a plain menu item.\n   */\n  avatar?: string;\n};\n\n/**\n * The list length at which the design adds the search input. Below it the menu is short enough\n * to read at a glance and a search field would only be in the way. Exported for the stories,\n * which label each list by the side of this it falls on — not part of the package's surface.\n */\nexport const searchableFrom = 6;\n\nexport type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {\n  /**\n   * A single `BitkitSelectMenuAction` shown under the list, typically \"Create workspace\". Its\n   * presence is the toggle — there is no boolean for it.\n   */\n  children?: BitkitSelectMenuActionChild;\n  isLoading?: boolean;\n  /** The small uppercase caption above the workspace name. */\n  label?: string;\n  onValueChange?: (value: string) => void;\n  /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */\n  value?: string;\n  workspaces: Array<BitkitUISideNavWorkspaceProps>;\n  // The copy is the design's, not the consumer's, so the placeholder is not on the way through.\n} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst UISideNavWorkspaceSelector = forwardRef<HTMLButtonElement, BitkitUISideNavWorkspaceSelectorProps>(\n  (props, ref) => {\n    const {\n      children,\n      css,\n      emptyHelperText,\n      emptyLabel,\n      errorHelperText,\n      errorLabel,\n      isLoading,\n      label = 'Workspace',\n      onScrolledToBottom,\n      onSearchChange,\n      onValueChange,\n      searchValue,\n      value,\n      workspaces,\n      ...rest\n    } = props;\n\n    const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();\n    const { contains } = useFilter({ sensitivity: 'base' });\n\n    const [ownQuery, setOwnQuery] = useState('');\n    const [currentValue, setCurrentValue] = useControllableState<string | undefined>({\n      defaultValue: undefined,\n      value,\n    });\n\n    // A consumer that passes `onSearchChange` is searching somewhere we cannot see — a server, a\n    // paged list — so `workspaces` is already the result and its length says nothing about how\n    // many there are. They keep the input and the filtering; otherwise both are ours.\n    const isSearchDelegated = onSearchChange !== undefined;\n    const query = isSearchDelegated ? searchValue : ownQuery;\n    const hasSearch = isSearchDelegated || workspaces.length >= searchableFrom;\n\n    const collection = useMemo(() => {\n      const matches = ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces;\n\n      // `null` rather than nothing for a workspace without a logo: that is what tells the menu to\n      // draw the initials, where an absent `avatar` would leave the row with no avatar at all.\n      const items: Array<BitkitSelectMenuItemProps> = matches.map((workspace) => ({\n        ...workspace,\n        avatar: workspace.avatar ?? null,\n      }));\n\n      return createListCollection({ items });\n    }, [contains, ownQuery, workspaces]);\n\n    // `workspaces` is the search result while the search is delegated, so the selected workspace\n    // can drop out of it mid-query. The cell keeps naming the workspace you are actually in.\n    const lastSelected = useRef<BitkitUISideNavWorkspaceProps>(undefined);\n    const matched = workspaces.find((workspace) => workspace.value === currentValue);\n    if (matched) lastSelected.current = matched;\n    const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : undefined);\n\n    return (\n      <Select.Root\n        collection={collection}\n        css={styles.workspaceRoot}\n        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\n        }}\n        onValueChange={(details) => {\n          setCurrentValue(details.value[0]);\n          onValueChange?.(details.value[0]);\n        }}\n        // Tucked into the rail rather than hung off it: inset from the rail's edge and lapping\n        // over the workspace cell, so the menu reads as the cell unfolding.\n        positioning={\n          isMobile\n            ? { gutter: 0, offset: { crossAxis: 16 }, overflowPadding: 16 }\n            : { gutter: -8, offset: { crossAxis: 16 }, placement: 'bottom-start' }\n        }\n        size=\"lg\"\n        value={currentValue === undefined ? [] : [currentValue]}\n      >\n        <Select.Control css={styles.workspaceControl}>\n          <Select.HiddenSelect />\n          <Select.Trigger ref={ref} unstyled {...rest} css={[styles.workspace, css]}>\n            <BitkitAvatar\n              borderColor=\"border/minimal\"\n              borderWidth=\"1\"\n              name={selected?.label ?? ''}\n              size=\"40\"\n              src={selected?.avatar ?? ''}\n              variant=\"image\"\n            />\n            <Box css={styles.workspaceTextBlock}>\n              <Text css={styles.workspaceLabel}>{label}</Text>\n              <Text css={styles.workspaceValue}>{selected?.label}</Text>\n            </Box>\n            <Select.Indicator css={styles.workspaceChevron}>\n              <IconChevronDown />\n            </Select.Indicator>\n          </Select.Trigger>\n        </Select.Control>\n        {/*\n          In the drawer the menu goes to the panel rather than the document: the panel scrolls\n          under its own header, so a menu left in the flow would travel with the rows and be\n          clipped by them, and anywhere outside the panel is outside the dialog's focus trap.\n        */}\n        <Portal container={isMobile ? menuContainerRef : undefined}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              contentProps={{ css: styles.workspaceMenu }}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              errorHelperText={errorHelperText}\n              errorLabel={errorLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={hasSearch ? (onSearchChange ?? setOwnQuery) : undefined}\n              searchPlaceholder=\"Search your workspaces\"\n              searchValue={query}\n              size=\"lg\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    );\n  },\n);\n\nUISideNavWorkspaceSelector.displayName = 'BitkitUISideNav.WorkspaceSelector';\n\nexport default UISideNavWorkspaceSelector;\n"],"mappings":"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"}

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

@@ -39,8 +39,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                     textStyle: "body/md/semibold";
                 };
             } | undefined;
-            itemList?: {
-                maxHeight: `${number}rem`;
+            content?: {
+                '--select-menu-list-max-height': `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";

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

@@ -39,8 +39,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/lg/semibold";
                 };
             };
-            itemList: {
-                maxHeight: `${number}rem`;
+            content: {
+                '--select-menu-list-max-height': `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/lg/regular";
@@ -104,8 +104,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/md/semibold";
                 };
             };
-            itemList: {
-                maxHeight: `${number}rem`;
+            content: {
+                '--select-menu-list-max-height': `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/md/regular";

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

@@ -119,6 +119,7 @@ var selectSlotRecipe = defineSlotRecipe({
 		},
 		itemList: {
 			flex: "1 1 auto",
+			maxHeight: "var(--select-menu-list-max-height)",
 			minHeight: 0,
 			overflowY: "auto",
 			paddingBlock: "8"
@@ -167,11 +168,9 @@ var selectSlotRecipe = defineSlotRecipe({
 		},
 		errorLabel: {
 			color: "text/body",
-			whiteSpace: "nowrap",
-			overflow: "hidden",
-			textOverflow: "ellipsis",
 			maxWidth: "100%",
-			minWidth: 0
+			minWidth: 0,
+			truncate: true
 		},
 		itemIcon: {
 			color: "icon/secondary",
@@ -328,7 +327,7 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				itemList: { maxHeight: rem(280) },
+				content: { "--select-menu-list-max-height": rem(280) },
 				itemLabel: {
 					textStyle: "body/lg/regular",
 					lineHeight: "normal"
@@ -371,7 +370,7 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				itemList: { maxHeight: rem(236) },
+				content: { "--select-menu-list-max-height": rem(236) },
 				itemLabel: {
 					textStyle: "body/md/regular",
 					lineHeight: "normal"

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

@@ -1 +1 @@
-{"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n  className: 'select',\n  slots: [\n    ...selectAnatomy.keys(),\n    'searchInputGroup',\n    'searchInput',\n    'searchClear',\n    'actionContainer',\n    'action',\n    'checkbox',\n    'checkmark',\n    'itemList',\n    'itemContent',\n    'itemBadge',\n    'itemIcon',\n    'valueIcon',\n    'avatar',\n    'itemLabel',\n    'itemHelperText',\n    'itemLoading',\n    'itemLoadingLabel',\n    'emptyState',\n    'errorState',\n    'errorIcon',\n    'errorTextBlock',\n    'errorLabel',\n  ],\n  base: {\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n      // The indicator group below is offset the same way on the end side.\n      paddingInlineStart: rem(15),\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\n      cursor: 'pointer',\n      userSelect: 'none',\n      textAlign: 'start',\n      focusVisibleRing: 'inside',\n      width: '100%',\n      _open: {\n        borderColor: 'border/focus',\n      },\n      _placeholderShown: {\n        color: 'text/secondary',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetEnd: 0,\n      top: 0,\n      bottom: 0,\n      paddingInlineStart: '16',\n      paddingInlineEnd: rem(15),\n      pointerEvents: 'none',\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n    ...base,\n    content: {\n      ...base.content,\n      overflow: 'hidden',\n      display: 'flex',\n      flexDirection: 'column',\n      // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n      // menu is never narrower than the Select input — but can grow wider for long items.\n      minWidth: 'var(--reference-width)',\n      maxWidth: rem(800),\n      focusVisibleRing: 'none',\n    },\n    item: {\n      ...base.item,\n      _active: {\n        background: 'background/active',\n      },\n      _selected: {\n        background: 'background/selected',\n        _highlighted: {\n          background: 'background/selected-hover',\n        },\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        color: 'text/disabled',\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n    },\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    valueText: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      flex: '1 1 0',\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n    itemList: {\n      flex: '1 1 auto',\n      minHeight: 0,\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    itemContent: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    itemBadge: {\n      display: 'inline-flex',\n      flexShrink: 0,\n    },\n    itemLoading: {\n      flexShrink: 0,\n    },\n    itemLoadingLabel: {\n      color: 'text/secondary',\n      flex: '1 0 0',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    emptyState: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      paddingInline: '16',\n    },\n    errorState: {\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '24',\n    },\n    errorIcon: {\n      color: 'icon/negative',\n      flexShrink: 0,\n    },\n    errorTextBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: 1,\n      minWidth: 0,\n    },\n    errorLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      '[data-state=\"checked\"] &': {\n        color: 'icon/interactive',\n      },\n    },\n    // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n    // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n    valueIcon: {\n      color: 'icon/secondary',\n      '[data-disabled] &': { color: 'icon/disabled' },\n      '[data-readonly] &': { color: 'icon/on-disabled' },\n    },\n    avatar: {\n      flexShrink: 0,\n      '[data-disabled] &': { opacity: 0.5 },\n    },\n    itemLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    itemHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    checkbox: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      borderWidth: '1',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      background: 'background/primary',\n      boxShadow: 'inset/field',\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        background: 'input/checkbox/selection',\n        borderColor: 'input/checkbox/selection',\n        boxShadow: 'none',\n      },\n      '[data-disabled] &': {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n      },\n    },\n    checkmark: {\n      opacity: 0,\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        opacity: 1,\n      },\n    },\n    searchInputGroup: {\n      borderBottom: '1px solid',\n      borderColor: 'border/minimal',\n      background: 'background/primary',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '12',\n      overflow: 'hidden',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/secondary',\n      },\n      _focusWithin: {\n        background: 'background/primary',\n      },\n    },\n    searchInput: {\n      flex: '1 0 0',\n      minWidth: 0,\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      paddingInline: 0,\n      paddingBlock: 0,\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n    },\n    searchClear: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/hover',\n      },\n    },\n    actionContainer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingBlock: '8',\n      flexShrink: 0,\n    },\n    action: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n      color: 'text/primary',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      _icon: {\n        color: 'icon/secondary',\n      },\n      _hover: {\n        background: 'button/secondary/bg-hover',\n        _active: {\n          background: 'button/secondary/bg-active',\n        },\n      },\n      _active: {\n        background: 'button/secondary/bg-active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 48px item + 16px paddingBlock\n          maxHeight: rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        errorState: {\n          paddingBlock: '8',\n        },\n        errorLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          maxHeight: rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        errorState: {\n          paddingBlock: '4',\n        },\n        errorLabel: {\n          textStyle: 'body/md/regular',\n        },\n        errorIcon: {\n          marginBlockStart: '4',\n        },\n        errorTextBlock: {\n          paddingBlock: '2',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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AAK;KACP;IACF;IACA,UAAU,EAER,WAAW,IAAI,GAAG,EACpB;IACA,WAAW;KACT,WAAW;KACX,YAAY;IACd;IACA,kBAAkB,EAChB,WAAW,kBACb;IACA,YAAY,EACV,cAAc,KAChB;IACA,YAAY,EACV,cAAc,IAChB;IACA,YAAY,EACV,WAAW,kBACb;IACA,QAAQ;KACN,WAAW;KACX,cAAc;KACd,WAAW;KACX,YAAY;IACd;IACA,kBAAkB;KAChB,QAAQ,IAAI,EAAE;KACd,cAAc;IAChB;IACA,aAAa,EACX,WAAW,kBACb;IACA,aAAa,EACX,SAAS,IACX;GACF;GACA,IAAI;IACF,GAAG,SAAS,KAAK;IACjB,UAAU;KACR,OAAO;KACP,QAAQ;IACV;IACA,MAAM;KACJ,GAAG,SAAS,KAAK,GAAG;KACpB,iCAA+B;MAC7B,oBAAoB;MACpB,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;KACA,mCAAiC;MAC/B,WAAW;MACX,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;IACF;IACA,UAAU,EAER,WAAW,IAAI,GAAG,EACpB;IACA,WAAW;KACT,WAAW;KACX,YAAY;IACd;IACA,kBAAkB,EAChB,WAAW,kBACb;IACA,YAAY,EACV,cAAc,IAChB;IACA,YAAY,EACV,cAAc,IAChB;IACA,YAAY,EACV,WAAW,kBACb;IACA,WAAW,EACT,kBAAkB,IACpB;IACA,gBAAgB,EACd,cAAc,IAChB;IACA,QAAQ;KACN,WAAW;KACX,cAAc;KACd,WAAW;KACX,YAAY;IACd;IACA,SAAS;KACP,WAAW;KACX,cAAc,IAAI,CAAC;KACnB,iCAA+B;MAAE,cAAc,IAAI,CAAC;MAAG,oBAAoB,IAAI,EAAE;KAAE;IACrF;IACA,kBAAkB;KAChB,QAAQ;KACR,cAAc;IAChB;IACA,aAAa,EACX,WAAW,kBACb;IACA,aAAa,EACX,SAAS,IACX;GACF;EACF;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n  className: 'select',\n  slots: [\n    ...selectAnatomy.keys(),\n    'searchInputGroup',\n    'searchInput',\n    'searchClear',\n    'actionContainer',\n    'action',\n    'checkbox',\n    'checkmark',\n    'itemList',\n    'itemContent',\n    'itemBadge',\n    'itemIcon',\n    'valueIcon',\n    'avatar',\n    'itemLabel',\n    'itemHelperText',\n    'itemLoading',\n    'itemLoadingLabel',\n    'emptyState',\n    'errorState',\n    'errorIcon',\n    'errorTextBlock',\n    'errorLabel',\n  ],\n  base: {\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n      // The indicator group below is offset the same way on the end side.\n      paddingInlineStart: rem(15),\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\n      cursor: 'pointer',\n      userSelect: 'none',\n      textAlign: 'start',\n      focusVisibleRing: 'inside',\n      width: '100%',\n      _open: {\n        borderColor: 'border/focus',\n      },\n      _placeholderShown: {\n        color: 'text/secondary',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetEnd: 0,\n      top: 0,\n      bottom: 0,\n      paddingInlineStart: '16',\n      paddingInlineEnd: rem(15),\n      pointerEvents: 'none',\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n    ...base,\n    content: {\n      ...base.content,\n      overflow: 'hidden',\n      display: 'flex',\n      flexDirection: 'column',\n      // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n      // menu is never narrower than the Select input — but can grow wider for long items.\n      minWidth: 'var(--reference-width)',\n      maxWidth: rem(800),\n      focusVisibleRing: 'none',\n    },\n    item: {\n      ...base.item,\n      _active: {\n        background: 'background/active',\n      },\n      _selected: {\n        background: 'background/selected',\n        _highlighted: {\n          background: 'background/selected-hover',\n        },\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        color: 'text/disabled',\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n    },\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    valueText: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      flex: '1 1 0',\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n    itemList: {\n      flex: '1 1 auto',\n      maxHeight: 'var(--select-menu-list-max-height)',\n      minHeight: 0,\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    itemContent: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    itemBadge: {\n      display: 'inline-flex',\n      flexShrink: 0,\n    },\n    itemLoading: {\n      flexShrink: 0,\n    },\n    itemLoadingLabel: {\n      color: 'text/secondary',\n      flex: '1 0 0',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    emptyState: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      paddingInline: '16',\n    },\n    errorState: {\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '24',\n    },\n    errorIcon: {\n      color: 'icon/negative',\n      flexShrink: 0,\n    },\n    errorTextBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: 1,\n      minWidth: 0,\n    },\n    errorLabel: {\n      color: 'text/body',\n      maxWidth: '100%',\n      minWidth: 0,\n      truncate: true,\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      '[data-state=\"checked\"] &': {\n        color: 'icon/interactive',\n      },\n    },\n    // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n    // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n    valueIcon: {\n      color: 'icon/secondary',\n      '[data-disabled] &': { color: 'icon/disabled' },\n      '[data-readonly] &': { color: 'icon/on-disabled' },\n    },\n    avatar: {\n      flexShrink: 0,\n      '[data-disabled] &': { opacity: 0.5 },\n    },\n    itemLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    itemHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    checkbox: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      borderWidth: '1',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      background: 'background/primary',\n      boxShadow: 'inset/field',\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        background: 'input/checkbox/selection',\n        borderColor: 'input/checkbox/selection',\n        boxShadow: 'none',\n      },\n      '[data-disabled] &': {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n      },\n    },\n    checkmark: {\n      opacity: 0,\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        opacity: 1,\n      },\n    },\n    searchInputGroup: {\n      borderBottom: '1px solid',\n      borderColor: 'border/minimal',\n      background: 'background/primary',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '12',\n      overflow: 'hidden',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/secondary',\n      },\n      _focusWithin: {\n        background: 'background/primary',\n      },\n    },\n    searchInput: {\n      flex: '1 0 0',\n      minWidth: 0,\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      paddingInline: 0,\n      paddingBlock: 0,\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n    },\n    searchClear: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/hover',\n      },\n    },\n    actionContainer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingBlock: '8',\n      flexShrink: 0,\n    },\n    action: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n      color: 'text/primary',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      _icon: {\n        color: 'icon/secondary',\n      },\n      _hover: {\n        background: 'button/secondary/bg-hover',\n        _active: {\n          background: 'button/secondary/bg-active',\n        },\n      },\n      _active: {\n        background: 'button/secondary/bg-active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        content: {\n          // 5.5 × 48px item + 16px paddingBlock\n          '--select-menu-list-max-height': rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        errorState: {\n          paddingBlock: '8',\n        },\n        errorLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        content: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          '--select-menu-list-max-height': rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        errorState: {\n          paddingBlock: '4',\n        },\n        errorLabel: {\n          textStyle: 'body/md/regular',\n        },\n        errorIcon: {\n          marginBlockStart: '4',\n        },\n        errorTextBlock: {\n          paddingBlock: '2',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 /**
  * 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.
+ * pushing it, so this is the gutter a layout reserves beside the navigation.
  */
 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", {
@@ -84,13 +83,13 @@ declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefiniti
                     paddingBlockStart: "24";
                     position: "relative";
                     _before: {
-                        background: "border/inverse";
-                        content: "\"\"";
-                        height: "1";
                         insetBlockStart: number;
                         insetInline: number;
-                        opacity: number;
                         position: "absolute";
+                        background: "border/inverse";
+                        content: "\"\"";
+                        height: "1";
+                        opacity: 0.2;
                     };
                 };
             };
@@ -103,9 +102,7 @@ declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefiniti
             };
             workspaceMenu: {
                 maxHeight: "var(--available-height)";
-                '& [data-slot="item-list"]': {
-                    maxHeight: "none";
-                };
+                '--select-menu-list-max-height': "none";
             };
             body: {
                 flex: "1 0 auto";

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

@@ -1,31 +1,22 @@
 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.
+* pushing it, so this is the gutter a layout reserves beside the navigation.
 */
 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 hairline = {
+	background: "border/inverse",
+	content: "\"\"",
+	height: "1",
+	opacity: .2
+};
 var uiSideNavSlotRecipe = defineSlotRecipe({
 	className: "ui-side-nav",
 	slots: [
@@ -71,7 +62,6 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			alignItems: "center",
 			background: "sys/ui/sidenav/item/bg",
 			borderRadius: 0,
-			borderWidth: 0,
 			color: "text/on-color",
 			cursor: "pointer",
 			display: "flex",
@@ -83,12 +73,9 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			textAlign: "start",
 			width: "full",
 			_after: {
-				background: "border/inverse",
-				content: "\"\"",
-				height: "1",
+				...hairline,
 				insetBlockEnd: 0,
 				insetInline: 0,
-				opacity: .2,
 				position: "absolute"
 			},
 			_hover: {
@@ -97,12 +84,6 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			},
 			_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"
@@ -120,14 +101,14 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		},
 		workspaceValue: {
 			opacity: .8,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			textStyle: "body/lg/regular"
+			textStyle: "body/lg/regular",
+			truncate: true
 		},
 		workspaceChevron: {
+			color: "text/on-color",
 			flexShrink: 0,
 			transition: "rotate 150ms ease-out",
-			"&[data-state=\"open\"]": { rotate: "180deg" },
+			_open: { rotate: "180deg" },
 			_motionReduce: { transition: "none" }
 		},
 		body: {
@@ -158,7 +139,7 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 				background: "sys/ui/sidenav/item/bg-active",
 				color: "sys/ui/sidenav/item/fg-active"
 			},
-			"&[data-selected]": {
+			_selected: {
 				background: "sys/ui/sidenav/item/bg-selected",
 				color: "sys/ui/sidenav/item/fg-active",
 				_hover: {
@@ -173,9 +154,8 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		itemLabel: {
 			flex: 1,
 			minWidth: 0,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			textStyle: "body/lg/semibold"
+			textStyle: "body/lg/semibold",
+			truncate: true
 		},
 		itemIndicator: {
 			background: "sys/ui/sidenav/item/indicator",
@@ -190,20 +170,13 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			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: "\"\"",
+				...hairline,
 				display: "block",
-				height: "1",
-				opacity: .2,
 				width: "full"
 			}
 		},
@@ -215,8 +188,6 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			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",
@@ -256,21 +227,18 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		linkLabel: {
 			flex: 1,
 			minWidth: 0,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
 			textStyle: "body/lg/regular",
+			truncate: true,
 			"[data-with-secondary] &": {
 				flex: "none",
 				textStyle: "body/md/semibold"
 			}
 		},
 		linkSecondaryText: {
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			textStyle: "body/sm/regular"
+			textStyle: "body/sm/regular",
+			truncate: true
 		},
 		linkIcon: { flexShrink: 0 },
-		/** Wraps the icon so the status dot can hang off its trailing bottom corner. */
 		linkIconBlock: {
 			display: "flex",
 			flexShrink: 0,
@@ -279,8 +247,8 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		linkStatusDot: {
 			borderRadius: "full",
 			height: "8",
-			insetBlockEnd: "-2px",
-			insetInlineEnd: "-4px",
+			insetBlockEnd: "-2",
+			insetInlineEnd: "-4",
 			position: "absolute",
 			width: "8",
 			"&[data-status=\"neutral\"]": { background: "sys/ui/sidenav/badge/neutral" },
@@ -316,8 +284,8 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			display: "flex",
 			flexDirection: "column",
 			maxHeight: "100dvh",
-			overflow: "visible",
 			outline: "none",
+			overflow: "visible",
 			position: "relative",
 			width: DRAWER_WIDTH,
 			maxWidth: "calc(100vw - 55px)",
@@ -413,12 +381,9 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 					paddingBlockStart: "24",
 					position: "relative",
 					_before: {
-						background: "border/inverse",
-						content: "\"\"",
-						height: "1",
+						...hairline,
 						insetBlockStart: 0,
 						insetInline: 0,
-						opacity: .2,
 						position: "absolute"
 					}
 				}
@@ -432,7 +397,7 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			},
 			workspaceMenu: {
 				maxHeight: "var(--available-height)",
-				"& [data-slot=\"item-list\"]": { maxHeight: "none" }
+				"--select-menu-list-max-height": "none"
 			},
 			body: {
 				flex: "1 0 auto",

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

@@ -1 +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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"}
+{"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\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.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n  background: 'border/inverse',\n  content: '\"\"',\n  height: '1',\n  opacity: 0.2,\n} as const;\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      height: 'full',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n    workspace: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      // Preflight zeroes every border width but not the radius a native button can still draw.\n      borderRadius: 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      _after: {\n        ...hairline,\n        insetBlockEnd: 0,\n        insetInline: 0,\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    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      opacity: 0.6,\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    workspaceValue: {\n      opacity: 0.8,\n      textStyle: 'body/lg/regular',\n      truncate: true,\n    },\n    workspaceChevron: {\n      color: 'text/on-color',\n      flexShrink: 0,\n      transition: 'rotate 150ms ease-out',\n      _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      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      _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      _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      textStyle: 'body/lg/semibold',\n      truncate: true,\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      marginBlockStart: 'auto',\n    },\n    footerSeparator: {\n      flexShrink: 0,\n      paddingBlock: '8',\n      paddingInline: '12',\n      _before: {\n        ...hairline,\n        display: 'block',\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    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      '&[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      textStyle: 'body/lg/regular',\n      truncate: true,\n      '[data-with-secondary] &': {\n        flex: 'none',\n        textStyle: 'body/md/semibold',\n      },\n    },\n    linkSecondaryText: {\n      textStyle: 'body/sm/regular',\n      truncate: true,\n    },\n    linkIcon: {\n      flexShrink: 0,\n    },\n    linkIconBlock: {\n      display: 'flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    linkStatusDot: {\n      borderRadius: 'full',\n      height: '8',\n      insetBlockEnd: '-2',\n      insetInlineEnd: '-4',\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      outline: 'none',\n      // The close button hangs off the trailing edge, so the panel must not clip it.\n      overflow: 'visible',\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      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          overflowX: 'hidden',\n          overflowY: 'auto',\n          width: 'full',\n        },\n        workspaceRoot: {\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        footerHeading: {\n          paddingBlockStart: '12',\n          '&[data-section]': {\n            marginBlockStart: '12',\n            paddingBlockStart: '24',\n            position: 'relative',\n            _before: {\n              ...hairline,\n              insetBlockStart: 0,\n              insetInline: 0,\n              position: 'absolute',\n            },\n          },\n        },\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          '--select-menu-list-max-height': 'none',\n        },\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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"}