@primer/view-components 0.0.92 → 0.0.93

package/app/assets/styles/primer_view_components.css

@@ -0,0 +1 @@
+:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 12px;padding:0 var(--primer-control-small-paddingInline-normal,12px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 12px;padding:0 var(--primer-control-large-paddingInline-normal,12px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-fg-default);border:none;color:var(--color-fg-default)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{.Button-label:not(:only-child){color:var(--color-btn-text)}.Button-content:not(:only-child){.Button-label{color:var(--color-btn-text)}}}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}

package/app/assets/styles/primer_view_components.css.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"primer_view_components.css"}
+{"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button  */\n/* temporary, pre primitives release */\n:root {\n  --primer-duration-fast: 80ms;\n  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--primer-control-medium-size, 32px);\n  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n\n  /* mobile friendly sizing */\n  @media (pointer: course) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--primer-duration-fast);\n  }\n\n  &:active,\n  &.Button--active {\n    transition: none;\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* &:focus {\n    @mixin focusOutline;\n  } */\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--primer-text-body-size-small, 12px);\n  height: var(--primer-control-small-size, 28px);\n  padding: 0 var(--primer-control-small-paddingInline-normal, 12px);\n  gap: var(--primer-control-small-gap, 4px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--primer-control-large-size, 40px);\n  padding: 0 var(--primer-control-large-paddingInline-normal, 12px);\n  gap: var(--primer-control-large-gap, 8px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover  {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active,\n  &.Button--active {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* link color without svg */\n.Button--invisible {\n  color: var(--color-fg-default);\n  fill: var(--color-fg-default);\n  border: none;\n\n  &:hover {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active,\n  &.Button--active,\n  &.Button--pressed {\n    background-color: var(--color-action-list-item-default-active-bg);\n    /* box-shadow: var(--color-primer-shadow-inset); */\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n\n  /* if visual is present, muted label color */\n  .Button-label:not(:only-child) {\n    color: var(--color-btn-text);\n  }\n\n  /* if trailingAction is present, muted label color */\n  .Button-content:not(:only-child) {\n    .Button-label {\n      color: var(--color-btn-text);\n    }\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--primer-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--primer-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--primer-control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}

package/app/components/primer/alpha/modal-dialog-element.d.ts

@@ -6,7 +6,7 @@ export declare class ModalDialogElement extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     show(): void;
-    close(closed?: boolean): void;
+    close(closedNotCancelled?: boolean): void;
 }
 declare global {
     interface Window {

package/app/components/primer/alpha/modal-dialog-element.js

@@ -92,7 +92,6 @@ export class ModalDialogElement extends HTMLElement {
             }
             dialogId = button.getAttribute('data-show-dialog-id');
             if (dialogId === this.id) {
-                //TODO: see if I can remove this
                 event.stopPropagation();
                 __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
                 this.show();
@@ -107,10 +106,10 @@ export class ModalDialogElement extends HTMLElement {
     show() {
         this.open = true;
     }
-    close(closed = false) {
+    close(closedNotCancelled = false) {
         if (this.open === false)
             return;
-        const eventType = closed ? 'close' : 'cancel';
+        const eventType = closedNotCancelled ? 'close' : 'cancel';
         const dialogEvent = new Event(eventType);
         this.dispatchEvent(dialogEvent);
         this.open = false;

package/app/components/primer/alpha/toggle-switch-element.js

@@ -99,6 +99,8 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         }
         body.append('value', this.isOn() ? '1' : '0');
         try {
+            if (!this.src)
+                throw new Error('invalid src');
             const response = await fetch(this.src, {
                 credentials: 'same-origin',
                 method: 'POST',

package/app/components/primer/experimental/action-bar-element.d.ts

@@ -0,0 +1,14 @@
+import type { ActionMenuElement } from './action-menu-element';
+export declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    menuItems: HTMLElement[];
+    moreMenu: ActionMenuElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}

package/app/components/primer/experimental/action-bar-element.js

@@ -0,0 +1,139 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+/* eslint-disable custom-elements/define-tag-after-class-definition */
+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 __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 __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 _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_calculateVisibleItems, _ActionBarElement_nextItemWidth, _ActionBarElement_hideItem, _ActionBarElement_showItem, _ActionBarElement_hiddenItems, _ActionBarElement_visibleItems, _ActionBarElement_hiddenMenuItems, _ActionBarElement_visibleMenuItems;
+import { controller, targets, target } from '@github/catalyst';
+import { positionedOffset, focusZone, FocusKeys } from '@primer/behaviors';
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        _ActionBarElement_observer.set(this, void 0);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+        _ActionBarElement_itemGap.set(this, void 0);
+        _ActionBarElement_focusController.set(this, void 0);
+        _ActionBarElement_focusSettings.set(this, {
+            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+        });
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
+        // Calculate the width of all the items before hiding anything
+        for (const item of this.items) {
+            const width = item.getBoundingClientRect().width;
+            const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
+            const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
+            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+        // Calculate visible items on page load until there is enough space
+        // to show all items or the first item is hidden
+        while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < 0 && !this.items[0].hidden) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_calculateVisibleItems).call(this);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
+            for (const entry of entries) {
+                // Only recalculate if the bar width changed
+                if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
+                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_calculateVisibleItems).call(this);
+                }
+            }
+        }), "f");
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
+    }
+};
+_ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
+    // Get the offset of the first item from the container edge
+    const offset = positionedOffset(this.items[0], this);
+    if (!offset) {
+        return this.clientWidth - this.moreMenu.clientWidth;
+    }
+    return offset.left;
+}, _ActionBarElement_calculateVisibleItems = function _ActionBarElement_calculateVisibleItems() {
+    const space = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this);
+    if (space < 0) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this);
+    }
+    else if (space > __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_nextItemWidth).call(this)) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this);
+    }
+}, _ActionBarElement_nextItemWidth = function _ActionBarElement_nextItemWidth() {
+    const nextItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenItems).call(this)[0] || this.items[0];
+    return Number(nextItem.getAttribute('data-offset-width') || '0');
+}, _ActionBarElement_hideItem = function _ActionBarElement_hideItem() {
+    var _a;
+    const visibleItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_visibleItems).call(this);
+    const hiddenMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenMenuItems).call(this);
+    if (visibleItems.length === 0) {
+        return;
+    }
+    visibleItems[visibleItems.length - 1].hidden = true;
+    hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
+    if (this.moreMenu.hidden) {
+        this.moreMenu.hidden = false;
+    }
+    // Reset focus controller
+    (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+}, _ActionBarElement_showItem = function _ActionBarElement_showItem() {
+    var _a;
+    const hiddenItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenItems).call(this);
+    const visibleMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_visibleMenuItems).call(this);
+    if (hiddenItems.length === 0) {
+        return;
+    }
+    hiddenItems[0].hidden = false;
+    visibleMenuItems[0].hidden = true;
+    // If there was only one item left, hide the more menu
+    if (hiddenItems.length === 1) {
+        this.moreMenu.hidden = true;
+        this.moreMenu.open = false;
+    }
+    // Reset focus controller
+    (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+}, _ActionBarElement_hiddenItems = function _ActionBarElement_hiddenItems() {
+    return this.items.filter(item => item.hidden);
+}, _ActionBarElement_visibleItems = function _ActionBarElement_visibleItems() {
+    return this.items.filter(item => !item.hidden);
+}, _ActionBarElement_hiddenMenuItems = function _ActionBarElement_hiddenMenuItems() {
+    return this.menuItems.filter(item => item.hidden);
+}, _ActionBarElement_visibleMenuItems = function _ActionBarElement_visibleMenuItems() {
+    return this.menuItems.filter(item => !item.hidden);
+};
+__decorate([
+    targets
+], ActionBarElement.prototype, "items", void 0);
+__decorate([
+    targets
+], ActionBarElement.prototype, "menuItems", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "moreMenu", void 0);
+ActionBarElement = __decorate([
+    controller
+], ActionBarElement);
+export { ActionBarElement };

package/app/components/primer/experimental/action-menu-element.d.ts

@@ -0,0 +1,31 @@
+import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
+export declare class ActionMenuElement extends HTMLElement {
+    #private;
+    get anchorAlign(): AnchorAlignment;
+    get anchorSide(): AnchorSide;
+    get menu(): HTMLUListElement | null;
+    get trigger(): HTMLButtonElement | null;
+    get overlay(): HTMLDivElement | null;
+    get menuItems(): HTMLElement[] | null;
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    setFocusToMenuItem(newMenuItem: HTMLElement): void;
+    setFocusToPreviousMenuItem(currentMenuItem: HTMLElement): HTMLElement | undefined;
+    setFocusToNextMenuItem(currentMenuItem: HTMLElement): HTMLElement | undefined;
+    setFocusByFirstCharacter(currentMenuItem: HTMLElement, character: string): void;
+    buttonKeydown(event: KeyboardEvent): void;
+    buttonClick(event: MouseEvent): void;
+    menuItemKeydown(event: KeyboardEvent): void;
+    menuItemClick(): void;
+    menuItemMouseover(event: MouseEvent): void;
+    backgroundMousedown(event: MouseEvent): void;
+}
+declare global {
+    interface Window {
+        ActionMenuElement: typeof ActionMenuElement;
+    }
+}

package/app/components/primer/experimental/action-menu-element.js

@@ -0,0 +1,334 @@
+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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_firstCharactersOfItems, _ActionMenuElement_firstMenuItem, _ActionMenuElement_lastMenuItem, _ActionMenuElement_addEvents, _ActionMenuElement_updatePosition;
+import { getAnchoredPosition } from '@primer/behaviors';
+export class ActionMenuElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionMenuElement_instances.add(this);
+        _ActionMenuElement_abortController.set(this, void 0);
+        _ActionMenuElement_firstCharactersOfItems.set(this, void 0);
+        _ActionMenuElement_firstMenuItem.set(this, void 0);
+        _ActionMenuElement_lastMenuItem.set(this, void 0);
+    }
+    get anchorAlign() {
+        return (this.getAttribute('data-anchor-align') || 'start');
+    }
+    get anchorSide() {
+        return (this.getAttribute('data-anchor-side') || 'outside-bottom');
+    }
+    get menu() {
+        return this.querySelector('[role="menu"]');
+    }
+    get trigger() {
+        return this.querySelector('button');
+    }
+    get overlay() {
+        return this.querySelector('.Overlay');
+    }
+    get menuItems() {
+        if (!this.menu)
+            return null;
+        return Array.from(this.menu.querySelectorAll('[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'));
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b;
+        const initialBodyWidth = document.body.clientWidth;
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (initialBodyWidth !== entry.contentRect.width && this.open) {
+                    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updatePosition).call(this);
+                }
+            }
+        });
+        if (value) {
+            if (this.open)
+                return;
+            if (!this.trigger || !this.menu)
+                return;
+            this.setAttribute('open', '');
+            this.trigger.setAttribute('aria-expanded', 'true');
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
+            this.menu.style.visibility = 'hidden';
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updatePosition).call(this);
+            // If the window width is changed when the menu is open,
+            // this keeps the menu aligned to the button
+            observer.observe(document.body);
+            this.menu.style.visibility = 'visible';
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+            this.overlay && this.overlay.setAttribute('hidden', 'true');
+            observer.unobserve(document.body);
+            // TODO: Do this without a setTimeout
+            setTimeout(() => {
+                var _a;
+                // There are some actions that may move focus to another part of the page intentionally.
+                // For example: "Quote Reply" in the comment options moves focus to the comment box.
+                // This only moves focus to the trigger if it's not managed in another way.
+                if (document.activeElement === document.body)
+                    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 1);
+        }
+    }
+    connectedCallback() {
+        if (!this.trigger)
+            return;
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_addEvents).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    setFocusToMenuItem(newMenuItem) {
+        if (!this.menuItems)
+            return;
+        for (const item of this.menuItems) {
+            if (item === newMenuItem) {
+                item.tabIndex = 0;
+                newMenuItem.focus();
+            }
+            else {
+                item.tabIndex = -1;
+            }
+        }
+    }
+    setFocusToPreviousMenuItem(currentMenuItem) {
+        if (!this.menuItems)
+            return;
+        let newMenuItem = null;
+        let index = null;
+        if (currentMenuItem === __classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f")) {
+            newMenuItem = __classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f");
+        }
+        else {
+            index = this.menuItems.indexOf(currentMenuItem);
+            newMenuItem = this.menuItems[index - 1];
+        }
+        this.setFocusToMenuItem(newMenuItem);
+        return newMenuItem;
+    }
+    setFocusToNextMenuItem(currentMenuItem) {
+        if (!this.menuItems)
+            return;
+        let newMenuItem = null;
+        let index = null;
+        if (currentMenuItem === __classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f")) {
+            newMenuItem = __classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f");
+        }
+        else {
+            index = this.menuItems.indexOf(currentMenuItem);
+            newMenuItem = this.menuItems[index + 1];
+        }
+        this.setFocusToMenuItem(newMenuItem);
+        return newMenuItem;
+    }
+    setFocusByFirstCharacter(currentMenuItem, character) {
+        if (!this.menuItems)
+            return;
+        let start = null;
+        let index = null;
+        if (character.length > 1) {
+            return;
+        }
+        character = character.toLowerCase();
+        // Get start index for search based on position of currentMenuItem
+        start = this.menuItems.indexOf(currentMenuItem) + 1;
+        if (start >= this.menuItems.length) {
+            start = 0;
+        }
+        // Check remaining slots in the menu
+        index = __classPrivateFieldGet(this, _ActionMenuElement_firstCharactersOfItems, "f").indexOf(character, start);
+        // If character is not found in remaining slots, check from beginning
+        if (index === -1) {
+            index = __classPrivateFieldGet(this, _ActionMenuElement_firstCharactersOfItems, "f").indexOf(character, 0);
+        }
+        // If match is found
+        if (index > -1) {
+            this.setFocusToMenuItem(this.menuItems[index]);
+        }
+    }
+    // Menu event handlers
+    buttonKeydown(event) {
+        // TODO: use data-hotkey
+        const key = event.key;
+        let flag = false;
+        switch (key) {
+            case ' ':
+            case 'Enter':
+            case 'ArrowDown':
+            case 'Down':
+                this.show();
+                this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f"));
+                flag = true;
+                break;
+            case 'Esc':
+            case 'Escape':
+                this.hide();
+                flag = true;
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.show();
+                this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f"));
+                flag = true;
+                break;
+            default:
+                break;
+        }
+        if (flag) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    buttonClick(event) {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f"));
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    menuItemKeydown(event) {
+        var _a;
+        const currentTarget = event.currentTarget;
+        const key = event.key;
+        let flag = false;
+        function isPrintableCharacter(str) {
+            return str.length === 1 && str.match(/\S/);
+        }
+        if (event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+        if (event.shiftKey) {
+            if (isPrintableCharacter(key)) {
+                this.setFocusByFirstCharacter(currentTarget, key);
+                flag = true;
+            }
+            if (event.key === 'Tab') {
+                (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+                this.hide();
+                flag = true;
+            }
+        }
+        else {
+            switch (key) {
+                case 'Enter':
+                    this.hide();
+                    break;
+                case 'Esc':
+                case 'Escape':
+                    this.hide();
+                    flag = true;
+                    break;
+                case 'Up':
+                case 'ArrowUp':
+                    this.setFocusToPreviousMenuItem(currentTarget);
+                    flag = true;
+                    break;
+                case 'ArrowDown':
+                case 'Down':
+                    this.setFocusToNextMenuItem(currentTarget);
+                    flag = true;
+                    break;
+                case 'Home':
+                case 'PageUp':
+                    this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f"));
+                    flag = true;
+                    break;
+                case 'End':
+                case 'PageDown':
+                    this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f"));
+                    flag = true;
+                    break;
+                case 'Tab':
+                    this.hide();
+                    break;
+                default:
+                    if (isPrintableCharacter(key)) {
+                        this.setFocusByFirstCharacter(currentTarget, key);
+                        flag = true;
+                    }
+                    break;
+            }
+        }
+        if (flag) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    menuItemClick() {
+        this.hide();
+    }
+    menuItemMouseover(event) {
+        event.currentTarget.focus();
+    }
+    backgroundMousedown(event) {
+        if (!this)
+            return;
+        if (!this.contains(event.target)) {
+            if (this.open) {
+                this.hide();
+            }
+        }
+    }
+}
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_firstCharactersOfItems = new WeakMap(), _ActionMenuElement_firstMenuItem = new WeakMap(), _ActionMenuElement_lastMenuItem = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_addEvents = function _ActionMenuElement_addEvents() {
+    __classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f");
+    const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
+    if (!this.trigger || !this.menu)
+        return;
+    this.trigger.addEventListener('keydown', this.buttonKeydown.bind(this), { signal });
+    this.trigger.addEventListener('click', this.buttonClick.bind(this), { signal });
+    __classPrivateFieldSet(this, _ActionMenuElement_firstCharactersOfItems, [], "f");
+    if (this.menuItems) {
+        for (const menuItem of this.menuItems) {
+            if (menuItem.textContent) {
+                __classPrivateFieldGet(this, _ActionMenuElement_firstCharactersOfItems, "f").push(menuItem.textContent.trim()[0].toLowerCase());
+            }
+            menuItem.addEventListener('keydown', this.menuItemKeydown.bind(this), { signal });
+            menuItem.addEventListener('click', this.menuItemClick.bind(this), { signal });
+            menuItem.addEventListener('mouseover', this.menuItemMouseover.bind(this), { signal });
+            if (!__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f")) {
+                __classPrivateFieldSet(this, _ActionMenuElement_firstMenuItem, menuItem, "f");
+            }
+            __classPrivateFieldSet(this, _ActionMenuElement_lastMenuItem, menuItem, "f");
+        }
+    }
+    window.addEventListener('mousedown', this.backgroundMousedown.bind(this), true);
+}, _ActionMenuElement_updatePosition = function _ActionMenuElement_updatePosition() {
+    if (!this.trigger || !this.menu)
+        return;
+    const float = this.querySelector('[data-menu-overlay]') || this.menu;
+    const anchor = this.trigger;
+    const { top, left } = getAnchoredPosition(float, anchor, { side: this.anchorSide, align: this.anchorAlign });
+    float.style.top = `${top}px`;
+    float.style.left = `${left}px`;
+};
+if (!window.customElements.get('action-menu')) {
+    window.ActionMenuElement = ActionMenuElement;
+    window.customElements.define('action-menu', ActionMenuElement);
+}

package/app/components/primer/experimental/overflow-menu-element.d.ts

@@ -0,0 +1,13 @@
+export declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    menuItems: HTMLElement[];
+    moreMenu: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}