@bitrise/bitkit-v2 0.3.482 → 0.3.483-beta.3124

package/dist/components/BitkitUIHeader/UIHeaderControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderControl.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderControl.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderBadge = boolean | 'idle' | 'pulse';\n\ninterface ControlCommonProps {\n  /** Marks the control as carrying something unread. It is announced as part of the name too. */\n  badge?: BitkitUIHeaderBadge;\n  /**\n   * The control's accessible name. It shows no text of its own, so this is what a screen reader\n   * announces.\n   */\n  label: string;\n  /**\n   * Marks the control as the one whose panel is open: a lighter background and an indicator along\n   * the bottom edge of the bar. The consumer owns the panel, so it owns this too.\n   *\n   * It says nothing about where the user is. A control that is a link stays a link to somewhere\n   * else, so this paints it without claiming it is the current page.\n   */\n  selected?: boolean;\n}\n\ninterface ControlBaseCommonProps extends ControlCommonProps {\n  children: ReactNode;\n  /**\n   * Which of the bar's control footprints to wear: the 48px square the icon controls and the\n   * account button share, or the wider mobile navigation button. Named around the slot it picks\n   * rather than `slot`, which is a native attribute every DOM element already takes.\n   */\n  footprint: 'control' | 'navButton';\n}\n\n// The bar draws no disabled control, so there is no `state` prop and no `disabled` either — a\n// control with nothing to do is one the consumer leaves out.\ninterface ControlBaseAsButtonProps\n  extends ControlBaseCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\ninterface ControlBaseAsAnchorProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n  href: string;\n  isExternal?: boolean;\n}\n\ntype ControlBaseProps = ControlBaseAsButtonProps | ControlBaseAsAnchorProps;\n\n/**\n * The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,\n * the indicator, and the choice between a button and a link. What sits inside it — an icon, an\n * avatar — is the caller's.\n */\nexport const UIHeaderControlBase = forwardRef<HTMLButtonElement | HTMLAnchorElement, ControlBaseProps>((props, ref) => {\n  const { styles } = useUIHeaderContext();\n\n  const accessibleName = props.badge ? `${props.label}, unread` : props.label;\n\n  const content = (\n    <>\n      {props.children}\n      {!!props.badge && <Box css={styles.badge} data-pulse={props.badge === 'pulse' ? '' : undefined} />}\n      {props.selected && <Box css={styles.indicator} />}\n    </>\n  );\n\n  if (props.href !== undefined) {\n    const {\n      badge: _badge,\n      children: _children,\n      css,\n      footprint,\n      isExternal,\n      label: _label,\n      rel,\n      selected,\n      target,\n      ...anchorRest\n    } = props;\n\n    return (\n      // `chakra.a` rather than `Link`, which carries a recipe of its own: a control is styled\n      // entirely by the header's own slot.\n      <chakra.a\n        ref={ref as Ref<HTMLAnchorElement>}\n        aria-label={accessibleName}\n        data-selected={selected ? '' : undefined}\n        rel={isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel}\n        target={isExternal ? '_blank' : target}\n        {...uiHeaderPart(footprint === 'navButton' ? 'nav-button' : 'control')}\n        {...anchorRest}\n        css={[styles[footprint], css]}\n      >\n        {content}\n      </chakra.a>\n    );\n  }\n\n  const {\n    badge: _badge,\n    children: _children,\n    css,\n    footprint,\n    href: _href,\n    isExternal: _isExternal,\n    label: _label,\n    selected,\n    ...buttonRest\n  } = props;\n\n  return (\n    // `chakra.button` rather than `Button`, which carries a recipe of its own: a control is styled\n    // entirely by the header's own slot.\n    <chakra.button\n      ref={ref as Ref<HTMLButtonElement>}\n      aria-expanded={selected}\n      aria-label={accessibleName}\n      data-selected={selected ? '' : undefined}\n      // A header control is an action, not a form submit. Before the spread, so a consumer can\n      // still opt into `type=\"submit\"`.\n      type=\"button\"\n      {...uiHeaderPart(footprint === 'navButton' ? 'nav-button' : 'control')}\n      {...buttonRest}\n      css={[styles[footprint], css]}\n    >\n      {content}\n    </chakra.button>\n  );\n});\n\nUIHeaderControlBase.displayName = 'UIHeaderControlBase';\n\nexport interface BitkitUIHeaderControlAsButtonProps\n  extends ControlCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  href?: undefined;\n  icon: BitkitIconComponent;\n  isExternal?: undefined;\n}\n\nexport interface BitkitUIHeaderControlAsAnchorProps extends ControlCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n  href: string;\n  icon: BitkitIconComponent;\n  isExternal?: boolean;\n}\n\nexport type BitkitUIHeaderControlProps = BitkitUIHeaderControlAsButtonProps | BitkitUIHeaderControlAsAnchorProps;\n\n/**\n * One icon button in the header bar — changelog, help, notifications, the mobile navigation\n * opener. It is a link when given an `href` and a button otherwise.\n *\n * The icon carries no label of its own, so `label` is required. There is no tooltip: the design\n * does not draw one.\n */\nconst UIHeaderControl = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitUIHeaderControlProps>((props, ref) => {\n  const { icon: Icon, ...rest } = props;\n\n  return (\n    <UIHeaderControlBase ref={ref} footprint=\"control\" {...rest}>\n      <Icon />\n    </UIHeaderControlBase>\n  );\n});\n\nUIHeaderControl.displayName = 'BitkitUIHeader.Control';\n\nexport default UIHeaderControl;\n"],"mappings":";;;;;;;;;;;;AA0DA,IAAa,sBAAsB,YAAqE,OAAO,QAAQ;CACrH,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,iBAAiB,MAAM,QAAQ,GAAG,MAAM,MAAM,YAAY,MAAM;CAEtE,MAAM,UACJ,qBAAAA,YAAA,EAAA,UAAA;EACG,MAAM;EACN,CAAC,CAAC,MAAM,SAAS,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,cAAY,MAAM,UAAU,UAAU,KAAK,KAAA;EAAY,CAAA;EAChG,MAAM,YAAY,oBAAC,KAAD,EAAK,KAAK,OAAO,UAAY,CAAA;CAChD,EAAA,CAAA;CAGJ,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,OAAO,QACP,UAAU,WACV,KACA,WACA,YACA,OAAO,QACP,KACA,UACA,QACA,GAAG,eACD;EAEJ,OAGE,oBAAC,OAAO,GAAR;GACO;GACL,cAAY;GACZ,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;GACjF,QAAQ,aAAa,WAAW;GAChC,GAAI,aAAa,cAAc,cAAc,eAAe,SAAS;GACrE,GAAI;GACJ,KAAK,CAAC,OAAO,YAAY,GAAG;GAE3B,UAAA;EACO,CAAA;CAEd;CAEA,MAAM,EACJ,OAAO,QACP,UAAU,WACV,KACA,WACA,MAAM,OACN,YAAY,aACZ,OAAO,QACP,UACA,GAAG,eACD;CAEJ,OAGE,oBAAC,OAAO,QAAR;EACO;EACL,iBAAe;EACf,cAAY;EACZ,iBAAe,WAAW,KAAK,KAAA;EAG/B,MAAK;EACL,GAAI,aAAa,cAAc,cAAc,eAAe,SAAS;EACrE,GAAI;EACJ,KAAK,CAAC,OAAO,YAAY,GAAG;EAE3B,UAAA;CACY,CAAA;AAEnB,CAAC;AAED,oBAAoB,cAAc;;;;;;;;AAwBlC,IAAM,kBAAkB,YAA+E,OAAO,QAAQ;CACpH,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;CAEhC,OACE,oBAAC,qBAAD;EAA0B;EAAK,WAAU;EAAU,GAAI;EACrD,UAAA,oBAAC,MAAD,CAAO,CAAA;CACY,CAAA;AAEzB,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts

@@ -0,0 +1,20 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+export interface BitkitUIHeaderNavButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    /** The accessible name. */
+    label?: string;
+    /** The current workspace. Shown as the avatar's initials when it has no logo. */
+    name: string;
+    /** The workspace's logo. Without one the avatar falls back to its initials. */
+    src?: string;
+}
+/**
+ * Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits
+ * in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.
+ *
+ * The two components do not know about each other: this button's `onClick` sets the navigation's
+ * `open`, and the navigation asks to close through its own `onOpenChange`.
+ *
+ * It shows the current workspace, so switching workspaces is one tap away from anywhere.
+ */
+declare const UIHeaderNavButton: import('react').ForwardRefExoticComponent<BitkitUIHeaderNavButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UIHeaderNavButton;

package/dist/components/BitkitUIHeader/UIHeaderNavButton.js

@@ -0,0 +1,46 @@
+import IconMenuHamburger from "../../icons/IconMenuHamburger.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import { UIHeaderControlBase } from "./UIHeaderControl.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/UIHeaderNavButton.tsx
+/**
+* Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits
+* in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.
+*
+* The two components do not know about each other: this button's `onClick` sets the navigation's
+* `open`, and the navigation asks to close through its own `onOpenChange`.
+*
+* It shows the current workspace, so switching workspaces is one tap away from anywhere.
+*/
+var UIHeaderNavButton = forwardRef((props, ref) => {
+	const { label = "Open navigation", name, src, ...rest } = props;
+	const { styles } = useUIHeaderContext();
+	const avatarProps = src ? {
+		src,
+		variant: "image"
+	} : { variant: "letters" };
+	return /* @__PURE__ */ jsxs(UIHeaderControlBase, {
+		ref,
+		footprint: "navButton",
+		label,
+		...rest,
+		children: [/* @__PURE__ */ jsx(BitkitAvatar, {
+			name,
+			...avatarProps
+		}), /* @__PURE__ */ jsx(Box, {
+			css: styles.navButtonBadge,
+			children: /* @__PURE__ */ jsx(IconMenuHamburger, {
+				css: styles.navButtonIcon,
+				size: "16"
+			})
+		})]
+	});
+});
+UIHeaderNavButton.displayName = "BitkitUIHeader.NavButton";
+//#endregion
+export { UIHeaderNavButton as default };
+
+//# sourceMappingURL=UIHeaderNavButton.js.map

package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderNavButton.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderNavButton.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconMenuHamburger } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderNavButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /** The accessible name. */\n  label?: string;\n  /** The current workspace. Shown as the avatar's initials when it has no logo. */\n  name: string;\n  /** The workspace's logo. Without one the avatar falls back to its initials. */\n  src?: string;\n}\n\n/**\n * Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits\n * in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.\n *\n * The two components do not know about each other: this button's `onClick` sets the navigation's\n * `open`, and the navigation asks to close through its own `onOpenChange`.\n *\n * It shows the current workspace, so switching workspaces is one tap away from anywhere.\n */\nconst UIHeaderNavButton = forwardRef<HTMLButtonElement, BitkitUIHeaderNavButtonProps>((props, ref) => {\n  const { label = 'Open navigation', name, src, ...rest } = props;\n\n  const { styles } = useUIHeaderContext();\n\n  const avatarProps = src ? ({ src, variant: 'image' } as const) : ({ variant: 'letters' } as const);\n\n  return (\n    <UIHeaderControlBase ref={ref} footprint=\"navButton\" label={label} {...rest}>\n      <BitkitAvatar name={name} {...avatarProps} />\n      <Box css={styles.navButtonBadge}>\n        <IconMenuHamburger css={styles.navButtonIcon} size=\"16\" />\n      </Box>\n    </UIHeaderControlBase>\n  );\n});\n\nUIHeaderNavButton.displayName = 'BitkitUIHeader.NavButton';\n\nexport default UIHeaderNavButton;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,oBAAoB,YAA6D,OAAO,QAAQ;CACpG,MAAM,EAAE,QAAQ,mBAAmB,MAAM,KAAK,GAAG,SAAS;CAE1D,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,cAAc,MAAO;EAAE;EAAK,SAAS;CAAQ,IAAe,EAAE,SAAS,UAAU;CAEvF,OACE,qBAAC,qBAAD;EAA0B;EAAK,WAAU;EAAmB;EAAO,GAAI;EAAvE,UAAA,CACE,oBAAC,cAAD;GAAoB;GAAM,GAAI;EAAc,CAAA,GAC5C,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,mBAAD;IAAmB,KAAK,OAAO;IAAe,MAAK;GAAM,CAAA;EACtD,CAAA,CACc;;AAEzB,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts

@@ -0,0 +1,32 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { Ref } from 'react';
+export interface BitkitUIHeaderSearchProps extends Omit<BoxProps, 'children' | 'onChange'> {
+    /**
+     * The search field, for anchoring the results to it. The component owns no results list: what a
+     * search turns up differs per product, so the consumer renders its own panel against this.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /** The accessible name of both the button and the field. */
+    label?: string;
+    /**
+     * Called when the button is pressed, and when Escape closes the field.
+     *
+     * From `tablet` up this opens the field in place. Below it there is no inline field — the button
+     * is a plain trigger, and what it opens is the consumer's to render.
+     */
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    placeholder?: string;
+    /** Marks the button as the one whose panel is open. Meant for the mobile trigger. */
+    selected?: boolean;
+    value?: string;
+}
+/**
+ * Search in the header bar: a button that opens a field lying over it, so opening the search moves
+ * nothing else in the bar.
+ *
+ * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.
+ */
+declare const UIHeaderSearch: import('react').ForwardRefExoticComponent<BitkitUIHeaderSearchProps & import('react').RefAttributes<HTMLDivElement>>;
+export default UIHeaderSearch;

package/dist/components/BitkitUIHeader/UIHeaderSearch.js

@@ -0,0 +1,121 @@
+import IconMagnifier from "../../icons/IconMagnifier.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import uiHeaderPart from "./uiHeaderPart.js";
+import { UIHeaderControlBase } from "./UIHeaderControl.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallbackRef } from "@chakra-ui/react/hooks";
+import { mergeRefs } from "@chakra-ui/react";
+//#region lib/components/BitkitUIHeader/UIHeaderSearch.tsx
+/**
+* Search in the header bar: a button that opens a field lying over it, so opening the search moves
+* nothing else in the bar.
+*
+* It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.
+*/
+var UIHeaderSearch = forwardRef((props, ref) => {
+	const { css, inputRef, label = "Search", onOpenChange, onValueChange, open = false, placeholder, selected, value = "", ...rest } = props;
+	const { barRef, styles } = useUIHeaderContext();
+	const buttonElementRef = useRef(null);
+	const inputElementRef = useRef(null);
+	const searchElementRef = useRef(null);
+	const restoreFocusRef = useRef(false);
+	const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);
+	const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);
+	const handleOpenChange = useCallbackRef(onOpenChange);
+	useEffect(() => {
+		if (open) {
+			inputElementRef.current?.focus();
+			return;
+		}
+		if (!restoreFocusRef.current) return;
+		restoreFocusRef.current = false;
+		buttonElementRef.current?.focus();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return void 0;
+		const bar = barRef.current;
+		if (!bar) return void 0;
+		const dismiss = (event) => {
+			const target = event.target instanceof Node ? event.target : null;
+			if (!target || searchElementRef.current?.contains(target)) return;
+			handleOpenChange?.(false);
+		};
+		bar.addEventListener("focusin", dismiss);
+		bar.addEventListener("pointerdown", dismiss);
+		return () => {
+			bar.removeEventListener("focusin", dismiss);
+			bar.removeEventListener("pointerdown", dismiss);
+		};
+	}, [
+		barRef,
+		handleOpenChange,
+		open
+	]);
+	useEffect(() => {
+		if (!open) return void 0;
+		const close = (event) => {
+			if (event.key !== "Escape") return;
+			if (event.target === inputElementRef.current) event.preventDefault();
+			restoreFocusRef.current = true;
+			handleOpenChange?.(false);
+		};
+		document.addEventListener("keydown", close);
+		return () => document.removeEventListener("keydown", close);
+	}, [handleOpenChange, open]);
+	const handleClear = () => {
+		onValueChange?.("");
+		inputElementRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setSearchRef,
+		css: [styles.search, css],
+		...uiHeaderPart("search"),
+		...rest,
+		children: [/* @__PURE__ */ jsx(UIHeaderControlBase, {
+			ref: buttonElementRef,
+			"aria-expanded": selected ?? open,
+			css: styles.searchButton,
+			"data-open": open ? "" : void 0,
+			footprint: "control",
+			label,
+			onClick: () => onOpenChange?.(!open),
+			selected,
+			...uiHeaderPart("search-button"),
+			children: /* @__PURE__ */ jsx(IconMagnifier, {})
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.searchField,
+			"data-open": open ? "" : void 0,
+			...uiHeaderPart("search-field"),
+			children: [
+				/* @__PURE__ */ jsx(IconMagnifier, { css: styles.searchIcon }),
+				/* @__PURE__ */ jsx(chakra.input, {
+					ref: setInputRef,
+					"aria-label": label,
+					css: styles.searchInput,
+					onChange: (event) => onValueChange?.(event.target.value),
+					...uiHeaderPart("search-input"),
+					placeholder,
+					type: "search",
+					value
+				}),
+				!!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
+					"aria-label": "Clear search",
+					colorVariant: "white",
+					css: styles.searchClear,
+					onClick: handleClear,
+					size: "sm",
+					...uiHeaderPart("search-clear")
+				})
+			]
+		})]
+	});
+});
+UIHeaderSearch.displayName = "BitkitUIHeader.Search";
+//#endregion
+export { UIHeaderSearch as default };
+
+//# sourceMappingURL=UIHeaderSearch.js.map

package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderSearch.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderSearch.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { mergeRefs } from '@chakra-ui/react';\nimport { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useCallbackRef } from '@chakra-ui/react/hooks';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type Ref, useEffect, useMemo, useRef } from 'react';\n\nimport { IconMagnifier } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport interface BitkitUIHeaderSearchProps extends Omit<BoxProps, 'children' | 'onChange'> {\n  /**\n   * The search field, for anchoring the results to it. The component owns no results list: what a\n   * search turns up differs per product, so the consumer renders its own panel against this.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /** The accessible name of both the button and the field. */\n  label?: string;\n  /**\n   * Called when the button is pressed, and when Escape closes the field.\n   *\n   * From `tablet` up this opens the field in place. Below it there is no inline field — the button\n   * is a plain trigger, and what it opens is the consumer's to render.\n   */\n  onOpenChange?: (open: boolean) => void;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  placeholder?: string;\n  /** Marks the button as the one whose panel is open. Meant for the mobile trigger. */\n  selected?: boolean;\n  value?: string;\n}\n\n/**\n * Search in the header bar: a button that opens a field lying over it, so opening the search moves\n * nothing else in the bar.\n *\n * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.\n */\nconst UIHeaderSearch = forwardRef<HTMLDivElement, BitkitUIHeaderSearchProps>((props, ref) => {\n  const {\n    css,\n    inputRef,\n    label = 'Search',\n    onOpenChange,\n    onValueChange,\n    open = false,\n    placeholder,\n    selected,\n    value = '',\n    ...rest\n  } = props;\n\n  const { barRef, styles } = useUIHeaderContext();\n\n  const buttonElementRef = useRef<HTMLButtonElement>(null);\n  const inputElementRef = useRef<HTMLInputElement>(null);\n  const searchElementRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef(false);\n  const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);\n  const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);\n\n  // The field is controlled, so `onOpenChange` is usually a fresh arrow on every keystroke. Held\n  // by a ref, the dismiss listener below is subscribed once per opening rather than per character.\n  const handleOpenChange = useCallbackRef(onOpenChange);\n\n  // Escape hands focus back to the button that opened the field, but only once the field is closed:\n  // while it is open the button is `visibility: hidden`, and a hidden element cannot take focus.\n  useEffect(() => {\n    if (open) {\n      inputElementRef.current?.focus();\n      return;\n    }\n\n    if (!restoreFocusRef.current) return;\n    restoreFocusRef.current = false;\n    buttonElementRef.current?.focus();\n  }, [open]);\n\n  // Reaching for another control in the bar is as much a way out of the search as Escape, so the\n  // open field gives way to it. Only what happens in the bar itself counts: the results are the\n  // consumer's to render — in the `banner` slot as readily as anywhere else — and choosing from\n  // them must not close the search.\n  //\n  // Focus is what settles it for the keyboard. The open field lies over the controls beside it\n  // without taking them out of the tab order, so Shift+Tab out of the input lands on one of them,\n  // covered — and reaching a control with the keyboard never fires a pointer event. Both end with\n  // focus inside the bar and outside the search, which is the moment to close.\n  //\n  // The pointer still needs its own listener: Safari gives a button no focus when it is clicked.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const bar = barRef.current;\n    if (!bar) return undefined;\n\n    const dismiss = (event: Event) => {\n      const target = event.target instanceof Node ? event.target : null;\n      if (!target || searchElementRef.current?.contains(target)) return;\n      handleOpenChange?.(false);\n    };\n\n    bar.addEventListener('focusin', dismiss);\n    bar.addEventListener('pointerdown', dismiss);\n    return () => {\n      bar.removeEventListener('focusin', dismiss);\n      bar.removeEventListener('pointerdown', dismiss);\n    };\n  }, [barRef, handleOpenChange, open]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const close = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      if (event.target === inputElementRef.current) event.preventDefault();\n      restoreFocusRef.current = true;\n      handleOpenChange?.(false);\n    };\n\n    document.addEventListener('keydown', close);\n    return () => document.removeEventListener('keydown', close);\n  }, [handleOpenChange, open]);\n\n  const handleClear = () => {\n    onValueChange?.('');\n    inputElementRef.current?.focus();\n  };\n\n  return (\n    <Box ref={setSearchRef} css={[styles.search, css]} {...uiHeaderPart('search')} {...rest}>\n      <UIHeaderControlBase\n        ref={buttonElementRef}\n        aria-expanded={selected ?? open}\n        css={styles.searchButton}\n        data-open={open ? '' : undefined}\n        footprint=\"control\"\n        label={label}\n        onClick={() => onOpenChange?.(!open)}\n        selected={selected}\n        {...uiHeaderPart('search-button')}\n      >\n        <IconMagnifier />\n      </UIHeaderControlBase>\n      <Box css={styles.searchField} data-open={open ? '' : undefined} {...uiHeaderPart('search-field')}>\n        <IconMagnifier css={styles.searchIcon} />\n        {/* No named primitive fits: Chakra's `Input` carries its own recipe, and this field is\n            styled entirely by the header's own slot. */}\n        <chakra.input\n          ref={setInputRef}\n          aria-label={label}\n          css={styles.searchInput}\n          onChange={(event) => onValueChange?.(event.target.value)}\n          {...uiHeaderPart('search-input')}\n          placeholder={placeholder}\n          type=\"search\"\n          value={value}\n        />\n        {!!value && (\n          <BitkitCloseButton\n            aria-label=\"Clear search\"\n            colorVariant=\"white\"\n            css={styles.searchClear}\n            onClick={handleClear}\n            size=\"sm\"\n            {...uiHeaderPart('search-clear')}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nUIHeaderSearch.displayName = 'BitkitUIHeader.Search';\n\nexport default UIHeaderSearch;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,IAAM,iBAAiB,YAAuD,OAAO,QAAQ;CAC3F,MAAM,EACJ,KACA,UACA,QAAQ,UACR,cACA,eACA,OAAO,OACP,aACA,UACA,QAAQ,IACR,GAAG,SACD;CAEJ,MAAM,EAAE,QAAQ,WAAW,mBAAmB;CAE9C,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,mBAAmB,OAAuB,IAAI;CACpD,MAAM,kBAAkB,OAAO,KAAK;CACpC,MAAM,cAAc,cAAc,UAAU,iBAAiB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAClF,MAAM,eAAe,cAAc,UAAU,kBAAkB,GAAG,GAAG,CAAC,GAAG,CAAC;CAI1E,MAAM,mBAAmB,eAAe,YAAY;CAIpD,gBAAgB;EACd,IAAI,MAAM;GACR,gBAAgB,SAAS,MAAM;GAC/B;EACF;EAEA,IAAI,CAAC,gBAAgB,SAAS;EAC9B,gBAAgB,UAAU;EAC1B,iBAAiB,SAAS,MAAM;CAClC,GAAG,CAAC,IAAI,CAAC;CAaT,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK,OAAO,KAAA;EAEjB,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAS,MAAM,kBAAkB,OAAO,MAAM,SAAS;GAC7D,IAAI,CAAC,UAAU,iBAAiB,SAAS,SAAS,MAAM,GAAG;GAC3D,mBAAmB,KAAK;EAC1B;EAEA,IAAI,iBAAiB,WAAW,OAAO;EACvC,IAAI,iBAAiB,eAAe,OAAO;EAC3C,aAAa;GACX,IAAI,oBAAoB,WAAW,OAAO;GAC1C,IAAI,oBAAoB,eAAe,OAAO;EAChD;CACF,GAAG;EAAC;EAAQ;EAAkB;CAAI,CAAC;CAEnC,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,SAAS,UAAoC;GACjD,IAAI,MAAM,QAAQ,UAAU;GAC5B,IAAI,MAAM,WAAW,gBAAgB,SAAS,MAAM,eAAe;GACnE,gBAAgB,UAAU;GAC1B,mBAAmB,KAAK;EAC1B;EAEA,SAAS,iBAAiB,WAAW,KAAK;EAC1C,aAAa,SAAS,oBAAoB,WAAW,KAAK;CAC5D,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAE3B,MAAM,oBAAoB;EACxB,gBAAgB,EAAE;EAClB,gBAAgB,SAAS,MAAM;CACjC;CAEA,OACE,qBAAC,KAAD;EAAK,KAAK;EAAc,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI,aAAa,QAAQ;EAAG,GAAI;EAAnF,UAAA,CACE,oBAAC,qBAAD;GACE,KAAK;GACL,iBAAe,YAAY;GAC3B,KAAK,OAAO;GACZ,aAAW,OAAO,KAAK,KAAA;GACvB,WAAU;GACH;GACP,eAAe,eAAe,CAAC,IAAI;GACzB;GACV,GAAI,aAAa,eAAe;GAEhC,UAAA,oBAAC,eAAD,CAAgB,CAAA;EACG,CAAA,GACrB,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,aAAW,OAAO,KAAK,KAAA;GAAW,GAAI,aAAa,cAAc;GAA/F,UAAA;IACE,oBAAC,eAAD,EAAe,KAAK,OAAO,WAAa,CAAA;IAGxC,oBAAC,OAAO,OAAR;KACE,KAAK;KACL,cAAY;KACZ,KAAK,OAAO;KACZ,WAAW,UAAU,gBAAgB,MAAM,OAAO,KAAK;KACvD,GAAI,aAAa,cAAc;KAClB;KACb,MAAK;KACE;IACR,CAAA;IACA,CAAC,CAAC,SACD,oBAAC,mBAAD;KACE,cAAW;KACX,cAAa;KACb,KAAK,OAAO;KACZ,SAAS;KACT,MAAK;KACL,GAAI,aAAa,cAAc;IAChC,CAAA;GAEA;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's
+ * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.
+ *
+ * It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a
+ * product's global styles use `[data-scope]` to tell a design system's internals from its own
+ * markup — the platform's focus ring excludes them that way — and a hand-built component without
+ * it is the one thing in the bar those rules would reach.
+ */
+declare const uiHeaderPart: (name: string) => {
+    'data-part': string;
+    'data-scope': string;
+};
+export default uiHeaderPart;

package/dist/components/BitkitUIHeader/uiHeaderPart.js

@@ -0,0 +1,18 @@
+//#region lib/components/BitkitUIHeader/uiHeaderPart.ts
+/**
+* The `data-scope` / `data-part` pair every element in the header carries, so a consumer's
+* stylesheet or spec can address one without a generated class name. Spread it before `...rest`.
+*
+* It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a
+* product's global styles use `[data-scope]` to tell a design system's internals from its own
+* markup — the platform's focus ring excludes them that way — and a hand-built component without
+* it is the one thing in the bar those rules would reach.
+*/
+var uiHeaderPart = (name) => ({
+	"data-part": name,
+	"data-scope": "ui-header"
+});
+//#endregion
+export { uiHeaderPart as default };
+
+//# sourceMappingURL=uiHeaderPart.js.map

package/dist/components/BitkitUIHeader/uiHeaderPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiHeaderPart.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/uiHeaderPart.ts"],"sourcesContent":["/**\n * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's\n * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.\n *\n * It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a\n * product's global styles use `[data-scope]` to tell a design system's internals from its own\n * markup — the platform's focus ring excludes them that way — and a hand-built component without\n * it is the one thing in the bar those rules would reach.\n */\nconst uiHeaderPart = (name: string) => ({ 'data-part': name, 'data-scope': 'ui-header' });\n\nexport default uiHeaderPart;\n"],"mappings":";;;;;;;;;;AASA,IAAM,gBAAgB,UAAkB;CAAE,aAAa;CAAM,cAAc;AAAY"}

package/dist/components/index.d.ts

@@ -100,5 +100,6 @@ export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitT
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
+export { default as BitkitUIHeader, type BitkitUIHeaderAccountProps, type BitkitUIHeaderBadge, type BitkitUIHeaderButtonProps, type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, type BitkitUIHeaderNavButtonProps, type BitkitUIHeaderProps, type BitkitUIHeaderSearchProps, uiHeaderHeight, uiHeaderHeightPx, } from './BitkitUIHeader/BitkitUIHeader';
 export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
 export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

@@ -385,9 +385,11 @@ import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/
 import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
+import { uiHeaderHeight, uiHeaderHeightPx } from "./theme/slot-recipes/UIHeader.recipe.js";
+import BitkitUIHeader_default from "./components/BitkitUIHeader/BitkitUIHeader.js";
 import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
 import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
 import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUIHeader_default as BitkitUIHeader, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiHeaderHeight, uiHeaderHeightPx, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };

package/dist/theme/recipes/UIHeaderButton.recipe.js

@@ -0,0 +1,103 @@
+import { rem } from "../themeUtils.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/UIHeaderButton.recipe.ts
+var borderColors = (variant) => variant === "secondary" ? {
+	base: "sys/ui/header/button/secondary/border",
+	disabled: "sys/ui/header/button/secondary/border-disabled"
+} : {
+	base: "transparent",
+	disabled: "transparent"
+};
+var variantStyles = (variant) => {
+	const border = borderColors(variant);
+	return {
+		background: `sys/ui/header/button/${variant}/bg`,
+		borderColor: border.base,
+		color: `sys/ui/header/button/${variant}/fg`,
+		_hover: {
+			background: `sys/ui/header/button/${variant}/bg-hover`,
+			_active: { background: `sys/ui/header/button/${variant}/bg-active` }
+		},
+		_active: { background: `sys/ui/header/button/${variant}/bg-active` },
+		_selected: {
+			background: `sys/ui/header/button/${variant}/bg-active`,
+			_hover: { background: `sys/ui/header/button/${variant}/bg-active` }
+		},
+		_disabled: {
+			background: `sys/ui/header/button/${variant}/bg-disabled`,
+			borderColor: border.disabled,
+			color: `sys/ui/header/button/${variant}/fg-disabled`,
+			cursor: "not-allowed"
+		}
+	};
+};
+var badgeDot = {
+	background: "sys/ui/header/badge/indigo",
+	borderRadius: "full",
+	content: "\"\"",
+	pointerEvents: "none",
+	position: "absolute"
+};
+var badgeStyles = {
+	_before: {
+		...badgeDot,
+		height: "8",
+		insetBlockStart: "-4",
+		insetInlineEnd: "-4",
+		width: "8"
+	},
+	_after: {
+		...badgeDot,
+		height: rem(10),
+		insetBlockStart: rem(-5),
+		insetInlineEnd: rem(-5),
+		opacity: .5,
+		width: rem(10)
+	}
+};
+var uiHeaderButtonRecipe = defineRecipe({
+	className: "ui-header-button",
+	base: {
+		alignItems: "center",
+		borderRadius: "4",
+		borderStyle: "solid",
+		borderWidth: "1",
+		cursor: "pointer",
+		display: "inline-flex",
+		flexShrink: 0,
+		gap: "4",
+		height: "32",
+		justifyContent: "center",
+		minWidth: "48",
+		paddingInline: "8",
+		position: "relative",
+		textDecoration: "none",
+		textStyle: "comp/button/sm",
+		whiteSpace: "nowrap",
+		"&:not(:last-child)": { marginInlineEnd: "8" },
+		_disabled: { cursor: "not-allowed" }
+	},
+	variants: {
+		variant: {
+			primary: variantStyles("primary"),
+			secondary: variantStyles("secondary"),
+			tertiary: variantStyles("tertiary")
+		},
+		badge: {
+			idle: badgeStyles,
+			pulse: {
+				...badgeStyles,
+				_after: {
+					...badgeStyles._after,
+					animation: "ping",
+					_motionReduce: { animation: "none" }
+				}
+			}
+		}
+	},
+	defaultVariants: { variant: "primary" }
+});
+//#endregion
+export { uiHeaderButtonRecipe as default };
+
+//# sourceMappingURL=UIHeaderButton.recipe.js.map

package/dist/theme/recipes/UIHeaderButton.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/UIHeaderButton.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\ntype Variant = 'primary' | 'secondary' | 'tertiary';\n\nconst borderColors = (variant: Variant) =>\n  variant === 'secondary'\n    ? { base: 'sys/ui/header/button/secondary/border', disabled: 'sys/ui/header/button/secondary/border-disabled' }\n    : { base: 'transparent', disabled: 'transparent' };\n\nconst variantStyles = (variant: Variant): SystemStyleObject => {\n  const border = borderColors(variant);\n\n  return {\n    background: `sys/ui/header/button/${variant}/bg`,\n    borderColor: border.base,\n    color: `sys/ui/header/button/${variant}/fg`,\n    // `_hover`/`_active` compile to `:not(:disabled, [data-disabled])`, so they never match a\n    // disabled button and `_disabled` wins without `!important`.\n    _hover: {\n      background: `sys/ui/header/button/${variant}/bg-hover`,\n      // Repeat active under hover so clicking while hovering keeps the active styles.\n      _active: {\n        background: `sys/ui/header/button/${variant}/bg-active`,\n      },\n    },\n    _active: {\n      background: `sys/ui/header/button/${variant}/bg-active`,\n    },\n    // A button that holds a panel open stays pressed while the panel is, hover included — letting\n    // hover lighten it would read as the panel having closed.\n    _selected: {\n      background: `sys/ui/header/button/${variant}/bg-active`,\n      _hover: {\n        background: `sys/ui/header/button/${variant}/bg-active`,\n      },\n    },\n    _disabled: {\n      background: `sys/ui/header/button/${variant}/bg-disabled`,\n      borderColor: border.disabled,\n      color: `sys/ui/header/button/${variant}/fg-disabled`,\n      cursor: 'not-allowed',\n    },\n  };\n};\n\nconst badgeDot: SystemStyleObject = {\n  background: 'sys/ui/header/badge/indigo',\n  borderRadius: 'full',\n  content: '\"\"',\n  pointerEvents: 'none',\n  position: 'absolute',\n};\n\nconst badgeStyles: SystemStyleObject = {\n  _before: {\n    ...badgeDot,\n    height: '8',\n    insetBlockStart: '-4',\n    insetInlineEnd: '-4',\n    width: '8',\n  },\n  _after: {\n    ...badgeDot,\n    height: rem(10),\n    insetBlockStart: rem(-5),\n    insetInlineEnd: rem(-5),\n    opacity: 0.5,\n    width: rem(10),\n  },\n};\n\nconst uiHeaderButtonRecipe = defineRecipe({\n  className: 'ui-header-button',\n  base: {\n    alignItems: 'center',\n    borderRadius: '4',\n    borderStyle: 'solid',\n    borderWidth: '1',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    flexShrink: 0,\n    gap: '4',\n    height: '32',\n    justifyContent: 'center',\n    minWidth: '48',\n    paddingInline: '8',\n    position: 'relative',\n    textDecoration: 'none',\n    textStyle: 'comp/button/sm',\n    whiteSpace: 'nowrap',\n    '&:not(:last-child)': {\n      marginInlineEnd: '8',\n    },\n    _disabled: {\n      cursor: 'not-allowed',\n    },\n  },\n  variants: {\n    variant: {\n      primary: variantStyles('primary'),\n      secondary: variantStyles('secondary'),\n      tertiary: variantStyles('tertiary'),\n    },\n    badge: {\n      idle: badgeStyles,\n      pulse: {\n        ...badgeStyles,\n        _after: {\n          ...badgeStyles._after,\n          // The system's own ping: the ring expands past the dot and fades out.\n          animation: 'ping',\n          _motionReduce: {\n            animation: 'none',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nexport default uiHeaderButtonRecipe;\n"],"mappings":";;;AAMA,IAAM,gBAAgB,YACpB,YAAY,cACR;CAAE,MAAM;CAAyC,UAAU;AAAiD,IAC5G;CAAE,MAAM;CAAe,UAAU;AAAc;AAErD,IAAM,iBAAiB,YAAwC;CAC7D,MAAM,SAAS,aAAa,OAAO;CAEnC,OAAO;EACL,YAAY,wBAAwB,QAAQ;EAC5C,aAAa,OAAO;EACpB,OAAO,wBAAwB,QAAQ;EAGvC,QAAQ;GACN,YAAY,wBAAwB,QAAQ;GAE5C,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EAGA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,QAAQ,EACN,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,aAAa,OAAO;GACpB,OAAO,wBAAwB,QAAQ;GACvC,QAAQ;EACV;CACF;AACF;AAEA,IAAM,WAA8B;CAClC,YAAY;CACZ,cAAc;CACd,SAAS;CACT,eAAe;CACf,UAAU;AACZ;AAEA,IAAM,cAAiC;CACrC,SAAS;EACP,GAAG;EACH,QAAQ;EACR,iBAAiB;EACjB,gBAAgB;EAChB,OAAO;CACT;CACA,QAAQ;EACN,GAAG;EACH,QAAQ,IAAI,EAAE;EACd,iBAAiB,IAAI,EAAE;EACvB,gBAAgB,IAAI,EAAE;EACtB,SAAS;EACT,OAAO,IAAI,EAAE;CACf;AACF;AAEA,IAAM,uBAAuB,aAAa;CACxC,WAAW;CACX,MAAM;EACJ,YAAY;EACZ,cAAc;EACd,aAAa;EACb,aAAa;EACb,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,sBAAsB,EACpB,iBAAiB,IACnB;EACA,WAAW,EACT,QAAQ,cACV;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS,cAAc,SAAS;GAChC,WAAW,cAAc,WAAW;GACpC,UAAU,cAAc,UAAU;EACpC;EACA,OAAO;GACL,MAAM;GACN,OAAO;IACL,GAAG;IACH,QAAQ;KACN,GAAG,YAAY;KAEf,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}

package/dist/theme/recipes/index.js

@@ -15,6 +15,7 @@ import separatorRecipe from "./Separator.recipe.js";
 import skeletonRecipe from "./Skeleton.recipe.js";
 import spinnerRecipe from "./Spinner.recipe.js";
 import toggleButtonRecipe from "./ToggleButton.recipe.js";
+import uiHeaderButtonRecipe from "./UIHeaderButton.recipe.js";
 //#region lib/theme/recipes/index.ts
 var recipes = {
 	badge: badgeRecipe,
@@ -33,7 +34,8 @@ var recipes = {
 	skeleton: skeletonRecipe,
 	spinner: spinnerRecipe,
 	textarea: textareaRecipe,
-	toggleButton: toggleButtonRecipe
+	toggleButton: toggleButtonRecipe,
+	uiHeaderButton: uiHeaderButtonRecipe
 };
 //#endregion
 export { recipes as default };

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

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

package/dist/theme/semantic-tokens/index.d.ts

@@ -1697,6 +1697,11 @@ declare const semanticTokens: {
                 base: string;
             };
         };
+        'sys/ui/sidenav/separator': {
+            value: {
+                base: string;
+            };
+        };
         'sys/ui/sidenav/item/bg': {
             value: {
                 base: string;
@@ -1737,11 +1742,6 @@ declare const semanticTokens: {
                 base: string;
             };
         };
-        'sys/ui/sidenav/separator': {
-            value: {
-                base: string;
-            };
-        };
         'sys/ui/sidenav/badge/green': {
             value: {
                 base: string;

package/dist/theme/semantic-tokens/semanticColors.d.ts

@@ -1696,6 +1696,11 @@ declare const semanticColors: {
             base: string;
         };
     };
+    'sys/ui/sidenav/separator': {
+        value: {
+            base: string;
+        };
+    };
     'sys/ui/sidenav/item/bg': {
         value: {
             base: string;
@@ -1736,11 +1741,6 @@ declare const semanticColors: {
             base: string;
         };
     };
-    'sys/ui/sidenav/separator': {
-        value: {
-            base: string;
-        };
-    };
     'sys/ui/sidenav/badge/green': {
         value: {
             base: string;

package/dist/theme/semantic-tokens/semanticColors.js

@@ -598,6 +598,7 @@ var semanticColors = defineSemanticTokens.colors({
 	"sys/ui/header/badge/red": { value: { base: "{colors.red.60}" } },
 	"sys/ui/header/badge/indigo": { value: { base: "{colors.indigo.90}" } },
 	"sys/ui/sidenav/bg": { value: { base: "{colors.purple.10}" } },
+	"sys/ui/sidenav/separator": { value: { base: "{colors.color/white/20}" } },
 	"sys/ui/sidenav/item/bg": { value: { base: "{colors.color/transparent}" } },
 	"sys/ui/sidenav/item/bg-hover": { value: { base: "{colors.color/white/10}" } },
 	"sys/ui/sidenav/item/bg-active": { value: { base: "{colors.color/white/20}" } },
@@ -606,7 +607,6 @@ var semanticColors = defineSemanticTokens.colors({
 	"sys/ui/sidenav/item/fg-hover": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/sidenav/item/fg-active": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/sidenav/item/indicator": { value: { base: "{colors.color/white/80}" } },
-	"sys/ui/sidenav/separator": { value: { base: "{colors.white.20}" } },
 	"sys/ui/sidenav/badge/green": { value: { base: "{colors.green.60}" } },
 	"sys/ui/sidenav/badge/red": { value: { base: "{colors.red.60}" } },
 	"sys/ui/sidenav/badge/neutral": { value: { base: "{colors.neutral.40}" } },