@recursica/adapter-mantine-v8 1.3.0 → 1.3.1

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica-adapter-mantine-v8.git"
   },
-  "version": "1.3.0",
+  "version": "1.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -78,15 +78,15 @@
     "release": "changeset publish"
   },
   "dependencies": {
-    "@recursica/adapter-common": "^1.1.0"
+    "@recursica/adapter-common": "^1.1.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
     "@eslint/js": "^9.25.0",
     "@playwright/test": "^1.62.1",
-    "@recursica/adapter-tester": "^5.3.0",
+    "@recursica/adapter-tester": "^5.3.1",
     "@recursica/recursica-postcss-vars": "^1.5.0",
-    "@recursica/storybook-template": "^0.7.11",
+    "@recursica/storybook-template": "^0.7.15",
     "@recursica/token-analyzer": "^1.8.0",
     "@storybook/addon-a11y": "^10.3.3",
     "@storybook/addon-docs": "^10.3.3",

package/src/components/Checkbox/Checkbox.module.css

@@ -21,7 +21,7 @@
 /* SideBySide Variant */
 .groupRoot[data-layout="side-by-side"] {
   flex-direction: column;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding-top: var(
     --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_vertical-padding
   );
@@ -259,8 +259,6 @@
   );
 }
 .groupRoot[data-layout="side-by-side"] {
-  flex-direction: row;
-  flex-wrap: wrap;
   gap: var(
     --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_gutter
   );

package/src/components/FileInput/FileInput.module.css

@@ -58,6 +58,14 @@
   min-height: var(
     --recursica_ui-kit_components_file-input_properties_min-height
   );
+  /* Fixed height (icon + padding + border) so the nested clear Button overflows the row instead of growing the control. */
+  height: calc(
+    var(--recursica_ui-kit_components_file-input_properties_icon-size) + 2 *
+      var(
+        --recursica_ui-kit_components_file-input_properties_vertical-padding
+      ) +
+      2 * var(--recursica_ui-kit_components_file-input_properties_border-size)
+  );
   gap: var(--recursica_ui-kit_components_file-input_properties_icon-text-gap);
   padding-top: var(
     --recursica_ui-kit_components_file-input_properties_vertical-padding

package/src/components/FileUpload/FileUpload.module.css

@@ -35,6 +35,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  max-width: var(--recursica_ui-kit_globals_form_field_size_max-width);
   gap: var(--recursica_ui-kit_components_file-upload_properties_list-spacing);
 }
 

package/src/components/FileUpload/FileUpload.tsx

@@ -265,6 +265,7 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
         required={required}
         withAsterisk={withAsterisk}
         id={id}
+        controlMaxWidth="var(--recursica_ui-kit_globals_form_field_size_max-width)"
       >
         <div
           ref={ref}

package/src/components/Menu/Menu.stories.tsx

@@ -267,7 +267,6 @@ export const WithDisabledItems: Story = {
 export const WithSubmenus: Story = {
   args: {
     position: "bottom-start",
-    width: 200,
     // Rendered open by default so this story is diffable against the MUI adapter
     // without an interaction step.
     opened: true,

package/src/components/Panel/PANEL_IMPLEMENTATION_NOTES.md

@@ -114,3 +114,11 @@ clips descenders (e.g. the "g" in a long title) whenever `text_line-height` is t
 font's natural ascent+descent. Switched to `overflow: clip; overflow-clip-margin: 0.35em;` — same
 truncation, but ink can bleed slightly past the line box before it's actually clipped.
 Project-wide fix; see Chip's `CHIP_IMPLEMENTATION_NOTES.md` for the original discovery.
+
+---
+
+## 9. Placement-aware border radius (Matt Massey, 2026-10-05)
+
+**Decision:** The `border-radius` token is applied only to the corners on the edge that faces the page, not all four.
+
+**Implementation:** A panel with `placement="right"` (the default) rounds its upper-left and lower-left corners only; its right corners are square against the screen edge. A panel with `placement="left"` rounds its upper-right and lower-right corners only. `Panel.tsx` adds `.contentRight` / `.contentLeft` to the `content` class, and those zero the two outer corners. `top` and `bottom` placements are unchanged (all four corners rounded).

package/src/components/Panel/Panel.module.css

@@ -1,6 +1,16 @@
 /* HARDCODED VALUES:
    - border-style: solid: Structural rendering rule for the panel border.
-   - .inner { left: 0 }: Prevents the fixed Drawer portal from being pushed off-screen in centered flex environments (like Storybook Canvas).
+   - .contentTop {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.contentBottom {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.inner { left: 0 }: Prevents the fixed Drawer portal from being pushed off-screen in centered flex environments (like Storybook Canvas).
    - flexbox layout on .content & .body: Required to create a vertical flex context that pushes the footer to the bottom.
    - position: sticky & negative margins on .footer: A CSS technique used to break the footer out of the .body padding constraints so it stretches edge-to-edge, while remaining fixed at the bottom of the scroll container.
    - z-index: 10 on .footer: Ensures the footer covers the body content as it scrolls underneath.
@@ -24,13 +34,28 @@
   );
   box-shadow: var(--recursica_ui-kit_components_panel_properties_elevation);
   min-width: var(--recursica_ui-kit_components_panel_properties_min-width);
-  max-width: var(--recursica_ui-kit_components_panel_properties_max-width);
+  max-width: min(
+    var(--recursica_ui-kit_components_panel_properties_max-width),
+    100vw
+  );
 
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
+/* Round only the edge facing the page: a panel sliding in from the right rounds
+   its left corners; from the left, its right corners. */
+.contentRight {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.contentLeft {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .inner {
   /* Forces the Drawer Inner container to the left edge, preventing it from inheriting
      a centered static position in flex environments like Storybook's Canvas wrapper */

package/src/components/Panel/Panel.stories.tsx

@@ -86,7 +86,7 @@ export const Default: Story = {
   },
   render: ({ wrapHeaderText, ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(false);
+    const [opened, setOpened] = useState(true);
 
     return (
       <>
@@ -129,7 +129,7 @@ export const LeftPlacement: Story = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(false);
+    const [opened, setOpened] = useState(true);
 
     return (
       <>
@@ -162,7 +162,7 @@ export const ScrollableContent: Story = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(false);
+    const [opened, setOpened] = useState(true);
 
     return (
       <>
@@ -204,7 +204,7 @@ export const LongTitle: Story = {
   },
   render: ({ ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(false);
+    const [opened, setOpened] = useState(true);
 
     return (
       <>

package/src/components/Panel/Panel.tsx

@@ -75,7 +75,15 @@ const PanelBase = function Panel({
   // Bind CSS module classes to Mantine's internal classNames API
   const mergedClassNames = mergeClassNames(
     {
-      content: styles.content,
+      content: `${styles.content} ${
+        placement === "right"
+          ? styles.contentRight
+          : placement === "left"
+            ? styles.contentLeft
+            : placement === "top"
+              ? styles.contentTop
+              : styles.contentBottom
+      }`,
       header: styles.header,
       title: wrapHeaderText ? styles.titleTruncate : styles.title,
       body: styles.body,
@@ -87,6 +95,7 @@ const PanelBase = function Panel({
   return (
     <MantineDrawer
       {...(sanitizedProps as unknown as MantineDrawerProps)}
+      size="var(--recursica_ui-kit_components_panel_properties_max-width)"
       position={placement} /* Recursica default: right; Mantine default: left */
       keepMounted={keepMounted}
       closeOnClickOutside={withCallerOverride(

package/src/components/Radio/Radio.module.css

@@ -24,8 +24,8 @@
 
 /* SideBySide Variant */
 .groupRoot[data-layout="side-by-side"] {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-direction: column;
+  flex-wrap: nowrap;
   gap: var(
     --recursica_ui-kit_components_radio-button-group_variants_layouts_side-by-side_properties_gutter
   );

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -133,6 +133,32 @@
   );
 }
 
+/* Vertical: Mantine's separator is a horizontal line across the item, so the divider token
+   sets its height; and the container radius is capped to stay concentric with the pill items. */
+.root[data-orientation="vertical"] .control::before {
+  width: auto;
+  height: var(
+    --recursica_ui-kit_components_segmented-control_properties_divider-size
+  );
+}
+
+.root[data-orientation="vertical"] {
+  border-radius: min(
+    var(
+      --recursica_ui-kit_components_segmented-control_properties_border-radius
+    ),
+    calc(
+      var(
+          --recursica_ui-kit_components_segmented-control-item_properties_item_height
+        ) /
+        2 +
+        var(
+          --recursica_ui-kit_components_segmented-control_properties_padding-vertical
+        )
+    )
+  );
+}
+
 /* Indicator (the moving selected block) */
 .root .indicator {
   background-color: var(

package/src/components/Stepper/Stepper.module.css

@@ -84,6 +84,21 @@
   ); /* Move gap inside the step so the separator line can stretch through it */
 }
 
+/* Mantine core adds a min-height, step-body inline margin and description margins on top of the
+   step-gap / indicator-label-gap tokens; zero them so spacing comes only from Recursica tokens. */
+.root.vertical .step {
+  min-height: 0;
+}
+
+.root.vertical .stepBody {
+  margin-inline: 0;
+}
+
+.root.vertical .stepDescription {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .root.vertical .step:last-of-type {
   padding-bottom: 0;
 }

package/src/components/Switch/Switch.module.css

@@ -185,6 +185,11 @@
   cursor: inherit;
 }
 
+/* Mantine's InlineInput adds label-offset padding on top of the label-gap token. */
+.root .label {
+  padding-inline: 0;
+}
+
 .root:has(input:disabled) .label {
   color: var(
     --recursica_ui-kit_components_switch-item_properties_colors_disabled-text

package/src/components/Tabs/Tabs.module.css

@@ -265,6 +265,11 @@
 }
 
 /* Icon support */
+/* Mantine core adds an xs margin between the section and label on top of the element-gap token. */
+.root .tabSection {
+  margin-inline: 0;
+}
+
 .root .tab svg {
   width: var(--tabs-icon-size);
   height: var(--tabs-icon-size);

package/src/components/Tabs/Tabs.tsx

@@ -37,6 +37,7 @@ const _Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {
     {
       list: styles.list,
       tab: styles.tab,
+      tabSection: styles.tabSection,
       panel: styles.panel,
     },
     restRecord.classNames as Partial<Record<string, string>> | undefined,