primer_view_components 0.0.123 → 0.1.1

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

@@ -0,0 +1,207 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Overlay components codify design patterns related to floating surfaces such
+    # as dialogs and menus. They are private components intended to be used by
+    # specialized components, and mostly contain presentational logic and
+    # behavior.
+    #
+    # @accessibility
+    #   - **Overlay Accessible Name**: An overlay should have an accessible name,
+    #   so screen readers are aware of the purpose of the Overlay when it opens.
+    #   Give an accessible name setting `:title`. The accessible name will be
+    #   used as the main heading inside the Overlay.
+    #   - **Overlay unique id**: A Overlay should be unique. Give a unique id
+    #   setting `:id`. If no `:id` is given, a default randomize hex id is
+    #   generated.
+    #
+    #   The combination of both `:title` and `:id` establishes an
+    #   `aria-labelledby` relationship between the title and the unique id
+    #   of the Overlay.
+    class Overlay < Primer::Component
+      DEFAULT_PADDING = :normal
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => nil,
+        :condensed => "Overlay-body--paddingCondensed",
+        :none => "Overlay-body--paddingNone"
+      }.freeze
+
+      PADDING_OPTIONS = PADDING_MAPPINGS.keys
+
+      DEFAULT_SIZE = :auto
+      SIZE_MAPPINGS = {
+        DEFAULT_SIZE => "Overlay--size-auto",
+        :small => "Overlay--size-small",
+        :medium => "Overlay--size-medium",
+        :medium_portrait => "Overlay--size-medium-portrait",
+        :large => "Overlay--size-large",
+        :xlarge => "Overlay--size-xlarge"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_ANCHOR_ALIGN = :start
+      ANCHOR_ALIGN_OPTIONS = [DEFAULT_ANCHOR_ALIGN, :center, :end].freeze
+
+      DEFAULT_ANCHOR_OFFSET = :normal
+      ANCHOR_OFFSET_OPTIONS = [DEFAULT_ANCHOR_OFFSET, :spacious].freeze
+
+      DEFAULT_ANCHOR_SIDE = :outside_bottom
+      ANCHOR_SIDE_MAPPINGS = {
+        :inside_top => "inside-top",
+        :inside_bottom => "inside-bottom",
+        :inside_left => "inside-left",
+        :inside_right => "inside-right",
+        :inside_center => "inside-center",
+        :outside_top => "outside-top",
+        DEFAULT_ANCHOR_SIDE => "outside-bottom",
+        :outside_left => "outside-left",
+        :outside_right => "outside-right"
+      }.freeze
+      ANCHOR_SIDE_OPTIONS = ANCHOR_SIDE_MAPPINGS.keys
+
+      DEFAULT_POPOVER = :auto
+      POPOVER_OPTIONS = [DEFAULT_POPOVER, :manual].freeze
+
+      ROLE_OPTIONS = [:dialog, :menu].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]
+        )
+        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)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
+      }
+
+      # Header content.
+      #
+      # @param divider [Boolean] Show a divider between the header and body.
+      # @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|
+        Primer::Alpha::Overlay::Header.new(
+          id: @id,
+          title: @title,
+          subtitle: @subtitle,
+          size: size,
+          divider: divider,
+          visually_hide_title: visually_hide_title,
+          **system_arguments
+        )
+      }
+
+      # Required body content.
+      #
+      # @param padding [Symbol] The padding. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |padding: @padding, **system_arguments|
+        Primer::Alpha::Overlay::Body.new(
+          padding: padding,
+          **system_arguments
+        )
+      }
+
+      # Footer content.
+      #
+      # @param show_divider [Boolean] Show a divider between the footer and body.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, "Footer"
+
+      # @example Overlay with Cancel and Submit buttons
+      #   @description
+      #     An ID is provided which enables wiring of the open and close buttons to the Overlay.
+      #   @code
+      #     <%= render(Primer::Alpha::Overlay.new(
+      #       title: "Overlay Example",
+      #       id: "my-Overlay",
+      #       role: :dialog,
+      #     )) do |d| %>
+      #       <% d.with_show_button { "Show Overlay" } %>
+      #       <% d.with_body do %>
+      #         <p>Some content</p>
+      #       <% end %>
+      #     <% end %>
+      # @param id [String] The id of the Overlay.
+      # @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`.
+      # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
+      # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+      # @param anchor_offset [Symbol] The anchor offset to give the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_OFFSET_OPTIONS) %>
+      # @param allow_out_of_bounds [Boolean] Allow the Overlay to overflow its container.
+      # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
+      # @param role [String] The ARIA role. <%= one_of(Primer::Alpha::Overlay::ROLE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        title:,
+        role:,
+        subtitle: nil,
+        popover: DEFAULT_POPOVER,
+        size: DEFAULT_SIZE,
+        padding: DEFAULT_PADDING,
+        anchor: nil,
+        anchor_align: DEFAULT_ANCHOR_ALIGN,
+        anchor_offset: DEFAULT_ANCHOR_OFFSET,
+        anchor_side: DEFAULT_ANCHOR_SIDE,
+        allow_out_of_bounds: false,
+        visually_hide_title: false,
+        id: self.class.generate_id,
+        **system_arguments
+      )
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role)
+
+        @system_arguments[:id] = id.to_s
+        @system_arguments[:classes] = class_names(
+          "Overlay",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+          system_arguments[:classes]
+        )
+        @system_arguments[:tag] = "anchored-position"
+        @system_arguments[:anchor] = anchor || "overlay-show-#{@system_arguments[:id]}"
+        @system_arguments[:align] = fetch_or_fallback(ANCHOR_ALIGN_OPTIONS, anchor_align, DEFAULT_ANCHOR_ALIGN)
+        @system_arguments[:side] = ANCHOR_SIDE_MAPPINGS[fetch_or_fallback(ANCHOR_SIDE_OPTIONS, anchor_side, DEFAULT_ANCHOR_SIDE)]
+        @system_arguments["anchor-offset"] = fetch_or_fallback(ANCHOR_OFFSET_OPTIONS, anchor_offset, DEFAULT_ANCHOR_OFFSET)
+        @system_arguments["allow-out-of-bounds"] = true if allow_out_of_bounds
+        @id = id.to_s
+        @title = title
+        @subtitle = subtitle
+        @visually_hide_title = visually_hide_title
+        @padding = padding
+
+        @system_arguments[:popover] = popover
+        @system_arguments[:aria] ||= {}
+        @system_arguments[:aria][:describedby] ||= "#{@id}-description"
+      end
+
+      def before_render
+        with_header unless header?
+        with_body unless body?
+      end
+
+      private
+
+      def overlay_id
+        @system_arguments[:id]
+      end
+
+      def show_button_id
+        "overlay-show-#{overlay_id}"
+      end
+    end
+  end
+end

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

@@ -27,5 +27,20 @@
     ".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,5 +20,15 @@
     ".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/tab_nav.rb

@@ -9,7 +9,7 @@ module Primer
     #   - By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an
     #     implicit landmark role of `navigation` which should be reserved for main links.
     #     For all other set of links, set tag to `:div`.
-    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #   - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
     #     accessibility considerations.
     class TabNav < Primer::Component
       include Primer::TabbedComponentHelper
@@ -22,13 +22,13 @@ module Primer
       TAG_DEFAULT = :nav
       TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
 
-      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
       #
       # @param selected [Boolean] Whether the tab is selected.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :tabs, lambda { |selected: false, **system_arguments|
         system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           list: true,
           selected: selected,
           **system_arguments
@@ -124,6 +124,13 @@ module Primer
 
         aria_label_for_page_nav(label)
       end
+
+      def before_render
+        # Eagerly evaluate content to avoid https://github.com/primer/view_components/issues/1790
+        content
+
+        super
+      end
     end
   end
 end

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

@@ -14,7 +14,7 @@ module Primer
       TAG_DEFAULT = :nav
       TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
 
-      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
       #
       # @param id [String] Unique ID of tab.
       # @param selected [Boolean] Whether the tab is selected.
@@ -23,7 +23,7 @@ module Primer
         system_arguments[:id] = id
         system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
 
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
           list: true,

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

@@ -130,5 +130,43 @@
     "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,5 +36,21 @@
     ".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

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color: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(--color-action-list-item-default-hover-bg);color: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(--color-primer-border-active);color: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(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.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,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color: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(--color-action-list-item-default-hover-bg);color: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(--color-primer-border-active);color: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(--color-primer-border-active);border-radius:var(--primer-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,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}

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

@@ -24,5 +24,18 @@
     ".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/alpha/underline_nav.css.map

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,0JAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-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, 600);\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(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\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, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\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(--color-primer-border-active);\n      border-radius: var(--primer-borderRadius-medium, 6px);\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, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--primer-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-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,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,mDAAqD,CALrD,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,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-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, 600);\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(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\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, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-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(--color-primer-border-active);\n      border-radius: var(--primer-borderRadius-medium, 6px);\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, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--primer-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

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

@@ -87,6 +87,7 @@
     /* current/selected underline */
     &::after {
       position: absolute;
+      z-index: 1; /* raise above full-width flash banner */
       right: 50%;
       bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
       width: 100%;

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

@@ -12,7 +12,7 @@ module Primer
     #   - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
     #     implicit landmark role of `navigation` which should be reserved for main links.
     #     For all other set of links, set tag to `:div`.
-    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #   - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
     #     accessibility considerations.
     class UnderlineNav < Primer::Component
       include Primer::TabbedComponentHelper
@@ -29,7 +29,7 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :tabs, lambda { |selected: false, **system_arguments|
         system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           list: true,
           selected: selected,
           icon_classes: "UnderlineNav-octicon",

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

@@ -6,7 +6,7 @@ module Primer
     class UnderlinePanels < Primer::Component
       include Primer::TabbedComponentHelper
       include Primer::UnderlineNavHelper
-      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
       #
       # @param id [String] Unique ID of tab.
       # @param selected [Boolean] Whether the tab is selected.
@@ -15,7 +15,7 @@ module Primer
         system_arguments[:id] = id
         system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
 
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
           list: true,

data/app/components/primer/anchored_position.d.ts

@@ -0,0 +1,27 @@
+import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
+export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
+    #private;
+    get align(): AnchorAlignment;
+    set align(value: AnchorAlignment);
+    get side(): AnchorSide;
+    set side(value: AnchorSide);
+    get anchorOffset(): number;
+    set anchorOffset(value: number | 'normal' | 'spacious');
+    get anchor(): string;
+    set anchor(value: string);
+    get anchorElement(): HTMLElement | null;
+    set anchorElement(value: HTMLElement | null);
+    get alignmentOffset(): number;
+    set alignmentOffset(value: number);
+    get allowOutOfBounds(): boolean;
+    set allowOutOfBounds(value: boolean);
+    connectedCallback(): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    update(): void;
+}
+declare global {
+    interface Window {
+        AnchoredPositionElement: typeof AnchoredPositionElement;
+    }
+}

data/app/components/primer/anchored_position.js

@@ -0,0 +1,149 @@
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _AnchoredPositionElement_anchorElement, _AnchoredPositionElement_animationFrame;
+import { getAnchoredPosition } from '@primer/behaviors';
+const updateWhenVisible = (() => {
+    const anchors = new Set();
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    function updateVisibleAnchors() {
+        for (const anchor of anchors) {
+            anchor.update();
+        }
+    }
+    return (el) => {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('resize', updateVisibleAnchors);
+        intersectionObserver || (intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    target.update();
+                    anchors.add(target);
+                }
+                else {
+                    anchors.delete(target);
+                }
+            }
+        }));
+        resizeObserver || (resizeObserver = new ResizeObserver(() => {
+            for (const anchor of anchors) {
+                anchor.update();
+            }
+        }));
+        resizeObserver.observe(el.ownerDocument.documentElement);
+        intersectionObserver.observe(el);
+    };
+})();
+export default class AnchoredPositionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AnchoredPositionElement_anchorElement.set(this, null);
+        _AnchoredPositionElement_animationFrame.set(this, void 0);
+    }
+    get align() {
+        const value = this.getAttribute('align');
+        if (value === 'center' || value === 'end')
+            return value;
+        return 'start';
+    }
+    set align(value) {
+        this.setAttribute('align', `${value}`);
+    }
+    get side() {
+        const value = this.getAttribute('side');
+        if (value === 'inside-top' ||
+            value === 'inside-bottom' ||
+            value === 'inside-left' ||
+            value === 'inside-right' ||
+            value === 'inside-center' ||
+            value === 'outside-top' ||
+            value === 'outside-left' ||
+            value === 'outside-right') {
+            return value;
+        }
+        return 'outside-bottom';
+    }
+    set side(value) {
+        this.setAttribute('side', `${value}`);
+    }
+    get anchorOffset() {
+        const alias = this.getAttribute('anchor-offset');
+        if (alias === 'spacious' || alias === '8')
+            return 8;
+        return 4;
+    }
+    set anchorOffset(value) {
+        this.setAttribute('anchor-offset', `${value}`);
+    }
+    get anchor() {
+        return this.getAttribute('anchor') || '';
+    }
+    set anchor(value) {
+        this.setAttribute('anchor', `${value}`);
+    }
+    get anchorElement() {
+        if (__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f"))
+            return __classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f");
+        const idRef = this.anchor;
+        if (!idRef)
+            return null;
+        return this.ownerDocument.getElementById(idRef);
+    }
+    set anchorElement(value) {
+        __classPrivateFieldSet(this, _AnchoredPositionElement_anchorElement, value, "f");
+        if (!__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f")) {
+            this.removeAttribute('anchor');
+        }
+    }
+    get alignmentOffset() {
+        return Number(this.getAttribute('alignment-offset'));
+    }
+    set alignmentOffset(value) {
+        this.setAttribute('alignment-offset', `${value}`);
+    }
+    get allowOutOfBounds() {
+        return this.hasAttribute('allow-out-of-bounds');
+    }
+    set allowOutOfBounds(value) {
+        this.toggleAttribute('allow-out-of-bounds', value);
+    }
+    connectedCallback() {
+        this.update();
+        this.addEventListener('beforetoggle', () => this.update());
+        updateWhenVisible(this);
+    }
+    attributeChangedCallback() {
+        this.update();
+    }
+    update() {
+        if (!this.isConnected)
+            return;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
+        __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
+            const anchor = this.anchorElement;
+            if (!anchor)
+                return;
+            const { left, top, anchorSide, anchorAlign } = getAnchoredPosition(this, anchor, this);
+            this.style.top = `${top}px`;
+            this.style.left = `${left}px`;
+            this.classList.remove('Overlay--anchorAlign-start', 'Overlay--anchorAlign-center', 'Overlay--anchorAlign-end', 'Overlay--anchorSide-insideTop', 'Overlay--anchorSide-insideBottom', 'Overlay--anchorSide-insideLeft', 'Overlay--anchorSide-insideRight', 'Overlay--anchorSide-insideCenter', 'Overlay--anchorSide-outsideTop', 'Overlay--anchorSide-outsideLeft', 'Overlay--anchorSide-outsideRight');
+            this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`);
+        }), "f");
+    }
+}
+_AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
+AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+if (!customElements.get('anchored-position')) {
+    window.AnchoredPositionElement = AnchoredPositionElement;
+    customElements.define('anchored-position', AnchoredPositionElement);
+}