primer_view_components 0.51.0 → 0.51.2

data/app/components/primer/beta/relative_time.rb

@@ -95,6 +95,7 @@ module Primer
       # @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
       # @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
       # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
+      # @param time_zone [String] The IANA time zone identifier to use for formatting (e.g., "America/New_York").
       # @param threshold [String] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
       # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
       # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
@@ -116,6 +117,7 @@ module Primer
         month: MONTH_DEFAULT,
         year: YEAR_DEFAULT,
         time_zone_name: TIMEZONENAME_DEFAULT,
+        time_zone: nil,
         threshold: nil,
         precision: PRECISION_DEFAULT,
         format: nil,
@@ -138,6 +140,7 @@ module Primer
         @system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
         @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
         @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
+        @system_arguments[:"time-zone"] = time_zone if time_zone.present?
         @system_arguments[:threshold] = threshold if threshold.present?
         @system_arguments[:precision] = precision if precision.present?
         @system_arguments[:title] = title if title.present?

data/app/components/primer/beta/timeline_item.css

@@ -1 +1 @@
-.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:var(--base-size-4);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}
+.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:calc(var(--base-size-4) + 1px);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}

data/app/components/primer/beta/timeline_item.css.map

@@ -1 +1 @@
-{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAIb,mCAAoC,CAFpC,qCAAsC,CAHtC,iBAyBF,CAjBE,qBASE,yCAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,8BAIF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBAWE,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CALlB,0BAA2B,CAP3B,YAAa,CAcb,aAAc,CAZd,iCAAkC,CAWlC,sBAAuB,CAPvB,qDAAwD,CAFxD,qDAAsD,CANtD,iBAAkB,CAGlB,gCAAiC,CAFjC,SAgBF,CAEA,6BAEE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,mBAIE,0BAA2B,CAC3B,SAAU,CAFV,6BAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAGE,UAAW,CAFX,iBAAkB,CAGlB,SACF,CAEA,oBASE,uCAAwC,CACxC,QAAS,CACT,sEAAuE,CARvE,gCAAiC,CACjC,QAAS,CAET,8CAAiD,CAEjD,iBAAkB,CAPlB,iBAAkB,CAClB,SAUF,CAEA,yBAEE,gBAAiB,CADjB,8BAiBF,CAbE,oCAEE,sCACF,CAEA,6CAKE,uCAAwC,CACxC,QAAS,CAFT,0BAA2B,CAH3B,0BAA2B,CAE3B,gCAAiC,CADjC,6BAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--stack-padding-normal) 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--controlStack-medium-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  /* stylelint-disable-next-line primer/spacing */\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\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"]}
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAIb,mCAAoC,CAFpC,qCAAsC,CAHtC,iBAyBF,CAjBE,qBASE,yCAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,8BAIF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBAWE,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CALlB,0BAA2B,CAP3B,YAAa,CAcb,aAAc,CAZd,iCAAkC,CAWlC,sBAAuB,CAPvB,qDAAwD,CAFxD,qDAAsD,CANtD,iBAAkB,CAGlB,gCAAiC,CAFjC,SAgBF,CAEA,6BAEE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,mBAKE,0BAA2B,CAC3B,SAAU,CAFV,yCAA0C,CAF1C,cAAe,CADf,WAMF,CAEA,qBAGE,UAAW,CAFX,iBAAkB,CAGlB,SACF,CAEA,oBASE,uCAAwC,CACxC,QAAS,CACT,sEAAuE,CARvE,gCAAiC,CACjC,QAAS,CAET,8CAAiD,CAEjD,iBAAkB,CAPlB,iBAAkB,CAClB,SAUF,CAEA,yBAEE,gBAAiB,CADjB,8BAiBF,CAbE,oCAEE,sCACF,CAEA,6CAKE,uCAAwC,CACxC,QAAS,CAFT,0BAA2B,CAH3B,0BAA2B,CAE3B,gCAAiC,CADjC,6BAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--stack-padding-normal) 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--controlStack-medium-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\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  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  /* stylelint-disable-next-line primer/spacing */\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\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"]}

data/app/components/primer/beta/timeline_item.pcss

@@ -57,7 +57,8 @@
 .TimelineItem-body {
   min-width: 0;
   max-width: 100%;
-  margin-top: var(--base-size-4);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: calc(var(--base-size-4) + 1px);
   color: var(--fgColor-muted);
   flex: auto;
 }

data/app/components/primer/dialog_helper.js

@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
+function setScrollGutter(doc) {
+    if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
+        return;
+    doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -20,6 +25,7 @@ function dialogInvokerButtonHandler(event) {
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
+            setScrollGutter(dialog.ownerDocument);
             dialog.showModal();
             // A buttons default behaviour in some browsers it to send a pointer event
             // If the behaviour is allowed through the dialog will be shown but then
@@ -92,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
         const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
         document.addEventListener('click', dialogInvokerButtonHandler, true);
         document.addEventListener('click', this, { signal });
-        this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -132,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
+        setScrollGutter(this.dialog.ownerDocument);
         this.dialog.showModal();
     }
 };

data/app/components/primer/dialog_helper.ts

@@ -1,3 +1,8 @@
+function setScrollGutter(doc: Document) {
+  if (doc.body.style.getPropertyValue('--dialog-scrollgutter')) return
+  doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`)
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -9,6 +14,7 @@ function dialogInvokerButtonHandler(event: Event) {
   if (dialogId) {
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement) {
+      setScrollGutter(dialog.ownerDocument)
       dialog.showModal()
       // A buttons default behaviour in some browsers it to send a pointer event
       // If the behaviour is allowed through the dialog will be shown but then
@@ -85,10 +91,6 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
-    this.ownerDocument.body.style.setProperty(
-      '--dialog-scrollgutter',
-      `${window.innerWidth - this.ownerDocument.body.clientWidth}px`,
-    )
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
@@ -110,6 +112,7 @@ export class DialogHelperElement extends HTMLElement {
       // eslint-disable-next-line no-restricted-syntax
       this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
       this.dialog.close()
+      setScrollGutter(this.dialog.ownerDocument)
       this.dialog.showModal()
     }
   }

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 51
-      PATCH = 0
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_menu_preview.rb

@@ -9,12 +9,14 @@ module Primer
       # @param select_variant [Symbol] select [single, multiple, none]
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param anchor_when_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
       # @param size [Symbol] select [auto, small, medium, large, xlarge]
       def playground(
         select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        anchor_when_narrow: Primer::Alpha::Overlay::DEFAULT_ANCHOR_WHEN_NARROW,
         size: Primer::Alpha::Overlay::DEFAULT_SIZE
       )
-        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, anchor_when_narrow: anchor_when_narrow, size: size)) do |menu|
           menu.with_show_button { "Menu" }
           menu.with_item(label: "Copy link")
           menu.with_item(label: "Quote reply")
@@ -405,6 +407,35 @@ module Primer
       # @label Two menus
       #
       def two_menus; end
+
+      # @label Fullscreen when narrow
+      #
+      def fullscreen_when_narrow
+        render(Primer::Alpha::ActionMenu.new(anchor_when_narrow: :fullscreen)) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Options"
+          end
+
+          menu.with_item(label: "Edit profile") do |item|
+            item.with_description.with_content("Update your profile information")
+          end
+
+          menu.with_item(label: "Settings") do |item|
+            item.with_description.with_content("Configure your preferences")
+          end
+
+          menu.with_item(label: "Notifications") do |item|
+            item.with_description.with_content("Manage notification settings")
+          end
+
+          menu.with_divider
+
+          menu.with_item(label: "Sign out", scheme: :danger) do |item|
+            item.with_description.with_content("Log out of your account")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/beta/truncate_preview/advanced_multiple_items.html.erb

@@ -0,0 +1,32 @@
+<%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
+  <% component.with_item(tag: :li) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-primer")) do |link| %>
+      <% link.with_tooltip(text: "primer") %>
+      primer
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li, priority: true) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-css")) do |link| %>
+      <% link.with_tooltip(text: "/ css") %>
+      / css
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-issues")) do |link| %>
+      <% link.with_tooltip(text: "/ Issues") %>
+      / Issues
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-number")) do |link| %>
+      <% link.with_tooltip(text: "/ #123") %>
+      / #123
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li, priority: true) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-title")) do |link| %>
+      <% link.with_tooltip(text: "Visual bug on primer.style found in lists") %>
+      Visual bug on primer.style found in lists
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/truncate_preview/max_widths.html.erb

@@ -0,0 +1,22 @@
+<% long_text = "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" %>
+
+<%= render(Primer::Beta::Truncate.new) do |component| %>
+  <% component.with_item(max_width: 300) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-300")) do |link| %>
+      <% link.with_tooltip(text: long_text) %>
+      <%= long_text %>
+    <% end %>
+  <% end %>
+  <% component.with_item(max_width: 200) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-200")) do |link| %>
+      <% link.with_tooltip(text: long_text) %>
+      <%= long_text %>
+    <% end %>
+  <% end %>
+  <% component.with_item(max_width: 100) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-100")) do |link| %>
+      <% link.with_tooltip(text: long_text) %>
+      <%= long_text %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/truncate_preview/multiple_items.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::Beta::Truncate.new) do |component| %>
+  <% component.with_item do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-owner")) do |link| %>
+      <% link.with_tooltip(text: "really-long-repository-owner-name") %>
+      really-long-repository-owner-name
+    <% end %>
+  <% end %>
+  <% component.with_item(font_weight: :bold) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-repo")) do |link| %>
+      <% link.with_tooltip(text: "really-long-repository-name") %>
+      really-long-repository-name
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/truncate_preview.rb

@@ -19,37 +19,14 @@ module Primer
       end
 
       # @label Multiple items
-      def multiple_items
-        render(Primer::Beta::Truncate.new) do |component|
-          component.with_item do
-            "really-long-repository-owner-name"
-          end
-          component.with_item(font_weight: :bold) do
-            "really-long-repository-name"
-          end
-        end
-      end
+      def multiple_items; end
 
       # @label Advanced multiple items
-      def advanced_multiple_items
-        render(Primer::Beta::Truncate.new(tag: :ol)) do |component|
-          component.with_item(tag: :li) { "primer" }
-          component.with_item(tag: :li, priority: true) { "/ css" }
-          component.with_item(tag: :li) { "/ Issues" }
-          component.with_item(tag: :li) { "/ #123" }
-          component.with_item(tag: :li, priority: true) { "Visual bug on primer.style found in lists" }
-        end
-      end
+      def advanced_multiple_items; end
 
       # @label Max widths
       # @snapshot
-      def max_widths
-        render(Primer::Beta::Truncate.new) do |component|
-          component.with_item(max_width: 300) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
-          component.with_item(max_width: 200) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
-          component.with_item(max_width: 100) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
-        end
-      end
+      def max_widths; end
     end
   end
 end

data/static/arguments.json

@@ -343,6 +343,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "size",
         "type": "Symbol",
@@ -1910,6 +1916,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",
@@ -3892,7 +3904,14 @@
     "short_name": "AutoCompleteNoResultItem",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-    "parameters": []
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
   },
   {
     "component": "Avatar",
@@ -5015,6 +5034,12 @@
         "default": "`TIMEZONENAME_DEFAULT`",
         "description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
       },
+      {
+        "name": "time_zone",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The IANA time zone identifier to use for formatting (e.g., \"America/New_York\")."
+      },
       {
         "name": "threshold",
         "type": "String",

data/static/classes.json

@@ -423,6 +423,9 @@
   "Overlay--full-whenNarrow": [
     "Primer::Alpha::Dialog"
   ],
+  "Overlay--fullscreen-whenNarrow": [
+    "Primer::Alpha::Dialog"
+  ],
   "Overlay--hidden": [
     "Primer::Alpha::Dialog"
   ],

data/static/constants.json

@@ -579,11 +579,26 @@
       "outside_left",
       "outside_right"
     ],
+    "ANCHOR_WHEN_NARROW_MAPPINGS": {
+      "inherit": "",
+      "bottom": "Overlay--placement-bottom-whenNarrow",
+      "fullscreen": "Overlay--fullscreen-whenNarrow",
+      "left": "Overlay--placement-left-whenNarrow",
+      "right": "Overlay--placement-right-whenNarrow"
+    },
+    "ANCHOR_WHEN_NARROW_OPTIONS": [
+      "inherit",
+      "bottom",
+      "fullscreen",
+      "left",
+      "right"
+    ],
     "Body": "Primer::Alpha::Overlay::Body",
     "DEFAULT_ALIGN_CONTENT": "end",
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_OFFSET": "normal",
     "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "DEFAULT_PADDING": "normal",
     "DEFAULT_POPOVER": "auto",
     "DEFAULT_SIZE": "auto",

data/static/info_arch.json

@@ -1203,6 +1203,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "size",
         "type": "Symbol",
@@ -1763,6 +1769,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
+        "name": "fullscreen_when_narrow",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -5915,6 +5934,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",
@@ -11854,6 +11879,32 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
+        "description": "Use `NoResultItem` to display a message when no autocomplete results are found.\nRenders as a simple div inside the overlay, not as a list item.",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": false,
+        "component": "AutoComplete::NoResultItem",
+        "status": "beta",
+        "a11y_reviewed": false,
+        "short_name": "AutoCompleteNoResultItem",
+        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
+        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ],
+        "slots": [],
+        "methods": [],
+        "previews": [],
+        "subcomponents": []
+      },
       {
         "fully_qualified_name": "Primer::Beta::AutoComplete::Item",
         "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
@@ -11946,62 +11997,6 @@
         "methods": [],
         "previews": [],
         "subcomponents": []
-      },
-      {
-        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
-        "description": "",
-        "accessibility_docs": null,
-        "is_form_component": false,
-        "is_published": true,
-        "requires_js": false,
-        "component": "AutoComplete::NoResultItem",
-        "status": "beta",
-        "a11y_reviewed": false,
-        "short_name": "AutoCompleteNoResultItem",
-        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
-        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-        "parameters": [],
-        "slots": [
-          {
-            "name": "leading_visual",
-            "description": "The leading visual rendered before the link.",
-            "parameters": [
-              {
-                "name": "kwargs",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
-              }
-            ]
-          },
-          {
-            "name": "trailing_visual",
-            "description": "The trailing visual rendered after the link.",
-            "parameters": [
-              {
-                "name": "kwargs",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
-              }
-            ]
-          },
-          {
-            "name": "description",
-            "description": "Optional description",
-            "parameters": [
-              {
-                "name": "system_arguments",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "{{link_to_system_arguments_docs}}"
-              }
-            ]
-          }
-        ],
-        "methods": [],
-        "previews": [],
-        "subcomponents": []
       }
     ]
   },
@@ -16722,6 +16717,12 @@
         "default": "`TIMEZONENAME_DEFAULT`",
         "description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
       },
+      {
+        "name": "time_zone",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The IANA time zone identifier to use for formatting (e.g., \"America/New_York\")."
+      },
       {
         "name": "threshold",
         "type": "String",

data/static/previews.json

@@ -826,6 +826,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
+        "name": "fullscreen_when_narrow",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.51.0
+  version: 0.51.2
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-25 00:00:00.000000000 Z
+date: 2026-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -1048,6 +1048,9 @@ files:
 - previews/primer/beta/text_preview.rb
 - previews/primer/beta/timeline_item_preview.rb
 - previews/primer/beta/truncate_preview.rb
+- previews/primer/beta/truncate_preview/advanced_multiple_items.html.erb
+- previews/primer/beta/truncate_preview/max_widths.html.erb
+- previews/primer/beta/truncate_preview/multiple_items.html.erb
 - previews/primer/box_preview.rb
 - previews/primer/forms_preview.rb
 - previews/primer/forms_preview/action_menu_form.html.erb