@mixtint/primer-view-components 0.75.1 → 0.78.0

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

@@ -117,9 +117,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         }));
         if (!checkSuccess)
             return;
-        const currentlyChecked = !this.getNodeCheckedValue(node);
-        // disallow unchecking checked item in single-select mode
-        if (!currentlyChecked) {
+        if (this.getNodeCheckedValue(node) === 'true') {
+            this.setNodeCheckedValue(node, 'false');
+        }
+        else {
             this.checkOnlyAtPath(path);
         }
         this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {

package/app/components/primer/beta/avatar_stack.css

@@ -38,8 +38,6 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -11px;
     background-color: var(--bgColor-default);
-    /* stylelint-disable-next-line primer/colors */
-    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     transition: margin 0.1s ease-in-out;
   }
@@ -50,7 +48,6 @@
 
 :is(.AvatarStack-body .avatar):last-child {
       z-index: 1;
-      border-right: 0;
     }
 
 /* stylelint-disable-next-line selector-max-type */
@@ -117,10 +114,6 @@
       margin-left: var(--base-size-4);
     }
 
-:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child) {
-      border-left: 0;
-    }
-
 .AvatarStack--right .avatar.avatar-more {
     background: var(--avatarStack-fade-bgColor-default);
   }
@@ -138,7 +131,4 @@
     margin-right: 0;
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
-    border-right: 0;
-    /* stylelint-disable-next-line primer/colors */
-    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }

package/app/components/primer/beta/avatar_stack.css.json

@@ -19,7 +19,6 @@
     ".avatar.avatar-more::after",
     ".AvatarStack--right .AvatarStack-body",
     ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
-    ":is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child)",
     ".AvatarStack--right .avatar.avatar-more",
     ":is(.AvatarStack--right .avatar.avatar-more)::before",
     ":is(.AvatarStack--right .avatar.avatar-more)::after",

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

@@ -85,3 +85,17 @@
 .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 height with the toggle menu button for proper vertical alignment */
+
+.PageHeader--noBreadcrumb .PageHeader-titleBar {
+  line-height: var(--control-small-size);
+}

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

@@ -15,6 +15,8 @@
     ".PageHeader-actions",
     ".PageHeader-breadcrumbs",
     ".PageHeader-leadingAction",
-    ".PageHeader-parentLink"
+    ".PageHeader-parentLink",
+    ".PageHeader--noBreadcrumb .PageHeader-contextBar",
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.75.1",
+  "version": "0.78.0",
   "publishConfig": {
     "access": "public"
   },
@@ -48,55 +48,56 @@
   "dependencies": {
     "@github/auto-check-element": "^6.0.0",
     "@github/auto-complete-element": "^3.8.0",
-    "@github/catalyst": "^1.6.0",
+    "@github/catalyst": "^1.7.0",
     "@github/clipboard-copy-element": "^1.3.0",
-    "@github/details-menu-element": "^1.0.12",
+    "@github/details-menu-element": "^1.0.13",
     "@github/image-crop-element": "^5.0.0",
-    "@github/include-fragment-element": "^6.3.0",
-    "@github/relative-time-element": "^4.0.0",
+    "@github/include-fragment-element": "^6.4.1",
+    "@github/relative-time-element": "^4.5.0",
     "@github/remote-input-element": "^0.4.0",
-    "@github/tab-container-element": "^3.1.2",
+    "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.3.4",
+    "@primer/behaviors": "^1.8.4",
     "@primer/live-region-element": "^0.8.0"
   },
   "peerDependencies": {
     "@primer/primitives": "10.x || 11.x"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.24.1",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.7",
     "@github/axe-github": "^0.7.0",
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.8.0",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.56.1",
     "@primer/css": "22.0.2",
-    "@primer/stylelint-config": "^13.1.1",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "axe-core": "^4.7.1",
+    "@primer/stylelint-config": "^13.4.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "axe-core": "^4.11.0",
     "chokidar-cli": "^3.0.0",
-    "cssnano": "^7.0.1",
-    "eslint": "^9.10.0",
+    "css-what": "^7.0.0",
+    "cssnano": "^7.1.2",
+    "eslint": "^9.39.1",
     "eslint-plugin-github": "^6.0.0",
-    "glob": "^11.0.2",
+    "glob": "^11.0.3",
     "markdownlint-cli2": "^0.18.1",
-    "mocha": "^11.0.1",
-    "playwright": "^1.49.1",
-    "postcss": "^8.4.16",
-    "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.0.0",
+    "mocha": "^11.7.5",
+    "playwright": "^1.56.1",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^10.0.2",
-    "prettier": "^3.3.2",
-    "rollup": "^2.79.1",
+    "postcss-preset-env": "^10.4.0",
+    "prettier": "^3.6.2",
+    "rollup": "^2.79.2",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
-    "tslib": "^2.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^6.2.5",
-    "vite-plugin-ruby": "^5.1.0"
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vite-plugin-ruby": "^5.1.1"
   },
   "prettier": "@github/prettier-config",
   "browserslist": "extends @github/browserslist-config"

package/static/arguments.json

@@ -2607,13 +2607,7 @@
         "name": "form_arguments",
         "type": "Hash",
         "default": "`{}`",
-        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
-      },
-      {
-        "name": "use_experimental_non_local_form",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
+        "description": "Form arguments. Supported for all fetch strategies."
       },
       {
         "name": "show_filter",

package/static/classes.json

@@ -487,6 +487,9 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader--noBreadcrumb": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader--withTabNav": [
     "Primer::OpenProject::PageHeader"
   ],

package/static/constants.json

@@ -1831,6 +1831,7 @@
       "chevron-left",
       "triangle-left"
     ],
+    "BREADCRUMB_TRUNCATE_AT": 200,
     "DEFAULT_ACTION_SCHEME": "default",
     "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
     "DEFAULT_BREADCRUMBS_DISPLAY": [

package/static/info_arch.json

@@ -7854,13 +7854,7 @@
         "name": "form_arguments",
         "type": "Hash",
         "default": "`{}`",
-        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
-      },
-      {
-        "name": "use_experimental_non_local_form",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
+        "description": "Form arguments. Supported for all fetch strategies."
       },
       {
         "name": "show_filter",
@@ -7940,6 +7934,12 @@
         "name": "show_button",
         "description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
         "parameters": [
+          {
+            "name": "icon",
+            "type": "String",
+            "default": "N/A",
+            "description": "Name of {{link_to_octicons}} to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will be rendered. Otherwise a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} will be rendered."
+          },
           {
             "name": "system_arguments",
             "type": "Hash",
@@ -8263,6 +8263,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
+        "name": "select_panel_with_icon_button",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",
@@ -20363,7 +20376,7 @@
       },
       {
         "name": "breadcrumbs",
-        "description": "Optional breadcrumbs above the title row\nBy default shown on wider screens. Can be overridden with system_argument: display",
+        "description": "Using PageHeader without breadcrumbs is only recommended in special cases.\nIn doubt, please check the PageHeader component documentation.",
         "parameters": [
           {
             "name": "items",
@@ -20551,8 +20564,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/tab_nav",
-        "name": "tab_nav",
+        "preview_path": "primer/open_project/page_header/truncated_breadcrumbs",
+        "name": "truncated_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20564,8 +20577,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control",
-        "name": "segmented_control",
+        "preview_path": "primer/open_project/page_header/without_breadcrumbs",
+        "name": "without_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20577,8 +20590,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
-        "name": "segmented_control_mobile_icons",
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20590,8 +20603,34 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
-        "name": "skip_breadcrumb_item",
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

package/static/previews.json

@@ -6184,8 +6184,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/tab_nav",
-        "name": "tab_nav",
+        "preview_path": "primer/open_project/page_header/truncated_breadcrumbs",
+        "name": "truncated_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6197,8 +6197,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control",
-        "name": "segmented_control",
+        "preview_path": "primer/open_project/page_header/without_breadcrumbs",
+        "name": "without_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6210,8 +6210,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
-        "name": "segmented_control_mobile_icons",
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6223,8 +6223,34 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
-        "name": "skip_breadcrumb_item",
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -7248,6 +7274,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
+        "name": "select_panel_with_icon_button",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",