primer_view_components 0.1.8 → 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');
@@ -31,6 +31,10 @@ function clickHandler(event) {
         if (dialog instanceof ModalDialogElement) {
             dialog.openButton = button;
             dialog.show();
+            // A buttons default behaviour in some browsers it to send a pointer event
+            // If the behaviour is allowed through the dialog will be shown but then
+            // quickly hidden- as if it were never shown. This prevents that.
+            event.preventDefault();
             return;
         }
     }
@@ -96,6 +100,7 @@ export class ModalDialogElement extends HTMLElement {
             if (this.open)
                 return;
             this.setAttribute('open', '');
+            this.setAttribute('aria-disabled', 'false');
             (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
             document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
             document.body.style.overflow = 'hidden';
@@ -109,6 +114,7 @@ export class ModalDialogElement extends HTMLElement {
             if (!this.open)
                 return;
             this.removeAttribute('open');
+            this.setAttribute('aria-disabled', 'true');
             (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
             document.body.style.paddingRight = '0';
             document.body.style.overflow = 'initial';
@@ -160,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')
@@ -23,6 +23,10 @@ function clickHandler(event: Event) {
     if (dialog instanceof ModalDialogElement) {
       dialog.openButton = button
       dialog.show()
+      // A buttons default behaviour in some browsers it to send a pointer event
+      // If the behaviour is allowed through the dialog will be shown but then
+      // quickly hidden- as if it were never shown. This prevents that.
+      event.preventDefault()
       return
     }
   }
@@ -96,6 +100,7 @@ export class ModalDialogElement extends HTMLElement {
     if (value) {
       if (this.open) return
       this.setAttribute('open', '')
+      this.setAttribute('aria-disabled', 'false')
       this.#overlayBackdrop?.classList.remove('Overlay--hidden')
       document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
       document.body.style.overflow = 'hidden'
@@ -107,6 +112,7 @@ export class ModalDialogElement extends HTMLElement {
     } else {
       if (!this.open) return
       this.removeAttribute('open')
+      this.setAttribute('aria-disabled', 'true')
       this.#overlayBackdrop?.classList.add('Overlay--hidden')
       document.body.style.paddingRight = '0'
       document.body.style.overflow = 'initial'
@@ -161,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/header.html.erb

@@ -8,8 +8,10 @@
         <h2 class="Overlay-description"><%= @subtitle %></h2>
       <% end %>
     </div>
-    <div class="Overlay-actionWrap">
-      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "popoverhidetarget": @id) %>
-    </div>
+    <% if @overlay_id %>
+      <div class="Overlay-actionWrap">
+        <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "popovertarget": @overlay_id, "popovertargetaction": "hide") %>
+      </div>
+    <% end %>
   </div>
 <% end %>

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

@@ -14,7 +14,8 @@ module Primer
         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 subtitle [String] Provides additional context for the Overlay, also setting the `aria-describedby` attribute.
+        # @param overlay_id [String] Provides the id of the overlay element so the close button can close it
         # @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.
@@ -22,12 +23,14 @@ module Primer
         def initialize(
           id:,
           title:,
+          overlay_id: nil,
           subtitle: nil,
           size: DEFAULT_SIZE,
           divider: false,
           visually_hide_title: false,
           **system_arguments
         )
+          @overlay_id = overlay_id
           @id = id
           @title = title
           @subtitle = subtitle

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

@@ -1 +1 @@
-.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(: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(: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,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}
+{"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(: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/overlay.rb

@@ -94,6 +94,7 @@ module Primer
       # @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(
+          overlay_id: @id,
           id: title_id,
           title: @title,
           subtitle: @subtitle,

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]}