primer_view_components 0.0.122 → 0.1.0

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

@@ -2,8 +2,9 @@
 import {controller, target, targets} from '@github/catalyst'
 
 @controller
-class NavListElement extends HTMLElement {
+export class NavListElement extends HTMLElement {
   @target list: HTMLElement
+  @targets items: HTMLElement[]
   @target showMoreItem: HTMLElement
   @targets focusMarkers: HTMLElement[]
 
@@ -40,6 +41,43 @@ class NavListElement extends HTMLElement {
     return this.showMoreItem.getAttribute('src') || ''
   }
 
+  selectItemById(itemId: string | null): boolean {
+    if (!itemId) return false
+
+    const selectedItem = this.#findSelectedNavItemById(itemId)
+
+    if (selectedItem) {
+      this.#select(selectedItem)
+      return true
+    }
+
+    return false
+  }
+
+  selectItemByHref(href: string | null): boolean {
+    if (!href) return false
+
+    const selectedItem = this.#findSelectedNavItemByHref(href)
+
+    if (selectedItem) {
+      this.#select(selectedItem)
+      return true
+    }
+
+    return false
+  }
+
+  selectItemByCurrentLocation(): boolean {
+    const selectedItem = this.#findSelectedNavItemByCurrentLocation()
+
+    if (selectedItem) {
+      this.#select(selectedItem)
+      return true
+    }
+
+    return false
+  }
+
   // expand collapsible item onClick
   expandItem(item: HTMLElement) {
     item.nextElementSibling?.removeAttribute('data-hidden')
@@ -95,7 +133,7 @@ class NavListElement extends HTMLElement {
       this.currentPage--
       return
     }
-    const fragment = this.parseHTML(document, html)
+    const fragment = this.#parseHTML(document, html)
     fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
     this.list.insertBefore(fragment, this.showMoreItem)
     this.focusMarkers.pop()?.focus()
@@ -114,12 +152,80 @@ class NavListElement extends HTMLElement {
     }
   }
 
-  private parseHTML(document: Document, html: string): DocumentFragment {
+  #parseHTML(document: Document, html: string): DocumentFragment {
     const template = document.createElement('template')
     // eslint-disable-next-line github/no-inner-html
     template.innerHTML = html
     return document.importNode(template.content, true)
   }
+
+  #findSelectedNavItemById(itemId: string): HTMLElement | null {
+    // First we compare the selected link to data-item-id for each nav item
+    for (const navItem of this.items) {
+      if (navItem.classList.contains('ActionListItem--hasSubItem')) {
+        continue
+      }
+
+      const keys = navItem.getAttribute('data-item-id')?.split(' ') || []
+
+      if (keys.includes(itemId)) {
+        return navItem
+      }
+    }
+
+    return null
+  }
+
+  #findSelectedNavItemByHref(href: string): HTMLElement | null {
+    // If we didn't find a match, we compare the selected link to the href of each nav item
+    const selectedNavItem = this.querySelector<HTMLAnchorElement>(`.ActionListContent[href="${href}"]`)
+    if (selectedNavItem) {
+      return selectedNavItem.closest('.ActionListItem')
+    }
+
+    return null
+  }
+
+  #findSelectedNavItemByCurrentLocation(): HTMLElement | null {
+    return this.#findSelectedNavItemByHref(window.location.pathname)
+  }
+
+  #select(navItem: HTMLElement) {
+    const currentlySelectedItem = this.querySelector('.ActionListItem--navActive') as HTMLElement
+    if (currentlySelectedItem) this.#deselect(currentlySelectedItem)
+
+    navItem.classList.add('ActionListItem--navActive')
+
+    const parentMenu = this.#findParentMenu(navItem)
+
+    if (parentMenu) {
+      this.expandItem(parentMenu)
+      parentMenu.classList.add('ActionListContent--hasActiveSubItem')
+    }
+  }
+
+  #deselect(navItem: HTMLElement) {
+    navItem.classList.remove('ActionListItem--navActive')
+
+    const parentMenu = this.#findParentMenu(navItem)
+
+    if (parentMenu) {
+      this.collapseItem(parentMenu)
+      parentMenu.classList.remove('ActionListContent--hasActiveSubItem')
+    }
+  }
+
+  #findParentMenu(navItem: HTMLElement): HTMLElement | null {
+    if (!navItem.classList.contains('ActionListItem--subItem')) return null
+
+    const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent')
+
+    if (parent) {
+      return parent as HTMLElement
+    } else {
+      return null
+    }
+  }
 }
 
 declare global {

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Body` is a compositional component, used to render the
+      # Body of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Body < Primer::Component
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(padding: DEFAULT_PADDING, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-body",
+            PADDING_MAPPINGS[fetch_or_fallback(PADDING_OPTIONS, padding, DEFAULT_PADDING)],
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      DEFAULT_ALIGN_CONTENT = :end
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Overlay-footer--alignStart",
+        :center => "Overlay-footer--alignCenter",
+        DEFAULT_ALIGN_CONTENT => "Overlay-footer--alignEnd"
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # A `Overlay::Footer` is a compositional component, used to render the
+      # Footer of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Footer < Primer::Component
+        # @param show_divider [Boolean] Show a divider between the footer and body.
+        # @param align_content [Symbol] The alginment of contents. <%= one_of(Primer::Alpha::Overlay::ALIGN_CONTENT_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          show_divider: false,
+          align_content: DEFAULT_ALIGN_CONTENT,
+          **system_arguments
+        )
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-footer",
+            ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)],
+            { "Overlay-footer--divided": show_divider },
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/header.html.erb

@@ -0,0 +1,15 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <div class="Overlay-headerContentWrap">
+    <div class="Overlay-titleWrap">
+      <h1 class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
+      <% if content.present? %>
+        <%= content %>
+      <% elsif @subtitle.present? %>
+        <h2 id="<%= @id %>-description" class="Overlay-description"><%= @subtitle %></h2>
+      <% end %>
+    </div>
+    <div class="Overlay-actionWrap">
+      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "popoverhidetarget": @id) %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Header` is a compositional component, used to render the
+      # Header of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Header < Primer::Component
+        DEFAULT_SIZE = :medium
+        SIZE_MAPPINGS = {
+          DEFAULT_SIZE => nil,
+          :large => "Overlay-header--large"
+        }.freeze
+        SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+        # @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 size [Symbol] The size of the Header. <%= one_of(Primer::Alpha::Overlay::Header::SIZE_OPTIONS) %>
+        # @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 %>
+        def initialize(
+          id:,
+          title:,
+          subtitle: nil,
+          size: DEFAULT_SIZE,
+          divider: false,
+          visually_hide_title: false,
+          **system_arguments
+        )
+          @id = id
+          @title = title
+          @subtitle = subtitle
+          @visually_hide_title = visually_hide_title
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :header
+          @system_arguments[:classes] = class_names(
+            "Overlay-header",
+            { "Overlay-header--divided": divider },
+            SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+            system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,11 @@
+{
+  "name": "alpha/overlay",
+  "selectors": [
+    ".Overlay[popover]",
+    ".Overlay[popover]:not(:open)",
+    "anchored-position"
+  ],
+  "classes": [
+    "Overlay"
+  ]
+}

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

@@ -0,0 +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"]}

data/app/components/primer/alpha/overlay.html.erb

@@ -0,0 +1,11 @@
+<%= show_button %>
+
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= header %>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= body %>
+    <%= footer %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,14 @@
+.Overlay[popover] {
+  border-width: 0;
+  padding: 0;
+  position: absolute;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+.Overlay[popover]:not(:open) {
+  display: none;
+}
+
+anchored-position {
+  display: block;
+}

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

@@ -0,0 +1,194 @@
+# 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 { |**system_arguments|
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes]
+        )
+        system_arguments[:id] = "overlay-show-#{@system_arguments[:id]}"
+        system_arguments["popovertoggletarget"] = @system_arguments[:id]
+        system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
+        Primer::Beta::Button.new(**system_arguments)
+      }
+
+      # 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)],
+          "Overlay--motion-scaleFade",
+          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
+    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/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.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/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;
+    }
+}