@recursica/adapter-mantine-v8 1.3.0 → 1.3.2

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.2",
   "publishConfig": {
     "access": "public"
   },
@@ -78,15 +78,15 @@
     "release": "changeset publish"
   },
   "dependencies": {
-    "@recursica/adapter-common": "^1.1.0"
+    "@recursica/adapter-common": "^1.2.0"
   },
   "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/Card/Card.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Card } from "./Card";
 import { Button } from "../Button/Button";
 import { Group } from "../Group/Group";
+import { Heading } from "../Heading/Heading";
 import { Text } from "../Text/Text";
 
 const meta: Meta<typeof Card> = {
@@ -61,7 +62,7 @@ export const HeaderlessAndFooterless: Story = {
     return (
       <Card {...args}>
         <Card.Content>
-          <Text variant="subtitle">Notice</Text>
+          <Heading order={6}>Notice</Heading>
           <Text>
             This is a completely generic card payload dropping the Header and
             Footer specific elements, simply acting as a padded elevation

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,

package/src/components/Text/Text.module.css

@@ -50,3 +50,9 @@
 .root[data-emphasis="low"] {
   opacity: var(--recursica_brand_text-emphasis_low);
 }
+
+/* Dev only (the attribute is never set in production): hides text whose typography variant has no
+   exported style, so a typo is obvious instead of rendering with the UI kit's defaults. */
+.root[data-typography-missing] {
+  visibility: hidden;
+}

package/src/components/Text/Text.stories.tsx

@@ -1,5 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "./Text";
+import brand from "../../../recursica_brand.json";
+
+const BUILT_IN_VARIANTS = ["body", "caption", "overline"];
+
+// Custom styles defined under `brand.typography` (beyond h1-h6 and the built-ins above); each has
+// an exported `recursica_brand_typography_<name>` class, so `Text` renders it by name.
+// Sorted so the render order is stable across exports (the visual diff depends on it).
+const customVariants = Object.keys(brand.brand.typography)
+  .filter((name) => !/^h[1-6]$/.test(name) && !BUILT_IN_VARIANTS.includes(name))
+  .sort();
 
 const meta: Meta<typeof Text> = {
   title: "UI-Kit/Text",
@@ -16,14 +26,7 @@ const meta: Meta<typeof Text> = {
   argTypes: {
     variant: {
       control: "select",
-      options: [
-        "body",
-        "body-small",
-        "caption",
-        "overline",
-        "subtitle",
-        "subtitle-small",
-      ],
+      options: [...BUILT_IN_VARIANTS, ...customVariants],
       description:
         "Controls the standard logical boundary definitions natively extracted from Figma.",
     },
@@ -62,21 +65,17 @@ export const StaticVariations: Story = {
       <Text variant="body">
         Body (Base paragraph and generic information flow)
       </Text>
-      <Text variant="body-small">
-        Body Small (Compacted list items and helper blocks)
-      </Text>
       <Text variant="caption">
         Caption (Data table descriptions or micro-labels)
       </Text>
       <Text variant="overline">
         Overline (Card contextual pre-headers and categorical tags)
       </Text>
-      <Text variant="subtitle">
-        Subtitle (Minor sub-headers avoiding heavy display weights)
-      </Text>
-      <Text variant="subtitle-small">
-        Subtitle Small (Section anchors deep in hierarchy)
-      </Text>
+      {customVariants.map((name) => (
+        <Text key={name} variant={name}>
+          {name} (Custom style from brand.typography)
+        </Text>
+      ))}
     </div>
   ),
 };

package/src/components/Text/Text.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../utils/filterStylingProps";
 
 import { type RecursicaTextProps } from "@recursica/adapter-common";
+import { isTypographyStyleDefined } from "../../utils/typographyClass";
 import styles from "./Text.module.css";
 
 export type TextProps = RecursicaOverStyled<
@@ -31,6 +32,13 @@ const _Text = forwardRef<HTMLDivElement, TextProps>(function Text(
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;
 
+  // Dev only: an unknown variant hides the text (and logs) instead of silently rendering with the
+  // UI kit's default styling.
+  const typographyMissing =
+    process.env.NODE_ENV !== "production" &&
+    typeof document !== "undefined" &&
+    !isTypographyStyleDefined(variant);
+
   const typographyClass = `recursica_brand_typography_${variant}`;
   const mergedClassName = [typographyClass, styles.root, classNameProp]
     .filter(Boolean)
@@ -45,6 +53,7 @@ const _Text = forwardRef<HTMLDivElement, TextProps>(function Text(
       {...(sanitizedProps as unknown as MantineTextProps)}
       data-color={color}
       data-emphasis={emphasis}
+      data-typography-missing={typographyMissing || undefined}
       className={mergedClassName}
     />
   );

package/src/components/TimePicker/TimePicker.module.css

@@ -58,10 +58,7 @@
   gap: var(--recursica_ui-kit_components_time-picker_properties_icon-text-gap);
   position: relative;
   box-sizing: border-box;
-  /* min-width, not width: the `width` token was authored for a single plain input (confirmed against
-     text-field's identical token shape); this is now only the time-entry half of the composite. */
-  min-width: var(--recursica_ui-kit_components_time-picker_properties_width);
-  width: fit-content;
+  width: var(--recursica_ui-kit_components_time-picker_properties_width);
   /* time-picker has no dedicated min-height token (unlike text-field/date-picker); this global is
      the one text-field's own min-height token resolves to, so both controls land on the same 48px
      height without binding to another component's own namespace. See
@@ -209,27 +206,14 @@
    this only controls its size/alignment within the flex row. */
 .amPmSelect {
   flex: 0 0 auto;
-  width: auto;
-  min-width: 5.5rem;
+  width: var(--recursica_ui-kit_components_time-picker_properties_width);
 }
 
-/* Dropdown.module.css's own .input sets width: 100% (correct for a standalone Dropdown filling
-   its own column) — resetting that to `auto` still isn't enough here: a native <input>'s intrinsic
-   ("auto"/"fit-content") width is a fixed UA default (~20 characters wide), not based on its actual
-   value text, so it doesn't naturally shrink to "AM"/"PM" either way. Give it an explicit small
-   width sized for a couple of characters instead — the wrapper (.amPmSelect, whose own rendered
-   width just follows this input, since Dropdown.module.css's .section icon is positioned
-   absolutely and doesn't add to flex flow) ends up hugging the content as a result. Target
-   Mantine's own stable global class (not the Dropdown.module.css hash, which this module can't
-   reference directly). See TIMEPICKER_IMPLEMENTATION_NOTES.md.
-   Width math (box-sizing: border-box, so padding eats into this number): Dropdown's own
-   horizontal-padding (16px) on the left + the chevron's reserved right-section padding
-   (horizontal-padding + icon-size + icon-text-gap = 16+24+8 = 48px) on the right leaves very
-   little room for the "AM"/"PM" text itself — 2.5rem (40px) put the padding in a negative content
-   box, which is why the value was invisible and the chevron looked jammed against the border. 6rem
-   leaves a real ~32px content area. */
+/* Fill .amPmSelect, which carries the time-picker width token (Dropdown's own .input is
+   otherwise a native input with a fixed UA-default intrinsic width). Target Mantine's stable
+   global class; this module can't reference Dropdown.module.css's hashed class. */
 .amPmSelect :global(.mantine-Select-input) {
-  width: 6rem;
+  width: 100%;
 }
 
 /* -------------------------------------

package/src/utils/typographyClass.ts

@@ -0,0 +1,38 @@
+const found = new Set<string>();
+const reported = new Set<string>();
+
+function ruleListDefines(rules: CSSRuleList, selector: string): boolean {
+  return Array.from(rules).some((rule) => {
+    if (rule instanceof CSSStyleRule) {
+      return rule.selectorText.split(",").some((s) => s.trim() === selector);
+    }
+    const nested = (rule as CSSGroupingRule).cssRules;
+    return nested ? ruleListDefines(nested, selector) : false;
+  });
+}
+
+/**
+ * Dev-only: whether a `.recursica_brand_typography_<name>` rule exists in any readable stylesheet.
+ * Logs a console error once per missing name. Cross-origin stylesheets can't be read and are
+ * skipped, so they never count as defining the class.
+ */
+export function isTypographyStyleDefined(name: string): boolean {
+  const selector = `.recursica_brand_typography_${name}`;
+  if (found.has(selector)) return true;
+  const defined = Array.from(document.styleSheets).some((sheet) => {
+    try {
+      return ruleListDefines(sheet.cssRules, selector);
+    } catch {
+      return false;
+    }
+  });
+  if (defined) {
+    found.add(selector);
+  } else if (!reported.has(selector)) {
+    reported.add(selector);
+    console.error(
+      `Text: no "${selector}" rule found. "${name}" is not defined under brand.typography in the exported Recursica CSS, so the text is hidden.`,
+    );
+  }
+  return defined;
+}