@deque/cauldron-styles 7.4.0 → 7.5.0-canary.1f6a3445

package/dist/index.css

@@ -52,7 +52,15 @@
   --issue-minor: var(--gray-20);
 
   /* radius */
+  --radius-0: 0;
+  --radius-4: 4px;
+  --radius-8: 8px;
+  --radius-12: 12px;
   --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-24: 24px;
+  --radius-32: 32px;
+  --radius-9999: 9999px;
 
   /* text colours */
   --text-color-base: var(--gray-60);
@@ -3908,6 +3916,26 @@ button.TooltipTabstop {
   overflow-wrap: break-word;
 }
 
+/* Outer corners, for a table whose container publishes one — see
+   --content-start-corner-radius. A collapsed table ignores border-radius, so
+   the edge cells carry it. */
+
+.Table:first-child > :first-child > .TableRow:first-child > :first-child {
+  border-start-start-radius: var(--content-start-corner-radius, 0);
+}
+
+.Table:first-child > :first-child > .TableRow:first-child > :last-child {
+  border-start-end-radius: var(--content-start-corner-radius, 0);
+}
+
+.Table:last-child > :last-child > .TableRow:last-child > :first-child {
+  border-end-start-radius: var(--content-end-corner-radius, 0);
+}
+
+.Table:last-child > :last-child > .TableRow:last-child > :last-child {
+  border-end-end-radius: var(--content-end-corner-radius, 0);
+}
+
 .TableGrid {
   display: grid;
   grid-template-columns: var(--table-grid-template-columns, auto);
@@ -3941,6 +3969,9 @@ button.TooltipTabstop {
 }
 
 .TableHeader .TableHeader__sort-button {
+  /* Fills the cell edge to edge, so its focus ring follows any corner the cell
+     takes. Cells with no corner pass down 0. */
+  border-radius: inherit;
   background-color: transparent;
   font-family: inherit;
   width: 100%;
@@ -4387,7 +4418,7 @@ button.TooltipTabstop {
 
 :root {
   --panel-border-color: var(--gray-40);
-  --panel-border-radius: var(--radius-16);
+  --panel-border-radius: var(--radius-12);
   --panel-border-width: 1px;
   --panel-background-color: var(--white);
   --panel-heading-color: var(--gray-90);
@@ -4399,6 +4430,11 @@ button.TooltipTabstop {
 }
 
 .Panel {
+  /* Not on :root, so a per-instance --panel-border-radius recomputes it. */
+  --panel-inner-border-radius: max(
+    0px,
+    calc(var(--panel-border-radius) - var(--panel-border-width))
+  );
   padding: var(--panel-padding);
   margin: 0;
   border: var(--panel-border);
@@ -4437,14 +4473,20 @@ button.TooltipTabstop {
 .Panel__Header {
   margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0
     calc(var(--panel-padding) * -1);
-  border-start-start-radius: max(
-    0px,
-    calc(var(--panel-border-radius) - var(--panel-border-width))
-  );
-  border-start-end-radius: max(
-    0px,
-    calc(var(--panel-border-radius) - var(--panel-border-width))
-  );
+  border-start-start-radius: var(--panel-inner-border-radius);
+  border-start-end-radius: var(--panel-inner-border-radius);
+}
+
+.Panel--no-padding > :first-child {
+  --content-start-corner-radius: var(--panel-inner-border-radius);
+  border-start-start-radius: var(--panel-inner-border-radius);
+  border-start-end-radius: var(--panel-inner-border-radius);
+}
+
+.Panel--no-padding > :last-child {
+  --content-end-corner-radius: var(--panel-inner-border-radius);
+  border-end-start-radius: var(--panel-inner-border-radius);
+  border-end-end-radius: var(--panel-inner-border-radius);
 }
 
 .Panel--no-padding > :is(.Panel__Heading, .Panel__Header, .Panel__Content) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "7.4.0",
+  "version": "7.5.0-canary.1f6a3445",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",