@primer/react 38.27.0-rc.82d74c5ae → 38.27.0-rc.bfb2839ed

package/CHANGELOG.md

@@ -4,12 +4,24 @@
 
 ### Minor Changes
 
+- [#7900](https://github.com/primer/react/pull/7900) [`49a546f`](https://github.com/primer/react/commit/49a546fcb3901c139a3abe8f1daea7b5f3427f5d) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `PageLayout.Sidebar` (and `SplitPageLayout.Sidebar`): add controlled-width support via `currentWidth` + `onResizeEnd`, matching the discriminated-union API already on `PageLayout.Pane`. The underlying `usePaneWidth` hook already supported these options; this wires them through the component's prop surface. Existing usage is unchanged — the props are opt-in and the uncontrolled (default or `widthStorageKey`-backed) behavior is preserved exactly.
+
 - [#7906](https://github.com/primer/react/pull/7906) [`adc5299`](https://github.com/primer/react/commit/adc5299f3d98519119fb9547e50dd2985fc96174) Thanks [@jonrohan](https://github.com/jonrohan)! - Text: Add `whiteSpace` prop to control the CSS `white-space` property
 
 ### Patch Changes
 
+- [#7908](https://github.com/primer/react/pull/7908) [`e9a2254`](https://github.com/primer/react/commit/e9a225421df61e7fa62da1b2796972122d266d36) Thanks [@jonrohan](https://github.com/jonrohan)! - `KeybindingHint`: display the `Meta` key correctly on platforms other than macOS and Windows. The `Meta`, `Alt`, and `Mod` keys are now resolved based on the detected platform: Apple platforms (macOS and iOS) show `⌘`/`⌥`, Windows shows `Win`, and all other platforms show `Meta`/`Alt`.
+
 - [#7894](https://github.com/primer/react/pull/7894) [`af4541d`](https://github.com/primer/react/commit/af4541d991c6e583dbf510bd0a0699f244ea00b2) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ActionList: Replace `:has(...)` selectors on `ActionList.Item`, `InactiveButtonWrap`, and `TrailingActionButton` with JS-derived data attributes (`data-has-trailing-action`, `data-trailing-action-loading`, `data-position`, `data-has-label`). Reduces style-recalculation cost on lists that render many items. No visual or behavioral changes.
 
+- [#7899](https://github.com/primer/react/pull/7899) [`9659ce7`](https://github.com/primer/react/commit/9659ce767760d85c033e43e7e8ecdfdfb452dcb1) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `TreeView`: make rows safer to use with `contain: paint` / `content-visibility: auto` and reduce style-recalc cost on hover/focus in large trees. No visual or layout changes; all changes are either invisible at the default rendering or behind an opt-in CSS containment property the consumer sets.
+
+  - The current-item indicator (positioned at `left: -8px` of the row container) was being clipped when a consumer applied `contain: paint` to the `<li>` or when the documented `containIntrinsicSize` prop on `TreeView.Item` triggered `content-visibility: auto` on the row container — including for `current` items. Both `.TreeViewItem` and `.TreeViewItemContainer` now declare `overflow-clip-margin: var(--base-size-8)`, which extends the paint-clip edge by 8px on the side the indicator paints. The property is a no-op when no paint containment is active, so default rendering is byte-identical.
+  - Skeleton-row hover suppression no longer relies on `:has(.TreeViewItemSkeleton)`, which forced subtree invalidation on every row. `LoadingItem` now communicates with the placeholder `Item` via a module-private context that emits a positive `data-loading` attribute on the `<li>`, and the CSS selector targets that directly. No new public prop.
+  - Nesting indicator lines no longer use a root-scope `:hover`/`:focus-within` descendant selector. Color is driven by an inherited `--tree-line-color` custom property set on the root `<ul>`, so a hover or focus change inside the tree updates one property on one element instead of re-matching `.TreeViewItemLevelLine` selectors against every level line in the tree.
+  - Fixed a unitless `outline-offset: -2` in the forced-colors focus-ring fallback that browsers were silently dropping (so forced-colors users now actually get a focus indicator on tree items).
+  - `.TreeViewItemContainer`'s `grid-template-columns` now declares the `trailingAction` column explicitly (`auto`) so it matches the 5-area `grid-template-areas` declaration (previously the trailing column was implicit `auto`).
+
 ## 38.26.0
 
 ### Minor Changes

package/dist/KeybindingHint/KeybindingHint.d.ts

@@ -1,4 +1,5 @@
 import type { KeybindingHintProps } from './props';
+import type { Platform } from './platform';
 /** Indicates the presence of an available keybinding. */
 export declare const KeybindingHint: import("react").MemoExoticComponent<({ className, ...props }: KeybindingHintProps) => import("react").JSX.Element>;
 /**
@@ -8,6 +9,10 @@ export declare const KeybindingHint: import("react").MemoExoticComponent<({ clas
  *
  * NOTE that this string should _only_ be used when building `aria-label` or `aria-description` props (never rendered
  * visibly) and should nearly always also be paired with a visible hint for sighted users.
+ *
+ * The `platform` argument controls how platform-specific keys (such as `Meta`, `Alt`, and `Mod`) are named. For
+ * backwards compatibility, a `boolean` may be passed instead, where `true` is treated as `'apple'` and `false` as
+ * `'other'`.
  */
-export declare const getAccessibleKeybindingHintString: (sequence: string, isMacOS: boolean) => string;
+export declare const getAccessibleKeybindingHintString: (sequence: string, platform: Platform | boolean) => string;
 //# sourceMappingURL=KeybindingHint.d.ts.map

package/dist/KeybindingHint/KeybindingHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeybindingHint.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/KeybindingHint.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAoBhD,yDAAyD;AAEzD,eAAO,MAAM,cAAc,gEAAgC,mBAAmB,iCAI5E,CAAA;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,iCAAiC,gDAA2B,CAAA"}
+{"version":3,"file":"KeybindingHint.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/KeybindingHint.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAA;AAmBxC,yDAAyD;AAEzD,eAAO,MAAM,cAAc,gEAAgC,mBAAmB,iCAI5E,CAAA;AAGF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iCAAiC,GAAI,UAAU,MAAM,EAAE,UAAU,QAAQ,GAAG,OAAO,WACe,CAAA"}

package/dist/KeybindingHint/KeybindingHint.js

@@ -1,6 +1,6 @@
 import { c } from 'react-compiler-runtime';
 import { memo } from 'react';
-import { accessibleSequenceString, Sequence } from './components/Sequence.js';
+import { Sequence, accessibleSequenceString } from './components/Sequence.js';
 import classes from './KeybindingHint.module.css.js';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
@@ -89,7 +89,11 @@ KeybindingHint.displayName = 'KeybindingHint';
  *
  * NOTE that this string should _only_ be used when building `aria-label` or `aria-description` props (never rendered
  * visibly) and should nearly always also be paired with a visible hint for sighted users.
+ *
+ * The `platform` argument controls how platform-specific keys (such as `Meta`, `Alt`, and `Mod`) are named. For
+ * backwards compatibility, a `boolean` may be passed instead, where `true` is treated as `'apple'` and `false` as
+ * `'other'`.
  */
-const getAccessibleKeybindingHintString = accessibleSequenceString;
+const getAccessibleKeybindingHintString = (sequence, platform) => accessibleSequenceString(sequence, typeof platform === 'boolean' ? platform ? 'apple' : 'other' : platform);
 
 export { KeybindingHint, getAccessibleKeybindingHintString };

package/dist/KeybindingHint/components/Chord.d.ts

@@ -1,5 +1,6 @@
 import type { KeybindingHintProps } from '../props';
+import type { Platform } from '../platform';
 export declare const Chord: ({ keys, format, variant, size }: KeybindingHintProps) => import("react").JSX.Element;
 /** Plain string version of `Chord` for use in `aria` string attributes. */
-export declare const accessibleChordString: (chord: string, isMacOS: boolean) => string;
+export declare const accessibleChordString: (chord: string, platform: Platform) => string;
 //# sourceMappingURL=Chord.d.ts.map

package/dist/KeybindingHint/components/Chord.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chord.d.ts","sourceRoot":"","sources":["../../../src/KeybindingHint/components/Chord.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AA+BjD,eAAO,MAAM,KAAK,GAAI,iCAAmE,mBAAmB,gCAsB3G,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,EAAE,SAAS,OAAO,WAGvD,CAAA"}
+{"version":3,"file":"Chord.d.ts","sourceRoot":"","sources":["../../../src/KeybindingHint/components/Chord.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AAGjD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AA6BzC,eAAO,MAAM,KAAK,GAAI,iCAAmE,mBAAmB,gCAsB3G,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,EAAE,UAAU,QAAQ,WAGzD,CAAA"}

package/dist/KeybindingHint/components/Chord.js

@@ -96,6 +96,6 @@ const Chord = t0 => {
 };
 
 /** Plain string version of `Chord` for use in `aria` string attributes. */
-const accessibleChordString = (chord, isMacOS) => splitChord(chord).map(key => accessibleKeyName(key, isMacOS)).join(' ');
+const accessibleChordString = (chord, platform) => splitChord(chord).map(key => accessibleKeyName(key, platform)).join(' ');
 
 export { Chord, accessibleChordString };

package/dist/KeybindingHint/components/Key.js

@@ -1,7 +1,7 @@
 import { c } from 'react-compiler-runtime';
 import VisuallyHidden from '../../_VisuallyHidden.js';
 import { accessibleKeyName, condensedKeyName, fullKeyName } from '../key-names.js';
-import { useIsMacOS } from '../../hooks/useIsMacOS.js';
+import { usePlatform } from '../platform.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 /** Renders a single key with accessible alternative text. */
@@ -11,12 +11,12 @@ const Key = t0 => {
     name,
     format
   } = t0;
-  const isMacOS = useIsMacOS();
+  const platform = usePlatform();
   let t1;
-  if ($[0] !== isMacOS || $[1] !== name) {
-    t1 = accessibleKeyName(name, isMacOS);
-    $[0] = isMacOS;
-    $[1] = name;
+  if ($[0] !== name || $[1] !== platform) {
+    t1 = accessibleKeyName(name, platform);
+    $[0] = name;
+    $[1] = platform;
     $[2] = t1;
   } else {
     t1 = $[2];
@@ -32,11 +32,11 @@ const Key = t0 => {
     t2 = $[4];
   }
   let t3;
-  if ($[5] !== format || $[6] !== isMacOS || $[7] !== name) {
-    t3 = format === "condensed" ? condensedKeyName(name, isMacOS) : fullKeyName(name, isMacOS);
+  if ($[5] !== format || $[6] !== name || $[7] !== platform) {
+    t3 = format === "condensed" ? condensedKeyName(name, platform) : fullKeyName(name, platform);
     $[5] = format;
-    $[6] = isMacOS;
-    $[7] = name;
+    $[6] = name;
+    $[7] = platform;
     $[8] = t3;
   } else {
     t3 = $[8];

package/dist/KeybindingHint/components/Sequence.d.ts

@@ -1,5 +1,6 @@
 import type { KeybindingHintProps } from '../props';
+import type { Platform } from '../platform';
 export declare const Sequence: ({ keys, ...chordProps }: KeybindingHintProps) => import("react").JSX.Element[];
 /** Plain string version of `Sequence` for use in `aria` string attributes. */
-export declare const accessibleSequenceString: (sequence: string, isMacOS: boolean) => string;
+export declare const accessibleSequenceString: (sequence: string, platform: Platform) => string;
 //# sourceMappingURL=Sequence.d.ts.map

package/dist/KeybindingHint/components/Sequence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sequence.d.ts","sourceRoot":"","sources":["../../../src/KeybindingHint/components/Sequence.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AAMjD,eAAO,MAAM,QAAQ,GAAI,yBAAuB,mBAAmB,kCAa/D,CAAA;AAEJ,8EAA8E;AAC9E,eAAO,MAAM,wBAAwB,GAAI,UAAU,MAAM,EAAE,SAAS,OAAO,WAGxD,CAAA"}
+{"version":3,"file":"Sequence.d.ts","sourceRoot":"","sources":["../../../src/KeybindingHint/components/Sequence.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AAGjD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAIzC,eAAO,MAAM,QAAQ,GAAI,yBAAuB,mBAAmB,kCAa/D,CAAA;AAEJ,8EAA8E;AAC9E,eAAO,MAAM,wBAAwB,GAAI,UAAU,MAAM,EAAE,UAAU,QAAQ,WAG1D,CAAA"}

package/dist/KeybindingHint/components/Sequence.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import VisuallyHidden from '../../_VisuallyHidden.js';
-import { accessibleChordString, Chord } from './Chord.js';
+import { Chord, accessibleChordString } from './Chord.js';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
 
 const splitSequence = sequence => sequence.split(' ');
@@ -21,6 +21,6 @@ const Sequence = ({
 }, i));
 
 /** Plain string version of `Sequence` for use in `aria` string attributes. */
-const accessibleSequenceString = (sequence, isMacOS) => splitSequence(sequence).map(chord => accessibleChordString(chord, isMacOS)).join(' then ');
+const accessibleSequenceString = (sequence, platform) => splitSequence(sequence).map(chord => accessibleChordString(chord, platform)).join(' then ');
 
 export { Sequence, accessibleSequenceString };

package/dist/KeybindingHint/key-names.d.ts

@@ -1,16 +1,17 @@
+import type { Platform } from './platform';
 /**
  * Short-form iconic versions of keys. These should be intuitive (not archaic) and match icons on keyboards.
  */
-export declare const condensedKeyName: (key: string, isMacOS: boolean) => string;
+export declare const condensedKeyName: (key: string, platform: Platform) => string;
 /**
  * Specific key displays for 'full' format. We still do show some icons (ie punctuation)
  * because that's more intuitive, but for the rest of keys we show the standard key name.
  */
-export declare const fullKeyName: (key: string, isMacOS: boolean) => string;
+export declare const fullKeyName: (key: string, platform: Platform) => string;
 /**
  * Accessible key names intended to be read by a screen reader. This prevents screen
  * readers from expressing punctuation in speech, ie, reading a long pause instead of the
  * word "period".
  */
-export declare const accessibleKeyName: (key: string, isMacOS: boolean) => string;
+export declare const accessibleKeyName: (key: string, platform: Platform) => string;
 //# sourceMappingURL=key-names.d.ts.map

package/dist/KeybindingHint/key-names.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"key-names.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/key-names.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,EAAE,SAAS,OAAO,WAwBlC,CAAA;AAE5B;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,SAAS,OAAO,WAa7B,CAAA;AAE5B;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,EAAE,SAAS,OAAO,WAmDjC,CAAA"}
+{"version":3,"file":"key-names.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/key-names.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAA;AAUxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,EAAE,UAAU,QAAQ,WAwBpC,CAAA;AAE5B;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,UAAU,QAAQ,WAc/B,CAAA;AAE5B;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,EAAE,UAAU,QAAQ,WAmDnC,CAAA"}

package/dist/KeybindingHint/key-names.js

@@ -12,15 +12,15 @@ const capitalize = ([first, ...rest]) => {
 /**
  * Short-form iconic versions of keys. These should be intuitive (not archaic) and match icons on keyboards.
  */
-const condensedKeyName = (key, isMacOS) => {
+const condensedKeyName = (key, platform) => {
   var _alt$control$shift$me;
   return (_alt$control$shift$me = {
-    alt: isMacOS ? '⌥' : 'Alt',
+    alt: platform === 'apple' ? '⌥' : 'Alt',
     // the alt key _is_ the option key on MacOS - in the browser there is no "option" key
     control: '⌃',
     shift: '⇧',
-    meta: isMacOS ? '⌘' : 'Win',
-    mod: isMacOS ? '⌘' : '⌃',
+    meta: platform === 'apple' ? '⌘' : platform === 'windows' ? 'Win' : 'Meta',
+    mod: platform === 'apple' ? '⌘' : '⌃',
     pageup: 'PgUp',
     pagedown: 'PgDn',
     arrowup: '↑',
@@ -47,11 +47,12 @@ const condensedKeyName = (key, isMacOS) => {
  * Specific key displays for 'full' format. We still do show some icons (ie punctuation)
  * because that's more intuitive, but for the rest of keys we show the standard key name.
  */
-const fullKeyName = (key, isMacOS) => {
-  var _alt$mod$$pageup$pag;
-  return (_alt$mod$$pageup$pag = {
-    alt: isMacOS ? 'Option' : 'Alt',
-    mod: isMacOS ? 'Command' : 'Control',
+const fullKeyName = (key, platform) => {
+  var _alt$meta$mod$$pageu;
+  return (_alt$meta$mod$$pageu = {
+    alt: platform === 'apple' ? 'Option' : 'Alt',
+    meta: platform === 'apple' ? 'Command' : platform === 'windows' ? 'Windows' : 'Meta',
+    mod: platform === 'apple' ? 'Command' : 'Control',
     '+': 'Plus',
     pageup: 'Page Up',
     pagedown: 'Page Down',
@@ -61,7 +62,7 @@ const fullKeyName = (key, isMacOS) => {
     arrowright: 'Right Arrow',
     capslock: 'Caps Lock',
     printscreen: 'Print Screen'
-  }[key]) !== null && _alt$mod$$pageup$pag !== void 0 ? _alt$mod$$pageup$pag : capitalize(key);
+  }[key]) !== null && _alt$meta$mod$$pageu !== void 0 ? _alt$meta$mod$$pageu : capitalize(key);
 };
 
 /**
@@ -69,12 +70,12 @@ const fullKeyName = (key, isMacOS) => {
  * readers from expressing punctuation in speech, ie, reading a long pause instead of the
  * word "period".
  */
-const accessibleKeyName = (key, isMacOS) => {
+const accessibleKeyName = (key, platform) => {
   var _alt$meta$mod$pageup$;
   return (_alt$meta$mod$pageup$ = {
-    alt: isMacOS ? 'option' : 'alt',
-    meta: isMacOS ? 'command' : 'Windows',
-    mod: isMacOS ? 'command' : 'control',
+    alt: platform === 'apple' ? 'option' : 'alt',
+    meta: platform === 'apple' ? 'command' : platform === 'windows' ? 'Windows' : 'meta',
+    mod: platform === 'apple' ? 'command' : 'control',
     // Screen readers may not be able to pronounce concatenated words - this provides a better experience
     pageup: 'page up',
     pagedown: 'page down',

package/dist/KeybindingHint/platform.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The platform categories that affect how keyboard shortcut keys are displayed.
+ *
+ * - `apple`: Apple platforms (macOS and iOS/iPadOS), which use the Command and Option keys.
+ * - `windows`: Windows, which uses the Windows (Meta) key.
+ * - `other`: Any other platform (e.g. Linux, Android), where the Meta key does not map to a
+ *   consistent label.
+ */
+export type Platform = 'apple' | 'windows' | 'other';
+export declare const PlatformOverrideProvider: import("react").Provider<Platform | null>;
+/**
+ * SSR-safe hook for determining the current platform category used when displaying
+ * keyboard shortcut keys.
+ *
+ * Mirrors the approach of `useIsMacOS`: on the client it reads the real value immediately,
+ * and on the server it returns a safe default (`'other'`).
+ *
+ * If a `PlatformOverrideProvider` is present with a non-null value, that value is used
+ * instead of the detected platform.
+ */
+export declare function usePlatform(): Platform;
+//# sourceMappingURL=platform.d.ts.map

package/dist/KeybindingHint/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/platform.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAkCpD,eAAO,MAAM,wBAAwB,2CAAmC,CAAA;AAExE;;;;;;;;;GASG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAItC"}

package/dist/KeybindingHint/platform.js

@@ -0,0 +1,61 @@
+import { isMacOS } from '@primer/behaviors/utils';
+import { useContext, useSyncExternalStore, createContext } from 'react';
+
+/**
+ * The platform categories that affect how keyboard shortcut keys are displayed.
+ *
+ * - `apple`: Apple platforms (macOS and iOS/iPadOS), which use the Command and Option keys.
+ * - `windows`: Windows, which uses the Windows (Meta) key.
+ * - `other`: Any other platform (e.g. Linux, Android), where the Meta key does not map to a
+ *   consistent label.
+ */
+
+// No-op. The platform never changes at runtime, so there is nothing to
+// subscribe to. Hoisted to avoid creating a new function on every call.
+const subscribe = () => () => {};
+
+/** SSR-unsafe detection of iOS/iPadOS (in addition to macOS, which is detected separately). */
+const ssrUnsafeIsIOS = () => {
+  if (typeof navigator === 'undefined') return false;
+  return /iphone|ipad|ipod/i.test(navigator.platform) || /iphone|ipad|ipod/i.test(navigator.userAgent);
+};
+
+/** SSR-unsafe detection of Windows. */
+const ssrUnsafeIsWindows = () => {
+  if (typeof navigator === 'undefined') return false;
+  return /^win/i.test(navigator.platform);
+};
+const getSnapshot = () => {
+  if (isMacOS() || ssrUnsafeIsIOS()) return 'apple';
+  if (ssrUnsafeIsWindows()) return 'windows';
+  return 'other';
+};
+
+// Safe default for SSR since we can't detect the platform on the server.
+const getServerSnapshot = () => 'other';
+
+/**
+ * Allows overriding the detected platform. This is primarily intended for testing and
+ * Storybook, where we want to preview how keyboard hints render on platforms other than the
+ * one actually running. A `null` value (the default) means "use the detected platform".
+ */
+const PlatformOverrideContext = /*#__PURE__*/createContext(null);
+PlatformOverrideContext.Provider;
+
+/**
+ * SSR-safe hook for determining the current platform category used when displaying
+ * keyboard shortcut keys.
+ *
+ * Mirrors the approach of `useIsMacOS`: on the client it reads the real value immediately,
+ * and on the server it returns a safe default (`'other'`).
+ *
+ * If a `PlatformOverrideProvider` is present with a non-null value, that value is used
+ * instead of the detected platform.
+ */
+function usePlatform() {
+  const override = useContext(PlatformOverrideContext);
+  const detected = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return override !== null && override !== void 0 ? override : detected;
+}
+
+export { usePlatform };

package/dist/PageLayout/PageLayout.d.ts

@@ -160,7 +160,7 @@ export type PageLayoutPaneProps = PageLayoutPaneBaseProps & ({
     currentWidth?: never;
 });
 declare const Pane: React.ForwardRefExoticComponent<React.PropsWithChildren<PageLayoutPaneProps> & React.RefAttributes<HTMLDivElement>>;
-export type PageLayoutSidebarProps = {
+export type PageLayoutSidebarBaseProps = {
     /**
      * A unique label for the sidebar region
      */
@@ -175,7 +175,10 @@ export type PageLayoutSidebarProps = {
      */
     position?: 'start' | 'end';
     /**
-     * Width configuration for the sidebar
+     * Width configuration for the sidebar.
+     *
+     * When `resizable` is enabled, this defines the default width and constraints
+     * (min/max bounds for dragging). Use `currentWidth` to control the displayed width.
      */
     width?: PaneWidth | CustomWidthOptions;
     /**
@@ -190,7 +193,7 @@ export type PageLayoutSidebarProps = {
     resizable?: boolean;
     /**
      * localStorage key used to persist the sidebar width across sessions.
-     * Only applies when `resizable` is `true`.
+     * Only applies when `resizable` is `true` and no `onResizeEnd` callback is provided.
      * When omitted, localStorage is not used.
      */
     widthStorageKey?: string;
@@ -226,9 +229,24 @@ export type PageLayoutSidebarProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare const Sidebar: React.ForwardRefExoticComponent<PageLayoutSidebarProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+export type PageLayoutSidebarProps = PageLayoutSidebarBaseProps & ({
+    /**
+     * Callback fired when a resize operation ends (drag release or keyboard key up).
+     * When provided, this callback is used instead of localStorage persistence.
+     */
+    onResizeEnd: (width: number) => void;
+    /**
+     * Current/controlled width value in pixels.
+     * When provided, this is used as the current sidebar width instead of internal state.
+     * The `width` prop still defines the default used when resetting (e.g., double-click).
+     * Pass `undefined` when the persisted value has not loaded yet (e.g., async fetch).
+     */
+    currentWidth: number | undefined;
+} | {
+    onResizeEnd?: never;
+    currentWidth?: never;
+});
+declare const Sidebar: React.ForwardRefExoticComponent<React.PropsWithChildren<PageLayoutSidebarProps> & React.RefAttributes<HTMLDivElement>>;
 export type PageLayoutFooterProps = {
     /**
      * A unique label for the rendered contentinfo landmark

package/dist/PageLayout/PageLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/PageLayout/PageLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/PageLayout/PageLayout.tsx"],"names":[],"mappings":"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"}

package/dist/PageLayout/PageLayout.js

@@ -742,6 +742,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   position = 'start',
   width = 'medium',
   minWidth = 256,
+  currentWidth: controlledWidth,
+  onResizeEnd,
   padding = 'none',
   resizable = false,
   widthStorageKey,
@@ -783,7 +785,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     paneRef: sidebarRef,
     handleRef,
     contentWrapperRef: sidebarContentWrapperRef,
-    constrainToViewport: true
+    constrainToViewport: true,
+    onResizeEnd,
+    currentWidth: controlledWidth
   });
   const mergedSidebarRef = useMergedRefs(forwardRef, sidebarRef);
   const hasOverflow = useOverflow(sidebarRef);
@@ -827,8 +831,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       ref: mergedSidebarRef
       // Suppress hydration mismatch for --pane-width when localStorage
       // provides a width that differs from the server-rendered default.
+      // Not needed when onResizeEnd is provided (localStorage isn't read).
       ,
-      suppressHydrationWarning: resizable === true && !!widthStorageKey,
+      suppressHydrationWarning: resizable === true && !!widthStorageKey && !onResizeEnd,
       ...(hasOverflow ? overflowProps : {}),
       ...labelProp,
       ...(id && {

package/dist/Timeline/Timeline.d.ts

@@ -13,7 +13,8 @@ type StyledTimelineItemProps = {
  */
 export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
 export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
-export type TimelineBadgeVariant = 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'open' | 'closed' | 'sponsors';
+export declare const TimelineBadgeVariants: readonly ["accent", "success", "attention", "severe", "danger", "done", "open", "closed", "sponsors"];
+export type TimelineBadgeVariant = (typeof TimelineBadgeVariants)[number];
 export type TimelineBadgeProps = {
     children?: React.ReactNode;
     className?: string;

package/dist/Timeline/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,mBAAmB,GAAG;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAEjG,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAsBvF,KAAK,uBAAuB,GAAG;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAExE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEhG,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAiB/F,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAA;AAEd,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAYzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,oBAAoB,GAAG;IACjC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;;;;QAFvC,oCAAoC;oBACxB,MAAM;;;2CA7CmC,kBAAkB;;;;QAWvE,oCAAoC;oBACxB,MAAM;;;QAUlB,oCAAoC;oBACxB,MAAM;;;QAUlB,oCAAoC;oBACxB,MAAM;;;AAoBpB,wBAOE"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,mBAAmB,GAAG;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAEjG,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAsBvF,KAAK,uBAAuB,GAAG;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAExE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEhG,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAiB/F,eAAO,MAAM,qBAAqB,uGAUxB,CAAA;AAEV,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAYzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,oBAAoB,GAAG;IACjC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;;;;QAFvC,oCAAoC;oBACxB,MAAM;;;2CA7CmC,kBAAkB;;;;QAWvE,oCAAoC;oBACxB,MAAM;;;QAUlB,oCAAoC;oBACxB,MAAM;;;QAUlB,oCAAoC;oBACxB,MAAM;;;AAoBpB,wBAOE"}

package/dist/TooltipV2/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,KAAK,yBAAyB,EAAC,MAAM,OAAO,CAAA;AAS3G,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAG7G,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IACjF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACnC;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiEnC,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAI3E,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAC7C,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CACvE,GACC,UAkSD,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,KAAK,yBAAyB,EAAC,MAAM,OAAO,CAAA;AAS3G,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAI7G,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IACjF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACnC;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiEnC,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAI3E,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAC7C,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CACvE,GACC,UAkSD,CAAA"}

package/dist/TooltipV2/Tooltip.js

@@ -5,13 +5,13 @@ import { getAnchoredPosition } from '@primer/behaviors';
 import { isSupported, apply } from '@oddbird/popover-polyfill/fn';
 import { clsx } from 'clsx';
 import classes from './Tooltip.module.css.js';
+import { usePlatform } from '../KeybindingHint/platform.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import useSafeTimeout from '../hooks/useSafeTimeout.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId } from '../hooks/useId.js';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
 import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
-import { useIsMacOS } from '../hooks/useIsMacOS.js';
 import { getAccessibleKeybindingHintString, KeybindingHint } from '../KeybindingHint/KeybindingHint.js';
 
 // map tooltip direction to anchoredPosition props
@@ -195,7 +195,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       closeTooltip();
     }
   }, [isPopoverOpen]);
-  const isMacOS = useIsMacOS();
+  const platform = usePlatform();
   const hasAriaLabel = 'aria-label' in rest;
 
   // Normalize keybindingHint to an array for uniform rendering
@@ -290,7 +290,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
           children: [/*#__PURE__*/jsxs("span", {
             id: hasAriaLabel ? undefined : tooltipId,
             children: [text, /*#__PURE__*/jsxs(VisuallyHidden, {
-              children: ["(", keybindingHints.map(hint => getAccessibleKeybindingHintString(hint, isMacOS)).join(' or '), ")"]
+              children: ["(", keybindingHints.map(hint => getAccessibleKeybindingHintString(hint, platform)).join(' or '), ")"]
             })]
           }), /*#__PURE__*/jsx("span", {
             className: clsx(classes.KeybindingHintContainer, text && classes.HasTextBefore, keybindingHints.length > 1 && classes.HasMultipleHints),

package/dist/TreeView/TreeView-1bf45a33.css

@@ -0,0 +1,2 @@
+.prc-TreeView-TreeViewRootUlStyles-Mzrmj{list-style:none;margin:0;padding:0}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f{outline:none;overflow-clip-margin:var(--base-size-8,.5rem)}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f).focus-visible>div{box-shadow:var(--boxShadow-thick,inset 0 0 0 .125rem) var(--fgColor-accent,#0969da)}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f).focus-visible>div{outline:2px solid HighlightText;outline-offset:-2px}}[data-has-leading-action]:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f){--has-leading-action:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:grid;font-size:var(--text-body-size-medium,.875rem);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr auto;overflow-clip-margin:var(--base-size-8,.5rem);position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):hover{background-color:var(--control-transparent-bgColor-hover,#818b981a)}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):hover{outline:2px solid transparent;outline-offset:-2px}}@media (pointer:coarse){.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ{--toggle-width:1.5rem;--min-item-height:2.75rem}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-omit-spacer=true]) .prc-TreeView-TreeViewItemContainer-z6qqQ{grid-template-columns:0 0 0 1fr auto}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f:where([data-loading])>.prc-TreeView-TreeViewItemContainer-z6qqQ:hover{background-color:transparent;cursor:default}@media (forced-colors:active){.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f:where([data-loading])>.prc-TreeView-TreeViewItemContainer-z6qqQ:hover{outline:none}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ{background-color:var(--control-transparent-bgColor-selected,#818b9826)}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ):after{background-color:var(--fgColor-accent,#0969da);border-radius:var(--borderRadius-medium,.375rem);content:"";height:1.5rem;left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:.25rem}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ):after{background-color:HighlightText}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggle-hq3Xq{align-items:flex-start;color:var(--fgColor-muted,#59636e);display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12,.75rem)/2)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggleHover-H9tbt:hover{background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggleEnd-nWt9I{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContent-RKsCI{display:flex;gap:var(--stack-gap-condensed,.5rem);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));padding:0 var(--base-size-8,.5rem);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContentText-FFaKp{flex:1 1 auto;width:0}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-truncate-text=true]) .prc-TreeView-TreeViewItemContentText-FFaKp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-truncate-text=false]) .prc-TreeView-TreeViewItemContentText-FFaKp{word-break:break-word}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemVisual-naWzj{align-items:center;color:var(--fgColor-muted,#59636e);display:flex;height:var(--custom-line-height,1.3rem)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLeadingAction-vmOIV{color:var(--fgColor-muted,#59636e);display:flex;grid-area:leadingAction}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLeadingAction-vmOIV)>button{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemTrailingAction-h9M5g{color:var(--fgColor-muted,#59636e);display:flex;grid-area:trailingAction}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemTrailingActionButton-pCTdP{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-right:var(--borderWidth-thin,.0625rem) solid;border-color:var(--tree-line-color,var(--borderColor-muted,#d1d9e0b3));height:100%;width:100%}@media (hover:hover){.prc-TreeView-TreeViewRootUlStyles-Mzrmj{--tree-line-color:transparent}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:focus-within,.prc-TreeView-TreeViewRootUlStyles-Mzrmj:hover{--tree-line-color:var(--borderColor-muted,#d1d9e0b3)}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewDirectoryIcon-yP1oY{color:var(--treeViewItem-leadingVisual-iconColor-rest,#54aeff);display:grid}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewVisuallyHidden-1N8xK{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd{height:2.75rem}}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+1){--tree-item-loading-width:67%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+2){--tree-item-loading-width:47%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+3){--tree-item-loading-width:73%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+4){--tree-item-loading-width:64%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+5){--tree-item-loading-width:50%}.prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g{width:var(--tree-item-loading-width,67%)}
+/*# sourceMappingURL=TreeView-1bf45a33.css.map */

package/dist/TreeView/TreeView-1bf45a33.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA8PF,CA7OE,0EAQE,YAAa,CADb,6CAgBF,CAbE,kMAEE,mFAMF,CAJE,8BAJF,kMAKI,+BAAgC,CAChC,mBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAcvB,gDAAyC,CAFzC,oCAA6B,CAC7B,cAAe,CAVf,YAAa,CAQb,8CAAuC,CAKvC,wEAAyE,CADzE,kGAAmG,CALnG,6CAAwC,CARxC,iBAAkB,CAElB,UAAW,CAcX,gEAAmE,CACnE,+DAeF,CAbE,8FACE,mEAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBAjCF,mFAkCI,qBAAsB,CACtB,yBAEJ,CADE,CAGF,kHACE,oCACF,CAOA,gJAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,gJAKI,YAEJ,CADE,CAGF,uIACE,sEAwBF,CApBE,kJAaE,8CAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,kCAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,mEACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,kCAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,kCAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,kCAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAGE,mDAA2C,CAW3C,sEAA8D,CAZ9D,WAAY,CADZ,UAcF,CAEA,qBApOF,yCAqOI,6BA0BJ,CAxBI,qGAEE,oDACF,CACF,CAEA,mFAEE,8DAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAOV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-1bf45a33.css","sourcesContent":[".TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  .TreeViewItem {\n    /*\n     * `overflow-clip-margin` extends the paint clip edge by 8px so the current-item indicator\n     * (positioned at `left: -8px` of the row container) remains visible when a consumer applies\n     * `contain: paint` (or `contain: strict`, or `content-visibility: auto`) to this `<li>`. Has\n     * no effect when no paint containment is active, so default rendering is unchanged.\n     */\n    overflow-clip-margin: var(--base-size-8);\n    outline: none;\n\n    &:focus-visible > div,\n    &:global(.focus-visible) > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        outline-offset: -2px;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    /*\n     * Mirrors the `overflow-clip-margin` on `.TreeViewItem` so the indicator also stays\n     * visible when `containIntrinsicSize` is set on this row (which sets\n     * `content-visibility: auto` on this container and implies paint containment).\n     */\n    overflow-clip-margin: var(--base-size-8);\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    cursor: pointer;\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr auto;\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr auto;\n  }\n\n  /*\n   * Suppress hover affordances on rows being used as skeleton loading placeholders.\n   * Marked positively via `data-loading` from `LoadingItem` so we avoid the broad\n   * invalidation cost of `:has(.TreeViewItemSkeleton)` across every row in large trees.\n   */\n  .TreeViewItem:where([data-loading]) > .TreeViewItemContainer:hover {\n    cursor: default;\n    background-color: transparent;\n\n    @media (forced-colors: active) {\n      outline: none;\n    }\n  }\n\n  .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n  }\n\n  .TreeViewItemContentText {\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n    word-break: break-word;\n  }\n\n  .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  .TreeViewItemTrailingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: trailingAction;\n  }\n\n  .TreeViewItemTrailingActionButton {\n    flex-shrink: 1;\n  }\n\n  .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n    border-right: var(--borderWidth-thin) solid;\n\n    /*\n     * `--tree-line-color` is set on the root `<ul>` and inherited down. On coarse pointers it\n     * stays unset and falls back to `muted` (lines always visible). On hover-capable devices it\n     * is initialized to `transparent` on the root and flipped to `muted` while the tree is\n     * hovered or focused, so the browser only has to propagate a single inherited custom\n     * property instead of re-matching `.TreeViewItemLevelLine` descendant selectors on every\n     * hover/focus change inside large trees.\n     */\n    /* stylelint-disable-next-line primer/colors -- private custom property, defaults to a Primer token */\n    border-color: var(--tree-line-color, var(--borderColor-muted));\n  }\n\n  @media (hover: hover) {\n    --tree-line-color: transparent;\n\n    &:hover,\n    &:focus-within {\n      --tree-line-color: var(--borderColor-muted);\n    }\n  }\n\n  .TreeViewDirectoryIcon {\n    display: grid;\n    color: var(--treeViewItem-leadingVisual-iconColor-rest);\n  }\n\n  .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    /* stylelint-disable-next-line property-no-deprecated */\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n"]}

package/dist/TreeView/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}

package/dist/TreeView/TreeView.js

@@ -15,9 +15,9 @@ import { useTypeahead } from './useTypeahead.js';
 import { IconButton } from '../Button/IconButton.js';
 import { ButtonComponent } from '../Button/Button.js';
 import { ActionList } from '../ActionList/index.js';
+import { usePlatform } from '../KeybindingHint/platform.js';
 import { isSlot } from '../utils/is-slot.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useIsMacOS } from '../hooks/useIsMacOS.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
 import Spinner from '../Spinner/Spinner.js';
 import { Tooltip } from '../TooltipV2/Tooltip.js';
@@ -46,6 +46,11 @@ const ItemContext = /*#__PURE__*/React.createContext({
   trailingActionId: ''
 });
 
+// Module-private channel from LoadingItem to the Item it renders. Lets us mark the placeholder
+// row with `data-loading` (used by CSS to suppress hover affordances) without exposing an
+// internal-only prop on the public TreeViewItemProps API.
+const LoadingPlaceholderContext = /*#__PURE__*/React.createContext(false);
+
 // ----------------------------------------------------------------------------
 // TreeView
 
@@ -303,6 +308,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const {
     level
   } = React.useContext(ItemContext);
+  const isLoadingPlaceholder = React.useContext(LoadingPlaceholderContext);
   const {
     hasSubTree,
     subTree,
@@ -311,7 +317,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree);
   const [actionCommandPressed, setActionCommandPressed] = React.useState(false);
   const [isFocused, setIsFocused] = React.useState(false);
-  const isMacOS = useIsMacOS();
+  const platform = usePlatform();
 
   // Set the expanded state and cache it
   const setIsExpandedWithCache = React.useCallback(
@@ -372,8 +378,8 @@ const Item = /*#__PURE__*/React.forwardRef(({
     }
   }, [onSelect, setIsExpandedWithCache, toggle, activateActionsDialog]);
   const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
-  const shortcut = `Shift+${isMacOS ? 'Meta' : 'Control'}+U`;
-  const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, isMacOS)}) for more actions.`;
+  const shortcut = `Shift+${platform === 'apple' ? 'Meta' : 'Control'}+U`;
+  const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, platform)}) for more actions.`;
   return /*#__PURE__*/jsx(ItemContext.Provider, {
     value: {
       itemId,
@@ -400,6 +406,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
       "aria-current": isCurrentItem ? 'true' : undefined,
       "aria-selected": isFocused ? 'true' : 'false',
       "data-has-leading-action": slots.leadingAction ? true : undefined,
+      "data-loading": isLoadingPlaceholder ? true : undefined,
       onKeyDown: handleKeyDown,
       onFocus: event_1 => {
         // Defer scroll to the next animation frame so that rapid keyboard
@@ -778,10 +785,13 @@ const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
     }
     let t4;
     if ($[5] !== itemId || $[6] !== ref || $[7] !== t1 || $[8] !== t3) {
-      t4 = /*#__PURE__*/jsxs(Item, {
-        id: itemId,
-        ref: ref,
-        children: [t1, t3]
+      t4 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/jsxs(Item, {
+          id: itemId,
+          ref: ref,
+          children: [t1, t3]
+        })
       });
       $[5] = itemId;
       $[6] = ref;
@@ -813,10 +823,13 @@ const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
   }
   let t3;
   if ($[12] !== itemId || $[13] !== ref) {
-    t3 = /*#__PURE__*/jsxs(Item, {
-      id: itemId,
-      ref: ref,
-      children: [t1, t2]
+    t3 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/jsxs(Item, {
+        id: itemId,
+        ref: ref,
+        children: [t1, t2]
+      })
     });
     $[12] = itemId;
     $[13] = ref;

package/dist/TreeView/TreeView.module.css.js

@@ -1,5 +1,5 @@
-import './TreeView-0fe09f34.css';
+import './TreeView-1bf45a33.css';
 
-var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-Mzrmj","TreeViewItem":"prc-TreeView-TreeViewItem-Ter5f","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer-z6qqQ","TreeViewItemSkeleton":"prc-TreeView-TreeViewItemSkeleton-FGlnx","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-hq3Xq","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-H9tbt","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-nWt9I","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-RKsCI","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-FFaKp","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-naWzj","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-vmOIV","TreeViewItemTrailingAction":"prc-TreeView-TreeViewItemTrailingAction-h9M5g","TreeViewItemTrailingActionButton":"prc-TreeView-TreeViewItemTrailingActionButton-pCTdP","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-F-0-2","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-yP1oY","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-1N8xK","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g"};
+var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-Mzrmj","TreeViewItem":"prc-TreeView-TreeViewItem-Ter5f","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer-z6qqQ","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-hq3Xq","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-H9tbt","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-nWt9I","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-RKsCI","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-FFaKp","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-naWzj","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-vmOIV","TreeViewItemTrailingAction":"prc-TreeView-TreeViewItemTrailingAction-h9M5g","TreeViewItemTrailingActionButton":"prc-TreeView-TreeViewItemTrailingActionButton-pCTdP","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-F-0-2","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-yP1oY","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-1N8xK","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g"};
 
 export { classes as default };

package/generated/components.json

@@ -3831,6 +3831,10 @@
         {
           "id": "experimental-components-keybindinghint-features--on-primary",
           "code": "(args) => (\n  <div className={classes.PrimaryBackground}>\n    <KeybindingHint {...args} />\n  </div>\n)"
+        },
+        {
+          "id": "experimental-components-keybindinghint-features--platforms",
+          "code": "({ format = 'full', ...args }) => (\n  <table className={classes.PlatformTable}>\n    <thead>\n      <tr>\n        <th\n          scope=\"col\"\n          className={`${classes.PlatformCell} ${classes.PlatformHeader}`}\n        >\n          Platform\n        </th>\n        {modifierKeys.map((key) => (\n          <th\n            scope=\"col\"\n            className={`${classes.PlatformCell} ${classes.PlatformHeader}`}\n            key={key}\n          >\n            {key}\n          </th>\n        ))}\n      </tr>\n    </thead>\n    <tbody>\n      {platforms.map(({ platform, label }) => (\n        <tr key={platform}>\n          <th\n            scope=\"row\"\n            className={`${classes.PlatformCell} ${classes.PlatformHeader}`}\n          >\n            {label}\n          </th>\n          {modifierKeys.map((key) => (\n            <td key={key} className={classes.PlatformCell}>\n              <PlatformOverrideProvider value={platform}>\n                <KeybindingHint {...args} format={format} keys={`${key}+K`} />\n              </PlatformOverrideProvider>\n            </td>\n          ))}\n        </tr>\n      ))}\n    </tbody>\n  </table>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -5041,6 +5045,14 @@
           "id": "components-pagelayout-features--resizable-sidebar",
           "code": "() => (\n  <PageLayout containerWidth=\"full\">\n    <PageLayout.Sidebar\n      resizable\n      position=\"end\"\n      aria-label=\"Resizable sidebar\"\n      style={{\n        height: 'auto',\n      }}\n      width={{\n        min: '200px',\n        default: '300px',\n        max: '2000px',\n      }}\n    >\n      <Placeholder height=\"100%\" label=\"Resizable Sidebar\" />\n    </PageLayout.Sidebar>\n    <PageLayout.Header>\n      <Placeholder height={64} label=\"Header\" />\n    </PageLayout.Header>\n    <PageLayout.Pane position=\"start\" aria-label=\"Side pane\">\n      <Placeholder height={320} label=\"Pane\" />\n    </PageLayout.Pane>\n    <PageLayout.Content>\n      <Placeholder height={640} label=\"Content\" />\n    </PageLayout.Content>\n    <PageLayout.Footer>\n      <Placeholder height={64} label=\"Footer\" />\n    </PageLayout.Footer>\n  </PageLayout>\n)"
         },
+        {
+          "id": "components-pagelayout-features--resizable-sidebar-without-persistence",
+          "code": "() => {\n  const [currentWidth, setCurrentWidth] = React.useState<number>(300)\n  return (\n    <PageLayout containerWidth=\"full\">\n      <PageLayout.Sidebar\n        resizable\n        position=\"start\"\n        currentWidth={currentWidth}\n        onResizeEnd={setCurrentWidth}\n        aria-label=\"Resizable sidebar (controlled)\"\n        style={{\n          height: 'auto',\n        }}\n        width={{\n          min: '200px',\n          default: '300px',\n          max: '600px',\n        }}\n      >\n        <Placeholder\n          height=\"100%\"\n          label={`Sidebar (controlled, width: ${currentWidth}px)`}\n        />\n      </PageLayout.Sidebar>\n      <PageLayout.Header>\n        <Placeholder height={64} label=\"Header\" />\n      </PageLayout.Header>\n      <PageLayout.Content>\n        <Placeholder height={640} label=\"Content\" />\n      </PageLayout.Content>\n      <PageLayout.Footer>\n        <Placeholder height={64} label=\"Footer\" />\n      </PageLayout.Footer>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-pagelayout-features--resizable-sidebar-with-custom-persistence",
+          "code": "() => {\n  const key = 'page-layout-features-stories-custom-persistence-sidebar-width'\n\n  // Read initial width from localStorage (CSR only), falling back to medium preset\n  const getInitialWidth = (): number => {\n    if (typeof window !== 'undefined') {\n      const storedWidth = localStorage.getItem(key)\n      if (storedWidth !== null) {\n        const parsed = parseFloat(storedWidth)\n        if (!isNaN(parsed) && parsed > 0) {\n          return parsed\n        }\n      }\n    }\n    return defaultPaneWidth.medium\n  }\n  const [currentWidth, setCurrentWidth] =\n    React.useState<number>(getInitialWidth)\n  useIsomorphicLayoutEffect(() => {\n    setCurrentWidth(getInitialWidth())\n  }, [])\n  const handleWidthChange = (width: number) => {\n    setCurrentWidth(width)\n    localStorage.setItem(key, width.toString())\n  }\n  return (\n    <PageLayout containerWidth=\"full\">\n      <PageLayout.Sidebar\n        resizable\n        position=\"start\"\n        currentWidth={currentWidth}\n        onResizeEnd={handleWidthChange}\n        aria-label=\"Resizable sidebar (custom persistence)\"\n        style={{\n          height: 'auto',\n        }}\n        width={{\n          min: '200px',\n          default: `${defaultPaneWidth.medium}px`,\n          max: '600px',\n        }}\n      >\n        <Placeholder\n          height=\"100%\"\n          label={`Sidebar (width: ${currentWidth}px)`}\n        />\n      </PageLayout.Sidebar>\n      <PageLayout.Header>\n        <Placeholder height={64} label=\"Header\" />\n      </PageLayout.Header>\n      <PageLayout.Content>\n        <Placeholder height={640} label=\"Content\" />\n      </PageLayout.Content>\n      <PageLayout.Footer>\n        <Placeholder height={64} label=\"Footer\" />\n      </PageLayout.Footer>\n    </PageLayout>\n  )\n}"
+        },
         {
           "id": "components-pagelayout-features--sidebar-with-pane-resizable",
           "code": "() => (\n  <PageLayout containerWidth=\"full\">\n    <PageLayout.Sidebar\n      style={{\n        height: 'auto',\n      }}\n      resizable\n      position=\"end\"\n      aria-label=\"Navigation sidebar\"\n      width={{\n        min: '200px',\n        default: '300px',\n        max: '2000px',\n      }}\n    >\n      <Placeholder height=\"100%\" label=\"Resizable Sidebar\" />\n    </PageLayout.Sidebar>\n    <PageLayout.Header>\n      <Placeholder height={64} label=\"Header\" />\n    </PageLayout.Header>\n    <PageLayout.Pane resizable position=\"start\" aria-label=\"Side pane\">\n      <Placeholder height={320} label=\"Resizable Pane\" />\n    </PageLayout.Pane>\n    <PageLayout.Content>\n      <Placeholder height={640} label=\"Content\" />\n    </PageLayout.Content>\n    <PageLayout.Footer>\n      <Placeholder height={64} label=\"Footer\" />\n    </PageLayout.Footer>\n  </PageLayout>\n)"
@@ -5296,7 +5308,22 @@
               "name": "resizable",
               "type": "boolean",
               "defaultValue": "false",
-              "description": "When true, the sidebar may be resized by the user. Width is persisted to localStorage by default."
+              "description": "When true, the sidebar may be resized by the user. By default no persistence is applied; pass `widthStorageKey` to persist via localStorage, or use `onResizeEnd` + `currentWidth` for fully controlled persistence."
+            },
+            {
+              "name": "currentWidth",
+              "type": "number | undefined",
+              "description": "Current/controlled width value in pixels. Required when `onResizeEnd` is provided. Pass `undefined` when the persisted value has not loaded yet. The `width` prop still defines the default used when resetting (e.g., double-click)."
+            },
+            {
+              "name": "onResizeEnd",
+              "type": "(width: number) => void",
+              "description": "Callback fired when a resize operation ends (drag release or keyboard key up). When provided, replaces localStorage persistence. Requires `currentWidth`."
+            },
+            {
+              "name": "widthStorageKey",
+              "type": "string",
+              "description": "localStorage key used to persist the sidebar width across sessions. Only applies when `resizable` is `true` and no `onResizeEnd` callback is provided. When omitted, localStorage is not used."
             },
             {
               "name": "padding",
@@ -8053,35 +8080,35 @@
       "stories": [
         {
           "id": "components-timeline--default",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--clip-sidebar",
-          "code": "() => (\n  <Timeline clipSidebar>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline clipSidebar>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--clip-sidebar-start",
-          "code": "() => (\n  <Timeline clipSidebar=\"start\">\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline clipSidebar=\"start\">\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--clip-sidebar-end",
-          "code": "() => (\n  <Timeline clipSidebar=\"end\">\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline clipSidebar=\"end\">\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--condensed-items",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--timeline-break",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"done\">\n        <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"done\">\n        <GitMergeIcon aria-label=\"Merged\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitBranchIcon aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--badge-variants",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"accent\">\n        <Octicon icon={GitPullRequestIcon} aria-label=\"Pull request\" />\n      </Timeline.Badge>\n      <Timeline.Body>Accent</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"success\">\n        <Octicon icon={IssueClosedIcon} aria-label=\"Closed\" />\n      </Timeline.Badge>\n      <Timeline.Body>Success</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"attention\">\n        <Octicon icon={FlameIcon} aria-label=\"Attention\" />\n      </Timeline.Badge>\n      <Timeline.Body>Attention</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"severe\">\n        <Octicon icon={SkipIcon} aria-label=\"Severe\" />\n      </Timeline.Badge>\n      <Timeline.Body>Severe</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"danger\">\n        <Octicon icon={XIcon} aria-label=\"Danger\" />\n      </Timeline.Badge>\n      <Timeline.Body>Danger</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"done\">\n        <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n      </Timeline.Badge>\n      <Timeline.Body>Done</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"open\">\n        <Octicon icon={IssueOpenedIcon} aria-label=\"Open\" />\n      </Timeline.Badge>\n      <Timeline.Body>Open</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"closed\">\n        <Octicon icon={IssueClosedIcon} aria-label=\"Closed\" />\n      </Timeline.Badge>\n      <Timeline.Body>Closed</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"sponsors\">\n        <Octicon icon={HeartIcon} aria-label=\"Sponsors\" />\n      </Timeline.Badge>\n      <Timeline.Body>Sponsors</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"accent\">\n        <GitPullRequestIcon aria-label=\"Pull request\" />\n      </Timeline.Badge>\n      <Timeline.Body>Accent</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"success\">\n        <IssueClosedIcon aria-label=\"Closed\" />\n      </Timeline.Badge>\n      <Timeline.Body>Success</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"attention\">\n        <FlameIcon aria-label=\"Attention\" />\n      </Timeline.Badge>\n      <Timeline.Body>Attention</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"severe\">\n        <SkipIcon aria-label=\"Severe\" />\n      </Timeline.Badge>\n      <Timeline.Body>Severe</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"danger\">\n        <XIcon aria-label=\"Danger\" />\n      </Timeline.Badge>\n      <Timeline.Body>Danger</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"done\">\n        <GitMergeIcon aria-label=\"Merged\" />\n      </Timeline.Badge>\n      <Timeline.Body>Done</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"open\">\n        <IssueOpenedIcon aria-label=\"Open\" />\n      </Timeline.Badge>\n      <Timeline.Body>Open</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"closed\">\n        <IssueClosedIcon aria-label=\"Closed\" />\n      </Timeline.Badge>\n      <Timeline.Body>Closed</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item>\n      <Timeline.Badge variant=\"sponsors\">\n        <HeartIcon aria-label=\"Sponsors\" />\n      </Timeline.Badge>\n      <Timeline.Body>Sponsors</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--with-inline-links",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <GitCommitIcon aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--with-actions",
@@ -8089,7 +8116,7 @@
         },
         {
           "id": "components-timeline-features--with-avatar",
-          "code": "() => (\n  <div className={classes.AvatarGutter}>\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          opened this pull request\n        </Timeline.Body>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Avatar>\n          <Avatar\n            size={16}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>Monalisa pushed a commit</Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  <div\n    className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            monalisa\n          </Link>\n          {'approved these changes '}\n          <RelativeTime date={new Date()} format=\"relative\" />\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View reviewed changes</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.27.0-rc.82d74c5ae",
+  "version": "38.27.0-rc.bfb2839ed",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/TreeView/TreeView-0fe09f34.css

@@ -1,2 +0,0 @@
-.prc-TreeView-TreeViewRootUlStyles-Mzrmj{list-style:none;margin:0;padding:0}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f{outline:none}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f).focus-visible>div{box-shadow:var(--boxShadow-thick,inset 0 0 0 .125rem) var(--fgColor-accent,#0969da)}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f).focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f){--has-leading-action:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:grid;font-size:var(--text-body-size-medium,.875rem);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):hover{background-color:var(--control-transparent-bgColor-hover,#818b981a)}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):hover{outline:2px solid transparent;outline-offset:-2px}}@media (pointer:coarse){.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):has(.prc-TreeView-TreeViewItemSkeleton-FGlnx):hover{background-color:transparent;cursor:default}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):has(.prc-TreeView-TreeViewItemSkeleton-FGlnx):hover{outline:none}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-omit-spacer=true]) .prc-TreeView-TreeViewItemContainer-z6qqQ{grid-template-columns:0 0 0 1fr}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ{background-color:var(--control-transparent-bgColor-selected,#818b9826)}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ):after{background-color:var(--fgColor-accent,#0969da);border-radius:var(--borderRadius-medium,.375rem);content:"";height:1.5rem;left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:.25rem}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ):after{background-color:HighlightText}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggle-hq3Xq{align-items:flex-start;color:var(--fgColor-muted,#59636e);display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12,.75rem)/2)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggleHover-H9tbt:hover{background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggleEnd-nWt9I{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContent-RKsCI{display:flex;gap:var(--stack-gap-condensed,.5rem);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));padding:0 var(--base-size-8,.5rem);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContentText-FFaKp{flex:1 1 auto;width:0}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-truncate-text=true]) .prc-TreeView-TreeViewItemContentText-FFaKp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-truncate-text=false]) .prc-TreeView-TreeViewItemContentText-FFaKp{word-break:break-word}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemVisual-naWzj{align-items:center;color:var(--fgColor-muted,#59636e);display:flex;height:var(--custom-line-height,1.3rem)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLeadingAction-vmOIV{color:var(--fgColor-muted,#59636e);display:flex;grid-area:leadingAction}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLeadingAction-vmOIV)>button{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemTrailingAction-h9M5g{color:var(--fgColor-muted,#59636e);display:flex;grid-area:trailingAction}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemTrailingActionButton-pCTdP{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-color:var(--borderColor-muted,#d1d9e0b3);border-right:var(--borderWidth-thin,.0625rem) solid;height:100%;width:100%}@media (hover:hover){.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-color:transparent}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:focus-within .prc-TreeView-TreeViewItemLevelLine-F-0-2,.prc-TreeView-TreeViewRootUlStyles-Mzrmj:hover .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-color:var(--borderColor-muted,#d1d9e0b3)}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewDirectoryIcon-yP1oY{color:var(--treeViewItem-leadingVisual-iconColor-rest,#54aeff);display:grid}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewVisuallyHidden-1N8xK{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd{height:2.75rem}}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+1){--tree-item-loading-width:67%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+2){--tree-item-loading-width:47%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+3){--tree-item-loading-width:73%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+4){--tree-item-loading-width:64%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+5){--tree-item-loading-width:50%}.prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g{width:var(--tree-item-loading-width,67%)}
-/*# sourceMappingURL=TreeView-0fe09f34.css.map */

package/dist/TreeView/TreeView-0fe09f34.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SAsPF,CArOE,0EACE,YAgBF,CAdE,kMAEE,mFAOF,CALE,8BAJF,kMAKI,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,gDAAyC,CAFzC,oCAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,8CAAuC,CAKvC,wEAAyE,CADzE,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DA8BF,CA5BE,8FACE,mEAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,mFA4BI,qBAAsB,CACtB,yBAiBJ,CAhBE,CAQA,4IAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,4IAKI,YAEJ,CADE,CAIJ,kHACE,+BACF,CAEA,uIACE,sEAwBF,CApBE,kJAaE,8CAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,kCAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,mEACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,kCAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,kCAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,kCAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAQE,+CAAsC,CACtC,mDAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,mFACE,wBACF,CAEA,yLAEE,+CACF,CACF,CAEA,mFAEE,8DAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAOV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-0fe09f34.css","sourcesContent":[".TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div,\n    &:global(.focus-visible) > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown */\n        outline-offset: -2;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    cursor: pointer;\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    /*\n     * NOTE: Uses descendant :has() - TreeViewItemSkeleton is nested inside\n     * TreeViewItemContent > TreeViewItemContentText, not a direct child.\n     * This is acceptable as the search is scoped to this element's subtree.\n     */\n    /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n    &:has(.TreeViewItemSkeleton):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n  }\n\n  .TreeViewItemContentText {\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n    word-break: break-word;\n  }\n\n  .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  .TreeViewItemTrailingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: trailingAction;\n  }\n\n  .TreeViewItemTrailingActionButton {\n    flex-shrink: 1;\n  }\n\n  .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  .TreeViewDirectoryIcon {\n    display: grid;\n    color: var(--treeViewItem-leadingVisual-iconColor-rest);\n  }\n\n  .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    /* stylelint-disable-next-line property-no-deprecated */\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n"]}

package/dist/hooks/useIsMacOS.js

@@ -1,32 +0,0 @@
-import { isMacOS } from '@primer/behaviors/utils';
-import { useSyncExternalStore } from 'react';
-
-// No-op. The platform never changes at runtime, so there is nothing to
-// subscribe to. Hoisted to avoid creating a new function on every call.
-const subscribe = () => () => {};
-
-// Safe default for SSR since we can't detect the platform on the server.
-const getServerSnapshot = () => false;
-
-/**
- * SSR-safe hook for determining if the current platform is MacOS.
- *
- * Uses `useSyncExternalStore` to read the platform value:
- *
- * - On the **client**, `ssrUnsafeIsMacOS` reads `navigator.userAgent` and
- *   returns the real value immediately, with no extra render pass.
- *
- * - On the **server**, returns `false`. During hydration, if the snapshots
- *   differ, React handles the mismatch internally in a single synchronous
- *   pass, avoiding the layout shift that a deferred `useEffect` + `setState`
- *   would cause.
- *
- * Previous implementation used `useState` + `useEffect`, which caused an
- * unconditional second render on every mount (even on the client where the
- * initial value was already correct).
- */
-function useIsMacOS() {
-  return useSyncExternalStore(subscribe, isMacOS, getServerSnapshot);
-}
-
-export { useIsMacOS };