yattho_view_components 0.0.1

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

@@ -0,0 +1,130 @@
+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;
+};
+/* eslint-disable custom-elements/expose-class-on-global */
+import { controller, target, targets } from '@github/catalyst';
+let NavListElement = class NavListElement extends HTMLElement {
+    connectedCallback() {
+        this.setShowMoreItemState();
+    }
+    get showMoreDisabled() {
+        return this.showMoreItem.hasAttribute('aria-disabled');
+    }
+    set showMoreDisabled(value) {
+        if (value) {
+            this.showMoreItem.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.showMoreItem.removeAttribute('aria-disabled');
+        }
+        this.showMoreItem.classList.toggle('disabled', value);
+    }
+    set currentPage(value) {
+        this.showMoreItem.setAttribute('data-current-page', value.toString());
+    }
+    get currentPage() {
+        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
+    }
+    get totalPages() {
+        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
+    }
+    get paginationSrc() {
+        return this.showMoreItem.getAttribute('src') || '';
+    }
+    // expand collapsible item onClick
+    expandItem(item) {
+        var _a;
+        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-hidden');
+        item.setAttribute('aria-expanded', 'true');
+    }
+    collapseItem(item) {
+        var _a;
+        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
+        item.setAttribute('aria-expanded', 'false');
+    }
+    itemIsExpanded(item) {
+        if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
+            return true;
+        }
+        return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-expanded')) === 'true';
+    }
+    // expand/collapse item
+    handleItemWithSubItemClick(e) {
+        const el = e.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        const button = el.closest('button');
+        if (!button)
+            return;
+        if (this.itemIsExpanded(button)) {
+            this.collapseItem(button);
+        }
+        else {
+            this.expandItem(button);
+        }
+        e.stopPropagation();
+    }
+    async showMore(e) {
+        var _a, _b;
+        e.preventDefault();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = this.parseHTML(document, html);
+        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
+        this.list.insertBefore(fragment, this.showMoreItem);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+    parseHTML(document, html) {
+        const template = document.createElement('template');
+        // eslint-disable-next-line github/no-inner-html
+        template.innerHTML = html;
+        return document.importNode(template.content, true);
+    }
+};
+__decorate([
+    target
+], NavListElement.prototype, "list", void 0);
+__decorate([
+    target
+], NavListElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListElement.prototype, "focusMarkers", void 0);
+NavListElement = __decorate([
+    controller
+], NavListElement);

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

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # `NavList` provides a simple way to render side navigation, i.e. navigation
+    # that appears to the left or right side of some main content. Each section in a
+    # nav list is a list of links.
+    #
+    # Nav list sections can contain sub items. Rather than navigating to a URL, sections
+    # with sub items expand and collapse on click. To indicate this functionality, the
+    # section will automatically render with a trailing chevron icon that changes direction
+    # when the section expands and collapses.
+    #
+    # Nav list items appear visually active when selected. Each nav item must have one
+    # or more ID values that determine which item will appear selected. Use the
+    # `selected_item_id` argument to select the appropriate item.
+    class NavList < Yattho::Component
+      status :alpha
+
+      # Sections. Each section is a list of links and an optional heading.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Yattho::Alpha::NavList::Section) %>.
+      renders_many :sections, lambda { |**system_arguments|
+        Yattho::Alpha::NavList::Section.new(selected_item_id: @selected_item_id, **system_arguments)
+      }
+
+      # @example Items and headings
+      #
+      #   <%= render(Yattho::Alpha::NavList.new(selected_item_id: :personal_info)) do |component| %>
+      #     <% component.with_section(aria: { label: "Settings" }) do |section| %>
+      #       <% section.with_item(label: "General", selected_by_ids: :general, href: "/settings/general") %>
+      #     <% end %>
+      #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
+      #       <% section.with_heading(title: "Account Settings") %>
+      #       <% section.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") %>
+      #       <% section.with_item(label: "Password", selected_by_ids: :password, href: "/account/password") %>
+      #       <% section.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Leading and trailing visuals
+      #
+      #   <%= render(Yattho::Alpha::NavList.new(selected_item_id: :personal_info)) do |component| %>
+      #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
+      #       <% section.with_heading(title: "Account Settings") %>
+      #       <% section.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") do |item| %>
+      #         <% item.with_leading_visual_avatar(src: "https://github.com/github.png", alt: "GitHub") %>
+      #       <% end %>
+      #       <% section.with_item(label: "Notifications", selected_by_ids: :notifications, href: "/account/notifications") do |item| %>
+      #         <% item.with_leading_visual_icon(icon: :bell) %>
+      #         <% item.with_trailing_visual_counter(count: 15) %>
+      #       <% end %>
+      #       <% section.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") do |item| %>
+      #         <% item.with_leading_visual_icon(icon: :package) %>
+      #         <% item.with_trailing_visual_icon(icon: :"dot-fill", color: :attention) %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Expandable sub items
+      #
+      #   <%= render(Yattho::Alpha::NavList.new(selected_item_id: :email_notifications)) do |component| %>
+      #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
+      #       <% section.with_heading(title: "Account Settings") %>
+      #       <% section.with_item(label: "Notification settings", selected_by_ids: :notifications) do |item| %>
+      #         <% item.with_leading_visual_icon(icon: :bell) %>
+      #         <% item.with_item(label: "Email", selected_by_ids: :email_notifications, href: "/account/notifications/email") do |subitem| %>
+      #           <% subitem.with_trailing_visual_icon(icon: :mail) %>
+      #         <% end %>
+      #         <% item.with_item(label: "SMS", selected_by_ids: :sms_notifications, href: "/account/notifications/sms") do |subitem| %>
+      #           <% subitem.with_trailing_visual_icon(icon: :"device-mobile") %>
+      #         <% end %>
+      #       <% end %>
+      #       <% section.with_item(label: "Messages", selected_by_ids: :messages) do |item| %>
+      #         <% item.with_leading_visual_icon(icon: :bookmark) %>
+      #         <% item.with_item(label: "Inbox", href: "/account/messages/inbox") do |subitem| %>
+      #           <% subitem.with_trailing_visual_counter(count: 10) %>
+      #         <% end %>
+      #         <% item.with_item(label: "Organizer", href: "/account/messages/organizer") do |subitem| %>
+      #           <% subitem.with_trailing_visual_label(scheme: :primary) { "New" } %>
+      #         <% end %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Trailing action
+      #
+      #   <%= render(Yattho::Alpha::NavList.new) do |component| %>
+      #     <% component.with_section(aria: { label: "Favorite foods" }) do |section| %>
+      #       <% section.with_heading(title: "My Favorite Foods") %>
+      #       <% section.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
+      #         <% item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Add new food", size: :medium) %>
+      #       <% end %>
+      #       <% section.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
+      #         <% item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Add new food", size: :medium) %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(selected_item_id: nil, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "ActionListWrap"
+        )
+        @selected_item_id = selected_item_id
+      end
+    end
+  end
+end

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

@@ -0,0 +1,129 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+import {controller, target, targets} from '@github/catalyst'
+
+@controller
+class NavListElement extends HTMLElement {
+  @target list: HTMLElement
+  @target showMoreItem: HTMLElement
+  @targets focusMarkers: HTMLElement[]
+
+  connectedCallback(): void {
+    this.setShowMoreItemState()
+  }
+
+  get showMoreDisabled(): boolean {
+    return this.showMoreItem.hasAttribute('aria-disabled')
+  }
+
+  set showMoreDisabled(value: boolean) {
+    if (value) {
+      this.showMoreItem.setAttribute('aria-disabled', 'true')
+    } else {
+      this.showMoreItem.removeAttribute('aria-disabled')
+    }
+    this.showMoreItem.classList.toggle('disabled', value)
+  }
+
+  set currentPage(value: number) {
+    this.showMoreItem.setAttribute('data-current-page', value.toString())
+  }
+
+  get currentPage(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
+  }
+
+  get totalPages(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
+  }
+
+  get paginationSrc(): string {
+    return this.showMoreItem.getAttribute('src') || ''
+  }
+
+  // expand collapsible item onClick
+  expandItem(item: HTMLElement) {
+    item.nextElementSibling?.removeAttribute('data-hidden')
+    item.setAttribute('aria-expanded', 'true')
+  }
+
+  collapseItem(item: HTMLElement) {
+    item.nextElementSibling?.setAttribute('data-hidden', '')
+    item.setAttribute('aria-expanded', 'false')
+  }
+
+  itemIsExpanded(item: HTMLElement | null) {
+    if (item?.tagName === 'A') {
+      return true
+    }
+    return item?.getAttribute('aria-expanded') === 'true'
+  }
+
+  // expand/collapse item
+  handleItemWithSubItemClick(e: Event) {
+    const el = e.target
+    if (!(el instanceof HTMLElement)) return
+
+    const button = el.closest<HTMLButtonElement>('button')
+    if (!button) return
+    if (this.itemIsExpanded(button)) {
+      this.collapseItem(button)
+    } else {
+      this.expandItem(button)
+    }
+
+    e.stopPropagation()
+  }
+
+  private async showMore(e: Event) {
+    e.preventDefault()
+    if (this.showMoreDisabled) return
+    this.showMoreDisabled = true
+    let html
+    try {
+      const paginationURL = new URL(this.paginationSrc, window.location.origin)
+      this.currentPage++
+      paginationURL.searchParams.append('page', this.currentPage.toString())
+      const response = await fetch(paginationURL)
+      if (!response.ok) return
+      html = await response.text()
+      if (this.currentPage === this.totalPages) {
+        this.showMoreItem.hidden = true
+      }
+    } catch (err) {
+      // Ignore network errors
+      this.showMoreDisabled = false
+      this.currentPage--
+      return
+    }
+    const fragment = this.parseHTML(document, html)
+    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
+    this.list.insertBefore(fragment, this.showMoreItem)
+    this.focusMarkers.pop()?.focus()
+    this.showMoreDisabled = false
+  }
+
+  private setShowMoreItemState() {
+    if (!this.showMoreItem) {
+      return
+    }
+
+    if (this.currentPage < this.totalPages) {
+      this.showMoreItem.hidden = false
+    } else {
+      this.showMoreItem.hidden = true
+    }
+  }
+
+  private parseHTML(document: Document, html: string): DocumentFragment {
+    const template = document.createElement('template')
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html
+    return document.importNode(template.content, true)
+  }
+}
+
+declare global {
+  interface Window {
+    NavListElement: typeof NavListElement
+  }
+}

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" hidden>
+  <%= symbol_tags %>
+</svg>

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

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require "octicons"
+
+module Yattho
+  module Alpha
+    # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
+    class OcticonSymbols < Yattho::Component
+      # @example Symbol dictionary
+      #   <%= render(Yattho::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
+      #   <%= render(Yattho::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
+      #   <%= render(Yattho::Beta::Octicon.new(icon: :check, use_symbol: true, size: :medium)) %>
+      #   <%= render(Yattho::Alpha::OcticonSymbols.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
+      #
+      # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
+      def initialize(icons: [])
+        @icons = {}
+        icons.each do |icon|
+          symbol = icon[:symbol]
+          size = Yattho::Beta::Octicon::SIZE_MAPPINGS[
+            fetch_or_fallback(Yattho::Beta::Octicon::SIZE_OPTIONS, icon[:size] || Yattho::Beta::Octicon::SIZE_DEFAULT,
+                              Yattho::Beta::Octicon::SIZE_DEFAULT)
+          ]
+
+          cache_key = Yattho::Octicon::Cache.get_key(symbol: symbol, size: size)
+
+          if (cache_icon = Yattho::Octicon::Cache.read(cache_key))
+            icon_instance = cache_icon
+          else
+            icon_instance = Octicons::Octicon.new(symbol, height: size)
+
+            Yattho::Octicon::Cache.set(cache_key, icon_instance)
+          end
+
+          # Don't put the same icon twice
+          @icons[[symbol, icon_instance.height]] = icon_instance if @icons[[symbol, icon_instance.height]].nil?
+        end
+      end
+
+      def render?
+        @icons.any?
+      end
+
+      def symbol_tags
+        safe_join(
+          @icons.values.map do |icon|
+            content_tag(
+              :symbol,
+              icon.path.html_safe, # rubocop:disable Rails/OutputSafety
+              id: "octicon_#{icon.symbol}_#{icon.height}",
+              viewBox: icon.options[:viewBox],
+              width: icon.width,
+              height: icon.height
+            )
+          end
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<li class="<%= class_names(
+  "SegmentedControl-item",
+  "SegmentedControl-item--selected": @selected
+  ) %>" role="listitem" data-targets="segmented-control.items">
+  <% if @hide_labels %>
+    <%= render Yattho::Beta::IconButton.new(icon: @icon, "aria-label": @label, **@system_arguments) %>
+  <% else %>
+    <%= render Yattho::Beta::Button.new(**@system_arguments) do |button| %>
+      <% button.with_leading_visual_icon(icon: @icon) unless @icon.nil? %>
+      <%= @label %>
+    <% end %>
+  <% end %>
+</li>

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    class SegmentedControl
+      # SegmentedControl::Item is a private component that is only used by SegmentedControl
+      # It wraps the Button and IconButton components to provide the correct styles
+      class Item < Yattho::BaseComponent
+        status :alpha
+
+        # @param label [String] The label to use
+        # @param selected [Boolean] Whether the item is selected
+        # @param icon [Symbol] The icon to use
+        # @param hide_labels [Symbol] Whether to only show the icon
+        def initialize(label:, selected: false, icon: nil, hide_labels: false, **system_arguments)
+          @icon = icon
+          @hide_labels = hide_labels
+          @label = label
+          @selected = selected
+
+          @system_arguments = system_arguments
+          @system_arguments[:'data-action'] = "click:segmented-control#select" if system_arguments[:href].nil?
+          @system_arguments[:'aria-current'] = selected
+          @system_arguments[:scheme] = :invisible
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,164 @@
+/* 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.SegmentedControl-item--selected {
+    background-color: var(--color-btn-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: transparent;
+      }
+
+.SegmentedControl-item.SegmentedControl-item--selected::before {
+      border-color: transparent;
+    }
+
+.SegmentedControl-item.SegmentedControl-item--selected + .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 */
+
+.SegmentedControl-item .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 */
+
+.SegmentedControl-item::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 ----------------------------------------- */
+
+.SegmentedControl-item .Button {
+    border: 0;
+    font-weight: var(--base-text-weight-normal, 400);
+    transition: none;
+    color: var(--color-btn-text);
+  }
+
+.SegmentedControl-item .Button: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);
+    }
+
+.SegmentedControl-item .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));
+  }
+
+.SegmentedControl-item .Button--small.Button--iconOnly {
+      width: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+    }
+
+.SegmentedControl-item .Button--small.Button--iconOnly::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--yattho-control-medium-size, 32px);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+  min-width: var(--yattho-control-medium-size, 32px);
+}
+
+.SegmentedControl-item .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));
+  }
+
+.SegmentedControl-item .Button--medium.Button--iconOnly {
+      width: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+    }
+
+.SegmentedControl-item .Button--medium.Button--iconOnly::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--yattho-control-medium-size, 32px);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+  min-width: var(--yattho-control-medium-size, 32px);
+}
+
+.SegmentedControl-item .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));
+  }
+
+.SegmentedControl-item .Button--large.Button--iconOnly {
+      width: calc(var(--yattho-control-large-size, 40px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);
+    }
+
+.SegmentedControl-item .Button--large.Button--iconOnly::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--yattho-control-large-size, 40px);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+  min-width: var(--yattho-control-large-size, 40px);
+}
+
+.SegmentedControl-item .Button--iconOnly {
+    padding: initial;
+  }
+
+.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--color-btn-text);
+  }
+
+/* fullWidth */
+
+.SegmentedControl--fullWidth {
+  display: flex;
+}
+
+.SegmentedControl--fullWidth .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }
+
+/* is .Button-withTooltip used anywhere? can't find use of it */
+
+.SegmentedControl--fullWidth .Button--iconOnly,
+  .SegmentedControl--fullWidth .Button-withTooltip {
+    width: 100%;
+  }

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

@@ -0,0 +1 @@
+{"name":"alpha/segmented_control","selectors":[".SegmentedControl",".SegmentedControl-item",".SegmentedControl-item.SegmentedControl-item--selected",".SegmentedControl-item.SegmentedControl-item--selected .Button",".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",".SegmentedControl-item.SegmentedControl-item--selected::before",".SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before",".SegmentedControl-item .Button-label[data-content]::before",".SegmentedControl-item::before",".SegmentedControl-item .Button",".SegmentedControl-item .Button:focus-visible",".SegmentedControl-item .Button--small",".SegmentedControl-item .Button--small.Button--iconOnly",".SegmentedControl-item .Button--small.Button--iconOnly::before",".SegmentedControl-item .Button--medium",".SegmentedControl-item .Button--medium.Button--iconOnly",".SegmentedControl-item .Button--medium.Button--iconOnly::before",".SegmentedControl-item .Button--large",".SegmentedControl-item .Button--large.Button--iconOnly",".SegmentedControl-item .Button--large.Button--iconOnly::before",".SegmentedControl-item .Button--iconOnly",".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-item",".SegmentedControl--fullWidth .Button--iconOnly","\n  .SegmentedControl--fullWidth .Button-withTooltip"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAAA,qBAAqB;;AAErB;EACE,oBAAoB;EACpB,gBAAgB;EAChB,mDAAmD;EACnD,qDAAqD;EACrD,uGAAuG;AACzG;;AAEA;EACE,kBAAkB;EAClB,oBAAoB;EACpB,6EAA6E;EAC7E,qDAAqD;EACrD,kEAAkE;;EAElE,sDAAsD;AAoGxD;;AAnGE;IACE,qCAAqC;IACrC,mEAAmE;EAiBrE;;AAfE;MACE,kDAAkD;IAKpD;;AAHE;QACE,6BAA6B;MAC/B;;AAGF;MACE,yBAAyB;IAC3B;;AAEA;MACE,yBAAyB;IAC3B;;AAGF,oHAAoH;;AACpH;IACE,cAAc;IACd,SAAS;IACT,kDAAkD;IAClD,kBAAkB;IAClB,2BAA2B;EAC7B;;AAEA,oBAAoB;;AACpB;IACE,kBAAkB;IAClB,iBAAiB;IACjB,0DAA0D;IAC1D,6DAA6D;IAC7D,WAAW;IACX,kGAAkG;EACpG;;AAEA,qDAAqD;;AACrD;IACE,SAAS;IACT,gDAAgD;IAChD,gBAAgB;IAChB,4BAA4B;EAM9B;;AAJE;MACE,qHAAqH;MACrH,iEAAiE;IACnE;;AAGF;IACE,8JAA8J;IAC9J,qIAAqI;EASvI;;AAPE;MACE,8JAA8J;IAKhK;;AAFI;EC/ER,mBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,aAAA;EAAA,oDAAA;EAAA,YAAA;EAAA,6CAAA;EAAA;AD+E8G;;AAK5G;IACE,+JAA+J;IAC/J,oIAAoI;EAStI;;AAPE;MACE,8JAA8J;IAKhK;;AAFI;EC5FR,mBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,aAAA;EAAA,oDAAA;EAAA,YAAA;EAAA,6CAAA;EAAA;AD4F8G;;AAK5G;IACE,8JAA8J;IAC9J,qIAAqI;EASvI;;AAPE;MACE,6JAA6J;IAK/J;;AAFI;ECzGR,mBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,aAAA;EAAA,mDAAA;EAAA,YAAA;EAAA,6CAAA;EAAA;ADyG4G;;AAK1G;IACE,gBAAgB;EAClB;;AAEA;IACE,4BAA4B;EAC9B;;AAGF,cAAc;;AACd;EACE,aAAa;AAYf;;AAVE;IACE,OAAO;IACP,uBAAuB;EACzB;;AAEA,+DAA+D;;AAC/D;;IAEE,WAAW;EACb","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(--yattho-borderRadius-medium, 6px);\n  box-shadow: var(--yattho-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);\n}\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  padding: var(--yattho-control-xsmall-paddingInline-condensed, 4px);\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--color-btn-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;\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  &::before {\n    position: absolute;\n    inset: 0 0 0 -1px;\n    margin-top: var(--yattho-control-medium-paddingBlock, 6px);\n    margin-bottom: var(--yattho-control-medium-paddingBlock, 6px);\n    content: '';\n    border-left: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\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(--yattho-control-xsmall-paddingInline-condensed, 4px) - var(--yattho-borderWidth-thin, 1px));\n      border-radius: calc(var(--yattho-borderRadius-medium, 6px) - 5px);\n    }\n  }\n\n  & .Button--small {\n    height: calc(var(--yattho-control-small-size, 28px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);\n    padding: 0 calc(var(--yattho-control-small-paddingInline-condensed, 8px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px));\n\n    &.Button--iconOnly {\n      width: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);\n\n      &::before {\n        @mixin minTouchTarget var(--yattho-control-medium-size, 32px), var(--yattho-control-medium-size, 32px);\n      }\n    }\n  }\n\n  & .Button--medium {\n    height: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);\n    padding: 0 calc(var(--yattho-control-medium-paddingInline-normal, 12px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px));\n\n    &.Button--iconOnly {\n      width: calc(var(--yattho-control-medium-size, 32px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);\n\n      &::before {\n        @mixin minTouchTarget var(--yattho-control-medium-size, 32px), var(--yattho-control-medium-size, 32px);\n      }\n    }\n  }\n\n  & .Button--large {\n    height: calc(var(--yattho-control-large-size, 40px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);\n    padding: 0 calc(var(--yattho-control-large-paddingInline-spacious, 16px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px));\n\n    &.Button--iconOnly {\n      width: calc(var(--yattho-control-large-size, 40px) - var(--yattho-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--yattho-borderWidth-thin, 1px) * 2);\n\n      &::before {\n        @mixin minTouchTarget var(--yattho-control-large-size, 40px), var(--yattho-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}",null]}

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

@@ -0,0 +1,12 @@
+declare class SegmentedControlElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    connectedCallback(): void;
+    select(event: Event): void;
+}
+declare global {
+    interface Window {
+        SegmentedControlElement: typeof SegmentedControlElement;
+    }
+}
+export {};