@openproject/primer-view-components 0.91.1 → 0.91.2-rc.73987023b

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

@@ -1 +1 @@
-.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{--toggleSwitch-knob-inset:var(--borderWidth-thin);--toggleSwitch-knob-offset:calc(var(--toggleSwitch-knob-inset)*2);align-items:center;gap:var(--controlStack-medium-gap-condensed)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{position:relative;display:block;width:var(--base-size-64);height:var(--control-medium-size);padding:0;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:background-color,border-color;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@media (pointer:coarse){:is(.ToggleSwitch-track:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{color:var(--control-checked-fgColor-disabled);background-color:var(--controlTrack-bgColor-disabled);border-color:#0000}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);transform:translateX(calc(100% - var(--toggleSwitch-knob-offset)))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{cursor:not-allowed;background-color:var(--controlTrack-bgColor-disabled);border-color:#0000;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default)}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{line-height:0;transition-duration:80ms;transition-property:transform;flex:1 0 50%}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{position:absolute;inset-block:var(--toggleSwitch-knob-inset);inset-inline-start:var(--toggleSwitch-knob-inset);z-index:1;width:50%;background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:transform}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:var(--text-body-size-medium);line-height:var(--text-title-lineHeight-large);color:var(--fgColor-default);text-align:right}.ToggleSwitch-statusIcon{display:flex;width:var(--base-size-16);margin-top:.063rem}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{width:var(--base-size-48);height:var(--control-xsmall-size)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
+.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{--toggleSwitch-knob-inset:var(--borderWidth-thin);--toggleSwitch-knob-offset:calc(var(--toggleSwitch-knob-inset)*2);align-items:center;gap:var(--controlStack-medium-gap-condensed)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{position:relative;display:block;width:var(--base-size-64);height:var(--control-medium-size);padding:0;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:background-color,border-color;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@media (pointer:coarse){:is(.ToggleSwitch-track:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{color:var(--control-checked-fgColor-disabled);background-color:var(--controlTrack-bgColor-disabled);border-color:#0000}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);transform:translateX(calc(100% - var(--toggleSwitch-knob-offset)))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{cursor:not-allowed;background-color:var(--controlTrack-bgColor-disabled);border-color:#0000;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default)}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{line-height:0;transition-duration:80ms;transition-property:transform;flex:1 0 50%}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{position:absolute;inset-block:var(--toggleSwitch-knob-inset);inset-inline-start:var(--toggleSwitch-knob-inset);z-index:1;width:50%;background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:transform}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:var(--text-body-size-medium);line-height:var(--text-title-lineHeight-large);color:var(--fgColor-default);text-align:right}.ToggleSwitch-statusIcon{display:flex;flex:none;align-items:center;justify-content:center;width:var(--base-size-16);height:var(--base-size-16);line-height:0;margin-top:.063rem}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{width:var(--base-size-48);height:var(--control-xsmall-size)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}

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

@@ -1,4 +1,4 @@
-import { SelectStrategy, SelectVariant, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
+import { type SelectStrategy, type SelectVariant, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
 import type { TreeViewCheckedValue, TreeViewNodeInfo, TreeViewNodeType } from '../../shared_events';
 export declare class TreeViewElement extends HTMLElement {
     #private;

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

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_checkNodeOnly;
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_containsCheckedTreeItem, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_checkNodeOnly;
 import { controller, target } from '@github/catalyst';
 import { useRovingTabIndex } from './tree_view_roving_tab_index';
 let TreeViewElement = class TreeViewElement extends HTMLElement {
@@ -36,7 +36,6 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
                 for (const addedNode of mutation.addedNodes) {
                     if (!(addedNode instanceof HTMLElement))
                         continue;
-                    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
                     if (addedNode.querySelector('[aria-expanded=true]')) {
                         __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, addedNode);
                     }
@@ -50,6 +49,9 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             // nodes based on the component's select strategy. These two observers can conflict and cause infinite
             // looping, so we make sure something actually changed before computing inputs again.
             const somethingChanged = mutations.some(m => {
+                if (m.type === 'childList') {
+                    return __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_containsCheckedTreeItem).call(this, m.addedNodes) || __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_containsCheckedTreeItem).call(this, m.removedNodes);
+                }
                 if (!(m.target instanceof HTMLElement))
                     return false;
                 return m.target.getAttribute('aria-checked') !== m.oldValue;
@@ -62,6 +64,7 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             childList: true,
             subtree: true,
             attributeFilter: ['aria-checked'],
+            attributeOldValue: true,
         });
         // Correctly initialize the form
         if (this.formInputContainer) {
@@ -278,7 +281,6 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     }
     updateHiddenFormInputs() {
         const newInputs = [];
-        // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
         for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
             const newInput = this.formInputPrototype.cloneNode();
             newInput.removeAttribute('data-target');
@@ -300,6 +302,14 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
 };
 _TreeViewElement_abortController = new WeakMap();
 _TreeViewElement_instances = new WeakSet();
+_TreeViewElement_containsCheckedTreeItem = function _TreeViewElement_containsCheckedTreeItem(nodes) {
+    return [...nodes].some(node => {
+        if (!(node instanceof Element))
+            return false;
+        return (node.matches('[role=treeitem][aria-checked=true]') ||
+            Boolean(node.querySelector('[role=treeitem][aria-checked=true]')));
+    });
+};
 _TreeViewElement_autoExpandFrom = function _TreeViewElement_autoExpandFrom(root) {
     for (const element of root.querySelectorAll('[aria-expanded=true]')) {
         this.expandAncestorsForNode(element);

package/app/components/primer/open_project/border_box/collapsible_header.d.ts

@@ -1,5 +1,5 @@
 import { CollapsibleElement } from '../collapsible';
-declare class CollapsibleHeaderElement extends CollapsibleElement {
+export declare class CollapsibleHeaderElement extends CollapsibleElement {
     connectedCallback(): void;
     get baseClass(): string;
 }
@@ -8,4 +8,3 @@ declare global {
         CollapsibleHeaderElement: typeof CollapsibleHeaderElement;
     }
 }
-export {};

package/app/components/primer/open_project/border_box/collapsible_header.js

@@ -19,3 +19,4 @@ let CollapsibleHeaderElement = class CollapsibleHeaderElement extends Collapsibl
 CollapsibleHeaderElement = __decorate([
     controller('collapsible-header')
 ], CollapsibleHeaderElement);
+export { CollapsibleHeaderElement };

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

@@ -1,5 +1,5 @@
 import { CollapsibleElement } from './collapsible';
-declare class CollapsibleSectionElement extends CollapsibleElement {
+export declare class CollapsibleSectionElement extends CollapsibleElement {
     get baseClass(): string;
 }
 declare global {
@@ -7,4 +7,3 @@ declare global {
         CollapsibleSectionElement: typeof CollapsibleSectionElement;
     }
 }
-export {};

package/app/components/primer/open_project/collapsible_section.js

@@ -14,3 +14,4 @@ let CollapsibleSectionElement = class CollapsibleSectionElement extends Collapsi
 CollapsibleSectionElement = __decorate([
     controller('collapsible-section')
 ], CollapsibleSectionElement);
+export { CollapsibleSectionElement };

package/app/components/primer/open_project/zen_mode_button.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { controller, target } from '@github/catalyst';
 let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
-    // eslint-disable-next-line custom-elements/no-constructor
     constructor() {
         super();
         this.inZenMode = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.91.1",
+  "version": "0.91.2-rc.73987023b",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -99,7 +99,7 @@
     "eslint": "^9.10.0",
     "eslint-plugin-github": "^6.0.0",
     "glob": "^11.0.2",
-    "markdownlint-cli2": "^0.22.0",
+    "markdownlint-cli2": "^0.23.0",
     "mocha": "^11.0.1",
     "playwright": "^1.57.0",
     "postcss": "^8.4.16",