primer_view_components 0.5.1 → 0.7.0

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

@@ -20,24 +20,6 @@ module Primer
       }.freeze
       STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
 
-      # @example Default
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch")) %>
-      #
-      # @example Checked
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true)) %>
-      #
-      # @example Disabled
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", enabled: false)) %>
-      #
-      # @example Checked and Disabled
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true, enabled: false)) %>
-      #
-      # @example Small
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", size: :small)) %>
-      #
-      # @example With status label positioned at the end
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", status_label_position: :end)) %>
-      #
       # @param src [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests.
       # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.
       # @param checked [Boolean] Whether the toggle switch is on or off.

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

@@ -210,7 +210,7 @@ class ToolTipElement extends HTMLElement {
         if (value && this.matches(':popover-open')) {
             this.hidePopover();
         }
-        else if (!value && !this.matches(':popover-open')) {
+        else if (!value && this.matches(':not(:popover-open)')) {
             this.showPopover();
         }
     }
@@ -272,10 +272,10 @@ class ToolTipElement extends HTMLElement {
         const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         await Promise.resolve();
-        if (!showing && shouldShow) {
+        if (!showing && shouldShow && this.matches(':not(:popover-open)')) {
             this.showPopover();
         }
-        else if (showing && shouldHide) {
+        else if (showing && shouldHide && this.matches(':popover-open')) {
             this.hidePopover();
         }
         if (event.type === 'toggle') {

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

@@ -208,7 +208,7 @@ class ToolTipElement extends HTMLElement {
   set hiddenFromView(value: true | false) {
     if (value && this.matches(':popover-open')) {
       this.hidePopover()
-    } else if (!value && !this.matches(':popover-open')) {
+    } else if (!value && this.matches(':not(:popover-open)')) {
       this.showPopover()
     }
   }
@@ -277,9 +277,9 @@ class ToolTipElement extends HTMLElement {
     const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
 
     await Promise.resolve()
-    if (!showing && shouldShow) {
+    if (!showing && shouldShow && this.matches(':not(:popover-open)')) {
       this.showPopover()
-    } else if (showing && shouldHide) {
+    } else if (showing && shouldHide && this.matches(':popover-open')) {
       this.hidePopover()
     }
 

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

@@ -28,75 +28,7 @@ module Primer
 
       TYPE_FALLBACK = :description
       TYPE_OPTIONS = [:label, :description].freeze
-      # @example As a supplementary description for a button
-      #   @description
-      #     In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
-      #     A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
-      #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "save-button")) do |component| %>
-      #       <% component.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
-      #       Save
-      #     <% end %>
-      # @example As a label for an `IconButton`
-      #   @description
-      #     An `IconButton` of `tag: :button` and `tag: :a` will render a tooltip using the `aria-label` content by default. While tooltips should generally be avoided, a tooltip on an `IconButton`
-      #     has usability benefits because it provides a textual label for sighted users.
-      #     A screen reader user who encounters the following button will hear the accessible name, "Bold".
-      #   @code
-      #     <%= render(Primer::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
-      # @example As a supplementary description for an `IconButton`
-      #   @description
-      #     If you want to provide a description for the `IconButton`, set both `aria-label` and `aria-description` text. The tooltip will use the `aria-description` text.
-      #     A screen reader user who encounters the following button will hear the accessible name "Search", followed by the accessible description "Use keywords like 'repo:' and 'org:' in your query".
-      #   @code
-      #     <%= render(Primer::IconButton.new(id: "search-button", icon: :search, "aria-label": "Search", "aria-description": "Use keywords like 'repo:' and 'org:' in your query")) %>
-      #
-      # @example With direction
-      #   @description
-      #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
-      #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
-      #       North
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
-      #       South
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
-      #       East
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
-      #       West
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
-      #       Northwest
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
-      #       Southwest
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
-      #       Northeast
-      #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |component| %>
-      #       <% component.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
-      #       Southeast
-      #     <% end %>
-      # @example Directly using `Tooltip`
-      #   @description
-      #     When you have a valid tooltip usecase for an interactive element that is not one of the supported components, you may need to use the `Tooltip` component directly.
-      #     The tooltip should be placed directly adjacent after the element you are associating it with.
-      #     The tooltip is absolutely positioned so ensure there is a wrapper with `position: relative` to avoid positioning issues.
-      #   @code
-      #     <div style="position: relative;">
-      #       <button type="button" id="test-button">Test</button>
-      #       <%= render(Primer::Alpha::Tooltip.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
-      #     </div>
+
       # @param for_id [String] The ID of the element that the tooltip should be attached to.
       # @param type [Symbol] <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
       # @param direction [Symbol] <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>

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

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-border-muted));display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-border-muted));display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,.375rem);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}

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

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,4EAAmD,CAJnD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,wEAA0E,CAD1E,oDAA6B,CAD7B,2CAGF,CAEA,gCAEE,uEAAiD,CADjD,2DAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAAyC,CANzC,oDAA6B,CAG7B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,+EAAqD,CAFrD,oDAA6B,CAG7B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,kGAAoD,CAFpD,oDAA6B,CAC7B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,4FAA2D,CAD3D,oDAA6B,CAD7B,gDAiBF,CAZE,0JAQE,mFAAkD,CAClD,4CAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,+CAA0B,CAD1B,gDAA2B,CAF3B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--borderColor-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap);\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n  }\n\n  & .Counter--primary {\n    color: var(--fgColor-onEmphasis);\n    background-color: var(--bgColor-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed);\n  font-size: var(--text-body-size-medium);\n  line-height: 30px;\n  color: var(--fgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    border-bottom-color: var(--borderColor-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [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  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--fgColor-default);\n      text-decoration: none;\n      background: var(--control-transparent-bgColor-hover);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-default);\n    border-bottom-color: var(--underlineNav-borderColor-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--underlineNav-borderColor-active);\n      border-radius: var(--borderRadius-medium);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap);\n  color: var(--fgColor-muted);\n  fill: var(--fgColor-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,4EAAmD,CAJnD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,wEAA0E,CAD1E,oDAA6B,CAD7B,2CAGF,CAEA,gCAEE,uEAAiD,CADjD,2DAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oDAA6B,CAG7B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,+EAAqD,CAFrD,oDAA6B,CAG7B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,kGAAoD,CAFpD,oDAA6B,CAC7B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,4FAA2D,CAD3D,oDAA6B,CAD7B,gDAiBF,CAZE,0JAQE,mFAAkD,CAClD,gDAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,+CAA0B,CAD1B,gDAA2B,CAF3B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--borderColor-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap);\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n  }\n\n  & .Counter--primary {\n    color: var(--fgColor-onEmphasis);\n    background-color: var(--bgColor-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed);\n  font-size: var(--text-body-size-medium);\n  line-height: 30px;\n  color: var(--fgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    border-bottom-color: var(--borderColor-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [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  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--fgColor-default);\n      text-decoration: none;\n      background: var(--control-transparent-bgColor-hover);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-default);\n    border-bottom-color: var(--underlineNav-borderColor-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--underlineNav-borderColor-active);\n      border-radius: var(--borderRadius-medium);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap);\n  color: var(--fgColor-muted);\n  fill: var(--fgColor-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

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

@@ -48,67 +48,6 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # @example Default with `<nav>`
-      #   @description
-      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
-      #   @code
-      #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
-      #       <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
-      #       <% component.with_tab(href: "#") { "Item 2" } %>
-      #       <% component.with_actions do %>
-      #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-      #       <% end %>
-      #     <% end %>
-      #
-      # @example With `<div>`
-      #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
-      #     <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
-      #     <% component.with_tab(href: "#") { "Item 2" } %>
-      #     <% component.with_actions do %>
-      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example With icons and counters
-      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
-      #       <% tab.with_icon(icon: :star) %>
-      #       <% tab.with_text { "Item 1" } %>
-      #     <% end %>
-      #     <% component.with_tab(href: "#") do |tab| %>
-      #       <% tab.with_icon(icon: :star) %>
-      #       <% tab.with_text { "Item 2" } %>
-      #       <% tab.with_counter(count: 10) %>
-      #     <% end %>
-      #     <% component.with_tab(href: "#") do |tab| %>
-      #       <% tab.with_text { "Item 3" } %>
-      #       <% tab.with_counter(count: 10) %>
-      #     <% end %>
-      #     <% component.with_actions do %>
-      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Align right
-      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
-      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
-      #       <% tab.with_text { "Item 1" } %>
-      #     <% end %>
-      #     <% component.with_tab(href: "#") do |tab| %>
-      #       <% tab.with_text { "Item 2" } %>
-      #     <% end %>
-      #     <% component.with_actions do %>
-      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Customizing the body
-      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
-      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% component.with_tab(href: "#") { "Tab 2" } %>
-      #     <% component.with_tab(href: "#") { "Tab 3" } %>
-      #   <% end %>
-      #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
       # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
       # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>

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

@@ -36,25 +36,6 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # @example Default
-      #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
-      #     <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
-      #       <% tab.with_text { "Tab 1" } %>
-      #       <% tab.with_panel do %>
-      #         Panel 1
-      #       <% end %>
-      #     <% end %>
-      #     <% component.with_tab(id: "tab-2") do |tab| %>
-      #       <% tab.with_text { "Tab 2" } %>
-      #       <% tab.with_panel do %>
-      #         Panel 2
-      #       <% end %>
-      #     <% end %>
-      #     <% component.with_actions do %>
-      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-      #     <% end %>
-      #   <% end %>
-      #
       # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
       # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
       # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.

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

@@ -1,7 +1,9 @@
 declare class XBannerElement extends HTMLElement {
+    #private;
     titleText: HTMLElement;
     dismiss(): void;
-    private shouldReappear;
+    show(): void;
+    hide(): void;
 }
 declare global {
     interface Window {

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

@@ -4,24 +4,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _XBannerElement_instances, _XBannerElement_dismissScheme_get;
 import { controller, target } from '@github/catalyst';
 let XBannerElement = class XBannerElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _XBannerElement_instances.add(this);
+    }
     dismiss() {
-        if (this.shouldReappear()) {
-            this.style.setProperty('visibility', 'hidden');
-            setTimeout(() => {
-                this.style.setProperty('visibility', 'visible');
-            }, 2000);
-            return;
-        }
         const parentElement = this.parentElement;
         if (!parentElement)
             return;
-        parentElement.removeChild(this);
+        if (__classPrivateFieldGet(this, _XBannerElement_instances, "a", _XBannerElement_dismissScheme_get) === 'remove') {
+            parentElement.removeChild(this);
+        }
+        else {
+            this.hide();
+        }
     }
-    shouldReappear() {
-        return this.getAttribute('data-reappear') === 'true';
+    show() {
+        this.style.setProperty('display', 'initial');
     }
+    hide() {
+        this.style.setProperty('display', 'none');
+    }
+};
+_XBannerElement_instances = new WeakSet(), _XBannerElement_dismissScheme_get = function _XBannerElement_dismissScheme_get() {
+    return this.getAttribute('data-dismiss-scheme');
 };
 __decorate([
     target

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

@@ -5,24 +5,26 @@ class XBannerElement extends HTMLElement {
   @target titleText: HTMLElement
 
   dismiss() {
-    if (this.shouldReappear()) {
-      this.style.setProperty('visibility', 'hidden')
-
-      setTimeout(() => {
-        this.style.setProperty('visibility', 'visible')
-      }, 2000)
+    const parentElement = this.parentElement
+    if (!parentElement) return
 
-      return
+    if (this.#dismissScheme === 'remove') {
+      parentElement.removeChild(this)
+    } else {
+      this.hide()
     }
+  }
 
-    const parentElement = this.parentElement
-    if (!parentElement) return
+  show() {
+    this.style.setProperty('display', 'initial')
+  }
 
-    parentElement.removeChild(this)
+  hide() {
+    this.style.setProperty('display', 'none')
   }
 
-  private shouldReappear(): boolean {
-    return this.getAttribute('data-reappear') === 'true'
+  get #dismissScheme(): string {
+    return this.getAttribute('data-dismiss-scheme')!
   }
 }
 

data/app/components/primer/base_component.rb

@@ -139,7 +139,7 @@ module Primer
     # | `font_style` | Symbol | Font style. <%= one_of([:italic]) %> |
     # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
-    # | `text_transform` | Symbol | Text transformation. <%= one_of([:uppercase]) %> |
+    # | `text_transform` | Symbol | Text transformation. <%= one_of([:uppercase, :capitalize]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
     # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
     #

data/app/components/primer/beta/auto_complete/item.rb

@@ -39,14 +39,6 @@ module Primer
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :description
 
-        # @example Default
-        #   <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do %>
-        #     Selected
-        #   <% end %>
-        #   <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do %>
-        #     Not selected
-        #   <% end %>
-        #
         # @param value [String] Value of the item.
         # @param selected [Boolean] Whether the item is selected.
         # @param disabled [Boolean] Whether the item is disabled.

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

@@ -101,62 +101,6 @@ module Primer
         Primer::BaseComponent.new(**sanitized_args)
       }
 
-      # @example Leading visual
-      #   @description
-      #     Display any Octicon as a leading visual within the field
-      #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |component| %>
-      #       <% component.with_leading_visual_icon(icon: :search) %>
-      #     <% end %>
-      #
-      # @example Trailing action
-      #   @description
-      #     Show a clear button
-      #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/view-components/rails-app/auto_complete", show_clear_button: true )) %>
-      #
-      # @example Visually hidden label
-      #   @description
-      #     A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
-      #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |component| %>
-      #       <% component.with_leading_visual_icon(icon: :search) %>
-      #     <% end %>
-      #
-      # @example Full width field
-      #   @description
-      #     To allow field to span width of its container, set `full_width` to `true`.
-      #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |component| %>
-      #       <% component.with_leading_visual_icon(icon: :search) %>
-      #     <% end %>
-      #
-      # @example Inset variant
-      #   @description
-      #     Use the `inset` variant to change the input background color to be subtle.
-      #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |component| %>
-      #       <% component.with_leading_visual_icon(icon: :search) %>
-      #     <% end %>
-      #
-      # @example Monospace variant
-      #   @description
-      #     Use the `monospace` variant to change the input font family.
-      #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |component| %>
-      #       <% component.with_leading_visual_icon(icon: :search) %>
-      #     <% end %>
-      #
-      # @example With custom classes for the input
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
-      #     <% component.with_input(classes: "custom-class") %>
-      #   <% end %>
-      #
-      # @example With custom classes for the results
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
-      #     <% component.with_results(classes: "custom-class") %>
-      #   <% end %>
-      #
       # @param label_text [String] The label of the input.
       # @param src [String] The route to query.
       # @param input_id [String] Id of the input element.

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

@@ -1 +1 @@
-.avatar{background-color:var(--avatar-bgColor,var(--color-avatar-bg));border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border));display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}
+.avatar{background-color:var(--avatar-bgColor,var(--color-avatar-bg));border-radius:var(--borderRadius-medium,.375rem);box-shadow:0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border));display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,.1875rem)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}

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

@@ -1 +1 @@
-{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,6DAAuC,CACvC,4CAAyC,CAEzC,yEAA+C,CAP/C,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--avatar-borderColor);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.avatar-2 {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.avatar-3 {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.avatar-4 {\n  width: var(--base-size-28);\n  height: var(--base-size-28);\n}\n\n.avatar-5 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.avatar-6 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.avatar-7 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.avatar-8 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n"]}
+{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,6DAAuC,CACvC,gDAAyC,CAEzC,yEAA+C,CAP/C,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,gDACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--avatar-borderColor);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.avatar-2 {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.avatar-3 {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.avatar-4 {\n  width: var(--base-size-28);\n  height: var(--base-size-28);\n}\n\n.avatar-5 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.avatar-6 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.avatar-7 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.avatar-8 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n"]}

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

@@ -27,31 +27,13 @@ module Primer
 
       SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
 
-      # @example Default
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")) %>
-      #
-      # @example Square
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", shape: :square)) %>
-      #
-      # @example Link
-      #   <%= render(Primer::Beta::Avatar.new(href: "#", src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser profile")) %>
-      #
-      # @example With size
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 16)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 20)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 24)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 32)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 40)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 48)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 80)) %>
-      #
       # @param src [String] The source url of the avatar image.
       # @param alt [String] Passed through to alt on img tag.
       # @param size [Integer] <%= one_of(Primer::Beta::Avatar::SIZE_OPTIONS) %>
       # @param shape [Symbol] Shape of the avatar. <%= one_of(Primer::Beta::Avatar::SHAPE_OPTIONS) %>
       # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src:, alt:, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, **system_arguments)
+      def initialize(src:, alt: nil, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, **system_arguments)
         @href = href
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :img

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

@@ -1 +1 @@
-.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default,var(--color-canvas-default));border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted,var(--color-canvas-subtle));margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade))}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted,var(--color-canvas-subtle));width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));border-right:0;margin-left:-11px;margin-right:0}
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default,var(--color-canvas-default));border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:var(--borderRadius-small,.1875rem);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,.1875rem)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted,var(--color-canvas-subtle));margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade))}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted,var(--color-canvas-subtle));width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));border-right:0;margin-left:-11px;margin-right:0}

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

@@ -1 +1 @@
-{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,6DAAkC,CAClC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,mEAAwC,CAExC,2CAAwC,CADxC,+GAAkE,CAElE,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,2CACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,0DAAgC,CADhC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,0GAA6D,CAL7D,iBAMF,CAEA,2BAEE,oFAAiD,CADjD,UAEF,CAEA,0BAEE,iFAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,iFAUF,CARE,+CACE,SACF,CAEA,8CAEE,0DAAgC,CADhC,SAEF,CAGF,4BAIE,8GAAiE,CADjE,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--bgColor-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--bgColor-default);\n    border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n    border-radius: var(--borderRadius-small);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--bgColor-muted);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--avatarStack-fade-bgColor-muted);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--avatarStack-fade-bgColor-default);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--avatarStack-fade-bgColor-default);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--bgColor-muted);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n}\n"]}
+{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,6DAAkC,CAClC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,mEAAwC,CAExC,gDAAwC,CADxC,+GAAkE,CAElE,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,gDACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,0DAAgC,CADhC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,0GAA6D,CAL7D,iBAMF,CAEA,2BAEE,oFAAiD,CADjD,UAEF,CAEA,0BAEE,iFAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,iFAUF,CARE,+CACE,SACF,CAEA,8CAEE,0DAAgC,CADhC,SAEF,CAGF,4BAIE,8GAAiE,CADjE,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--bgColor-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--bgColor-default);\n    border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n    border-radius: var(--borderRadius-small);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--bgColor-muted);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--avatarStack-fade-bgColor-muted);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--avatarStack-fade-bgColor-default);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--avatarStack-fade-bgColor-default);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--bgColor-muted);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n}\n"]}

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

@@ -19,27 +19,6 @@ module Primer
       # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
       renders_many :avatars, "Primer::Beta::Avatar"
 
-      # @example Default
-      #   <%= render(Primer::Beta::AvatarStack.new) do |component| %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #   <% end  %>
-      #
-      # @example Align right
-      #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |component| %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #   <% end  %>
-      #
-      # @example With tooltip
-      #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |component| %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #   <% end  %>
-      #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
       # @param align [Symbol] <%= one_of(Primer::Beta::AvatarStack::ALIGN_OPTIONS) %>
       # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.

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

@@ -15,10 +15,6 @@ module Primer
       attr_reader :disabled
       alias disabled? disabled
 
-      # @example Block
-      #   <%= render(Primer::Beta::BaseButton.new(block: :true)) { "Block" } %>
-      #   <%= render(Primer::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
-      #
       # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
       # @param block [Boolean] Whether button is full-width with `display: block`.

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

@@ -1 +1 @@
-.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}
+.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}