@mixtint/primer-view-components 0.72.0

package/app/components/primer/alpha/layout.css.json

@@ -0,0 +1,74 @@
+{
+  "name": "alpha/layout",
+  "selectors": [
+    ".Layout",
+    ".Layout .Layout-sidebar",
+    ".Layout .Layout-divider",
+    ".Layout .Layout-main",
+    ".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
+    ".Layout.Layout--divided",
+    ".Layout.Layout--divided .Layout-divider",
+    ".Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider)",
+    ".Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider)",
+    ".Layout.Layout--divided .Layout-main",
+    ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-md",
+    ".Layout.Layout--flowRow-until-md .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md .Layout-divider",
+    ".Layout.Layout--flowRow-until-md .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--divided",
+    ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",
+    ".Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider)",
+    ".Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider)",
+    ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-lg",
+    ".Layout.Layout--flowRow-until-lg .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg .Layout-divider",
+    ".Layout.Layout--flowRow-until-lg .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",
+    ".Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider)",
+    ".Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider)",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--gutter-none",
+    ".Layout.Layout--gutter-condensed",
+    ".Layout.Layout--gutter-spacious",
+    ".Layout.Layout--sidebar-narrow",
+    ".Layout.Layout--sidebar-wide",
+    ".Layout.Layout--sidebarPosition-start .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-start .Layout-main",
+    ".Layout.Layout--sidebarPosition-end",
+    ".Layout.Layout--sidebarPosition-end .Layout-main",
+    ".Layout.Layout--sidebarPosition-end .Layout-sidebar",
+    ".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",
+    ".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",
+    ".Layout-divider",
+    ".Layout-sidebar",
+    ".Layout-main",
+    ".Layout-main .Layout-main-centered-md",
+    ".Layout-main .Layout-main-centered-lg",
+    ".Layout-main .Layout-main-centered-xl",
+    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-md",
+    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-lg",
+    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-xl"
+  ]
+}

package/app/components/primer/alpha/menu.css

@@ -0,0 +1,124 @@
+/* menu */
+
+/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
+
+.menu {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: var(--stack-gap-normal);
+  list-style: none;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.menu-item:first-child {
+    border-top: 0;
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+
+.menu-item:first-child::before {
+      border-top-left-radius: var(--borderRadius-medium);
+    }
+
+.menu-item:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+.menu-item:last-child::before {
+      border-bottom-left-radius: var(--borderRadius-medium);
+    }
+
+.menu-item:hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    background-color: var(--bgColor-neutral-muted);
+  }
+
+.menu-item:active {
+    background-color: var(--bgColor-muted);
+  }
+
+.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--menu-bgColor-active);
+  }
+
+:is(.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']))::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--underlineNav-borderColor-active);
+    }
+
+.menu-item .octicon {
+    width: 16px;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: var(--control-medium-gap);
+    color: var(--fgColor-muted);
+    text-align: center;
+  }
+
+.menu-item .Counter {
+    float: right;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: var(--control-small-gap);
+  }
+
+.menu-item .menu-warning {
+    float: right;
+    color: var(--fgColor-attention);
+  }
+
+.menu-item .avatar {
+    float: left;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: var(--control-small-gap);
+  }
+
+.menu-item.alert .Counter {
+      color: var(--fgColor-danger);
+    }
+
+.menu-heading {
+  display: block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.menu-heading:hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+
+.menu-heading:first-child {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+
+.menu-heading:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }

package/app/components/primer/alpha/menu.css.json

@@ -0,0 +1,26 @@
+{
+  "name": "alpha/menu",
+  "selectors": [
+    ".menu",
+    ".menu-item",
+    ".menu-item:first-child",
+    ".menu-item:first-child::before",
+    ".menu-item:last-child",
+    ".menu-item:last-child::before",
+    ".menu-item:hover",
+    ".menu-item:active",
+    ".menu-item.selected",
+    ".menu-item[aria-selected='true']",
+    ".menu-item[aria-current]:not([aria-current='false'])",
+    ":is(.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']))::before",
+    ".menu-item .octicon",
+    ".menu-item .Counter",
+    ".menu-item .menu-warning",
+    ".menu-item .avatar",
+    ".menu-item.alert .Counter",
+    ".menu-heading",
+    ".menu-heading:hover",
+    ".menu-heading:first-child",
+    ".menu-heading:last-child"
+  ]
+}

package/app/components/primer/alpha/modal_dialog.d.ts

@@ -0,0 +1,18 @@
+export declare class ModalDialogElement extends HTMLElement {
+    #private;
+    openButton: HTMLButtonElement | null;
+    get open(): boolean;
+    set open(value: boolean);
+    get showButtons(): NodeList;
+    connectedCallback(): void;
+    show(): void;
+    close(closedNotCancelled?: boolean): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}

package/app/components/primer/alpha/modal_dialog.js

@@ -0,0 +1,187 @@
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusTrap } from '@primer/behaviors';
+import { getFocusableChild } from '@primer/behaviors/utils';
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem?.focus();
+    }
+}
+const overlayStack = [];
+function clickHandler(event) {
+    const target = event.target;
+    const button = target?.closest('button');
+    if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
+        return;
+    // If the user is clicking a valid dialog trigger
+    let dialogId = button?.getAttribute('data-show-dialog-id');
+    if (dialogId) {
+        /* eslint-disable-next-line no-restricted-syntax */
+        event.stopPropagation();
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof ModalDialogElement) {
+            dialog.openButton = button;
+            dialog.show();
+            // A buttons default behaviour in some browsers it to send a pointer event
+            // If the behaviour is allowed through the dialog will be shown but then
+            // quickly hidden- as if it were never shown. This prevents that.
+            event.preventDefault();
+            return;
+        }
+    }
+    if (!overlayStack.length)
+        return;
+    dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
+    if (dialogId) {
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof ModalDialogElement) {
+            const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId);
+            overlayStack.splice(dialogIndex, 1);
+            dialog.close(button.hasAttribute('data-submit-dialog-id'));
+        }
+    }
+}
+function keydownHandler(event) {
+    if (!(event instanceof KeyboardEvent) ||
+        event.type !== 'keydown' ||
+        event.key !== 'Enter' ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.metaKey ||
+        event.shiftKey)
+        return;
+    clickHandler(event);
+}
+function mousedownHandler(event) {
+    const target = event.target;
+    if (target?.closest('button'))
+        return;
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    // Check if the mousedown happened outside the boundary of the top level dialog
+    const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
+    // Only close dialog if it's a click outside the dialog and the dialog has a button?
+    if (mouseDownOutsideDialog) {
+        target.ownerDocument.addEventListener('mouseup', (upEvent) => {
+            if (upEvent.target === target) {
+                overlayStack.pop();
+                topLevelDialog.close();
+            }
+        }, { once: true });
+    }
+}
+export class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        //TODO: Do we remove the abortController from focusTrap?
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            this.setAttribute('aria-disabled', 'false');
+            document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
+            document.body.style.overflow = 'hidden';
+            __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.remove('Overlay--hidden');
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, this.querySelector('[autofocus]'), __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+            overlayStack.push(this);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            this.setAttribute('aria-disabled', 'true');
+            __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.add('Overlay--hidden');
+            document.body.style.paddingRight = '0';
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+            // element since it is expected for the menu to close on click
+            const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu');
+            if (menu) {
+                focusIfNeeded(getFocusableChild(menu));
+            }
+            else {
+                focusIfNeeded(this.openButton);
+            }
+            this.openButton = null;
+        }
+    }
+    get showButtons() {
+        // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+        return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        document.addEventListener('click', clickHandler);
+        document.addEventListener('keydown', keydownHandler);
+        document.addEventListener('mousedown', mousedownHandler);
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    show() {
+        this.open = true;
+    }
+    close(closedNotCancelled = false) {
+        if (this.open === false)
+            return;
+        const eventType = closedNotCancelled ? 'close' : 'cancel';
+        const dialogEvent = new Event(eventType);
+        this.dispatchEvent(dialogEvent);
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (event.isComposing)
+        return;
+    if (!this.open)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            this.close();
+            event.preventDefault();
+            /* eslint-disable-next-line no-restricted-syntax */
+            event.stopPropagation();
+            break;
+        case 'Enter': {
+            const target = event.target;
+            if (target.getAttribute('data-close-dialog-id') === this.id) {
+                /* eslint-disable-next-line no-restricted-syntax */
+                event.stopPropagation();
+            }
+            break;
+        }
+    }
+};
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

package/app/components/primer/alpha/overlay.css

@@ -0,0 +1,25 @@
+/* stylelint-disable selector-max-type, selector-no-qualifying-type */
+anchored-position[popover] {
+  position: absolute;
+  min-width: 192px;
+  padding: 0;
+  overflow: visible;
+  border-width: 0;
+}
+anchored-position:not(.Overlay) {
+  background: none;
+}
+.Overlay[popover]:not(:popover-open) {
+  display: none
+}
+anchored-position.not-anchored::backdrop, dialog::backdrop {
+  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
+}
+select-panel dialog::backdrop {
+  background: none;
+}
+@media (forced-colors: active) {
+  .Overlay {
+    outline: solid 1px transparent;
+  }
+}

package/app/components/primer/alpha/overlay.css.json

@@ -0,0 +1,12 @@
+{
+  "name": "alpha/overlay",
+  "selectors": [
+    "anchored-position[popover]",
+    "anchored-position:not(.Overlay)",
+    ".Overlay[popover]:not(:popover-open)",
+    "anchored-position.not-anchored::backdrop",
+    "dialog::backdrop",
+    "select-panel dialog::backdrop",
+    ".Overlay"
+  ]
+}

package/app/components/primer/alpha/segmented_control.css

@@ -0,0 +1,161 @@
+/* SegmentedControl */
+
+.SegmentedControl {
+  --segmentedControl-item-padding: var(--control-small-paddingBlock);
+  --overlay-offset: 0.5rem;
+
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
+  border-color: var(--controlTrack-borderColor-rest, transparent);
+  border-radius: var(--borderRadius-medium);
+}
+
+.SegmentedControl--iconOnly .Button--iconOnly.Button--small,.SegmentedControl--iconOnly .Button--iconOnly.Button--medium {
+    width: 100%;
+    padding-inline: 0 !important;
+  }
+
+/* sizes */
+
+.SegmentedControl--small {
+  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
+}
+
+.SegmentedControl--small .SegmentedControl-item {
+    height: var(--control-small-size);
+  }
+
+:is(.SegmentedControl--small .SegmentedControl-item) .Button {
+      /* stylelint-disable-next-line primer/spacing */
+      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
+    }
+
+.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item {
+      width: var(--control-small-size);
+    }
+
+.SegmentedControl--medium .SegmentedControl-item {
+    height: var(--control-medium-size);
+  }
+
+.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item {
+      width: var(--control-medium-size);
+    }
+
+/* item */
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  height: var(--control-medium-size);
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--segmentedControl-item-padding);
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  justify-content: center;
+
+  /* button color overrides */
+}
+
+:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled) {
+      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
+    }
+
+:is(.SegmentedControl-item .Button--invisible):active:not(:disabled) {
+      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
+    }
+
+/* Selected ---------------------------------------- */
+
+.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);
+    }
+
+:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover {
+        background-color: transparent;
+      }
+
+.SegmentedControl-item.SegmentedControl-item--selected::before {
+      border-color: transparent !important;
+    }
+
+.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);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+/* Separator lines */
+
+.SegmentedControl-item:not(:first-child)::before {
+      position: absolute;
+      inset: 0 0 0 -1px;
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--control-medium-paddingBlock);
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--control-medium-paddingBlock);
+      content: '';
+      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+    }
+
+/* Button ----------------------------------------- */
+
+.SegmentedControl-item .Button {
+    width: 100%;
+    min-width: fit-content;
+    height: 100%;
+    font-weight: var(--base-text-weight-normal);
+    border: 0;
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
+  }
+
+:is(.SegmentedControl-item .Button):focus-visible {
+      /* stylelint-disable-next-line primer/borders */
+      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
+      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
+    }
+
+.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--button-default-fgColor-rest);
+  }
+
+.SegmentedControl-item .Button-content {
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
+
+/* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
+
+.SegmentedControl-item .Button-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+/* fullWidth */
+
+.SegmentedControl--fullWidth {
+  display: flex;
+}
+
+.SegmentedControl--fullWidth .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }

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

@@ -0,0 +1,31 @@
+{
+  "name": "alpha/segmented_control",
+  "selectors": [
+    ".SegmentedControl",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
+    ".SegmentedControl--small",
+    ".SegmentedControl--small .SegmentedControl-item",
+    ":is(.SegmentedControl--small .SegmentedControl-item) .Button",
+    ".SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item",
+    ".SegmentedControl--medium .SegmentedControl-item",
+    ".SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item",
+    ".SegmentedControl-item",
+    ":is(.SegmentedControl-item .Button--invisible):hover:not(:disabled)",
+    ":is(.SegmentedControl-item .Button--invisible):active:not(:disabled)",
+    ".SegmentedControl-item.SegmentedControl-item--selected",
+    ".SegmentedControl-item.SegmentedControl-item--selected .Button",
+    ":is(.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",
+    ":is(.SegmentedControl-item .Button):focus-visible",
+    ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
+    ".SegmentedControl-item .Button-content",
+    ".SegmentedControl-item .Button-label",
+    ".SegmentedControl--fullWidth",
+    ".SegmentedControl--fullWidth .SegmentedControl-item"
+  ]
+}

package/app/components/primer/alpha/segmented_control.d.ts

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