@bitrise/bitkit-v2 0.3.478 → 0.3.480-beta.3050

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    'titleBlock',\n    'avatar',\n    'textBlock',\n    'titleRow',\n    'title',\n    'badge',\n    'secondaryText',\n    'actionBlock',\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    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    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    { 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 `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    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      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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"}

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

@@ -1,4 +1,52 @@
-declare const pageSidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "suffixIcon" | "titleText" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "progressBlocker" | "progressConnector" | "progressContentBlock" | "progressIcon" | "progressLabel" | "progressRow" | "progressSecondaryText" | "progressTextBlock" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
+declare const pageSidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "suffixIcon" | "titleText" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "drawerHeader" | "divider" | "drawerBackdrop" | "drawerCloseButton" | "drawerContent" | "drawerHeaderAvatar" | "drawerHeaderSecondaryText" | "drawerHeaderTextBlock" | "drawerHeaderTitle" | "progressBlocker" | "progressConnector" | "progressContentBlock" | "progressIcon" | "progressLabel" | "progressRow" | "progressSecondaryText" | "progressTextBlock" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
+    /**
+     * `drawer` is the sidebar inside its mobile drawer panel: the panel carries the edge and the
+     * width, so the navigation itself gives up its own and scrolls within the panel.
+     */
+    layout: {
+        hidden: {
+            root: {
+                display: {
+                    base: "none";
+                    tablet: "flex";
+                };
+            };
+        };
+        drawer: {
+            root: {
+                borderInlineEndWidth: number;
+                flex: number;
+                maxWidth: "none";
+                minHeight: "auto";
+                minWidth: number;
+                overflowY: "auto";
+                width: "full";
+            };
+        };
+        static: {};
+    };
+    /**
+     * The drawer header's two shapes (Figma `mobilePageSidebarHeader`): a page title on its own, or
+     * an entity — app or user — whose name steps down a size to make room for its secondary text.
+     */
+    hasSecondaryText: {
+        true: {
+            drawerHeader: {
+                gap: "12";
+            };
+            drawerHeaderTitle: {
+                textStyle: "heading/mobile/h3";
+            };
+        };
+        false: {
+            drawerHeader: {
+                gap: "8";
+            };
+            drawerHeaderTextBlock: {
+                paddingInlineStart: "4";
+            };
+        };
+    };
     hasBack: {
         true: {
             title: {

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

@@ -7,6 +7,14 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
 		"body",
 		"contentBlock",
 		"divider",
+		"drawerBackdrop",
+		"drawerCloseButton",
+		"drawerContent",
+		"drawerHeader",
+		"drawerHeaderAvatar",
+		"drawerHeaderSecondaryText",
+		"drawerHeaderTextBlock",
+		"drawerHeaderTitle",
 		"footer",
 		"item",
 		"itemIcon",
@@ -50,6 +58,55 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
 				tablet: rem(240)
 			}
 		},
+		drawerBackdrop: { background: "utilities/overlay-dark" },
+		drawerContent: {
+			boxShadow: "elevation/lg",
+			overflow: "visible",
+			width: rem(320),
+			maxWidth: "calc(100vw - 56px)"
+		},
+		drawerCloseButton: {
+			alignItems: "center",
+			display: "flex",
+			height: rem(56),
+			insetBlockStart: 0,
+			insetInlineEnd: "100%",
+			paddingInlineEnd: "8",
+			position: "absolute"
+		},
+		drawerHeader: {
+			alignItems: "center",
+			borderBlockEndColor: "border/regular",
+			borderBlockEndStyle: "solid",
+			borderBlockEndWidth: "1",
+			display: "flex",
+			flexShrink: 0,
+			minHeight: rem(56),
+			paddingBlockEnd: "12",
+			paddingBlockStart: "12",
+			paddingInlineEnd: "24",
+			paddingInlineStart: "16"
+		},
+		drawerHeaderAvatar: {
+			display: "flex",
+			flexShrink: 0
+		},
+		drawerHeaderTextBlock: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			minWidth: 0
+		},
+		drawerHeaderTitle: {
+			color: "text/primary",
+			textStyle: "heading/mobile/h2",
+			truncate: true
+		},
+		drawerHeaderSecondaryText: {
+			color: "text/secondary",
+			textStyle: "body/md/regular",
+			truncate: true
+		},
 		body: {
 			display: "flex",
 			flex: 1,
@@ -285,6 +342,40 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
 		}
 	},
 	variants: {
+		/**
+		* `drawer` is the sidebar inside its mobile drawer panel: the panel carries the edge and the
+		* width, so the navigation itself gives up its own and scrolls within the panel.
+		*/
+		layout: {
+			hidden: { root: { display: {
+				base: "none",
+				tablet: "flex"
+			} } },
+			drawer: { root: {
+				borderInlineEndWidth: 0,
+				flex: 1,
+				maxWidth: "none",
+				minHeight: "auto",
+				minWidth: 0,
+				overflowY: "auto",
+				width: "full"
+			} },
+			static: {}
+		},
+		/**
+		* The drawer header's two shapes (Figma `mobilePageSidebarHeader`): a page title on its own, or
+		* an entity — app or user — whose name steps down a size to make room for its secondary text.
+		*/
+		hasSecondaryText: {
+			true: {
+				drawerHeader: { gap: "12" },
+				drawerHeaderTitle: { textStyle: "heading/mobile/h3" }
+			},
+			false: {
+				drawerHeader: { gap: "8" },
+				drawerHeaderTextBlock: { paddingInlineStart: "4" }
+			}
+		},
 		hasBack: {
 			true: {
 				title: {
@@ -388,7 +479,9 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
 	},
 	defaultVariants: {
 		hasBack: false,
+		hasSecondaryText: false,
 		isDisabled: false,
+		layout: "static",
 		notRequired: false,
 		selected: false
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageSidebar.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst pageSidebarSlotRecipe = defineSlotRecipe({\n  className: 'page-sidebar',\n  slots: [\n    'body',\n    'contentBlock',\n    'divider',\n    'footer',\n    'item',\n    'itemIcon',\n    'itemLabel',\n    'progressBlocker',\n    'progressConnector',\n    'progressContentBlock',\n    'progressIcon',\n    'progressLabel',\n    'progressRow',\n    'progressSecondaryText',\n    'progressTextBlock',\n    'project',\n    'projectLabel',\n    'projectValue',\n    'projectValueWrapper',\n    'root',\n    'selectionMarker',\n    'suffixIcon',\n    'title',\n    'titleBlock',\n    'titleText',\n  ],\n  base: {\n    root: {\n      background: 'background/primary',\n      // Longhands, not the `borderInlineEnd: '1px solid'` shorthand: that shorthand carries no\n      // colour, so it resets it to `currentColor` if it lands after `borderColor` — which is what\n      // sorting these keys alphabetically did, turning the rule dark.\n      borderInlineEndColor: 'border/regular',\n      borderInlineEndStyle: 'solid',\n      borderInlineEndWidth: '1',\n      display: 'flex',\n      flexDirection: 'column',\n      // `minHeight` rather than `height`: on a short navigation the sidebar still reaches the\n      // bottom of the viewport, but a long one grows past it and scrolls with the page as one\n      // block — the footer is part of that scroll, not pinned to the bottom.\n      minHeight: '100dvh',\n      // Below `tablet` the sidebar is the whole view — Figma's mobile frame (`23056:50745`) is the\n      // full 375 of the phone, not a 240 column beside a page.\n      maxWidth: { base: 'none', tablet: rem(320) },\n      minWidth: rem(240),\n      paddingBlockStart: '16',\n      width: { base: 'full', tablet: rem(240) },\n    },\n    body: {\n      display: 'flex',\n      // Absorbs the slack so the footer sits at the bottom when the navigation is short, and\n      // simply grows when it is long.\n      flex: 1,\n      flexDirection: 'column',\n      // Half of the gap to the footer block; the footer carries the other half. Split that way so\n      // this one is also the sidebar's bottom padding when there is no footer -- 8 either way,\n      // rather than the body's whole 16 becoming the bottom edge. It is a margin so it stays\n      // outside the items' own box, and `flex: 1` above means any extra space lands in the body\n      // rather than widening the gap. Margins do not collapse in a flex column, so the two add up.\n      marginBlockEnd: '8',\n      width: 'full',\n    },\n    title: {\n      alignItems: 'center',\n      color: 'text/primary',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'clip',\n      paddingInlineEnd: '32',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      minWidth: 0,\n    },\n    titleText: {\n      textStyle: 'heading/h3',\n      whiteSpace: 'nowrap',\n    },\n    item: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n      focusVisibleRing: 'inside',\n      gap: '12',\n      overflow: 'clip',\n      // 48 tall on mobile against 40 on desktop — the row is a touch target there.\n      paddingBlock: { base: '12', tablet: '8' },\n      paddingInline: '24',\n      position: 'relative',\n      width: 'full',\n      // Mobile reaches for `background/hover` / `background/active` where desktop uses the\n      // `secondary` / `tertiary` surfaces. The two happen to resolve close, but they are separate\n      // tokens in the design and the mobile item (`9221:4406`) binds these.\n      _hover: {\n        background: { base: 'background/hover', tablet: 'background/secondary' },\n        _active: {\n          background: { base: 'background/active', tablet: 'background/tertiary' },\n        },\n      },\n      _active: {\n        background: { base: 'background/active', tablet: 'background/tertiary' },\n      },\n      // `focusVisibleRing: 'inside'` still resolves to `outline-offset: 0`, which draws the ring\n      // just outside the border box. The item spans the sidebar's full width, so that would bleed\n      // past the sidebar's edges — pull the whole ring inside the item instead.\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    contentBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      gap: '12',\n      minWidth: 0,\n      // Pads the 16px icon out to the 24px line box on desktop. The mobile icon is already 24, so\n      // there is nothing to make up — the row would just grow past 48.\n      paddingBlock: { base: '0', tablet: '2' },\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      flexShrink: 0,\n      _groupHover: {\n        color: 'icon/primary',\n      },\n    },\n    itemLabel: {\n      color: 'text/primary',\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textAlign: 'start',\n      textOverflow: 'ellipsis',\n      textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n      whiteSpace: 'nowrap',\n    },\n    suffixIcon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n    },\n    selectionMarker: {\n      background: 'border/selected',\n      // Mobile draws the marker as a plain 4px edge (`9221:4417`); desktop as a 2px rounded rule.\n      borderEndStartRadius: { base: '0', tablet: '2' },\n      borderStartStartRadius: { base: '0', tablet: '2' },\n      height: 'full',\n      insetBlockStart: 0,\n      insetInlineEnd: 0,\n      position: 'absolute',\n      width: { base: '4', tablet: '2' },\n    },\n    footer: {\n      borderBlockStart: '1px solid',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexDirection: 'column',\n      // The body above absorbs the free space, so the footer needs no positioning of its own —\n      // it just must not be squashed by a long list.\n      flexShrink: 0,\n      // The other half of the gap to the body — see its `marginBlockEnd`.\n      marginBlockStart: '8',\n      paddingBlock: '8',\n    },\n    /**\n     * The progress item's own text, rather than `itemLabel`: that slot grows to fill the row, which\n     * here belongs to the blocker so the connector can run to the trailing edge.\n     */\n    progressLabel: {\n      color: 'text/primary',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n      whiteSpace: 'nowrap',\n    },\n    /** Follows the label after a middle dot, which the component renders. */\n    progressSecondaryText: {\n      color: 'text/tertiary',\n      flexShrink: 0,\n      textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n      whiteSpace: 'nowrap',\n    },\n    /**\n     * Badge and connector as one unit, taking the width the text leaves.\n     *\n     * `fit-content` rather than 0: the flex basis is 0, so with a shrinking text block beside it\n     * there is no free space to grow into and the block would be handed the whole row -- leaving\n     * the badge, which does not shrink, hanging off the trailing edge. The floor is the badge; the\n     * connector inside is basis 0 and contributes nothing to it.\n     */\n    progressBlocker: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      gap: '12',\n      minWidth: 'fit-content',\n    },\n    /**\n     * The status icon's own slot rather than `itemIcon`: that one brightens to `icon/primary` with\n     * the row, which is right for navigation and wrong here -- hovering a stage would drop the\n     * colour that says where it stands.\n     */\n    progressIcon: {\n      // The colour a status-less icon takes -- the approvals step's, which the design draws in the\n      // same `icon/secondary` as the navigation icons. `iconColor` overrides it per stage.\n      color: 'icon/secondary',\n      flexShrink: 0,\n      // Its own slot rather than `itemIcon`, but it does brighten with the row: the design moves the\n      // icon to `icon/primary` on hover and active. That only ever reaches a colour this recipe\n      // supplied -- a consumer's `iconColor` is an inline, unlayered `color` and beats it -- so a\n      // stage's status survives the hover while a status-less icon follows the row.\n      _groupHover: {\n        color: 'icon/primary',\n      },\n    },\n    /**\n     * Label and secondary text read as one line, so they sit closer than the row's own 12 gap.\n     *\n     * It shrinks before the blocker does: `item` clips its overflow, so without this a long stage\n     * name is cut mid-word and pushes the secondary text and the connector off the row. The\n     * blocker keeps `flex: 1`, so it still takes the slack whenever the text is short enough.\n     */\n    progressTextBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 1,\n      gap: '4',\n      minWidth: 0,\n    },\n    /**\n     * The progress row's block padding, which does not follow the navigation row's to 12 on mobile:\n     * the design keeps this row on 8 at both widths, so it is 44 tall on mobile against a nav row's\n     * 48. Layered over `item` rather than replacing it -- everything else about the row is shared.\n     */\n    progressRow: {\n      paddingBlock: '8',\n    },\n    /** With the row above: 2 either side of the line box at both widths, so the block is 28. */\n    progressContentBlock: {\n      paddingBlock: '2',\n    },\n    progressConnector: {\n      borderColor: 'border/minimal',\n      borderStyle: 'dashed',\n      flex: 1,\n    },\n    project: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n      justifyContent: 'center',\n      overflow: 'clip',\n      paddingBlockEnd: { base: '12', tablet: '8' },\n      paddingBlockStart: '8',\n      paddingInlineEnd: { base: '24', tablet: '32' },\n      paddingInlineStart: '24',\n      whiteSpace: 'nowrap',\n    },\n    projectLabel: {\n      color: 'text/tertiary',\n      textStyle: 'heading/h6',\n    },\n    projectValue: {\n      color: 'text/body',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/lg/semibold',\n    },\n    projectValueWrapper: {\n      display: 'flex',\n      minWidth: 0,\n    },\n    divider: {\n      // Both of the sidebar's separator roles are `border/minimal` — the group header\n      // (`20014:6508`) and this plain rule (`20014:6511`) — against `border/regular` for the general\n      // Separator component. The override is per-slot for that reason, not to limit blast radius.\n      borderColor: 'border/minimal',\n      // Mobile's separator row is 40 tall, which centres the rule at 19.5 a side; 20 is the token\n      // next to it and the resulting 1px lands nowhere the eye can find it.\n      marginBlock: { base: '20', tablet: '16' },\n      marginInline: '24',\n      width: 'auto',\n    },\n  },\n  variants: {\n    hasBack: {\n      // Redlines on the sub view (Figma `- page sidebar - interactions`): the title block sits at\n      // x/y 16, is 40 tall, and the 32px back button sits at y 20 — i.e. the 4px padding belongs to\n      // the block wrapping button + text, not to the text. Header totals 16 + 40 + 8 = 64.\n      true: {\n        title: {\n          paddingBlockEnd: '8',\n          paddingInlineStart: '16',\n        },\n        titleBlock: {\n          gap: '4',\n          paddingBlock: '4',\n        },\n      },\n      // Main view: no button, so the text alone is the block — 6 + 28 + 6 = 40, header 16+40+16 = 72.\n      false: {\n        title: {\n          paddingBlockEnd: '16',\n          paddingInlineStart: '24',\n        },\n        titleBlock: {\n          paddingBlock: '6',\n        },\n      },\n    },\n    isDisabled: {\n      true: {\n        item: {\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'transparent',\n            _active: {\n              background: 'transparent',\n            },\n          },\n          _active: {\n            background: 'transparent',\n          },\n        },\n        itemIcon: {\n          color: 'icon/disabled',\n          _groupHover: {\n            color: 'icon/disabled',\n          },\n        },\n        itemLabel: {\n          color: 'text/disabled',\n        },\n        progressIcon: {\n          color: 'icon/disabled',\n          _groupHover: {\n            color: 'icon/disabled',\n          },\n        },\n        progressLabel: {\n          color: 'text/disabled',\n        },\n        progressSecondaryText: {\n          color: 'text/disabled',\n        },\n      },\n      false: {},\n    },\n    selected: {\n      true: {\n        item: {\n          background: 'background/selected',\n          _hover: {\n            background: 'background/selected-hover',\n            _active: {\n              background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n            },\n          },\n          _active: {\n            background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n          },\n        },\n        itemIcon: {\n          color: 'icon/interactive',\n          _groupHover: {\n            color: 'icon/interactive-hover',\n          },\n        },\n        itemLabel: {\n          textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n        },\n        progressIcon: {\n          color: 'icon/interactive',\n          _groupHover: {\n            color: 'icon/interactive-hover',\n          },\n        },\n        progressLabel: {\n          textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n        },\n      },\n      false: {},\n    },\n    /**\n     * A stage the release does not have to clear. Everything steps down one level -- the icon to\n     * tertiary, the label to secondary -- so the row reads as present but not awaited. Hover and\n     * active take both back to the row's ordinary colours, as they do for a required stage.\n     *\n     * `selected` wins over it, resolved in the component rather than here. The design draws the\n     * pair (`selected=yes, notRequired=true`) and gives it the selected row's icon and label with\n     * the `not required` secondary text kept, which is what dropping this variant produces.\n     */\n    notRequired: {\n      true: {\n        progressIcon: {\n          color: 'icon/tertiary',\n          _groupHover: { color: 'icon/primary' },\n        },\n        progressLabel: {\n          color: 'text/secondary',\n          _groupHover: { color: 'text/primary' },\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    hasBack: false,\n    isDisabled: false,\n    notRequired: false,\n    selected: false,\n  },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,wBAAwB,iBAAiB;CAC7C,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;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GAIZ,sBAAsB;GACtB,sBAAsB;GACtB,sBAAsB;GACtB,SAAS;GACT,eAAe;GAIf,WAAW;GAGX,UAAU;IAAE,MAAM;IAAQ,QAAQ,IAAI,GAAG;GAAE;GAC3C,UAAU,IAAI,GAAG;GACjB,mBAAmB;GACnB,OAAO;IAAE,MAAM;IAAQ,QAAQ,IAAI,GAAG;GAAE;EAC1C;EACA,MAAM;GACJ,SAAS;GAGT,MAAM;GACN,eAAe;GAMf,gBAAgB;GAChB,OAAO;EACT;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,UAAU;EACZ;EACA,WAAW;GACT,WAAW;GACX,YAAY;EACd;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,kBAAkB;GAClB,KAAK;GACL,UAAU;GAEV,cAAc;IAAE,MAAM;IAAM,QAAQ;GAAI;GACxC,eAAe;GACf,UAAU;GACV,OAAO;GAIP,QAAQ;IACN,YAAY;KAAE,MAAM;KAAoB,QAAQ;IAAuB;IACvE,SAAS,EACP,YAAY;KAAE,MAAM;KAAqB,QAAQ;IAAsB,EACzE;GACF;GACA,SAAS,EACP,YAAY;IAAE,MAAM;IAAqB,QAAQ;GAAsB,EACzE;GAIA,eAAe,EACb,eAAe,qCACjB;EACF;EACA,cAAc;GACZ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;GAGV,cAAc;IAAE,MAAM;IAAK,QAAQ;GAAI;EACzC;EACA,UAAU;GACR,OAAO;GACP,YAAY;GACZ,aAAa,EACX,OAAO,eACT;EACF;EACA,WAAW;GACT,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,WAAW;GACX,cAAc;GACd,WAAW;IAAE,MAAM;IAAmB,QAAQ;GAAkB;GAChE,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,YAAY;EACd;EACA,iBAAiB;GACf,YAAY;GAEZ,sBAAsB;IAAE,MAAM;IAAK,QAAQ;GAAI;GAC/C,wBAAwB;IAAE,MAAM;IAAK,QAAQ;GAAI;GACjD,QAAQ;GACR,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;GACV,OAAO;IAAE,MAAM;IAAK,QAAQ;GAAI;EAClC;EACA,QAAQ;GACN,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,eAAe;GAGf,YAAY;GAEZ,kBAAkB;GAClB,cAAc;EAChB;;;;;EAKA,eAAe;GACb,OAAO;GACP,UAAU;GACV,UAAU;GACV,cAAc;GACd,WAAW;IAAE,MAAM;IAAmB,QAAQ;GAAkB;GAChE,YAAY;EACd;;EAEA,uBAAuB;GACrB,OAAO;GACP,YAAY;GACZ,WAAW;IAAE,MAAM;IAAmB,QAAQ;GAAkB;GAChE,YAAY;EACd;;;;;;;;;EASA,iBAAiB;GACf,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;EACZ;;;;;;EAMA,cAAc;GAGZ,OAAO;GACP,YAAY;GAKZ,aAAa,EACX,OAAO,eACT;EACF;;;;;;;;EAQA,mBAAmB;GACjB,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;EACZ;;;;;;EAMA,aAAa,EACX,cAAc,IAChB;;EAEA,sBAAsB,EACpB,cAAc,IAChB;EACA,mBAAmB;GACjB,aAAa;GACb,aAAa;GACb,MAAM;EACR;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,gBAAgB;GAChB,UAAU;GACV,iBAAiB;IAAE,MAAM;IAAM,QAAQ;GAAI;GAC3C,mBAAmB;GACnB,kBAAkB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC7C,oBAAoB;GACpB,YAAY;EACd;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,UAAU;GACV,cAAc;GACd,WAAW;EACb;EACA,qBAAqB;GACnB,SAAS;GACT,UAAU;EACZ;EACA,SAAS;GAIP,aAAa;GAGb,aAAa;IAAE,MAAM;IAAM,QAAQ;GAAK;GACxC,cAAc;GACd,OAAO;EACT;CACF;CACA,UAAU;EACR,SAAS;GAIP,MAAM;IACJ,OAAO;KACL,iBAAiB;KACjB,oBAAoB;IACtB;IACA,YAAY;KACV,KAAK;KACL,cAAc;IAChB;GACF;GAEA,OAAO;IACL,OAAO;KACL,iBAAiB;KACjB,oBAAoB;IACtB;IACA,YAAY,EACV,cAAc,IAChB;GACF;EACF;EACA,YAAY;GACV,MAAM;IACJ,MAAM;KACJ,QAAQ;KACR,QAAQ;MACN,YAAY;MACZ,SAAS,EACP,YAAY,cACd;KACF;KACA,SAAS,EACP,YAAY,cACd;IACF;IACA,UAAU;KACR,OAAO;KACP,aAAa,EACX,OAAO,gBACT;IACF;IACA,WAAW,EACT,OAAO,gBACT;IACA,cAAc;KACZ,OAAO;KACP,aAAa,EACX,OAAO,gBACT;IACF;IACA,eAAe,EACb,OAAO,gBACT;IACA,uBAAuB,EACrB,OAAO,gBACT;GACF;GACA,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM;IACJ,MAAM;KACJ,YAAY;KACZ,QAAQ;MACN,YAAY;MACZ,SAAS,EACP,YAAY;OAAE,MAAM;OAA6B,QAAQ;MAA6B,EACxF;KACF;KACA,SAAS,EACP,YAAY;MAAE,MAAM;MAA6B,QAAQ;KAA6B,EACxF;IACF;IACA,UAAU;KACR,OAAO;KACP,aAAa,EACX,OAAO,yBACT;IACF;IACA,WAAW,EACT,WAAW;KAAE,MAAM;KAAoB,QAAQ;IAAmB,EACpE;IACA,cAAc;KACZ,OAAO;KACP,aAAa,EACX,OAAO,yBACT;IACF;IACA,eAAe,EACb,WAAW;KAAE,MAAM;KAAoB,QAAQ;IAAmB,EACpE;GACF;GACA,OAAO,CAAC;EACV;;;;;;;;;;EAUA,aAAa;GACX,MAAM;IACJ,cAAc;KACZ,OAAO;KACP,aAAa,EAAE,OAAO,eAAe;IACvC;IACA,eAAe;KACb,OAAO;KACP,aAAa,EAAE,OAAO,eAAe;IACvC;GACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,aAAa;EACb,UAAU;CACZ;AACF,CAAC"}
+{"version":3,"file":"PageSidebar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageSidebar.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst pageSidebarSlotRecipe = defineSlotRecipe({\n  className: 'page-sidebar',\n  slots: [\n    'body',\n    'contentBlock',\n    'divider',\n    'drawerBackdrop',\n    'drawerCloseButton',\n    'drawerContent',\n    'drawerHeader',\n    'drawerHeaderAvatar',\n    'drawerHeaderSecondaryText',\n    'drawerHeaderTextBlock',\n    'drawerHeaderTitle',\n    'footer',\n    'item',\n    'itemIcon',\n    'itemLabel',\n    'progressBlocker',\n    'progressConnector',\n    'progressContentBlock',\n    'progressIcon',\n    'progressLabel',\n    'progressRow',\n    'progressSecondaryText',\n    'progressTextBlock',\n    'project',\n    'projectLabel',\n    'projectValue',\n    'projectValueWrapper',\n    'root',\n    'selectionMarker',\n    'suffixIcon',\n    'title',\n    'titleBlock',\n    'titleText',\n  ],\n  base: {\n    root: {\n      background: 'background/primary',\n      // Longhands, not the `borderInlineEnd: '1px solid'` shorthand: that shorthand carries no\n      // colour, so it resets it to `currentColor` if it lands after `borderColor` — which is what\n      // sorting these keys alphabetically did, turning the rule dark.\n      borderInlineEndColor: 'border/regular',\n      borderInlineEndStyle: 'solid',\n      borderInlineEndWidth: '1',\n      display: 'flex',\n      flexDirection: 'column',\n      // `minHeight` rather than `height`: on a short navigation the sidebar still reaches the\n      // bottom of the viewport, but a long one grows past it and scrolls with the page as one\n      // block — the footer is part of that scroll, not pinned to the bottom.\n      minHeight: '100dvh',\n      // Below `tablet` the sidebar is the whole view — Figma's mobile frame (`23056:50745`) is the\n      // full 375 of the phone, not a 240 column beside a page.\n      maxWidth: { base: 'none', tablet: rem(320) },\n      minWidth: rem(240),\n      paddingBlockStart: '16',\n      width: { base: 'full', tablet: rem(240) },\n    },\n    // The mobile drawer (Figma `PageSidebar - mobile`, `23512:27095`). The `Drawer.*` parts carry\n    // the registered `drawer` recipe — motion, layering, the trailing-edge positioner — so only\n    // what differs from it lives here.\n    drawerBackdrop: {\n      background: 'utilities/overlay-dark',\n    },\n    drawerContent: {\n      boxShadow: 'elevation/lg',\n      // The close button hangs off the leading edge, so the panel must not clip it.\n      overflow: 'visible',\n      width: rem(320),\n      // 320 for the panel plus the 56 the close button column takes. Narrower phones give the panel\n      // up, not the button — at a hard 320 the button would be the part pushed off-screen.\n      maxWidth: 'calc(100vw - 56px)',\n    },\n    drawerCloseButton: {\n      alignItems: 'center',\n      display: 'flex',\n      // As tall as the header row, so the button centres on it.\n      height: rem(56),\n      insetBlockStart: 0,\n      insetInlineEnd: '100%',\n      paddingInlineEnd: '8',\n      position: 'absolute',\n    },\n    drawerHeader: {\n      alignItems: 'center',\n      borderBlockEndColor: 'border/regular',\n      borderBlockEndStyle: 'solid',\n      borderBlockEndWidth: '1',\n      display: 'flex',\n      flexShrink: 0,\n      minHeight: rem(56),\n      paddingBlockEnd: '12',\n      paddingBlockStart: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n    },\n    drawerHeaderAvatar: {\n      display: 'flex',\n      flexShrink: 0,\n    },\n    drawerHeaderTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    drawerHeaderTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h2',\n      truncate: true,\n    },\n    drawerHeaderSecondaryText: {\n      color: 'text/secondary',\n      textStyle: 'body/md/regular',\n      truncate: true,\n    },\n    body: {\n      display: 'flex',\n      // Absorbs the slack so the footer sits at the bottom when the navigation is short, and\n      // simply grows when it is long.\n      flex: 1,\n      flexDirection: 'column',\n      // Half of the gap to the footer block; the footer carries the other half. Split that way so\n      // this one is also the sidebar's bottom padding when there is no footer -- 8 either way,\n      // rather than the body's whole 16 becoming the bottom edge. It is a margin so it stays\n      // outside the items' own box, and `flex: 1` above means any extra space lands in the body\n      // rather than widening the gap. Margins do not collapse in a flex column, so the two add up.\n      marginBlockEnd: '8',\n      width: 'full',\n    },\n    title: {\n      alignItems: 'center',\n      color: 'text/primary',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'clip',\n      paddingInlineEnd: '32',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      minWidth: 0,\n    },\n    titleText: {\n      textStyle: 'heading/h3',\n      whiteSpace: 'nowrap',\n    },\n    item: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n      focusVisibleRing: 'inside',\n      gap: '12',\n      overflow: 'clip',\n      // 48 tall on mobile against 40 on desktop — the row is a touch target there.\n      paddingBlock: { base: '12', tablet: '8' },\n      paddingInline: '24',\n      position: 'relative',\n      width: 'full',\n      // Mobile reaches for `background/hover` / `background/active` where desktop uses the\n      // `secondary` / `tertiary` surfaces. The two happen to resolve close, but they are separate\n      // tokens in the design and the mobile item (`9221:4406`) binds these.\n      _hover: {\n        background: { base: 'background/hover', tablet: 'background/secondary' },\n        _active: {\n          background: { base: 'background/active', tablet: 'background/tertiary' },\n        },\n      },\n      _active: {\n        background: { base: 'background/active', tablet: 'background/tertiary' },\n      },\n      // `focusVisibleRing: 'inside'` still resolves to `outline-offset: 0`, which draws the ring\n      // just outside the border box. The item spans the sidebar's full width, so that would bleed\n      // past the sidebar's edges — pull the whole ring inside the item instead.\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    contentBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      gap: '12',\n      minWidth: 0,\n      // Pads the 16px icon out to the 24px line box on desktop. The mobile icon is already 24, so\n      // there is nothing to make up — the row would just grow past 48.\n      paddingBlock: { base: '0', tablet: '2' },\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      flexShrink: 0,\n      _groupHover: {\n        color: 'icon/primary',\n      },\n    },\n    itemLabel: {\n      color: 'text/primary',\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textAlign: 'start',\n      textOverflow: 'ellipsis',\n      textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n      whiteSpace: 'nowrap',\n    },\n    suffixIcon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n    },\n    selectionMarker: {\n      background: 'border/selected',\n      // Mobile draws the marker as a plain 4px edge (`9221:4417`); desktop as a 2px rounded rule.\n      borderEndStartRadius: { base: '0', tablet: '2' },\n      borderStartStartRadius: { base: '0', tablet: '2' },\n      height: 'full',\n      insetBlockStart: 0,\n      insetInlineEnd: 0,\n      position: 'absolute',\n      width: { base: '4', tablet: '2' },\n    },\n    footer: {\n      borderBlockStart: '1px solid',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexDirection: 'column',\n      // The body above absorbs the free space, so the footer needs no positioning of its own —\n      // it just must not be squashed by a long list.\n      flexShrink: 0,\n      // The other half of the gap to the body — see its `marginBlockEnd`.\n      marginBlockStart: '8',\n      paddingBlock: '8',\n    },\n    /**\n     * The progress item's own text, rather than `itemLabel`: that slot grows to fill the row, which\n     * here belongs to the blocker so the connector can run to the trailing edge.\n     */\n    progressLabel: {\n      color: 'text/primary',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n      whiteSpace: 'nowrap',\n    },\n    /** Follows the label after a middle dot, which the component renders. */\n    progressSecondaryText: {\n      color: 'text/tertiary',\n      flexShrink: 0,\n      textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n      whiteSpace: 'nowrap',\n    },\n    /**\n     * Badge and connector as one unit, taking the width the text leaves.\n     *\n     * `fit-content` rather than 0: the flex basis is 0, so with a shrinking text block beside it\n     * there is no free space to grow into and the block would be handed the whole row -- leaving\n     * the badge, which does not shrink, hanging off the trailing edge. The floor is the badge; the\n     * connector inside is basis 0 and contributes nothing to it.\n     */\n    progressBlocker: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      gap: '12',\n      minWidth: 'fit-content',\n    },\n    /**\n     * The status icon's own slot rather than `itemIcon`: that one brightens to `icon/primary` with\n     * the row, which is right for navigation and wrong here -- hovering a stage would drop the\n     * colour that says where it stands.\n     */\n    progressIcon: {\n      // The colour a status-less icon takes -- the approvals step's, which the design draws in the\n      // same `icon/secondary` as the navigation icons. `iconColor` overrides it per stage.\n      color: 'icon/secondary',\n      flexShrink: 0,\n      // Its own slot rather than `itemIcon`, but it does brighten with the row: the design moves the\n      // icon to `icon/primary` on hover and active. That only ever reaches a colour this recipe\n      // supplied -- a consumer's `iconColor` is an inline, unlayered `color` and beats it -- so a\n      // stage's status survives the hover while a status-less icon follows the row.\n      _groupHover: {\n        color: 'icon/primary',\n      },\n    },\n    /**\n     * Label and secondary text read as one line, so they sit closer than the row's own 12 gap.\n     *\n     * It shrinks before the blocker does: `item` clips its overflow, so without this a long stage\n     * name is cut mid-word and pushes the secondary text and the connector off the row. The\n     * blocker keeps `flex: 1`, so it still takes the slack whenever the text is short enough.\n     */\n    progressTextBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 1,\n      gap: '4',\n      minWidth: 0,\n    },\n    /**\n     * The progress row's block padding, which does not follow the navigation row's to 12 on mobile:\n     * the design keeps this row on 8 at both widths, so it is 44 tall on mobile against a nav row's\n     * 48. Layered over `item` rather than replacing it -- everything else about the row is shared.\n     */\n    progressRow: {\n      paddingBlock: '8',\n    },\n    /** With the row above: 2 either side of the line box at both widths, so the block is 28. */\n    progressContentBlock: {\n      paddingBlock: '2',\n    },\n    progressConnector: {\n      borderColor: 'border/minimal',\n      borderStyle: 'dashed',\n      flex: 1,\n    },\n    project: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n      justifyContent: 'center',\n      overflow: 'clip',\n      paddingBlockEnd: { base: '12', tablet: '8' },\n      paddingBlockStart: '8',\n      paddingInlineEnd: { base: '24', tablet: '32' },\n      paddingInlineStart: '24',\n      whiteSpace: 'nowrap',\n    },\n    projectLabel: {\n      color: 'text/tertiary',\n      textStyle: 'heading/h6',\n    },\n    projectValue: {\n      color: 'text/body',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/lg/semibold',\n    },\n    projectValueWrapper: {\n      display: 'flex',\n      minWidth: 0,\n    },\n    divider: {\n      // Both of the sidebar's separator roles are `border/minimal` — the group header\n      // (`20014:6508`) and this plain rule (`20014:6511`) — against `border/regular` for the general\n      // Separator component. The override is per-slot for that reason, not to limit blast radius.\n      borderColor: 'border/minimal',\n      // Mobile's separator row is 40 tall, which centres the rule at 19.5 a side; 20 is the token\n      // next to it and the resulting 1px lands nowhere the eye can find it.\n      marginBlock: { base: '20', tablet: '16' },\n      marginInline: '24',\n      width: 'auto',\n    },\n  },\n  variants: {\n    /**\n     * `drawer` is the sidebar inside its mobile drawer panel: the panel carries the edge and the\n     * width, so the navigation itself gives up its own and scrolls within the panel.\n     */\n    layout: {\n      // `useResponsive` reports desktop until it has measured, so an opted-in sidebar would paint\n      // in the flow on a phone and then jump into the drawer. Hidden below `tablet` instead: the\n      // drawer branch takes over as soon as the measurement lands, with nothing to remove.\n      hidden: {\n        root: {\n          display: { base: 'none', tablet: 'flex' },\n        },\n      },\n      drawer: {\n        root: {\n          borderInlineEndWidth: 0,\n          flex: 1,\n          maxWidth: 'none',\n          minHeight: 'auto',\n          minWidth: 0,\n          overflowY: 'auto',\n          width: 'full',\n        },\n      },\n      static: {},\n    },\n    /**\n     * The drawer header's two shapes (Figma `mobilePageSidebarHeader`): a page title on its own, or\n     * an entity — app or user — whose name steps down a size to make room for its secondary text.\n     */\n    hasSecondaryText: {\n      true: {\n        drawerHeader: { gap: '12' },\n        drawerHeaderTitle: { textStyle: 'heading/mobile/h3' },\n      },\n      false: {\n        drawerHeader: { gap: '8' },\n        drawerHeaderTextBlock: { paddingInlineStart: '4' },\n      },\n    },\n    hasBack: {\n      // Redlines on the sub view (Figma `- page sidebar - interactions`): the title block sits at\n      // x/y 16, is 40 tall, and the 32px back button sits at y 20 — i.e. the 4px padding belongs to\n      // the block wrapping button + text, not to the text. Header totals 16 + 40 + 8 = 64.\n      true: {\n        title: {\n          paddingBlockEnd: '8',\n          paddingInlineStart: '16',\n        },\n        titleBlock: {\n          gap: '4',\n          paddingBlock: '4',\n        },\n      },\n      // Main view: no button, so the text alone is the block — 6 + 28 + 6 = 40, header 16+40+16 = 72.\n      false: {\n        title: {\n          paddingBlockEnd: '16',\n          paddingInlineStart: '24',\n        },\n        titleBlock: {\n          paddingBlock: '6',\n        },\n      },\n    },\n    isDisabled: {\n      true: {\n        item: {\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'transparent',\n            _active: {\n              background: 'transparent',\n            },\n          },\n          _active: {\n            background: 'transparent',\n          },\n        },\n        itemIcon: {\n          color: 'icon/disabled',\n          _groupHover: {\n            color: 'icon/disabled',\n          },\n        },\n        itemLabel: {\n          color: 'text/disabled',\n        },\n        progressIcon: {\n          color: 'icon/disabled',\n          _groupHover: {\n            color: 'icon/disabled',\n          },\n        },\n        progressLabel: {\n          color: 'text/disabled',\n        },\n        progressSecondaryText: {\n          color: 'text/disabled',\n        },\n      },\n      false: {},\n    },\n    selected: {\n      true: {\n        item: {\n          background: 'background/selected',\n          _hover: {\n            background: 'background/selected-hover',\n            _active: {\n              background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n            },\n          },\n          _active: {\n            background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n          },\n        },\n        itemIcon: {\n          color: 'icon/interactive',\n          _groupHover: {\n            color: 'icon/interactive-hover',\n          },\n        },\n        itemLabel: {\n          textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n        },\n        progressIcon: {\n          color: 'icon/interactive',\n          _groupHover: {\n            color: 'icon/interactive-hover',\n          },\n        },\n        progressLabel: {\n          textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n        },\n      },\n      false: {},\n    },\n    /**\n     * A stage the release does not have to clear. Everything steps down one level -- the icon to\n     * tertiary, the label to secondary -- so the row reads as present but not awaited. Hover and\n     * active take both back to the row's ordinary colours, as they do for a required stage.\n     *\n     * `selected` wins over it, resolved in the component rather than here. The design draws the\n     * pair (`selected=yes, notRequired=true`) and gives it the selected row's icon and label with\n     * the `not required` secondary text kept, which is what dropping this variant produces.\n     */\n    notRequired: {\n      true: {\n        progressIcon: {\n          color: 'icon/tertiary',\n          _groupHover: { color: 'icon/primary' },\n        },\n        progressLabel: {\n          color: 'text/secondary',\n          _groupHover: { color: 'text/primary' },\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    hasBack: false,\n    hasSecondaryText: false,\n    isDisabled: false,\n    layout: 'static',\n    notRequired: false,\n    selected: false,\n  },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export declare const uiHeaderHeightPx = 48;
+export declare const uiHeaderHeight: `${number}rem`;
+declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
+export default uiHeaderSlotRecipe;

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

@@ -0,0 +1,238 @@
+import { colorVar, rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+var uiHeaderHeight = rem(48);
+var SEARCH_FIELD_WIDTH = rem(240);
+var SEARCH_FIELD_TINT = colorVar("color/white/20");
+var controlBase = {
+	background: "sys/ui/header/control/bg",
+	_hover: {
+		background: "sys/ui/header/control/bg-hover",
+		_active: { background: "sys/ui/header/control/bg-active" }
+	},
+	_active: { background: "sys/ui/header/control/bg-active" },
+	_selected: {
+		background: "sys/ui/header/control/bg-selected",
+		_hover: {
+			background: "sys/ui/header/control/bg-selected-hover",
+			_active: { background: "sys/ui/header/control/bg-active" }
+		},
+		_active: { background: "sys/ui/header/control/bg-active" }
+	},
+	alignItems: "center",
+	borderRadius: 0,
+	color: "icon/on-color",
+	cursor: "pointer",
+	display: "flex",
+	flexShrink: 0,
+	height: uiHeaderHeight,
+	justifyContent: "center",
+	position: "relative",
+	textDecoration: "none",
+	_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
+};
+var uiHeaderSlotRecipe = defineSlotRecipe({
+	className: "ui-header",
+	slots: [
+		"accountAvatar",
+		"accountIcon",
+		"actions",
+		"badge",
+		"banner",
+		"bar",
+		"control",
+		"indicator",
+		"leading",
+		"logoBlock",
+		"logoLink",
+		"navButton",
+		"navButtonBadge",
+		"navButtonIcon",
+		"root",
+		"search",
+		"searchButton",
+		"searchClear",
+		"searchField",
+		"searchIcon",
+		"searchInput",
+		"spacer"
+	],
+	base: {
+		root: {
+			background: "sys/ui/header/bg",
+			color: "text/on-color",
+			display: "flex",
+			flexDirection: "column",
+			width: "full"
+		},
+		bar: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0,
+			height: uiHeaderHeight,
+			position: "relative",
+			tablet: { paddingInlineStart: "20" }
+		},
+		leading: {
+			display: "flex",
+			flexShrink: 0,
+			tablet: { display: "none" }
+		},
+		spacer: {
+			flexShrink: 1,
+			width: "48",
+			tablet: { display: "none" }
+		},
+		logoBlock: {
+			alignItems: "center",
+			display: "flex",
+			flex: 1,
+			justifyContent: "center",
+			minWidth: 0,
+			tablet: { flex: "none" }
+		},
+		logoLink: {
+			borderRadius: "4",
+			color: "text/on-color",
+			display: "flex",
+			marginBlockEnd: rem(3)
+		},
+		actions: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0,
+			marginInlineStart: "auto",
+			tablet: { paddingInlineEnd: "32" }
+		},
+		banner: { width: "full" },
+		control: {
+			...controlBase,
+			width: "48"
+		},
+		accountAvatar: {
+			borderRadius: "full",
+			display: "none",
+			overflow: "hidden",
+			tablet: { display: "inline-flex" }
+		},
+		accountIcon: {
+			display: "block",
+			tablet: { display: "none" }
+		},
+		navButton: {
+			...controlBase,
+			paddingBlock: "8",
+			paddingInlineEnd: "8",
+			paddingInlineStart: "12"
+		},
+		navButtonBadge: {
+			alignItems: "flex-start",
+			background: "sys/ui/header/bg",
+			borderStartStartRadius: "2",
+			color: "icon/on-color",
+			display: "flex",
+			height: "12",
+			insetBlockEnd: "8",
+			insetInlineEnd: "8",
+			overflow: "hidden",
+			pointerEvents: "none",
+			position: "absolute",
+			width: "16"
+		},
+		navButtonIcon: {
+			flexShrink: 0,
+			marginBlockStart: rem(-1),
+			marginInlineStart: "1"
+		},
+		badge: {
+			background: "sys/ui/header/badge/red",
+			borderRadius: "full",
+			height: "8",
+			insetBlockStart: "12",
+			insetInlineStart: rem(28),
+			pointerEvents: "none",
+			position: "absolute",
+			width: "8",
+			"&[data-pulse]": { _after: {
+				animation: "ping",
+				background: "sys/ui/header/badge/red",
+				borderRadius: "full",
+				content: "\"\"",
+				inset: 0,
+				opacity: .5,
+				position: "absolute",
+				_motionReduce: { animation: "none" }
+			} }
+		},
+		indicator: {
+			background: "sys/ui/header/control/indicator",
+			height: "4",
+			insetBlockEnd: 0,
+			insetInline: 0,
+			pointerEvents: "none",
+			position: "absolute"
+		},
+		search: {
+			display: "flex",
+			flexShrink: 0,
+			position: "relative"
+		},
+		searchField: {
+			alignItems: "center",
+			backgroundColor: "sys/ui/header/bg",
+			backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,
+			borderColor: "border/strong",
+			borderRadius: "4",
+			borderStyle: "solid",
+			borderWidth: "1",
+			display: "none",
+			gap: "8",
+			height: "40",
+			insetBlockStart: "4",
+			insetInlineEnd: 0,
+			opacity: 0,
+			paddingInlineEnd: "12",
+			paddingInlineStart: "8",
+			position: "absolute",
+			transitionDuration: "fast",
+			transitionProperty: "opacity, visibility",
+			transitionTimingFunction: "ease-out",
+			visibility: "hidden",
+			width: SEARCH_FIELD_WIDTH,
+			"&:has(input:focus-visible)": { boxShadow: "0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset" },
+			_open: {
+				opacity: 1,
+				visibility: "visible"
+			},
+			_motionReduce: { transitionProperty: "none" },
+			tablet: { display: "flex" }
+		},
+		searchButton: { tablet: { _open: { visibility: "hidden" } } },
+		searchClear: {
+			color: "icon/on-color",
+			flexShrink: 0
+		},
+		searchIcon: {
+			color: "icon/on-color",
+			flexShrink: 0
+		},
+		searchInput: {
+			background: "transparent",
+			borderWidth: 0,
+			color: "text/on-color",
+			flex: 1,
+			focusVisibleRing: "none",
+			minWidth: 0,
+			padding: 0,
+			textStyle: "body/lg/regular",
+			"&::-webkit-search-cancel-button": { display: "none" },
+			_placeholder: {
+				color: "text/on-color",
+				opacity: .6
+			}
+		}
+	}
+});
+//#endregion
+export { uiHeaderSlotRecipe as default, uiHeaderHeight };
+
+//# sourceMappingURL=UIHeader.recipe.js.map