@primer/react 38.27.0-rc.bfb2839ed → 38.28.0-rc.1c2334f8e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @primer/react
2
2
 
3
+ ## 38.28.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#7922](https://github.com/primer/react/pull/7922) [`55b7b04`](https://github.com/primer/react/commit/55b7b04647af9d7812e9ff77605524048358039c) Thanks [@dylanatsmith](https://github.com/dylanatsmith)! - InlineMessage: Make `variant` prop optional, defaulting to the standard foreground color with an info icon
8
+
9
+ ### Patch Changes
10
+
11
+ - [#7910](https://github.com/primer/react/pull/7910) [`0c38cfa`](https://github.com/primer/react/commit/0c38cfaeabab347e48d4e34c200739e32efa73a2) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Timeline: Add `primer_react_timeline_list_semantics` feature flag to opt into list semantics
12
+
13
+ When the `primer_react_timeline_list_semantics` feature flag is enabled, `Timeline` renders as `<ol role="list">` and `Timeline.Item` / `Timeline.Break` render as `<li>` so screen reader users get list navigation (total item count, position in sequence). The default behavior is unchanged — `Timeline` and its subcomponents still render as `<div>` until the flag is opted into.
14
+
15
+ Enable the flag with the `FeatureFlags` provider:
16
+
17
+ ```tsx
18
+ import {FeatureFlags} from '@primer/react/experimental'
19
+
20
+ ;<FeatureFlags flags={{primer_react_timeline_list_semantics: true}}>
21
+ <Timeline>…</Timeline>
22
+ </FeatureFlags>
23
+ ```
24
+
3
25
  ## 38.27.0
4
26
 
5
27
  ### Minor Changes
@@ -10,6 +32,8 @@
10
32
 
11
33
  ### Patch Changes
12
34
 
35
+ - [#7915](https://github.com/primer/react/pull/7915) [`f58e448`](https://github.com/primer/react/commit/f58e448961df15e28b4a69950de84d478e2664af) Thanks [@jonrohan](https://github.com/jonrohan)! - Dialog: Fix `Escape` key not closing the dialog on the first keypress when the close button is focused
36
+
13
37
  - [#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`.
14
38
 
15
39
  - [#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.
@@ -170,6 +170,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
170
170
  }>>;
171
171
  CloseButton: React.FC<React.PropsWithChildren<{
172
172
  onClose: () => void;
173
+ onKeyDown?: React.KeyboardEventHandler;
173
174
  }>>;
174
175
  };
175
176
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
@@ -36,6 +36,17 @@ const DefaultHeader = ({
36
36
  const onCloseClick = useCallback(() => {
37
37
  onClose('close-button');
38
38
  }, [onClose]);
39
+ const onCloseKeyDown = useCallback(event => {
40
+ if (event.key === 'Escape') {
41
+ // When the close button is focused its tooltip is open, and the
42
+ // tooltip's own Escape handler (registered on `document`) would
43
+ // otherwise swallow this keypress. Handle Escape here and stop it from
44
+ // reaching the document-level handler so the dialog closes on the first
45
+ // press while keeping the tooltip fully functional.
46
+ event.stopPropagation();
47
+ onClose('escape');
48
+ }
49
+ }, [onClose]);
39
50
  return /*#__PURE__*/jsx(Dialog.Header, {
40
51
  children: /*#__PURE__*/jsxs("div", {
41
52
  className: classes.HeaderInner,
@@ -49,7 +60,8 @@ const DefaultHeader = ({
49
60
  children: subtitle
50
61
  })]
51
62
  }), /*#__PURE__*/jsx(Dialog.CloseButton, {
52
- onClose: onCloseClick
63
+ onClose: onCloseClick,
64
+ onKeyDown: onCloseKeyDown
53
65
  })]
54
66
  })
55
67
  });
@@ -348,12 +360,14 @@ const Buttons = ({
348
360
  });
349
361
  };
350
362
  const CloseButton = ({
351
- onClose
363
+ onClose,
364
+ onKeyDown
352
365
  }) => {
353
366
  return /*#__PURE__*/jsx(IconButton, {
354
367
  icon: XIcon,
355
368
  "aria-label": "Close",
356
369
  onClick: onClose,
370
+ onKeyDown: onKeyDown,
357
371
  variant: "invisible",
358
372
  "data-component": "Dialog.CloseButton"
359
373
  });
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAM9B,CAAA"}
1
+ {"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAO9B,CAAA"}
@@ -5,7 +5,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
5
5
  primer_react_select_panel_fullscreen_on_narrow: false,
6
6
  primer_react_select_panel_order_selected_at_top: false,
7
7
  primer_react_styled_react_use_primer_theme_providers: false,
8
- primer_react_action_list_group_heading_trailing_action: false
8
+ primer_react_action_list_group_heading_trailing_action: false,
9
+ primer_react_timeline_list_semantics: false
9
10
  });
10
11
 
11
12
  export { DefaultFeatureFlags };
@@ -0,0 +1,2 @@
1
+ .prc-InlineMessage-InlineMessage-8xfK-{align-items:start;color:var(--inline-message-fgColor);column-gap:.5rem;display:grid;font-size:var(--inline-message-fontSize);grid-template-columns:auto 1fr;line-height:var(--inline-message-lineHeight);--inline-message-fgColor:var(--fgColor-default,#1f2328)}.prc-InlineMessage-InlineMessage-8xfK-[data-size=small]{--inline-message-fontSize:var(--text-body-size-small,0.75rem);--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666)}.prc-InlineMessage-InlineMessage-8xfK-[data-size=medium]{--inline-message-fontSize:var(--text-body-size-medium,0.875rem);--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=warning]{--inline-message-fgColor:var(--fgColor-attention,#9a6700)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=critical]{--inline-message-fgColor:var(--fgColor-danger,#d1242f)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=success]{--inline-message-fgColor:var(--fgColor-success,#1a7f37)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=unavailable]{--inline-message-fgColor:var(--fgColor-muted,#59636e)}.prc-InlineMessage-InlineMessageIcon-rl8pZ{min-height:calc(var(--inline-message-lineHeight)*var(--inline-message-fontSize))}
2
+ /*# sourceMappingURL=InlineMessage-cd1e4c93.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/InlineMessage/InlineMessage.module.css.js"],"names":[],"mappings":"AAAA,uCAUE,iBAAkB,CAHlB,mCAAoC,CACpC,gBAAkB,CAPlB,YAAa,CAEb,wCAAyC,CAMzC,8BAA+B,CAJ/B,4CAA6C,CAO7C,uDA2BF,CAzBE,wDACE,6DAAsD,CACtD,oEACF,CAEA,yDACE,+DAAuD,CACvD,qEACF,CAEA,6DACE,yDACF,CAEA,8DACE,sDACF,CAEA,6DACE,uDACF,CAEA,iEACE,qDACF,CAGF,2CACE,gFACF","file":"InlineMessage-cd1e4c93.css","sourcesContent":[".InlineMessage {\n display: grid;\n /* stylelint-disable-next-line primer/typography */\n font-size: var(--inline-message-fontSize);\n /* stylelint-disable-next-line primer/typography */\n line-height: var(--inline-message-lineHeight);\n /* stylelint-disable-next-line primer/colors */\n color: var(--inline-message-fgColor);\n column-gap: 0.5rem;\n grid-template-columns: auto 1fr;\n align-items: start;\n\n --inline-message-fgColor: var(--fgColor-default);\n\n &[data-size='small'] {\n --inline-message-fontSize: var(--text-body-size-small);\n --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);\n }\n\n &[data-size='medium'] {\n --inline-message-fontSize: var(--text-body-size-medium);\n --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);\n }\n\n &[data-variant='warning'] {\n --inline-message-fgColor: var(--fgColor-attention);\n }\n\n &[data-variant='critical'] {\n --inline-message-fgColor: var(--fgColor-danger);\n }\n\n &[data-variant='success'] {\n --inline-message-fgColor: var(--fgColor-success);\n }\n\n &[data-variant='unavailable'] {\n --inline-message-fgColor: var(--fgColor-muted);\n }\n}\n\n.InlineMessageIcon {\n min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));\n}\n"]}
@@ -8,7 +8,7 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & {
8
8
  /**
9
9
  * Specify the type of the InlineMessage
10
10
  */
11
- variant: MessageVariant;
11
+ variant?: MessageVariant;
12
12
  /**
13
13
  * A custom leading visual (icon or other element) to display instead of the default variant icon.
14
14
  */
@@ -1 +1 @@
1
- {"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;CACpD,CAAA;AAgBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,aAAa,EAAE,aAAa,EAC5B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA0BpB"}
1
+ {"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;CACpD,CAAA;AAgBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,aAAa,EAAE,aAAa,EAC5B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA4BpB"}
@@ -1,5 +1,5 @@
1
1
  import { c } from 'react-compiler-runtime';
2
- import { AlertIcon, CheckCircleIcon, AlertFillIcon, CheckCircleFillIcon } from '@primer/octicons-react';
2
+ import { AlertIcon, CheckCircleIcon, AlertFillIcon, CheckCircleFillIcon, InfoIcon } from '@primer/octicons-react';
3
3
  import { clsx } from 'clsx';
4
4
  import { isValidElementType } from 'react-is';
5
5
  import classes from './InlineMessage.module.css.js';
@@ -38,7 +38,8 @@ const smallIcons = {
38
38
  })
39
39
  };
40
40
  function InlineMessage(t0) {
41
- const $ = c(18);
41
+ var _variant;
42
+ const $ = c(19);
42
43
  let LeadingVisual;
43
44
  let children;
44
45
  let className;
@@ -88,37 +89,51 @@ function InlineMessage(t0) {
88
89
  icon = LeadingVisual;
89
90
  }
90
91
  } else {
91
- icon = size === "small" ? smallIcons[variant] : icons[variant];
92
+ if (variant) {
93
+ icon = size === "small" ? smallIcons[variant] : icons[variant];
94
+ } else {
95
+ let t2;
96
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
97
+ t2 = /*#__PURE__*/jsx(InfoIcon, {
98
+ className: classes.InlineMessageIcon
99
+ });
100
+ $[9] = t2;
101
+ } else {
102
+ t2 = $[9];
103
+ }
104
+ icon = t2;
105
+ }
92
106
  }
93
107
  let t2;
94
- if ($[9] !== className) {
108
+ if ($[10] !== className) {
95
109
  t2 = clsx(className, classes.InlineMessage);
96
- $[9] = className;
97
- $[10] = t2;
110
+ $[10] = className;
111
+ $[11] = t2;
98
112
  } else {
99
- t2 = $[10];
113
+ t2 = $[11];
100
114
  }
101
- let t3;
102
- if ($[11] !== children || $[12] !== icon || $[13] !== rest || $[14] !== size || $[15] !== t2 || $[16] !== variant) {
103
- t3 = /*#__PURE__*/jsxs("div", {
115
+ const t3 = (_variant = variant) !== null && _variant !== void 0 ? _variant : undefined;
116
+ let t4;
117
+ if ($[12] !== children || $[13] !== icon || $[14] !== rest || $[15] !== size || $[16] !== t2 || $[17] !== t3) {
118
+ t4 = /*#__PURE__*/jsxs("div", {
104
119
  ...rest,
105
120
  className: t2,
106
121
  "data-size": size,
107
- "data-variant": variant,
122
+ "data-variant": t3,
108
123
  "data-component": "InlineMessage",
109
124
  children: [icon, children]
110
125
  });
111
- $[11] = children;
112
- $[12] = icon;
113
- $[13] = rest;
114
- $[14] = size;
115
- $[15] = t2;
116
- $[16] = variant;
126
+ $[12] = children;
127
+ $[13] = icon;
128
+ $[14] = rest;
129
+ $[15] = size;
130
+ $[16] = t2;
117
131
  $[17] = t3;
132
+ $[18] = t4;
118
133
  } else {
119
- t3 = $[17];
134
+ t4 = $[18];
120
135
  }
121
- return t3;
136
+ return t4;
122
137
  }
123
138
 
124
139
  export { InlineMessage };
@@ -1,4 +1,4 @@
1
- import './InlineMessage-80d97643.css';
1
+ import './InlineMessage-cd1e4c93.css';
2
2
 
3
3
  var classes = {"InlineMessage":"prc-InlineMessage-InlineMessage-8xfK-","InlineMessageIcon":"prc-InlineMessage-InlineMessageIcon-rl8pZ"};
4
4
 
@@ -0,0 +1,2 @@
1
+ .prc-Timeline-Timeline-awSoC{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child) .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child):where([data-condensed]):before{top:var(--base-size-12,.75rem)}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child):where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:last-child):where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-4,.25rem) + var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-TimelineItemAvatar-4zO8f{left:calc((var(--base-size-40,2.5rem) + var(--base-size-32,2rem))*-1);position:absolute;top:calc(var(--base-size-16,1rem) + var(--base-size-16,1rem));transform:translateY(-50%);z-index:1}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}.prc-Timeline-TimelineItemActions-56Y7h{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;gap:var(--base-size-8,.5rem);margin-left:auto;min-height:var(--base-size-32,2rem)}
2
+ /*# sourceMappingURL=Timeline-ff81db92.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAAsB,CACtB,eAAgB,CAEhB,QAAS,CADT,SAkCF,CA7BI,6KACE,aAeF,CAbE,yNAEE,4BACF,CAEA,iNACE,8BACF,CAEA,iPAEE,6DACF,CAMF,0KACE,gBAKF,CAHE,8MACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAuCF,CAlCE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAoBF,CAjBE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAEA,gGAEE,yFACF,CAIJ,uCAGE,qEAA4D,CAF5D,iBAAkB,CAIlB,6DAAoD,CAEpD,0BAA2B,CAD3B,SAEF,CAEA,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF,CAGF,wCAEE,kBAAmB,CACnB,qBAAsB,CAFtB,YAAa,CAOb,aAAc,CADd,4BAAuB,CADvB,gBAAiB,CADjB,mCAIF","file":"Timeline-ff81db92.css","sourcesContent":[".Timeline {\n display: flex;\n flex-direction: column;\n list-style: none;\n padding: 0;\n margin: 0;\n\n &:where([data-clip-sidebar='start']),\n &:where([data-clip-sidebar='both']) {\n .TimelineItem:first-child {\n padding-top: 0;\n\n .TimelineItemAvatar {\n /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */\n top: var(--base-size-16);\n }\n\n &:where([data-condensed])::before {\n top: var(--base-size-12);\n }\n\n &:where([data-condensed]) .TimelineItemAvatar {\n /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */\n top: calc(var(--base-size-8) + var(--base-size-8));\n }\n }\n }\n\n &:where([data-clip-sidebar='end']),\n &:where([data-clip-sidebar='both']) {\n .TimelineItem:last-child {\n padding-bottom: 0;\n\n &:where([data-condensed])::before {\n height: var(--base-size-12);\n }\n }\n }\n}\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--base-size-16) 0;\n margin-left: var(--base-size-16);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: 2px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-muted);\n }\n\n &:where([data-condensed]) {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n &:last-child {\n padding-bottom: var(--base-size-16);\n }\n\n .TimelineBadge {\n height: 16px;\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n\n .TimelineItemAvatar {\n /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */\n top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));\n }\n }\n}\n\n.TimelineItemAvatar {\n position: absolute;\n /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */\n left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));\n /* Vertically center against the default badge (16px padding-top + 16px half-badge) */\n top: calc(var(--base-size-16) + var(--base-size-16));\n z-index: 1;\n transform: translateY(-50%);\n}\n\n.TimelineBadgeWrapper {\n position: relative;\n z-index: 1;\n}\n\n.TimelineBadge {\n display: flex;\n width: 32px;\n height: 32px;\n margin-right: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -15px;\n flex-shrink: 0;\n overflow: hidden;\n color: var(--fgColor-muted);\n\n /* TODOl not quite sure if this is the correct migration for this line */\n background-color: var(--timelineBadge-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border-color: var(--bgColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thick);\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n\n &:where([data-variant]) {\n color: var(--fgColor-onEmphasis);\n }\n\n &:where([data-variant='accent']) {\n background-color: var(--bgColor-accent-emphasis);\n }\n\n &:where([data-variant='success']) {\n background-color: var(--bgColor-success-emphasis);\n }\n\n &:where([data-variant='attention']) {\n background-color: var(--bgColor-attention-emphasis);\n }\n\n &:where([data-variant='severe']) {\n background-color: var(--bgColor-severe-emphasis);\n }\n\n &:where([data-variant='danger']) {\n background-color: var(--bgColor-danger-emphasis);\n }\n\n &:where([data-variant='done']) {\n background-color: var(--bgColor-done-emphasis);\n }\n\n &:where([data-variant='open']) {\n background-color: var(--bgColor-open-emphasis);\n }\n\n &:where([data-variant='closed']) {\n background-color: var(--bgColor-closed-emphasis);\n }\n\n &:where([data-variant='sponsors']) {\n background-color: var(--bgColor-sponsors-emphasis);\n }\n}\n\n.TimelineBody {\n min-width: 0;\n max-width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--base-size-4) + 1px);\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineBreak {\n position: relative;\n z-index: 1;\n height: var(--base-size-24);\n margin: 0;\n margin-bottom: calc(-1 * var(--base-size-16));\n margin-left: 0;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-condensed]) {\n margin-bottom: calc(-1 * var(--base-size-12));\n }\n}\n\n.TimelineItemActions {\n display: flex;\n align-items: center;\n align-self: flex-start;\n /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */\n min-height: var(--base-size-32);\n margin-left: auto;\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n"]}
@@ -3,7 +3,7 @@ type StyledTimelineProps = {
3
3
  clipSidebar?: boolean | 'start' | 'end' | 'both';
4
4
  className?: string;
5
5
  };
6
- export type TimelineProps = StyledTimelineProps & React.ComponentPropsWithoutRef<'div'>;
6
+ export type TimelineProps = StyledTimelineProps & Omit<React.ComponentPropsWithoutRef<'ol'>, 'role'>;
7
7
  type StyledTimelineItemProps = {
8
8
  condensed?: boolean;
9
9
  className?: string;
@@ -11,8 +11,8 @@ type StyledTimelineItemProps = {
11
11
  /**
12
12
  * @deprecated Use the `TimelineItemProps` type instead
13
13
  */
14
- export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
15
- export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
14
+ export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'li'>;
15
+ export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'li'>;
16
16
  export declare const TimelineBadgeVariants: readonly ["accent", "success", "attention", "severe", "danger", "done", "open", "closed", "sponsors"];
17
17
  export type TimelineBadgeVariant = (typeof TimelineBadgeVariants)[number];
18
18
  export type TimelineBadgeProps = {
@@ -28,7 +28,7 @@ export type TimelineBodyProps = {
28
28
  export type TimelineBreakProps = {
29
29
  /** Class name for custom styling */
30
30
  className?: string;
31
- } & React.ComponentPropsWithoutRef<'div'>;
31
+ } & Omit<React.ComponentPropsWithoutRef<'li'>, 'role'>;
32
32
  export type TimelineActionsProps = {
33
33
  /** Class name for custom styling */
34
34
  className?: string;
@@ -37,8 +37,8 @@ export type TimelineAvatarProps = {
37
37
  /** Class name for custom styling */
38
38
  className?: string;
39
39
  } & React.ComponentPropsWithoutRef<'div'>;
40
- declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
41
- Item: React.ForwardRefExoticComponent<StyledTimelineItemProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
40
+ declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Omit<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref">, "role"> & React.RefAttributes<HTMLDivElement | HTMLOListElement>> & {
41
+ Item: React.ForwardRefExoticComponent<StyledTimelineItemProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
42
42
  Avatar: React.ForwardRefExoticComponent<{
43
43
  /** Class name for custom styling */
44
44
  className?: string;
@@ -54,7 +54,7 @@ declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Om
54
54
  Break: React.ForwardRefExoticComponent<{
55
55
  /** Class name for custom styling */
56
56
  className?: string;
57
- } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
57
+ } & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "role"> & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
58
58
  Actions: React.ForwardRefExoticComponent<{
59
59
  /** Class name for custom styling */
60
60
  className?: string;
@@ -1 +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,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"}
1
+ {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,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,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAA;AAyCpG,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,IAAI,CAAC,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AA8B9F,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,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAA;AA6BtD,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;;;2CAlEmC,kBAAkB;;;;QAWvE,oCAAoC;oBACxB,MAAM;;;QAUlB,oCAAoC;oBACxB,MAAM;;;QA+BlB,oCAAoC;oBACxB,MAAM;;;AAoBpB,wBAOE"}
@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
3
3
  import React from 'react';
4
4
  import classes from './Timeline.module.css.js';
5
5
  import { jsx } from 'react/jsx-runtime';
6
+ import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
6
7
 
7
8
  function resolveClipSidebar(clipSidebar) {
8
9
  if (clipSidebar === true || clipSidebar === 'both') return 'both';
@@ -10,7 +11,7 @@ function resolveClipSidebar(clipSidebar) {
10
11
  return undefined;
11
12
  }
12
13
  const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
13
- const $ = c(13);
14
+ const $ = c(20);
14
15
  let className;
15
16
  let clipSidebar;
16
17
  let props;
@@ -29,6 +30,7 @@ const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
29
30
  clipSidebar = $[2];
30
31
  props = $[3];
31
32
  }
33
+ const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
32
34
  let t1;
33
35
  if ($[4] !== clipSidebar) {
34
36
  t1 = resolveClipSidebar(clipSidebar);
@@ -38,31 +40,62 @@ const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
38
40
  t1 = $[5];
39
41
  }
40
42
  const resolvedClipSidebar = t1;
41
- let t2;
42
- if ($[6] !== className) {
43
- t2 = clsx(className, classes.Timeline);
44
- $[6] = className;
45
- $[7] = t2;
46
- } else {
47
- t2 = $[7];
43
+ if (useListSemantics) {
44
+ let t2;
45
+ if ($[6] !== className) {
46
+ t2 = clsx(className, classes.Timeline);
47
+ $[6] = className;
48
+ $[7] = t2;
49
+ } else {
50
+ t2 = $[7];
51
+ }
52
+ const t3 = forwardRef;
53
+ let t4;
54
+ if ($[8] !== props || $[9] !== resolvedClipSidebar || $[10] !== t2 || $[11] !== t3) {
55
+ t4 = /*#__PURE__*/jsx("ol", {
56
+ ...props,
57
+ role: "list",
58
+ className: t2,
59
+ ref: t3,
60
+ "data-clip-sidebar": resolvedClipSidebar
61
+ });
62
+ $[8] = props;
63
+ $[9] = resolvedClipSidebar;
64
+ $[10] = t2;
65
+ $[11] = t3;
66
+ $[12] = t4;
67
+ } else {
68
+ t4 = $[12];
69
+ }
70
+ return t4;
48
71
  }
72
+ const t2 = props;
49
73
  let t3;
50
- if ($[8] !== forwardRef || $[9] !== props || $[10] !== resolvedClipSidebar || $[11] !== t2) {
51
- t3 = /*#__PURE__*/jsx("div", {
52
- ...props,
53
- className: t2,
54
- ref: forwardRef,
74
+ if ($[13] !== className) {
75
+ t3 = clsx(className, classes.Timeline);
76
+ $[13] = className;
77
+ $[14] = t3;
78
+ } else {
79
+ t3 = $[14];
80
+ }
81
+ const t4 = forwardRef;
82
+ let t5;
83
+ if ($[15] !== resolvedClipSidebar || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
84
+ t5 = /*#__PURE__*/jsx("div", {
85
+ ...t2,
86
+ className: t3,
87
+ ref: t4,
55
88
  "data-clip-sidebar": resolvedClipSidebar
56
89
  });
57
- $[8] = forwardRef;
58
- $[9] = props;
59
- $[10] = resolvedClipSidebar;
60
- $[11] = t2;
61
- $[12] = t3;
90
+ $[15] = resolvedClipSidebar;
91
+ $[16] = t2;
92
+ $[17] = t3;
93
+ $[18] = t4;
94
+ $[19] = t5;
62
95
  } else {
63
- t3 = $[12];
96
+ t5 = $[19];
64
97
  }
65
- return t3;
98
+ return t5;
66
99
  });
67
100
  Timeline.displayName = 'Timeline';
68
101
 
@@ -71,7 +104,7 @@ Timeline.displayName = 'Timeline';
71
104
  */
72
105
 
73
106
  const TimelineItem = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
74
- const $ = c(11);
107
+ const $ = c(18);
75
108
  let className;
76
109
  let condensed;
77
110
  let props;
@@ -90,32 +123,64 @@ const TimelineItem = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
90
123
  condensed = $[2];
91
124
  props = $[3];
92
125
  }
93
- let t1;
94
- if ($[4] !== className) {
95
- t1 = clsx(className, "Timeline-Item", classes.TimelineItem);
96
- $[4] = className;
97
- $[5] = t1;
126
+ const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
127
+ if (useListSemantics) {
128
+ let t1;
129
+ if ($[4] !== className) {
130
+ t1 = clsx(className, "Timeline-Item", classes.TimelineItem);
131
+ $[4] = className;
132
+ $[5] = t1;
133
+ } else {
134
+ t1 = $[5];
135
+ }
136
+ const t2 = forwardRef;
137
+ const t3 = condensed ? "" : undefined;
138
+ let t4;
139
+ if ($[6] !== props || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
140
+ t4 = /*#__PURE__*/jsx("li", {
141
+ ...props,
142
+ className: t1,
143
+ ref: t2,
144
+ "data-condensed": t3
145
+ });
146
+ $[6] = props;
147
+ $[7] = t1;
148
+ $[8] = t2;
149
+ $[9] = t3;
150
+ $[10] = t4;
151
+ } else {
152
+ t4 = $[10];
153
+ }
154
+ return t4;
155
+ }
156
+ const t1 = props;
157
+ let t2;
158
+ if ($[11] !== className) {
159
+ t2 = clsx(className, "Timeline-Item", classes.TimelineItem);
160
+ $[11] = className;
161
+ $[12] = t2;
98
162
  } else {
99
- t1 = $[5];
163
+ t2 = $[12];
100
164
  }
101
- const t2 = condensed ? "" : undefined;
102
- let t3;
103
- if ($[6] !== forwardRef || $[7] !== props || $[8] !== t1 || $[9] !== t2) {
104
- t3 = /*#__PURE__*/jsx("div", {
105
- ...props,
106
- className: t1,
107
- ref: forwardRef,
108
- "data-condensed": t2
165
+ const t3 = forwardRef;
166
+ const t4 = condensed ? "" : undefined;
167
+ let t5;
168
+ if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
169
+ t5 = /*#__PURE__*/jsx("div", {
170
+ ...t1,
171
+ className: t2,
172
+ ref: t3,
173
+ "data-condensed": t4
109
174
  });
110
- $[6] = forwardRef;
111
- $[7] = props;
112
- $[8] = t1;
113
- $[9] = t2;
114
- $[10] = t3;
175
+ $[13] = t1;
176
+ $[14] = t2;
177
+ $[15] = t3;
178
+ $[16] = t4;
179
+ $[17] = t5;
115
180
  } else {
116
- t3 = $[10];
181
+ t5 = $[17];
117
182
  }
118
- return t3;
183
+ return t5;
119
184
  });
120
185
  TimelineItem.displayName = 'TimelineItem';
121
186
  const TimelineBadge = t0 => {
@@ -208,7 +273,7 @@ const TimelineBody = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
208
273
  });
209
274
  TimelineBody.displayName = 'TimelineBody';
210
275
  const TimelineBreak = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
211
- const $ = c(9);
276
+ const $ = c(15);
212
277
  let className;
213
278
  let props;
214
279
  if ($[0] !== t0) {
@@ -223,29 +288,59 @@ const TimelineBreak = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
223
288
  className = $[1];
224
289
  props = $[2];
225
290
  }
226
- let t1;
227
- if ($[3] !== className) {
228
- t1 = clsx(className, classes.TimelineBreak);
229
- $[3] = className;
230
- $[4] = t1;
231
- } else {
232
- t1 = $[4];
291
+ const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
292
+ if (useListSemantics) {
293
+ let t1;
294
+ if ($[3] !== className) {
295
+ t1 = clsx(className, classes.TimelineBreak);
296
+ $[3] = className;
297
+ $[4] = t1;
298
+ } else {
299
+ t1 = $[4];
300
+ }
301
+ const t2 = forwardRef;
302
+ let t3;
303
+ if ($[5] !== props || $[6] !== t1 || $[7] !== t2) {
304
+ t3 = /*#__PURE__*/jsx("li", {
305
+ ...props,
306
+ className: t1,
307
+ ref: t2,
308
+ role: "presentation"
309
+ });
310
+ $[5] = props;
311
+ $[6] = t1;
312
+ $[7] = t2;
313
+ $[8] = t3;
314
+ } else {
315
+ t3 = $[8];
316
+ }
317
+ return t3;
233
318
  }
319
+ const t1 = props;
234
320
  let t2;
235
- if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
236
- t2 = /*#__PURE__*/jsx("div", {
237
- ...props,
238
- className: t1,
239
- ref: forwardRef
321
+ if ($[9] !== className) {
322
+ t2 = clsx(className, classes.TimelineBreak);
323
+ $[9] = className;
324
+ $[10] = t2;
325
+ } else {
326
+ t2 = $[10];
327
+ }
328
+ const t3 = forwardRef;
329
+ let t4;
330
+ if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
331
+ t4 = /*#__PURE__*/jsx("div", {
332
+ ...t1,
333
+ className: t2,
334
+ ref: t3
240
335
  });
241
- $[5] = forwardRef;
242
- $[6] = props;
243
- $[7] = t1;
244
- $[8] = t2;
336
+ $[11] = t1;
337
+ $[12] = t2;
338
+ $[13] = t3;
339
+ $[14] = t4;
245
340
  } else {
246
- t2 = $[8];
341
+ t4 = $[14];
247
342
  }
248
- return t2;
343
+ return t4;
249
344
  });
250
345
  TimelineBreak.displayName = 'TimelineBreak';
251
346
  const TimelineActions = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
@@ -1,4 +1,4 @@
1
- import './Timeline-0c88f21b.css';
1
+ import './Timeline-ff81db92.css';
2
2
 
3
3
  var classes = {"Timeline":"prc-Timeline-Timeline-awSoC","TimelineItem":"prc-Timeline-TimelineItem-QwDVH","TimelineItemAvatar":"prc-Timeline-TimelineItemAvatar-4zO8f","TimelineBadge":"prc-Timeline-TimelineBadge-u0qSm","TimelineBadgeWrapper":"prc-Timeline-TimelineBadgeWrapper-SZw4k","TimelineBody":"prc-Timeline-TimelineBody-tjOtb","TimelineBreak":"prc-Timeline-TimelineBreak-X8eti","TimelineItemActions":"prc-Timeline-TimelineItemActions-56Y7h"};
4
4
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.27.0-rc.bfb2839ed",
4
+ "version": "38.28.0-rc.1c2334f8e",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -1,2 +0,0 @@
1
- .prc-InlineMessage-InlineMessage-8xfK-{align-items:start;color:var(--inline-message-fgColor);column-gap:.5rem;display:grid;font-size:var(--inline-message-fontSize);grid-template-columns:auto 1fr;line-height:var(--inline-message-lineHeight)}.prc-InlineMessage-InlineMessage-8xfK-[data-size=small]{--inline-message-fontSize:var(--text-body-size-small,0.75rem);--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666)}.prc-InlineMessage-InlineMessage-8xfK-[data-size=medium]{--inline-message-fontSize:var(--text-body-size-medium,0.875rem);--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=warning]{--inline-message-fgColor:var(--fgColor-attention,#9a6700)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=critical]{--inline-message-fgColor:var(--fgColor-danger,#d1242f)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=success]{--inline-message-fgColor:var(--fgColor-success,#1a7f37)}.prc-InlineMessage-InlineMessage-8xfK-[data-variant=unavailable]{--inline-message-fgColor:var(--fgColor-muted,#59636e)}.prc-InlineMessage-InlineMessageIcon-rl8pZ{min-height:calc(var(--inline-message-lineHeight)*var(--inline-message-fontSize))}
2
- /*# sourceMappingURL=InlineMessage-80d97643.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/InlineMessage/InlineMessage.module.css.js"],"names":[],"mappings":"AAAA,uCAUE,iBAAkB,CAHlB,mCAAoC,CACpC,gBAAkB,CAPlB,YAAa,CAEb,wCAAyC,CAMzC,8BAA+B,CAJ/B,4CAgCF,CAzBE,wDACE,6DAAsD,CACtD,oEACF,CAEA,yDACE,+DAAuD,CACvD,qEACF,CAEA,6DACE,yDACF,CAEA,8DACE,sDACF,CAEA,6DACE,uDACF,CAEA,iEACE,qDACF,CAGF,2CACE,gFACF","file":"InlineMessage-80d97643.css","sourcesContent":[".InlineMessage {\n display: grid;\n /* stylelint-disable-next-line primer/typography */\n font-size: var(--inline-message-fontSize);\n /* stylelint-disable-next-line primer/typography */\n line-height: var(--inline-message-lineHeight);\n /* stylelint-disable-next-line primer/colors */\n color: var(--inline-message-fgColor);\n column-gap: 0.5rem;\n grid-template-columns: auto 1fr;\n align-items: start;\n\n &[data-size='small'] {\n --inline-message-fontSize: var(--text-body-size-small);\n --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);\n }\n\n &[data-size='medium'] {\n --inline-message-fontSize: var(--text-body-size-medium);\n --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);\n }\n\n &[data-variant='warning'] {\n --inline-message-fgColor: var(--fgColor-attention);\n }\n\n &[data-variant='critical'] {\n --inline-message-fgColor: var(--fgColor-danger);\n }\n\n &[data-variant='success'] {\n --inline-message-fgColor: var(--fgColor-success);\n }\n\n &[data-variant='unavailable'] {\n --inline-message-fgColor: var(--fgColor-muted);\n }\n}\n\n.InlineMessageIcon {\n min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));\n}\n"]}
@@ -1,2 +0,0 @@
1
- .prc-Timeline-Timeline-awSoC{display:flex;flex-direction:column}:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child) .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child):where([data-condensed]):before{top:var(--base-size-12,.75rem)}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child):where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:last-child):where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-4,.25rem) + var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-TimelineItemAvatar-4zO8f{left:calc((var(--base-size-40,2.5rem) + var(--base-size-32,2rem))*-1);position:absolute;top:calc(var(--base-size-16,1rem) + var(--base-size-16,1rem));transform:translateY(-50%);z-index:1}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}.prc-Timeline-TimelineItemActions-56Y7h{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;gap:var(--base-size-8,.5rem);margin-left:auto;min-height:var(--base-size-32,2rem)}
2
- /*# sourceMappingURL=Timeline-0c88f21b.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAiCF,CA7BI,6KACE,aAeF,CAbE,yNAEE,4BACF,CAEA,iNACE,8BACF,CAEA,iPAEE,6DACF,CAMF,0KACE,gBAKF,CAHE,8MACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAuCF,CAlCE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAoBF,CAjBE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAEA,gGAEE,yFACF,CAIJ,uCAGE,qEAA4D,CAF5D,iBAAkB,CAIlB,6DAAoD,CAEpD,0BAA2B,CAD3B,SAEF,CAEA,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF,CAGF,wCAEE,kBAAmB,CACnB,qBAAsB,CAFtB,YAAa,CAOb,aAAc,CADd,4BAAuB,CADvB,gBAAiB,CADjB,mCAIF","file":"Timeline-0c88f21b.css","sourcesContent":[".Timeline {\n display: flex;\n flex-direction: column;\n\n &:where([data-clip-sidebar='start']),\n &:where([data-clip-sidebar='both']) {\n .TimelineItem:first-child {\n padding-top: 0;\n\n .TimelineItemAvatar {\n /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */\n top: var(--base-size-16);\n }\n\n &:where([data-condensed])::before {\n top: var(--base-size-12);\n }\n\n &:where([data-condensed]) .TimelineItemAvatar {\n /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */\n top: calc(var(--base-size-8) + var(--base-size-8));\n }\n }\n }\n\n &:where([data-clip-sidebar='end']),\n &:where([data-clip-sidebar='both']) {\n .TimelineItem:last-child {\n padding-bottom: 0;\n\n &:where([data-condensed])::before {\n height: var(--base-size-12);\n }\n }\n }\n}\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--base-size-16) 0;\n margin-left: var(--base-size-16);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: 2px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-muted);\n }\n\n &:where([data-condensed]) {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n &:last-child {\n padding-bottom: var(--base-size-16);\n }\n\n .TimelineBadge {\n height: 16px;\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n\n .TimelineItemAvatar {\n /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */\n top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));\n }\n }\n}\n\n.TimelineItemAvatar {\n position: absolute;\n /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */\n left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));\n /* Vertically center against the default badge (16px padding-top + 16px half-badge) */\n top: calc(var(--base-size-16) + var(--base-size-16));\n z-index: 1;\n transform: translateY(-50%);\n}\n\n.TimelineBadgeWrapper {\n position: relative;\n z-index: 1;\n}\n\n.TimelineBadge {\n display: flex;\n width: 32px;\n height: 32px;\n margin-right: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -15px;\n flex-shrink: 0;\n overflow: hidden;\n color: var(--fgColor-muted);\n\n /* TODOl not quite sure if this is the correct migration for this line */\n background-color: var(--timelineBadge-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border-color: var(--bgColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thick);\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n\n &:where([data-variant]) {\n color: var(--fgColor-onEmphasis);\n }\n\n &:where([data-variant='accent']) {\n background-color: var(--bgColor-accent-emphasis);\n }\n\n &:where([data-variant='success']) {\n background-color: var(--bgColor-success-emphasis);\n }\n\n &:where([data-variant='attention']) {\n background-color: var(--bgColor-attention-emphasis);\n }\n\n &:where([data-variant='severe']) {\n background-color: var(--bgColor-severe-emphasis);\n }\n\n &:where([data-variant='danger']) {\n background-color: var(--bgColor-danger-emphasis);\n }\n\n &:where([data-variant='done']) {\n background-color: var(--bgColor-done-emphasis);\n }\n\n &:where([data-variant='open']) {\n background-color: var(--bgColor-open-emphasis);\n }\n\n &:where([data-variant='closed']) {\n background-color: var(--bgColor-closed-emphasis);\n }\n\n &:where([data-variant='sponsors']) {\n background-color: var(--bgColor-sponsors-emphasis);\n }\n}\n\n.TimelineBody {\n min-width: 0;\n max-width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--base-size-4) + 1px);\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineBreak {\n position: relative;\n z-index: 1;\n height: var(--base-size-24);\n margin: 0;\n margin-bottom: calc(-1 * var(--base-size-16));\n margin-left: 0;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-condensed]) {\n margin-bottom: calc(-1 * var(--base-size-12));\n }\n}\n\n.TimelineItemActions {\n display: flex;\n align-items: center;\n align-self: flex-start;\n /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */\n min-height: var(--base-size-32);\n margin-left: auto;\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n"]}