@bitrise/bitkit-v2 0.3.502-beta.3240 → 0.3.502-beta.3244

package/dist/theme/recipes/index.js

@@ -4,6 +4,7 @@ import textareaRecipe from "./Textarea.recipe.js";
 import badgeRecipe from "./Badge.recipe.js";
 import buttonRecipe from "./Button.recipe.js";
 import closeButtonRecipe from "./CloseButton.recipe.js";
+import contentWrapperRecipe from "./ContentWrapper.recipe.js";
 import controlButtonRecipe from "./ControlButton.recipe.js";
 import definitionTooltipRecipe from "./DefinitionTooltip.recipe.js";
 import iconRecipe from "./Icon.recipe.js";
@@ -23,6 +24,7 @@ var recipes = {
 	closeButton: closeButtonRecipe,
 	controlButton: controlButtonRecipe,
 	colorButton: colorButtonRecipe,
+	contentWrapper: contentWrapperRecipe,
 	definitionTooltip: definitionTooltipRecipe,
 	icon: iconRecipe,
 	input: inputRecipe,

package/dist/theme/recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\nimport uiHeaderButtonRecipe from './UIHeaderButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n  uiHeaderButton: uiHeaderButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;CACd,gBAAgB;AAClB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport contentWrapperRecipe from './ContentWrapper.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\nimport uiHeaderButtonRecipe from './UIHeaderButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  contentWrapper: contentWrapperRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n  uiHeaderButton: uiHeaderButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,gBAAgB;CAChB,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;CACd,gBAAgB;AAClB"}

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

@@ -27,13 +27,5 @@ declare const filterSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             };
         };
     };
-    contentAlign: {
-        center: {};
-        start: {
-            root: {
-                justifyContent: "flex-start";
-            };
-        };
-    };
 }>;
 export default filterSlotRecipe;

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

@@ -619,36 +619,30 @@ var filterSlotRecipe = defineSlotRecipe({
 			width: "48"
 		}
 	},
-	variants: {
-		pageLayout: {
-			capped: {
-				root: {
-					borderBlockEndWidth: "1",
-					borderColor: "border/regular",
-					paddingBlock: "12"
-				},
-				content: { paddingInline: {
-					base: "16",
-					tablet: "32"
-				} }
+	variants: { pageLayout: {
+		capped: {
+			root: {
+				borderBlockEndWidth: "1",
+				borderColor: "border/regular",
+				paddingBlock: "12"
 			},
-			full: {
-				root: {
-					borderBlockEndWidth: "1",
-					borderColor: "border/regular",
-					paddingBlock: "12"
-				},
-				content: { paddingInline: {
-					base: "16",
-					tablet: "32"
-				} }
-			}
-		},
-		contentAlign: {
-			center: {},
-			start: { root: { justifyContent: "flex-start" } }
+			content: { paddingInline: {
+				base: "16",
+				tablet: "32"
+			} }
+		},
+		full: {
+			root: {
+				borderBlockEndWidth: "1",
+				borderColor: "border/regular",
+				paddingBlock: "12"
+			},
+			content: { paddingInline: {
+				base: "16",
+				tablet: "32"
+			} }
 		}
-	}
+	} }
 });
 //#endregion
 export { filterSlotRecipe as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Filter.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst chipButton: SystemStyleObject = {\n  alignItems: 'center',\n  alignSelf: 'stretch',\n  display: 'flex',\n  _hover: {\n    background: 'background/hover',\n    _active: {\n      background: 'background/active',\n    },\n  },\n  _active: {\n    background: 'background/active',\n  },\n  _disabled: {\n    cursor: 'not-allowed',\n    '& :is(span, svg)': {\n      color: 'text/disabled',\n    },\n    _hover: {\n      background: 'transparent',\n    },\n  },\n};\n\n// The keyboard focus ring for a wrapper whose input has no outline of its own. Chakra's `focusRing`\n// only fires on the focused element itself, so the global ring variables are applied directly.\nconst wrapperFocusRing: SystemStyleObject = {\n  outlineColor: 'var(--focus-ring-color)',\n  outlineOffset: 'var(--focus-ring-offset)',\n  outlineStyle: 'var(--focus-ring-style)',\n  outlineWidth: 'var(--focus-ring-width)',\n};\n\nconst switchItemDisabled: SystemStyleObject = {\n  color: 'text/disabled',\n  cursor: 'not-allowed',\n  '& svg': {\n    color: 'icon/disabled',\n  },\n  _hover: {\n    background: 'transparent',\n    color: 'text/disabled',\n    _active: {\n      background: 'transparent',\n    },\n  },\n  _active: {\n    background: 'transparent',\n  },\n  _checked: {\n    _hover: {\n      background: 'background/primary',\n      _active: {\n        background: 'background/primary',\n      },\n    },\n    _active: {\n      background: 'background/primary',\n    },\n  },\n};\n\nconst filterSlotRecipe = defineSlotRecipe({\n  className: 'filter',\n  slots: [\n    'root',\n    'content',\n    'filters',\n    'icon',\n    'items',\n    'searchBlock',\n    'search',\n    'searchInput',\n    'switch',\n    'switchItem',\n    'switchItemText',\n    'chip',\n    'chipTrigger',\n    'chipLabel',\n    'chipValue',\n    'chipIcon',\n    'chipChevron',\n    'chipRemove',\n    'popoverContent',\n    'addMenu',\n    'addMenuItem',\n    'addMenuLabel',\n    'addMenuIcon',\n    'addSheetBackdrop',\n    'addSheetPositioner',\n    'addSheet',\n    'addSheetItem',\n    'addSheetItemReason',\n    'calendarFooter',\n    'popoverSearch',\n    'popoverBody',\n    'popoverFooter',\n    'popoverFooterStart',\n    'checkboxList',\n    'listHelperText',\n    'loading',\n    'pattern',\n    'patternResults',\n    'patternResultsLabel',\n    'mobileBar',\n    'mobileTrigger',\n    'mobileSearch',\n    'mobileSearchInput',\n    'mobileHeader',\n    'mobileTitle',\n    'mobilePanelHeader',\n    'mobilePanelOverline',\n    'mobilePanelTitle',\n    'mobileBody',\n    'mobileFooter',\n    'mobileListCheck',\n    'mobileListCheckbox',\n    'field',\n    'fieldLabel',\n    'fieldControl',\n    'fieldTrigger',\n    'fieldIcon',\n    'fieldValue',\n    'fieldChevron',\n    'fieldRemove',\n  ],\n  base: {\n    // No padding of its own: placed like any block, its edges line up with what's around it.\n    root: {\n      background: 'background/primary',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    content: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '1',\n      gap: '16',\n      minWidth: 0,\n    },\n    filters: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '1',\n      gap: '12',\n      minWidth: 0,\n    },\n    icon: {\n      color: 'icon/tertiary',\n      // Flex, so the inline svg's line box adds no extra height.\n      display: 'flex',\n      flexShrink: 0,\n      padding: '4',\n    },\n    items: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: '1',\n      flexWrap: 'wrap',\n      gap: '12',\n      minWidth: 0,\n    },\n    searchBlock: {\n      alignSelf: 'stretch',\n      borderColor: 'border/minimal',\n      borderInlineStartWidth: '1',\n      display: 'flex',\n      flexShrink: 0,\n      paddingInlineStart: '16',\n    },\n    search: {\n      alignItems: 'center',\n      background: 'background/primary',\n      borderRadius: '4',\n      cursor: 'text',\n      color: 'icon/tertiary',\n      display: 'flex',\n      gap: '8',\n      // As tall as the chips, so the bar is no taller than a row of them.\n      height: '32',\n      paddingInline: '8',\n      width: rem(148),\n      _hover: {\n        background: 'background/secondary',\n      },\n      '&:has(input:focus-visible)': wrapperFocusRing,\n    },\n    searchInput: {\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      flex: '1',\n      minWidth: 0,\n      outline: 'none',\n      textStyle: 'body/md/regular',\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n      // The clear button replaces the native cancel glyph of `type=\"search\"`.\n      '&::-webkit-search-cancel-button': {\n        appearance: 'none',\n      },\n    },\n    switch: {\n      background: 'background/secondary',\n      borderRadius: '4',\n      display: 'inline-flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    switchItem: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'text/secondary',\n      cursor: 'pointer',\n      display: 'flex',\n      gap: '4',\n      height: '32',\n      paddingInline: '8',\n      position: 'relative',\n      textStyle: 'body/md/regular',\n      whiteSpace: 'nowrap',\n      // An item's own `iconColor` is left alone, except when disabled.\n      '& svg:not([data-own-color])': {\n        color: 'icon/tertiary',\n      },\n      // Divider after an unselected item, hidden next to the selected or hovered one.\n      _after: {\n        background: 'border/regular',\n        content: '\"\"',\n        height: '16',\n        insetInlineEnd: 0,\n        position: 'absolute',\n        top: '8',\n        width: '1',\n      },\n      '&:last-of-type, &[data-state=checked], &:hover, &:has(+ [data-state=checked]), &:has(+ :hover)': {\n        _after: {\n          display: 'none',\n        },\n      },\n      '&:has(input:focus-visible)': wrapperFocusRing,\n      _hover: {\n        background: 'background/hover',\n        color: 'text/primary',\n        '& svg:not([data-own-color])': {\n          color: 'icon/secondary',\n        },\n        _active: {\n          background: 'background/active',\n        },\n      },\n      _active: {\n        background: 'background/active',\n        color: 'text/primary',\n      },\n      _checked: {\n        background: 'background/primary',\n        // Inset, so the selected item is no taller than the others.\n        boxShadow: 'inset 0 0 0 1px var(--colors-border\\\\/strong)',\n        color: 'text/primary',\n        '& svg:not([data-own-color])': {\n          color: 'icon/secondary',\n        },\n        _hover: {\n          background: 'background/primary',\n        },\n      },\n      // Read-only while the page loads, so the item keeps a focus handed to it; it looks disabled.\n      _disabled: switchItemDisabled,\n      _readOnly: switchItemDisabled,\n    },\n    switchItemText: {\n      paddingInline: '4',\n    },\n    chip: {\n      alignItems: 'center',\n      background: 'background/primary',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderWidth: '1',\n      display: 'inline-flex',\n      height: '32',\n      maxWidth: rem(320),\n      minWidth: 0,\n      overflow: 'hidden',\n      textStyle: 'body/md/regular',\n      '&:has(button:is(:disabled, [aria-disabled=true]))': {\n        borderColor: 'border/disabled',\n      },\n      // The chip's popover is open: Zag marks the trigger inside it as expanded.\n      '&:has([aria-expanded=true])': {\n        boxShadow: '0 0 0 0.125rem var(--focus-ring-color)',\n        // Figma's selected chip stays white, even under the pointer that just opened it.\n        '& button, & button:hover': {\n          background: 'background/primary',\n        },\n      },\n      // The date chip's trigger sits inside the calendar's root and control divs; they stretch like a direct child would.\n      '& [data-scope=date-picker]:is([data-part=root], [data-part=control])': {\n        alignSelf: 'stretch',\n        flex: '1',\n        minWidth: 0,\n      },\n    },\n    chipTrigger: {\n      ...chipButton,\n      flex: '1',\n      gap: '4',\n      minWidth: 0,\n      paddingInlineEnd: '8',\n      paddingInlineStart: '12',\n      whiteSpace: 'nowrap',\n      '&:has([data-chip-icon])': {\n        paddingInlineStart: '8',\n      },\n      '&:is(:hover, :active) [data-chip-icon]': {\n        color: 'icon/secondary',\n      },\n    },\n    chipLabel: {\n      color: 'text/secondary',\n      flexShrink: 0,\n    },\n    chipValue: {\n      color: 'text/body',\n      minWidth: 0,\n      truncate: true,\n    },\n    chipIcon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n      marginInlineEnd: '4',\n    },\n    chipChevron: {\n      color: 'icon/primary',\n      flexShrink: 0,\n      marginInlineStart: '8',\n    },\n    chipRemove: {\n      ...chipButton,\n      color: 'icon/primary',\n      flexShrink: 0,\n      paddingInlineEnd: '8',\n      paddingInlineStart: '4',\n    },\n    popoverContent: {\n      // The popover's 60vh cap, or less where the space next to the bar is shorter.\n      maxHeight: 'min(60vh, var(--available-height, 60vh))',\n      // As wide as its content: at least its chip and 320px, at most 800px.\n      maxWidth: rem(800),\n      minWidth: 'max(var(--reference-width, 0px), 20rem)',\n      width: 'max-content',\n      // The wildcard pattern's explanation would otherwise stretch it to its widest.\n      '&:has([data-filter-pattern])': {\n        width: rem(480),\n      },\n      // The footer's top padding is the gap under the list, so the list adds none of its own.\n      '& [data-scope=listbox][data-part=content]': {\n        paddingBlockEnd: 0,\n      },\n    },\n    addMenu: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: 'var(--available-height)',\n      outline: 'none',\n      overflowY: 'auto',\n      paddingBlock: '8',\n      width: rem(240),\n      zIndex: 'popover',\n    },\n    addMenuItem: {\n      alignItems: 'center',\n      color: 'text/body',\n      cursor: 'pointer',\n      display: 'flex',\n      gap: '4',\n      minHeight: '40',\n      paddingBlock: '8',\n      paddingInline: '16',\n      textStyle: 'body/md/regular',\n      userSelect: 'none',\n      _highlighted: {\n        background: 'background/hover',\n        _active: {\n          background: 'background/active',\n        },\n      },\n      _active: {\n        background: 'background/active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _highlighted: {\n          background: 'transparent',\n        },\n        // Not applicable yet: `aria-disabled` but reachable, so the keyboard highlight still shows.\n        '&[data-not-applicable]': {\n          color: 'text/tertiary',\n          _highlighted: {\n            background: 'background/hover',\n          },\n        },\n      },\n      // The chevron only shows on the row under the pointer or keyboard.\n      '&:not([data-highlighted]) [data-add-chevron]': {\n        visibility: 'hidden',\n      },\n    },\n    addMenuLabel: {\n      color: 'text/tertiary',\n      paddingBlock: '8',\n      paddingInline: '16',\n      textStyle: 'heading/h6',\n    },\n    addMenuIcon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n      marginInlineStart: 'auto',\n    },\n    addSheetBackdrop: {\n      background: 'utilities/overlay-light',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n    },\n    addSheetPositioner: {\n      alignItems: 'flex-end',\n      display: 'flex',\n      inset: 0,\n      justifyContent: 'stretch',\n      padding: '16',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    addSheet: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      maxHeight: '80dvh',\n      outline: 'none',\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    addSheetItem: {\n      ...chipButton,\n      alignSelf: 'auto',\n      color: 'text/body',\n      gap: '12',\n      minHeight: '48',\n      paddingBlock: '8',\n      paddingInline: '16',\n      textAlign: 'start',\n      textStyle: 'body/lg/regular',\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _hover: {\n          background: 'transparent',\n        },\n        '&[data-not-applicable]': {\n          color: 'text/tertiary',\n          '& :is(span, svg)': {\n            color: 'text/tertiary',\n          },\n        },\n      },\n    },\n    addSheetItemReason: {\n      color: 'text/tertiary',\n      textStyle: 'body/sm/regular',\n    },\n    calendarFooter: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '8',\n      marginBlockStart: '24',\n    },\n    popoverSearch: {\n      flexShrink: 0,\n      paddingBlockEnd: '8',\n      paddingBlockStart: '8',\n      paddingInline: '12',\n    },\n    // When the popover is capped by the space available, the list (or pattern results) gives way and\n    // scrolls on its own, rather than running under the footer: every part may shrink below its content.\n    popoverBody: {\n      display: 'flex',\n      flexDirection: 'column',\n      minHeight: 0,\n      '& > *, & [data-scope=listbox]:is([data-part=root], [data-part=content])': {\n        minHeight: 0,\n      },\n      '& [data-scope=listbox][data-part=root]': {\n        display: 'flex',\n        flexDirection: 'column',\n      },\n    },\n    popoverFooter: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '8',\n      paddingBlockEnd: '16',\n      paddingBlockStart: '24',\n      paddingInline: '16',\n    },\n    popoverFooterStart: {\n      flex: '1',\n    },\n    checkboxList: {\n      maxHeight: rem(200),\n      overflowY: 'auto',\n      // Room for the last checkbox's check mark, drawn 1px past its box, so a short list doesn't scroll.\n      paddingBlockEnd: '1',\n      paddingBlockStart: '8',\n      paddingInline: '20',\n      // An option's icon: secondary, primary while hovered, interactive once checked.\n      '& [data-option-icon]': {\n        color: 'icon/secondary',\n      },\n      '& [data-scope=checkbox][data-part=root]:hover [data-option-icon]': {\n        color: 'icon/primary',\n      },\n      '& [data-scope=checkbox][data-part=root][data-state=checked] [data-option-icon]': {\n        color: 'icon/interactive',\n      },\n    },\n    listHelperText: {\n      color: 'text/secondary',\n      textStyle: 'body/sm/regular',\n    },\n    loading: {\n      paddingBlock: '8',\n      paddingInline: '16',\n    },\n    pattern: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '24',\n      paddingBlockStart: '8',\n      paddingInline: '16',\n    },\n    patternResults: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n      maxHeight: rem(176),\n      minHeight: 0,\n      overflowY: 'auto',\n    },\n    patternResultsLabel: {\n      color: 'text/primary',\n      textStyle: 'comp/input/label',\n    },\n    mobileBar: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      gap: '12',\n      justifyContent: 'space-between',\n      padding: '16',\n    },\n    mobileTrigger: {\n      ...chipButton,\n      alignSelf: 'auto',\n      background: 'background/primary',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderWidth: '1',\n      color: 'text/primary',\n      gap: '8',\n      height: '32',\n      paddingInline: '8',\n      textStyle: 'comp/button/sm',\n      _icon: {\n        color: 'icon/primary',\n      },\n      _disabled: {\n        borderColor: 'border/disabled',\n        color: 'text/disabled',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n    },\n    mobileSearch: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      cursor: 'text',\n      color: 'icon/tertiary',\n      display: 'flex',\n      gap: '12',\n      height: rem(56),\n      paddingInline: '16',\n      // Drawn inside, since the row runs edge to edge.\n      '&:has(input:focus-visible)': {\n        ...wrapperFocusRing,\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    mobileSearchInput: {\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      flex: '1',\n      minWidth: 0,\n      outline: 'none',\n      textStyle: 'body/lg/regular',\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n      '&::-webkit-search-cancel-button': {\n        appearance: 'none',\n      },\n    },\n    mobileHeader: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '12',\n      // Matches the docked drawer's body and footer inset.\n      paddingBlock: '16',\n      paddingInline: { base: '16', tablet: '24' },\n    },\n    mobileTitle: {\n      color: 'text/primary',\n      flex: '1',\n      textStyle: 'heading/mobile/h2',\n    },\n    mobilePanelHeader: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '12',\n      paddingBlock: '12',\n      // Matches the docked drawer's footer inset.\n      paddingInline: { base: '16', tablet: '24' },\n    },\n    mobilePanelOverline: {\n      color: 'text/tertiary',\n      textStyle: 'heading/h6',\n    },\n    mobilePanelTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h3',\n    },\n    // The docked drawer pads the body and footer itself.\n    mobileBody: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    mobileFooter: {\n      display: 'flex',\n      gap: '12',\n      '& > *': {\n        flex: '1',\n      },\n    },\n    // Drawn in front of the label on mobile, with its column kept on unselected rows so the labels line up.\n    mobileListCheck: {\n      color: 'icon/interactive',\n      display: 'flex',\n      flexShrink: 0,\n      '&[data-state=unchecked]': {\n        visibility: 'hidden',\n      },\n    },\n    mobileListCheckbox: {\n      flexShrink: 0,\n    },\n    field: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    fieldLabel: {\n      color: 'text/primary',\n      textStyle: 'comp/input/label',\n    },\n    fieldControl: {\n      background: 'background/primary',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderWidth: '1',\n      display: 'flex',\n      height: '48',\n      overflow: 'hidden',\n      '&:has(button:is(:disabled, [aria-disabled=true]))': {\n        borderColor: 'border/disabled',\n      },\n    },\n    fieldTrigger: {\n      ...chipButton,\n      flex: '1',\n      gap: '8',\n      minWidth: 0,\n      paddingInline: '16',\n      textAlign: 'start',\n      textStyle: 'body/lg/regular',\n    },\n    fieldIcon: {\n      color: 'icon/secondary',\n      flexShrink: 0,\n    },\n    fieldValue: {\n      color: 'text/body',\n      flex: '1',\n      minWidth: 0,\n      truncate: true,\n    },\n    fieldChevron: {\n      color: 'icon/primary',\n      flexShrink: 0,\n    },\n    fieldRemove: {\n      ...chipButton,\n      color: 'icon/primary',\n      flexShrink: 0,\n      justifyContent: 'center',\n      width: '48',\n    },\n  },\n  variants: {\n    // Under a page header: a bottom border and the page's inline padding. `capped` is the centred\n    // column, `full` the full-width one.\n    // The inline padding sits inside the capped content, as in `BitkitPageHeader`: the cap includes it,\n    // so the bar and the header share their left edge.\n    pageLayout: {\n      capped: {\n        root: {\n          borderBlockEndWidth: '1',\n          borderColor: 'border/regular',\n          paddingBlock: '12',\n        },\n        content: {\n          paddingInline: { base: '16', tablet: '32' },\n        },\n      },\n      full: {\n        root: {\n          borderBlockEndWidth: '1',\n          borderColor: 'border/regular',\n          paddingBlock: '12',\n        },\n        content: {\n          paddingInline: { base: '16', tablet: '32' },\n        },\n      },\n    },\n    contentAlign: {\n      center: {},\n      start: {\n        root: {\n          justifyContent: 'flex-start',\n        },\n      },\n    },\n  },\n});\n\nexport default filterSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,aAAgC;CACpC,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EACN,YAAY;EACZ,SAAS,EACP,YAAY,oBACd;CACF;CACA,SAAS,EACP,YAAY,oBACd;CACA,WAAW;EACT,QAAQ;EACR,oBAAoB,EAClB,OAAO,gBACT;EACA,QAAQ,EACN,YAAY,cACd;CACF;AACF;AAIA,IAAM,mBAAsC;CAC1C,cAAc;CACd,eAAe;CACf,cAAc;CACd,cAAc;AAChB;AAEA,IAAM,qBAAwC;CAC5C,OAAO;CACP,QAAQ;CACR,SAAS,EACP,OAAO,gBACT;CACA,QAAQ;EACN,YAAY;EACZ,OAAO;EACP,SAAS,EACP,YAAY,cACd;CACF;CACA,SAAS,EACP,YAAY,cACd;CACA,UAAU;EACR,QAAQ;GACN,YAAY;GACZ,SAAS,EACP,YAAY,qBACd;EACF;EACA,SAAS,EACP,YAAY,qBACd;CACF;AACF;AAEA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EAEJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;EAClB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;EACZ;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;EACZ;EACA,MAAM;GACJ,OAAO;GAEP,SAAS;GACT,YAAY;GACZ,SAAS;EACX;EACA,OAAO;GACL,YAAY;GACZ,SAAS;GACT,MAAM;GACN,UAAU;GACV,KAAK;GACL,UAAU;EACZ;EACA,aAAa;GACX,WAAW;GACX,aAAa;GACb,wBAAwB;GACxB,SAAS;GACT,YAAY;GACZ,oBAAoB;EACtB;EACA,QAAQ;GACN,YAAY;GACZ,YAAY;GACZ,cAAc;GACd,QAAQ;GACR,OAAO;GACP,SAAS;GACT,KAAK;GAEL,QAAQ;GACR,eAAe;GACf,OAAO,IAAI,GAAG;GACd,QAAQ,EACN,YAAY,uBACd;GACA,8BAA8B;EAChC;EACA,aAAa;GACX,YAAY;GACZ,OAAO;GACP,MAAM;GACN,UAAU;GACV,SAAS;GACT,WAAW;GACX,cAAc,EACZ,OAAO,yBACT;GAEA,mCAAmC,EACjC,YAAY,OACd;EACF;EACA,QAAQ;GACN,YAAY;GACZ,cAAc;GACd,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,YAAY;GACV,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,KAAK;GACL,QAAQ;GACR,eAAe;GACf,UAAU;GACV,WAAW;GACX,YAAY;GAEZ,+BAA+B,EAC7B,OAAO,gBACT;GAEA,QAAQ;IACN,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,gBAAgB;IAChB,UAAU;IACV,KAAK;IACL,OAAO;GACT;GACA,kGAAkG,EAChG,QAAQ,EACN,SAAS,OACX,EACF;GACA,8BAA8B;GAC9B,QAAQ;IACN,YAAY;IACZ,OAAO;IACP,+BAA+B,EAC7B,OAAO,iBACT;IACA,SAAS,EACP,YAAY,oBACd;GACF;GACA,SAAS;IACP,YAAY;IACZ,OAAO;GACT;GACA,UAAU;IACR,YAAY;IAEZ,WAAW;IACX,OAAO;IACP,+BAA+B,EAC7B,OAAO,iBACT;IACA,QAAQ,EACN,YAAY,qBACd;GACF;GAEA,WAAW;GACX,WAAW;EACb;EACA,gBAAgB,EACd,eAAe,IACjB;EACA,MAAM;GACJ,YAAY;GACZ,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,SAAS;GACT,QAAQ;GACR,UAAU,IAAI,GAAG;GACjB,UAAU;GACV,UAAU;GACV,WAAW;GACX,qDAAqD,EACnD,aAAa,kBACf;GAEA,+BAA+B;IAC7B,WAAW;IAEX,4BAA4B,EAC1B,YAAY,qBACd;GACF;GAEA,wEAAwE;IACtE,WAAW;IACX,MAAM;IACN,UAAU;GACZ;EACF;EACA,aAAa;GACX,GAAG;GACH,MAAM;GACN,KAAK;GACL,UAAU;GACV,kBAAkB;GAClB,oBAAoB;GACpB,YAAY;GACZ,2BAA2B,EACzB,oBAAoB,IACtB;GACA,0CAA0C,EACxC,OAAO,iBACT;EACF;EACA,WAAW;GACT,OAAO;GACP,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,UAAU;GACV,UAAU;EACZ;EACA,UAAU;GACR,OAAO;GACP,YAAY;GACZ,iBAAiB;EACnB;EACA,aAAa;GACX,OAAO;GACP,YAAY;GACZ,mBAAmB;EACrB;EACA,YAAY;GACV,GAAG;GACH,OAAO;GACP,YAAY;GACZ,kBAAkB;GAClB,oBAAoB;EACtB;EACA,gBAAgB;GAEd,WAAW;GAEX,UAAU,IAAI,GAAG;GACjB,UAAU;GACV,OAAO;GAEP,gCAAgC,EAC9B,OAAO,IAAI,GAAG,EAChB;GAEA,6CAA6C,EAC3C,iBAAiB,EACnB;EACF;EACA,SAAS;GACP,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,WAAW;GACX,cAAc;GACd,OAAO,IAAI,GAAG;GACd,QAAQ;EACV;EACA,aAAa;GACX,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,KAAK;GACL,WAAW;GACX,cAAc;GACd,eAAe;GACf,WAAW;GACX,YAAY;GACZ,cAAc;IACZ,YAAY;IACZ,SAAS,EACP,YAAY,oBACd;GACF;GACA,SAAS,EACP,YAAY,oBACd;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,cAAc,EACZ,YAAY,cACd;IAEA,0BAA0B;KACxB,OAAO;KACP,cAAc,EACZ,YAAY,mBACd;IACF;GACF;GAEA,gDAAgD,EAC9C,YAAY,SACd;EACF;EACA,cAAc;GACZ,OAAO;GACP,cAAc;GACd,eAAe;GACf,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,YAAY;GACZ,mBAAmB;EACrB;EACA,kBAAkB;GAChB,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;EACV;EACA,oBAAoB;GAClB,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,SAAS;GACT,UAAU;GACV,QAAQ;EACV;EACA,UAAU;GACR,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,MAAM;GACN,eAAe;GACf,WAAW;GACX,SAAS;GACT,WAAW;GACX,cAAc;EAChB;EACA,cAAc;GACZ,GAAG;GACH,WAAW;GACX,OAAO;GACP,KAAK;GACL,WAAW;GACX,cAAc;GACd,eAAe;GACf,WAAW;GACX,WAAW;GACX,WAAW;IACT,OAAO;IACP,QAAQ;IACR,QAAQ,EACN,YAAY,cACd;IACA,0BAA0B;KACxB,OAAO;KACP,oBAAoB,EAClB,OAAO,gBACT;IACF;GACF;EACF;EACA,oBAAoB;GAClB,OAAO;GACP,WAAW;EACb;EACA,gBAAgB;GACd,YAAY;GACZ,SAAS;GACT,KAAK;GACL,kBAAkB;EACpB;EACA,eAAe;GACb,YAAY;GACZ,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EAGA,aAAa;GACX,SAAS;GACT,eAAe;GACf,WAAW;GACX,2EAA2E,EACzE,WAAW,EACb;GACA,0CAA0C;IACxC,SAAS;IACT,eAAe;GACjB;EACF;EACA,eAAe;GACb,YAAY;GACZ,SAAS;GACT,KAAK;GACL,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EACA,oBAAoB,EAClB,MAAM,IACR;EACA,cAAc;GACZ,WAAW,IAAI,GAAG;GAClB,WAAW;GAEX,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;GAEf,wBAAwB,EACtB,OAAO,iBACT;GACA,oEAAoE,EAClE,OAAO,eACT;GACA,kFAAkF,EAChF,OAAO,mBACT;EACF;EACA,gBAAgB;GACd,OAAO;GACP,WAAW;EACb;EACA,SAAS;GACP,cAAc;GACd,eAAe;EACjB;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,mBAAmB;GACnB,eAAe;EACjB;EACA,gBAAgB;GACd,SAAS;GACT,eAAe;GACf,KAAK;GACL,WAAW,IAAI,GAAG;GAClB,WAAW;GACX,WAAW;EACb;EACA,qBAAqB;GACnB,OAAO;GACP,WAAW;EACb;EACA,WAAW;GACT,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,SAAS;EACX;EACA,eAAe;GACb,GAAG;GACH,WAAW;GACX,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,OAAO;GACP,KAAK;GACL,QAAQ;GACR,eAAe;GACf,WAAW;GACX,OAAO,EACL,OAAO,eACT;GACA,WAAW;IACT,aAAa;IACb,OAAO;IACP,OAAO,EACL,OAAO,gBACT;GACF;EACF;EACA,cAAc;GACZ,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,QAAQ;GACR,OAAO;GACP,SAAS;GACT,KAAK;GACL,QAAQ,IAAI,EAAE;GACd,eAAe;GAEf,8BAA8B;IAC5B,GAAG;IACH,eAAe;GACjB;EACF;EACA,mBAAmB;GACjB,YAAY;GACZ,OAAO;GACP,MAAM;GACN,UAAU;GACV,SAAS;GACT,WAAW;GACX,cAAc,EACZ,OAAO,yBACT;GACA,mCAAmC,EACjC,YAAY,OACd;EACF;EACA,cAAc;GACZ,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,SAAS;GACT,YAAY;GACZ,KAAK;GAEL,cAAc;GACd,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,aAAa;GACX,OAAO;GACP,MAAM;GACN,WAAW;EACb;EACA,mBAAmB;GACjB,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,SAAS;GACT,YAAY;GACZ,KAAK;GACL,cAAc;GAEd,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,qBAAqB;GACnB,OAAO;GACP,WAAW;EACb;EACA,kBAAkB;GAChB,OAAO;GACP,WAAW;EACb;EAEA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,cAAc;GACZ,SAAS;GACT,KAAK;GACL,SAAS,EACP,MAAM,IACR;EACF;EAEA,iBAAiB;GACf,OAAO;GACP,SAAS;GACT,YAAY;GACZ,2BAA2B,EACzB,YAAY,SACd;EACF;EACA,oBAAoB,EAClB,YAAY,EACd;EACA,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,YAAY;GACV,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,SAAS;GACT,QAAQ;GACR,UAAU;GACV,qDAAqD,EACnD,aAAa,kBACf;EACF;EACA,cAAc;GACZ,GAAG;GACH,MAAM;GACN,KAAK;GACL,UAAU;GACV,eAAe;GACf,WAAW;GACX,WAAW;EACb;EACA,WAAW;GACT,OAAO;GACP,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,cAAc;GACZ,OAAO;GACP,YAAY;EACd;EACA,aAAa;GACX,GAAG;GACH,OAAO;GACP,YAAY;GACZ,gBAAgB;GAChB,OAAO;EACT;CACF;CACA,UAAU;EAKR,YAAY;GACV,QAAQ;IACN,MAAM;KACJ,qBAAqB;KACrB,aAAa;KACb,cAAc;IAChB;IACA,SAAS,EACP,eAAe;KAAE,MAAM;KAAM,QAAQ;IAAK,EAC5C;GACF;GACA,MAAM;IACJ,MAAM;KACJ,qBAAqB;KACrB,aAAa;KACb,cAAc;IAChB;IACA,SAAS,EACP,eAAe;KAAE,MAAM;KAAM,QAAQ;IAAK,EAC5C;GACF;EACF;EACA,cAAc;GACZ,QAAQ,CAAC;GACT,OAAO,EACL,MAAM,EACJ,gBAAgB,aAClB,EACF;EACF;CACF;AACF,CAAC"}
+{"version":3,"file":"Filter.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Filter.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst chipButton: SystemStyleObject = {\n  alignItems: 'center',\n  alignSelf: 'stretch',\n  display: 'flex',\n  _hover: {\n    background: 'background/hover',\n    _active: {\n      background: 'background/active',\n    },\n  },\n  _active: {\n    background: 'background/active',\n  },\n  _disabled: {\n    cursor: 'not-allowed',\n    '& :is(span, svg)': {\n      color: 'text/disabled',\n    },\n    _hover: {\n      background: 'transparent',\n    },\n  },\n};\n\n// The keyboard focus ring for a wrapper whose input has no outline of its own. Chakra's `focusRing`\n// only fires on the focused element itself, so the global ring variables are applied directly.\nconst wrapperFocusRing: SystemStyleObject = {\n  outlineColor: 'var(--focus-ring-color)',\n  outlineOffset: 'var(--focus-ring-offset)',\n  outlineStyle: 'var(--focus-ring-style)',\n  outlineWidth: 'var(--focus-ring-width)',\n};\n\nconst switchItemDisabled: SystemStyleObject = {\n  color: 'text/disabled',\n  cursor: 'not-allowed',\n  '& svg': {\n    color: 'icon/disabled',\n  },\n  _hover: {\n    background: 'transparent',\n    color: 'text/disabled',\n    _active: {\n      background: 'transparent',\n    },\n  },\n  _active: {\n    background: 'transparent',\n  },\n  _checked: {\n    _hover: {\n      background: 'background/primary',\n      _active: {\n        background: 'background/primary',\n      },\n    },\n    _active: {\n      background: 'background/primary',\n    },\n  },\n};\n\nconst filterSlotRecipe = defineSlotRecipe({\n  className: 'filter',\n  slots: [\n    'root',\n    'content',\n    'filters',\n    'icon',\n    'items',\n    'searchBlock',\n    'search',\n    'searchInput',\n    'switch',\n    'switchItem',\n    'switchItemText',\n    'chip',\n    'chipTrigger',\n    'chipLabel',\n    'chipValue',\n    'chipIcon',\n    'chipChevron',\n    'chipRemove',\n    'popoverContent',\n    'addMenu',\n    'addMenuItem',\n    'addMenuLabel',\n    'addMenuIcon',\n    'addSheetBackdrop',\n    'addSheetPositioner',\n    'addSheet',\n    'addSheetItem',\n    'addSheetItemReason',\n    'calendarFooter',\n    'popoverSearch',\n    'popoverBody',\n    'popoverFooter',\n    'popoverFooterStart',\n    'checkboxList',\n    'listHelperText',\n    'loading',\n    'pattern',\n    'patternResults',\n    'patternResultsLabel',\n    'mobileBar',\n    'mobileTrigger',\n    'mobileSearch',\n    'mobileSearchInput',\n    'mobileHeader',\n    'mobileTitle',\n    'mobilePanelHeader',\n    'mobilePanelOverline',\n    'mobilePanelTitle',\n    'mobileBody',\n    'mobileFooter',\n    'mobileListCheck',\n    'mobileListCheckbox',\n    'field',\n    'fieldLabel',\n    'fieldControl',\n    'fieldTrigger',\n    'fieldIcon',\n    'fieldValue',\n    'fieldChevron',\n    'fieldRemove',\n  ],\n  base: {\n    // No padding of its own: placed like any block, its edges line up with what's around it.\n    root: {\n      background: 'background/primary',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    content: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '1',\n      gap: '16',\n      minWidth: 0,\n    },\n    filters: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '1',\n      gap: '12',\n      minWidth: 0,\n    },\n    icon: {\n      color: 'icon/tertiary',\n      // Flex, so the inline svg's line box adds no extra height.\n      display: 'flex',\n      flexShrink: 0,\n      padding: '4',\n    },\n    items: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: '1',\n      flexWrap: 'wrap',\n      gap: '12',\n      minWidth: 0,\n    },\n    searchBlock: {\n      alignSelf: 'stretch',\n      borderColor: 'border/minimal',\n      borderInlineStartWidth: '1',\n      display: 'flex',\n      flexShrink: 0,\n      paddingInlineStart: '16',\n    },\n    search: {\n      alignItems: 'center',\n      background: 'background/primary',\n      borderRadius: '4',\n      cursor: 'text',\n      color: 'icon/tertiary',\n      display: 'flex',\n      gap: '8',\n      // As tall as the chips, so the bar is no taller than a row of them.\n      height: '32',\n      paddingInline: '8',\n      width: rem(148),\n      _hover: {\n        background: 'background/secondary',\n      },\n      '&:has(input:focus-visible)': wrapperFocusRing,\n    },\n    searchInput: {\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      flex: '1',\n      minWidth: 0,\n      outline: 'none',\n      textStyle: 'body/md/regular',\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n      // The clear button replaces the native cancel glyph of `type=\"search\"`.\n      '&::-webkit-search-cancel-button': {\n        appearance: 'none',\n      },\n    },\n    switch: {\n      background: 'background/secondary',\n      borderRadius: '4',\n      display: 'inline-flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    switchItem: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'text/secondary',\n      cursor: 'pointer',\n      display: 'flex',\n      gap: '4',\n      height: '32',\n      paddingInline: '8',\n      position: 'relative',\n      textStyle: 'body/md/regular',\n      whiteSpace: 'nowrap',\n      // An item's own `iconColor` is left alone, except when disabled.\n      '& svg:not([data-own-color])': {\n        color: 'icon/tertiary',\n      },\n      // Divider after an unselected item, hidden next to the selected or hovered one.\n      _after: {\n        background: 'border/regular',\n        content: '\"\"',\n        height: '16',\n        insetInlineEnd: 0,\n        position: 'absolute',\n        top: '8',\n        width: '1',\n      },\n      '&:last-of-type, &[data-state=checked], &:hover, &:has(+ [data-state=checked]), &:has(+ :hover)': {\n        _after: {\n          display: 'none',\n        },\n      },\n      '&:has(input:focus-visible)': wrapperFocusRing,\n      _hover: {\n        background: 'background/hover',\n        color: 'text/primary',\n        '& svg:not([data-own-color])': {\n          color: 'icon/secondary',\n        },\n        _active: {\n          background: 'background/active',\n        },\n      },\n      _active: {\n        background: 'background/active',\n        color: 'text/primary',\n      },\n      _checked: {\n        background: 'background/primary',\n        // Inset, so the selected item is no taller than the others.\n        boxShadow: 'inset 0 0 0 1px var(--colors-border\\\\/strong)',\n        color: 'text/primary',\n        '& svg:not([data-own-color])': {\n          color: 'icon/secondary',\n        },\n        _hover: {\n          background: 'background/primary',\n        },\n      },\n      // Read-only while the page loads, so the item keeps a focus handed to it; it looks disabled.\n      _disabled: switchItemDisabled,\n      _readOnly: switchItemDisabled,\n    },\n    switchItemText: {\n      paddingInline: '4',\n    },\n    chip: {\n      alignItems: 'center',\n      background: 'background/primary',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderWidth: '1',\n      display: 'inline-flex',\n      height: '32',\n      maxWidth: rem(320),\n      minWidth: 0,\n      overflow: 'hidden',\n      textStyle: 'body/md/regular',\n      '&:has(button:is(:disabled, [aria-disabled=true]))': {\n        borderColor: 'border/disabled',\n      },\n      // The chip's popover is open: Zag marks the trigger inside it as expanded.\n      '&:has([aria-expanded=true])': {\n        boxShadow: '0 0 0 0.125rem var(--focus-ring-color)',\n        // Figma's selected chip stays white, even under the pointer that just opened it.\n        '& button, & button:hover': {\n          background: 'background/primary',\n        },\n      },\n      // The date chip's trigger sits inside the calendar's root and control divs; they stretch like a direct child would.\n      '& [data-scope=date-picker]:is([data-part=root], [data-part=control])': {\n        alignSelf: 'stretch',\n        flex: '1',\n        minWidth: 0,\n      },\n    },\n    chipTrigger: {\n      ...chipButton,\n      flex: '1',\n      gap: '4',\n      minWidth: 0,\n      paddingInlineEnd: '8',\n      paddingInlineStart: '12',\n      whiteSpace: 'nowrap',\n      '&:has([data-chip-icon])': {\n        paddingInlineStart: '8',\n      },\n      '&:is(:hover, :active) [data-chip-icon]': {\n        color: 'icon/secondary',\n      },\n    },\n    chipLabel: {\n      color: 'text/secondary',\n      flexShrink: 0,\n    },\n    chipValue: {\n      color: 'text/body',\n      minWidth: 0,\n      truncate: true,\n    },\n    chipIcon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n      marginInlineEnd: '4',\n    },\n    chipChevron: {\n      color: 'icon/primary',\n      flexShrink: 0,\n      marginInlineStart: '8',\n    },\n    chipRemove: {\n      ...chipButton,\n      color: 'icon/primary',\n      flexShrink: 0,\n      paddingInlineEnd: '8',\n      paddingInlineStart: '4',\n    },\n    popoverContent: {\n      // The popover's 60vh cap, or less where the space next to the bar is shorter.\n      maxHeight: 'min(60vh, var(--available-height, 60vh))',\n      // As wide as its content: at least its chip and 320px, at most 800px.\n      maxWidth: rem(800),\n      minWidth: 'max(var(--reference-width, 0px), 20rem)',\n      width: 'max-content',\n      // The wildcard pattern's explanation would otherwise stretch it to its widest.\n      '&:has([data-filter-pattern])': {\n        width: rem(480),\n      },\n      // The footer's top padding is the gap under the list, so the list adds none of its own.\n      '& [data-scope=listbox][data-part=content]': {\n        paddingBlockEnd: 0,\n      },\n    },\n    addMenu: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: 'var(--available-height)',\n      outline: 'none',\n      overflowY: 'auto',\n      paddingBlock: '8',\n      width: rem(240),\n      zIndex: 'popover',\n    },\n    addMenuItem: {\n      alignItems: 'center',\n      color: 'text/body',\n      cursor: 'pointer',\n      display: 'flex',\n      gap: '4',\n      minHeight: '40',\n      paddingBlock: '8',\n      paddingInline: '16',\n      textStyle: 'body/md/regular',\n      userSelect: 'none',\n      _highlighted: {\n        background: 'background/hover',\n        _active: {\n          background: 'background/active',\n        },\n      },\n      _active: {\n        background: 'background/active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _highlighted: {\n          background: 'transparent',\n        },\n        // Not applicable yet: `aria-disabled` but reachable, so the keyboard highlight still shows.\n        '&[data-not-applicable]': {\n          color: 'text/tertiary',\n          _highlighted: {\n            background: 'background/hover',\n          },\n        },\n      },\n      // The chevron only shows on the row under the pointer or keyboard.\n      '&:not([data-highlighted]) [data-add-chevron]': {\n        visibility: 'hidden',\n      },\n    },\n    addMenuLabel: {\n      color: 'text/tertiary',\n      paddingBlock: '8',\n      paddingInline: '16',\n      textStyle: 'heading/h6',\n    },\n    addMenuIcon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n      marginInlineStart: 'auto',\n    },\n    addSheetBackdrop: {\n      background: 'utilities/overlay-light',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n    },\n    addSheetPositioner: {\n      alignItems: 'flex-end',\n      display: 'flex',\n      inset: 0,\n      justifyContent: 'stretch',\n      padding: '16',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    addSheet: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      maxHeight: '80dvh',\n      outline: 'none',\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    addSheetItem: {\n      ...chipButton,\n      alignSelf: 'auto',\n      color: 'text/body',\n      gap: '12',\n      minHeight: '48',\n      paddingBlock: '8',\n      paddingInline: '16',\n      textAlign: 'start',\n      textStyle: 'body/lg/regular',\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _hover: {\n          background: 'transparent',\n        },\n        '&[data-not-applicable]': {\n          color: 'text/tertiary',\n          '& :is(span, svg)': {\n            color: 'text/tertiary',\n          },\n        },\n      },\n    },\n    addSheetItemReason: {\n      color: 'text/tertiary',\n      textStyle: 'body/sm/regular',\n    },\n    calendarFooter: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '8',\n      marginBlockStart: '24',\n    },\n    popoverSearch: {\n      flexShrink: 0,\n      paddingBlockEnd: '8',\n      paddingBlockStart: '8',\n      paddingInline: '12',\n    },\n    // When the popover is capped by the space available, the list (or pattern results) gives way and\n    // scrolls on its own, rather than running under the footer: every part may shrink below its content.\n    popoverBody: {\n      display: 'flex',\n      flexDirection: 'column',\n      minHeight: 0,\n      '& > *, & [data-scope=listbox]:is([data-part=root], [data-part=content])': {\n        minHeight: 0,\n      },\n      '& [data-scope=listbox][data-part=root]': {\n        display: 'flex',\n        flexDirection: 'column',\n      },\n    },\n    popoverFooter: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '8',\n      paddingBlockEnd: '16',\n      paddingBlockStart: '24',\n      paddingInline: '16',\n    },\n    popoverFooterStart: {\n      flex: '1',\n    },\n    checkboxList: {\n      maxHeight: rem(200),\n      overflowY: 'auto',\n      // Room for the last checkbox's check mark, drawn 1px past its box, so a short list doesn't scroll.\n      paddingBlockEnd: '1',\n      paddingBlockStart: '8',\n      paddingInline: '20',\n      // An option's icon: secondary, primary while hovered, interactive once checked.\n      '& [data-option-icon]': {\n        color: 'icon/secondary',\n      },\n      '& [data-scope=checkbox][data-part=root]:hover [data-option-icon]': {\n        color: 'icon/primary',\n      },\n      '& [data-scope=checkbox][data-part=root][data-state=checked] [data-option-icon]': {\n        color: 'icon/interactive',\n      },\n    },\n    listHelperText: {\n      color: 'text/secondary',\n      textStyle: 'body/sm/regular',\n    },\n    loading: {\n      paddingBlock: '8',\n      paddingInline: '16',\n    },\n    pattern: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '24',\n      paddingBlockStart: '8',\n      paddingInline: '16',\n    },\n    patternResults: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n      maxHeight: rem(176),\n      minHeight: 0,\n      overflowY: 'auto',\n    },\n    patternResultsLabel: {\n      color: 'text/primary',\n      textStyle: 'comp/input/label',\n    },\n    mobileBar: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      gap: '12',\n      justifyContent: 'space-between',\n      padding: '16',\n    },\n    mobileTrigger: {\n      ...chipButton,\n      alignSelf: 'auto',\n      background: 'background/primary',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderWidth: '1',\n      color: 'text/primary',\n      gap: '8',\n      height: '32',\n      paddingInline: '8',\n      textStyle: 'comp/button/sm',\n      _icon: {\n        color: 'icon/primary',\n      },\n      _disabled: {\n        borderColor: 'border/disabled',\n        color: 'text/disabled',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n    },\n    mobileSearch: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      cursor: 'text',\n      color: 'icon/tertiary',\n      display: 'flex',\n      gap: '12',\n      height: rem(56),\n      paddingInline: '16',\n      // Drawn inside, since the row runs edge to edge.\n      '&:has(input:focus-visible)': {\n        ...wrapperFocusRing,\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    mobileSearchInput: {\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      flex: '1',\n      minWidth: 0,\n      outline: 'none',\n      textStyle: 'body/lg/regular',\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n      '&::-webkit-search-cancel-button': {\n        appearance: 'none',\n      },\n    },\n    mobileHeader: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '12',\n      // Matches the docked drawer's body and footer inset.\n      paddingBlock: '16',\n      paddingInline: { base: '16', tablet: '24' },\n    },\n    mobileTitle: {\n      color: 'text/primary',\n      flex: '1',\n      textStyle: 'heading/mobile/h2',\n    },\n    mobilePanelHeader: {\n      alignItems: 'center',\n      borderBlockEndWidth: '1',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '12',\n      paddingBlock: '12',\n      // Matches the docked drawer's footer inset.\n      paddingInline: { base: '16', tablet: '24' },\n    },\n    mobilePanelOverline: {\n      color: 'text/tertiary',\n      textStyle: 'heading/h6',\n    },\n    mobilePanelTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h3',\n    },\n    // The docked drawer pads the body and footer itself.\n    mobileBody: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    mobileFooter: {\n      display: 'flex',\n      gap: '12',\n      '& > *': {\n        flex: '1',\n      },\n    },\n    // Drawn in front of the label on mobile, with its column kept on unselected rows so the labels line up.\n    mobileListCheck: {\n      color: 'icon/interactive',\n      display: 'flex',\n      flexShrink: 0,\n      '&[data-state=unchecked]': {\n        visibility: 'hidden',\n      },\n    },\n    mobileListCheckbox: {\n      flexShrink: 0,\n    },\n    field: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    fieldLabel: {\n      color: 'text/primary',\n      textStyle: 'comp/input/label',\n    },\n    fieldControl: {\n      background: 'background/primary',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderWidth: '1',\n      display: 'flex',\n      height: '48',\n      overflow: 'hidden',\n      '&:has(button:is(:disabled, [aria-disabled=true]))': {\n        borderColor: 'border/disabled',\n      },\n    },\n    fieldTrigger: {\n      ...chipButton,\n      flex: '1',\n      gap: '8',\n      minWidth: 0,\n      paddingInline: '16',\n      textAlign: 'start',\n      textStyle: 'body/lg/regular',\n    },\n    fieldIcon: {\n      color: 'icon/secondary',\n      flexShrink: 0,\n    },\n    fieldValue: {\n      color: 'text/body',\n      flex: '1',\n      minWidth: 0,\n      truncate: true,\n    },\n    fieldChevron: {\n      color: 'icon/primary',\n      flexShrink: 0,\n    },\n    fieldRemove: {\n      ...chipButton,\n      color: 'icon/primary',\n      flexShrink: 0,\n      justifyContent: 'center',\n      width: '48',\n    },\n  },\n  variants: {\n    // Under a page header: a bottom border and the page's inline padding. `capped` is the centred\n    // column, `full` the full-width one.\n    // The inline padding sits inside the capped content, as in `BitkitPageHeader`: the cap includes it,\n    // so the bar and the header share their left edge.\n    pageLayout: {\n      capped: {\n        root: {\n          borderBlockEndWidth: '1',\n          borderColor: 'border/regular',\n          paddingBlock: '12',\n        },\n        content: {\n          paddingInline: { base: '16', tablet: '32' },\n        },\n      },\n      full: {\n        root: {\n          borderBlockEndWidth: '1',\n          borderColor: 'border/regular',\n          paddingBlock: '12',\n        },\n        content: {\n          paddingInline: { base: '16', tablet: '32' },\n        },\n      },\n    },\n  },\n});\n\nexport default filterSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,aAAgC;CACpC,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EACN,YAAY;EACZ,SAAS,EACP,YAAY,oBACd;CACF;CACA,SAAS,EACP,YAAY,oBACd;CACA,WAAW;EACT,QAAQ;EACR,oBAAoB,EAClB,OAAO,gBACT;EACA,QAAQ,EACN,YAAY,cACd;CACF;AACF;AAIA,IAAM,mBAAsC;CAC1C,cAAc;CACd,eAAe;CACf,cAAc;CACd,cAAc;AAChB;AAEA,IAAM,qBAAwC;CAC5C,OAAO;CACP,QAAQ;CACR,SAAS,EACP,OAAO,gBACT;CACA,QAAQ;EACN,YAAY;EACZ,OAAO;EACP,SAAS,EACP,YAAY,cACd;CACF;CACA,SAAS,EACP,YAAY,cACd;CACA,UAAU;EACR,QAAQ;GACN,YAAY;GACZ,SAAS,EACP,YAAY,qBACd;EACF;EACA,SAAS,EACP,YAAY,qBACd;CACF;AACF;AAEA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EAEJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;EAClB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;EACZ;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;EACZ;EACA,MAAM;GACJ,OAAO;GAEP,SAAS;GACT,YAAY;GACZ,SAAS;EACX;EACA,OAAO;GACL,YAAY;GACZ,SAAS;GACT,MAAM;GACN,UAAU;GACV,KAAK;GACL,UAAU;EACZ;EACA,aAAa;G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"}

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

@@ -239,46 +239,29 @@ declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
         };
     };
     /**
-     * Lines the content block up with the page content below, leaving the root full-width — so the
-     * header's background and bottom border run edge to edge while the title sits where the content
-     * does. The cap, when there is one, is a `maxWidth` the component sets from `contentWidth`, since
-     * a recipe variant cannot carry an arbitrary length; `contentAlign` places it, and does nothing
-     * when `contentWidth` is `'full'` and there is no cap.
+     * Lines the content up with the page content below, leaving the root full-width — so the header's background and
+     * bottom border run edge to edge while the title and the tabs sit where the content does. The cap is a `maxWidth`
+     * the component sets from `contentWidth`; the auto margins centre it, and resolve to nothing when there is no cap.
      *
-     * The design's centred frame pads both sides with 32, where the default header starts at 24.
-     * Only from `tablet`: below it the base 16 stands, matching what a content column pads with
-     * there, while the cap itself stays unscoped so the two track each other at every width.
+     * The design's centred frame pads both sides with 32, where the default header starts at 24. Only from `tablet`:
+     * below it the base 16 stands, matching what a content column pads with there.
      *
-     * The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same
-     * `tablet` key and wins that merge, so the 32 is restated there by a compound variant — see
-     * `contentAlignedCollapsed`.
+     * The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same `tablet` key and wins
+     * that merge, so the 32 is restated there by a compound variant — see `contentAlignedCollapsed`.
      */
     alignsToContent: {
         true: {
             headerBlock: {
+                marginInline: "auto";
                 tablet: {
                     paddingInlineStart: "32";
                 };
             };
-        };
-        false: {};
-    };
-    /**
-     * Where the capped block sits in the full-width root: centred over a centred content column, or
-     * at the start over one that starts against a sidebar. Without a cap the block spans the root, so
-     * the auto margins resolve to nothing and either value renders the same.
-     */
-    contentAlign: {
-        center: {
-            headerBlock: {
+            tabs: {
                 marginInline: "auto";
             };
         };
-        start: {
-            headerBlock: {
-                marginInlineEnd: "auto";
-            };
-        };
+        false: {};
     };
 }>;
 export default pageHeaderSlotRecipe;

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

@@ -206,6 +206,10 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 			width: "100%"
 		},
 		titleBlock: {
+			alignSelf: {
+				base: "stretch",
+				tablet: "auto"
+			},
 			display: "flex",
 			flex: "1 0 0",
 			minWidth: 0
@@ -434,37 +438,29 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 			minimal: collapsedSlots
 		},
 		/**
-		* Lines the content block up with the page content below, leaving the root full-width — so the
-		* header's background and bottom border run edge to edge while the title sits where the content
-		* does. The cap, when there is one, is a `maxWidth` the component sets from `contentWidth`, since
-		* a recipe variant cannot carry an arbitrary length; `contentAlign` places it, and does nothing
-		* when `contentWidth` is `'full'` and there is no cap.
+		* Lines the content up with the page content below, leaving the root full-width — so the header's background and
+		* bottom border run edge to edge while the title and the tabs sit where the content does. The cap is a `maxWidth`
+		* the component sets from `contentWidth`; the auto margins centre it, and resolve to nothing when there is no cap.
 		*
-		* The design's centred frame pads both sides with 32, where the default header starts at 24.
-		* Only from `tablet`: below it the base 16 stands, matching what a content column pads with
-		* there, while the cap itself stays unscoped so the two track each other at every width.
+		* The design's centred frame pads both sides with 32, where the default header starts at 24. Only from `tablet`:
+		* below it the base 16 stands, matching what a content column pads with there.
 		*
-		* The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same
-		* `tablet` key and wins that merge, so the 32 is restated there by a compound variant — see
-		* `contentAlignedCollapsed`.
+		* The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same `tablet` key and wins
+		* that merge, so the 32 is restated there by a compound variant — see `contentAlignedCollapsed`.
 		*/
 		alignsToContent: {
-			true: { headerBlock: { tablet: { paddingInlineStart: "32" } } },
+			true: {
+				headerBlock: {
+					marginInline: "auto",
+					tablet: { paddingInlineStart: "32" }
+				},
+				tabs: { marginInline: "auto" }
+			},
 			false: {}
-		},
-		/**
-		* Where the capped block sits in the full-width root: centred over a centred content column, or
-		* at the start over one that starts against a sidebar. Without a cap the block spans the root, so
-		* the auto margins resolve to nothing and either value renders the same.
-		*/
-		contentAlign: {
-			center: { headerBlock: { marginInline: "auto" } },
-			start: { headerBlock: { marginInlineEnd: "auto" } }
 		}
 	},
 	defaultVariants: {
 		alignsToContent: false,
-		contentAlign: "center",
 		contentVariant: "title",
 		hasBreadcrumb: false,
 		hasControls: false,

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The collapsed single-row layout, shared by `variant=\"minimal\"` and `isSticky`. Both apply the\n * exact same overrides, so the two variants are idempotent when combined. The expanded layout\n * lives in `base` — `variant=\"default\"` and `isSticky: false` deliberately define nothing, so\n * neither can undo the other's collapse.\n *\n * Every override is scoped to `tablet` and up, with no `base` key: below the breakpoint the `base`\n * styles win and the header stays expanded. The mobile Figma frame has no sticky or minimal\n * variant — it always shows the title as a heading — and a single 72px row cannot hold a\n * breadcrumb plus full-width actions at 375px.\n *\n * The slots the collapsed row drops are hidden here rather than omitted from the DOM, so the\n * component never has to know the viewport: no breakpoint hook, and no wrong-layout first paint.\n */\nconst collapsedSlots = {\n  headerBlock: {\n    tablet: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: '24',\n      // No 72 in the size scale — the design fixes the collapsed row height.\n      minHeight: rem(72),\n      paddingBlockEnd: '12',\n      paddingBlockStart: '12',\n      paddingInlineEnd: '32',\n      paddingInlineStart: '24',\n    },\n  },\n  breadcrumb: {\n    tablet: {\n      flex: '0 1 auto',\n      minWidth: 0,\n    },\n  },\n  contentBlock: {\n    tablet: {\n      alignItems: 'center',\n      flex: '1 0 0',\n      // 24 between the title and the actions, per `pageType=main, isSticky=true`. The 8 belongs to\n      // `actionBlock`, between the buttons.\n      gap: '24',\n      justifyContent: 'flex-end',\n      minWidth: 0,\n    },\n  },\n  titleBlock: {\n    tablet: {\n      alignItems: 'center',\n    },\n  },\n  title: {\n    tablet: {\n      textStyle: 'heading/h3',\n    },\n  },\n  actionBlock: {\n    tablet: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: '8',\n      width: 'auto',\n    },\n  },\n  avatar: {\n    tablet: { display: 'none' },\n  },\n  badge: {\n    tablet: { display: 'none' },\n  },\n  secondaryText: {\n    tablet: { display: 'none' },\n  },\n  tabs: {\n    tablet: { display: 'none' },\n  },\n} as const;\n\n/**\n * Collapsed *and* carrying a breadcrumb: the trail shows the title as its current item, so the\n * heading would duplicate it. `Breadcrumb.CurrentLink` is a link and not a heading, so the block is\n * made screen-reader-only instead of hidden — that keeps exactly one `h1` on the page at every\n * width without a second, conditionally rendered heading node.\n */\nconst titleInBreadcrumb = {\n  titleBlock: { tablet: { srOnly: true } },\n  // The row is trail + actions. The actions cannot shrink, so leaving `contentBlock` on a zero\n  // basis let a long trail take the whole row and collapse it to width 0 — the buttons then\n  // overflowed their own box and painted on top of the trail. Sizing the actions to their content\n  // and letting the trail take what is left makes the trail yield, and its last crumb ellipsise.\n  breadcrumb: { tablet: { flex: '1 1 auto' } },\n  // `width: auto` matters as much as the flex here, for the same reason it does in `controlsRow`:\n  // the base width is `100%`, which flex-basis `auto` resolves to, so without it this block claims\n  // the whole row and squeezes the trail to nothing.\n  contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * `minimal` *with* inline controls: the row carries three groups — trail, controls, actions — spread\n * apart rather than the usual trail-left/actions-right pair. `contentBlock` gives up its `flex: 1`\n * so `space-between` has room to distribute; without that it would absorb the free space and pin\n * the controls against the actions.\n *\n * Paired with both collapse modes, since `minimal` and `isSticky` produce the same row through\n * `collapsedSlots` — pairing it with `minimal` alone left the sticky row dropping the middle group.\n * This is the row the design file calls `PageHeader-WFE`.\n */\nconst controlsRow = {\n  headerBlock: { tablet: { justifyContent: 'space-between' } },\n  // Undoes the `flex: 1 1 auto` that `titleInBreadcrumb` gives the trail. That growth is right for\n  // the two-group row (trail + actions), but here a third group sits between them: a growing trail\n  // swallows all the free space on its side and shoves the controls island against the actions.\n  // Shrink-only keeps the trail ellipsising when the row is tight, while `space-between` gets free\n  // space to distribute.\n  breadcrumb: { tablet: { flex: '0 1 auto' } },\n  // `width: auto` matters as much as the flex: the base width is `100%`, which flex-basis `auto`\n  // resolves to, so the block would otherwise claim the whole row and shrink the trail until its\n  // metadata truncated away. Sized to its actions instead, leaving the free space to distribute.\n  contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * Collapsed with inline controls but no trail: the title takes the left slot, so the three groups\n * are the title, the controls and the actions — all inside `contentBlock`, which already spans the\n * row. The title block gives up its `flex: 1` so `space-between` has free space to distribute; left\n * growing, it would absorb the row and shove the controls against the actions.\n */\nconst controlsWithoutTrail = {\n  contentBlock: { tablet: { justifyContent: 'space-between' } },\n  titleBlock: { tablet: { flex: '0 1 auto' } },\n} as const;\n\n/**\n * `alignsToContent`'s 32, restated for the collapsed row. The collapsed slots set the header block's\n * start padding under the same `tablet` key, and the variant applied later wins the merge -- which\n * is the collapsed one, since `isSticky` and `variant` come after `alignsToContent`. A compound\n * variant is applied after every plain one, so this holds whatever order the props arrive in.\n */\nconst contentAlignedCollapsed = {\n  headerBlock: { tablet: { paddingInlineStart: '32' } },\n} as const;\n\n/**\n * Shared by the `app` and `user` content shapes — a larger avatar centred against a smaller title\n * and 14px secondary text. The two differ only in the avatar-to-text gap.\n */\nconst entityContent = {\n  titleBlock: {\n    alignItems: 'center',\n  },\n  title: {\n    textStyle: { base: 'heading/mobile/h2', tablet: 'heading/h2' },\n  },\n  secondaryText: {\n    textStyle: 'body/md/regular',\n  },\n} as const;\n\nconst pageHeaderSlotRecipe = defineSlotRecipe({\n  className: 'page-header',\n  slots: [\n    'root',\n    'headerBlock',\n    'breadcrumb',\n    'controls',\n    'contentBlock',\n    'titleBar',\n    'titleBlock',\n    'avatar',\n    'textBlock',\n    'titleRow',\n    'title',\n    'badge',\n    'secondaryText',\n    'actionBlock',\n    'menuButton',\n    'sectionBlock',\n    'sectionTitle',\n    'tabs',\n  ] as const,\n  base: {\n    root: {\n      background: 'background/primary',\n      borderBlockEnd: '1px solid',\n      borderColor: 'border/regular',\n      display: 'flex',\n      flexDirection: 'column',\n      width: '100%',\n    },\n    headerBlock: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: { base: '16', tablet: '24' },\n      paddingBlockEnd: { base: '16', tablet: '24' },\n      paddingBlockStart: { base: '16', tablet: '24' },\n      paddingInlineEnd: { base: '16', tablet: '32' },\n      paddingInlineStart: { base: '16', tablet: '24' },\n      width: '100%',\n    },\n    breadcrumb: {\n      display: 'flex',\n      maxWidth: '100%',\n      minWidth: 0,\n      // The trail's list is `white-space: nowrap`, so without this a long one escapes the header's\n      // right edge instead of being clipped by it. `BitkitBreadcrumb` ellipsises its last crumb on\n      // its own, but only once it is allowed to shrink — see the `breadcrumb` prop docs.\n      overflow: 'hidden',\n    },\n    controls: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n    },\n    contentBlock: {\n      alignItems: { base: 'flex-start', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column', tablet: 'row' },\n      gap: { base: '16', tablet: '32' },\n      width: '100%',\n    },\n    // The title block and the menu button, which `hasSidebar` wraps them in. It stands in for the\n    // title block in the content row from `tablet`, where the button is gone.\n    // `contents` from `tablet`: the wrapper drops out of the layout there, so the title block is a\n    // direct child of the content row again and every desktop rule — collapsed, controls, trail —\n    // keeps targeting it as before.\n    titleBar: {\n      alignItems: 'center',\n      display: { base: 'flex', tablet: 'contents' },\n      gap: '12',\n      minWidth: 0,\n      width: '100%',\n    },\n    titleBlock: {\n      display: 'flex',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    avatar: {\n      display: 'flex',\n      flexShrink: 0,\n    },\n    textBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    titleRow: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n      minWidth: 0,\n      paddingInlineEnd: { base: '0', tablet: '24' },\n    },\n    title: {\n      color: 'text/primary',\n      minWidth: 0,\n      textStyle: { base: 'heading/mobile/h1', tablet: 'heading/h1' },\n      // One line with an ellipsis rather than wrapping. A wrapped title grew the header without\n      // limit, and the collapsed row is a fixed 72px that a second line would break. The component\n      // pairs this with `BitkitOverflowTooltip` so the full string stays readable.\n      truncate: true,\n    },\n    badge: {\n      display: 'flex',\n      flexShrink: 0,\n      // The design nudges the badge below the optical centre of the title line, wrapping it in\n      // `flex-col h-full justify-center pt-8`. Reproduced with the same mechanism rather than a\n      // fixed offset: the row centres the margin box, so this lands the badge `8 / 2` lower —\n      // 12px down a 40px desktop line and 10px down a 36px mobile one, matching both frames.\n      marginBlockStart: '8',\n    },\n    secondaryText: {\n      color: 'text/secondary',\n      textStyle: 'body/lg/regular',\n      truncate: true,\n    },\n    actionBlock: {\n      // The design puts the primary action on top once the actions stack, so `base` reverses them\n      // visually while the DOM keeps its secondary-then-primary order for the row layout.\n      //\n      // That mismatch is deliberate and settled — please don't \"fix\" it. Actions arrive as an opaque\n      // `children` list, so with one DOM order and two visual orders, no arrangement satisfies both\n      // breakpoints; flipping the DOM only moves the mismatch to the row. The alternatives are a\n      // design change or a structured actions API, and neither earns its cost: the surviving case is\n      // a zoomed desktop window rendering `base`, where focus steps up rather than down between two\n      // adjacent buttons and nothing becomes unreachable. Chasing visual order through the DOM is\n      // also a pattern the design system avoids. v1 ships the same behaviour in `SubHeader.tsx:96`.\n      alignItems: { base: 'stretch', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column-reverse', tablet: 'row' },\n      flexShrink: 0,\n      gap: '12',\n      justifyContent: 'flex-end',\n      width: { base: '100%', tablet: 'auto' },\n    },\n    // `hasSidebar` only, and mobile only: the button that opens the sidebar's drawer, and the\n    // active section's name under a rule. From `tablet` the sidebar is beside the page and names\n    // the section itself, so both go.\n    menuButton: {\n      display: { base: 'flex', tablet: 'none' },\n      flexShrink: 0,\n    },\n    sectionBlock: {\n      // The content block aligns its children to the start, so the rule has to ask for the width.\n      alignSelf: 'stretch',\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      display: { base: 'flex', tablet: 'none' },\n      flexDirection: 'column',\n      // The rule runs edge to edge through the header block's inline padding.\n      marginInline: '-16',\n      paddingBlockStart: '16',\n      paddingInline: '16',\n    },\n    sectionTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h1',\n      truncate: true,\n    },\n    tabs: {\n      // The tab list draws its own bottom border, inset by this padding. Pulling the row up by 1px\n      // lands it exactly on the root's border instead of stacking a second line above it, so the\n      // header keeps one full-width bottom edge as designed.\n      marginBlockEnd: rem(-1),\n      paddingInlineEnd: { base: '0', tablet: '32' },\n      paddingInlineStart: { base: '0', tablet: '16' },\n      width: '100%',\n    },\n  },\n  compoundVariants: [\n    // The with-sidebar header shows the page title small beside the menu button, and the section\n    // below it large: `heading/mobile/h2` after a trail (`mobilePageHeader_content_withSidebar`),\n    // `heading/mobile/h3` without one, where the row is the design's `sidebar-block`.\n    {\n      contentVariant: 'title',\n      hasBreadcrumb: true,\n      hasSidebar: true,\n      css: { title: { base: { textStyle: 'heading/mobile/h2' } } },\n    },\n    { hasBreadcrumb: true, variant: 'minimal', css: titleInBreadcrumb },\n    { hasBreadcrumb: true, isSticky: true, css: titleInBreadcrumb },\n    { hasBreadcrumb: true, hasControls: true, variant: 'minimal', css: controlsRow },\n    { hasBreadcrumb: true, hasControls: true, isSticky: true, css: controlsRow },\n    { hasBreadcrumb: false, hasControls: true, variant: 'minimal', css: controlsWithoutTrail },\n    { hasBreadcrumb: false, hasControls: true, isSticky: true, css: controlsWithoutTrail },\n    { alignsToContent: true, variant: 'minimal', css: contentAlignedCollapsed },\n    { alignsToContent: true, isSticky: true, css: contentAlignedCollapsed },\n  ],\n  variants: {\n    contentVariant: {\n      title: {\n        titleBlock: {\n          // `center` rather than the design's `flex-end`. With no secondary text the two are\n          // identical — a 40px avatar against a 40px title line — so the bare sub-page card is\n          // unaffected. With secondary text present, `flex-end` dropped the avatar down beside it;\n          // centring matches how the app card sits its avatar against a two-line block.\n          alignItems: 'center',\n          gap: '12',\n        },\n        textBlock: {\n          gap: '4',\n        },\n      },\n      // `app` and `user` differ only in the gap between the avatar and the text — 16 and 12\n      // respectively — so they share everything else via `entityContent`.\n      app: {\n        ...entityContent,\n        titleBlock: {\n          ...entityContent.titleBlock,\n          gap: '16',\n        },\n      },\n      user: {\n        ...entityContent,\n        titleBlock: {\n          ...entityContent.titleBlock,\n          gap: '12',\n        },\n      },\n    },\n    // Mobile splits the trail into its own `breadcrumb-margin` block (`pt-24 px-16`) above a\n    // `p-16` header block, so the breadcrumb sits 24 from the top rather than 16. Desktop is 24\n    // either way, hence the flat value.\n    hasBreadcrumb: {\n      true: {\n        headerBlock: {\n          paddingBlockStart: '24',\n        },\n      },\n      false: {},\n    },\n    hasControls: {\n      true: {},\n      false: {},\n    },\n    /**\n     * From the component's `onMenuClick`: the mobile layout for a page with a sidebar\n     * (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the\n     * trail — and the title steps down to leave the section name as the page's large heading. All\n     * `base`: from `tablet` the header is the ordinary one.\n     */\n    hasSidebar: {\n      true: {\n        headerBlock: {\n          base: {\n            gap: '8',\n            paddingBlockStart: '12',\n          },\n        },\n        title: {\n          base: { textStyle: 'heading/mobile/h3' },\n        },\n      },\n      false: {},\n    },\n    /**\n     * From the component's `showDivider`. The header's background is the page's, so without the line\n     * the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes\n     * with the line. Flat values, so the collapsed row's `tablet` padding still centres it, and\n     * `isSticky` restores the line from `tablet`.\n     */\n    hasDivider: {\n      true: {},\n      false: {\n        root: { borderBlockEndWidth: 0 },\n        headerBlock: { paddingBlockEnd: 0 },\n      },\n    },\n    isSticky: {\n      true: {\n        root: {\n          // Scoped to `tablet` like the layout overrides: below the breakpoint `isSticky` is\n          // ignored entirely, so the expanded header must not pick up the stuck chrome either.\n          tablet: {\n            // Content scrolls under a stuck header, so it keeps its line with `hasDivider: false`\n            // too. Width only: the `borderBlockEnd` shorthand would also reset the colour.\n            borderBlockEndWidth: '1',\n            borderColor: 'border/minimal',\n            boxShadow: 'elevation/sm',\n          },\n        },\n        ...collapsedSlots,\n      },\n      false: {},\n    },\n    variant: {\n      default: {},\n      minimal: collapsedSlots,\n    },\n    /**\n     * Lines the content block up with the page content below, leaving the root full-width — so the\n     * header's background and bottom border run edge to edge while the title sits where the content\n     * does. The cap, when there is one, is a `maxWidth` the component sets from `contentWidth`, since\n     * a recipe variant cannot carry an arbitrary length; `contentAlign` places it, and does nothing\n     * when `contentWidth` is `'full'` and there is no cap.\n     *\n     * The design's centred frame pads both sides with 32, where the default header starts at 24.\n     * Only from `tablet`: below it the base 16 stands, matching what a content column pads with\n     * there, while the cap itself stays unscoped so the two track each other at every width.\n     *\n     * The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same\n     * `tablet` key and wins that merge, so the 32 is restated there by a compound variant — see\n     * `contentAlignedCollapsed`.\n     */\n    alignsToContent: {\n      true: {\n        headerBlock: {\n          tablet: {\n            paddingInlineStart: '32',\n          },\n        },\n      },\n      false: {},\n    },\n    /**\n     * Where the capped block sits in the full-width root: centred over a centred content column, or\n     * at the start over one that starts against a sidebar. Without a cap the block spans the root, so\n     * the auto margins resolve to nothing and either value renders the same.\n     */\n    contentAlign: {\n      center: {\n        headerBlock: {\n          marginInline: 'auto',\n        },\n      },\n      start: {\n        headerBlock: {\n          marginInlineEnd: 'auto',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    alignsToContent: false,\n    contentAlign: 'center',\n    contentVariant: 'title',\n    hasBreadcrumb: false,\n    hasControls: false,\n    hasDivider: true,\n    hasSidebar: false,\n    isSticky: false,\n    variant: 'default',\n  },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"PageHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The collapsed single-row layout, shared by `variant=\"minimal\"` and `isSticky`. Both apply the\n * exact same overrides, so the two variants are idempotent when combined. The expanded layout\n * lives in `base` — `variant=\"default\"` and `isSticky: false` deliberately define nothing, so\n * neither can undo the other's collapse.\n *\n * Every override is scoped to `tablet` and up, with no `base` key: below the breakpoint the `base`\n * styles win and the header stays expanded. The mobile Figma frame has no sticky or minimal\n * variant — it always shows the title as a heading — and a single 72px row cannot hold a\n * breadcrumb plus full-width actions at 375px.\n *\n * The slots the collapsed row drops are hidden here rather than omitted from the DOM, so the\n * component never has to know the viewport: no breakpoint hook, and no wrong-layout first paint.\n */\nconst collapsedSlots = {\n  headerBlock: {\n    tablet: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: '24',\n      // No 72 in the size scale — the design fixes the collapsed row height.\n      minHeight: rem(72),\n      paddingBlockEnd: '12',\n      paddingBlockStart: '12',\n      paddingInlineEnd: '32',\n      paddingInlineStart: '24',\n    },\n  },\n  breadcrumb: {\n    tablet: {\n      flex: '0 1 auto',\n      minWidth: 0,\n    },\n  },\n  contentBlock: {\n    tablet: {\n      alignItems: 'center',\n      flex: '1 0 0',\n      // 24 between the title and the actions, per `pageType=main, isSticky=true`. The 8 belongs to\n      // `actionBlock`, between the buttons.\n      gap: '24',\n      justifyContent: 'flex-end',\n      minWidth: 0,\n    },\n  },\n  titleBlock: {\n    tablet: {\n      alignItems: 'center',\n    },\n  },\n  title: {\n    tablet: {\n      textStyle: 'heading/h3',\n    },\n  },\n  actionBlock: {\n    tablet: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: '8',\n      width: 'auto',\n    },\n  },\n  avatar: {\n    tablet: { display: 'none' },\n  },\n  badge: {\n    tablet: { display: 'none' },\n  },\n  secondaryText: {\n    tablet: { display: 'none' },\n  },\n  tabs: {\n    tablet: { display: 'none' },\n  },\n} as const;\n\n/**\n * Collapsed *and* carrying a breadcrumb: the trail shows the title as its current item, so the\n * heading would duplicate it. `Breadcrumb.CurrentLink` is a link and not a heading, so the block is\n * made screen-reader-only instead of hidden — that keeps exactly one `h1` on the page at every\n * width without a second, conditionally rendered heading node.\n */\nconst titleInBreadcrumb = {\n  titleBlock: { tablet: { srOnly: true } },\n  // The row is trail + actions. The actions cannot shrink, so leaving `contentBlock` on a zero\n  // basis let a long trail take the whole row and collapse it to width 0 — the buttons then\n  // overflowed their own box and painted on top of the trail. Sizing the actions to their content\n  // and letting the trail take what is left makes the trail yield, and its last crumb ellipsise.\n  breadcrumb: { tablet: { flex: '1 1 auto' } },\n  // `width: auto` matters as much as the flex here, for the same reason it does in `controlsRow`:\n  // the base width is `100%`, which flex-basis `auto` resolves to, so without it this block claims\n  // the whole row and squeezes the trail to nothing.\n  contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * `minimal` *with* inline controls: the row carries three groups — trail, controls, actions — spread\n * apart rather than the usual trail-left/actions-right pair. `contentBlock` gives up its `flex: 1`\n * so `space-between` has room to distribute; without that it would absorb the free space and pin\n * the controls against the actions.\n *\n * Paired with both collapse modes, since `minimal` and `isSticky` produce the same row through\n * `collapsedSlots` — pairing it with `minimal` alone left the sticky row dropping the middle group.\n * This is the row the design file calls `PageHeader-WFE`.\n */\nconst controlsRow = {\n  headerBlock: { tablet: { justifyContent: 'space-between' } },\n  // Undoes the `flex: 1 1 auto` that `titleInBreadcrumb` gives the trail. That growth is right for\n  // the two-group row (trail + actions), but here a third group sits between them: a growing trail\n  // swallows all the free space on its side and shoves the controls island against the actions.\n  // Shrink-only keeps the trail ellipsising when the row is tight, while `space-between` gets free\n  // space to distribute.\n  breadcrumb: { tablet: { flex: '0 1 auto' } },\n  // `width: auto` matters as much as the flex: the base width is `100%`, which flex-basis `auto`\n  // resolves to, so the block would otherwise claim the whole row and shrink the trail until its\n  // metadata truncated away. Sized to its actions instead, leaving the free space to distribute.\n  contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * Collapsed with inline controls but no trail: the title takes the left slot, so the three groups\n * are the title, the controls and the actions — all inside `contentBlock`, which already spans the\n * row. The title block gives up its `flex: 1` so `space-between` has free space to distribute; left\n * growing, it would absorb the row and shove the controls against the actions.\n */\nconst controlsWithoutTrail = {\n  contentBlock: { tablet: { justifyContent: 'space-between' } },\n  titleBlock: { tablet: { flex: '0 1 auto' } },\n} as const;\n\n/**\n * `alignsToContent`'s 32, restated for the collapsed row. The collapsed slots set the header block's\n * start padding under the same `tablet` key, and the variant applied later wins the merge -- which\n * is the collapsed one, since `isSticky` and `variant` come after `alignsToContent`. A compound\n * variant is applied after every plain one, so this holds whatever order the props arrive in.\n */\nconst contentAlignedCollapsed = {\n  headerBlock: { tablet: { paddingInlineStart: '32' } },\n} as const;\n\n/**\n * Shared by the `app` and `user` content shapes — a larger avatar centred against a smaller title\n * and 14px secondary text. The two differ only in the avatar-to-text gap.\n */\nconst entityContent = {\n  titleBlock: {\n    alignItems: 'center',\n  },\n  title: {\n    textStyle: { base: 'heading/mobile/h2', tablet: 'heading/h2' },\n  },\n  secondaryText: {\n    textStyle: 'body/md/regular',\n  },\n} as const;\n\nconst pageHeaderSlotRecipe = defineSlotRecipe({\n  className: 'page-header',\n  slots: [\n    'root',\n    'headerBlock',\n    'breadcrumb',\n    'controls',\n    'contentBlock',\n    'titleBar',\n    'titleBlock',\n    'avatar',\n    'textBlock',\n    'titleRow',\n    'title',\n    'badge',\n    'secondaryText',\n    'actionBlock',\n    'menuButton',\n    'sectionBlock',\n    'sectionTitle',\n    'tabs',\n  ] as const,\n  base: {\n    root: {\n      background: 'background/primary',\n      borderBlockEnd: '1px solid',\n      borderColor: 'border/regular',\n      display: 'flex',\n      flexDirection: 'column',\n      width: '100%',\n    },\n    headerBlock: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: { base: '16', tablet: '24' },\n      paddingBlockEnd: { base: '16', tablet: '24' },\n      paddingBlockStart: { base: '16', tablet: '24' },\n      paddingInlineEnd: { base: '16', tablet: '32' },\n      paddingInlineStart: { base: '16', tablet: '24' },\n      width: '100%',\n    },\n    breadcrumb: {\n      display: 'flex',\n      maxWidth: '100%',\n      minWidth: 0,\n      // The trail's list is `white-space: nowrap`, so without this a long one escapes the header's\n      // right edge instead of being clipped by it. `BitkitBreadcrumb` ellipsises its last crumb on\n      // its own, but only once it is allowed to shrink — see the `breadcrumb` prop docs.\n      overflow: 'hidden',\n    },\n    controls: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n    },\n    contentBlock: {\n      alignItems: { base: 'flex-start', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column', tablet: 'row' },\n      gap: { base: '16', tablet: '32' },\n      width: '100%',\n    },\n    // The title block and the menu button, which `hasSidebar` wraps them in. It stands in for the\n    // title block in the content row from `tablet`, where the button is gone.\n    // `contents` from `tablet`: the wrapper drops out of the layout there, so the title block is a\n    // direct child of the content row again and every desktop rule — collapsed, controls, trail —\n    // keeps targeting it as before.\n    titleBar: {\n      alignItems: 'center',\n      display: { base: 'flex', tablet: 'contents' },\n      gap: '12',\n      minWidth: 0,\n      width: '100%',\n    },\n    titleBlock: {\n      // Full row width below `tablet`, where the content block is a column aligned to the start; sized to\n      // its content, a long title or subtitle pushed the header past the page edge.\n      alignSelf: { base: 'stretch', tablet: 'auto' },\n      display: 'flex',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    avatar: {\n      display: 'flex',\n      flexShrink: 0,\n    },\n    textBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    titleRow: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n      minWidth: 0,\n      paddingInlineEnd: { base: '0', tablet: '24' },\n    },\n    title: {\n      color: 'text/primary',\n      minWidth: 0,\n      textStyle: { base: 'heading/mobile/h1', tablet: 'heading/h1' },\n      // One line with an ellipsis rather than wrapping. A wrapped title grew the header without\n      // limit, and the collapsed row is a fixed 72px that a second line would break. The component\n      // pairs this with `BitkitOverflowTooltip` so the full string stays readable.\n      truncate: true,\n    },\n    badge: {\n      display: 'flex',\n      flexShrink: 0,\n      // The design nudges the badge below the optical centre of the title line, wrapping it in\n      // `flex-col h-full justify-center pt-8`. Reproduced with the same mechanism rather than a\n      // fixed offset: the row centres the margin box, so this lands the badge `8 / 2` lower —\n      // 12px down a 40px desktop line and 10px down a 36px mobile one, matching both frames.\n      marginBlockStart: '8',\n    },\n    secondaryText: {\n      color: 'text/secondary',\n      textStyle: 'body/lg/regular',\n      truncate: true,\n    },\n    actionBlock: {\n      // The design puts the primary action on top once the actions stack, so `base` reverses them\n      // visually while the DOM keeps its secondary-then-primary order for the row layout.\n      //\n      // That mismatch is deliberate and settled — please don't \"fix\" it. Actions arrive as an opaque\n      // `children` list, so with one DOM order and two visual orders, no arrangement satisfies both\n      // breakpoints; flipping the DOM only moves the mismatch to the row. The alternatives are a\n      // design change or a structured actions API, and neither earns its cost: the surviving case is\n      // a zoomed desktop window rendering `base`, where focus steps up rather than down between two\n      // adjacent buttons and nothing becomes unreachable. Chasing visual order through the DOM is\n      // also a pattern the design system avoids. v1 ships the same behaviour in `SubHeader.tsx:96`.\n      alignItems: { base: 'stretch', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column-reverse', tablet: 'row' },\n      flexShrink: 0,\n      gap: '12',\n      justifyContent: 'flex-end',\n      width: { base: '100%', tablet: 'auto' },\n    },\n    // `hasSidebar` only, and mobile only: the button that opens the sidebar's drawer, and the\n    // active section's name under a rule. From `tablet` the sidebar is beside the page and names\n    // the section itself, so both go.\n    menuButton: {\n      display: { base: 'flex', tablet: 'none' },\n      flexShrink: 0,\n    },\n    sectionBlock: {\n      // The content block aligns its children to the start, so the rule has to ask for the width.\n      alignSelf: 'stretch',\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      display: { base: 'flex', tablet: 'none' },\n      flexDirection: 'column',\n      // The rule runs edge to edge through the header block's inline padding.\n      marginInline: '-16',\n      paddingBlockStart: '16',\n      paddingInline: '16',\n    },\n    sectionTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h1',\n      truncate: true,\n    },\n    tabs: {\n      // The tab list draws its own bottom border, inset by this padding. Pulling the row up by 1px\n      // lands it exactly on the root's border instead of stacking a second line above it, so the\n      // header keeps one full-width bottom edge as designed.\n      marginBlockEnd: rem(-1),\n      paddingInlineEnd: { base: '0', tablet: '32' },\n      paddingInlineStart: { base: '0', tablet: '16' },\n      width: '100%',\n    },\n  },\n  compoundVariants: [\n    // The with-sidebar header shows the page title small beside the menu button, and the section\n    // below it large: `heading/mobile/h2` after a trail (`mobilePageHeader_content_withSidebar`),\n    // `heading/mobile/h3` without one, where the row is the design's `sidebar-block`.\n    {\n      contentVariant: 'title',\n      hasBreadcrumb: true,\n      hasSidebar: true,\n      css: { title: { base: { textStyle: 'heading/mobile/h2' } } },\n    },\n    { hasBreadcrumb: true, variant: 'minimal', css: titleInBreadcrumb },\n    { hasBreadcrumb: true, isSticky: true, css: titleInBreadcrumb },\n    { hasBreadcrumb: true, hasControls: true, variant: 'minimal', css: controlsRow },\n    { hasBreadcrumb: true, hasControls: true, isSticky: true, css: controlsRow },\n    { hasBreadcrumb: false, hasControls: true, variant: 'minimal', css: controlsWithoutTrail },\n    { hasBreadcrumb: false, hasControls: true, isSticky: true, css: controlsWithoutTrail },\n    { alignsToContent: true, variant: 'minimal', css: contentAlignedCollapsed },\n    { alignsToContent: true, isSticky: true, css: contentAlignedCollapsed },\n  ],\n  variants: {\n    contentVariant: {\n      title: {\n        titleBlock: {\n          // `center` rather than the design's `flex-end`. With no secondary text the two are\n          // identical — a 40px avatar against a 40px title line — so the bare sub-page card is\n          // unaffected. With secondary text present, `flex-end` dropped the avatar down beside it;\n          // centring matches how the app card sits its avatar against a two-line block.\n          alignItems: 'center',\n          gap: '12',\n        },\n        textBlock: {\n          gap: '4',\n        },\n      },\n      // `app` and `user` differ only in the gap between the avatar and the text — 16 and 12\n      // respectively — so they share everything else via `entityContent`.\n      app: {\n        ...entityContent,\n        titleBlock: {\n          ...entityContent.titleBlock,\n          gap: '16',\n        },\n      },\n      user: {\n        ...entityContent,\n        titleBlock: {\n          ...entityContent.titleBlock,\n          gap: '12',\n        },\n      },\n    },\n    // Mobile splits the trail into its own `breadcrumb-margin` block (`pt-24 px-16`) above a\n    // `p-16` header block, so the breadcrumb sits 24 from the top rather than 16. Desktop is 24\n    // either way, hence the flat value.\n    hasBreadcrumb: {\n      true: {\n        headerBlock: {\n          paddingBlockStart: '24',\n        },\n      },\n      false: {},\n    },\n    hasControls: {\n      true: {},\n      false: {},\n    },\n    /**\n     * From the component's `onMenuClick`: the mobile layout for a page with a sidebar\n     * (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the\n     * trail — and the title steps down to leave the section name as the page's large heading. All\n     * `base`: from `tablet` the header is the ordinary one.\n     */\n    hasSidebar: {\n      true: {\n        headerBlock: {\n          base: {\n            gap: '8',\n            paddingBlockStart: '12',\n          },\n        },\n        title: {\n          base: { textStyle: 'heading/mobile/h3' },\n        },\n      },\n      false: {},\n    },\n    /**\n     * From the component's `showDivider`. The header's background is the page's, so without the line\n     * the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes\n     * with the line. Flat values, so the collapsed row's `tablet` padding still centres it, and\n     * `isSticky` restores the line from `tablet`.\n     */\n    hasDivider: {\n      true: {},\n      false: {\n        root: { borderBlockEndWidth: 0 },\n        headerBlock: { paddingBlockEnd: 0 },\n      },\n    },\n    isSticky: {\n      true: {\n        root: {\n          // Scoped to `tablet` like the layout overrides: below the breakpoint `isSticky` is\n          // ignored entirely, so the expanded header must not pick up the stuck chrome either.\n          tablet: {\n            // Content scrolls under a stuck header, so it keeps its line with `hasDivider: false`\n            // too. Width only: the `borderBlockEnd` shorthand would also reset the colour.\n            borderBlockEndWidth: '1',\n            borderColor: 'border/minimal',\n            boxShadow: 'elevation/sm',\n          },\n        },\n        ...collapsedSlots,\n      },\n      false: {},\n    },\n    variant: {\n      default: {},\n      minimal: collapsedSlots,\n    },\n    /**\n     * Lines the content up with the page content below, leaving the root full-width — so the header's background and\n     * bottom border run edge to edge while the title and the tabs sit where the content does. The cap is a `maxWidth`\n     * the component sets from `contentWidth`; the auto margins centre it, and resolve to nothing when there is no cap.\n     *\n     * The design's centred frame pads both sides with 32, where the default header starts at 24. Only from `tablet`:\n     * below it the base 16 stands, matching what a content column pads with there.\n     *\n     * The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same `tablet` key and wins\n     * that merge, so the 32 is restated there by a compound variant — see `contentAlignedCollapsed`.\n     */\n    alignsToContent: {\n      true: {\n        headerBlock: {\n          marginInline: 'auto',\n          tablet: {\n            paddingInlineStart: '32',\n          },\n        },\n        tabs: {\n          marginInline: 'auto',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    alignsToContent: false,\n    contentVariant: 'title',\n    hasBreadcrumb: false,\n    hasControls: false,\n    hasDivider: true,\n    hasSidebar: false,\n    isSticky: false,\n    variant: 'default',\n  },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { default as contentWidthStyles } from '../common/ContentWidth.common';
+declare const pageSubheaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "tabs" | "root" | "secondaryText" | "headerBlock" | "contentBlock" | "textBlock" | "actionBlock", {
+    contentWidth: { [K in keyof typeof contentWidthStyles]: {
+        contentBlock: (typeof contentWidthStyles)[K];
+        tabs?: {
+            paddingInlineStart: {
+                base: string;
+                tablet: string;
+            };
+        };
+    }; };
+    hasTabs: {
+        true: {
+            root: {
+                borderBlockEnd: "1px solid";
+                borderColor: "border/regular";
+            };
+            headerBlock: {
+                paddingBlockEnd: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export default pageSubheaderSlotRecipe;