@recursica/adapter-mui-v7 1.3.0 → 1.3.2

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica-adapter-mui-v7.git"
   },
-  "version": "1.3.0",
+  "version": "1.3.2",
   "publishConfig": {
     "access": "public"
   },
@@ -122,7 +122,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@recursica/adapter-common": "^1.1.1",
+    "@recursica/adapter-common": "^1.2.0",
     "@recursica/official-release": "^2.8.0",
     "dayjs": "^1.11.21"
   },

package/src/components/Card/Card.stories.tsx

@@ -3,6 +3,7 @@ import { Card } from "./Card";
 import { Layer } from "@recursica/adapter-common";
 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> = {
@@ -78,7 +79,7 @@ export const HeaderlessAndFooterless: Story = {
         <Layer layer={0}>
           <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

package/src/components/Slider/Slider.module.css

@@ -74,6 +74,8 @@
 
 .sliderRoot {
   width: 100%;
+  /* MUI defaults the root to 4px, so the thumb overflows and the block collapses; match the thumb height. */
+  height: var(--recursica_ui-kit_components_slider_properties_thumb-size);
   box-sizing: border-box;
   color: inherit;
   font-family: inherit;
@@ -84,6 +86,7 @@
 
 .sliderTrack {
   height: var(--recursica_ui-kit_components_slider_properties_track-height);
+  opacity: 1; /* MUI fades the rail to 0.38 by default, which washes out the token color */
   border-radius: var(
     --recursica_ui-kit_components_slider_properties_track-border-radius
   );
@@ -249,6 +252,14 @@
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
+
+  /* The transform override above defeats MUI's scale(0) hiding, so hide until MUI marks it open. */
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sliderTooltip:global(.MuiSlider-valueLabelOpen) {
+  opacity: 1;
 }
 
 .sliderTooltip * {

package/src/components/Text/TEXT_IMPLEMENTATION_NOTES.md

@@ -8,3 +8,13 @@ visibly more vertical space between each item in mui's render. Not a component b
 itself has no opinion on inter-item spacing; the gap is entirely owned by each story's own
 `<div style={{ display: "flex", flexDirection: "column", gap }}>` wrapper. Fixed by changing the
 story's `gap` to `"16px"` to match mantine's.
+
+## Removed `body-small`, `subtitle`, `subtitle-small` variants; dev-only missing-style check
+
+Forge only exports `h1`-`h6`, `body`, `caption` and `overline`; the three removed variants produced
+a class matching no CSS rule. Any style under `brand.typography` still works by name (`TextVariant`
+accepts any string since `@recursica/adapter-common` 1.2.0). In development, `Text` checks
+`document.styleSheets` (`src/utils/typographyClass.ts`) for `.recursica_brand_typography_<variant>`;
+if absent it logs one `console.error` per name and sets `data-typography-missing`, which
+`Typography.module.css` hides with `visibility: hidden`. The attribute is never set when
+`NODE_ENV === "production"`.

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

@@ -3,6 +3,7 @@ import { type TypographyProps as MuiTypographyProps } from "@mui/material";
 import { Typography } from "../Typography/Typography";
 import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
 import { type RecursicaTextProps } from "@recursica/adapter-common";
+import { isTypographyStyleDefined } from "../../utils/typographyClass";
 
 export type TextProps = RecursicaOverStyled<
   Omit<MuiTypographyProps, "variant" | "classes" | "color"> &
@@ -14,6 +15,13 @@ export const Text = forwardRef<HTMLElement, TextProps>(function Text(
   { variant = "body", emphasis = "high", color = "default", ...rest },
   ref,
 ) {
+  // 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}`;
   return (
     <Typography
@@ -21,6 +29,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(function Text(
       typographyClass={typographyClass}
       data-color={color}
       data-emphasis={emphasis}
+      data-typography-missing={typographyMissing || undefined}
       {...rest}
     />
   );

package/src/components/Typography/Typography.module.css

@@ -2,6 +2,8 @@
  * HARDCODED VALUES
  * - `.root` `text-wrap: balance` — not a design token; a layout algorithm choice requested by
  *   UX (Matt Massey, 2026-08-28) to even out wrapped line lengths. See TEXT_IMPLEMENTATION_NOTES.md.
+ * - `.root[data-typography-missing]` `visibility: hidden` — dev-only (the attribute is never set in
+ *   production); hides text whose typography variant has no exported style. Not a design token.
  *
  * Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
  * Semantic text color and emphasis are layer/theme-level concerns with no per-component UI-kit
@@ -50,3 +52,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/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;
+}