@adecore/ui 0.50.5 → 0.50.6

package/dist/theme.css

@@ -825,6 +825,8 @@
        own edge and shadow; those two sit a step darker, in the well behind it. */
     .ade-workspace {
         --workspace-well: color-mix(in srgb, var(--surface) 70%, var(--surface-sunken));
+        /* What shows beyond the sheet's rounded corners. */
+        --workspace-ground: var(--workspace-well);
         display: flex;
         width: 100%;
         height: 100%;
@@ -841,18 +843,39 @@
         flex: 1;
         min-width: 0;
         min-height: 0;
-        overflow: hidden;
+        /* No rounded clip: Chromium leaves tiles of a scaled canvas inside one unpainted while it zooms. The
+           corners are drawn over the content instead. */
         border-radius: 0 12px 12px 0;
         /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
         background: var(--surface);
         box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
     }
+    .ade-workspace-sheet::before, .ade-workspace-sheet::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        pointer-events: none;
+    }
+    /* The arc, its hairline just outside it, and the ground beyond, as the box shadow draws them along the straight edges. */
+    .ade-workspace-sheet::before {
+        top: 0;
+        background: radial-gradient(circle at 0 100%, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
+    .ade-workspace-sheet::after {
+        bottom: 0;
+        background: radial-gradient(circle at 0 0, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
     .ade-workspace-center {
         display: flex;
         flex: 1;
         min-width: 0;
         min-height: 0;
         flex-direction: column;
+        /* Keeps what the content stacks under the sheet's corners. */
+        isolation: isolate;
     }
     .ade-workspace-sidebar, .ade-workspace-side-panel {
         flex: none;
@@ -885,6 +908,8 @@
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { box-shadow: 0 0 0 1px var(--border); }
     /* Roomy's panes round their own corners, so the sheet's corner on the window's bottom stays square. */
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { border-bottom-right-radius: 0; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet::after { display: none; }
+    .ade-workspace[data-layout="roomy"] { --workspace-ground: var(--separator); }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
@@ -1039,6 +1064,9 @@
         outline-offset: -2px;
         white-space: nowrap;
     }
+    /* Only the label gives way; an icon, a detail or a mark keeps its size. */
+    .ade-document-tab-open > * { flex-shrink: 0; }
+    .ade-document-tab-open > .ade-document-tab-label { flex-shrink: 1; min-width: 0; }
     .ade-document-tab-close { opacity: 0; }
     .ade-document-tab:is(:hover, :focus-within, [data-active]) .ade-document-tab-close { opacity: 1; }
     .ade-document-tab[data-detail] .ade-document-tab-open { max-width: 200px; }

package/dist/workspace/PaneBar.js

@@ -249,7 +249,7 @@ export function PaneBar(t0) {
   }
   const t13 = tabs ? "min-w-24 self-stretch" : "min-w-5";
   const t14 = inContainer ? tabs ? "-ml-1" : "pl-2" : !tabs && "pl-1";
-  const t15 = tabs || (folded || !hasActions) && !inContainer ? "grow" : "shrink-100";
+  const t15 = !inContainer && (tabs || folded || !hasActions) ? "grow" : "shrink-100";
   let t16;
   if ($[38] !== t13 || $[39] !== t14 || $[40] !== t15) {
     t16 = clsx("ade-pane-title flex items-center gap-2", t13, t14, t15);
@@ -276,7 +276,7 @@ export function PaneBar(t0) {
   const t18 = !separate && actionsPart;
   let t19;
   if ($[45] !== folded || $[46] !== hasActions || $[47] !== inContainer || $[48] !== tabs) {
-    t19 = inContainer && !tabs && (folded || !hasActions) && /*#__PURE__*/_jsx("span", {
+    t19 = inContainer && (tabs || folded || !hasActions) && /*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       className: "grow self-stretch"
     });

package/dist/workspace/TabStrip.js

@@ -728,7 +728,7 @@ export function DocumentTab(t0) {
   let t19;
   if ($[57] !== item.label) {
     t19 = /*#__PURE__*/_jsx("span", {
-      className: "truncate",
+      className: "ade-document-tab-label truncate",
       children: item.label
     });
     $[57] = item.label;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.50.5",
+  "version": "0.50.6",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/theme.css

@@ -825,6 +825,8 @@
        own edge and shadow; those two sit a step darker, in the well behind it. */
     .ade-workspace {
         --workspace-well: color-mix(in srgb, var(--surface) 70%, var(--surface-sunken));
+        /* What shows beyond the sheet's rounded corners. */
+        --workspace-ground: var(--workspace-well);
         display: flex;
         width: 100%;
         height: 100%;
@@ -841,18 +843,39 @@
         flex: 1;
         min-width: 0;
         min-height: 0;
-        overflow: hidden;
+        /* No rounded clip: Chromium leaves tiles of a scaled canvas inside one unpainted while it zooms. The
+           corners are drawn over the content instead. */
         border-radius: 0 12px 12px 0;
         /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
         background: var(--surface);
         box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
     }
+    .ade-workspace-sheet::before, .ade-workspace-sheet::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        pointer-events: none;
+    }
+    /* The arc, its hairline just outside it, and the ground beyond, as the box shadow draws them along the straight edges. */
+    .ade-workspace-sheet::before {
+        top: 0;
+        background: radial-gradient(circle at 0 100%, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
+    .ade-workspace-sheet::after {
+        bottom: 0;
+        background: radial-gradient(circle at 0 0, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
     .ade-workspace-center {
         display: flex;
         flex: 1;
         min-width: 0;
         min-height: 0;
         flex-direction: column;
+        /* Keeps what the content stacks under the sheet's corners. */
+        isolation: isolate;
     }
     .ade-workspace-sidebar, .ade-workspace-side-panel {
         flex: none;
@@ -885,6 +908,8 @@
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { box-shadow: 0 0 0 1px var(--border); }
     /* Roomy's panes round their own corners, so the sheet's corner on the window's bottom stays square. */
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { border-bottom-right-radius: 0; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet::after { display: none; }
+    .ade-workspace[data-layout="roomy"] { --workspace-ground: var(--separator); }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
@@ -1039,6 +1064,9 @@
         outline-offset: -2px;
         white-space: nowrap;
     }
+    /* Only the label gives way; an icon, a detail or a mark keeps its size. */
+    .ade-document-tab-open > * { flex-shrink: 0; }
+    .ade-document-tab-open > .ade-document-tab-label { flex-shrink: 1; min-width: 0; }
     .ade-document-tab-close { opacity: 0; }
     .ade-document-tab:is(:hover, :focus-within, [data-active]) .ade-document-tab-close { opacity: 1; }
     .ade-document-tab[data-detail] .ade-document-tab-open { max-width: 200px; }

package/src/workspace/PaneBar.tsx

@@ -221,7 +221,7 @@ export function PaneBar({
                        stands before it: 16 pixels, of which the gap brings 8 and a tab 12 of its own. */
                     inContainer ? (tabs ? '-ml-1' : 'pl-2') : !tabs && 'pl-1',
                     // A weight rather than `shrink`, since controls whose labels truncate shrink as well.
-                    tabs || ((folded || !hasActions) && !inContainer) ? 'grow' : 'shrink-100'
+                    !inContainer && (tabs || folded || !hasActions) ? 'grow' : 'shrink-100'
                 )}
             >
                 {title}
@@ -229,7 +229,7 @@ export function PaneBar({
             {accessory}
             {!separate && actionsPart}
             {/* The room the title leaves in a container, which the window drags by. */}
-            {inContainer && !tabs && (folded || !hasActions) && <span aria-hidden="true" className="grow self-stretch" />}
+            {inContainer && (tabs || folded || !hasActions) && <span aria-hidden="true" className="grow self-stretch" />}
             {trailing}
             {onClose && (
                 <CloseButton label={closeLabel ?? t('workspace.closePane')} kbd={closeShortcut} size="sm" className="cursor-default" onClick={onClose} />

package/src/workspace/TabStrip.tsx

@@ -382,7 +382,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                             }}
                         >
                             {item.icon}
-                            <span className="truncate">{item.label}</span>
+                            <span className="ade-document-tab-label truncate">{item.label}</span>
                             {item.detail}
                             {item.attention}
                             {item.unsaved && (