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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @primer/react
 
+## 38.28.0
+
+### Minor Changes
+
+- [#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
+
+### Patch Changes
+
+- [#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
+
+  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.
+
+  Enable the flag with the `FeatureFlags` provider:
+
+  ```tsx
+  import {FeatureFlags} from '@primer/react/experimental'
+
+  ;<FeatureFlags flags={{primer_react_timeline_list_semantics: true}}>
+    <Timeline>…</Timeline>
+  </FeatureFlags>
+  ```
+
 ## 38.27.0
 
 ### Minor Changes

package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map

@@ -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"}
+{"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"}

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -5,7 +5,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,
   primer_react_styled_react_use_primer_theme_providers: false,
-  primer_react_action_list_group_heading_trailing_action: false
+  primer_react_action_list_group_heading_trailing_action: false,
+  primer_react_timeline_list_semantics: false
 });
 
 export { DefaultFeatureFlags };

package/dist/InlineMessage/InlineMessage-cd1e4c93.css

@@ -0,0 +1,2 @@
+.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))}
+/*# sourceMappingURL=InlineMessage-cd1e4c93.css.map */

package/dist/InlineMessage/InlineMessage-cd1e4c93.css.map

@@ -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,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"]}

package/dist/InlineMessage/InlineMessage.d.ts

@@ -8,7 +8,7 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Specify the type of the InlineMessage
      */
-    variant: MessageVariant;
+    variant?: MessageVariant;
     /**
      * A custom leading visual (icon or other element) to display instead of the default variant icon.
      */

package/dist/InlineMessage/InlineMessage.d.ts.map

@@ -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"}
+{"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"}

package/dist/InlineMessage/InlineMessage.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import { AlertIcon, CheckCircleIcon, AlertFillIcon, CheckCircleFillIcon } from '@primer/octicons-react';
+import { AlertIcon, CheckCircleIcon, AlertFillIcon, CheckCircleFillIcon, InfoIcon } from '@primer/octicons-react';
 import { clsx } from 'clsx';
 import { isValidElementType } from 'react-is';
 import classes from './InlineMessage.module.css.js';
@@ -38,7 +38,8 @@ const smallIcons = {
   })
 };
 function InlineMessage(t0) {
-  const $ = c(18);
+  var _variant;
+  const $ = c(19);
   let LeadingVisual;
   let children;
   let className;
@@ -88,37 +89,51 @@ function InlineMessage(t0) {
       icon = LeadingVisual;
     }
   } else {
-    icon = size === "small" ? smallIcons[variant] : icons[variant];
+    if (variant) {
+      icon = size === "small" ? smallIcons[variant] : icons[variant];
+    } else {
+      let t2;
+      if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/jsx(InfoIcon, {
+          className: classes.InlineMessageIcon
+        });
+        $[9] = t2;
+      } else {
+        t2 = $[9];
+      }
+      icon = t2;
+    }
   }
   let t2;
-  if ($[9] !== className) {
+  if ($[10] !== className) {
     t2 = clsx(className, classes.InlineMessage);
-    $[9] = className;
-    $[10] = t2;
+    $[10] = className;
+    $[11] = t2;
   } else {
-    t2 = $[10];
+    t2 = $[11];
   }
-  let t3;
-  if ($[11] !== children || $[12] !== icon || $[13] !== rest || $[14] !== size || $[15] !== t2 || $[16] !== variant) {
-    t3 = /*#__PURE__*/jsxs("div", {
+  const t3 = (_variant = variant) !== null && _variant !== void 0 ? _variant : undefined;
+  let t4;
+  if ($[12] !== children || $[13] !== icon || $[14] !== rest || $[15] !== size || $[16] !== t2 || $[17] !== t3) {
+    t4 = /*#__PURE__*/jsxs("div", {
       ...rest,
       className: t2,
       "data-size": size,
-      "data-variant": variant,
+      "data-variant": t3,
       "data-component": "InlineMessage",
       children: [icon, children]
     });
-    $[11] = children;
-    $[12] = icon;
-    $[13] = rest;
-    $[14] = size;
-    $[15] = t2;
-    $[16] = variant;
+    $[12] = children;
+    $[13] = icon;
+    $[14] = rest;
+    $[15] = size;
+    $[16] = t2;
     $[17] = t3;
+    $[18] = t4;
   } else {
-    t3 = $[17];
+    t4 = $[18];
   }
-  return t3;
+  return t4;
 }
 
 export { InlineMessage };

package/dist/InlineMessage/InlineMessage.module.css.js

@@ -1,4 +1,4 @@
-import './InlineMessage-80d97643.css';
+import './InlineMessage-cd1e4c93.css';
 
 var classes = {"InlineMessage":"prc-InlineMessage-InlineMessage-8xfK-","InlineMessageIcon":"prc-InlineMessage-InlineMessageIcon-rl8pZ"};
 

package/dist/Timeline/Timeline-ff81db92.css

@@ -0,0 +1,2 @@
+.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)}
+/*# sourceMappingURL=Timeline-ff81db92.css.map */

package/dist/Timeline/Timeline-ff81db92.css.map

@@ -0,0 +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"]}

package/dist/Timeline/Timeline.d.ts

@@ -3,7 +3,7 @@ type StyledTimelineProps = {
     clipSidebar?: boolean | 'start' | 'end' | 'both';
     className?: string;
 };
-export type TimelineProps = StyledTimelineProps & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineProps = StyledTimelineProps & Omit<React.ComponentPropsWithoutRef<'ol'>, 'role'>;
 type StyledTimelineItemProps = {
     condensed?: boolean;
     className?: string;
@@ -11,8 +11,8 @@ type StyledTimelineItemProps = {
 /**
  * @deprecated Use the `TimelineItemProps` type instead
  */
-export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
-export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'li'>;
+export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'li'>;
 export declare const TimelineBadgeVariants: readonly ["accent", "success", "attention", "severe", "danger", "done", "open", "closed", "sponsors"];
 export type TimelineBadgeVariant = (typeof TimelineBadgeVariants)[number];
 export type TimelineBadgeProps = {
@@ -28,7 +28,7 @@ export type TimelineBodyProps = {
 export type TimelineBreakProps = {
     /** Class name for custom styling */
     className?: string;
-} & React.ComponentPropsWithoutRef<'div'>;
+} & Omit<React.ComponentPropsWithoutRef<'li'>, 'role'>;
 export type TimelineActionsProps = {
     /** Class name for custom styling */
     className?: string;
@@ -37,8 +37,8 @@ export type TimelineAvatarProps = {
     /** Class name for custom styling */
     className?: string;
 } & React.ComponentPropsWithoutRef<'div'>;
-declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
-    Item: React.ForwardRefExoticComponent<StyledTimelineItemProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Omit<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref">, "role"> & React.RefAttributes<HTMLDivElement | HTMLOListElement>> & {
+    Item: React.ForwardRefExoticComponent<StyledTimelineItemProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
     Avatar: React.ForwardRefExoticComponent<{
         /** Class name for custom styling */
         className?: string;
@@ -54,7 +54,7 @@ declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Om
     Break: React.ForwardRefExoticComponent<{
         /** Class name for custom styling */
         className?: string;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    } & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "role"> & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
     Actions: React.ForwardRefExoticComponent<{
         /** Class name for custom styling */
         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,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"}
+{"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"}

package/dist/Timeline/Timeline.js

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import classes from './Timeline.module.css.js';
 import { jsx } from 'react/jsx-runtime';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 
 function resolveClipSidebar(clipSidebar) {
   if (clipSidebar === true || clipSidebar === 'both') return 'both';
@@ -10,7 +11,7 @@ function resolveClipSidebar(clipSidebar) {
   return undefined;
 }
 const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(13);
+  const $ = c(20);
   let className;
   let clipSidebar;
   let props;
@@ -29,6 +30,7 @@ const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     clipSidebar = $[2];
     props = $[3];
   }
+  const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
   let t1;
   if ($[4] !== clipSidebar) {
     t1 = resolveClipSidebar(clipSidebar);
@@ -38,31 +40,62 @@ const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     t1 = $[5];
   }
   const resolvedClipSidebar = t1;
-  let t2;
-  if ($[6] !== className) {
-    t2 = clsx(className, classes.Timeline);
-    $[6] = className;
-    $[7] = t2;
-  } else {
-    t2 = $[7];
+  if (useListSemantics) {
+    let t2;
+    if ($[6] !== className) {
+      t2 = clsx(className, classes.Timeline);
+      $[6] = className;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    const t3 = forwardRef;
+    let t4;
+    if ($[8] !== props || $[9] !== resolvedClipSidebar || $[10] !== t2 || $[11] !== t3) {
+      t4 = /*#__PURE__*/jsx("ol", {
+        ...props,
+        role: "list",
+        className: t2,
+        ref: t3,
+        "data-clip-sidebar": resolvedClipSidebar
+      });
+      $[8] = props;
+      $[9] = resolvedClipSidebar;
+      $[10] = t2;
+      $[11] = t3;
+      $[12] = t4;
+    } else {
+      t4 = $[12];
+    }
+    return t4;
   }
+  const t2 = props;
   let t3;
-  if ($[8] !== forwardRef || $[9] !== props || $[10] !== resolvedClipSidebar || $[11] !== t2) {
-    t3 = /*#__PURE__*/jsx("div", {
-      ...props,
-      className: t2,
-      ref: forwardRef,
+  if ($[13] !== className) {
+    t3 = clsx(className, classes.Timeline);
+    $[13] = className;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const t4 = forwardRef;
+  let t5;
+  if ($[15] !== resolvedClipSidebar || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+    t5 = /*#__PURE__*/jsx("div", {
+      ...t2,
+      className: t3,
+      ref: t4,
       "data-clip-sidebar": resolvedClipSidebar
     });
-    $[8] = forwardRef;
-    $[9] = props;
-    $[10] = resolvedClipSidebar;
-    $[11] = t2;
-    $[12] = t3;
+    $[15] = resolvedClipSidebar;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
   } else {
-    t3 = $[12];
+    t5 = $[19];
   }
-  return t3;
+  return t5;
 });
 Timeline.displayName = 'Timeline';
 
@@ -71,7 +104,7 @@ Timeline.displayName = 'Timeline';
  */
 
 const TimelineItem = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(11);
+  const $ = c(18);
   let className;
   let condensed;
   let props;
@@ -90,32 +123,64 @@ const TimelineItem = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     condensed = $[2];
     props = $[3];
   }
-  let t1;
-  if ($[4] !== className) {
-    t1 = clsx(className, "Timeline-Item", classes.TimelineItem);
-    $[4] = className;
-    $[5] = t1;
+  const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
+  if (useListSemantics) {
+    let t1;
+    if ($[4] !== className) {
+      t1 = clsx(className, "Timeline-Item", classes.TimelineItem);
+      $[4] = className;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    const t2 = forwardRef;
+    const t3 = condensed ? "" : undefined;
+    let t4;
+    if ($[6] !== props || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+      t4 = /*#__PURE__*/jsx("li", {
+        ...props,
+        className: t1,
+        ref: t2,
+        "data-condensed": t3
+      });
+      $[6] = props;
+      $[7] = t1;
+      $[8] = t2;
+      $[9] = t3;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    return t4;
+  }
+  const t1 = props;
+  let t2;
+  if ($[11] !== className) {
+    t2 = clsx(className, "Timeline-Item", classes.TimelineItem);
+    $[11] = className;
+    $[12] = t2;
   } else {
-    t1 = $[5];
+    t2 = $[12];
   }
-  const t2 = condensed ? "" : undefined;
-  let t3;
-  if ($[6] !== forwardRef || $[7] !== props || $[8] !== t1 || $[9] !== t2) {
-    t3 = /*#__PURE__*/jsx("div", {
-      ...props,
-      className: t1,
-      ref: forwardRef,
-      "data-condensed": t2
+  const t3 = forwardRef;
+  const t4 = condensed ? "" : undefined;
+  let t5;
+  if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+    t5 = /*#__PURE__*/jsx("div", {
+      ...t1,
+      className: t2,
+      ref: t3,
+      "data-condensed": t4
     });
-    $[6] = forwardRef;
-    $[7] = props;
-    $[8] = t1;
-    $[9] = t2;
-    $[10] = t3;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
   } else {
-    t3 = $[10];
+    t5 = $[17];
   }
-  return t3;
+  return t5;
 });
 TimelineItem.displayName = 'TimelineItem';
 const TimelineBadge = t0 => {
@@ -208,7 +273,7 @@ const TimelineBody = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
 });
 TimelineBody.displayName = 'TimelineBody';
 const TimelineBreak = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(9);
+  const $ = c(15);
   let className;
   let props;
   if ($[0] !== t0) {
@@ -223,29 +288,59 @@ const TimelineBreak = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     className = $[1];
     props = $[2];
   }
-  let t1;
-  if ($[3] !== className) {
-    t1 = clsx(className, classes.TimelineBreak);
-    $[3] = className;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
+  const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
+  if (useListSemantics) {
+    let t1;
+    if ($[3] !== className) {
+      t1 = clsx(className, classes.TimelineBreak);
+      $[3] = className;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    const t2 = forwardRef;
+    let t3;
+    if ($[5] !== props || $[6] !== t1 || $[7] !== t2) {
+      t3 = /*#__PURE__*/jsx("li", {
+        ...props,
+        className: t1,
+        ref: t2,
+        role: "presentation"
+      });
+      $[5] = props;
+      $[6] = t1;
+      $[7] = t2;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    return t3;
   }
+  const t1 = props;
   let t2;
-  if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
-    t2 = /*#__PURE__*/jsx("div", {
-      ...props,
-      className: t1,
-      ref: forwardRef
+  if ($[9] !== className) {
+    t2 = clsx(className, classes.TimelineBreak);
+    $[9] = className;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const t3 = forwardRef;
+  let t4;
+  if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      ...t1,
+      className: t2,
+      ref: t3
     });
-    $[5] = forwardRef;
-    $[6] = props;
-    $[7] = t1;
-    $[8] = t2;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t2 = $[8];
+    t4 = $[14];
   }
-  return t2;
+  return t4;
 });
 TimelineBreak.displayName = 'TimelineBreak';
 const TimelineActions = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {

package/dist/Timeline/Timeline.module.css.js

@@ -1,4 +1,4 @@
-import './Timeline-0c88f21b.css';
+import './Timeline-ff81db92.css';
 
 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"};
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.27.0",
+  "version": "38.28.0-rc.1c2334f8e",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -204,4 +204,4 @@
       "optional": true
     }
   }
-}
+}

package/dist/InlineMessage/InlineMessage-80d97643.css

@@ -1,2 +0,0 @@
-.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))}
-/*# sourceMappingURL=InlineMessage-80d97643.css.map */

package/dist/InlineMessage/InlineMessage-80d97643.css.map

@@ -1 +0,0 @@
-{"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"]}

package/dist/Timeline/Timeline-0c88f21b.css

@@ -1,2 +0,0 @@
-.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)}
-/*# sourceMappingURL=Timeline-0c88f21b.css.map */

package/dist/Timeline/Timeline-0c88f21b.css.map

@@ -1 +0,0 @@
-{"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"]}