@openproject/primer-view-components 0.91.2-rc.9daffb2ad → 0.91.2

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

@@ -1 +1 @@
-.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--borderColor-default)}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main :is(.Layout-main-centered-lg,.Layout-main-centered-md,.Layout-main-centered-xl){margin-right:auto;margin-left:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>:is(.container-lg,.container-md,.container-xl){margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
+.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}@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}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--borderColor-default)}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main :is(.Layout-main-centered-lg,.Layout-main-centered-md,.Layout-main-centered-xl){margin-right:auto;margin-left:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>:is(.container-lg,.container-md,.container-xl){margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

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

@@ -51,6 +51,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/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 {
@@ -49,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;
@@ -61,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) {
@@ -298,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.91.2-rc.9daffb2ad",
+  "version": "0.91.2",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/classnames.cjs

@@ -206,6 +206,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

@@ -206,6 +206,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",