Surface

import {Surface, SurfaceCornerRadius, TextView, TextStyle} from '@wearables-ui-toolkit/mrbd';

function SecondaryDetails() {
  return (
    <Surface
      cornerRadius={SurfaceCornerRadius.MEDIUM}
      ariaLabel="Secondary details"
      onActivate={openSecondaryDetails}
    >
      <TextView className="surface-content" textStyle={TextStyle.BODY1}>
        Secondary details
      </TextView>
    </Surface>
  );
}

.surface-content {
  padding: var(--uit-spacing-large);
}

import {Surface, SurfaceCornerRadius} from '@wearables-ui-toolkit/mrbd';

<Surface
  interactive={false}
  cornerRadius={SurfaceCornerRadius.SMALL}
  drawBackground={false}
>
  <PreviewMedia />
</Surface>;

• Interactive by default.Surface inherits the default interactive behavior. A bare instance is focusable, pressable, and clickable, and its div root receives the button role. Set interactive={false} for a static surface so it does not advertise control behavior.
• Layers. The toolkit paints a background fill below the content and two inner-shadow overlays above it. The focused overlay fades in on focus and remains through press. The pressed overlay fades in above it, making press feedback stronger than focus feedback. All three layers are decorative and hidden from assistive technology. drawBackground={false} removes only the fill; the inner shadows continue to respond to interaction state.
• Content scale. As with Container, Surface reads the platform profile supplied by App and scales the whole surface slightly inward at rest, opens it to full size on focus, and insets it again on press. Applications do not pass a platform value to individual surfaces. The scale comes from an explicit numeric width when present, otherwise from the measured width. Until the toolkit knows the real size, the surface remains at full size instead of estimating.
• Measurement never animates. The toolkit applies scale changes caused by first layout, font settling, or resize immediately. Only interaction-state changes animate. The same duration and easing drive scale and inner-shadow opacity so the visuals settle together.
• Timing follows the transition. Press-in and press-out transitions use their own short durations and curves. A focus change during rapid focus movement uses a shorter duration so movement through a list settles instead of trailing behind. Every other state change uses the standard duration.
• Corner radius and clipping. The toolkit resolves cornerRadius to a semantic token and applies the resulting plain CSS radius to the root, fill, and both inner shadows. The root clips its content, so the surface rounds full-bleed children consistently.
• Disabled. The toolkit changes the root from var(--uit-enabled-opacity) to var(--uit-disabled-opacity) and blocks activation. The element remains focusable so directional navigation preserves its layout structure.
• Sizing. The inline-flex root hugs its content unless width or height provides another size. Its content wrapper centers children on both axes. The toolkit writes size, radius, opacity, and content-scale transform inline, so a CSS class cannot change them; use the corresponding props or style.
• No material.Surface has no material or shapeProvider prop, smooth corner path, or partial-focus material origin. Prefer Container when the design requires material behavior.

• Use Surface for lower-priority interactive content that specifically needs a secondary surface treatment.
• Choose a semantic SurfaceCornerRadius value and semantic spacing tokens for its content so shape and rhythm remain consistent.
• Keep one coherent interaction target in each surface.
• Set interactive={false} when the surface is visual rather than a control, so it does not create a misleading focus stop.

• Prefer Container or a higher-level component whenever it already expresses the intended interface and behavior.
• For static grouping, prefer StaticContainer or Panel; otherwise set interactive={false} explicitly.
• Do not nest material-owning components or intrinsic controls inside Surface. These components each own their focus, interaction, or surface behavior, so the composition is unsupported.
• Treat Surface as a flat secondary treatment. It has no shape provider, smooth corners, or partial-focus material response; use Container for those capabilities.
• Avoid overriding style with a radius outside the semantic cases. Choose a supported SurfaceCornerRadius so adjacent surfaces remain consistent.