Container

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

function ForecastTile() {
  return (
    <Container clickable onActivate={openForecast} ariaLabel="Today's forecast">
      <div className="forecast-tile">
        <TextView textStyle={TextStyle.BODY1}>Today's forecast</TextView>
        <TextView textStyle={TextStyle.META1} textColor={TextColor.SECONDARY}>
          CLEAR
        </TextView>
      </div>
    </Container>
  );
}

.forecast-tile {
  display: grid;
  gap: var(--uit-spacing-med-lg);
  padding: var(--uit-spacing-large);
}

import {useMemo} from 'react';
import {
  Container,
  CornerRadius,
  MaterialLibrary,
  RoundedRectangleShapeProvider,
} from '@wearables-ui-toolkit/mrbd';

// A shape provider is immutable, so a single instance can be shared.
const CARD_SHAPE = new RoundedRectangleShapeProvider(CornerRadius.MEDIUM);

function MediaCard() {
  // A material carries its own visual state, so each mounted container needs
  // an instance of its own.
  const material = useMemo(() => MaterialLibrary.card(), []);

  return (
    <Container clickable material={material} shapeProvider={CARD_SHAPE}>
      <CardBody />
    </Container>
  );
}

import {Link} from 'react-router-dom';
import {Container} from '@wearables-ui-toolkit/mrbd';

<Container as={Link} to="/media/library" ariaLabel="Media library">
  <LibraryPreview />
</Container>;

import {Container} from '@wearables-ui-toolkit/foundation/components/Container';

• Container asks the material to render one of the four VisualState values. The default mapping translates interaction state, and visualStateForInteractionStateFn can customize that mapping.
• When state changes, Container cross-fades from the previous material state to the next. It uses the same clock for material, scale, and opacity changes, which keeps the element’s motion coordinated.
• interactionStateOverride makes the supplied value the source for focused, pressed, and disabled visuals. The container keeps its standard material, scale, opacity, and transition behavior.
• Container applies material opacity only to material layers. Translucent materials therefore preserve content opacity; only disabled and customAlpha change root opacity.
• The material owns its inset. When it declares an inset, Container positions the layers inside the element box and regenerates the shape path at the smaller size so strokes remain within the edge.
• Container establishes a stacking context so background layers paint behind content and foreground layers paint in front. When a material declares backdrop blending, Container marks the root with data-uit-background-blends-with-backdrop and omits both the stacking context and a redundant identity transform. This lets the material blend with content behind it.
• When the current material state is hidden or fully transparent, Container removes its layers from the tree instead of rendering invisible layers.

• Container scales content slightly inward at rest, expands it to full size on focus, and insets it again on press. This feedback rhythm has no hover state.
• Container reads the platform profile supplied by App and uses it for the default content scale. Applications do not pass a platform value to individual containers. Use contentScaleForStateFn only when a component needs a different curve.
• The toolkit computes scale from the measured border box so responsive and intrinsically sized containers respond correctly. Changes caused only by measurement—such as initial layout, font settling, or resize—apply immediately. Avoiding animation here prevents content from visibly growing into place on first paint.
• Press-in and press-out transitions use separate durations and easing curves. A press-only scale change uses a spring that can overshoot and settle. A transition that also changes opacity uses the eased curve instead.
• The caller can add scale or fade through customScaleX, customScaleY, and customAlpha, which multiply the toolkit’s interaction values. Providing transform through style gives the caller ownership of the transform and disables the built-in scale animation.
• Changing disabled fades the root between enabled and disabled opacities on the same state-change animation.

• During fast focus movement, the toolkit snaps state changes instead of animating them. This prevents overlapping animation waves during quick list traversal.
• During page entry, the toolkit also snaps state changes so arriving containers do not animate focus at the same time.
• When the user prefers reduced motion, the toolkit applies state changes without animation.
• In each snapped case, the toolkit still calls stateChangeAnimations with animated: false, but it does not schedule returned participants. Callers must read this flag and place custom visuals directly in their end state so reduced-motion and transition behavior remain correct.

• After size is available—either from numeric width and height values or measurement—the shape provider generates the smooth rounded path for content clipping and every material fill and stroke. Until then, the toolkit uses the provider’s plain CSS border radius as a fallback.
• The toolkit derives geometry from the untransformed border box. Interaction scale or a caller-provided transform therefore leaves material paths at full size.
• clipContent clips only the content subtree. Material effects such as glow strokes and drop shadows can remain visible outside the shape.
• Keep inset children with rounded corners concentric with their owner. Choose the corner-radius token equal to the owner’s radius minus the inset token, or use full-bleed content. This preserves consistent corner geometry.

• During focus handoff, Container springs the partial-focus origin toward the other element and back. Materials use that value to shift their gradient origin, and the incoming element begins offset toward the previous focus. The element itself does not translate during handoff; only the material origin moves.
• When directional navigation reaches a boundary, Container plays a two-stage rubber-band nudge toward the blocked direction and back. This is the only case where the element translates. isRubberbandTranslationEnabled={false} keeps the element still while the material origin continues to shift.
• The rubber band runs only on axes allowed by partialFocusSupportedAxis. For example, a horizontal rail set to X ignores vertical boundaries.
• Setting partialFocusSupportedAxis to None disables both effects and keeps the origin centered.

• Container is an inline flex box with intrinsic sizing by default. Prefer to let content and the surrounding responsive layout determine its size instead of hardcoding pixel dimensions.
• Consider numeric width and height when the shape path must exist before the first measurement, such as for a fixed-size tile.

• Inset authored, non-full-bleed content with var(--uit-spacing-large). Let full-bleed media use the container’s clipping.
• Give each mounted container its own material and keep it stable with useMemo. Immutable shape providers can be shared.
• Use interactionStateOverride only when a composite control needs its Container to reflect another interaction target’s focused, pressed, or disabled state.
• Use visualStateOverride and materialTransition for coordinated behavior such as a driven preview or scrubbed transition.
• Use as to preserve native navigation semantics.
• Use stateChangeAnimations when custom motion must stay synchronized with the material cross-fade. Avoid a separate timer because it can drift from the toolkit’s interaction state.

• Do not nest Container, StaticContainer, Surface, Button, Chip, Tag, or Header inside a Container; these compositions are unsupported.
• Do not place an independently focusable child inside a clickable container. Nested focus targets create ambiguous focus and activation behavior.
• Avoid using visualStateOverride to imitate focus. Drive focus visuals from real interaction so the visible state matches accessibility focus.
• Avoid storing a material in a module constant and sharing it across list rows. Two containers mounting the same material instance at once is a runtime error.
• Avoid styling Container internals or targeting generated class names because the toolkit owns their structure and styling.
• Prefer the existing toolkit component over rebuilding it with Container. If no component fits, consider requesting the missing library pattern.