primer_view_components 0.1.9 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,oEAAsE,CACtE,4CAA8C,CAH9C,eAAgB,CADhB,0CAKF,CAEA,WAKE,yEAA2E,CAD3E,6BAA8B,CAF9B,aAAc,CACd,2GAA8G,CAF9G,iBA+EF,CAzEE,uBACE,YAAa,CAEb,sDAKF,CAHE,qDAHA,qDAKA,CAGF,sBACE,eAAgB,CAChB,yDAMF,CAHE,mDAFA,wDAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,0CAA4C,CAE5C,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,wCACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,yCACF,CAGE,0BACE,4BACF,CAIJ,cAQE,yEAA2E,CAD3E,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,2GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,qDAAuD,CACvD,sDACF,CAEA,yBACE,eAAgB,CAEhB,wDAA0D,CAD1D,yDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium, 6px);\n    border-top-right-radius: var(--borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium, 6px);\n    border-top-right-radius: var(--borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--borderRadius-medium, 6px);\n  }\n}\n"]}
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,kFAAiE,CACjE,4CAAyC,CAHzC,eAAgB,CADhB,0CAKF,CAEA,WAKE,uFAAsE,CADtE,6BAA8B,CAF9B,aAAc,CACd,6GAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,sDAKF,CAHE,qDAHA,qDAKA,CAGF,sBACE,eAAgB,CAChB,yDAMF,CAHE,mDAFA,wDAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,4CAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,2CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,4CACF,CAGE,0BACE,4BACF,CAIJ,cAQE,uFAAsE,CADtE,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,6GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,qDAAkD,CAClD,sDACF,CAEA,yBACE,eAAgB,CAEhB,wDAAqD,CADrD,yDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--stack-gap-normal);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--borderWidth-thin) solid var(--color-border-default);\n  border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  color: var(--color-fg-default);\n  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--control-medium-gap);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--control-small-gap);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--control-small-gap);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--color-fg-default);\n  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n"]}

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

@@ -3,37 +3,37 @@
 /* A menu on the side of a page, defaults to left side. e.g. github.com/about */
 
 .menu {
-  margin-bottom: var(--stack-gap-normal, 16px);
+  margin-bottom: var(--stack-gap-normal);
   list-style: none;
   background-color: var(--color-canvas-default);
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium);
 }
 
 .menu-item {
   position: relative;
   display: block;
-  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   color: var(--color-fg-default);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
-    border-top-left-radius: var(--borderRadius-medium, 6px);
-    border-top-right-radius: var(--borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
 
     &::before {
-      border-top-left-radius: var(--borderRadius-medium, 6px);
+      border-top-left-radius: var(--borderRadius-medium);
     }
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
 
     &::before {
-      border-bottom-left-radius: var(--borderRadius-medium, 6px);
+      border-bottom-left-radius: var(--borderRadius-medium);
     }
   }
 
@@ -65,14 +65,14 @@
 
   & .octicon {
     width: 16px;
-    margin-right: var(--control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap);
     color: var(--color-fg-muted);
     text-align: center;
   }
 
   & .Counter {
     float: right;
-    margin-left: var(--control-small-gap, 4px);
+    margin-left: var(--control-small-gap);
   }
 
   & .menu-warning {
@@ -82,7 +82,7 @@
 
   & .avatar {
     float: left;
-    margin-right: var(--control-small-gap, 4px);
+    margin-right: var(--control-small-gap);
   }
 
   &.alert {
@@ -94,26 +94,26 @@
 
 .menu-heading {
   display: block;
-  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   margin-top: 0;
   margin-bottom: 0;
   font-size: inherit;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   color: var(--color-fg-default);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
 
   &:hover {
     text-decoration: none;
   }
 
   &:first-child {
-    border-top-left-radius: var(--borderRadius-medium, 6px);
-    border-top-right-radius: var(--borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
   }
 }

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

@@ -21,7 +21,7 @@ const overlayStack = [];
 function clickHandler(event) {
     const target = event.target;
     const button = target === null || target === void 0 ? void 0 : target.closest('button');
-    if (!button)
+    if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
         return;
     // If the user is clicking a valid dialog trigger
     let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
@@ -166,14 +166,21 @@ _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_in
         return;
     if (event.isComposing)
         return;
+    if (!this.open)
+        return;
     switch (event.key) {
         case 'Escape':
-            if (this.open) {
-                this.close();
-                event.preventDefault();
+            this.close();
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+        case 'Enter': {
+            const target = event.target;
+            if (target.getAttribute('data-close-dialog-id') === this.id) {
                 event.stopPropagation();
             }
             break;
+        }
     }
 };
 if (!window.customElements.get('modal-dialog')) {

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

@@ -13,7 +13,7 @@ function clickHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
 
-  if (!button) return
+  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
 
   // If the user is clicking a valid dialog trigger
   let dialogId = button?.getAttribute('data-show-dialog-id')
@@ -167,15 +167,22 @@ export class ModalDialogElement extends HTMLElement {
   #keydown(event: Event) {
     if (!(event instanceof KeyboardEvent)) return
     if (event.isComposing) return
+    if (!this.open) return
 
     switch (event.key) {
       case 'Escape':
-        if (this.open) {
-          this.close()
-          event.preventDefault()
+        this.close()
+        event.preventDefault()
+        event.stopPropagation()
+        break
+      case 'Enter': {
+        const target = event.target as HTMLElement
+
+        if (target.getAttribute('data-close-dialog-id') === this.id) {
           event.stopPropagation()
         }
         break
+      }
     }
   }
 }

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

@@ -80,6 +80,8 @@ module Primer
             )
           end
 
+          @content_arguments[:"aria-current"] = "page" if active?
+
           super
 
           raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?

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

@@ -203,6 +203,9 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
     if (currentlySelectedItem)
         __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
     navItem.classList.add('ActionListItem--navActive');
+    if (navItem.children.length > 0) {
+        navItem.children[0].setAttribute('aria-current', 'page');
+    }
     const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
     if (parentMenu) {
         this.expandItem(parentMenu);
@@ -210,6 +213,9 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
     }
 }, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
     navItem.classList.remove('ActionListItem--navActive');
+    if (navItem.children.length > 0) {
+        navItem.children[0].removeAttribute('aria-current');
+    }
     const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
     if (parentMenu) {
         this.collapseItem(parentMenu);

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

@@ -30,43 +30,62 @@ module Primer
         ).with_content(title)
       }
 
-      # Groups. Each group is a list of links and a (required) heading.
+      # @!parse
+      #   # Adds an item to the list.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
+      #   def with_group(**system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a group to the list. A group is a list of links and a (required) heading.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Group) %>.
+      #   def with_group(**system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a divider to the list. Dividers visually separate items and groups.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+      #   def with_divider(**system_arguments, &block)
+      #   end
+
+      # Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.
       #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Group) %>.
-      def with_group(**system_arguments, &block)
-        # This is a giant hack that should be removed when groups/items can be combined and converted into a polymorphic slot.
-        # This feature needs to land in view_component first: https://github.com/ViewComponent/view_component/pull/1652
-        set_slot(
-          :items,
-          { renderable: Primer::Alpha::NavList::Group, collection: true },
-          selected_item_id: @selected_item_id,
-          **system_arguments,
-          &block
-        )
-      end
-
-      # Adds a divider to the list of items.
-      #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
-      def with_divider(**system_arguments, &block)
-        # This is a giant hack that should be removed when :items can be converted into a polymorphic slot.
-        # This feature needs to land in view_component first: https://github.com/ViewComponent/view_component/pull/1652
-        set_slot(:items, { renderable: Primer::Alpha::NavList::Divider, collection: true }, **system_arguments, &block)
-      end
-
-      # Items.
-      #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
-      renders_many :items, lambda { |component_klass: Primer::Alpha::NavList::Item, **system_arguments, &block|
-        # dummy group just so we have something to pass as the list: argument below
-        @top_level_group ||= Primer::Alpha::NavList::Group.new(selected_item_id: @selected_item_id)
-
-        component_klass.new(
-          list: @top_level_group,
-          selected_item_id: @selected_item_id,
-          **system_arguments,
-          &block
-        )
+      renders_many :items, types: {
+        item: {
+          renders: lambda { |component_klass: Primer::Alpha::NavList::Item, **system_arguments, &block|
+            # dummy group just so we have something to pass as the list: argument below
+            @top_level_group ||= Primer::Alpha::NavList::Group.new(selected_item_id: @selected_item_id)
+
+            component_klass.new(
+              list: @top_level_group,
+              selected_item_id: @selected_item_id,
+              **system_arguments,
+              &block
+            )
+          },
+
+          as: :item
+        },
+
+        divider: {
+          renders: Primer::Alpha::NavList::Divider,
+          as: :divider
+        },
+
+        group: {
+          renders: lambda { |**system_arguments, &block|
+            Primer::Alpha::NavList::Group.new(
+              selected_item_id: @selected_item_id,
+              **system_arguments,
+              &block
+            )
+          },
+
+          as: :group
+        }
       }
 
       # @example Items and headings

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

@@ -220,6 +220,10 @@ export class NavListElement extends HTMLElement {
 
     navItem.classList.add('ActionListItem--navActive')
 
+    if (navItem.children.length > 0) {
+      navItem.children[0].setAttribute('aria-current', 'page')
+    }
+
     const parentMenu = this.#findParentMenu(navItem)
 
     if (parentMenu) {
@@ -231,6 +235,10 @@ export class NavListElement extends HTMLElement {
   #deselect(navItem: HTMLElement) {
     navItem.classList.remove('ActionListItem--navActive')
 
+    if (navItem.children.length > 0) {
+      navItem.children[0].removeAttribute('aria-current')
+    }
+
     const parentMenu = this.#findParentMenu(navItem)
 
     if (parentMenu) {

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

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" hidden>
+<svg xmlns="http://www.w3.org/2000/svg" hidden> <%# erblint:disable GitHub::Accessibility::SvgHasAccessibleText %>
   <%= symbol_tags %>
 </svg>

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

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

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

@@ -2,7 +2,6 @@
   "name": "alpha/overlay",
   "selectors": [
     ".Overlay[popover]",
-    ".Overlay[popover]:not(:popover-open)",
-    "anchored-position"
+    ".Overlay[popover]:not(.\\:popover-open)"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CAGf,eAAgB,CAFhB,SAAU,CACV,iBAEF,CAGA,qCACE,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(:popover-open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CAIf,UAAW,CADX,eAAgB,CAFhB,SAAU,CACV,iBAGF,CAEA,uCACE,YACF,CAGA,kCACE,uCACE,cACF,CACF,CAGA,0BACE,uCACI,cACJ,CACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n}\n\n.Overlay[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  .Overlay[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n\n/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */\n@supports selector(:open) {\n  .Overlay[popover]:not(.\\:popover-open) {\n      display: revert;\n  }\n}\n"]}

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

@@ -3,13 +3,23 @@
   padding: 0;
   position: absolute;
   min-width: 192px;
+  inset: auto;
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-.Overlay[popover]:not(:popover-open) {
+.Overlay[popover]:not(.\:popover-open) {
   display: none;
 }
 
-anchored-position {
-  display: block;
+/* This reverts the declaration above for native popover, where `:popover-open` is supported */
+@supports selector(:popover-open) {
+  .Overlay[popover]:not(.\:popover-open) {
+    display: revert;
+  }
+}
+
+/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */
+@supports selector(:open) {
+  .Overlay[popover]:not(.\:popover-open) {
+      display: revert;
+  }
 }

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

@@ -1 +1 @@
-.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-segmented-control-button-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,6px);margin-top:var(--control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed, 4px) - var(--borderWidth-thin, 1px))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size, 28px) - var(--control-xsmall-paddingInline-condensed, 4px)*2 - var(--borderWidth-thin, 1px)*2);padding:0 calc(var(--control-small-paddingInline-condensed, 8px) - var(--control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px)*2 - var(--borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px);min-width:var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px)*2 - var(--borderWidth-thin, 1px)*2);padding:0 calc(var(--control-medium-paddingInline-normal, 12px) - var(--control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px)*2 - var(--borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px);min-width:var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px)*2 - var(--borderWidth-thin, 1px)*2);padding:0 calc(var(--control-large-paddingInline-spacious, 16px) - var(--control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px)*2 - var(--borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,40px);min-width:var(--control-large-size,40px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
+.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-segmented-control-button-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}

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

@@ -1 +1 @@
-{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,4CAA8C,CAH9C,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAsE,CACtE,4CAA8C,CAF9C,mBAAoB,CAGpB,yDAA2D,CAJ3D,iBAiIF,CA1HE,uDACE,yDAA0D,CAC1D,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,gDAME,uFAA2F,CAD3F,UAAW,CAHX,gBAAiB,CAEjB,oDAAsD,CADtD,iDAAmD,CAFnD,iBAMF,CAIF,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eAOF,CAJE,6CAEE,yDAA0D,CAD1D,sGAEF,CAGF,sCACE,oIAGC,CACD,sHAaF,CAVE,uDACE,oIAQF,CAFI,8DCvFR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UDuFgG,CAK9F,uCACE,qIAGC,CACD,qHAaF,CAVE,wDACE,oIAQF,CAFI,+DC3GR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD2GgG,CAK9F,sCACE,oIAGC,CACD,sHAaF,CAVE,uDACE,mIAQF,CAFI,8DC/HR,WAAA,YAAA,SAAA,0CAAA,yCAAA,kBAAA,QAAA,4CAAA,UD+H8F,CAK5F,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--color-segmented-control-bg);\n  border-radius: var(--borderRadius-medium, 6px);\n}\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n  border-radius: var(--borderRadius-medium, 6px);\n  padding: var(--control-xsmall-paddingInline-condensed, 4px);\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--color-segmented-control-button-bg);\n    border-color: var(--color-segmented-control-button-selected-border);\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold, 600);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock, 6px);\n      margin-bottom: var(--control-medium-paddingBlock, 6px);\n      content: '';\n      border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    border: 0;\n    font-weight: var(--base-text-weight-normal, 400);\n    transition: none;\n    color: var(--color-btn-text);\n\n    &:focus-visible {\n      outline-offset: calc(var(--control-xsmall-paddingInline-condensed, 4px) - var(--borderWidth-thin, 1px));\n      border-radius: calc(var(--borderRadius-medium, 6px) - 5px);\n    }\n  }\n\n  & .Button--small {\n    height: calc(\n      var(--control-small-size, 28px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -\n        var(--borderWidth-thin, 1px) * 2\n    );\n    padding: 0\n      calc(var(--control-small-paddingInline-condensed, 8px) - var(--control-xsmall-paddingInline-condensed, 4px));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -\n          var(--borderWidth-thin, 1px) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);\n      }\n    }\n  }\n\n  & .Button--medium {\n    height: calc(\n      var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -\n        var(--borderWidth-thin, 1px) * 2\n    );\n    padding: 0\n      calc(var(--control-medium-paddingInline-normal, 12px) - var(--control-xsmall-paddingInline-condensed, 4px));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -\n          var(--borderWidth-thin, 1px) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);\n      }\n    }\n  }\n\n  & .Button--large {\n    height: calc(\n      var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -\n        var(--borderWidth-thin, 1px) * 2\n    );\n    padding: 0\n      calc(var(--control-large-paddingInline-spacious, 16px) - var(--control-xsmall-paddingInline-condensed, 4px));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -\n          var(--borderWidth-thin, 1px) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-large-size, 40px), var(--control-large-size, 40px);\n      }\n    }\n  }\n\n  & .Button--iconOnly {\n    padding: initial;\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--color-btn-text);\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* is .Button-withTooltip used anywhere? can't find use of it */\n  & .Button--iconOnly,\n  & .Button-withTooltip {\n    width: 100%;\n  }\n}\n",null]}
+{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,4CAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,4CAAyC,CAFzC,mBAAoB,CAGpB,4DAAsD,CAJtD,iBAwHF,CAjHE,uDACE,yDAA0D,CAC1D,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,uFAAsE,CADtE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAA2C,CAC3C,eAOF,CAJE,6CAEE,wDAAqD,CADrD,sHAEF,CAGF,sCACE,sJAEC,CACD,yHAWF,CATE,uDACE,mJAOF,CAFI,8DCpFR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UDoFoF,CAKlF,uCACE,oJAEC,CACD,wHAWF,CATE,wDACE,mJAOF,CAFI,+DCrGR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UDqGoF,CAKlF,sCACE,qJAEC,CACD,uHAWF,CATE,uDACE,oJAOF,CAFI,8DCtHR,WAAA,YAAA,SAAA,4CAAA,2CAAA,kBAAA,QAAA,4CAAA,UDsHkF,CAKhF,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--color-segmented-control-bg);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  padding: var(--control-xsmall-paddingInline-condensed);\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--color-segmented-control-button-bg);\n    border-color: var(--color-segmented-control-button-selected-border);\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--color-border-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    transition: none;\n    color: var(--color-btn-text);\n\n    &:focus-visible {\n      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - 5px);\n    }\n  }\n\n  & .Button--small {\n    height: calc(\n      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n      }\n    }\n  }\n\n  & .Button--medium {\n    height: calc(\n      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n      }\n    }\n  }\n\n  & .Button--large {\n    height: calc(\n      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);\n      }\n    }\n  }\n\n  & .Button--iconOnly {\n    padding: initial;\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--color-btn-text);\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* is .Button-withTooltip used anywhere? can't find use of it */\n  & .Button--iconOnly,\n  & .Button-withTooltip {\n    width: 100%;\n  }\n}\n",null]}

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

@@ -4,15 +4,15 @@
   display: inline-flex;
   list-style: none;
   background-color: var(--color-segmented-control-bg);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
 }
 
 .SegmentedControl-item {
   position: relative;
   display: inline-flex;
-  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
-  border-radius: var(--borderRadius-medium, 6px);
-  padding: var(--control-xsmall-paddingInline-condensed, 4px);
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  padding: var(--control-xsmall-paddingInline-condensed);
 
   /* Selected ---------------------------------------- */
   &.SegmentedControl-item--selected {
@@ -20,7 +20,7 @@
     border-color: var(--color-segmented-control-button-selected-border);
 
     & .Button {
-      font-weight: var(--base-text-weight-semibold, 600);
+      font-weight: var(--base-text-weight-semibold);
 
       &:hover {
         background-color: transparent;
@@ -40,7 +40,7 @@
   & .Button-label[data-content]::before {
     display: block;
     height: 0;
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
     visibility: hidden;
     content: attr(data-content);
   }
@@ -50,82 +50,73 @@
     &::before {
       position: absolute;
       inset: 0 0 0 -1px;
-      margin-top: var(--control-medium-paddingBlock, 6px);
-      margin-bottom: var(--control-medium-paddingBlock, 6px);
+      margin-top: var(--control-medium-paddingBlock);
+      margin-bottom: var(--control-medium-paddingBlock);
       content: '';
-      border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+      border-left: var(--borderWidth-thin) solid var(--color-border-default);
     }
   }
 
   /* Button ----------------------------------------- */
   & .Button {
     border: 0;
-    font-weight: var(--base-text-weight-normal, 400);
+    font-weight: var(--base-text-weight-normal);
     transition: none;
     color: var(--color-btn-text);
 
     &:focus-visible {
-      outline-offset: calc(var(--control-xsmall-paddingInline-condensed, 4px) - var(--borderWidth-thin, 1px));
-      border-radius: calc(var(--borderRadius-medium, 6px) - 5px);
+      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
+      border-radius: calc(var(--borderRadius-medium) - 5px);
     }
   }
 
   & .Button--small {
     height: calc(
-      var(--control-small-size, 28px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--borderWidth-thin, 1px) * 2
+      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
     );
-    padding: 0
-      calc(var(--control-small-paddingInline-condensed, 8px) - var(--control-xsmall-paddingInline-condensed, 4px));
+    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));
 
     &.Button--iconOnly {
       width: calc(
-        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--borderWidth-thin, 1px) * 2
+        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
+        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
       }
     }
   }
 
   & .Button--medium {
     height: calc(
-      var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--borderWidth-thin, 1px) * 2
+      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
     );
-    padding: 0
-      calc(var(--control-medium-paddingInline-normal, 12px) - var(--control-xsmall-paddingInline-condensed, 4px));
+    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));
 
     &.Button--iconOnly {
       width: calc(
-        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--borderWidth-thin, 1px) * 2
+        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
+        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
       }
     }
   }
 
   & .Button--large {
     height: calc(
-      var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--borderWidth-thin, 1px) * 2
+      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
     );
-    padding: 0
-      calc(var(--control-large-paddingInline-spacious, 16px) - var(--control-xsmall-paddingInline-condensed, 4px));
+    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));
 
     &.Button--iconOnly {
       width: calc(
-        var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--borderWidth-thin, 1px) * 2
+        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--control-large-size, 40px), var(--control-large-size, 40px);
+        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);
       }
     }
   }

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

@@ -1 +1 @@
-.tabnav{border-bottom:var(--borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--stack-gap-normal,16px);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin, 1px)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,1px) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,14px);line-height:23px;padding:var(--base-size-8,8px) var(--control-medium-paddingInline-spacious,16px);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap,4px)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,4px)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--text-body-size-small,12px);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,8px)}
+.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}

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

@@ -1 +1 @@
-{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,2EAA6E,CAD7E,0CAA4C,CAD5C,YAGF,CAEA,aACE,YAAa,CACb,mDAAsD,CACtD,aACF,CAEA,YAQE,wBAA6B,CAE7B,8CAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,2CAA6C,CAC7C,gBAAiB,CAFjB,gFAAmF,CAInF,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,+EAAkF,CAHlF,6BAQF,CAHE,oIACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,yFAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,yCAEF,CAEA,qBAEE,aAAc,CADd,wCAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,0CAA4C,CAD5C,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,wDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--stack-gap-normal, 16px);\n  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);\n  overflow: auto;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  padding: var(--base-size-8, 8px) var(--control-medium-paddingInline-spacious, 16px);\n  font-size: var(--text-body-size-medium, 14px);\n  line-height: 23px;\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin, 1px) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--color-fg-default);\n    background-color: var(--color-canvas-default); /* cover bottom border */\n    border-color: var(--color-border-default);\n    border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--color-fg-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--control-small-gap, 4px);\n    color: var(--color-fg-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--control-small-gap, 4px);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  padding-top: 10px;\n  margin-left: 10px;\n  font-size: var(--text-body-size-small, 12px);\n  color: var(--color-fg-muted);\n\n  & > .octicon {\n    margin-right: 2px;\n  }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n  color: var(--color-accent-fg);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  margin-left: var(--controlStack-medium-gap-condensed, 8px);\n}\n"]}
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,yFAAwE,CADxE,0CAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,iEAAiD,CACjD,aACF,CAEA,YAQE,wBAA6B,CAE7B,4DAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,8CAAuC,CACvC,gBAAiB,CAFjB,kFAAwE,CAIxE,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,+EAAwE,CAHxE,6BAQF,CAHE,oIACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,yFAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,4CAEF,CAEA,qBAEE,aAAc,CADd,2CAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,4CAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,0DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow: auto;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  line-height: 23px;\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--color-fg-default);\n    background-color: var(--color-canvas-default); /* cover bottom border */\n    border-color: var(--color-border-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--color-fg-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--color-fg-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--control-small-gap);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  padding-top: 10px;\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--color-fg-muted);\n\n  & > .octicon {\n    margin-right: 2px;\n  }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n  color: var(--color-accent-fg);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}