openproject-primer_view_components 0.41.0 → 0.42.0

data/app/components/primer/alpha/action_list/item.html.erb

@@ -28,11 +28,7 @@
         <%= render(Primer::BaseComponent.new(tag: :span, **@label_arguments)) do %>
           <%= @label || content %>
         <% end %>
-        <% if description? %>
-          <span class="ActionListItem-description">
-            <%= description %>
-          </span>
-        <% end %>
+      <%= description if description? %>
       <% end %>
       <% if trailing_visual %>
         <span class="ActionListItem-visual ActionListItem-visual--trailing">

data/app/components/primer/alpha/action_list/item.rb

@@ -38,9 +38,16 @@ module Primer
         }
         TRUNCATION_BEHAVIOR_OPTIONS = TRUNCATION_BEHAVIOR_MAPPINGS.keys.freeze
 
-        # Description content that complements the item's label. See `ActionList`'s `description_scheme` argument
-        # for layout options.
-        renders_one :description
+        # Description content that complements the item's label, with optional test_selector.
+        # See `ActionList`'s `description_scheme` argument for layout options.
+        #
+        # @param legacy_content [String] Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { "My description" }` or `component.with_description.with_content("My description")`.
+        # @param test_selector [String] The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element.
+        renders_one :description, -> (legacy_content = nil, test_selector: nil) do
+          Primer::BaseComponent.new(tag: "span", classes: "ActionListItem-description", test_selector: test_selector).tap do |desc|
+            desc.with_content(legacy_content) if legacy_content
+          end
+        end
 
         # An icon, avatar, SVG, or custom content that will render to the left of the label.
         #

data/app/components/primer/alpha/segmented_control.css

@@ -1 +1 @@
-.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
+.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}

data/app/components/primer/alpha/segmented_control.css.map

@@ -1 +1 @@
-{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,wCAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAeF,CAbE,gDACE,gCAKF,CAHE,wDACE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAIE,0CAAiD,CACjD,wCAAyC,CAHzC,mBAAoB,CAIpB,iCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBA6FF,CAnFI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,oEAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,gDAAiD,CADjD,6CAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,uFAA0F,CAD1F,0CAA2C,CAH3C,WAAY,CAMZ,0BAAsB,CAAtB,qBAAsB,CADtB,sGAAuG,CAJvG,UAWF,CAJE,6CAEE,uFAA0F,CAD1F,mFAEF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCAEE,eAAgB,CAChB,sBAAuB,CAFvB,kBAGF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  height: var(--control-medium-size);\n  padding: var(--segmentedControl-item-padding);\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    height: 100%;\n    width: 100%;\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n    min-width: fit-content;\n\n    &:focus-visible {\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}
+{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAeF,CAbE,gDACE,gCAKF,CAHE,wDACE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAIE,0CAAiD,CACjD,wCAAyC,CAHzC,mBAAoB,CAIpB,iCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBA6FF,CAnFI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,oEAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,gDAAiD,CADjD,6CAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,uFAA0F,CAD1F,0CAA2C,CAH3C,WAAY,CAMZ,0BAAsB,CAAtB,qBAAsB,CADtB,sGAAuG,CAJvG,UAWF,CAJE,6CAEE,uFAA0F,CAD1F,mFAEF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCAEE,eAAgB,CAChB,sBAAuB,CAFvB,kBAGF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  height: var(--control-medium-size);\n  padding: var(--segmentedControl-item-padding);\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    height: 100%;\n    width: 100%;\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n    min-width: fit-content;\n\n    &:focus-visible {\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}

data/app/components/primer/alpha/segmented_control.pcss

@@ -7,6 +7,7 @@
   display: inline-flex;
   list-style: none;
   background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
+  border-color: var(--controlTrack-borderColor-rest, transparent);
   border-radius: var(--borderRadius-medium);
 }
 

data/app/components/primer/alpha/select_panel.rb

@@ -401,6 +401,7 @@ module Primer
 
         @dialog = Primer::BaseComponent.new(
           id: "#{@panel_id}-dialog",
+          "aria-labelledby": "#{@panel_id}-dialog-title",
           tag: :dialog,
           data: { target: "select-panel.dialog" },
           classes: class_names(
@@ -460,7 +461,7 @@ module Primer
 
         system_arguments[:aria] = merge_aria(
           system_arguments,
-          { aria: { controls: "#{@panel_id}-dialog" } }
+          { aria: { controls: "#{@panel_id}-dialog", "haspopup": "dialog", "expanded": "false" } }
         )
 
         Primer::Beta::Button.new(**system_arguments)

data/app/components/primer/alpha/select_panel_element.d.ts

@@ -6,7 +6,6 @@ type SelectedItem = {
     label: string | null | undefined;
     value: string | null | undefined;
     inputName: string | null | undefined;
-    element: SelectPanelItem;
 };
 export type SelectPanelItem = HTMLLIElement;
 export type FilterFn = (item: SelectPanelItem, query: string) => boolean;

data/app/components/primer/alpha/select_panel_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
+var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
 import { getAnchoredPosition } from '@primer/behaviors';
 import { controller, target } from '@github/catalyst';
 import { announceFromElement, announce } from '../aria_live';
@@ -55,6 +55,7 @@ const updateWhenVisible = (() => {
         }));
         resizeObserver.observe(el.ownerDocument.documentElement);
         el.addEventListener('dialog:close', () => {
+            el.invokerElement?.setAttribute('aria-expanded', 'false');
             anchors.delete(el);
         });
         el.addEventListener('dialog:open', () => {
@@ -73,6 +74,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         _SelectPanelElement_selectedItems.set(this, new Map());
         _SelectPanelElement_loadingDelayTimeoutId.set(this, null);
         _SelectPanelElement_loadingAnnouncementTimeoutId.set(this, null);
+        _SelectPanelElement_hasLoadedData.set(this, false);
     }
     get open() {
         return this.dialog.open;
@@ -251,6 +253,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         if (event.target === this.dialog && event.type === 'close') {
             // Remove data-ready so it can be set the next time the panel is opened
             this.dialog.removeAttribute('data-ready');
+            this.invokerElement?.setAttribute('aria-expanded', 'false');
             this.dispatchEvent(new CustomEvent('panelClosed', {
                 detail: { panel: this },
                 bubbles: true,
@@ -300,6 +303,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
     show() {
         this.updateAnchorPosition();
         this.dialog.showModal();
+        this.invokerElement?.setAttribute('aria-expanded', 'true');
         const event = new CustomEvent('dialog:open', {
             detail: { dialog: this.dialog },
         });
@@ -385,6 +389,7 @@ _SelectPanelElement_inputName = new WeakMap();
 _SelectPanelElement_selectedItems = new WeakMap();
 _SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
 _SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
+_SelectPanelElement_hasLoadedData = new WeakMap();
 _SelectPanelElement_instances = new WeakSet();
 _SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
     if (condition()) {
@@ -422,7 +427,7 @@ _SelectPanelElement_updateTabIndices = function _SelectPanelElement_updateTabInd
                 itemContent.setAttribute('tabindex', '-1');
             }
             // <li> elements should not themselves be tabbable
-            item.setAttribute('tabindex', '-1');
+            item.removeAttribute('tabindex');
         }
     }
     else {
@@ -437,7 +442,7 @@ _SelectPanelElement_updateTabIndices = function _SelectPanelElement_updateTabInd
                 itemContent.setAttribute('tabindex', '-1');
             }
             // <li> elements should not themselves be tabbable
-            item.setAttribute('tabindex', '-1');
+            item.removeAttribute('tabindex');
         }
     }
     if (!setZeroTabIndex && __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_firstItem_get)) {
@@ -497,12 +502,14 @@ _SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedIt
             value,
             label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
             inputName: itemContent.getAttribute('data-input-name'),
-            element: item,
         });
     }
 };
 _SelectPanelElement_removeSelectedItem = function _SelectPanelElement_removeSelectedItem(item) {
-    const value = item.getAttribute('data-value');
+    const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+    if (!itemContent)
+        return;
+    const value = itemContent.getAttribute('data-value');
     if (value) {
         __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").delete(value);
     }
@@ -604,27 +611,33 @@ _SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handle
         if (key === 'Enter') {
             const item = this.visibleItems[0];
             if (item) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item, false);
+                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+                if (itemContent)
+                    itemContent.click();
             }
         }
         else if (key === 'ArrowDown') {
-            const item = (this.focusableItem || this.visibleItems[0]);
+            const item = (this.focusableItem || __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, this.visibleItems[0]));
             if (item) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                item.focus();
                 event.preventDefault();
             }
         }
         else if (key === 'Home') {
             const item = this.visibleItems[0];
             if (item) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+                if (itemContent)
+                    itemContent.focus();
                 event.preventDefault();
             }
         }
         else if (key === 'End') {
             if (this.visibleItems.length > 0) {
                 const item = this.visibleItems[this.visibleItems.length - 1];
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+                if (itemContent)
+                    itemContent.focus();
                 event.preventDefault();
             }
         }
@@ -672,7 +685,13 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
         if (!itemContent)
             continue;
         const value = itemContent.getAttribute('data-value');
-        if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
+        if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
+            if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value)) {
+                itemContent.setAttribute(this.ariaSelectionType, 'false');
+            }
+        }
+        else if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
+            __classPrivateFieldSet(this, _SelectPanelElement_hasLoadedData, true, "f");
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
         }
     }
@@ -786,7 +805,7 @@ _SelectPanelElement_handleDialogItemActivated = function _SelectPanelElement_han
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
 };
-_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item, shouldClose = true) {
+_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -795,7 +814,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
     // works fine.
     if (this.selectVariant !== 'multiple') {
         setTimeout(() => {
-            if (this.open && shouldClose) {
+            if (this.open) {
                 this.hide();
             }
         });
@@ -814,17 +833,17 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         return;
     const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
     if (this.selectVariant === 'single') {
+        const value = this.selectedItems[0]?.value;
+        const element = this.visibleItems.find(el => __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, el)?.getAttribute('data-value') === value);
+        if (element) {
+            __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, element)?.setAttribute(this.ariaSelectionType, 'false');
+        }
+        __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").clear();
         // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
         if (checked) {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
             itemContent?.setAttribute(this.ariaSelectionType, 'true');
         }
-        for (const checkedItem of this.querySelectorAll(`[${this.ariaSelectionType}]`)) {
-            if (checkedItem !== itemContent) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, checkedItem);
-                checkedItem.setAttribute(this.ariaSelectionType, 'false');
-            }
-        }
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
     }
     else {

data/app/components/primer/alpha/select_panel_element.ts

@@ -11,7 +11,6 @@ type SelectedItem = {
   label: string | null | undefined
   value: string | null | undefined
   inputName: string | null | undefined
-  element: SelectPanelItem
 }
 
 const validSelectors = ['[role="option"]']
@@ -54,6 +53,7 @@ const updateWhenVisible = (() => {
     })
     resizeObserver.observe(el.ownerDocument.documentElement)
     el.addEventListener('dialog:close', () => {
+      el.invokerElement?.setAttribute('aria-expanded', 'false')
       anchors.delete(el)
     })
     el.addEventListener('dialog:open', () => {
@@ -84,6 +84,7 @@ export class SelectPanelElement extends HTMLElement {
   #selectedItems: Map<string, SelectedItem> = new Map()
   #loadingDelayTimeoutId: number | null = null
   #loadingAnnouncementTimeoutId: number | null = null
+  #hasLoadedData = false
 
   get open(): boolean {
     return this.dialog.open
@@ -306,7 +307,7 @@ export class SelectPanelElement extends HTMLElement {
         }
 
         // <li> elements should not themselves be tabbable
-        item.setAttribute('tabindex', '-1')
+        item.removeAttribute('tabindex')
       }
     } else {
       for (const item of this.items) {
@@ -320,7 +321,7 @@ export class SelectPanelElement extends HTMLElement {
         }
 
         // <li> elements should not themselves be tabbable
-        item.setAttribute('tabindex', '-1')
+        item.removeAttribute('tabindex')
       }
     }
 
@@ -380,6 +381,7 @@ export class SelectPanelElement extends HTMLElement {
         }
       }
     }
+
     this.#updateInput()
   }
 
@@ -394,14 +396,15 @@ export class SelectPanelElement extends HTMLElement {
         value,
         label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
         inputName: itemContent.getAttribute('data-input-name'),
-        element: item,
       })
     }
   }
 
-  #removeSelectedItem(item: Element) {
-    const value = item.getAttribute('data-value')
+  #removeSelectedItem(item: SelectPanelItem) {
+    const itemContent = this.#getItemContent(item)
+    if (!itemContent) return
 
+    const value = itemContent.getAttribute('data-value')
     if (value) {
       this.#selectedItems.delete(value)
     }
@@ -463,6 +466,7 @@ export class SelectPanelElement extends HTMLElement {
     if (event.target === this.dialog && event.type === 'close') {
       // Remove data-ready so it can be set the next time the panel is opened
       this.dialog.removeAttribute('data-ready')
+      this.invokerElement?.setAttribute('aria-expanded', 'false')
 
       this.dispatchEvent(
         new CustomEvent('panelClosed', {
@@ -627,26 +631,29 @@ export class SelectPanelElement extends HTMLElement {
         const item = this.visibleItems[0] as HTMLLIElement | null
 
         if (item) {
-          this.#handleItemActivated(item, false)
+          const itemContent = this.#getItemContent(item)
+          if (itemContent) itemContent.click()
         }
       } else if (key === 'ArrowDown') {
-        const item = (this.focusableItem || this.visibleItems[0]) as HTMLLIElement
+        const item = (this.focusableItem || this.#getItemContent(this.visibleItems[0])) as HTMLLIElement
 
         if (item) {
-          this.#getItemContent(item)!.focus()
+          item.focus()
           event.preventDefault()
         }
       } else if (key === 'Home') {
         const item = this.visibleItems[0] as HTMLLIElement | null
 
         if (item) {
-          this.#getItemContent(item)!.focus()
+          const itemContent = this.#getItemContent(item)
+          if (itemContent) itemContent.focus()
           event.preventDefault()
         }
       } else if (key === 'End') {
         if (this.visibleItems.length > 0) {
           const item = this.visibleItems[this.visibleItems.length - 1] as HTMLLIElement
-          this.#getItemContent(item)!.focus()
+          const itemContent = this.#getItemContent(item)
+          if (itemContent) itemContent.focus()
           event.preventDefault()
         }
       }
@@ -700,8 +707,12 @@ export class SelectPanelElement extends HTMLElement {
       if (!itemContent) continue
 
       const value = itemContent.getAttribute('data-value')
-
-      if (value && !this.#selectedItems.has(value) && this.isItemChecked(item)) {
+      if (this.#hasLoadedData) {
+        if (value && !this.#selectedItems.has(value)) {
+          itemContent.setAttribute(this.ariaSelectionType, 'false')
+        }
+      } else if (value && !this.#selectedItems.has(value) && this.isItemChecked(item)) {
+        this.#hasLoadedData = true
         this.#addSelectedItem(item)
       }
     }
@@ -829,7 +840,7 @@ export class SelectPanelElement extends HTMLElement {
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }
 
-  #handleItemActivated(item: SelectPanelItem, shouldClose: boolean = true) {
+  #handleItemActivated(item: SelectPanelItem) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -838,7 +849,7 @@ export class SelectPanelElement extends HTMLElement {
     // works fine.
     if (this.selectVariant !== 'multiple') {
       setTimeout(() => {
-        if (this.open && shouldClose) {
+        if (this.open) {
           this.hide()
         }
       })
@@ -863,19 +874,21 @@ export class SelectPanelElement extends HTMLElement {
     const itemContent = this.#getItemContent(item)
 
     if (this.selectVariant === 'single') {
+      const value = this.selectedItems[0]?.value
+      const element = this.visibleItems.find(el => this.#getItemContent(el)?.getAttribute('data-value') === value)
+
+      if (element) {
+        this.#getItemContent(element)?.setAttribute(this.ariaSelectionType, 'false')
+      }
+
+      this.#selectedItems.clear()
+
       // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
       if (checked) {
         this.#addSelectedItem(item)
         itemContent?.setAttribute(this.ariaSelectionType, 'true')
       }
 
-      for (const checkedItem of this.querySelectorAll(`[${this.ariaSelectionType}]`)) {
-        if (checkedItem !== itemContent) {
-          this.#removeSelectedItem(checkedItem)
-          checkedItem.setAttribute(this.ariaSelectionType, 'false')
-        }
-      }
-
       this.#setDynamicLabel()
     } else {
       // multi-select mode allows unchecking a checked item
@@ -902,6 +915,7 @@ export class SelectPanelElement extends HTMLElement {
   show() {
     this.updateAnchorPosition()
     this.dialog.showModal()
+    this.invokerElement?.setAttribute('aria-expanded', 'true')
     const event = new CustomEvent('dialog:open', {
       detail: {dialog: this.dialog},
     })

data/app/components/primer/alpha/tool_tip.js

@@ -86,7 +86,7 @@ class ToolTipElement extends HTMLElement {
         --tooltip-left: var(--tool-tip-position-left, 0);
         padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
         font: var(--text-body-shorthand-small);
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
+        color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -94,7 +94,7 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
+        background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important;
         border-radius: var(--borderRadius-medium);
         border: 0 !important;
         opacity: 0;

data/app/components/primer/alpha/tool_tip.ts

@@ -71,7 +71,7 @@ class ToolTipElement extends HTMLElement {
         --tooltip-left: var(--tool-tip-position-left, 0);
         padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
         font: var(--text-body-shorthand-small);
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
+        color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -79,7 +79,7 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
+        background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important;
         border-radius: var(--borderRadius-medium);
         border: 0 !important;
         opacity: 0;

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

@@ -86,7 +86,7 @@ module Primer
 
       # @param datetime [Time] The time to be formatted.
       # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
-      # @param prefix [sring] What to prefix the relative ime display with.
+      # @param prefix [String] What to prefix the relative time display with.
       # @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
       # @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
       # @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
@@ -95,12 +95,12 @@ 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 threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
+      # @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) %>
       # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
-      # @param lang [string] The language to use.
-      # @param title [string] Provide a custom title to the element.
+      # @param lang [String] The language to use.
+      # @param title [String] Provide a custom title to the element.
       # @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(

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

@@ -1 +1 @@
-.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
+.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}

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

@@ -1 +1 @@
-{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,sCAAuC,CACvC,0CAA2C,CAC3C,+CAAgD,CAHhD,sDAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,aAEE,wEACF,CAEA,4BAJE,+BAOF,CAHA,eAEE,wEACF,CAEA,eAEE,4EAA8E,CAD9E,+BAEF,CAIA,cAEE,qCAAsC,CACtC,+BAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,sCAAuC,CACvC,0CAA2C,CAC3C,+CAAgD,CAHhD,sDAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CACjD,oEAAqE,CAHrE,+BAIF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eAEE,4EAA8E,CAC9E,mEAAoE,CAFpE,+BAGF,CAIA,cAEE,qCAAsC,CACtC,+BAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

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

@@ -20,21 +20,25 @@
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-neutral-emphasis);
   border: var(--borderWidth-thin) solid transparent;
+  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);
 }
 
 .State--open {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);
 }
 
 .State--merged {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);
 }
 
 .State--closed {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);
 }
 
 /* Small 24px */

data/lib/primer/forms/text_area.rb

@@ -10,8 +10,14 @@ module Primer
         @input = input
         @input.add_input_classes("FormControl-input", "FormControl-textarea")
 
+        wrap_classes = [
+          "FormControl-input-wrap",
+        ]
+
+        wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
+
         @field_wrap_arguments = {
-          class: class_names("FormControl-input-wrap"),
+          class: class_names(wrap_classes),
           hidden: @input.hidden?
         }
       end