primer_view_components 0.51.4 → 0.51.6

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

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,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"]}
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cACE,iBAAkB,CAClB,YAAa,CAEb,qCAAsC,CAEtC,mCAoBF,CAjBE,qBACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,aAAc,CACd,8BAA+B,CAC/B,UAAW,CAEX,yCACF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBACE,iBAAkB,CAClB,SAAU,CACV,YAAa,CACb,gCAAiC,CACjC,iCAAkC,CAElC,qDAAsD,CAEtD,qDAAwD,CACxD,0BAA2B,CAC3B,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CAClB,sBAAuB,CACvB,aACF,CAEA,6BACE,+BAAgC,CAChC,gDAAiD,CACjD,0CACF,CAEA,mBACE,WAAY,CACZ,cAAe,CAEf,yCAA0C,CAC1C,0BAA2B,CAC3B,SACF,CAEA,qBACE,iBAAkB,CAElB,UAAW,CACX,SACF,CAEA,oBACE,iBAAkB,CAClB,SAAU,CACV,gCAAiC,CACjC,QAAS,CAET,8CAAiD,CAEjD,iBAAkB,CAClB,uCAAwC,CACxC,QAAS,CACT,sEACF,CAEA,yBACE,8BAA+B,CAC/B,gBAgBF,CAbE,oCAEE,sCACF,CAEA,6CACE,0BAA2B,CAC3B,6BAA8B,CAC9B,gCAAiC,CACjC,0BAA2B,CAC3B,uCAAwC,CACxC,QACF","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/truncate.css

@@ -1 +1 @@
-.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{cursor:pointer;flex-shrink:0;max-width:100%!important}
+.Truncate{display:inline-flex;min-width:0;max-width:100%}.Truncate>.Truncate-text{min-width:1ch;max-width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{max-width:100%!important;flex-shrink:0;cursor:pointer}

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

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA2BF,CAxBE,yBAEE,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CACpB,WAAY,CACZ,cA0BF,CAxBE,yBACE,aAAc,CACd,qBAAsB,CACtB,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAGE,wBAA0B,CAC1B,aAAc,CACd,cACF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

data/app/components/primer/dialog_helper.js

@@ -15,6 +15,10 @@ function setScrollGutter(doc) {
         return;
     doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
 }
+function updateBodyModalClasses(doc) {
+    doc.body.classList.toggle('has-modal', Boolean(doc.querySelector('dialog[open]')));
+    doc.body.classList.toggle('has-modal-disable-scroll', Boolean(doc.querySelector('dialog[open].Overlay--disableScroll')));
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -75,6 +79,7 @@ function dialogInvokerButtonHandler(event) {
                     }
                 }, { once: true });
             }
+            updateBodyModalClasses(dialog.ownerDocument);
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -82,6 +87,7 @@ function dialogInvokerButtonHandler(event) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement && dialog.open) {
             dialog.close();
+            updateBodyModalClasses(dialog.ownerDocument);
         }
     }
 }
@@ -98,6 +104,7 @@ 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.dialog?.addEventListener('close', () => updateBodyModalClasses(this.dialog.ownerDocument), { signal });
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -132,14 +139,16 @@ export class DialogHelperElement extends HTMLElement {
 _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
     if (!this.dialog)
         return;
+    const { ownerDocument } = this.dialog;
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
-        setScrollGutter(this.dialog.ownerDocument);
+        setScrollGutter(ownerDocument);
         this.dialog.showModal();
     }
+    updateBodyModalClasses(ownerDocument);
 };
 if (!window.customElements.get('dialog-helper')) {
     window.DialogHelperElement = DialogHelperElement;

data/app/components/primer/dialog_helper.ts

@@ -3,6 +3,14 @@ function setScrollGutter(doc: Document) {
   doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`)
 }
 
+function updateBodyModalClasses(doc: Document) {
+  doc.body.classList.toggle('has-modal', Boolean(doc.querySelector('dialog[open]')))
+  doc.body.classList.toggle(
+    'has-modal-disable-scroll',
+    Boolean(doc.querySelector('dialog[open].Overlay--disableScroll')),
+  )
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -69,6 +77,8 @@ function dialogInvokerButtonHandler(event: Event) {
           {once: true},
         )
       }
+
+      updateBodyModalClasses(dialog.ownerDocument)
     }
   }
 
@@ -77,6 +87,7 @@ function dialogInvokerButtonHandler(event: Event) {
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement && dialog.open) {
       dialog.close()
+      updateBodyModalClasses(dialog.ownerDocument)
     }
   }
 }
@@ -91,6 +102,7 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
+    this.dialog?.addEventListener('close', () => updateBodyModalClasses(this.dialog!.ownerDocument), {signal})
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
@@ -107,14 +119,17 @@ export class DialogHelperElement extends HTMLElement {
 
   #handleDialogOpenAttribute() {
     if (!this.dialog) return
+    const {ownerDocument} = this.dialog
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
       // eslint-disable-next-line no-restricted-syntax
       this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
       this.dialog.close()
-      setScrollGutter(this.dialog.ownerDocument)
+      setScrollGutter(ownerDocument)
       this.dialog.showModal()
     }
+
+    updateBodyModalClasses(ownerDocument)
   }
 
   handleEvent(event: MouseEvent) {

data/app/lib/primer/forms/acts_as_component.rb

@@ -10,7 +10,7 @@ module Primer
       module InstanceMethods
         delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           @view_context = view_context
           before_render
           perform_render(&block)

data/app/lib/primer/forms/toggle_switch_form.rb

@@ -69,7 +69,7 @@ module Primer
       # assumes the presence of a builder so we create our own here. A builder
       # cannot be constructed without a corresponding view context, which is why
       # we have to override render_in and can't create it in the initializer.
-      def render_in(view_context, &block)
+      def render_in(view_context, **_kwargs, &block)
         @builder = Primer::Forms::Builder.new(
           nil, nil, view_context, {}
         )

data/lib/primer/form_components.rb

@@ -16,7 +16,7 @@ module Primer
           @system_arguments = system_arguments
         end
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           builder = Primer::Forms::Builder.new(
             nil, nil, view_context, {}
           )

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/dropdown_preview.rb

@@ -54,6 +54,8 @@ module Primer
       # @!group Direction
       #
       # @label Direction e
+      #
+      # @snapshot interactive
       def direction_e
         render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
           component.with_button { "Dropdown" }
@@ -66,6 +68,8 @@ module Primer
       end
 
       # @label Direction ne
+      #
+      # @snapshot interactive
       def direction_ne
         render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
           component.with_button { "Dropdown" }
@@ -78,6 +82,8 @@ module Primer
       end
 
       # @label Direction s
+      #
+      # @snapshot interactive
       def direction_s
         render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
           component.with_button { "Dropdown" }
@@ -90,6 +96,8 @@ module Primer
       end
 
       # @label Direction se
+      #
+      # @snapshot interactive
       def direction_se
         render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
           component.with_button { "Dropdown" }
@@ -102,6 +110,8 @@ module Primer
       end
 
       # @label Direction sw
+      #
+      # @snapshot interactive
       def direction_sw
         render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
           component.with_button { "Dropdown" }
@@ -114,6 +124,8 @@ module Primer
       end
 
       # @label Direction w
+      #
+      # @snapshot interactive
       def direction_w
         render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
           component.with_button { "Dropdown" }

data/static/info_arch.json

@@ -3762,7 +3762,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_e",
         "name": "direction_e",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3775,7 +3775,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_ne",
         "name": "direction_ne",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3788,7 +3788,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_s",
         "name": "direction_s",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3801,7 +3801,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_se",
         "name": "direction_se",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3814,7 +3814,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_sw",
         "name": "direction_sw",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3827,7 +3827,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_w",
         "name": "direction_w",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"

data/static/previews.json

@@ -3541,7 +3541,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_e",
         "name": "direction_e",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3554,7 +3554,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_ne",
         "name": "direction_ne",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3567,7 +3567,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_s",
         "name": "direction_s",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3580,7 +3580,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_se",
         "name": "direction_se",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3593,7 +3593,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_sw",
         "name": "direction_sw",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -3606,7 +3606,7 @@
       {
         "preview_path": "primer/alpha/dropdown/direction_w",
         "name": "direction_w",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.51.4
+  version: 0.51.6
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-18 00:00:00.000000000 Z
+date: 2026-06-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview