@mixtint/primer-view-components 0.91.3 → 0.91.4

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

@@ -79,15 +79,20 @@
 .Box-body {
   padding: var(--stack-padding-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
 
-  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+/* Ensures a top border/background doesn't poke out when the body is the first element. */
+.Box-body:first-child {
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
 }
 
-.Box-body:last-of-type {
-    margin-bottom: calc(var(--borderWidth-thin) * -1);
-    border-bottom-right-radius: var(--borderRadius-medium);
-    border-bottom-left-radius: var(--borderRadius-medium);
-  }
+/* Ensures bottom-border doesn't poke out when the element is the last element. */
+.Box-header:last-child, .Box-body:last-child {
+  margin-bottom: calc(var(--borderWidth-thin) * -1);
+  border-bottom-right-radius: var(--borderRadius-medium);
+  border-bottom-left-radius: var(--borderRadius-medium);
+}
 
 /* Box rows */
 .Box-row {
@@ -97,17 +102,10 @@
   border-top-color: var(--borderColor-muted);
   border-top-style: solid;
   border-top-width: var(--borderWidth-thin);
-}
-.Box-row:first-of-type {
-    border-top-left-radius: var(--borderRadius-medium);
-    border-top-right-radius: var(--borderRadius-medium);
-  }
-.Box-row:last-of-type {
-    border-bottom-right-radius: var(--borderRadius-medium);
-    border-bottom-left-radius: var(--borderRadius-medium);
-  }
-/* Adds a blue vertical line to the left of the row
+
+  /* Adds a blue vertical line to the left of the row
   ** For indicating a row item is unread */
+}
 .Box-row.Box-row--unread,.Box-row.unread {
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
@@ -184,6 +182,23 @@
   border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
 }
 
+/* Outer corners for rows.
+** The list only claims a corner when Ruby says it sits at that edge of the box
+** (`Box-list--roundedTop` / `Box-list--roundedBottom`, set in
+** BorderBox#before_render), so header/body/footer automatically win when present. */
+
+/* First row of a list that starts the box */
+.Box-list--roundedTop > .Box-row:first-of-type {
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
+}
+
+/* Last row of a list that ends the box */
+.Box-list--roundedBottom > .Box-row:last-of-type {
+  border-bottom-right-radius: var(--borderRadius-medium);
+  border-bottom-left-radius: var(--borderRadius-medium);
+}
+
 /* Option for a box with scrolling content */
 .Box--scrollable {
   max-height: 324px;

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

@@ -17,10 +17,10 @@
     ".Box-header",
     ".Box-title",
     ".Box-body",
-    ".Box-body:last-of-type",
+    ".Box-body:first-child",
+    ".Box-header:last-child",
+    ".Box-body:last-child",
     ".Box-row",
-    ".Box-row:first-of-type",
-    ".Box-row:last-of-type",
     ".Box-row.Box-row--unread",
     ".Box-row.unread",
     ".Box-row.navigation-focus .Box-row--drag-button",
@@ -36,6 +36,8 @@
     ".Box-row-link:hover",
     ".Box-row--drag-button",
     ".Box-footer",
+    ".Box-list--roundedTop > .Box-row:first-of-type",
+    ".Box-list--roundedBottom > .Box-row:last-of-type",
     ".Box--scrollable",
     ".Box--blue",
     ".Box--blue .Box-header",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.91.3",
+  "version": "0.91.4",
   "publishConfig": {
     "access": "public"
   },
@@ -77,7 +77,7 @@
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.10.3",
+    "@primer/behaviors": "^1.11.0",
     "@primer/live-region-element": "^0.8.0"
   },
   "peerDependencies": {
@@ -88,7 +88,7 @@
     "@changesets/cli": "^2.31.1",
     "@github/axe-github": "^0.8.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/markdownlint-github": "^0.8.3",
+    "@github/markdownlint-github": "^0.8.4",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.63.0",
     "@primer/css": "22.3.0",
@@ -103,7 +103,7 @@
     "eslint": "^9.39.5",
     "eslint-plugin-github": "^6.1.2",
     "glob": "^11.1.0",
-    "markdownlint-cli2": "^0.23.2",
+    "markdownlint-cli2": "^0.23.3",
     "mocha": "^11.8.0",
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
@@ -111,14 +111,14 @@
     "postcss-import": "^16.2.0",
     "postcss-mixins": "^12.1.2",
     "postcss-preset-env": "^11.5.3",
-    "prettier": "^3.9.7",
+    "prettier": "^3.9.9",
     "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.3.0",
-    "vite-plugin-ruby": "^5.2.3"
+    "vite": "^8.3.1",
+    "vite-plugin-ruby": "^5.2.4"
   },
   "prettier": "@github/prettier-config",
   "browserslist": "extends @github/browserslist-config"

package/static/classes.json

@@ -154,6 +154,12 @@
   "Box-header--blue": [
     "Primer::Beta::BorderBox"
   ],
+  "Box-list--roundedBottom": [
+    "Primer::Beta::BorderBox"
+  ],
+  "Box-list--roundedTop": [
+    "Primer::Beta::BorderBox"
+  ],
   "Box-row": [
     "Primer::Beta::BorderBox"
   ],

package/static/classnames.cjs

@@ -75,6 +75,8 @@ module.exports = new Set([
   'Box-header',
   'Box-header--blue',
   'Box-list',
+  'Box-list--roundedBottom',
+  'Box-list--roundedTop',
   'Box-row',
   'Box-row--blue',
   'Box-row--drag-button',

package/static/classnames.js

@@ -75,6 +75,8 @@ const classNames = new Set([
   'Box-header',
   'Box-header--blue',
   'Box-list',
+  'Box-list--roundedBottom',
+  'Box-list--roundedTop',
   'Box-row',
   'Box-row--blue',
   'Box-row--drag-button',

package/static/info_arch.json

@@ -13690,6 +13690,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/border_box/roundedness_playground",
+        "name": "roundedness_playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/border_box/padding_default",
         "name": "padding_default",

package/static/previews.json

@@ -5971,6 +5971,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/border_box/roundedness_playground",
+        "name": "roundedness_playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/border_box/padding_default",
         "name": "padding_default",