Integration

Use Framework inside the consuming project's existing architecture. Import or copy selected src/ resources; do not recreate a project merely to apply the kit. Do not point production imports into a personal Codex skill directory.

Styles

<link rel="stylesheet" href="framework/tokens.css">
<link rel="stylesheet" href="framework/motion/tokens.css">
<link rel="stylesheet" href="framework/core.css">
<link rel="stylesheet" href="framework/components/controls.css">
<link rel="stylesheet" href="framework/components/select/styles.css">
<link rel="stylesheet" href="framework/components/patterns.css">

Supply Inter and Inter Tight400 through your font pipeline. The optional motion layer leaves the72 visual tokens unchanged. Existing React/Vue/etc applications can use equivalent established accessible primitives while preserving the component contract; the Paper JSX exports are not production React components.

Select

<label for="status">Project status</label>
<select id="status" name="status">
  <option value="progress">In progress</option>
  <option value="review">In review</option>
</select>
<script type="module">
  import {enhanceSelects} from './framework/components/select/index.js';
  const instances = enhanceSelects();
  // In a client-side unmount: instances.forEach(instance => instance.destroy()).
</script>

The enhanced UI uses a custom combobox/listbox; the hidden native select retains form values. Programmatic value changes need syncSelects(). Explicit commit, cancellation, dynamic option availability and focus are covered in the select contract. The module supports flat single-select lists; multiselect and local searchable comboboxes have separate controllers; asynchronous search remains consumer-owned.

Native-semantic controls

<label class="fw-choice">
  <input class="fw-checkbox" type="checkbox" name="updates">
  <span>Product updates</span>
</label>
<label for="position">Position</label>
<input id="position" class="fw-range" type="range" min="0" max="100" value="35"
  style="--fw-range-progress:35%" aria-valuetext="35 percent">

Keep native keyboard behavior. Set the mixed checkbox's indeterminate property; radio inputs share a group name; switch inputs use fw-switch and role=switch. Synchronize the range fill percentage and meaningful value text with the actual numeric min/max/value. Targets remain44px even when the visible mark is20px. See the controls contract.

Motion

import {motion,bezier} from './framework/motion/index.js';
const ease = bezier(...motion.easing.standard);
const y = ease(.5); // eased progress for a requestAnimationFrame interpolation
const duration = motion.duration.standard;

Use the least motion needed to explain the interaction. Respect prefers-reduced-motion; settle logical state immediately and retain text/icons. The motion lab demonstrates pause, reverse, scrub and cancel handling. Its stationary drawer playback toolbar is a preview mechanism, not a requirement for ordinary product drawers.

Runtime 2.0

The component explorer covers 34 component families and their applicable states. The runtime API defines controller anatomy, arguments, teardown and intentional limits. All controllers are imported from src/index.js. Keep mounting client-side; the select module has shared document/window listeners. Native/CSS patterns need no controller.