openproject-primer_view_components 0.48.2 → 0.49.1

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

@@ -0,0 +1,297 @@
+.Stack {
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
+
+  /* non-responsive values */
+
+  &[data-padding='none'],
+  &[data-padding-narrow='none'] {
+    padding: 0;
+  }
+
+  &[data-padding='condensed'],
+  &[data-padding-narrow='condensed'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-condensed, 8px);
+  }
+
+  &[data-padding='normal'],
+  &[data-padding-narrow='normal'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-normal, 16px);
+  }
+
+  &[data-padding='spacious'],
+  &[data-padding-narrow='spacious'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-spacious, 24px);
+  }
+
+  &[data-direction='horizontal'],
+  &[data-direction-narrow='horizontal'] {
+    flex-flow: row;
+  }
+
+  &[data-direction='vertical'],
+  &[data-direction-narrow='vertical'] {
+    flex-flow: column;
+  }
+
+  &[data-gap='none'],
+  &[data-gap-narrow='none'] {
+    --stack-gap: var(--stack-gap-none, 0);
+  }
+
+  &[data-gap='condensed'],
+  &[data-gap-narrow='condensed'] {
+    --stack-gap: var(--stack-gap-condensed, 0.5rem);
+  }
+
+  &[data-gap='normal'],
+  &[data-gap-narrow='normal'] {
+    --stack-gap: var(--stack-gap-normal, 1rem);
+  }
+
+  &[data-gap='spacious'],
+  &[data-gap-narrow='spacious'] {
+    --stack-gap: var(--stack-gap-spacious, 1.5rem);
+  }
+
+  &[data-align='start'],
+  &[data-align-narrow='start'] {
+    align-items: flex-start;
+  }
+
+  &[data-align='center'],
+  &[data-align-narrow='center'] {
+    align-items: center;
+  }
+
+  &[data-align='end'],
+  &[data-align-narrow='end'] {
+    align-items: flex-end;
+  }
+
+  &[data-align='baseline'],
+  &[data-align-narrow='baseline'] {
+    align-items: baseline;
+  }
+
+  &[data-justify='start'],
+  &[data-justify-narrow='start'] {
+    justify-content: flex-start;
+  }
+
+  &[data-justify='center'],
+  &[data-justify-narrow='center'] {
+    justify-content: center;
+  }
+
+  &[data-justify='end'],
+  &[data-justify-narrow='end'] {
+    justify-content: flex-end;
+  }
+
+  &[data-justify='space-between'],
+  &[data-justify-narrow='space-between'] {
+    justify-content: space-between;
+  }
+
+  &[data-justify='space-evenly'],
+  &[data-justify-narrow='space-evenly'] {
+    justify-content: space-evenly;
+  }
+
+  &[data-wrap='wrap'],
+  &[data-wrap-narrow='wrap'] {
+    flex-wrap: wrap;
+  }
+
+  &[data-wrap='nowrap'],
+  &[data-wrap-narrow='nowrap'] {
+    flex-wrap: nowrap;
+  }
+
+  /* @custom-media --veiwportRange-regular */
+  @media (min-width: 48rem) {
+    &[data-padding-regular='none'] {
+      padding: 0;
+    }
+
+    &[data-padding-regular='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    &[data-padding-regular='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    &[data-padding-regular='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    &[data-direction-regular='horizontal'] {
+      flex-flow: row;
+    }
+
+    &[data-direction-regular='vertical'] {
+      flex-flow: column;
+    }
+
+    &[data-gap-regular='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    &[data-gap-regular='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    &[data-gap-regular='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    &[data-gap-regular='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    &[data-align-regular='start'] {
+      align-items: flex-start;
+    }
+
+    &[data-align-regular='center'] {
+      align-items: center;
+    }
+
+    &[data-align-regular='end'] {
+      align-items: flex-end;
+    }
+
+    &[data-align-regular='baseline'] {
+      align-items: baseline;
+    }
+
+    &[data-justify-regular='start'] {
+      justify-content: flex-start;
+    }
+
+    &[data-justify-regular='center'] {
+      justify-content: center;
+    }
+
+    &[data-justify-regular='end'] {
+      justify-content: flex-end;
+    }
+
+    &[data-justify-regular='space-between'] {
+      justify-content: space-between;
+    }
+
+    &[data-justify-regular='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    &[data-wrap-regular='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-regular='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+
+  /* @custom-media --viewportRange-wide */
+  @media (min-width: 87.5rem) {
+    &[data-padding-wide='none'] {
+      padding: 0;
+    }
+
+    &[data-padding-wide='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    &[data-padding-wide='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    &[data-padding-wide='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    &[data-direction-wide='horizontal'] {
+      flex-flow: row;
+    }
+
+    &[data-direction-wide='vertical'] {
+      flex-flow: column;
+    }
+
+    &[data-gap-wide='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    &[data-gap-wide='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    &[data-gap-wide='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    &[data-gap-wide='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    &[data-align-wide='start'] {
+      align-items: flex-start;
+    }
+
+    &[data-align-wide='center'] {
+      align-items: center;
+    }
+
+    &[data-align-wide='end'] {
+      align-items: flex-end;
+    }
+
+    &[data-align-wide='baseline'] {
+      align-items: baseline;
+    }
+
+    &[data-justify-wide='start'] {
+      justify-content: flex-start;
+    }
+
+    &[data-justify-wide='center'] {
+      justify-content: center;
+    }
+
+    &[data-justify-wide='end'] {
+      justify-content: flex-end;
+    }
+
+    &[data-justify-wide='space-between'] {
+      justify-content: space-between;
+    }
+
+    &[data-justify-wide='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    &[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+}

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

@@ -0,0 +1,185 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Stack is a layout component that creates responsive horizontal and vertical flows.
+    class Stack < Primer::Component
+      DEFAULT_TAG = :div
+
+      # Stack's justify argument. Used internally.
+      class JustifyArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :start
+        MAPPING = {
+          DEFAULT => "start",
+          :center => "center",
+          :end => "end",
+          :space_between => "space-between",
+          :space_evenly => "space-evenly"
+        }.freeze
+        OPTIONS = [nil, *MAPPING.keys.freeze]
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT) do |value|
+            MAPPING[value]
+          end
+        end
+
+        def self.arg_name
+          :justify
+        end
+      end
+
+      # Stack's direction argument. Used internally.
+      class DirectionArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :vertical
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :horizontal
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :direction
+        end
+      end
+
+      # Stack's align argument. Used internally.
+      class AlignArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :stretch
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :start,
+          :center,
+          :end,
+          :baseline
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :align
+        end
+      end
+
+      # Stack's wrap argument. Used internally.
+      class WrapArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :nowrap
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :wrap
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :wrap
+        end
+      end
+
+      # Stack's padding argument. Used internally.
+      class PaddingArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :none
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :condensed,
+          :normal,
+          :spacious
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :padding
+        end
+      end
+
+      # Stack's gap argument. Used internally.
+      class GapArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = nil
+        OPTIONS = [
+          DEFAULT,
+          :condensed,
+          :normal,
+          :spacious
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :gap
+        end
+      end
+
+      ARG_CLASSES = [
+        JustifyArg,
+        DirectionArg,
+        AlignArg,
+        WrapArg,
+        PaddingArg,
+        GapArg
+      ].freeze
+
+
+      # @param tag [Symbol] Customize the element type of the rendered container.
+      # @param gap [Symbol] Specify the gap between children elements in the stack. <%= one_of(Primer::Alpha::Stack::GapArg::OPTIONS) %>
+      # @param direction [Symbol] Specify the direction for the stack container. <%= one_of(Primer::Alpha::Stack::DirectionArg::OPTIONS) %>
+      # @param align [Symbol] Specify the alignment between items in the cross-axis of the direction. <%= one_of(Primer::Alpha::Stack::AlignArg::OPTIONS) %>
+      # @param wrap [Symbol] Specify whether items are forced onto one line or can wrap onto multiple lines. <%= one_of(Primer::Alpha::Stack::WrapArg::OPTIONS) %>
+      # @param justify [Symbol] Specify how items will be distributed in the stacking direction. <%= one_of(Primer::Alpha::Stack::JustifyArg::OPTIONS) %>
+      # @param padding [Symbol] Specify the padding of the stack container. <%= one_of(Primer::Alpha::Stack::PaddingArg::OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        justify: JustifyArg::DEFAULT,
+        gap: GapArg::DEFAULT,
+        direction: DirectionArg::DEFAULT,
+        align: AlignArg::DEFAULT,
+        wrap: WrapArg::DEFAULT,
+        padding: PaddingArg::DEFAULT,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+
+        @system_arguments[:tag] = tag
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "Stack"
+        )
+
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: {
+              **JustifyArg.for(justify).to_data_attributes,
+              **GapArg.for(gap).to_data_attributes,
+              **DirectionArg.for(direction).to_data_attributes,
+              **AlignArg.for(align).to_data_attributes,
+              **WrapArg.for(wrap).to_data_attributes,
+              **PaddingArg.for(padding).to_data_attributes,
+            }
+          }
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.StackItem{flex:0 1 auto;min-inline-size:0}.StackItem[data-grow-narrow=true],.StackItem[data-grow=true]{flex-grow:1}@media (min-width:48rem){.StackItem[data-grow-regular=true]{flex-grow:1}.StackItem[data-grow-regular=false]{flex-grow:0}}@media (min-width:87.5rem){.StackItem[data-grow-wide=true]{flex-grow:1}.StackItem[data-grow-wide=false]{flex-grow:0}}

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

@@ -0,0 +1,12 @@
+{
+  "name": "alpha/stack_item",
+  "selectors": [
+    ".StackItem",
+    ".StackItem[data-grow-narrow=true]",
+    ".StackItem[data-grow=true]",
+    ".StackItem[data-grow-regular=true]",
+    ".StackItem[data-grow-regular=false]",
+    ".StackItem[data-grow-wide=true]",
+    ".StackItem[data-grow-wide=false]"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["stack_item.pcss"],"names":[],"mappings":"AAAA,WACE,aAAc,CACd,iBA4BF,CA1BE,6DAEE,WACF,CAGA,yBACE,mCACE,WACF,CAEA,oCACE,WACF,CACF,CAGA,2BACE,gCACE,WACF,CAEA,iCACE,WACF,CACF","file":"stack_item.css","sourcesContent":[".StackItem {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n\n  &[data-grow='true'],\n  &[data-grow-narrow='true'] {\n    flex-grow: 1;\n  }\n\n  /* @custom-media --veiwportRange-regular */\n  @media (min-width: 48rem) {\n    &[data-grow-regular='true'] {\n      flex-grow: 1;\n    }\n\n    &[data-grow-regular='false'] {\n      flex-grow: 0;\n    }\n  }\n\n  /* @custom-media --viewportRange-wide */\n  @media (min-width: 87.5rem) {\n    &[data-grow-wide='true'] {\n      flex-grow: 1;\n    }\n\n    &[data-grow-wide='false'] {\n      flex-grow: 0;\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,31 @@
+.StackItem {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+
+  &[data-grow='true'],
+  &[data-grow-narrow='true'] {
+    flex-grow: 1;
+  }
+
+  /* @custom-media --veiwportRange-regular */
+  @media (min-width: 48rem) {
+    &[data-grow-regular='true'] {
+      flex-grow: 1;
+    }
+
+    &[data-grow-regular='false'] {
+      flex-grow: 0;
+    }
+  }
+
+  /* @custom-media --viewportRange-wide */
+  @media (min-width: 87.5rem) {
+    &[data-grow-wide='true'] {
+      flex-grow: 1;
+    }
+
+    &[data-grow-wide='false'] {
+      flex-grow: 0;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # StackItem is a layout component designed to be used as the child of a Stack.
+    class StackItem < Primer::Component
+      DEFAULT_TAG = :div
+
+      # StackItem's grow argument. Used internally.
+      class GrowArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = false
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          true
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :grow
+        end
+      end
+
+      ARG_CLASSES = [GrowArg].freeze
+
+      # @param tag [Symbol] Customize the element type of the rendered container.
+      # @param grow [Boolean] Allow item to keep size or expand to fill the available space.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, grow: false, **system_arguments)
+        @tag = tag
+        @grow = grow
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = tag
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "StackItem"
+        )
+
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: {
+              **GrowArg.for(grow).to_data_attributes
+            }
+          }
+        )
+      end
+    end
+  end
+end

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

@@ -1 +1 @@
-.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;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(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
+.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;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(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}

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

@@ -1 +1 @@
-{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,sEAAuE,CADvE,qCAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,8CAAiD,CACjD,eACF,CAEA,YAQE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,sCAAuC,CACvC,gBAAiB,CAFjB,uEAAwE,CAIxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAMF,CAHA,qBACE,qCAEF,CAEA,qBAEE,aAAc,CADd,oCAEF,CAQF,cAKE,0BAA2B,CAJ3B,oBAAqB,CAGrB,qCAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YACE,oDACF","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(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow: hidden;\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(--fgColor-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(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-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(--fgColor-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(--fgColor-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-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(--fgColor-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(--fgColor-accent);\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"]}
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eACF,CAEA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CACrB,aAAc,CAGd,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow: hidden;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-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(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-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(--fgColor-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(--fgColor-muted);\n  }\n\n  & .octicon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    /* stylelint-disable-next-line primer/spacing */\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  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\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  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}

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

@@ -3,12 +3,14 @@
 /* Outer wrapper */
 .tabnav {
   margin-top: 0;
+  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
 .tabnav-tabs {
   display: flex;
+  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--borderWidth-thin) * -1);
   overflow: hidden;
 }
@@ -16,8 +18,10 @@
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
+  /* stylelint-disable-next-line primer/spacing */
   padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-medium);
+  /* stylelint-disable-next-line primer/typography */
   line-height: 23px;
   color: var(--fgColor-muted);
   text-decoration: none;
@@ -56,11 +60,13 @@
   }
 
   & .octicon {
+    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
     color: var(--fgColor-muted);
   }
 
   & .Counter {
+    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
     color: inherit;
   }
@@ -73,18 +79,20 @@
 
 .tabnav-extra {
   display: inline-block;
+  /* stylelint-disable-next-line primer/spacing */
   padding-top: 10px;
+  /* stylelint-disable-next-line primer/spacing */
   margin-left: 10px;
   font-size: var(--text-body-size-small);
   color: var(--fgColor-muted);
 
   & > .octicon {
-    margin-right: 2px;
+    margin-right: var(--base-size-2);
   }
 }
 
-/* When tabnav-extra are anchors
-** stylelint-disable-next-line selector-no-qualifying-type */
+/* When tabnav-extra are anchors */
+/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
 a.tabnav-extra:hover {
   color: var(--fgColor-accent);
   text-decoration: none;
@@ -96,5 +104,6 @@ a.tabnav-extra:hover {
 ** the buttons to be floated or inline-block. */
 
 .tabnav-btn {
+  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--controlStack-medium-gap-condensed);
 }