@mixtint/primer-view-components 0.91.1 → 0.91.2

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

@@ -292,6 +292,34 @@
   }
     }
 
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-xwide {
+      --Layout-sidebar-width: 408px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--sidebar-xwide {
+      --Layout-sidebar-width: 440px;
+  }
+    }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-xxwide {
+      --Layout-sidebar-width: 512px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--sidebar-xxwide {
+      --Layout-sidebar-width: 544px;
+  }
+    }
+
 /* Sidebar position */
 
 .Layout.Layout--sidebarPosition-start .Layout-sidebar {

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

@@ -54,6 +54,8 @@
     ".Layout.Layout--gutter-spacious",
     ".Layout.Layout--sidebar-narrow",
     ".Layout.Layout--sidebar-wide",
+    ".Layout.Layout--sidebar-xwide",
+    ".Layout.Layout--sidebar-xxwide",
     ".Layout.Layout--sidebarPosition-start .Layout-sidebar",
     ".Layout.Layout--sidebarPosition-start .Layout-main",
     ".Layout.Layout--sidebarPosition-end",

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

@@ -194,7 +194,13 @@
 
 .ToggleSwitch-statusIcon {
   display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
   width: var(--base-size-16);
+  height: var(--base-size-16);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 0;
   /* stylelint-disable-next-line primer/spacing */
   margin-top: 0.063rem;
 }

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": "@mixtint/primer-view-components",
-  "version": "0.91.1",
+  "version": "0.91.2",
   "publishConfig": {
     "access": "public"
   },
@@ -73,7 +73,7 @@
     "@github/details-menu-element": "^1.0.13",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.4.1",
-    "@github/relative-time-element": "^5.3.0",
+    "@github/relative-time-element": "^5.3.1",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
@@ -90,35 +90,35 @@
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.8.3",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@primer/css": "22.3.0",
     "@primer/primitives": "^11.10.0",
     "@primer/stylelint-config": "^13.6.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "axe-core": "^4.12.1",
+    "axe-core": "^4.13.0",
     "chokidar-cli": "^3.0.0",
     "css-what": "^8.0.0",
-    "cssnano": "^8.0.2",
+    "cssnano": "^8.0.10",
     "eslint": "^9.39.5",
     "eslint-plugin-github": "^6.1.2",
     "glob": "^11.1.0",
-    "markdownlint-cli2": "^0.22.1",
-    "mocha": "^11.7.6",
-    "playwright": "^1.62.1",
-    "postcss": "^8.5.25",
+    "markdownlint-cli2": "^0.23.2",
+    "mocha": "^11.8.0",
+    "playwright": "^1.63.0",
+    "postcss": "^8.5.28",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.1",
+    "postcss-import": "^16.2.0",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^11.3.2",
+    "postcss-preset-env": "^11.5.3",
     "prettier": "^3.9.6",
     "rollup": "^2.80.0",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0",
-    "vite-plugin-ruby": "^5.2.2"
+    "vite": "^8.3.0",
+    "vite-plugin-ruby": "^5.2.3"
   },
   "prettier": "@github/prettier-config",
   "browserslist": "extends @github/browserslist-config"

package/static/classnames.cjs

@@ -210,6 +210,8 @@ module.exports = new Set([
   'Layout--gutter-spacious',
   'Layout--sidebar-narrow',
   'Layout--sidebar-wide',
+  'Layout--sidebar-xwide',
+  'Layout--sidebar-xxwide',
   'Layout--sidebarPosition-end',
   'Layout--sidebarPosition-flowRow-end',
   'Layout--sidebarPosition-flowRow-none',

package/static/classnames.js

@@ -210,6 +210,8 @@ const classNames = new Set([
   'Layout--gutter-spacious',
   'Layout--sidebar-narrow',
   'Layout--sidebar-wide',
+  'Layout--sidebar-xwide',
+  'Layout--sidebar-xxwide',
   'Layout--sidebarPosition-end',
   'Layout--sidebarPosition-flowRow-end',
   'Layout--sidebarPosition-flowRow-none',

package/static/constants.json

@@ -469,12 +469,16 @@
     "SIDEBAR_WIDTH_MAPPINGS": {
       "default": "",
       "narrow": "Layout--sidebar-narrow",
-      "wide": "Layout--sidebar-wide"
+      "wide": "Layout--sidebar-wide",
+      "xwide": "Layout--sidebar-xwide",
+      "xxwide": "Layout--sidebar-xxwide"
     },
     "SIDEBAR_WIDTH_OPTIONS": [
       "default",
       "narrow",
-      "wide"
+      "wide",
+      "xwide",
+      "xxwide"
     ],
     "STACKING_BREAKPOINT_DEFAULT": "md",
     "STACKING_BREAKPOINT_MAPPINGS": {

package/static/info_arch.json

@@ -5242,7 +5242,7 @@
             "name": "width",
             "type": "Symbol",
             "default": "N/A",
-            "description": "One of `:default`, `:narrow`, or `:wide`."
+            "description": "One of `:default`, `:narrow`, `:wide`, `:xwide`, or `:xxwide`."
           },
           {
             "name": "col_placement",
@@ -5436,6 +5436,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/layout/sidebar_width_xwide",
+        "name": "sidebar_width_xwide",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/layout/sidebar_width_xxwide",
+        "name": "sidebar_width_xxwide",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/layout/sidebar_col_placement_start",
         "name": "sidebar_col_placement_start",

package/static/previews.json

@@ -2296,6 +2296,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/layout/sidebar_width_xwide",
+        "name": "sidebar_width_xwide",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/layout/sidebar_width_xxwide",
+        "name": "sidebar_width_xxwide",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/layout/sidebar_col_placement_start",
         "name": "sidebar_col_placement_start",