yattho_view_components 0.0.1

data/app/components/yattho/alpha/segmented_control.html.erb

@@ -0,0 +1,7 @@
+<segmented-control>
+  <%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+</segmented-control>

data/app/components/yattho/alpha/segmented_control.js

@@ -0,0 +1,47 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SegmentedControlElement_instances, _SegmentedControlElement_updateButtonLabels;
+import { controller, targets } from '@github/catalyst';
+let SegmentedControlElement = class SegmentedControlElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _SegmentedControlElement_instances.add(this);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _SegmentedControlElement_instances, "m", _SegmentedControlElement_updateButtonLabels).call(this);
+    }
+    select(event) {
+        var _a, _b;
+        const button = event.currentTarget;
+        for (const item of this.items) {
+            item.classList.remove('SegmentedControl-item--selected');
+            (_a = item.querySelector('[aria-current]')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-current', 'false');
+        }
+        (_b = button.closest('li.SegmentedControl-item')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
+        button.setAttribute('aria-current', 'true');
+    }
+};
+_SegmentedControlElement_instances = new WeakSet(), _SegmentedControlElement_updateButtonLabels = function _SegmentedControlElement_updateButtonLabels() {
+    for (const label of this.querySelectorAll('.Button-label')) {
+        label.setAttribute('data-content', label.textContent || '');
+    }
+};
+__decorate([
+    targets
+], SegmentedControlElement.prototype, "items", void 0);
+SegmentedControlElement = __decorate([
+    controller
+], SegmentedControlElement);
+if (!window.customElements.get('segmented-control')) {
+    window.SegmentedControlElement = SegmentedControlElement;
+    window.customElements.define('segmented-control', SegmentedControlElement);
+}

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

@@ -0,0 +1,134 @@
+/* SegmentedControl */
+
+.SegmentedControl {
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--color-segmented-control-bg);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  box-shadow: var(--yattho-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
+}
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  padding: var(--yattho-control-xsmall-paddingInline-condensed, 4px);
+
+  /* Selected ---------------------------------------- */
+  &.SegmentedControl-item--selected {
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-segmented-control-button-selected-border);
+
+    & .Button {
+      font-weight: var(--base-text-weight-semibold, 600);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &::before {
+      border-color: transparent;
+    }
+
+    & + .SegmentedControl-item::before {
+      border-color: transparent;
+    }
+  }
+
+  /* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
+  & .Button-label[data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* Separator lines */
+  &::before {
+    position: absolute;
+    inset: 0 0 0 -1px;
+    margin-top: var(--yattho-control-medium-paddingBlock, 6px);
+    margin-bottom: var(--yattho-control-medium-paddingBlock, 6px);
+    content: '';
+    border-left: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+  }
+
+  /* Button ----------------------------------------- */
+  & .Button {
+    border: 0;
+    font-weight: var(--base-text-weight-normal, 400);
+    transition: none;
+    color: var(--color-btn-text);
+
+    &:focus-visible {
+      outline-offset: calc(var(--yattho-control-xsmall-paddingInline-condensed, 4px) - var(--yattho-borderWidth-thin, 1px));
+      border-radius: calc(var(--yattho-borderRadius-medium, 6px) - 5px);
+    }
+  }
+
+  & .Button--small {
+    height: calc(var(--yattho-control-small-size, 28px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--yattho-control-small-paddingInline-condensed, 8px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+
+      &::before {
+        @mixin minTouchTarget var(--yattho-control-medium-size, 32px), var(--yattho-control-medium-size, 32px);
+      }
+    }
+  }
+
+  & .Button--medium {
+    height: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--yattho-control-medium-paddingInline-normal, 12px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+
+      &::before {
+        @mixin minTouchTarget var(--yattho-control-medium-size, 32px), var(--yattho-control-medium-size, 32px);
+      }
+    }
+  }
+
+  & .Button--large {
+    height: calc(var(--yattho-control-large-size, 40px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--yattho-control-large-paddingInline-spacious, 16px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--yattho-control-large-size, 40px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+
+      &::before {
+        @mixin minTouchTarget var(--yattho-control-large-size, 40px), var(--yattho-control-large-size, 40px);
+      }
+    }
+  }
+
+  & .Button--iconOnly {
+    padding: initial;
+  }
+
+  & .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--color-btn-text);
+  }
+}
+
+/* fullWidth */
+.SegmentedControl--fullWidth {
+  display: flex;
+
+  & .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }
+
+  /* is .Button-withTooltip used anywhere? can't find use of it */
+  & .Button--iconOnly,
+  & .Button-withTooltip {
+    width: 100%;
+  }
+}

data/app/components/yattho/alpha/segmented_control.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use a segmented control to let users select an option from a short list and immediately apply the selection
+    class SegmentedControl < Yattho::Component
+      status :alpha
+
+      FULL_WIDTH_DEFAULT = false
+      HIDE_LABELS_DEFAULT = false
+
+      # Use to render an item in the segmented control
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, lambda { |label:, selected: false, icon: nil, **system_arguments|
+        Yattho::Alpha::SegmentedControl::Item.new(
+          label: label,
+          selected: selected,
+          icon: icon,
+          hide_labels: @hide_labels,
+          size: @size,
+          block: @full_width,
+          **system_arguments
+        )
+      }
+
+      # @example Basic usage
+      #
+      #   <%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
+      #     <%= component.with_item(label: "Preview", selected: true) %>
+      #     <%= component.with_item(label: "Raw") %>
+      #     <%= component.with_item(label: "Blame") %>
+      #   <% end %>
+      #
+      # @example Small
+      #
+      #   <%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
+      #     <%= component.with_item(label: "Preview", selected: true) %>
+      #     <%= component.with_item(label: "Raw") %>
+      #     <%= component.with_item(label: "Blame") %>
+      #   <% end %>
+      #
+      # @example With icons
+      #   <%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
+      #     <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= component.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= component.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @example With icons only
+      #   <%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
+      #     <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= component.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= component.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @example Fill width of parent
+      #   <%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
+      #     <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= component.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= component.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @param hide_labels [Boolean] Whether to hide the labels and only show the icons
+      # @param full_width [Boolean] If the component should be full width
+      # @param size [Symbol] <%= one_of(Yattho::Beta::Button::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT,
+                     size: Yattho::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @full_width = full_width
+        @size = size
+        @hide_labels = hide_labels
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :ul
+        @system_arguments[:role] = "list"
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "SegmentedControl",
+          'SegmentedControl--iconOnly': hide_labels,
+          'SegmentedControl--fullWidth': full_width
+        )
+      end
+
+      def render?
+        valid_items_count = items.count <= (@hide_labels ? 6 : 5) && items.count >= 2
+        if !valid_items_count && !Rails.env.production?
+          raise ArgumentError,
+                "A segmented control should have 2-5 choices with text labels, or up to 6 icon-only buttons."
+        end
+
+        valid_items_count
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/segmented_control.ts

@@ -0,0 +1,41 @@
+import {controller, targets} from '@github/catalyst'
+
+@controller
+class SegmentedControlElement extends HTMLElement {
+  @targets items: HTMLElement[]
+
+  connectedCallback() {
+    this.#updateButtonLabels()
+  }
+
+  select(event: Event) {
+    const button = event.currentTarget as HTMLButtonElement
+    for (const item of this.items) {
+      item.classList.remove('SegmentedControl-item--selected')
+      item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false')
+    }
+
+    button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
+    button.setAttribute('aria-current', 'true')
+  }
+
+  // Updates the button labels to have a data-content attribute with the text
+  // This is for selection styling to avoid the text jumping. It only needs to be
+  // setup when the component is first loaded.
+  #updateButtonLabels() {
+    for (const label of this.querySelectorAll('.Button-label')) {
+      label.setAttribute('data-content', label.textContent || '')
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    SegmentedControlElement: typeof SegmentedControlElement
+  }
+}
+
+if (!window.customElements.get('segmented-control')) {
+  window.SegmentedControlElement = SegmentedControlElement
+  window.customElements.define('segmented-control', SegmentedControlElement)
+}

data/app/components/yattho/alpha/tab_container.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

data/app/components/yattho/alpha/tab_container.js

@@ -0,0 +1 @@
+import '@github/tab-container-element';

data/app/components/yattho/alpha/tab_container.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
+    # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Yattho::Alpha::TabNav) %>.
+    #
+    # This component requires javascript.
+    class TabContainer < Yattho::Component
+      # @example Default
+      #   <%= render(Yattho::Alpha::TabContainer.new)  do %>
+      #     <div role="tablist">
+      #       <button type="button" role="tab" aria-selected="true">Tab one</button>
+      #       <button type="button" role="tab" tabindex="-1">Tab two</button>
+      #       <button type="button" role="tab" tabindex="-1">Tab three</button>
+      #     </div>
+      #     <div role="tabpanel">
+      #       Panel 1
+      #     </div>
+      #     <div role="tabpanel" hidden>
+      #       Panel 2
+      #     </div>
+      #     <div role="tabpanel" hidden>
+      #       Panel 3
+      #     </div>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "tab-container"
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+      end
+
+      def render?
+        content.present?
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/tab_container.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element'

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

@@ -0,0 +1,106 @@
+/* tabnav */
+
+/* Outer wrapper */
+
+.tabnav {
+  margin-top: 0;
+  margin-bottom: var(--yattho-stack-gap-normal, 16px);
+  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+}
+
+.tabnav-tabs {
+  display: flex;
+  margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);
+  overflow: auto;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: var(--base-size-8, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  line-height: 23px;
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  background-color: transparent;
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+}
+
+.tabnav-tab.selected,
+  .tabnav-tab[aria-selected='true'],
+  .tabnav-tab[aria-current]:not([aria-current='false']) {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); /* cover bottom border */
+    border-color: var(--color-border-default);
+    border-radius: var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px) 0 0;
+  }
+
+.tabnav-tab.selected .octicon, .tabnav-tab[aria-selected='true'] .octicon, .tabnav-tab[aria-current]:not([aria-current='false']) .octicon {
+      color: inherit;
+    }
+
+.tabnav-tab:hover {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+.tabnav-tab:focus,
+  .tabnav-tab:focus-visible {
+    border-radius: var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px) 0 0 !important;
+  }
+
+.tabnav-tab:focus,
+  .tabnav-tab:focus-visible {
+    outline-offset: -6px;
+  }
+
+.tabnav-tab:active {
+    color: var(--color-fg-muted);
+  }
+
+.tabnav-tab .octicon {
+    margin-right: var(--yattho-control-small-gap, 4px);
+    color: var(--color-fg-muted);
+  }
+
+.tabnav-tab .Counter {
+    margin-left: var(--yattho-control-small-gap, 4px);
+    color: inherit;
+  }
+
+/* Tabnav extras
+**
+** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+** inline text or links. */
+
+.tabnav-extra {
+  display: inline-block;
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: var(--yattho-text-body-size-small, 12px);
+  color: var(--color-fg-muted);
+}
+
+.tabnav-extra > .octicon {
+    margin-right: 2px;
+  }
+
+/* When tabnav-extra are anchors
+** stylelint-disable-next-line selector-no-qualifying-type */
+
+a.tabnav-extra:hover {
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+
+/* Tabnav buttons
+**
+** For when there are multiple buttons, space them out appropriately. Requires
+** the buttons to be floated or inline-block. */
+
+.tabnav-btn {
+  margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);
+}

data/app/components/yattho/alpha/tab_nav.css.json

@@ -0,0 +1 @@
+{"name":"alpha/tab_nav","selectors":[".tabnav",".tabnav-tabs",".tabnav-tab",".tabnav-tab.selected","\n  .tabnav-tab[aria-selected='true']","\n  .tabnav-tab[aria-current]:not([aria-current='false'])",".tabnav-tab.selected .octicon"," .tabnav-tab[aria-selected='true'] .octicon"," .tabnav-tab[aria-current]:not([aria-current='false']) .octicon",".tabnav-tab:hover",".tabnav-tab:focus","\n  .tabnav-tab:focus-visible",".tabnav-tab:active",".tabnav-tab .octicon",".tabnav-tab .Counter",".tabnav-extra",".tabnav-extra > .octicon","a.tabnav-extra:hover",".tabnav-btn"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAAA,WAAW;;AAEX,kBAAkB;;AAClB;EACE,aAAa;EACb,mDAAmD;EACnD,oFAAoF;AACtF;;AAEA;EACE,aAAa;EACb,6DAA6D;EAC7D,cAAc;AAChB;;AAEA;EACE,qBAAqB;EACrB,cAAc;EACd,0FAA0F;EAC1F,oDAAoD;EACpD,iBAAiB;EACjB,4BAA4B;EAC5B,qBAAqB;EACrB,6BAA6B;EAC7B,6DAA6D;EAC7D,gBAAgB;EAChB,mDAAmD;AAwCrD;;AAtCE;;;IAGE,8BAA8B;IAC9B,6CAA6C,EAAE,wBAAwB;IACvE,yCAAyC;IACzC,gGAAgG;EAKlG;;AAHE;MACE,cAAc;IAChB;;AAGF;IACE,8BAA8B;IAC9B,qBAAqB;IACrB,yBAAyB;EAC3B;;AAEA;;IAEE,2GAA2G;EAE7G;;AAJA;;IAGE,oBAAoB;EACtB;;AAEA;IACE,4BAA4B;EAC9B;;AAEA;IACE,kDAAkD;IAClD,4BAA4B;EAC9B;;AAEA;IACE,iDAAiD;IACjD,cAAc;EAChB;;AAGF;;;0BAG0B;;AAE1B;EACE,qBAAqB;EACrB,iBAAiB;EACjB,iBAAiB;EACjB,mDAAmD;EACnD,4BAA4B;AAK9B;;AAHE;IACE,iBAAiB;EACnB;;AAGF;4DAC4D;;AAC5D;EACE,6BAA6B;EAC7B,qBAAqB;AACvB;;AAEA;;;+CAG+C;;AAE/C;EACE,iEAAiE;AACnE","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--yattho-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(--yattho-control-medium-paddingInline-spacious, 16px);\n  font-size: var(--yattho-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(--yattho-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(--yattho-borderRadius-medium, 6px) var(--yattho-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(--yattho-borderRadius-medium, 6px) var(--yattho-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(--yattho-control-small-gap, 4px);\n    color: var(--color-fg-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--yattho-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(--yattho-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(--yattho-controlStack-medium-gap-condensed, 8px);\n}"]}

data/app/components/yattho/alpha/tab_nav.html.erb

@@ -0,0 +1,9 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <%= extra if @align == :left %>
+  <%= render Yattho::BaseComponent.new(**@body_arguments) do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+  <%= extra if @align == :right %>
+<% end %>

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

@@ -0,0 +1,100 @@
+/* tabnav */
+
+/* Outer wrapper */
+.tabnav {
+  margin-top: 0;
+  margin-bottom: var(--yattho-stack-gap-normal, 16px);
+  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+}
+
+.tabnav-tabs {
+  display: flex;
+  margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);
+  overflow: auto;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: var(--base-size-8, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  line-height: 23px;
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  background-color: transparent;
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); /* cover bottom border */
+    border-color: var(--color-border-default);
+    border-radius: var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px) 0 0;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+
+  &:hover {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-radius: var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px) 0 0 !important;
+    outline-offset: -6px;
+  }
+
+  &:active {
+    color: var(--color-fg-muted);
+  }
+
+  & .octicon {
+    margin-right: var(--yattho-control-small-gap, 4px);
+    color: var(--color-fg-muted);
+  }
+
+  & .Counter {
+    margin-left: var(--yattho-control-small-gap, 4px);
+    color: inherit;
+  }
+}
+
+/* Tabnav extras
+**
+** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+** inline text or links. */
+
+.tabnav-extra {
+  display: inline-block;
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: var(--yattho-text-body-size-small, 12px);
+  color: var(--color-fg-muted);
+
+  & > .octicon {
+    margin-right: 2px;
+  }
+}
+
+/* When tabnav-extra are anchors
+** stylelint-disable-next-line selector-no-qualifying-type */
+a.tabnav-extra:hover {
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+
+/* Tabnav buttons
+**
+** For when there are multiple buttons, space them out appropriately. Requires
+** the buttons to be floated or inline-block. */
+
+.tabnav-btn {
+  margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);
+}