openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    RadioButtonGroup = Primer::FormComponents.from_input(Primer::Forms::Dsl::RadioButtonGroupInput)
+
+    # A group of mutually exclusive radio buttons.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.radio_button_group(attributes) do |group|
+    #         group.radio_button(radio_button_attributes)
+    #       end
+    #     end
+    #   end
+    class RadioButtonGroup < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @param name [String] Value for the HTML name attribute.
+      # @param label [String] Label text displayed above the input.
+      # @param hidden [Boolean] When set to `true`, visually hides the group.
+      # @param caption [String] A string describing the field and what sorts of input it expects. Displayed below the group.
+      # @param label_arguments [Hash] Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag.
+
+      # @!method radio_button
+      #
+      # Adds a radio button to the group.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::RadioButton) %>.
+      # @param block [Proc] The block accepted by <%= link_to_component(Primer::Alpha::RadioButton) %>.
+    end
+  end
+end

data/app/components/primer/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 Primer::Beta::IconButton.new(icon: @icon, "aria-label": @label, **@system_arguments) %>
+  <% else %>
+    <%= render Primer::Beta::Button.new(**@system_arguments) do |button| %>
+      <% button.with_leading_visual_icon(icon: @icon) unless @icon.nil? %>
+      <%= @label %>
+    <% end %>
+  <% end %>
+</li>

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  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 < Primer::BaseComponent
+        status :alpha
+        audited_at "2023-02-01"
+
+        # @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/primer/alpha/segmented_control.css

@@ -0,0 +1 @@
+.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--button-default-fgColor-rest,var(--color-btn-text));font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}

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

@@ -0,0 +1,33 @@
+{
+  "name": "alpha/segmented_control",
+  "selectors": [
+    ".SegmentedControl",
+    ".SegmentedControl-item",
+    ".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
+    ".SegmentedControl-item .Button--invisible:active:not(:disabled)",
+    ".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:not(:first-child):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",
+    ".SegmentedControl--fullWidth .Button-withTooltip"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,mFAAqF,CACrF,4CAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,4CAAyC,CAFzC,mBAAoB,CAGpB,4DAAsD,CAJtD,iBAkIF,CA3HI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BACE,QAAS,CAGT,8DAAyC,CAFzC,8CAA2C,CAC3C,eAOF,CAJE,6CAEE,wDAAqD,CADrD,sHAEF,CAGF,sCACE,sJAEC,CACD,yHAWF,CATE,uDACE,mJAOF,CAFI,8DC9FR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD8FoF,CAKlF,uCACE,oJAEC,CACD,wHAWF,CATE,wDACE,mJAOF,CAFI,+DC/GR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD+GoF,CAKlF,sCACE,qJAEC,CACD,uHAWF,CATE,uDACE,oJAOF,CAFI,8DChIR,WAAA,YAAA,SAAA,4CAAA,2CAAA,kBAAA,QAAA,4CAAA,UDgIkF,CAKhF,yCACE,eACF,CAEA,oFACE,8DACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  padding: var(--control-xsmall-paddingInline-condensed);\n\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    transition: none;\n    color: var(--button-default-fgColor-rest);\n\n    &:focus-visible {\n      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - 5px);\n    }\n  }\n\n  & .Button--small {\n    height: calc(\n      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n      }\n    }\n  }\n\n  & .Button--medium {\n    height: calc(\n      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n      }\n    }\n  }\n\n  & .Button--large {\n    height: calc(\n      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);\n      }\n    }\n  }\n\n  & .Button--iconOnly {\n    padding: initial;\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* is .Button-withTooltip used anywhere? can't find use of it */\n  & .Button--iconOnly,\n  & .Button-withTooltip {\n    width: 100%;\n  }\n}\n",null]}

data/app/components/primer/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 {};

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

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

data/app/components/primer/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/primer/alpha/segmented_control.pcss

@@ -0,0 +1,157 @@
+/* SegmentedControl */
+
+.SegmentedControl {
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
+  border-radius: var(--borderRadius-medium);
+}
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  padding: var(--control-xsmall-paddingInline-condensed);
+
+  & .Button--invisible {
+    &:hover:not(:disabled) {
+      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
+    }
+  }
+
+  /* Selected ---------------------------------------- */
+  &.SegmentedControl-item--selected {
+    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));
+    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));
+
+    & .Button {
+      font-weight: var(--base-text-weight-semibold);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &::before {
+      border-color: transparent !important;
+    }
+
+    & + .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);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* Separator lines */
+  &:not(:first-child) {
+    &::before {
+      position: absolute;
+      inset: 0 0 0 -1px;
+      margin-top: var(--control-medium-paddingBlock);
+      margin-bottom: var(--control-medium-paddingBlock);
+      content: '';
+      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+    }
+  }
+
+  /* Button ----------------------------------------- */
+  & .Button {
+    border: 0;
+    font-weight: var(--base-text-weight-normal);
+    transition: none;
+    color: var(--button-default-fgColor-rest);
+
+    &:focus-visible {
+      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
+      border-radius: calc(var(--borderRadius-medium) - 5px);
+    }
+  }
+
+  & .Button--small {
+    height: calc(
+      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
+    );
+    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));
+
+    &.Button--iconOnly {
+      width: calc(
+        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
+      );
+
+      &::before {
+        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
+      }
+    }
+  }
+
+  & .Button--medium {
+    height: calc(
+      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
+    );
+    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));
+
+    &.Button--iconOnly {
+      width: calc(
+        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
+      );
+
+      &::before {
+        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
+      }
+    }
+  }
+
+  & .Button--large {
+    height: calc(
+      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
+    );
+    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));
+
+    &.Button--iconOnly {
+      width: calc(
+        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
+      );
+
+      &::before {
+        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);
+      }
+    }
+  }
+
+  & .Button--iconOnly {
+    padding: initial;
+  }
+
+  & .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--button-default-fgColor-rest);
+  }
+}
+
+/* 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/primer/alpha/segmented_control.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use a segmented control to let users select an option from a short list and immediately apply the selection
+    # @accessibility
+    #   A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.
+    #   See the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.
+    class SegmentedControl < Primer::Component
+      status :alpha
+      audited_at "2023-02-01"
+
+      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|
+        Primer::Alpha::SegmentedControl::Item.new(
+          label: label,
+          selected: selected,
+          icon: icon,
+          hide_labels: @hide_labels,
+          size: @size,
+          block: @full_width,
+          **system_arguments
+        )
+      }
+
+      # @example With a label above and caption below
+      #   <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
+      #     <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
+      #     <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
+      #       <% component.with_item(label: "Preview", selected: true) %>
+      #       <% component.with_item(label: "Raw") %>
+      #       <% component.with_item(label: "Blame") %>
+      #     <% end %>
+      #     <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
+      #   <% end %>
+      #
+      # @example With a label and caption on the left
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(id: "scLabel-vert") { "File view" } %>
+      #     <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
+      #         <% component.with_item(label: "Preview", selected: true) %>
+      #         <% component.with_item(label: "Raw") %>
+      #         <% component.with_item(label: "Blame") %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Basic usage
+      #
+      #   <%= render(Primer::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(Primer::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(Primer::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(Primer::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(Primer::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(Primer::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: Primer::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
+        )
+
+        validate_aria_label
+      end
+
+      def render?
+        valid_items_count = items.count <= (@hide_labels ? 6 : 5) && items.count >= 2
+        raise ArgumentError, "A segmented control should have 2–5 choices with text labels, or up to 6 icon-only buttons." if !valid_items_count && !Rails.env.production?
+
+        valid_items_count
+      end
+    end
+  end
+end

data/app/components/primer/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/primer/alpha/select.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    Select = Primer::FormComponents.from_input(Primer::Forms::Dsl::SelectInput)
+
+    # Select lists are single-line text inputs rendered as `<select>` tags in HTML.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.select_list(attributes) do |list|
+    #         list.option(option_attributes)
+    #       end
+    #     end
+    #   end
+    class Select < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @macro form_size_arguments
+      # @macro form_input_arguments
+      #
+      # @param multiple [Boolean] If set to true, the selection will allow multiple choices.
+      # @param include_blank [Boolean, String] If set to true, an empty option will be created. If set to a string, the string will be used as the option's content and the value will be empty.
+      # @param prompt [String] Create a prompt option with blank value and the text asking user to select something.
+
+      # @!method option
+      #
+      # Adds an option to the list.
+      #
+      # @param label [String] The user-facing label for the option.
+      # @param value [String] The value sent to the server on form submission.
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    SubmitButton = Primer::FormComponents.from_input(Primer::Forms::Dsl::SubmitButtonInput)
+
+    # A submit button input rendered using the HTML `<button type="submit">` tag.
+    #
+    # This component wraps the Primer button component and supports the same slots and arguments.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.submit(attributes)
+    #     end
+    #   end
+    class SubmitButton < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @param name [String] Value for the HTML name attribute.
+      # @param id [String] Value for the HTML id attribute.
+      # @param class [String] CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders.
+      # @param classes [Array] CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored).
+      # @param label [String] Label text displayed above the input.
+      # @param aria [Hash] Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current="true"`.
+      # @param data [Hash] Key/value pairs that represent data attributes and their values. Eg. `data: { foo: "bar" }` becomes `data-foo="bar"`.
+      # @macro form_system_arguments
+    end
+  end
+end

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

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

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

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

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  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(Primer::Alpha::TabNav) %>.
+    #
+    # This component requires javascript.
+    class TabContainer < Primer::Component
+      # @example Default
+      #   <%= render(Primer::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(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+
+      def render?
+        content.present?
+      end
+    end
+  end
+end

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

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