@mixtint/primer-view-components 0.75.2 → 0.84.3

package/app/components/primer/open_project/inline_message.css

@@ -0,0 +1,42 @@
+.InlineMessage {
+  display: grid;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--inline-message-fontSize);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--inline-message-lineHeight);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--inline-message-fgColor);
+  column-gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+}
+
+.InlineMessage[data-size='small'] {
+    --inline-message-fontSize: var(--text-body-size-small);
+    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+.InlineMessage[data-size='medium'] {
+    --inline-message-fontSize: var(--text-body-size-medium);
+    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+.InlineMessage[data-variant='warning'] {
+    --inline-message-fgColor: var(--fgColor-attention);
+  }
+
+.InlineMessage[data-variant='critical'] {
+    --inline-message-fgColor: var(--fgColor-danger);
+  }
+
+.InlineMessage[data-variant='success'] {
+    --inline-message-fgColor: var(--fgColor-success);
+  }
+
+.InlineMessage[data-variant='unavailable'] {
+    --inline-message-fgColor: var(--fgColor-muted);
+  }
+
+.InlineMessageIcon {
+  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
+}

package/app/components/primer/open_project/inline_message.css.json

@@ -0,0 +1,13 @@
+{
+  "name": "open_project/inline_message",
+  "selectors": [
+    ".InlineMessage",
+    ".InlineMessage[data-size='small']",
+    ".InlineMessage[data-size='medium']",
+    ".InlineMessage[data-variant='warning']",
+    ".InlineMessage[data-variant='critical']",
+    ".InlineMessage[data-variant='success']",
+    ".InlineMessage[data-variant='unavailable']",
+    ".InlineMessageIcon"
+  ]
+}

package/app/components/primer/open_project/page_header.css

@@ -70,6 +70,39 @@
   justify-content: flex-end;
   display: flex;
   align-items: center;
+  color: var(--fgColor-default);
+}
+
+/* OpenProject legacy form markup inside header actions: match Primer / dark theme */
+
+.PageHeader-actions .form--label {
+  color: var(--fgColor-muted);
+  min-width: 0;
+  max-width: none;
+  flex-grow: 0;
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--control-medium-lineBoxHeight);
+}
+
+.PageHeader-actions select.form--select {
+  color: var(--fgColor-default);
+  background-color: var(--control-bgColor-rest);
+  border-color: var(--borderColor-default);
+}
+
+.PageHeader-actions select.form--select:focus,
+.PageHeader-actions select.form--select:active {
+  border-color: var(--fgColor-accent);
+  outline: none;
+}
+
+.PageHeader-actions select.form--select option,
+.PageHeader-actions select.form--select optgroup {
+  background-color: var(--bgColor-default);
+  color: var(--fgColor-default);
 }
 
 .PageHeader-breadcrumbs {
@@ -85,3 +118,21 @@
 .PageHeader-parentLink {
   flex: 1 1 auto;
 }
+
+/* Hide the context bar on desktop when no breadcrumb is visible */
+
+@media screen and (min-width: 543.98px) {
+  .PageHeader--noBreadcrumb .PageHeader-contextBar {
+    display: none;
+  }
+}
+
+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
+
+.PageHeader--noBreadcrumb .PageHeader-titleBar {
+    line-height: var(--control-small-size);
+  }
+
+.PageHeader--noBreadcrumb .PageHeader-actions {
+    height: var(--control-small-size);
+  }

package/app/components/primer/open_project/page_header.css.json

@@ -13,8 +13,17 @@
     ".PageHeader-tabNavBar .PageHeader-tabNav",
     ".PageHeader--withTabNav .PageHeader-description",
     ".PageHeader-actions",
+    ".PageHeader-actions .form--label",
+    ".PageHeader-actions select.form--select",
+    ".PageHeader-actions select.form--select:focus",
+    ".PageHeader-actions select.form--select:active",
+    ".PageHeader-actions select.form--select option",
+    ".PageHeader-actions select.form--select optgroup",
     ".PageHeader-breadcrumbs",
     ".PageHeader-leadingAction",
-    ".PageHeader-parentLink"
+    ".PageHeader-parentLink",
+    ".PageHeader--noBreadcrumb .PageHeader-contextBar",
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar",
+    ".PageHeader--noBreadcrumb .PageHeader-actions"
   ]
 }

package/app/components/primer/open_project/pagination.css

@@ -0,0 +1,87 @@
+.Page {
+  min-width: var(--base-size-32);
+  height: var(--base-size-32);
+  padding: var(--base-size-8) var(--base-size-6);
+  margin-right: var(--base-size-4);
+  color: var(--fgColor-default);
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: var(--borderRadius-medium,.375rem);
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Page[rel='prev'] > svg,
+.Page[rel='next'] > svg {
+  height: var(--base-size-16);
+  width: var(--base-size-16);
+}
+
+.Page[rel='prev'] > svg {
+  margin-inline-end: var(--base-size-4);
+}
+
+.Page[rel='next'] > svg {
+  margin-inline-start: var(--base-size-4);
+}
+
+.Page:last-child {
+  margin-right: 0;
+}
+
+.Page:hover,
+.Page:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: var(--control-transparent-bgColor-hover);
+  outline: 0;
+  transition-duration: 0.1s;
+}
+
+.Page:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+}
+
+.Page:active {
+  border-color: var(--borderColor-muted);
+}
+
+.Page[rel='prev'],
+.Page[rel='next'] {
+  color: var(--fgColor-accent);
+}
+
+.Page[aria-current],
+.Page[aria-current]:hover {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-accent-emphasis);
+  border-color: transparent;
+}
+
+.Page[aria-current]:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+  box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
+}
+
+.Page[aria-hidden],
+.Page[aria-hidden]:hover,
+.Page[role='presentation'],
+.Page[role='presentation']:hover {
+  color: var(--fgColor-disabled);
+  cursor: default;
+  background-color: transparent;
+}
+
+.PaginationContainer {
+  margin: var(--base-size-16) 0;
+  text-align: center;
+}
+
+@media (max-width: 543.98px){
+  .Page:not([rel='prev']):not([rel='next']) {
+    display: none;
+  }
+}

package/app/components/primer/open_project/pagination.css.json

@@ -0,0 +1,24 @@
+{
+  "name": "open_project/pagination",
+  "selectors": [
+    ".Page",
+    ".Page[rel='prev'] > svg",
+    ".Page[rel='next'] > svg",
+    ".Page:last-child",
+    ".Page:hover",
+    ".Page:focus",
+    ".Page:focus-visible",
+    ".Page:active",
+    ".Page[rel='prev']",
+    ".Page[rel='next']",
+    ".Page[aria-current]",
+    ".Page[aria-current]:hover",
+    ".Page[aria-current]:focus-visible",
+    ".Page[aria-hidden]",
+    ".Page[aria-hidden]:hover",
+    ".Page[role='presentation']",
+    ".Page[role='presentation']:hover",
+    ".PaginationContainer",
+    ".Page:not([rel='prev']):not([rel='next'])"
+  ]
+}

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

@@ -22,6 +22,7 @@ import './beta/relative_time';
 import './alpha/tab_container';
 import '../../lib/primer/forms/primer_multi_input';
 import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/primer_text_area';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
@@ -30,6 +31,7 @@ import './alpha/tree_view/tree_view';
 import './alpha/tree_view/tree_view_icon_pair_element';
 import './alpha/tree_view/tree_view_sub_tree_node_element';
 import './alpha/tree_view/tree_view_include_fragment_element';
+import './open_project/avatar_fallback';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';

package/app/components/primer/primer.js

@@ -22,6 +22,7 @@ import './beta/relative_time';
 import './alpha/tab_container';
 import '../../lib/primer/forms/primer_multi_input';
 import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/primer_text_area';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
@@ -30,6 +31,7 @@ import './alpha/tree_view/tree_view';
 import './alpha/tree_view/tree_view_icon_pair_element';
 import './alpha/tree_view/tree_view_sub_tree_node_element';
 import './alpha/tree_view/tree_view_include_fragment_element';
+import './open_project/avatar_fallback';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';

package/app/components/primer/scrollable_region.js

@@ -46,7 +46,7 @@ __decorate([
     attr
 ], ScrollableRegionElement.prototype, "labelledBy", void 0);
 ScrollableRegionElement = __decorate([
-    controller
+    controller('scrollable-region')
 ], ScrollableRegionElement);
 export { ScrollableRegionElement };
 window.ScrollableRegionElement = ScrollableRegionElement;

package/app/lib/primer/forms/character_counter.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export declare class CharacterCounter {
+    private inputElement;
+    private characterLimitElement;
+    private characterLimitSrElement;
+    private SCREEN_READER_DELAY;
+    private announceTimeout;
+    private isInitialLoad;
+    constructor(inputElement: HTMLInputElement | HTMLTextAreaElement, characterLimitElement: HTMLElement, characterLimitSrElement: HTMLElement);
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal?: AbortSignal): void;
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup(): void;
+    /**
+     * Pluralizes a word based on the count
+     */
+    private pluralize;
+    /**
+     * Update the character count display and validation state
+     */
+    private updateCharacterCount;
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    private announceToScreenReader;
+    /**
+     * Set error when character limit is exceeded
+     */
+    private setError;
+    /**
+     * Clear error when back under character limit
+     */
+    private clearError;
+}

package/app/lib/primer/forms/character_counter.js

@@ -0,0 +1,114 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+    constructor(inputElement, characterLimitElement, characterLimitSrElement) {
+        this.inputElement = inputElement;
+        this.characterLimitElement = characterLimitElement;
+        this.characterLimitSrElement = characterLimitSrElement;
+        this.SCREEN_READER_DELAY = 500;
+        this.announceTimeout = null;
+        this.isInitialLoad = true;
+    }
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal) {
+        this.inputElement.addEventListener('keyup', () => this.updateCharacterCount(), signal ? { signal } : undefined); // Keyup used over input for better screen reader support
+        this.inputElement.addEventListener('paste', () => setTimeout(() => this.updateCharacterCount(), 50), // Gives the pasted content time to register
+        signal ? { signal } : undefined);
+        this.updateCharacterCount();
+        this.isInitialLoad = false;
+    }
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup() {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+    }
+    /**
+     * Pluralizes a word based on the count
+     */
+    pluralize(count, string) {
+        return count === 1 ? string : `${string}s`;
+    }
+    /**
+     * Update the character count display and validation state
+     */
+    updateCharacterCount() {
+        if (!this.characterLimitElement)
+            return;
+        const maxLengthAttr = this.characterLimitElement.getAttribute('data-max-length');
+        if (!maxLengthAttr)
+            return;
+        const maxLength = parseInt(maxLengthAttr, 10);
+        const currentLength = this.inputElement.value.length;
+        const charactersRemaining = maxLength - currentLength;
+        let message = '';
+        if (charactersRemaining >= 0) {
+            const characterText = this.pluralize(charactersRemaining, 'character');
+            message = `${charactersRemaining} ${characterText} remaining`;
+            const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text');
+            if (textSpan) {
+                textSpan.textContent = message;
+            }
+            this.clearError();
+        }
+        else {
+            const charactersOver = -charactersRemaining;
+            const characterText = this.pluralize(charactersOver, 'character');
+            message = `${charactersOver} ${characterText} over`;
+            const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text');
+            if (textSpan) {
+                textSpan.textContent = message;
+            }
+            this.setError();
+        }
+        // We don't want this announced on initial load
+        if (!this.isInitialLoad) {
+            this.announceToScreenReader(message);
+        }
+    }
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    announceToScreenReader(message) {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+        this.announceTimeout = window.setTimeout(() => {
+            if (this.characterLimitSrElement) {
+                this.characterLimitSrElement.textContent = message;
+            }
+        }, this.SCREEN_READER_DELAY);
+    }
+    /**
+     * Set error when character limit is exceeded
+     */
+    setError() {
+        this.inputElement.setAttribute('invalid', 'true');
+        this.inputElement.setAttribute('aria-invalid', 'true');
+        this.characterLimitElement.classList.add('fgColor-danger');
+        // Show danger icon
+        const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon');
+        if (icon) {
+            icon.removeAttribute('hidden');
+        }
+    }
+    /**
+     * Clear error when back under character limit
+     */
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.inputElement.removeAttribute('aria-invalid');
+        this.characterLimitElement.classList.remove('fgColor-danger');
+        // Hide danger icon
+        const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon');
+        if (icon) {
+            icon.setAttribute('hidden', '');
+        }
+    }
+}

package/app/lib/primer/forms/primer_multi_input.js

@@ -35,7 +35,7 @@ __decorate([
     targets
 ], PrimerMultiInputElement.prototype, "fields", void 0);
 PrimerMultiInputElement = __decorate([
-    controller
+    controller('primer-multi-input')
 ], PrimerMultiInputElement);
 export { PrimerMultiInputElement };
 if (!window.customElements.get('primer-multi-input')) {

package/app/lib/primer/forms/primer_text_area.d.ts

@@ -0,0 +1,13 @@
+export declare class PrimerTextAreaElement extends HTMLElement {
+    #private;
+    inputElement: HTMLTextAreaElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        PrimerTextAreaElement: typeof PrimerTextAreaElement;
+    }
+}

package/app/lib/primer/forms/primer_text_area.js

@@ -0,0 +1,53 @@
+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 _PrimerTextAreaElement_characterCounter;
+import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
+let PrimerTextAreaElement = class PrimerTextAreaElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextAreaElement_characterCounter.set(this, null);
+    }
+    connectedCallback() {
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextAreaElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f").initialize();
+        }
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f")?.cleanup();
+    }
+};
+_PrimerTextAreaElement_characterCounter = new WeakMap();
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
+PrimerTextAreaElement = __decorate([
+    controller('primer-text-area')
+], PrimerTextAreaElement);
+export { PrimerTextAreaElement };
+if (!window.customElements.get('primer-text-area')) {
+    Object.assign(window, { PrimerTextAreaElement });
+    window.customElements.define('primer-text-area', PrimerTextAreaElement);
+}

package/app/lib/primer/forms/primer_text_field.d.ts

@@ -15,6 +15,8 @@ export declare class PrimerTextFieldElement extends HTMLElement {
     validationErrorIcon: HTMLElement;
     leadingVisual: HTMLElement;
     leadingSpinner: HTMLElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     clearContents(): void;

package/app/lib/primer/forms/primer_text_field.js

@@ -1,4 +1,3 @@
-/* eslint-disable custom-elements/expose-class-on-global */
 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);
@@ -16,13 +15,15 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _PrimerTextFieldElement_abortController;
+var _PrimerTextFieldElement_abortController, _PrimerTextFieldElement_characterCounter;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
 let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
+        _PrimerTextFieldElement_characterCounter.set(this, null);
     }
     connectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
@@ -40,9 +41,15 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
             const errorMessage = await event.detail.response.text();
             this.setError(errorMessage);
         }, { signal });
+        // Set up character limit tracking if present
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextFieldElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f").initialize(signal);
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f")?.cleanup();
     }
     clearContents() {
         this.inputElement.value = '';
@@ -92,6 +99,7 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
+_PrimerTextFieldElement_characterCounter = new WeakMap();
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "inputElement", void 0);
@@ -113,7 +121,13 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
-    controller
+    controller('primer-text-field')
 ], PrimerTextFieldElement);
 export { PrimerTextFieldElement };

package/app/lib/primer/forms/toggle_switch_input.js

@@ -29,6 +29,6 @@ __decorate([
     target
 ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
 ToggleSwitchInputElement = __decorate([
-    controller
+    controller('toggle-switch-input')
 ], ToggleSwitchInputElement);
 export { ToggleSwitchInputElement };