@primer/view-components 0.0.89 → 0.0.92

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

@@ -0,0 +1,143 @@
+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_abortController, _ModalDialogElement_openButton, _ModalDialogElement_shouldTryLoadingFragment, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusTrap } from '@primer/behaviors';
+import { getFocusableChild } from '@primer/behaviors/utils';
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
+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());
+        _ModalDialogElement_abortController.set(this, null);
+        _ModalDialogElement_openButton.set(this, void 0);
+        _ModalDialogElement_shouldTryLoadingFragment.set(this, true);
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b, _c, _d;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            document.body.style.overflow = 'hidden';
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            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 = ((_c = __classPrivateFieldGet(this, _ModalDialogElement_openButton, "f")) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = __classPrivateFieldGet(this, _ModalDialogElement_openButton, "f")) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
+            if (menu) {
+                focusIfNeeded(getFocusableChild(menu));
+            }
+            else {
+                focusIfNeeded(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
+            }
+            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
+        }
+    }
+    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');
+        const { signal } = (__classPrivateFieldSet(this, _ModalDialogElement_abortController, new AbortController(), "f"));
+        this.ownerDocument.addEventListener('click', event => {
+            const target = event.target;
+            const clickOutsideDialog = target.closest(this.tagName) !== this;
+            const button = target === null || target === void 0 ? void 0 : target.closest('button');
+            // go over this logic:
+            if (!button) {
+                if (clickOutsideDialog) {
+                    // This click is outside the dialog
+                    this.close();
+                }
+                return;
+            }
+            let dialogId = button.getAttribute('data-close-dialog-id');
+            if (dialogId === this.id) {
+                this.close();
+            }
+            dialogId = button.getAttribute('data-submit-dialog-id');
+            if (dialogId === this.id) {
+                this.close(true);
+            }
+            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();
+            }
+        }, { signal });
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    show() {
+        this.open = true;
+    }
+    close(closed = false) {
+        if (this.open === false)
+            return;
+        const eventType = closed ? 'close' : 'cancel';
+        const dialogEvent = new Event(eventType);
+        this.dispatchEvent(dialogEvent);
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_shouldTryLoadingFragment = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.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;
+    switch (event.key) {
+        case 'Escape':
+            if (this.open) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+};
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

package/app/components/primer/alpha/segmented-control-element.d.ts

@@ -0,0 +1,8 @@
+export default class SegmentedControlElement extends HTMLElement {
+    constructor();
+}
+declare global {
+    interface Window {
+        SegmentedControlElement: typeof SegmentedControlElement;
+    }
+}

package/app/components/primer/alpha/segmented-control-element.js

@@ -0,0 +1,28 @@
+/* eslint-disable custom-elements/no-constructor */
+export default class SegmentedControlElement extends HTMLElement {
+    constructor() {
+        super();
+        this.addEventListener('click', (event) => {
+            var _a, _b;
+            const controls = Array.from(this.querySelectorAll('ul button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
+            if (!(event.target instanceof Element))
+                return;
+            if (event.target.closest(this.tagName) !== this)
+                return;
+            const selectedControl = event.target.closest('button');
+            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('ul'))
+                return;
+            for (const control of controls) {
+                (_a = control.closest('li')) === null || _a === void 0 ? void 0 : _a.classList.remove('SegmentedControl-item--selected');
+                control.setAttribute('aria-current', 'false');
+            }
+            (_b = selectedControl.closest('li')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
+            selectedControl.setAttribute('aria-current', 'true');
+            selectedControl.focus();
+        });
+    }
+}
+if (!window.customElements.get('segmented-control')) {
+    window.SegmentedControlElement = SegmentedControlElement;
+    window.customElements.define('segmented-control', SegmentedControlElement);
+}

package/app/components/primer/alpha/toggle-switch-element.d.ts

@@ -0,0 +1,28 @@
+export declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): void;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private check;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+    }
+}

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

@@ -0,0 +1,135 @@
+/* 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;
+};
+import { controller, target } from '@github/catalyst';
+import { debounce } from '@github/mini-throttle/decorators';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    get src() {
+        const src = this.getAttribute('src');
+        if (!src)
+            return null;
+        const link = this.ownerDocument.createElement('a');
+        link.href = src;
+        return link.href;
+    }
+    get csrf() {
+        const csrfElement = this.querySelector('[data-csrf]');
+        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+    }
+    get csrfField() {
+        // the authenticity token is passed into the element and is not generated in js land
+        return this.getAttribute('csrf-field') || 'authenticity_token';
+    }
+    isRemote() {
+        return this.src != null;
+    }
+    toggle() {
+        if (this.isRemote()) {
+            this.setLoadingState();
+            this.check();
+        }
+        else {
+            this.performToggle();
+        }
+    }
+    turnOn() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'true');
+        this.classList.add('ToggleSwitch--checked');
+    }
+    turnOff() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'false');
+        this.classList.remove('ToggleSwitch--checked');
+    }
+    isOn() {
+        return this.switch.getAttribute('aria-checked') === 'true';
+    }
+    isOff() {
+        return !this.isOn();
+    }
+    isDisabled() {
+        return this.switch.getAttribute('aria-disabled') === 'true';
+    }
+    disable() {
+        this.switch.setAttribute('aria-disabled', 'true');
+    }
+    enable() {
+        this.switch.setAttribute('aria-disabled', 'false');
+    }
+    performToggle() {
+        if (this.isOn()) {
+            this.turnOff();
+        }
+        else {
+            this.turnOn();
+        }
+    }
+    setLoadingState() {
+        this.disable();
+        this.errorIcon.setAttribute('hidden', 'hidden');
+        this.loadingSpinner.removeAttribute('hidden');
+    }
+    setSuccessState() {
+        this.setFinishedState(false);
+    }
+    setErrorState() {
+        this.setFinishedState(true);
+    }
+    setFinishedState(error) {
+        if (error) {
+            this.errorIcon.removeAttribute('hidden');
+        }
+        this.loadingSpinner.setAttribute('hidden', 'hidden');
+        this.enable();
+    }
+    async check() {
+        const body = new FormData();
+        if (this.csrf) {
+            body.append(this.csrfField, this.csrf);
+        }
+        body.append('value', this.isOn() ? '1' : '0');
+        try {
+            const response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                body
+            });
+            if (response.ok) {
+                this.setSuccessState();
+                this.performToggle();
+            }
+            else {
+                this.setErrorState();
+            }
+        }
+        catch (error) {
+            this.setErrorState();
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+__decorate([
+    debounce(300)
+], ToggleSwitchElement.prototype, "check", null);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+export { ToggleSwitchElement };

package/app/components/primer/alpha/tool-tip-element.d.ts

@@ -9,13 +9,13 @@ declare class ToolTipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
-    set visibilityHidden(value: true | false);
-    get visibilityHidden(): true | false;
+    set hiddenFromView(value: true | false);
+    get hiddenFromView(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
     static observedAttributes: string[];
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string): void;
 }
 declare global {
     interface Window {

package/app/components/primer/alpha/tool-tip-element.js

@@ -1,18 +1,19 @@
+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 __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 _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
 import { getAnchoredPosition } from '@primer/behaviors';
 const TOOLTIP_OPEN_CLASS = 'tooltip-open';
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
+const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -176,11 +177,13 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
-    set visibilityHidden(value) {
-        this.style.visibility = value ? 'hidden' : '';
+    set hiddenFromView(value) {
+        this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value);
+        if (this.isConnected)
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
     }
-    get visibilityHidden() {
-        return this.style.visibility === 'hidden';
+    get hiddenFromView() {
+        return this.classList.contains(TOOLTIP_SR_ONLY_CLASS);
     }
     connectedCallback() {
         var _a;
@@ -194,7 +197,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `;
         }
-        this.visibilityHidden = true;
+        this.hiddenFromView = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
@@ -222,27 +225,35 @@ class ToolTipElement extends HTMLElement {
             return;
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
-            this.visibilityHidden = false;
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
+            this.hiddenFromView = false;
         }
         else if (event.type === 'blur') {
-            this.visibilityHidden = true;
+            this.hiddenFromView = true;
         }
         else if (event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this) {
-            this.visibilityHidden = true;
+            this.hiddenFromView = true;
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.visibilityHidden) {
-            this.visibilityHidden = true;
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hiddenFromView) {
+            this.hiddenFromView = true;
         }
     }
-    attributeChangedCallback(name, oldValue, newValue) {
+    attributeChangedCallback(name) {
         if (name === 'id' || name === 'data-type') {
             if (!this.id || !this.control)
                 return;
             if (this.type === 'label') {
-                this.control.setAttribute('aria-labelledby', this.id);
+                let labelledBy = this.control.getAttribute('aria-labelledby');
+                if (labelledBy) {
+                    labelledBy = `${labelledBy} ${this.id}`;
+                }
+                else {
+                    labelledBy = this.id;
+                }
+                this.control.setAttribute('aria-labelledby', labelledBy);
+                // Prevent duplicate accessible name announcements.
                 this.setAttribute('aria-hidden', 'true');
             }
             else {
@@ -251,9 +262,6 @@ class ToolTipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
-            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
-        }
         else if (name === 'data-direction') {
             this.classList.remove(...DIRECTION_CLASSES);
             const direction = this.direction;
@@ -293,21 +301,21 @@ class ToolTipElement extends HTMLElement {
     }
 }
 _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.visibilityHidden) {
+    if (this.hiddenFromView) {
         this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
     }
     else {
         this.classList.add(TOOLTIP_OPEN_CLASS);
         for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
             if (tooltip !== this)
-                tooltip.visibilityHidden = true;
+                tooltip.hiddenFromView = true;
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.visibilityHidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hiddenFromView)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
@@ -351,7 +359,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'style'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

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

@@ -5,4 +5,5 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
+import './alpha/toggle-switch-element';
 import './alpha/tool-tip-element';

package/app/components/primer/primer.js

@@ -5,4 +5,5 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
+import './alpha/toggle-switch-element';
 import './alpha/tool-tip-element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.0.89",
+  "version": "0.0.92",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -20,22 +20,28 @@
     "url": "https://github.com/primer/view_components/issues"
   },
   "files": [
+    "app/assets/**/*",
     "app/components/primer/**/*.js",
+    "app/components/primer/**/*.css",
     "app/components/primer/**/*.d.ts"
   ],
   "scripts": {
     "build:docs": "cd docs && yarn gatsby build --prefix-paths",
     "build:docs:preview": "cd docs && yarn gatsby build",
-    "prepare": "rm -rf docs/static && mkdir -p docs/static && tsc && rollup -c && cp app/assets/javascripts/primer_view_components.js docs/static/primer_view_components.js",
+    "prepare": "rm -rf docs/static && mkdir -p docs/static && yarn build:js && yarn build:css && cp app/assets/**/primer_view_components.* docs/static/",
     "lint": "eslint 'app/components/**/*.ts' demo/.storybook",
     "lint:fix": "eslint 'app/components/**/*.ts' demo/.storybook --fix",
-    "changeset:version": "changeset version && script/version"
+    "changeset:version": "changeset version && script/version",
+    "build:js": "tsc && rollup -c",
+    "build:css": "postcss -o app/assets/styles/primer_view_components.css app/components/primer/primer.pcss"
   },
   "dependencies": {
     "@github/auto-complete-element": "^3.3.4",
+    "@github/catalyst": "^1.6.0",
     "@github/clipboard-copy-element": "^1.1.2",
     "@github/details-menu-element": "^1.0.12",
     "@github/image-crop-element": "^5.0.0",
+    "@github/mini-throttle": "^2.1.0",
     "@github/tab-container-element": "^3.1.2",
     "@github/time-elements": "^3.1.2",
     "@primer/behaviors": "^1.1.3"
@@ -44,17 +50,22 @@
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.1",
     "@github/prettier-config": "0.0.4",
-    "@primer/css": "^20.3.0",
+    "@primer/css": "^20.4.2",
     "@primer/primitives": "^7.9.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
+    "cssnano": "^5.1.13",
     "eslint": "^8.20.0",
     "eslint-plugin-custom-elements": "^0.0.6",
     "eslint-plugin-github": "^4.3.7",
     "eslint-plugin-prettier": "^4.2.1",
     "mocha": "^10.0.0",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-import": "^14.1.0",
+    "postcss-preset-env": "^7.8.0",
     "rollup": "^2.77.1",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.4.0",