primer_view_components 0.1.4 → 0.1.6

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

@@ -53,13 +53,17 @@ module Primer
       # Optional button to open the dialog.
       #
       # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>.
-      renders_one :show_button, lambda { |**system_arguments|
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes]
         )
         system_arguments[:id] = "dialog-show-#{@system_arguments[:id]}"
         system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
-        Primer::Beta::Button.new(**system_arguments)
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
       }
 
       # Header content.

data/app/components/primer/alpha/dropdown/menu.rb

@@ -70,7 +70,7 @@ module Primer
             @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
             @system_arguments[:tag] = :li if list? && divider?
             @system_arguments[:role] ||= :menuitem
-            @system_arguments[:role] = :separator if divider
+            @system_arguments[:role] = :presentation if divider
             @system_arguments[:classes] = class_names(
               @system_arguments[:classes],
               "dropdown-item" => !divider,

data/app/components/primer/alpha/dropdown.css.json

@@ -36,26 +36,5 @@
     ".dropdown-menu-sw:after",
     ".dropdown-menu-se:before",
     ".dropdown-menu-se:after"
-  ],
-  "classes": [
-    "dropdown",
-    "dropdown-caret",
-    "dropdown-menu",
-    "dropdown-menu-no-overflow",
-    "dropdown-item",
-    "octicon",
-    "color-fg-",
-    "Label",
-    "btn-link",
-    "dropdown-signout",
-    "dropdown-divider",
-    "dropdown-header",
-    "octicon-check",
-    "dropdown-menu-w",
-    "dropdown-menu-e",
-    "dropdown-menu-ne",
-    "dropdown-menu-s",
-    "dropdown-menu-sw",
-    "dropdown-menu-se"
   ]
 }

data/app/components/primer/alpha/layout.css.json

@@ -76,32 +76,5 @@
     ".Layout-main .Layout-main-centered-xl>.container-lg",
     ".Layout-main .Layout-main-centered-xl>.container-md",
     ".Layout-main .Layout-main-centered-xl>.container-xl"
-  ],
-  "classes": [
-    "Layout",
-    "Layout-divider",
-    "Layout-main",
-    "Layout-sidebar",
-    "Layout--sidebarPosition-flowRow-start",
-    "Layout--sidebarPosition-flowRow-end",
-    "Layout--sidebarPosition-flowRow-none",
-    "Layout--divided",
-    "Layout-divider--flowRow-hidden",
-    "Layout-divider--flowRow-shallow",
-    "Layout--flowRow-until-md",
-    "Layout--flowRow-until-lg",
-    "Layout--gutter-none",
-    "Layout--gutter-condensed",
-    "Layout--gutter-spacious",
-    "Layout--sidebar-narrow",
-    "Layout--sidebar-wide",
-    "Layout--sidebarPosition-start",
-    "Layout--sidebarPosition-end",
-    "Layout-main-centered-lg",
-    "Layout-main-centered-md",
-    "Layout-main-centered-xl",
-    "container-lg",
-    "container-md",
-    "container-xl"
   ]
 }

data/app/components/primer/alpha/menu.css.json

@@ -24,16 +24,5 @@
     ".menu-heading:hover",
     ".menu-heading:first-child",
     ".menu-heading:last-child"
-  ],
-  "classes": [
-    "menu",
-    "menu-item",
-    "selected",
-    "octicon",
-    "Counter",
-    "menu-warning",
-    "avatar",
-    "alert",
-    "menu-heading"
   ]
 }

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

@@ -49,6 +49,17 @@ function clickHandler(event) {
         topLevelDialog.close(true);
     }
 }
+function keydownHandler(event) {
+    if (!(event instanceof KeyboardEvent) ||
+        event.type !== 'keydown' ||
+        event.key !== 'Enter' ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.metaKey ||
+        event.shiftKey)
+        return;
+    clickHandler(event);
+}
 function mousedownHandler(event) {
     const target = event.target;
     if (target === null || target === void 0 ? void 0 : target.closest('button'))
@@ -122,6 +133,7 @@ export class ModalDialogElement extends HTMLElement {
         if (!this.hasAttribute('role'))
             this.setAttribute('role', 'dialog');
         document.addEventListener('click', clickHandler);
+        document.addEventListener('keydown', keydownHandler);
         document.addEventListener('mousedown', mousedownHandler);
         this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
     }

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

@@ -12,6 +12,7 @@ const overlayStack: ModalDialogElement[] = []
 function clickHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
+
   if (!button) return
 
   // If the user is clicking a valid dialog trigger
@@ -42,6 +43,21 @@ function clickHandler(event: Event) {
   }
 }
 
+function keydownHandler(event: Event) {
+  if (
+    !(event instanceof KeyboardEvent) ||
+    event.type !== 'keydown' ||
+    event.key !== 'Enter' ||
+    event.ctrlKey ||
+    event.altKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+    return
+
+  clickHandler(event)
+}
+
 function mousedownHandler(event: Event) {
   const target = event.target as HTMLElement
   if (target?.closest('button')) return
@@ -124,6 +140,7 @@ export class ModalDialogElement extends HTMLElement {
     if (!this.hasAttribute('role')) this.setAttribute('role', 'dialog')
 
     document.addEventListener('click', clickHandler)
+    document.addEventListener('keydown', keydownHandler)
     document.addEventListener('mousedown', mousedownHandler)
 
     this.addEventListener('keydown', e => this.#keydown(e))

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

@@ -73,6 +73,11 @@ module Primer
               @content_arguments[:classes],
               "ActionListContent--hasActiveSubItem"
             )
+          else
+            @system_arguments[:classes] = class_names(
+              @system_arguments[:classes],
+              "ActionListItem--navActive" => active?
+            )
           end
 
           super

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

@@ -1 +1 @@
-.Overlay[popover]{border-width:0;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
+.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}

data/app/components/primer/alpha/overlay.css.json

@@ -4,8 +4,5 @@
     ".Overlay[popover]",
     ".Overlay[popover]:not(:open)",
     "anchored-position"
-  ],
-  "classes": [
-    "Overlay"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CACf,SAAU,CACV,iBACF,CAGA,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CAGf,eAAgB,CAFhB,SAAU,CACV,iBAEF,CAGA,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}

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

@@ -2,6 +2,7 @@
   border-width: 0;
   padding: 0;
   position: absolute;
+  min-width: 192px;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-no-unknown */

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

@@ -63,28 +63,33 @@ module Primer
       DEFAULT_POPOVER = :auto
       POPOVER_OPTIONS = [DEFAULT_POPOVER, :manual].freeze
 
-      ROLE_OPTIONS = [:dialog, :menu].freeze
+      ROLE_OPTIONS = [:dialog, :menu, nil].freeze
 
       # Optional button to open the Overlay.
       #
-      # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
-      renders_one :show_button, lambda { |icon: nil, **system_arguments|
-        system_arguments[:classes] = class_names(
-          system_arguments[:classes]
+      # @param icon [String] Name of <%= link_to_octicons %> to use instead of text. If provided, a <%= link_to_component(Primer::Beta::IconButton) %> will be rendered. Otherwise a <%= link_to_component(Primer::Beta::Button) %> will be rendered.
+      # @param controls [String] The ID of the menu this button controls. Used internally.
+      # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %> depending on the presence of the `icon:` argument.
+      renders_one :show_button, lambda { |icon: nil, controls: nil, **button_arguments|
+        button_arguments[:id] ||= show_button_id
+        @system_arguments[:anchor] = button_arguments[:id]
+        button_arguments["popovertarget"] = @id
+        button_arguments[:aria] = merge_aria(
+          button_arguments,
+          { aria: { controls: controls, haspopup: "true" } }
         )
-        system_arguments[:id] = show_button_id
-        system_arguments["popovertoggletarget"] = overlay_id
-        system_arguments[:aria] = (system_arguments[:aria] || {}).merge({ controls: overlay_id, haspopup: "true" })
+
         if icon.present?
-          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+          Primer::Beta::IconButton.new(icon: icon, **button_arguments)
         else
-          Primer::Beta::Button.new(**system_arguments)
+          Primer::Beta::Button.new(**button_arguments)
         end
       }
 
       # Header content.
       #
       # @param divider [Boolean] Show a divider between the header and body.
+      # @param size [Symbol] One of <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>.
       # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :header, lambda { |divider: false, size: :medium, visually_hide_title: @visually_hide_title, **system_arguments|
@@ -134,7 +139,6 @@ module Primer
       # @param title [String] Describes the content of the Overlay.
       # @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
       # @param popover [Symbol] The popover behaviour. <%= one_of(Primer::Alpha::Overlay::POPOVER_OPTIONS) %>
-      # @param popover [Symbol] The popover behaviour. <%= one_of(Primer::Alpha::Overlay::POPOVER_OPTIONS) %>
       # @param size [Symbol] The size of the Overlay. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>
       # @param padding [Symbol] The padding given to the Overlay body. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %>
       # @param anchor [String] An ID of the element to anchor onto. Defaults to the `show_button`.
@@ -147,7 +151,7 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         title:,
-        role:,
+        role: nil,
         subtitle: nil,
         popover: DEFAULT_POPOVER,
         size: DEFAULT_SIZE,
@@ -163,7 +167,7 @@ module Primer
       )
         @system_arguments = deny_tag_argument(**system_arguments)
 
-        @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role)
+        @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role) if role.present?
 
         @system_arguments[:id] = id.to_s
         @system_arguments[:classes] = class_names(
@@ -198,16 +202,12 @@ module Primer
 
       private
 
-      def overlay_id
-        @system_arguments[:id]
-      end
-
       def title_id
-        "overlay-title-#{overlay_id}"
+        "overlay-title-#{@id}"
       end
 
       def show_button_id
-        "overlay-show-#{overlay_id}"
+        "overlay-show-#{@id}"
       end
     end
   end

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

@@ -27,20 +27,5 @@
     ".SegmentedControl--fullWidth .SegmentedControl-item",
     ".SegmentedControl--fullWidth .Button--iconOnly",
     ".SegmentedControl--fullWidth .Button-withTooltip"
-  ],
-  "classes": [
-    "SegmentedControl",
-    "SegmentedControl-item",
-    "SegmentedControl-item--selected",
-    "Button",
-    "Button-label",
-    "Button--small",
-    "Button--iconOnly",
-    "Button--medium",
-    "Button--large",
-    "Button--invisible",
-    "Button--invisible-noVisuals",
-    "SegmentedControl--fullWidth",
-    "Button-withTooltip"
   ]
 }

data/app/components/primer/alpha/tab_nav.css.json

@@ -20,15 +20,5 @@
     ".tabnav-extra>.octicon",
     "a.tabnav-extra:hover",
     ".tabnav-btn"
-  ],
-  "classes": [
-    "tabnav",
-    "tabnav-tabs",
-    "tabnav-tab",
-    "selected",
-    "octicon",
-    "Counter",
-    "tabnav-extra",
-    "tabnav-btn"
   ]
 }

data/app/components/primer/alpha/text_field.css.json

@@ -130,43 +130,5 @@
     "input.FormControl-radio[type=radio]:checked",
     "input.FormControl-radio[type=radio]:checked:disabled",
     "input.FormControl-radio[type=radio]:focus-visible"
-  ],
-  "classes": [
-    "FormControl",
-    "FormControl--fullWidth",
-    "FormControl-label",
-    "FormControl-caption",
-    "FormControl-inlineValidation",
-    "FormControl-spacingWrapper",
-    "FormControl-horizontalGroup",
-    "FormControl-input",
-    "FormControl-select",
-    "FormControl-textarea",
-    "FormControl-small",
-    "FormControl-medium",
-    "FormControl-large",
-    "FormControl-inset",
-    "FormControl-monospace",
-    "FormControl-error",
-    "FormControl-success",
-    "FormControl-warning",
-    "FormControl-toggleSwitchInput",
-    "FormControl-input-wrap",
-    "FormControl-input-leadingVisualWrap",
-    "FormControl-input-leadingVisual",
-    "FormControl-input-trailingAction",
-    "FormControl-input-trailingAction--divider",
-    "FormControl-input-wrap--leadingVisual",
-    "FormControl-input-wrap--trailingAction",
-    "FormControl-input-wrap-trailingAction--divider",
-    "FormControl-select-wrap",
-    "FormControl-checkbox-wrap",
-    "FormControl-radio-wrap",
-    "FormControl-checkbox-labelWrap",
-    "FormControl-radio-labelWrap",
-    "FormControl-check-group-wrap",
-    "FormControl-radio-group-wrap",
-    "FormControl-checkbox",
-    "FormControl-radio"
   ]
 }

data/app/components/primer/alpha/toggle_switch.css.json

@@ -36,21 +36,5 @@
     ".ToggleSwitch-statusOff",
     ".ToggleSwitch--statusAtEnd",
     ".ToggleSwitch--statusAtEnd .ToggleSwitch-status"
-  ],
-  "classes": [
-    "ToggleSwitch",
-    "ToggleSwitch--checked",
-    "ToggleSwitch-statusOn",
-    "ToggleSwitch-statusOff",
-    "ToggleSwitch-track",
-    "ToggleSwitch-knob",
-    "ToggleSwitch-lineIcon",
-    "ToggleSwitch-circleIcon",
-    "ToggleSwitch-icons",
-    "ToggleSwitch-status",
-    "ToggleSwitch-statusIcon",
-    "ToggleSwitch--small",
-    "ToggleSwitch--disabled",
-    "ToggleSwitch--statusAtEnd"
   ]
 }

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

@@ -24,18 +24,5 @@
     ".UnderlineNav--full .UnderlineNav-body",
     ".UnderlineNav-octicon",
     ".UnderlineNav-container"
-  ],
-  "classes": [
-    "UnderlineNav",
-    "Counter",
-    "Counter--primary",
-    "UnderlineNav-body",
-    "UnderlineNav-item",
-    "selected",
-    "UnderlineNav--right",
-    "UnderlineNav-actions",
-    "UnderlineNav--full",
-    "UnderlineNav-octicon",
-    "UnderlineNav-container"
   ]
 }

data/app/components/primer/beta/auto_complete/auto_complete.html.erb

@@ -18,7 +18,7 @@
     <% end %>
   </div>
   <div class="Overlay-backdrop--anchor">
-    <div class="Overlay Overlay--height-auto Overlay--width-auto">
+    <div class="<%= @overlay_classes %>">
       <div class="Overlay-body Overlay-body--paddingNone">
         <%= results %>
       </div>

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

@@ -22,6 +22,17 @@ module Primer
       }.freeze
       SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
+      DEFAULT_WIDTH = :auto
+      WIDTH_MAPPINGS = {
+        DEFAULT_WIDTH => "Overlay--width-auto",
+        :small => "Overlay--width-small",
+        :medium => "Overlay--width-medium",
+        :large => "Overlay--width-large",
+        :xlarge => "Overlay--width-xlarge",
+        :xxlarge => "Overlay--width-xxlarge"
+      }.freeze
+      WIDTH_OPTIONS = WIDTH_MAPPINGS.keys
+
       # Customizable results list.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -156,12 +167,13 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       # @param size [Hash] Input size can be small, medium (default), or large
       # @param full_width [Boolean] Input can be full-width or fit to content
+      # @param width [String] Optional parameter to set max width of results list. <%= one_of(Primer::Beta::AutoComplete::WIDTH_OPTIONS) %>
       # @param disabled [Boolean] Disabled input
       # @param invalid [Boolean] Invalid input
       # @param placeholder [String] The placeholder text displayed within the input
       # @param inset [Boolean] subtle input background color
       # @param monospace [Boolean] monospace input font family
-      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
+      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, width: DEFAULT_WIDTH, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
         @label_text = label_text
         @list_id = list_id
         @input_id = input_id
@@ -179,6 +191,7 @@ module Primer
         @inset = inset
         @monospace = monospace
         @full_width = full_width
+        @width = width
         @field_wrap_classes = class_names(
           "FormControl-input-wrap",
           SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
@@ -188,6 +201,11 @@ module Primer
           "FormControl",
           "FormControl--fullWidth": full_width
         )
+        @overlay_classes = class_names(
+          "Overlay",
+          "Overlay--height-auto",
+          WIDTH_MAPPINGS[fetch_or_fallback(WIDTH_OPTIONS, @width, DEFAULT_WIDTH)]
+        )
       end
 
       # add `input` and `results` without needing to explicitly call them in the view

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

@@ -13,19 +13,5 @@
     ".avatar-6",
     ".avatar-7",
     ".avatar-8"
-  ],
-  "classes": [
-    "avatar",
-    "avatar-link",
-    "avatar-group-item",
-    "avatar-1",
-    "avatar-2",
-    "avatar-small",
-    "avatar-3",
-    "avatar-4",
-    "avatar-5",
-    "avatar-6",
-    "avatar-7",
-    "avatar-8"
   ]
 }

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

@@ -24,14 +24,5 @@
     ".AvatarStack--right .avatar.avatar-more:before",
     ".AvatarStack--right .avatar.avatar-more:after",
     ".AvatarStack--right .avatar"
-  ],
-  "classes": [
-    "AvatarStack",
-    "AvatarStack-body",
-    "AvatarStack--two",
-    "AvatarStack--three-plus",
-    "avatar",
-    "avatar-more",
-    "AvatarStack--right"
   ]
 }

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

@@ -18,17 +18,5 @@
     ".blankslate-large h3",
     ".blankslate-large p",
     ".blankslate-clean-background"
-  ],
-  "classes": [
-    "blankslate",
-    "blankslate-icon",
-    "blankslate-image",
-    "blankslate-heading",
-    "blankslate-action",
-    "blankslate-capped",
-    "blankslate-spacious",
-    "blankslate-narrow",
-    "blankslate-large",
-    "blankslate-clean-background"
   ]
 }

data/app/components/primer/beta/border_box.css.json

@@ -50,37 +50,5 @@
     ".Box-row--blue",
     ".Box-row--gray",
     ".Box-btn-octicon.btn-octicon"
-  ],
-  "classes": [
-    "Box",
-    "Box--condensed",
-    "Box-body",
-    "Box-footer",
-    "Box-header",
-    "Box-btn-octicon",
-    "btn-octicon",
-    "Box-row",
-    "Box--spacious",
-    "Box-title",
-    "Box-row--unread",
-    "unread",
-    "navigation-focus",
-    "Box-row--drag-button",
-    "is-dragging",
-    "sortable-chosen",
-    "sortable-ghost",
-    "Box-row--drag-hide",
-    "Box-row--focus-gray",
-    "Box-row--focus-blue",
-    "Box-row--hover-gray",
-    "Box-row--hover-blue",
-    "Box-row-link",
-    "Box--scrollable",
-    "Box--blue",
-    "Box--danger",
-    "Box-header--blue",
-    "Box-row--yellow",
-    "Box-row--blue",
-    "Box-row--gray"
   ]
 }

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

@@ -26,7 +26,7 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       # @accessibility
-      # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+      # When using header.with_title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
       renders_one :header, "Primer::Beta::BorderBox::Header"
 
       # Optional Body.
@@ -72,8 +72,8 @@ module Primer
 
       # @example Header with title, body, rows, and footer
       #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-      #     <% component.with_header do |h| %>
-      #       <% h.title(tag: :h2) do %>
+      #     <% component.with_header do |header| %>
+      #       <% header.with_title(tag: :h2) do %>
       #         Header
       #       <% end %>
       #     <% end %>

data/app/components/primer/beta/breadcrumbs.css.json

@@ -7,9 +7,5 @@
     ".breadcrumb-item-selected:after",
     ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
     ".breadcrumb-item-selected a"
-  ],
-  "classes": [
-    "breadcrumb-item",
-    "breadcrumb-item-selected"
   ]
 }

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

@@ -1 +1 @@
-:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
+:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,4px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}