@recursica/adapter-mantine-v8 1.0.0

package/src/components/Loader/Loader.module.css

@@ -0,0 +1,63 @@
+.root {
+  /* Default inheritance mapped from component variables if not explicitly overridden by variants */
+  --loader-color: var(
+    --recursica_ui-kit_components_loader_properties_indicator-color
+  );
+}
+
+/* `animate={false}` — freezes every variant's animation (the oval's own
+ * spinning ::after, and the bars'/dots' individually-animated child spans)
+ * so the loader renders deterministically, e.g. for a visual-regression
+ * snapshot that would otherwise diff differently every run. */
+.root[data-animate="false"],
+.root[data-animate="false"] *,
+.root[data-animate="false"]::after {
+  animation: none !important;
+}
+
+/* data-size mapping */
+
+/* SMALL */
+.root[data-size="small"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_size
+  );
+}
+.root[data-size="small"][data-variant="oval"]::after {
+  border-width: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_thickness-size
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_border-radius
+  );
+}
+
+/* DEFAULT */
+.root[data-size="default"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_size
+  );
+}
+.root[data-size="default"][data-variant="oval"]::after {
+  border-width: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_thickness-size
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_border-radius
+  );
+}
+
+/* LARGE */
+.root[data-size="large"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_size
+  );
+}
+.root[data-size="large"][data-variant="oval"]::after {
+  border-width: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_thickness-size
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_border-radius
+  );
+}

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+import { Layer } from "@recursica/adapter-common";
+
+type LoaderStoryArgs = React.ComponentProps<typeof Loader> & {
+  layer?: 0 | 1 | 2 | 3;
+};
+
+const meta: Meta<LoaderStoryArgs> = {
+  title: "UI-Kit/Loader",
+  component: Loader as React.ComponentType<LoaderStoryArgs>,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The Loader bridges the Recursica UI-Kit `loader` variables to the generic primitive, rendering deterministic sizes and variants visually mapped strictly from the explicit design boundary tokens.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["oval", "bars", "dots"],
+      description: "The structural layout variant of the loading indicator",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "small", "default", "large"],
+      description:
+        "Scales the dimensional and thickness layout constrained to the explicit UI variables",
+    },
+    color: {
+      control: "color",
+      description:
+        "Optional inline dynamic color override spanning the token defaults",
+    },
+    layer: {
+      control: { type: "range", min: 0, max: 3, step: 1 },
+      description:
+        "Applies a wrapping context to observe rendering logic externally",
+    },
+    animate: {
+      control: "boolean",
+      description:
+        "Freezes the CSS animation when false — deterministic, for visual regression",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<LoaderStoryArgs>;
+
+/**
+ * Animated — excluded from visual regression (`adapter-tester.config.json`),
+ * since a moving animation diffs differently every run. See the `Static*`
+ * stories below for the deterministic, visual-regression-covered equivalents.
+ */
+export const Default: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+    layer: 0,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={layer ?? 0} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
+};
+
+/** `animate: false` freezes the spin — deterministic for visual regression. */
+export const StaticOvalDefault: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+    animate: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+/** `animate: false` freezes the bars — deterministic for visual regression. */
+export const StaticBarsLarge: Story = {
+  args: {
+    variant: "bars",
+    size: "large",
+    animate: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+/** `animate: false` freezes the dots — deterministic for visual regression. */
+export const StaticDotsSmall: Story = {
+  args: {
+    variant: "dots",
+    size: "sm",
+    animate: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+/**
+ * Animated — excluded from visual regression, same as `Default`; this one
+ * additionally demonstrates rendering inside a `layer={2}` context.
+ */
+export const LayerTwoOval: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={2} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
+};

package/src/components/Loader/Loader.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Loader component tests. Add tests here if/when needed.

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from "react";
+import {
+  Loader as MantineLoader,
+  type LoaderProps as MantineLoaderProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  mergeClassNames,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Loader.module.css";
+
+import { type RecursicaLoaderProps } from "@recursica/adapter-common";
+
+export type LoaderProps = RecursicaOverStyled<
+  Omit<MantineLoaderProps, "variant" | "size" | "type"> & RecursicaLoaderProps
+>;
+
+export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
+  {
+    variant = "oval",
+    size = "default",
+    animate = true,
+    overStyled = false,
+    ...rest
+  },
+  ref,
+) {
+  const mapSize = {
+    sm: "small",
+    md: "default",
+    lg: "large",
+    small: "small",
+    default: "default",
+    large: "large",
+  } as const;
+
+  const resolvedSize = mapSize[size] || "default";
+
+  // Strip all visual override injections unless developer has specifically opted into overStyling.
+  // External layout props like margins are safely preserved.
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <MantineLoader
+      ref={ref}
+      {...sanitizedProps}
+      type={variant}
+      data-variant={variant}
+      data-size={resolvedSize}
+      data-animate={animate}
+      className={finalClass}
+      classNames={mergedClassNames}
+    />
+  );
+});
+
+Loader.displayName = "Loader";

package/src/components/Loader/USAGE.md

@@ -0,0 +1,44 @@
+# Loader - Usage Guide
+
+This document describes how to integrate and use the `Loader` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Loader } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Loader } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return <Loader size="md" />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mantine-v8` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Notes
+
+- `variant` maps to Mantine's loader types: `"oval"`, `"bars"`, or `"dots"`.
+- `thickness` and `border-radius` are not exposed as props; sizing is controlled entirely by the `size` prop.
+- The `xs` and `xl` sizes are not currently supported.

package/src/components/Menu/MENU_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,88 @@
+# Menu – Implementation Notes
+
+Decisions and design tweaks strictly tailored for the UI Kit's Menu wrapped against `@mantine/core`. This is a living document that tracks _why_ specific logic decisions exist.
+
+---
+
+## 1. Composable API Preservation (1:1 Mapping)
+
+**Decision:** We maintain the exact library composition API structure (`<Menu>`, `<Menu.Target>`, `<Menu.Dropdown>`, `<Menu.Item>`, `<Menu.Divider>`, `<Menu.Label>`, `<Menu.Sub>`, `<Menu.Sub.Target>`, `<Menu.Sub.Item>`, `<Menu.Sub.Dropdown>`) as a 1:1 React component mapping.
+
+**Implementation:** Mantine's Menu internally manages WAI-ARIA role assignments (`role="menu"`, `role="menuitem"`, `aria-haspopup`, `aria-expanded`, `aria-controls`), keyboard navigation (arrow keys, Enter, Escape), and focus trapping natively across its composable hierarchy. By preserving the exact sub-component tree, Recursica safely adopts all of these accessibility behaviors without reimplementation.
+
+---
+
+## 2. Hover State Overlay Technique
+
+**Decision:** We nullify Mantine's native hover background on `Menu.Item` and exclusively utilize Recursica's hover structure via a `::after` pseudo-element overlay.
+
+**Implementation:** The `.item::after` pseudo-object dynamically pulls `hover-color` & `hover-opacity` bindings from the Recursica token system. Mantine natively changes `background-color` on item hover which would override our token-driven colors. We enforce `background-color` to remain the unselected-item background on hover, then layer our pseudo-overlay on top. This is the same technique used in the Accordion component.
+
+---
+
+## 3. Selected vs Unselected Item States
+
+**Decision:** Menu items map to Recursica's `selected-item` and `unselected-item` color token groups.
+
+**Implementation:** The CSS module defaults all items to `unselected-item_*` tokens (background, text, opacity). Items with `[data-selected]` switch to `selected-item_*` tokens. This mapping is natively driven by Mantine's internal state tracking without React state hooks.
+
+---
+
+## 4. `color` Prop Stripping
+
+**Decision:** Mantine's `color` prop on `Menu.Item` (used for semantics like "danger/red") is explicitly stripped in strict mode.
+
+**Implementation:** The `color` prop is deleted from the sanitized props when `overStyled` is `false`. This enforces strict design token adherence — all item colors come from the CSS module referencing Recursica variables. Developers requiring custom color semantics must either:
+
+1. Use `overStyled={true}` as an explicit escape hatch
+2. Contribute a proper Recursica variant to the token system
+
+**Rationale:** The Recursica token set does not currently include danger-specific or semantic-color variants for menu items. Allowing arbitrary `color` values would break design system consistency.
+
+---
+
+## 5. Menu.Target Pass-Through
+
+**Decision:** `Menu.Target` is a transparent pass-through with no styling applied.
+
+**Implementation:** The target wrapper exists solely to manage Mantine's ref forwarding and event binding for the trigger element. No `filterStylingProps` or CSS module classes are applied — the trigger's appearance is entirely controlled by whatever component the integrator places inside it (e.g., `<Button>`).
+
+---
+
+## 6. Sub-Menu Support
+
+**Decision:** We wrap the full Mantine sub-menu hierarchy (`Menu.Sub`, `Menu.Sub.Target`, `Menu.Sub.Item`, `Menu.Sub.Dropdown`).
+
+**Implementation:** Sub-menu components inherit the same CSS module classes as their top-level counterparts since the Recursica token set does not distinguish sub-menu-specific styling. `Menu.Sub.Item` also strips the `color` prop in strict mode, consistent with `Menu.Item`. The sub-menu dropdown portal inherits the same `classNames` from the root Menu's `classNames` mapping.
+
+---
+
+## 7. Dropdown Container Padding
+
+**Decision:** The dropdown container uses `divider-item-gap` as its internal padding.
+
+**Implementation:** This ensures consistent spacing between the dropdown border and its content items. The gap token (`4px` by default) creates a subtle inset that visually separates items from the container edge, matching the Figma design specifications.
+
+---
+
+## 8. Minimal CSS Override Philosophy
+
+**Decision:** The CSS module only overrides visual design tokens (colors, typography, spacing, borders, shadows). All structural layout properties (flex, cursor, pointer-events, box-sizing, etc.) are deferred to Mantine's native behavior.
+
+**Implementation:** Unlike form-field components (e.g., Dropdown/TextField) which require deep structural overrides to strip Mantine's macro wrappers, the Menu is an overlay component where Mantine's native layout is already correct. We avoid setting:
+
+- `overflow` on the dropdown (Mantine renders sub-menu dropdowns inside the parent DOM tree using Floating UI absolute positioning — setting overflow clips them)
+- `display`, `align-items`, `width`, `cursor` on items (Mantine's button-based items already handle this)
+- `pointer-events` on disabled items (Mantine handles disabled natively)
+
+**Rationale:** Early iterations included aggressive structural resets (like `overflow: hidden`, `box-sizing: border-box`, `margin: 0`) cargo-culted from the Dropdown component. These caused sub-menus to render clipped inside the parent dropdown with scrollbars. The lesson: default to Mantine's native behavior and only override what the Recursica token system explicitly needs to control.
+
+---
+
+## 9. `maxHeight` Override
+
+**Decision:** `<Menu maxHeight={...}>` lets a caller override the token-driven `.dropdown` max-height with an explicit pixel (or other CSS length) value.
+
+**Implementation:** This is the one deliberate exception to "no inline design tokens in TSX" (see `COMPONENT_DEV_GUIDE.md`) — it's applied via Mantine's per-part `styles` API (`styles={{ dropdown: { maxHeight } }}`), the same mechanism already used for `classNames`, merged with any caller-supplied `styles`. It only takes effect when `maxHeight` is actually passed; otherwise the CSS module's token-driven `max-height` is untouched.
+
+**Caveat:** Because sub-menu dropdowns inherit the root Menu's `classNames`/`styles` mapping (see §6), setting `maxHeight` on the root also caps `Menu.Sub.Dropdown`'s height, not just the top-level dropdown.

package/src/components/Menu/Menu.module.css

@@ -0,0 +1,280 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Global hover/focus/disabled state tokens (recursica_variables_scoped.css header, 'Hover & Focus states' / 'Disabled state' — implicit rule for every interactive element; components must not define their own per-component treatment).
+ *   recursica-allow-brand: --recursica_brand_states_hover_color
+ *   recursica-allow-brand: --recursica_brand_states_hover_opacity
+ */
+
+/* HARDCODED VALUES:
+   - border-style: solid. Structural rendering rule for the dropdown border (Mantine uses Paper which may not set border natively).
+   - NOTE: overflow is intentionally NOT set on .dropdown. Mantine renders sub-menu dropdowns
+     inside the parent dropdown DOM tree using Floating UI absolute positioning. Setting
+     overflow: hidden clips sub-menus; overflow-y: auto causes unwanted scrollbars.
+   - All structural layout (flex, cursor, pointer-events on disabled) is deferred to Mantine's
+     native behavior. We only override visual design tokens (colors, typography, spacing, borders).
+   - Hover overlay: the schema no longer provides per-item hover-color/hover-opacity tokens; the
+     overlay now uses the generic --recursica_brand_states_hover_* tokens shared across components.
+*/
+
+/* ======================================
+   DROPDOWN CONTAINER
+   ====================================== */
+
+.dropdown {
+  background-color: var(
+    --recursica_ui-kit_components_menu_properties_colors_background-color
+  );
+  border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
+  border-width: var(--recursica_ui-kit_components_menu_properties_border-size);
+  border-color: var(
+    --recursica_ui-kit_components_menu_properties_colors_border-color
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_menu_properties_border-radius
+  );
+  box-shadow: var(--recursica_ui-kit_components_menu_properties_elevation);
+
+  min-width: var(--recursica_ui-kit_components_menu_properties_min-width);
+  max-height: var(--recursica_ui-kit_components_menu_properties_max-height);
+  max-width: var(--recursica_ui-kit_components_menu_properties_max-width);
+  padding: var(--recursica_ui-kit_components_menu_properties_padding);
+}
+
+/* ======================================
+   MENU ITEM
+   ====================================== */
+
+.item {
+  position: relative;
+
+  /* Geometry */
+  padding: var(
+      --recursica_ui-kit_components_menu-item_properties_vertical-padding
+    )
+    var(--recursica_ui-kit_components_menu-item_properties_horizontal-padding);
+  border-radius: var(
+    --recursica_ui-kit_components_menu-item_properties_border-radius
+  );
+  margin-bottom: var(--recursica_ui-kit_components_menu_properties_item-gap);
+
+  /* Typography */
+  font-family: var(
+    --recursica_ui-kit_components_menu-item_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_menu-item_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_menu-item_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_menu-item_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_menu-item_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_menu-item_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_menu-item_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_menu-item_properties_text_text-transform
+  );
+
+  /* Default State: Unselected */
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_text-color
+  );
+  opacity: 1;
+}
+.item:last-of-type {
+  margin-bottom: 0;
+}
+
+/* Override Mantine's native hover background to use our overlay technique */
+.item:hover {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_background-color
+  );
+}
+
+/* Hover overlay using ::after pseudo-element (same technique as Accordion); no per-item
+   hover-color/hover-opacity tokens exist anymore, so this uses the generic overlay tokens
+   uniformly regardless of selection state. */
+.item::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 0;
+  pointer-events: none;
+  background-color: var(--recursica_brand_states_hover_color);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.item:hover:not([data-disabled])::after {
+  opacity: var(--recursica_brand_states_hover_opacity);
+}
+
+/* Selected item state */
+.item[data-selected] {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_text-color
+  );
+  opacity: 1;
+}
+
+/* Hovered item state (keyboard navigation) */
+.item[data-hovered] {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_background-color
+  );
+}
+.item[data-hovered]::after {
+  opacity: var(--recursica_brand_states_hover_opacity);
+}
+
+/* Disabled item (opacity differs depending on selection state) */
+.item[data-disabled]:not([data-selected]) {
+  opacity: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_variants_states_disabled_properties_opacity
+  );
+}
+
+.item[data-disabled][data-selected] {
+  opacity: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_variants_states_disabled_properties_opacity
+  );
+}
+
+/* ======================================
+   ITEM LABEL
+   ====================================== */
+
+.itemLabel {
+  position: relative;
+  z-index: 1;
+  color: inherit;
+}
+
+/* ======================================
+   ITEM SECTION (LEFT / RIGHT ICONS)
+   ====================================== */
+
+.itemSection {
+  position: relative;
+  z-index: 1;
+}
+
+.itemSection[data-position="left"] {
+  width: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-leading-size
+  );
+  height: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-leading-size
+  );
+  margin-right: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-text-gap
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_leading-icon-color
+  );
+}
+
+.itemSection[data-position="right"] {
+  width: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-trailing-size
+  );
+  height: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-trailing-size
+  );
+  margin-left: var(--recursica_ui-kit_components_menu-item_properties_text-gap);
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_trailing-icon-color
+  );
+}
+
+.item[data-selected] .itemSection[data-position="left"] {
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_leading-icon-color
+  );
+}
+
+.item[data-selected] .itemSection[data-position="right"] {
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_trailing-icon-color
+  );
+}
+
+/* ======================================
+   DIVIDER
+   ====================================== */
+
+.divider {
+  height: var(--recursica_ui-kit_components_menu_properties_divider-height);
+  background-color: var(
+    --recursica_ui-kit_components_menu_properties_colors_divider-color
+  );
+  opacity: var(--recursica_ui-kit_components_menu_properties_divider-opacity);
+  margin: 8px 0;
+}
+
+/* ======================================
+   SECTION LABEL
+   ====================================== */
+
+.label {
+  padding: var(
+      --recursica_ui-kit_components_menu-item_properties_vertical-padding
+    )
+    var(--recursica_ui-kit_components_menu-item_properties_horizontal-padding);
+
+  /* Supporting Text Typography */
+  font-family: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_text-transform
+  );
+
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_supporting-text-color
+  );
+  opacity: 0.7;
+}
+
+/* ======================================
+   SUB-MENU CHEVRON
+   ====================================== */
+
+.chevron {
+  position: relative;
+  z-index: 1;
+  color: inherit;
+}