ropav 0.2.0 → 0.3.0

package/docs/public-floating-api.md

@@ -1,163 +0,0 @@
-# Public floating API
-
-`useFloatingPosition` provides Ropav's positioning behavior without rendering component DOM or
-styles. It applies the same offset, flip, shift and collision defaults used by Ropav overlays.
-
-```vue
-<template>
-  <button
-    ref="reference"
-    type="button"
-    aria-haspopup="dialog"
-    :aria-expanded="open"
-    @click="open = !open"
-  >
-    Toggle card
-  </button>
-
-  <Teleport :to="teleportTo" :disabled="!teleport">
-    <section v-if="open" ref="floating" :style="floatingStyle" :data-placement="actualPlacement">
-      Custom content
-      <span ref="arrow" :style="arrowStyle" aria-hidden="true" />
-    </section>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useFloatingPosition } from 'ropav/floating';
-import { useTeleportTarget } from 'ropav/teleport-provider';
-
-const reference = ref<HTMLElement | null>(null);
-const floating = ref<HTMLElement | null>(null);
-const arrow = ref<HTMLElement | null>(null);
-const open = ref(false);
-const teleport = ref(true);
-const teleportTo = useTeleportTarget();
-
-const { actualPlacement, arrowStyle, floatingStyle } = useFloatingPosition({
-  reference,
-  floating,
-  arrow,
-  open,
-  placement: 'bottom-start',
-  offset: 8,
-});
-</script>
-```
-
-The composable accepts plain values, refs, computed refs or getters for reactive options.
-
-| Option                             | Default    | Description                                                            |
-| ---------------------------------- | ---------- | ---------------------------------------------------------------------- |
-| `reference`                        | required   | Element or virtual element used as the anchor.                         |
-| `floating`                         | required   | Floating HTML element.                                                 |
-| `arrow`                            | —          | Optional arrow HTML element.                                           |
-| `open`                             | `true`     | Suspends positioning and auto-updates when false.                      |
-| `placement`                        | `bottom`   | Preferred side and optional alignment.                                 |
-| `strategy`                         | `absolute` | CSS positioning strategy: `absolute` or `fixed`.                       |
-| `offset`                           | `8`        | Main/cross-axis distance from the reference.                           |
-| `flip`                             | `true`     | Tries the opposite side when space is insufficient.                    |
-| `flipOptions.fallbackStrategy`     | `bestFit`  | Chooses the best fit or preserves the initial placement when none fit. |
-| `shift`                            | `true`     | Keeps the floating element inside the collision boundary.              |
-| `collisionPadding`                 | `8`        | Padding between the floating element and viewport boundary.            |
-| `autoUpdateOptions.animationFrame` | `false`    | Tracks transform animations and detached nested floating contexts.     |
-| `restartKey`                       | —          | Forces a rebind for reactive changes unrelated to DOM ancestry.        |
-
-Use `autoUpdateOptions.animationFrame` sparingly. It checks the reference position every animation
-frame and is intended for references moving with CSS transforms or nested floating elements outside
-their ancestor's scrolling context. The animation-frame loop only runs while positioning is open.
-
-`HoverCard`, `Popover`, `Tooltip`, `DropdownMenu`, `DropdownMenuContent` and
-`DropdownMenuSubContent` accept the same `flipOptions` and `autoUpdateOptions` objects. On the
-data-driven `DropdownMenu`, the options also apply to its open submenus. Each open floating element
-using `animationFrame: true` runs its own animation-frame loop.
-
-The return value contains readonly `actualPlacement`, `floatingStyle`, `arrowStyle` and
-`isPositioned` refs, plus an async `update()` method for content-driven layout changes.
-
-`useTeleportTarget()` resolves the nearest `TeleportProvider` target and falls back to `body`. Pass
-a target value, ref or getter to override the provider for one floating element. Positioning
-automatically rebinds when the reference or floating element moves through the composed DOM,
-including Teleport moves, temporary detachments and slot reassignment within an existing shadow
-tree. Use `restartKey` when a reactive change outside observable DOM ancestry must recreate the
-auto-update subscriptions, such as a host attaching a new shadow root after positioning starts.
-
-Positioning does not add interaction or accessibility behavior. Custom overlays remain responsible
-for keyboard handling, focus management, roles, labels, outside interaction and dismissal.
-
-## Hover disclosure interactions
-
-`useHoverDisclosure` manages hover and focus state without rendering DOM or positioning content. It
-coordinates the trigger and floating content, so a close delay started when the pointer leaves the
-trigger is cancelled when the pointer enters the content.
-
-`HoverCard` composes this behavior with positioning, Teleport and styled content. Use the composable
-directly when custom markup or a different visual treatment is required.
-
-```vue
-<template>
-  <a ref="reference" href="/people/ada" v-bind="triggerProps">Ada Lovelace</a>
-
-  <Teleport to="body">
-    <section
-      v-if="isOpen"
-      ref="floating"
-      v-bind="contentProps"
-      :style="floatingStyle"
-      :data-placement="actualPlacement"
-    >
-      Mathematician and writer
-    </section>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useFloatingPosition, useHoverDisclosure } from 'ropav/floating';
-
-const reference = ref<HTMLElement | null>(null);
-const floating = ref<HTMLElement | null>(null);
-
-const { isOpen, triggerProps, contentProps } = useHoverDisclosure({
-  openDelay: 600,
-  closeDelay: 150,
-});
-
-const { actualPlacement, floatingStyle } = useFloatingPosition({
-  reference,
-  floating,
-  open: isOpen,
-  placement: 'bottom-start',
-});
-</script>
-```
-
-Focus opens immediately by default. Hover uses `openDelay`; leaving the combined trigger/content
-area uses `closeDelay`. Escape dismisses an open disclosure even when keyboard focus is elsewhere.
-The return value also contains `state`, `isDisabled`, and immediate `open()`, `close()` and
-`toggle()` controls.
-
-| Option              | Default | Description                                                                 |
-| ------------------- | ------- | --------------------------------------------------------------------------- |
-| `open`              | —       | Controlled open state. Omit it for internal state.                          |
-| `defaultOpen`       | `false` | Initial internal state.                                                     |
-| `openDelay`         | `0`     | Delay in milliseconds before pointer hover opens the disclosure.            |
-| `closeDelay`        | `0`     | Delay before closing after pointer and focus leave trigger and content.     |
-| `disabled`          | `false` | Prevents opening and closes pending/open internal state.                    |
-| `openOnFocus`       | `true`  | Opens immediately when focus enters the trigger.                            |
-| `closeOnEscape`     | `true`  | Allows Escape to dismiss the disclosure.                                    |
-| `touchBehavior`     | `none`  | `toggle` opts into tap-to-toggle and prevents the activating click default. |
-| `interactionTarget` | —       | External element, selector or virtual reference that owns trigger events.   |
-| `contentTarget`     | —       | External element or selector that owns content events.                      |
-| `onOpenChange`      | —       | Receives the requested state and its interaction reason.                    |
-
-When `interactionTarget` or `contentTarget` is supplied, the composable attaches the corresponding
-listeners directly; do not also bind the matching props to that same element. An element reference
-is used directly. A virtual reference uses its `contextElement` for events. A virtual reference
-without `contextElement` cannot receive pointer or focus events, so control it with `open` or the
-imperative methods instead.
-
-The composable only owns disclosure interaction. Consumers remain responsible for content roles,
-labels and deciding whether the revealed information is appropriate for hover/focus. Interactive
-dialogs and focus-trapped content should use `Popover` or `Dialog` instead.

package/docs/public-overlay-layer-api.md

@@ -1,65 +0,0 @@
-# Overlay layer z-index API
-
-`OverlayLayerProvider` sets a shared z-index floor for Ropav portal surfaces in a Vue subtree.
-Component props take precedence over the nearest provider, and components outside a provider keep
-their existing defaults.
-
-```vue
-<template>
-  <OverlayLayerProvider :base-z-index="5000">
-    <AppShell />
-  </OverlayLayerProvider>
-</template>
-
-<script setup lang="ts">
-import { OverlayLayerProvider } from 'ropav/overlay';
-</script>
-```
-
-The provider follows the logical Vue component tree, including content rendered through
-`Teleport`. Providers can be nested to create a higher or lower floor for one subtree.
-
-## Component overrides
-
-`DialogRoot`, `Modal`, `Popover`, `DropdownMenu`, `DropdownMenuRoot`, `Tooltip` and `ToastViewport`
-accept `baseZIndex`. The resolution order is:
-
-1. The component's `baseZIndex` prop.
-2. The nearest `OverlayLayerProvider`.
-3. The component's legacy default.
-
-Dialog, Popover and Dropdown layers may end up above the resolved floor because active managed
-layers are ordered in two-unit steps. The unused plane immediately below a Dialog content layer is
-reserved for its overlay. A top-level Tooltip uses the resolved floor, while a Tooltip nested in a
-managed layer uses at least `parentZIndex + 1`. `ToastViewport` applies an offset of `1`.
-
-Without a provider or local override, Dropdown and Popover start at `100`, Dialog and Tooltip start
-at `1000`, and ToastViewport uses `1001`.
-
-## Custom portal surfaces
-
-`useOverlayZIndex()` lets custom portal content resolve the same policy without joining Ropav's
-focus, inert, dismissal or active-layer management.
-
-```vue
-<script setup lang="ts">
-import { useOverlayZIndex } from 'ropav/overlay';
-
-const props = defineProps<{ baseZIndex?: number }>();
-const zIndex = useOverlayZIndex({
-  baseZIndex: () => props.baseZIndex,
-  defaultBaseZIndex: 1000,
-  offset: 1,
-});
-</script>
-```
-
-| Option              | Default | Description                                                         |
-| ------------------- | ------- | ------------------------------------------------------------------- |
-| `baseZIndex`        | —       | Local value, ref or getter that overrides the provider.             |
-| `defaultBaseZIndex` | `1000`  | Fallback used when neither a local value nor provider is available. |
-| `offset`            | `0`     | Value, ref or getter added to the resolved base.                    |
-| `aboveParent`       | `true`  | Ensures the result is at least one plane above a parent layer.      |
-
-Set `aboveParent: false` when the custom surface only needs the resolved floor. The returned
-`ComputedRef<number>` updates when the local value, provider or parent layer changes.

package/docs/public-styles-api.md

@@ -1,151 +0,0 @@
-# Public Styles API
-
-The Public Styles API is the supported way to restyle Ropav without depending on component DOM nesting or internal selectors.
-
-## Typed component API
-
-Each component in the [semantic part catalog](#semantic-part-catalog) exports a runtime `*Parts` constant and its matching `*Part` union from both `ropav` and the component subpath. `classNames` and `styles` accept only those keys.
-
-This contract applies to the cataloged, styled components, not every export from their subpaths. Headless compound primitives such as `DropdownMenuRoot`, `DropdownMenuTrigger` and `DropdownMenuContent` do not export `*Parts` or accept `classNames` and `styles`. When a primitive renders a host, style it with the forwarded `class` and `style` attributes instead.
-
-```vue
-<Button
-  :class-names="{ root: $style.action, label: $style.label }"
-  :styles="{ root: { minWidth: '12rem' } }"
-  loading
->
-    Save
-</Button>
-```
-
-Objects and their values may be reactive Vue values. Values are normal Vue class and style values; they do not receive a state callback. Use the documented state attributes for state-dependent CSS.
-
-Ropav does not expose a `vars` prop. Public CSS variables are set through CSS, the root `style` attribute, or `styles.root`.
-
-## Merge and forwarding contract
-
-- Classes merge as internal classes, compatibility classes, `classNames`, then root `class` attributes.
-- Styles merge as internal styles, compatibility styles, `styles`, then root `style` attributes. Later stages win a duplicate property.
-- `inputAttrs` styling is a compatibility stage because this escape hatch also carries non-styling behavior.
-- Attributes and native listeners are forwarded exactly once to the public root host. Internal native handlers run before consumer handlers.
-- Declared component events remain component events. Component-owned roles, ARIA and behavioral attributes remain authoritative.
-- Composite components do not copy root attributes into their child components. Teleported roots receive attributes on the rendered host, not on the virtual teleport node.
-
-## Semantic part catalog
-
-Only independently useful semantic elements are public parts. Conditional parts exist only when their slot or prop renders them; consumer-owned slot content is not automatically a part.
-
-| Component                                | Public parts                                                                                                                                |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| Accordion                                | `root`                                                                                                                                      |
-| AccordionItem                            | `root`, `trigger`, `title`, `icon`, `content`                                                                                               |
-| Alert                                    | `root`, `icon`, `title`, `description`, `body`, `action`, `close`                                                                           |
-| AspectRatio                              | `root`                                                                                                                                      |
-| Avatar                                   | `root`, `image`, `fallback`                                                                                                                 |
-| Badge                                    | `root`, `left`, `label`, `right`                                                                                                            |
-| Button, ButtonLink                       | `root`, `loader`, `left`, `label`, `right`                                                                                                  |
-| IconButton                               | `root`, `loader`, `icon`                                                                                                                    |
-| ButtonGroup                              | `root`                                                                                                                                      |
-| Calendar                                 | `root`, `header`, `previousControl`, `monthLabel`, `nextControl`, `weekdays`, `weekday`, `grid`, `week`, `dayCell`, `day`                   |
-| Card                                     | `root`, `header`, `title`, `description`, `body`, `footer`                                                                                  |
-| Checkbox                                 | `root`, `input`, `indicator`, `label`                                                                                                       |
-| Collapse                                 | `root`, `trigger`, `content`                                                                                                                |
-| ColorInput                               | `root`, `control`, `input`, `preview`, `eyeDropper`, `content`, `picker`, `pickerControl`, `pickerHandle`, `pickerSwatches`, `pickerSwatch` |
-| ColorPicker                              | `root`, `label`, `control`, `handle`, `swatches`, `swatch`                                                                                  |
-| ColorSwatch                              | `root`                                                                                                                                      |
-| Combobox                                 | `root`, `input`, `indicator`, `clear`, `toggle`, `content`, `option`, `empty`                                                               |
-| DropdownMenu                             | `root`, `trigger`, `content`, `item`, `label`, `shortcut`, `submenu`, `submenuIndicator`, `empty`                                           |
-| Dropzone                                 | `root`, `input`, `content`, `label`, `description`                                                                                          |
-| Field                                    | `root`, `label`, `required`, `control`, `description`                                                                                       |
-| FileInput                                | `root`, `input`, `trigger`, `value`                                                                                                         |
-| FocusTrap                                | `root`                                                                                                                                      |
-| Input                                    | `root`, `input`, `left`, `right`                                                                                                            |
-| Modal                                    | `root`, `overlay`, `panel`, `header`, `title`, `description`, `body`, `footer`, `close`                                                     |
-| MultiSelect                              | `root`, `pills`, `pill`, `pillLabel`, `pillRemove`, `input`, `indicator`, `clear`, `toggle`, `content`, `option`, `empty`                   |
-| NumberInput                              | `root`, `input`, `control`                                                                                                                  |
-| Overlay                                  | `root`                                                                                                                                      |
-| HoverCard, Popover, Tooltip              | `root`, `trigger`, `content`                                                                                                                |
-| Progress                                 | `root`, `label`, `value`, `track`, `indicator`                                                                                              |
-| Radio                                    | `root`, `input`, `indicator`, `label`                                                                                                       |
-| RadioGroup                               | `root`                                                                                                                                      |
-| SegmentedControl                         | `root`, `control`, `input`, `indicator`, `label`                                                                                            |
-| Select                                   | `root`, `trigger`, `value`, `indicator`, `clear`, `content`, `option`, `empty`                                                              |
-| Slider                                   | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
-| RangeSlider                              | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
-| Switch                                   | `root`, `input`, `track`, `thumb`, `label`                                                                                                  |
-| Tabs, TabsList, TabsTrigger, TabsContent | `root` on each component                                                                                                                    |
-| TagsInput                                | `root`, `tags`, `tag`, `tagLabel`, `tagRemove`, `input`, `clear`                                                                            |
-| Textarea                                 | `root`, `input`                                                                                                                             |
-| Toast                                    | `root`, `icon`, `title`, `description`, `body`, `action`, `close`                                                                           |
-| ToastViewport                            | `root`, `item`, `toast`, `toastIcon`, `toastTitle`, `toastDescription`, `toastBody`, `toastAction`, `toastClose`                            |
-
-`ToastProvider` renders no DOM and therefore has no Styles API.
-
-When `Calendar.showHeader` is `false`, the `header`, `previousControl` and `nextControl` parts are
-not rendered. The `monthLabel` part remains as a visually hidden live label for the calendar grid.
-
-## State attributes
-
-Boolean states use presence semantics: the attribute value is empty when true and the attribute is absent when false or unknown. Enum values are lowercase kebab-case.
-
-- `data-state="open|closed"`: AccordionItem, Collapse, Combobox, DropdownMenu and submenus, HoverCard, Modal, MultiSelect, Popover, Select and Tooltip.
-- `data-state="checked|unchecked|indeterminate"`: Checkbox.
-- `data-state="checked|unchecked"`: Radio, SegmentedControl controls and inputs, and Switch.
-- `data-state="active|inactive"`: TabsTrigger and TabsContent.
-- `data-state="determinate|indeterminate"`: Progress.
-- `data-state="idle|accept|reject"`: Dropzone.
-- `data-disabled`: the effective disabled state on each applicable control, trigger, item or option.
-- `data-readonly`: Calendar, Input, Textarea, TagsInput, ColorInput and ColorPicker controls.
-- `data-invalid`: form-control roots and their public input parts.
-- `data-loading`: Button, ButtonLink and IconButton.
-- `data-active` and `data-paused`: FocusTrap.
-- `data-selected`: Calendar days, Combobox, MultiSelect and Select options, and ColorPicker swatches.
-- `data-outside` and `data-today`: Calendar days.
-- `data-month="YYYY-MM-DD"`: Calendar roots.
-- `data-highlighted`: Combobox, MultiSelect and Select options, and DropdownMenu items.
-- `data-filled`: Slider and RangeSlider marks.
-- `data-filled` and `data-dragging`: Dropzone.
-- `data-track-hovered` and `data-dragging`: Slider track pointer interaction.
-- `data-thumb-visibility="always|interaction|hidden"`: Slider thumb visibility behavior.
-- `data-submenu`: DropdownMenu items that own children.
-- `data-orientation="horizontal|vertical"`: ButtonGroup, RadioGroup, SegmentedControl, Slider, RangeSlider, Tabs and TabsList.
-- `data-placement`: the final placement after collision handling; twelve placements for HoverCard, Popover and DropdownMenu, `top-start|bottom-start` for Combobox, MultiSelect and Select, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
-- `data-side="top|right|bottom|left"`: the side component of the final placement for Combobox, MultiSelect, HoverCard, Popover, DropdownMenu, Select and Tooltip.
-- `data-control="increment|decrement"`: NumberInput controls.
-- `data-control="saturation|hue|opacity"`: ColorPicker controls and handles.
-- `data-thumb="lower|upper|merged"`: RangeSlider inputs, thumbs and tooltips; `data-active-thumb="lower|upper"` is present on its root only while a thumb is active.
-- `data-type="default|success|error|warning|info"`: toast items and Toast roots rendered by ToastViewport.
-- `data-position="top-left|top-center|top-right|bottom-left|bottom-center|bottom-right"`: ToastViewport.
-
-Active menu and listbox descendants use `data-highlighted`. Actual DOM keyboard focus should be styled with `:focus-visible`.
-
-## Public CSS variables
-
-The exact entries in the packaged [`tokens/manifest.json`](../tokens/manifest.json) (also exported as `ropav/styles-manifest`) are the public contract. A design token enters that manifest only when it opts in with `$extensions.umberkit.public: true`. Emitting a CSS variable is a separate runtime concern: neither emission nor a name prefix makes a variable public. Undocumented variables, underscore-prefixed variables, DOM structure and internal component selectors are not part of the public contract and may change.
-
-Tokens are built with [umberkit](https://www.npmjs.com/package/umberkit): 12-step OKLCH palettes generated from one seed per hue (Radix step semantics — 1-2 backgrounds, 3-5 component backgrounds, 6-8 borders, 9-10 solids, 11-12 text), plus hand-authored semantic roles (`--rp-color-<hue>-filled`, `-light`, `-outline`, …) and scheme semantics (`--rp-color-body`, `-text`, `-default`, …). The generated `tokens.md` and `showcase.html` shipped in `src/styles/generated/` document every token and render the ramps with a contrast grid.
-
-A deliberately small component-geometry namespace (`--rp-switch-*`, `--rp-slider-*`, `--rp-radio-*`) stays outside the token tree: those variables are consumer override hooks with size-preset fallbacks, so they are intentionally undefined by default. Slider and RangeSlider share the `--rp-slider-*` namespace; size presets provide fallbacks, while a consumer value wins for the individual dimension.
-
-## Color scheme
-
-Every color token is emitted as `light-dark()`. Set `data-scheme="dark"` (or `"light"`) on `<html>` to switch schemes; without the attribute the operating-system preference applies. Because `light-dark()` values resolve against the color scheme of the element they are declared on (`:root`), the attribute must be set on the document element — subtree scheme switching is not supported.
-
-## Cascade layers and migration
-
-The layered stylesheet declares `ropav.tokens` before `ropav.components`. A layered application can establish its full order before imports:
-
-```css
-@layer reset, ropav.tokens, ropav.components, app;
-```
-
-Place global resets in `reset` and application overrides in `app`. Import order does not change precedence once the order is declared. Unlayered application rules still outrank named Ropav layers.
-
-## Compatibility
-
-- Typed parts, state attributes, manifest entries, geometry variables and cascade layers form the current Public Styles API.
-- Renaming or removing a documented part, state attribute or variable changes the public contract.
-- Adding a public part, state attribute or variable extends the public contract.
-- `tokens:check` runs `umberkit check`: lint, generated-palette and manifest drift, and the contract ratchet against the latest reachable `v*` release tag. Removing, renaming, retyping or un-publishing a released public token fails until `contract.version` rises in `umberkit.config.ts`.
-- Release tags must be available in the Git checkout that runs the check (`fetch-depth: 0` in CI). `umberkit check --against <ref>` can explicitly select another baseline.
-- Internal DOM, selectors and undocumented variables are outside the public contract.

package/docs/releasing.md

@@ -1,39 +0,0 @@
-# Releasing
-
-This repository publishes `ropav` with [`bumpp`](https://www.npmjs.com/package/bumpp). Release notes
-are generated from Conventional Commits, and the package is published from GitHub Actions with npm
-Trusted Publishing.
-
-## Release
-
-With a clean working tree, run:
-
-```bash
-pnpm release
-```
-
-`bumpp` bumps the package to the next version (patch/minor/major prompt), runs `pnpm run changelog`
-to regenerate the changelog from commits since the last `v*` tag, then commits
-`chore(release): vX.Y.Z`, tags `vX.Y.Z`, and pushes the commit and tag.
-
-Every push to `main` runs the full quality suite. When the pushed commit is a release commit
-(message starts with `chore(release): v`), the release job rebuilds the package, checks the built
-bundles, and publishes it to npm. Change the release commit message in the `release` script and the
-release workflow will need the matching prefix.
-
-## Changelog
-
-`pnpm run changelog` regenerates `CHANGELOG.md` from commits since the latest `v*` tag. The release
-flow runs this automatically. The changelog is a tracked file, so the working tree must be clean
-before `pnpm release`.
-
-## Trusted Publisher configuration
-
-The npm package is configured as a Trusted Publisher:
-
-- GitHub owner: `daopk`
-- Repository: `ropav`
-- Workflow filename: `publish.yml`
-
-The workflow uses GitHub-hosted runners, Node 24, and `id-token: write`. Do not add a long-lived npm
-publish token to the workflow.

package/src/styles/_mixins.scss

@@ -1,165 +0,0 @@
-@use 'generated/tokens.scss' as *;
-
-@mixin flex-center {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-@mixin focus-ring {
-    border-color: var(--rp-color-control-border-focus);
-    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
-}
-
-@mixin visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
-@mixin reset-button {
-    padding: 0;
-    font: inherit;
-    background: none;
-    border: none;
-    cursor: pointer;
-}
-
-@mixin icon-close-button {
-    @include flex-center;
-    @include reset-button;
-    color: inherit;
-    opacity: 0.6;
-    flex-shrink: 0;
-    transition: opacity var(--rp-transition-fast);
-
-    &:hover {
-        opacity: 1;
-    }
-
-    svg {
-        width: 100%;
-        height: 100%;
-    }
-}
-
-@mixin disabled-state {
-    opacity: var(--rp-opacity-disabled);
-    cursor: not-allowed;
-}
-
-@mixin control-size-vars($prefix) {
-    &--xs {
-        #{$prefix}-height: var(--rp-size-control-xs);
-        #{$prefix}-font: var(--rp-font-size-xs);
-        #{$prefix}-px: calc(var(--rp-size-control-xs) / 3);
-        #{$prefix}-radius: var(--rp-radius-sm);
-    }
-
-    &--sm {
-        #{$prefix}-height: var(--rp-size-control-sm);
-        #{$prefix}-font: var(--rp-font-size-sm);
-        #{$prefix}-px: calc(var(--rp-size-control-sm) / 3);
-        #{$prefix}-radius: var(--rp-radius-md);
-    }
-
-    &--md {
-        #{$prefix}-height: var(--rp-size-control-md);
-        #{$prefix}-font: var(--rp-font-size-md);
-        #{$prefix}-px: calc(var(--rp-size-control-md) / 3);
-        #{$prefix}-radius: var(--rp-radius-lg);
-    }
-
-    &--lg {
-        #{$prefix}-height: var(--rp-size-control-lg);
-        #{$prefix}-font: var(--rp-font-size-lg);
-        #{$prefix}-px: calc(var(--rp-size-control-lg) / 3);
-        #{$prefix}-radius: var(--rp-radius-lg);
-    }
-
-    &--xl {
-        #{$prefix}-height: var(--rp-size-control-xl);
-        #{$prefix}-font: var(--rp-font-size-xl);
-        #{$prefix}-px: calc(var(--rp-size-control-xl) / 3);
-        #{$prefix}-radius: var(--rp-radius-lg);
-    }
-}
-
-@mixin menu-surface(
-    $z-index: $rp-z-index-dropdown,
-    $surface: var(--rp-color-default),
-    $radius: var(--rp-radius-lg)
-) {
-    z-index: $z-index;
-    background-color: $surface;
-    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
-    border-radius: $radius;
-    box-shadow: var(--rp-shadow-md);
-    padding: var(--rp-spacing-1) 0;
-}
-
-@mixin bordered-floating-arrow {
-    background-color: inherit;
-    border: inherit;
-    rotate: 45deg;
-
-    &[data-side='top'] {
-        border-top-color: transparent;
-        border-left-color: transparent;
-    }
-
-    &[data-side='right'] {
-        border-top-color: transparent;
-        border-right-color: transparent;
-    }
-
-    &[data-side='bottom'] {
-        border-right-color: transparent;
-        border-bottom-color: transparent;
-    }
-
-    &[data-side='left'] {
-        border-bottom-color: transparent;
-        border-left-color: transparent;
-    }
-}
-
-@mixin inline-icon($size: 1em) {
-    display: inline-flex;
-    align-items: center;
-    width: $size;
-    height: $size;
-    flex-shrink: 0;
-
-    svg {
-        width: 100%;
-        height: 100%;
-    }
-}
-
-@mixin spinner-icon($size: 1em, $display: block) {
-    display: $display;
-    width: $size;
-    height: $size;
-    flex-shrink: 0;
-    transform-origin: center;
-    animation: rp-spinner-spin 700ms linear infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
-}
-
-@mixin spinner-keyframes {
-    @keyframes rp-spinner-spin {
-        to {
-            transform: rotate(360deg);
-        }
-    }
-}

package/src/styles/_tokens.scss

@@ -1,6 +0,0 @@
-// Design tokens are generated by umberkit (`pnpm tokens:build`) into
-// src/styles/generated/. This shim inlines the emitted CSS and establishes
-// the public cascade-layer order consumers rely on.
-@use './generated/tokens.css';
-
-@layer ropav.tokens, ropav.components;

package/src/styles/_utilities.scss

@@ -1,15 +0,0 @@
-@use 'mixins' as *;
-
-@layer ropav.components {
-    .rp-spinner {
-        @include spinner-icon($display: inline-block);
-    }
-
-    .rp-spinner > svg {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-
-    @include spinner-keyframes;
-}

package/src/styles/base.scss

@@ -1,2 +0,0 @@
-@use './tokens';
-@use './utilities';