@bitrise/bitkit-v2 0.3.423 → 0.3.425

package/dist/components/BitkitPageHeader/BitkitPageHeader.d.ts

@@ -45,6 +45,24 @@ export interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {
      * the avatar and the text, 16 and 12 respectively.
      */
     contentVariant?: 'title' | 'app' | 'user';
+    /**
+     * Caps the header's content and centres it, so the title lines up with a page whose content
+     * column is capped. The root stays full-width, so the background and the bottom border still run
+     * edge to edge — which a wrapper around the whole header could not do.
+     *
+     * Pass the same value as that column's `max-width`, as rems — `rem()` builds one from a pixel
+     * figure. Box-sizing is border-box throughout Bitkit, so the value includes the header's own
+     * inline padding, which the centred layout puts at 32 on both sides rather than the default 24
+     * and 32.
+     *
+     * Its presence is the toggle: with it the header is centred, without it full-width.
+     *
+     * The cap applies at every breakpoint, deliberately — a content column's own `max-width` is not
+     * breakpoint-scoped either, so scoping this one would misalign the two wherever the column is
+     * narrow enough to bite on mobile. What does change with the breakpoint is the inline padding,
+     * 16 below `tablet` and 32 above, which is the same pair such a column uses.
+     */
+    contentWidth?: `${number}rem`;
     /**
      * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.
      * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,

package/dist/components/BitkitPageHeader/BitkitPageHeader.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitPageHeader/BitkitPageHeader.tsx
 var BitkitPageHeader = forwardRef((props, ref) => {
-	const { avatar, badge, breadcrumb, children, contentVariant, controls, isSticky, secondaryText, tabs, title, variant, ...rest } = props;
+	const { avatar, badge, breadcrumb, children, contentVariant, contentWidth, controls, isSticky, secondaryText, tabs, title, variant, ...rest } = props;
 	const hasAvatar = !isEmptyNode(avatar);
 	const hasBadge = !isEmptyNode(badge);
 	const hasBreadcrumb = !isEmptyNode(breadcrumb);
@@ -24,6 +24,7 @@ var BitkitPageHeader = forwardRef((props, ref) => {
 		contentVariant,
 		hasBreadcrumb,
 		hasControls: showControls,
+		isCentered: Boolean(contentWidth),
 		isSticky,
 		variant
 	});
@@ -38,6 +39,7 @@ var BitkitPageHeader = forwardRef((props, ref) => {
 		...rest,
 		children: [/* @__PURE__ */ jsxs(Box, {
 			css: styles.headerBlock,
+			maxWidth: contentWidth,
 			children: [
 				hasBreadcrumb && /* @__PURE__ */ jsx(Box, {
 					css: styles.breadcrumb,

package/dist/components/BitkitPageHeader/BitkitPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n   *\n   * Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n   * no avatar, so pass this alongside a `breadcrumb`.\n   *\n   * Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n   * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n   * present — the same avatar the `app` and `user` content shapes use.\n   */\n  avatar?: ReactNode;\n  /** Badge rendered next to the title. Hidden in the collapsed layout. */\n  badge?: ReactNode;\n  /**\n   * Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n   * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n   * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n   *\n   * The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n   * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n   * belong to sub-pages, so pass them together with a trail.\n   */\n  breadcrumb?: ReactNode;\n  /**\n   * Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n   *\n   * The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n   * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n   * whenever `minimal` or `isSticky` is in play.\n   *\n   * Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n   * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n   * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n   * little small in the expanded mobile layout — but the design draws no mobile frame for the\n   * collapsed variants, so `sm` is the closer of the two.\n   */\n  children?: ReactNode;\n  /**\n   * Shape of the title block, mirroring the design's `content` property. `title` is a page title\n   * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n   * centred against a smaller title and 14px secondary text. They differ only in the gap between\n   * the avatar and the text, 16 and 12 respectively.\n   */\n  contentVariant?: 'title' | 'app' | 'user';\n  /**\n   * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n   * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n   * which is the shape the design file calls `PageHeader-WFE`.\n   *\n   * Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` *and* by `isSticky` —\n   * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n   * controls in.\n   */\n  controls?: ReactNode;\n  /**\n   * Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n   * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n   * and header container are application concerns.\n   *\n   * Ignored below the `tablet` breakpoint, where the header always stays expanded.\n   *\n   * Pair it with `size=\"sm\"` actions — see `children`.\n   */\n  isSticky?: boolean;\n  /**\n   * Descriptive text below the title. Hidden in the collapsed layout.\n   *\n   * A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n   * that appears when it does not fit.\n   */\n  secondaryText?: string;\n  /**\n   * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n   *\n   * The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n   * page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only\n   * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n   *\n   * ```tsx\n   * <BitkitTabs.Root defaultValue=\"overview\">\n   *   <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n   *   <BitkitTabs.ContentGroup>\n   *     <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n   *   </BitkitTabs.ContentGroup>\n   * </BitkitTabs.Root>\n   * ```\n   *\n   * Only the row is hidden when the header collapses — the panels live outside it and keep\n   * rendering, so the page never blanks.\n   */\n  tabs?: ReactNode;\n  /**\n   * The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n   * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n   * text each have their own slot. Required: it is what gives the header a page heading at every\n   * breakpoint.\n   *\n   * Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n   * shows the full string in a tooltip — so a long title never grows the header.\n   *\n   * In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the\n   * title in the trail rather than as a heading, so end the breadcrumb with a\n   * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n   * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n   * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n   * `CurrentItem` on mobile).\n   */\n  title: string;\n  /**\n   * `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n   * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n   * `size=\"sm\"` actions — see `children`.\n   */\n  variant?: 'default' | 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n  const {\n    avatar,\n    badge,\n    breadcrumb,\n    children,\n    contentVariant,\n    controls,\n    isSticky,\n    secondaryText,\n    tabs,\n    title,\n    variant,\n    ...rest\n  } = props;\n\n  // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n  // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n  // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n  // fallback until after mount.\n\n  // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n  // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n  // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n  // `controls` it would also spread the row into three groups around an empty middle one.\n  const hasAvatar = !isEmptyNode(avatar);\n  const hasBadge = !isEmptyNode(badge);\n  const hasBreadcrumb = !isEmptyNode(breadcrumb);\n  const hasActions = !isEmptyNode(children);\n  const hasSecondaryText = !isEmptyNode(secondaryText);\n  const hasTabs = !isEmptyNode(tabs);\n\n  // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n  // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n  // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n  const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n  const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n  // The design only draws inline controls in the collapsed row, so they are ignored in the\n  // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n  // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n  // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n  const isCollapsed = variant === 'minimal' || Boolean(isSticky);\n  const showControls = !isEmptyNode(controls) && isCollapsed;\n\n  // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n  // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n  // on an invisible element and opens a tooltip against it. The trail already carries the title as\n  // its current item in exactly that layout, so there is nothing to surface anyway.\n  const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n  const recipe = useSlotRecipe({ key: 'pageHeader' });\n  const styles = recipe({\n    contentVariant,\n    hasBreadcrumb,\n    hasControls: showControls,\n    isSticky,\n    variant,\n  });\n\n  // The controls are the middle of three groups, so they follow whichever element holds the left\n  // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n  // they have to go in there with it rather than beside it.\n  const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n  return (\n    <Box as=\"header\" css={styles.root} ref={ref} {...rest}>\n      <Box css={styles.headerBlock}>\n        {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n        {hasBreadcrumb && controlsNode}\n\n        <Box css={styles.contentBlock}>\n          <Box css={styles.titleBlock}>\n            {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n            <Box css={styles.textBlock}>\n              <Box css={styles.titleRow}>\n                {/*\n                  `bottom-start` rather than the tooltip's default `right`: these texts are\n                  full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n                  aligned to the text's start keeps it clear of them and lines it up with the text\n                  it repeats.\n                */}\n                <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n                  {/*\n                    `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n                    `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n                    stop unconditionally would put one in every header for no benefit.\n                  */}\n                  <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n                    {title}\n                  </Text>\n                </BitkitOverflowTooltip>\n                {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n              </Box>\n\n              {hasSecondaryText && secondaryText !== undefined && (\n                <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n                  <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n                    {secondaryText}\n                  </Text>\n                </BitkitOverflowTooltip>\n              )}\n            </Box>\n          </Box>\n\n          {!hasBreadcrumb && controlsNode}\n\n          {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n        </Box>\n      </Box>\n\n      {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n    </Box>\n  );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":";;;;;;;;;AA8HA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,EACJ,QACA,OACA,YACA,UACA,gBACA,UACA,UACA,eACA,MACA,OACA,SACA,GAAG,SACD;CAWJ,MAAM,YAAY,CAAC,YAAY,MAAM;CACrC,MAAM,WAAW,CAAC,YAAY,KAAK;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,UAAU,CAAC,YAAY,IAAI;CAKjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CACjG,MAAM,EAAE,aAAa,sBAAsB,KAAK,iBAAiB,eAAqC,aAAa;CAMnH,MAAM,cAAc,YAAY,aAAa,QAAQ,QAAQ;CAC7D,MAAM,eAAe,CAAC,YAAY,QAAQ,KAAK;CAM/C,MAAM,sBAAsB,oBAAoB,EAAE,eAAe;CAGjE,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EACpB;EACA;EACA,aAAa;EACb;EACA;CACF,CAAC;CAKD,MAAM,eAAe,eAAe,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAW,UAAA;CAAc,CAAA,IAAI;CAElF,OACE,qBAAC,KAAD;EAAK,IAAG;EAAS,KAAK,OAAO;EAAW;EAAK,GAAI;EAAjD,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA;IACG,iBAAiB,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAa,UAAA;IAAgB,CAAA;IAE/D,iBAAiB;IAElB,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACE,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACG,aAAa,oBAAC,KAAD;QAAK,KAAK,OAAO;QAAS,UAAA;OAAY,CAAA,GAEpD,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACE,qBAAC,KAAD;SAAK,KAAK,OAAO;SAAjB,UAAA,CAOE,oBAAC,uBAAD;UAAuB,UAAU,CAAC;UAAqB,WAAU;UAAe,MAAM;UAMpF,UAAA,oBAAC,MAAD;WAAM,IAAG;WAAK,KAAK,OAAO;WAAO,KAAK;WAAU,UAAU,sBAAsB,IAAI,KAAA;WACjF,UAAA;UACG,CAAA;SACe,CAAA,GACtB,YAAY,oBAAC,KAAD;UAAK,KAAK,OAAO;UAAQ,UAAA;SAAW,CAAA,CAC9C;QAEJ,CAAA,GAAA,oBAAoB,kBAAkB,KAAA,KACrC,oBAAC,uBAAD;SAAuB,UAAU,CAAC;SAAsB,WAAU;SAAe,MAAM;SACrF,UAAA,oBAAC,MAAD;UAAM,KAAK,OAAO;UAAe,KAAK;UAAc,UAAU,uBAAuB,IAAI,KAAA;UACtF,UAAA;SACG,CAAA;QACe,CAAA,CAEtB;OACF,CAAA,CAAA;;MAEJ,CAAC,iBAAiB;MAElB,cAAc,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAc;MAAc,CAAA;KACzD;;GACF;EAEJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,UAAA;EAAU,CAAA,CAC3C;;AAET,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n   *\n   * Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n   * no avatar, so pass this alongside a `breadcrumb`.\n   *\n   * Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n   * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n   * present — the same avatar the `app` and `user` content shapes use.\n   */\n  avatar?: ReactNode;\n  /** Badge rendered next to the title. Hidden in the collapsed layout. */\n  badge?: ReactNode;\n  /**\n   * Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n   * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n   * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n   *\n   * The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n   * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n   * belong to sub-pages, so pass them together with a trail.\n   */\n  breadcrumb?: ReactNode;\n  /**\n   * Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n   *\n   * The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n   * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n   * whenever `minimal` or `isSticky` is in play.\n   *\n   * Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n   * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n   * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n   * little small in the expanded mobile layout — but the design draws no mobile frame for the\n   * collapsed variants, so `sm` is the closer of the two.\n   */\n  children?: ReactNode;\n  /**\n   * Shape of the title block, mirroring the design's `content` property. `title` is a page title\n   * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n   * centred against a smaller title and 14px secondary text. They differ only in the gap between\n   * the avatar and the text, 16 and 12 respectively.\n   */\n  contentVariant?: 'title' | 'app' | 'user';\n  /**\n   * Caps the header's content and centres it, so the title lines up with a page whose content\n   * column is capped. The root stays full-width, so the background and the bottom border still run\n   * edge to edge — which a wrapper around the whole header could not do.\n   *\n   * Pass the same value as that column's `max-width`, as rems — `rem()` builds one from a pixel\n   * figure. Box-sizing is border-box throughout Bitkit, so the value includes the header's own\n   * inline padding, which the centred layout puts at 32 on both sides rather than the default 24\n   * and 32.\n   *\n   * Its presence is the toggle: with it the header is centred, without it full-width.\n   *\n   * The cap applies at every breakpoint, deliberately — a content column's own `max-width` is not\n   * breakpoint-scoped either, so scoping this one would misalign the two wherever the column is\n   * narrow enough to bite on mobile. What does change with the breakpoint is the inline padding,\n   * 16 below `tablet` and 32 above, which is the same pair such a column uses.\n   */\n  contentWidth?: `${number}rem`;\n  /**\n   * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n   * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n   * which is the shape the design file calls `PageHeader-WFE`.\n   *\n   * Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` *and* by `isSticky` —\n   * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n   * controls in.\n   */\n  controls?: ReactNode;\n  /**\n   * Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n   * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n   * and header container are application concerns.\n   *\n   * Ignored below the `tablet` breakpoint, where the header always stays expanded.\n   *\n   * Pair it with `size=\"sm\"` actions — see `children`.\n   */\n  isSticky?: boolean;\n  /**\n   * Descriptive text below the title. Hidden in the collapsed layout.\n   *\n   * A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n   * that appears when it does not fit.\n   */\n  secondaryText?: string;\n  /**\n   * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n   *\n   * The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n   * page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only\n   * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n   *\n   * ```tsx\n   * <BitkitTabs.Root defaultValue=\"overview\">\n   *   <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n   *   <BitkitTabs.ContentGroup>\n   *     <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n   *   </BitkitTabs.ContentGroup>\n   * </BitkitTabs.Root>\n   * ```\n   *\n   * Only the row is hidden when the header collapses — the panels live outside it and keep\n   * rendering, so the page never blanks.\n   */\n  tabs?: ReactNode;\n  /**\n   * The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n   * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n   * text each have their own slot. Required: it is what gives the header a page heading at every\n   * breakpoint.\n   *\n   * Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n   * shows the full string in a tooltip — so a long title never grows the header.\n   *\n   * In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the\n   * title in the trail rather than as a heading, so end the breadcrumb with a\n   * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n   * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n   * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n   * `CurrentItem` on mobile).\n   */\n  title: string;\n  /**\n   * `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n   * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n   * `size=\"sm\"` actions — see `children`.\n   */\n  variant?: 'default' | 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n  const {\n    avatar,\n    badge,\n    breadcrumb,\n    children,\n    contentVariant,\n    contentWidth,\n    controls,\n    isSticky,\n    secondaryText,\n    tabs,\n    title,\n    variant,\n    ...rest\n  } = props;\n\n  // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n  // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n  // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n  // fallback until after mount.\n\n  // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n  // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n  // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n  // `controls` it would also spread the row into three groups around an empty middle one.\n  const hasAvatar = !isEmptyNode(avatar);\n  const hasBadge = !isEmptyNode(badge);\n  const hasBreadcrumb = !isEmptyNode(breadcrumb);\n  const hasActions = !isEmptyNode(children);\n  const hasSecondaryText = !isEmptyNode(secondaryText);\n  const hasTabs = !isEmptyNode(tabs);\n\n  // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n  // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n  // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n  const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n  const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n  // The design only draws inline controls in the collapsed row, so they are ignored in the\n  // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n  // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n  // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n  const isCollapsed = variant === 'minimal' || Boolean(isSticky);\n  const showControls = !isEmptyNode(controls) && isCollapsed;\n\n  // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n  // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n  // on an invisible element and opens a tooltip against it. The trail already carries the title as\n  // its current item in exactly that layout, so there is nothing to surface anyway.\n  const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n  const recipe = useSlotRecipe({ key: 'pageHeader' });\n  const styles = recipe({\n    contentVariant,\n    hasBreadcrumb,\n    hasControls: showControls,\n    // The cap is a length the consumer chooses, so it cannot be a recipe variant -- the variant\n    // carries the layout switch and the `maxWidth` below carries the value.\n    isCentered: Boolean(contentWidth),\n    isSticky,\n    variant,\n  });\n\n  // The controls are the middle of three groups, so they follow whichever element holds the left\n  // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n  // they have to go in there with it rather than beside it.\n  const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n  return (\n    <Box as=\"header\" css={styles.root} ref={ref} {...rest}>\n      <Box css={styles.headerBlock} maxWidth={contentWidth}>\n        {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n        {hasBreadcrumb && controlsNode}\n\n        <Box css={styles.contentBlock}>\n          <Box css={styles.titleBlock}>\n            {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n            <Box css={styles.textBlock}>\n              <Box css={styles.titleRow}>\n                {/*\n                  `bottom-start` rather than the tooltip's default `right`: these texts are\n                  full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n                  aligned to the text's start keeps it clear of them and lines it up with the text\n                  it repeats.\n                */}\n                <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n                  {/*\n                    `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n                    `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n                    stop unconditionally would put one in every header for no benefit.\n                  */}\n                  <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n                    {title}\n                  </Text>\n                </BitkitOverflowTooltip>\n                {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n              </Box>\n\n              {hasSecondaryText && secondaryText !== undefined && (\n                <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n                  <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n                    {secondaryText}\n                  </Text>\n                </BitkitOverflowTooltip>\n              )}\n            </Box>\n          </Box>\n\n          {!hasBreadcrumb && controlsNode}\n\n          {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n        </Box>\n      </Box>\n\n      {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n    </Box>\n  );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":";;;;;;;;;AAgJA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,EACJ,QACA,OACA,YACA,UACA,gBACA,cACA,UACA,UACA,eACA,MACA,OACA,SACA,GAAG,SACD;CAWJ,MAAM,YAAY,CAAC,YAAY,MAAM;CACrC,MAAM,WAAW,CAAC,YAAY,KAAK;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,UAAU,CAAC,YAAY,IAAI;CAKjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CACjG,MAAM,EAAE,aAAa,sBAAsB,KAAK,iBAAiB,eAAqC,aAAa;CAMnH,MAAM,cAAc,YAAY,aAAa,QAAQ,QAAQ;CAC7D,MAAM,eAAe,CAAC,YAAY,QAAQ,KAAK;CAM/C,MAAM,sBAAsB,oBAAoB,EAAE,eAAe;CAGjE,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EACpB;EACA;EACA,aAAa;EAGb,YAAY,QAAQ,YAAY;EAChC;EACA;CACF,CAAC;CAKD,MAAM,eAAe,eAAe,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAW,UAAA;CAAc,CAAA,IAAI;CAElF,OACE,qBAAC,KAAD;EAAK,IAAG;EAAS,KAAK,OAAO;EAAW;EAAK,GAAI;EAAjD,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,UAAU;GAAxC,UAAA;IACG,iBAAiB,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAa,UAAA;IAAgB,CAAA;IAE/D,iBAAiB;IAElB,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACE,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACG,aAAa,oBAAC,KAAD;QAAK,KAAK,OAAO;QAAS,UAAA;OAAY,CAAA,GAEpD,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACE,qBAAC,KAAD;SAAK,KAAK,OAAO;SAAjB,UAAA,CAOE,oBAAC,uBAAD;UAAuB,UAAU,CAAC;UAAqB,WAAU;UAAe,MAAM;UAMpF,UAAA,oBAAC,MAAD;WAAM,IAAG;WAAK,KAAK,OAAO;WAAO,KAAK;WAAU,UAAU,sBAAsB,IAAI,KAAA;WACjF,UAAA;UACG,CAAA;SACe,CAAA,GACtB,YAAY,oBAAC,KAAD;UAAK,KAAK,OAAO;UAAQ,UAAA;SAAW,CAAA,CAC9C;QAEJ,CAAA,GAAA,oBAAoB,kBAAkB,KAAA,KACrC,oBAAC,uBAAD;SAAuB,UAAU,CAAC;SAAsB,WAAU;SAAe,MAAM;SACrF,UAAA,oBAAC,MAAD;UAAM,KAAK,OAAO;UAAe,KAAK;UAAc,UAAU,uBAAuB,IAAI,KAAA;UACtF,UAAA;SACG,CAAA;QACe,CAAA,CAEtB;OACF,CAAA,CAAA;;MAEJ,CAAC,iBAAiB;MAElB,cAAc,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAc;MAAc,CAAA;KACzD;;GACF;EAEJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,UAAA;EAAU,CAAA,CAC3C;;AAET,CAAC;AAED,iBAAiB,cAAc"}

package/dist/theme/common/ComboboxAndSelect.common.d.ts

@@ -26,7 +26,7 @@ export declare const base: {
         justifyContent: "space-between";
         flex: "1";
         textAlign: "start";
-        lineHeight: string;
+        lineHeight: `${number}rem`;
         _highlighted: {
             bg: "background/hover";
         };

package/dist/theme/common/InputAndTextarea.common.d.ts

@@ -98,16 +98,16 @@ export declare const sizePadding: {
 export declare const variants: {
     size: {
         md: {
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "body/md/regular";
-            '--input-height': string;
+            '--input-height': `${number}rem`;
         };
         lg: {
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "body/lg/regular";
-            '--input-height': string;
+            '--input-height': `${number}rem`;
         };
     };
 };

package/dist/theme/recipes/Button.recipe.d.ts

@@ -7,21 +7,21 @@ declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
         sm: {
             minWidth: "32";
             height: "32";
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "comp/button/sm";
         };
         md: {
             minWidth: "40";
             height: "40";
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "comp/button/md";
         };
         lg: {
             minWidth: "48";
             height: "48";
-            padding: string;
+            padding: `${number}rem`;
             textStyle: "comp/button/lg";
         };
     };

package/dist/theme/recipes/Input.recipe.d.ts

@@ -1,16 +1,16 @@
 declare const inputRecipe: import('@chakra-ui/react').RecipeDefinition<{
     size: {
         md: {
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "body/md/regular";
-            '--input-height': string;
+            '--input-height': `${number}rem`;
         };
         lg: {
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "body/lg/regular";
-            '--input-height': string;
+            '--input-height': `${number}rem`;
         };
     };
 }>;

package/dist/theme/recipes/InputAddon.recipe.d.ts

@@ -13,11 +13,11 @@ declare const inputAddonRecipe: import('@chakra-ui/react').RecipeDefinition<{
     };
     size: {
         md: {
-            paddingInline: string;
+            paddingInline: `${number}rem`;
             textStyle: "body/md/regular";
         };
         lg: {
-            paddingInline: string;
+            paddingInline: `${number}rem`;
             textStyle: "body/lg/regular";
         };
     };

package/dist/theme/recipes/Textarea.recipe.d.ts

@@ -2,31 +2,31 @@ declare const textareaRecipe: import('@chakra-ui/react').RecipeDefinition<{
     size: {
         md: {
             '&[rows="1"]': {
-                paddingBlock: string;
+                paddingBlock: `${number}rem`;
             };
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "body/md/regular";
-            '--input-height': string;
+            '--input-height': `${number}rem`;
         };
         lg: {
-            paddingInline: string;
-            paddingBlock: string;
+            paddingInline: `${number}rem`;
+            paddingBlock: `${number}rem`;
             textStyle: "body/lg/regular";
-            '--input-height': string;
+            '--input-height': `${number}rem`;
         };
     };
 }>;
 export declare const textareaStatusIcon: {
     md: {
-        insetBlockStart: string;
-        insetInlineEnd: string;
-        paddingInlineEnd: string;
+        insetBlockStart: `${number}rem`;
+        insetInlineEnd: `${number}rem`;
+        paddingInlineEnd: `${number}rem`;
     };
     lg: {
-        insetBlockStart: string;
-        insetInlineEnd: string;
-        paddingInlineEnd: string;
+        insetBlockStart: `${number}rem`;
+        insetInlineEnd: `${number}rem`;
+        paddingInlineEnd: `${number}rem`;
     };
 };
 export default textareaRecipe;

package/dist/theme/recipes/index.d.ts

@@ -61,21 +61,21 @@ declare const recipes: {
             sm: {
                 minWidth: "32";
                 height: "32";
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "comp/button/sm";
             };
             md: {
                 minWidth: "40";
                 height: "40";
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "comp/button/md";
             };
             lg: {
                 minWidth: "48";
                 height: "48";
-                padding: string;
+                padding: `${number}rem`;
                 textStyle: "comp/button/lg";
             };
         };
@@ -360,16 +360,16 @@ declare const recipes: {
     input: import('@chakra-ui/react').RecipeDefinition<{
         size: {
             md: {
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/md/regular";
-                '--input-height': string;
+                '--input-height': `${number}rem`;
             };
             lg: {
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/lg/regular";
-                '--input-height': string;
+                '--input-height': `${number}rem`;
             };
         };
     }>;
@@ -388,11 +388,11 @@ declare const recipes: {
         };
         size: {
             md: {
-                paddingInline: string;
+                paddingInline: `${number}rem`;
                 textStyle: "body/md/regular";
             };
             lg: {
-                paddingInline: string;
+                paddingInline: `${number}rem`;
                 textStyle: "body/lg/regular";
             };
         };
@@ -493,18 +493,18 @@ declare const recipes: {
         size: {
             md: {
                 '&[rows="1"]': {
-                    paddingBlock: string;
+                    paddingBlock: `${number}rem`;
                 };
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/md/regular";
-                '--input-height': string;
+                '--input-height': `${number}rem`;
             };
             lg: {
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/lg/regular";
-                '--input-height': string;
+                '--input-height': `${number}rem`;
             };
         };
     }>;

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

@@ -16,10 +16,10 @@ declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
             input: {
                 paddingInlineEnd: "96";
                 lineHeight: "normal";
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/md/regular";
-                '--input-height': string;
+                '--input-height': `${number}rem`;
             };
         };
         lg: {
@@ -38,10 +38,10 @@ declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
             input: {
                 paddingInlineEnd: "96";
                 lineHeight: "normal";
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/lg/regular";
-                '--input-height': string;
+                '--input-height': `${number}rem`;
             };
         };
     };

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

@@ -27,6 +27,10 @@ var comboboxSlotRecipe = defineSlotRecipe({
 			right: "16",
 			top: "50%",
 			transform: "translateY(-50%)"
+		},
+		trigger: {
+			cursor: "pointer",
+			_readOnly: { cursor: "default" }
 		}
 	},
 	variants: {

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Combobox.recipe.ts"],"sourcesContent":["import { comboboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport * as inputStyle from '../common/InputAndTextarea.common';\n\nconst comboboxSlotRecipe = defineSlotRecipe({\n  className: 'combobox',\n  slots: comboboxAnatomy.keys(),\n  base: {\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      position: 'relative',\n    },\n    input: {\n      ...inputStyle.base,\n      ...inputStyle.singleLineInputOverrides,\n      height: 'var(--input-height)',\n      textOverflow: 'ellipsis',\n    },\n    ...base,\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      right: '16',\n      top: '50%',\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        input: {\n          ...inputStyle.variants.size.md,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.md,\n      },\n      lg: {\n        input: {\n          ...inputStyle.variants.size.lg,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.lg,\n      },\n    },\n    hasStatusIcon: {\n      true: {\n        input: {\n          paddingInlineEnd: '128',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default comboboxSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,gBAAgB,KAAK;CAC5B,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,OAAO;GACL,GAAG;GACH,GAAG;GACH,QAAQ;GACR,cAAc;EAChB;EACA,GAAG;EACH,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,WAAW;EACb;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;GACA,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;EACF;EACA,eAAe;GACb,MAAM,EACJ,OAAO,EACL,kBAAkB,MACpB,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"Combobox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Combobox.recipe.ts"],"sourcesContent":["import { comboboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport * as inputStyle from '../common/InputAndTextarea.common';\n\nconst comboboxSlotRecipe = defineSlotRecipe({\n  className: 'combobox',\n  slots: comboboxAnatomy.keys(),\n  base: {\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      position: 'relative',\n    },\n    input: {\n      ...inputStyle.base,\n      ...inputStyle.singleLineInputOverrides,\n      height: 'var(--input-height)',\n      textOverflow: 'ellipsis',\n    },\n    ...base,\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      right: '16',\n      top: '50%',\n      transform: 'translateY(-50%)',\n    },\n    trigger: {\n      cursor: 'pointer',\n      _readOnly: {\n        cursor: 'default',\n      },\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        input: {\n          ...inputStyle.variants.size.md,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.md,\n      },\n      lg: {\n        input: {\n          ...inputStyle.variants.size.lg,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.lg,\n      },\n    },\n    hasStatusIcon: {\n      true: {\n        input: {\n          paddingInlineEnd: '128',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default comboboxSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,gBAAgB,KAAK;CAC5B,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,OAAO;GACL,GAAG;GACH,GAAG;GACH,QAAQ;GACR,cAAc;EAChB;EACA,GAAG;EACH,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,WAAW;EACb;EACA,SAAS;GACP,QAAQ;GACR,WAAW,EACT,QAAQ,UACV;EACF;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;GACA,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;EACF;EACA,eAAe;GACb,MAAM,EACJ,OAAO,EACL,kBAAkB,MACpB,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -5,8 +5,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                 paddingBlock: "6";
                 textStyle?: "body/md/regular" | undefined;
                 '&:has([data-slot="avatar"])'?: {
-                    paddingBlock: string;
-                    paddingInlineStart: string;
+                    paddingBlock: `${number}rem`;
+                    paddingInlineStart: `${number}rem`;
                 } | undefined;
             };
             indicator: {
@@ -40,7 +40,7 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                 };
             } | undefined;
             itemList?: {
-                maxHeight: string;
+                maxHeight: `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";

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

@@ -50,7 +50,7 @@ declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             content: {
                 width: {
                     base: "100%";
-                    tablet: string;
+                    tablet: `${number}rem`;
                 };
             };
         };
@@ -58,7 +58,7 @@ declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             content: {
                 width: {
                     base: "100%";
-                    tablet: string;
+                    tablet: `${number}rem`;
                 };
             };
         };
@@ -66,7 +66,7 @@ declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             content: {
                 width: {
                     base: "100%";
-                    tablet: string;
+                    tablet: `${number}rem`;
                 };
             };
         };

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

@@ -2,13 +2,13 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
     variant: {
         docked: {
             closeTrigger: {
-                insetEnd: string;
+                insetEnd: `${number}rem`;
                 top: "12";
             };
             content: {
                 width: {
                     base: "100vw";
-                    tablet: string;
+                    tablet: `${number}rem`;
                 };
             };
         };
@@ -26,7 +26,7 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             content: {
                 borderRadius: "12";
                 boxShadow: "elevation/lg";
-                maxWidth: string;
+                maxWidth: `${number}rem`;
             };
             header: {
                 paddingBlockEnd: "16";

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

@@ -2,7 +2,7 @@ declare const fileUploadSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
     variant: {
         image: {
             root: {
-                height: string;
+                height: `${number}rem`;
             };
         };
     };

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

@@ -14,14 +14,14 @@ export declare const multiselectSlotRecipe: import('@chakra-ui/react').SlotRecip
         lg: {
             overlay: {
                 minHeight: "48";
-                paddingBlock: string;
+                paddingBlock: `${number}rem`;
             };
             trigger: {
                 textStyle: "body/lg/regular";
             };
             placeholderText: {
                 textStyle: "body/lg/regular";
-                lineHeight: string;
+                lineHeight: `${number}rem`;
             };
         };
         md: {
@@ -30,9 +30,9 @@ export declare const multiselectSlotRecipe: import('@chakra-ui/react').SlotRecip
             };
             overlay: {
                 minHeight: "40";
-                paddingBlock: string;
+                paddingBlock: `${number}rem`;
                 '&:has([data-slot="tag"])': {
-                    paddingInlineStart: string;
+                    paddingInlineStart: `${number}rem`;
                 };
             };
             trigger: {
@@ -40,7 +40,7 @@ export declare const multiselectSlotRecipe: import('@chakra-ui/react').SlotRecip
             };
             placeholderText: {
                 textStyle: "body/md/regular";
-                lineHeight: string;
+                lineHeight: `${number}rem`;
             };
         };
     };

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

@@ -27,15 +27,20 @@ var multiselectSlotRecipe = defineSlotRecipe({
 			borderRadius: "4",
 			color: "input/text/inputValue",
 			width: "100%",
+			cursor: "pointer",
 			textAlign: "start",
 			userSelect: "none",
 			focusVisibleRing: "inside",
 			_disabled: {
 				background: "background/disabled",
-				color: "text/disabled"
+				color: "text/disabled",
+				cursor: "not-allowed"
 			},
 			_invalid: { borderColor: "border/error" },
-			_readOnly: { background: "background/disabled" }
+			_readOnly: {
+				background: "background/disabled",
+				cursor: "default"
+			}
 		},
 		overlay: {
 			position: "relative",

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

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Multiselect.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nexport const multiselectSlotRecipe = defineSlotRecipe({\n  className: 'multiselect',\n  slots: ['control', 'trigger', 'overlay', 'tagsBlock', 'placeholderText', 'indicatorGroup', 'indicator'],\n  base: {\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    trigger: {\n      position: 'absolute',\n      inset: 0,\n      display: 'block',\n      background: 'background/primary',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      color: 'input/text/inputValue',\n      width: '100%',\n      textAlign: 'start',\n      userSelect: 'none',\n      focusVisibleRing: 'inside',\n      _disabled: {\n        background: 'background/disabled',\n        color: 'text/disabled',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n      },\n    },\n    overlay: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      paddingInlineStart: '12',\n      paddingInlineEnd: '48',\n    },\n    tagsBlock: {\n      display: 'flex',\n      flex: '1 0 0',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n      alignContent: 'center',\n      gap: '8',\n      minWidth: 0,\n    },\n    placeholderText: {\n      flex: '1 0 0',\n      minWidth: 0,\n      height: '24',\n      display: 'inline-flex',\n      alignItems: 'center',\n      color: 'input/text/inputValue',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      '&[data-placeholder]': {\n        color: 'text/secondary',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetInlineEnd: 0,\n      top: 0,\n      height: '48',\n      paddingInlineEnd: '16',\n      paddingInlineStart: '8',\n      pointerEvents: 'none',\n      '& > button': {\n        pointerEvents: 'auto',\n      },\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n  },\n\n  variants: {\n    constrained: {\n      true: {\n        overlay: {\n          overflow: 'hidden',\n        },\n        tagsBlock: {\n          flexWrap: 'nowrap',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        overlay: {\n          minHeight: '48',\n          paddingBlock: rem(11),\n        },\n        trigger: {\n          textStyle: 'body/lg/regular',\n        },\n        placeholderText: {\n          textStyle: 'body/lg/regular',\n          lineHeight: rem(24),\n        },\n      },\n      md: {\n        indicatorGroup: {\n          height: '40',\n        },\n        overlay: {\n          minHeight: '40',\n          paddingBlock: rem(7),\n          '&:has([data-slot=\"tag\"])': {\n            paddingInlineStart: rem(7),\n          },\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n        },\n        placeholderText: {\n          textStyle: 'body/md/regular',\n          lineHeight: rem(20),\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      constrained: true,\n      size: 'lg',\n      css: {\n        overlay: {\n          height: '48',\n          minHeight: '48',\n          paddingBlock: '12',\n        },\n      },\n    },\n    {\n      constrained: true,\n      size: 'md',\n      css: {\n        overlay: {\n          height: '40',\n          minHeight: '40',\n          paddingBlock: '8',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    constrained: false,\n    size: 'lg',\n  },\n});\n\nexport default multiselectSlotRecipe;\n"],"mappings":";;;AAIA,IAAa,wBAAwB,iBAAiB;CACpD,WAAW;CACX,OAAO;EAAC;EAAW;EAAW;EAAW;EAAa;EAAmB;EAAkB;CAAW;CACtG,MAAM;EACJ,SAAS;GACP,UAAU;GACV,OAAO;EACT;EACA,SAAS;GACP,UAAU;GACV,OAAO;GACP,SAAS;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;GACP,OAAO;GACP,WAAW;GACX,YAAY;GACZ,kBAAkB;GAClB,WAAW;IACT,YAAY;IACZ,OAAO;GACT;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW,EACT,YAAY,sBACd;EACF;EACA,SAAS;GACP,UAAU;GACV,SAAS;GACT,YAAY;GACZ,oBAAoB;GACpB,kBAAkB;EACpB;EACA,WAAW;GACT,SAAS;GACT,MAAM;GACN,UAAU;GACV,YAAY;GACZ,cAAc;GACd,KAAK;GACL,UAAU;EACZ;EACA,iBAAiB;GACf,MAAM;GACN,UAAU;GACV,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,OAAO;GACP,UAAU;GACV,cAAc;GACd,YAAY;GACZ,uBAAuB,EACrB,OAAO,iBACT;EACF;EACA,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,gBAAgB;GAChB,KAAK;GACL,QAAQ;GACR,kBAAkB;GAClB,oBAAoB;GACpB,eAAe;GACf,cAAc,EACZ,eAAe,OACjB;EACF;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,WAAW,EACT,OAAO,gBACT;GACA,WAAW,EACT,OAAO,mBACT;EACF;CACF;CAEA,UAAU;EACR,aAAa;GACX,MAAM;IACJ,SAAS,EACP,UAAU,SACZ;IACA,WAAW,EACT,UAAU,SACZ;GACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,SAAS;KACP,WAAW;KACX,cAAc,IAAI,EAAE;IACtB;IACA,SAAS,EACP,WAAW,kBACb;IACA,iBAAiB;KACf,WAAW;KACX,YAAY,IAAI,EAAE;IACpB;GACF;GACA,IAAI;IACF,gBAAgB,EACd,QAAQ,KACV;IACA,SAAS;KACP,WAAW;KACX,cAAc,IAAI,CAAC;KACnB,8BAA4B,EAC1B,oBAAoB,IAAI,CAAC,EAC3B;IACF;IACA,SAAS,EACP,WAAW,kBACb;IACA,iBAAiB;KACf,WAAW;KACX,YAAY,IAAI,EAAE;IACpB;GACF;EACF;CACF;CACA,kBAAkB,CAChB;EACE,aAAa;EACb,MAAM;EACN,KAAK,EACH,SAAS;GACP,QAAQ;GACR,WAAW;GACX,cAAc;EAChB,EACF;CACF,GACA;EACE,aAAa;EACb,MAAM;EACN,KAAK,EACH,SAAS;GACP,QAAQ;GACR,WAAW;GACX,cAAc;EAChB,EACF;CACF,CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}
+{"version":3,"file":"Multiselect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Multiselect.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nexport const multiselectSlotRecipe = defineSlotRecipe({\n  className: 'multiselect',\n  slots: ['control', 'trigger', 'overlay', 'tagsBlock', 'placeholderText', 'indicatorGroup', 'indicator'],\n  base: {\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    trigger: {\n      position: 'absolute',\n      inset: 0,\n      display: 'block',\n      background: 'background/primary',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      color: 'input/text/inputValue',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      userSelect: 'none',\n      focusVisibleRing: 'inside',\n      _disabled: {\n        background: 'background/disabled',\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    overlay: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      paddingInlineStart: '12',\n      paddingInlineEnd: '48',\n    },\n    tagsBlock: {\n      display: 'flex',\n      flex: '1 0 0',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n      alignContent: 'center',\n      gap: '8',\n      minWidth: 0,\n    },\n    placeholderText: {\n      flex: '1 0 0',\n      minWidth: 0,\n      height: '24',\n      display: 'inline-flex',\n      alignItems: 'center',\n      color: 'input/text/inputValue',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      '&[data-placeholder]': {\n        color: 'text/secondary',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetInlineEnd: 0,\n      top: 0,\n      height: '48',\n      paddingInlineEnd: '16',\n      paddingInlineStart: '8',\n      pointerEvents: 'none',\n      '& > button': {\n        pointerEvents: 'auto',\n      },\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n  },\n\n  variants: {\n    constrained: {\n      true: {\n        overlay: {\n          overflow: 'hidden',\n        },\n        tagsBlock: {\n          flexWrap: 'nowrap',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        overlay: {\n          minHeight: '48',\n          paddingBlock: rem(11),\n        },\n        trigger: {\n          textStyle: 'body/lg/regular',\n        },\n        placeholderText: {\n          textStyle: 'body/lg/regular',\n          lineHeight: rem(24),\n        },\n      },\n      md: {\n        indicatorGroup: {\n          height: '40',\n        },\n        overlay: {\n          minHeight: '40',\n          paddingBlock: rem(7),\n          '&:has([data-slot=\"tag\"])': {\n            paddingInlineStart: rem(7),\n          },\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n        },\n        placeholderText: {\n          textStyle: 'body/md/regular',\n          lineHeight: rem(20),\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      constrained: true,\n      size: 'lg',\n      css: {\n        overlay: {\n          height: '48',\n          minHeight: '48',\n          paddingBlock: '12',\n        },\n      },\n    },\n    {\n      constrained: true,\n      size: 'md',\n      css: {\n        overlay: {\n          height: '40',\n          minHeight: '40',\n          paddingBlock: '8',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    constrained: false,\n    size: 'lg',\n  },\n});\n\nexport default multiselectSlotRecipe;\n"],"mappings":";;;AAIA,IAAa,wBAAwB,iBAAiB;CACpD,WAAW;CACX,OAAO;EAAC;EAAW;EAAW;EAAW;EAAa;EAAmB;EAAkB;CAAW;CACtG,MAAM;EACJ,SAAS;GACP,UAAU;GACV,OAAO;EACT;EACA,SAAS;GACP,UAAU;GACV,OAAO;GACP,SAAS;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;GACP,OAAO;GACP,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,kBAAkB;GAClB,WAAW;IACT,YAAY;IACZ,OAAO;IACP,QAAQ;GACV;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW;IACT,YAAY;IACZ,QAAQ;GACV;EACF;EACA,SAAS;GACP,UAAU;GACV,SAAS;GACT,YAAY;GACZ,oBAAoB;GACpB,kBAAkB;EACpB;EACA,WAAW;GACT,SAAS;GACT,MAAM;GACN,UAAU;GACV,YAAY;GACZ,cAAc;GACd,KAAK;GACL,UAAU;EACZ;EACA,iBAAiB;GACf,MAAM;GACN,UAAU;GACV,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,OAAO;GACP,UAAU;GACV,cAAc;GACd,YAAY;GACZ,uBAAuB,EACrB,OAAO,iBACT;EACF;EACA,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,gBAAgB;GAChB,KAAK;GACL,QAAQ;GACR,kBAAkB;GAClB,oBAAoB;GACpB,eAAe;GACf,cAAc,EACZ,eAAe,OACjB;EACF;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,WAAW,EACT,OAAO,gBACT;GACA,WAAW,EACT,OAAO,mBACT;EACF;CACF;CAEA,UAAU;EACR,aAAa;GACX,MAAM;IACJ,SAAS,EACP,UAAU,SACZ;IACA,WAAW,EACT,UAAU,SACZ;GACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,SAAS;KACP,WAAW;KACX,cAAc,IAAI,EAAE;IACtB;IACA,SAAS,EACP,WAAW,kBACb;IACA,iBAAiB;KACf,WAAW;KACX,YAAY,IAAI,EAAE;IACpB;GACF;GACA,IAAI;IACF,gBAAgB,EACd,QAAQ,KACV;IACA,SAAS;KACP,WAAW;KACX,cAAc,IAAI,CAAC;KACnB,8BAA4B,EAC1B,oBAAoB,IAAI,CAAC,EAC3B;IACF;IACA,SAAS,EACP,WAAW,kBACb;IACA,iBAAiB;KACf,WAAW;KACX,YAAY,IAAI,EAAE;IACpB;GACF;EACF;CACF;CACA,kBAAkB,CAChB;EACE,aAAa;EACb,MAAM;EACN,KAAK,EACH,SAAS;GACP,QAAQ;GACR,WAAW;GACX,cAAc;EAChB,EACF;CACF,GACA;EACE,aAAa;EACb,MAAM;EACN,KAAK,EACH,SAAS;GACP,QAAQ;GACR,WAAW;GACX,cAAc;EAChB,EACF;CACF,CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}

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

@@ -2,15 +2,15 @@ declare const nativeSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefin
     size: {
         md: {
             field: {
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/md/regular";
             };
         };
         lg: {
             field: {
-                paddingInline: string;
-                paddingBlock: string;
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
                 textStyle: "body/lg/regular";
             };
         };

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

@@ -11,6 +11,7 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
 			width: "100%",
 			minWidth: 0,
 			appearance: "none",
+			cursor: "pointer",
 			borderRadius: "4",
 			borderWidth: "1",
 			borderColor: "border/strong",