yattho_view_components 0.0.1

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

@@ -0,0 +1,370 @@
+import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
+import {getAnchoredPosition} from '@primer/behaviors'
+
+const TOOLTIP_OPEN_CLASS = 'tooltip-open'
+const TOOLTIP_ARROW_EDGE_OFFSET = 6
+const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
+
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
+
+const DIRECTION_CLASSES = [
+  'tooltip-n',
+  'tooltip-s',
+  'tooltip-e',
+  'tooltip-w',
+  'tooltip-ne',
+  'tooltip-se',
+  'tooltip-nw',
+  'tooltip-sw'
+]
+
+class ToolTipElement extends HTMLElement {
+  styles() {
+    return `
+      :host {
+        position: absolute;
+        z-index: 1000000;
+        padding: .5em .75em;
+        font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        -webkit-font-smoothing: subpixel-antialiased;
+        color: var(--color-fg-on-emphasis);
+        text-align: center;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: break-word;
+        white-space: pre;
+        background: var(--color-neutral-emphasis-plus);
+        border-radius: 6px;
+        opacity: 0;
+        max-width: 250px;
+        word-wrap: break-word;
+        white-space: normal;
+        width: max-content;
+      }
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--color-neutral-emphasis-plus);
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0
+      }
+      @keyframes tooltip-appear {
+        from {
+          opacity: 0
+        }
+        to {
+          opacity: 1
+        }
+      }
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: ""
+      }
+      :host(.${TOOLTIP_OPEN_CLASS}),
+      :host(.${TOOLTIP_OPEN_CLASS}):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--color-neutral-emphasis-plus)
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--color-neutral-emphasis-plus)
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--color-neutral-emphasis-plus)
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--color-neutral-emphasis-plus)
+      }
+    `
+  }
+
+  #abortController: AbortController | undefined
+  #align: AnchorAlignment = 'center'
+  #side: AnchorSide = 'outside-bottom'
+  #allowUpdatePosition = false
+
+  get htmlFor(): string {
+    return this.getAttribute('for') || ''
+  }
+
+  set htmlFor(value: string) {
+    this.setAttribute('for', value)
+  }
+
+  get type(): 'description' | 'label' {
+    const type = this.getAttribute('data-type')
+    return type === 'label' ? 'label' : 'description'
+  }
+
+  set type(value: 'description' | 'label') {
+    this.setAttribute('data-type', value)
+  }
+
+  get direction(): Direction {
+    return (this.getAttribute('data-direction') || 's') as Direction
+  }
+
+  set direction(value: Direction) {
+    this.setAttribute('data-direction', value)
+  }
+
+  get control(): HTMLElement | null {
+    return this.ownerDocument.getElementById(this.htmlFor)
+  }
+
+  set hiddenFromView(value: true | false) {
+    this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value)
+    if (this.isConnected) this.#update()
+  }
+
+  get hiddenFromView() {
+    return this.classList.contains(TOOLTIP_SR_ONLY_CLASS)
+  }
+
+  connectedCallback() {
+    this.#updateControlReference()
+    this.#updateDirection()
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({mode: 'open'})
+      const style = shadow.appendChild(document.createElement('style'))
+      style.textContent = this.styles()
+      shadow.appendChild(document.createElement('slot'))
+    }
+    this.hiddenFromView = true
+    this.#allowUpdatePosition = true
+
+    if (!this.control) return
+
+    this.setAttribute('role', 'tooltip')
+
+    this.#abortController?.abort()
+    this.#abortController = new AbortController()
+    const {signal} = this.#abortController
+
+    this.addEventListener('mouseleave', this, {signal})
+    this.control.addEventListener('mouseenter', this, {signal})
+    this.control.addEventListener('mouseleave', this, {signal})
+    this.control.addEventListener('focus', this, {signal})
+    this.control.addEventListener('blur', this, {signal})
+    this.ownerDocument.addEventListener('keydown', this, {signal})
+    this.#update()
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  handleEvent(event: Event) {
+    if (!this.control) return
+
+    // Ensures that tooltip stays open when hovering between tooltip and element
+    // WCAG Success Criterion 1.4.13 Hoverable
+    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
+      this.hiddenFromView = false
+    } else if (event.type === 'blur') {
+      this.hiddenFromView = true
+    } else if (
+      event.type === 'mouseleave' &&
+      (event as MouseEvent).relatedTarget !== this.control &&
+      (event as MouseEvent).relatedTarget !== this
+    ) {
+      this.hiddenFromView = true
+    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hiddenFromView) {
+      this.hiddenFromView = true
+    }
+  }
+
+  static observedAttributes = ['data-type', 'data-direction', 'id']
+
+  #update() {
+    if (this.hiddenFromView) {
+      this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
+    } else {
+      this.classList.add(TOOLTIP_OPEN_CLASS)
+      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.hiddenFromView = true
+      }
+      this.#updatePosition()
+    }
+  }
+
+  attributeChangedCallback(name: string) {
+    if (!this.isConnected) return
+
+    if (name === 'id' || name === 'data-type') {
+      this.#updateControlReference()
+    } else if (name === 'data-direction') {
+      this.#updateDirection()
+    }
+  }
+
+  #updateControlReference() {
+    if (!this.id || !this.control) return
+    if (this.type === 'label') {
+      let labelledBy = this.control.getAttribute('aria-labelledby')
+      if (labelledBy) {
+        if (!labelledBy.split(' ').includes(this.id)) {
+          labelledBy = `${labelledBy} ${this.id}`
+        } else {
+          labelledBy = `${labelledBy}`
+        }
+      } else {
+        labelledBy = this.id
+      }
+      this.control.setAttribute('aria-labelledby', labelledBy)
+
+      // Prevent duplicate accessible name announcements.
+      this.setAttribute('aria-hidden', 'true')
+    } else {
+      let describedBy = this.control.getAttribute('aria-describedby')
+      if (describedBy) {
+        if (!describedBy.split(' ').includes(this.id)) {
+          describedBy = `${describedBy} ${this.id}`
+        } else {
+          describedBy = `${describedBy}`
+        }
+      } else {
+        describedBy = this.id
+      }
+      this.control.setAttribute('aria-describedby', describedBy)
+    }
+  }
+
+  #updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES)
+    const direction = this.direction
+    if (direction === 'n') {
+      this.#align = 'center'
+      this.#side = 'outside-top'
+    } else if (direction === 'ne') {
+      this.#align = 'start'
+      this.#side = 'outside-top'
+    } else if (direction === 'e') {
+      this.#align = 'center'
+      this.#side = 'outside-right'
+    } else if (direction === 'se') {
+      this.#align = 'start'
+      this.#side = 'outside-bottom'
+    } else if (direction === 's') {
+      this.#align = 'center'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'sw') {
+      this.#align = 'end'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'w') {
+      this.#align = 'center'
+      this.#side = 'outside-left'
+    } else if (direction === 'nw') {
+      this.#align = 'end'
+      this.#side = 'outside-top'
+    }
+  }
+
+  #updatePosition() {
+    if (!this.control) return
+    if (!this.#allowUpdatePosition || this.hiddenFromView) return
+
+    const TOOLTIP_OFFSET = 10
+
+    this.style.left = `0px` // Ensures we have reliable tooltip width in `getAnchoredPosition`
+
+    const position = getAnchoredPosition(this, this.control, {
+      side: this.#side,
+      align: this.#align,
+      anchorOffset: TOOLTIP_OFFSET
+    })
+    const anchorSide = position.anchorSide
+    const align = position.anchorAlign
+
+    this.style.top = `${position.top}px`
+    this.style.left = `${position.left}px`
+
+    let direction: Direction = 's'
+
+    if (anchorSide === 'outside-left') {
+      direction = 'w'
+    } else if (anchorSide === 'outside-right') {
+      direction = 'e'
+    } else if (anchorSide === 'outside-top') {
+      if (align === 'center') {
+        direction = 'n'
+      } else if (align === 'start') {
+        direction = 'ne'
+      } else {
+        direction = 'nw'
+      }
+    } else {
+      if (align === 'center') {
+        direction = 's'
+      } else if (align === 'start') {
+        direction = 'se'
+      } else {
+        direction = 'sw'
+      }
+    }
+
+    this.classList.add(`tooltip-${direction}`)
+  }
+}
+
+if (!window.customElements.get('tool-tip')) {
+  window.ToolTipElement = ToolTipElement
+  window.customElements.define('tool-tip', ToolTipElement)
+}
+
+declare global {
+  interface Window {
+    ToolTipElement: typeof ToolTipElement
+  }
+}

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

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.
+    # Use tooltips as a last resort. Please consider [Tooltips alternatives](https://yattho.com/design/accessibility/tooltip-alternatives).
+    #
+    # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
+    # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
+    # - `Tooltip` should be rendered through the API of <%= link_to_component(Yattho::ButtonComponent)%>, <%= link_to_component(Yattho::Beta::Link)%>, or <%= link_to_component(Yattho::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
+    # @accessibility
+    #   - Tooltip text must be brief and concise whether it is a label or a description.
+    #   - Tooltip can only hold string content.
+    #   - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
+    #   and screen reader users. Use of tooltip through <%= link_to_component(Yattho::ButtonComponent) %>, <%= link_to_component(Yattho::Beta::Link) %>, or <%= link_to_component(Yattho::IconButton) %> will guarantee this.
+    #   - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
+    #   content.
+    #   ### Which type should I set?
+    #   Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
+    #   `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+    #   - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
+    #   The majority of tooltips will fall under this category.
+    #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
+    #   `label` type is usually only appropriate for an icon-only control.
+    class Tooltip < Yattho::Component
+      DIRECTION_DEFAULT = :s
+      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
+
+      TYPE_FALLBACK = :description
+      TYPE_OPTIONS = [:label, :description].freeze
+      # @example As a supplementary description for a button
+      #   @description
+      #     In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
+      #     A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
+      #   @code
+      #     <%= render(Yattho::ButtonComponent.new(id: "save-button")) do |component| %>
+      #       <% component.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
+      #       Save
+      #     <% end %>
+      # @example As a label for an `IconButton`
+      #   @description
+      #     An `IconButton` of `tag: :button` and `tag: :a` will render a tooltip using the `aria-label` content by default. While tooltips should generally be avoided, a tooltip on an `IconButton`
+      #     has usability benefits because it provides a textual label for sighted users.
+      #     A screen reader user who encounters the following button will hear the accessible name, "Bold".
+      #   @code
+      #     <%= render(Yattho::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
+      # @example As a supplementary description for an `IconButton`
+      #   @description
+      #     If you want to provide a description for the `IconButton`, set both `aria-label` and `aria-description` text. The tooltip will use the `aria-description` text.
+      #     A screen reader user who encounters the following button will hear the accessible name "Search", followed by the accessible description "Use keywords like 'repo:' and 'org:' in your query".
+      #   @code
+      #     <%= render(Yattho::IconButton.new(id: "search-button", icon: :search, "aria-label": "Search", "aria-description": "Use keywords like 'repo:' and 'org:' in your query")) %>
+      #
+      # @example With direction
+      #   @description
+      #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
+      #   @code
+      #     <%= render(Yattho::ButtonComponent.new(id: "North", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
+      #       North
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "South", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
+      #       South
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "East", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
+      #       East
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "West", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
+      #       West
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "Northwest", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
+      #       Northwest
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "Southwest", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
+      #       Southwest
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "Northeast", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
+      #       Northeast
+      #     <% end %>
+      #     <%= render(Yattho::ButtonComponent.new(id: "Southeast", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
+      #       Southeast
+      #     <% end %>
+      # @example Directly using `Tooltip`
+      #   @description
+      #     When you have a valid tooltip usecase for an interactive element that is not one of the supported components, you may need to use the `Tooltip` component directly.
+      #     The tooltip should be placed directly adjacent after the element you are associating it with.
+      #     The tooltip is absolutely positioned so ensure there is a wrapper with `position: relative` to avoid positioning issues.
+      #   @code
+      #     <div style="position: relative;">
+      #       <button type="button" id="test-button">Test</button>
+      #       <%= render(Yattho::Alpha::Tooltip.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
+      #     </div>
+      # @param for_id [String] The ID of the element that the tooltip should be attached to.
+      # @param type [Symbol] <%= one_of(Yattho::Alpha::Tooltip::TYPE_OPTIONS) %>
+      # @param direction [Symbol] <%= one_of(Yattho::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+      # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arguments)
+        raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
+
+        @text = text
+        @system_arguments = system_arguments
+        @system_arguments[:id] ||= self.class.generate_id
+        @system_arguments[:tag] = :'tool-tip'
+        @system_arguments[:for] = for_id
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "sr-only"
+        )
+        @system_arguments[:position] = :absolute
+        @system_arguments[:'data-direction'] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s
+        @system_arguments[:'data-type'] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) { @text }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,148 @@
+/* UnderlineNav */
+
+.UnderlineNav {
+  display: flex;
+  min-height: var(--base-size-48, 48px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  -webkit-overflow-scrolling: auto;
+  justify-content: space-between;
+}
+
+.UnderlineNav .Counter {
+    margin-left: var(--yattho-control-medium-gap, 8px);
+    color: var(--color-fg-default);
+    background-color: var(--color-neutral-muted);
+  }
+
+.UnderlineNav .Counter--primary {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
+  }
+
+.UnderlineNav-body {
+  display: flex;
+  align-items: center;
+  gap: var(--yattho-control-medium-gap, 8px);
+  list-style: none;
+}
+
+.UnderlineNav-item {
+  position: relative;
+  display: flex;
+  padding: 0 var(--yattho-control-medium-paddingInline-condensed, 8px);
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  line-height: 30px;
+  color: var(--color-fg-default);
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  align-items: center;
+}
+
+.UnderlineNav-item:hover,
+  .UnderlineNav-item:focus,
+  .UnderlineNav-item:focus-visible {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    border-bottom-color: var(--color-neutral-muted);
+    outline-offset: -2px;
+    transition: border-bottom-color 0.12s ease-out;
+  }
+
+/* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
+
+.UnderlineNav-item [data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+/* increase touch target area */
+
+.UnderlineNav-item::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: 48px;
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+}
+
+/* hover state was "sticking" on mobile after click */
+
+@media (pointer: fine) {
+    .UnderlineNav-item:hover {
+      color: var(--color-fg-default);
+      text-decoration: none;
+      background: var(--color-action-list-item-default-hover-bg);
+      transition: background 0.12s ease-out;
+    }
+  }
+
+.UnderlineNav-item.selected,
+  .UnderlineNav-item[role='tab'][aria-selected='true'],
+  .UnderlineNav-item[aria-current]:not([aria-current='false']) {
+    font-weight: var(--base-text-weight-semibold, 600);
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-yattho-border-active);
+
+    /* current/selected underline */
+  }
+
+.UnderlineNav-item.selected::after, .UnderlineNav-item[role='tab'][aria-selected='true']::after, .UnderlineNav-item[aria-current]:not([aria-current='false'])::after {
+      position: absolute;
+      right: 50%;
+      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--color-yattho-border-active);
+      border-radius: var(--yattho-borderRadius-medium, 6px);
+      transform: translate(50%, -50%);
+    }
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+}
+
+.UnderlineNav--right .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+
+  /* required for underline to align with additional wrapper element */
+}
+
+.UnderlineNav--full .UnderlineNav-body {
+    min-height: var(--base-size-48, 48px);
+  }
+
+.UnderlineNav-octicon {
+  display: inline !important;
+}
+
+.UnderlineNav-octicon {
+  margin-right: var(--yattho-control-medium-gap, 8px);
+  color: var(--color-fg-muted);
+  fill: var(--color-fg-muted);
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -0,0 +1 @@
+{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:hover","\n  .UnderlineNav-item:focus","\n  .UnderlineNav-item:focus-visible",".UnderlineNav-item [data-content]::before",".UnderlineNav-item::before",".UnderlineNav-item.selected","\n  .UnderlineNav-item[role='tab'][aria-selected='true']","\n  .UnderlineNav-item[aria-current]:not([aria-current='false'])",".UnderlineNav-item.selected::after"," .UnderlineNav-item[role='tab'][aria-selected='true']::after"," .UnderlineNav-item[aria-current]:not([aria-current='false'])::after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,aAAa;EACb,qCAAqC;EACrC,gBAAgB;EAChB,kBAAkB;EAClB,oDAAoD;EACpD,gCAAgC;EAChC,8BAA8B;AAYhC;;AAVE;IACE,kDAAkD;IAClD,8BAA8B;IAC9B,4CAA4C;EAC9C;;AAEA;IACE,kCAAkC;IAClC,+CAA+C;EACjD;;AAGF;EACE,aAAa;EACb,mBAAmB;EACnB,0CAA0C;EAC1C,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,aAAa;EACb,oEAAoE;EACpE,oDAAoD;EACpD,iBAAiB;EACjB,8BAA8B;EAC9B,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,6BAA6B;EAC7B,SAAS;EACT,qDAAqD;EACrD,mBAAmB;AAwDrB;;AAtDE;;;IAGE,8BAA8B;IAC9B,qBAAqB;IACrB,+CAA+C;IAC/C,oBAAoB;IACpB,8CAA8C;EAChD;;AAEA,sHAAsH;;AACtH;IACE,cAAc;IACd,SAAS;IACT,kDAAkD;IAClD,kBAAkB;IAClB,2BAA2B;EAC7B;;AAEA,+BAA+B;;AAE7B;EClEJ,mBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA;ADkE8B;;AAG5B,qDAAqD;;AACrD;IACE;MACE,8BAA8B;MAC9B,qBAAqB;MACrB,0DAA0D;MAC1D,qCAAqC;IACvC;EACF;;AAEA;;;IAGE,kDAAkD;IAClD,8BAA8B;IAC9B,sDAAsD;;IAEtD,+BAA+B;EAYjC;;AAXE;MACE,kBAAkB;MAClB,UAAU;MACV,wBAAwB,EAAE,uCAAuC;MACjE,WAAW;MACX,WAAW;MACX,WAAW;MACX,6CAA6C;MAC7C,qDAAqD;MACrD,+BAA+B;IACjC;;AAIJ;EACE,yBAAyB;AAK3B;;AAHE;IACE,cAAc;EAChB;;AAGF;EACE,kBAAkB;AACpB;;AAEA;EACE,cAAc;;EAEd,oEAAoE;AAItE;;AAHE;IACE,qCAAqC;EACvC;;AAGF;EACE,0BAA0B;AAI5B;;AALA;EAEE,mDAAmD;EACnD,4BAA4B;EAC5B,2BAA2B;AAC7B;;AAEA;EACE,aAAa;EACb,8BAA8B;AAChC","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--yattho-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--yattho-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--yattho-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [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  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-yattho-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-yattho-border-active);\n      border-radius: var(--yattho-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--yattho-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}",null]}

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

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