ropav 0.1.7 → 0.1.8

package/docs/public-styles-api.md

@@ -1,6 +1,6 @@
 # Public Styles API
 
-The Public Styles API is the supported way to restyle Ropav without depending on component DOM nesting or internal selectors. Its compatibility baseline is commit `5102a40`.
+The Public Styles API is the supported way to restyle Ropav without depending on component DOM nesting or internal selectors.
 
 ## Typed component API
 
@@ -46,28 +46,35 @@ Only independently useful semantic elements are public parts. Conditional parts
 | 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`                                                                                                                                      |
-| Popover, Tooltip                         | `root`, `trigger`, `content`                                                                                                                |
+| 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`                            |
@@ -78,25 +85,29 @@ Only independently useful semantic elements are public parts. Conditional parts
 
 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, DropdownMenu and submenus, Modal, Popover, Select and Tooltip.
+- `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 and Switch.
+- `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`: Input, Textarea, ColorInput and ColorPicker controls.
+- `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`: Select options and ColorPicker swatches.
-- `data-highlighted`: Select options and DropdownMenu items.
+- `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, Slider, RangeSlider, Tabs and TabsList.
-- `data-placement`: the final placement after collision handling; twelve placements for Popover and DropdownMenu, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
-- `data-side="top|right|bottom|left"`: the side component of the final placement for Popover, DropdownMenu and Tooltip.
+- `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.
@@ -111,6 +122,8 @@ The exact entries in [`styles-manifest.json`](../src/styles/styles-manifest.json
 
 The manifest contains design tokens plus a deliberately small component-geometry allowlist. Slider and RangeSlider share the `--rp-slider-*` namespace. Size presets provide fallbacks, while a consumer value wins for the individual dimension. See the generated [token table](./public-tokens.md).
 
+The schema-v2 manifest does not pin a Git commit. `tokens:check` resolves compatibility from release tags, so the baseline advances with releases instead of remaining hard-coded.
+
 Palette shades and their normal and active `*-contrast` companions are required override groups because `autoContrast` consumes state-specific companions selected at build time. The [color override contract](./public-tokens.md#color-override-contract) documents the state pairings and preset-role requirements.
 
 ## Cascade layers and migration
@@ -128,6 +141,6 @@ Place global resets in `reset` and application overrides in `app`. Import order
 - 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` compares the current manifest with the latest reachable `v*` release tag that contains one. Until the first such release, it uses the immutable manifest from the initial Public Styles API commit (`f16e826`). Released variables cannot be removed, renamed or changed semantically; adding a variable requires incrementing the manifest's `contractVersion`.
-- Release tags must be available in the Git checkout that runs the check. `PUBLIC_STYLES_BASELINE_REF` can explicitly pin a commit or tag that contains a manifest.
+- `tokens:check` compares the current manifest with the latest reachable `v*` release tag that contains one. Released variables cannot be removed, renamed or changed semantically; adding a variable requires incrementing the manifest's `contractVersion`.
+- Release tags must be available in the Git checkout that runs the check. `PUBLIC_STYLES_BASELINE_REF` can explicitly select another Git ref that contains a manifest.
 - Internal DOM, selectors and undocumented variables are outside the public contract.

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ropav",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@11.15.1",
+  "packageManager": "pnpm@11.17.0",
   "engines": {
     "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
   },
@@ -65,6 +65,10 @@
       "types": "./dist/components/button-link/index.d.ts",
       "import": "./dist/components/button-link/index.js"
     },
+    "./calendar": {
+      "types": "./dist/components/calendar/index.d.ts",
+      "import": "./dist/components/calendar/index.js"
+    },
     "./card": {
       "types": "./dist/components/card/index.d.ts",
       "import": "./dist/components/card/index.js"
@@ -89,6 +93,14 @@
       "types": "./dist/components/color-swatch/index.d.ts",
       "import": "./dist/components/color-swatch/index.js"
     },
+    "./combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "import": "./dist/components/combobox/index.js"
+    },
+    "./date-picker": {
+      "types": "./dist/components/date-picker/index.d.ts",
+      "import": "./dist/components/date-picker/index.js"
+    },
     "./dialog": {
       "types": "./dist/components/dialog/index.d.ts",
       "import": "./dist/components/dialog/index.js"
@@ -97,10 +109,18 @@
       "types": "./dist/components/dropdown-menu/index.d.ts",
       "import": "./dist/components/dropdown-menu/index.js"
     },
+    "./dropzone": {
+      "types": "./dist/components/dropzone/index.d.ts",
+      "import": "./dist/components/dropzone/index.js"
+    },
     "./field": {
       "types": "./dist/components/field/index.d.ts",
       "import": "./dist/components/field/index.js"
     },
+    "./file-input": {
+      "types": "./dist/components/file-input/index.d.ts",
+      "import": "./dist/components/file-input/index.js"
+    },
     "./floating": {
       "types": "./dist/components/floating/index.d.ts",
       "import": "./dist/components/floating/index.js"
@@ -109,6 +129,10 @@
       "types": "./dist/components/focus-trap/index.d.ts",
       "import": "./dist/components/focus-trap/index.js"
     },
+    "./hover-card": {
+      "types": "./dist/components/hover-card/index.d.ts",
+      "import": "./dist/components/hover-card/index.js"
+    },
     "./icon-button": {
       "types": "./dist/components/icon-button/index.d.ts",
       "import": "./dist/components/icon-button/index.js"
@@ -121,6 +145,10 @@
       "types": "./dist/components/modal/index.d.ts",
       "import": "./dist/components/modal/index.js"
     },
+    "./multi-select": {
+      "types": "./dist/components/multi-select/index.d.ts",
+      "import": "./dist/components/multi-select/index.js"
+    },
     "./number-input": {
       "types": "./dist/components/number-input/index.d.ts",
       "import": "./dist/components/number-input/index.js"
@@ -149,6 +177,10 @@
       "types": "./dist/components/scroll-area/index.d.ts",
       "import": "./dist/components/scroll-area/index.js"
     },
+    "./segmented-control": {
+      "types": "./dist/components/segmented-control/index.d.ts",
+      "import": "./dist/components/segmented-control/index.js"
+    },
     "./select": {
       "types": "./dist/components/select/index.d.ts",
       "import": "./dist/components/select/index.js"
@@ -165,6 +197,10 @@
       "types": "./dist/components/tabs/index.d.ts",
       "import": "./dist/components/tabs/index.js"
     },
+    "./tags-input": {
+      "types": "./dist/components/tags-input/index.d.ts",
+      "import": "./dist/components/tags-input/index.js"
+    },
     "./teleport-provider": {
       "types": "./dist/components/teleport-provider/index.d.ts",
       "import": "./dist/components/teleport-provider/index.js"
@@ -265,7 +301,7 @@
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "vue": "3.6.0-rc.2",
-    "vue-tsc": "^3.3.7"
+    "vue-tsc": "^3.3.8"
   },
   "repository": {
     "type": "git",

package/src/styles/_mixins.scss

@@ -108,6 +108,32 @@ $rp-component-colors:
     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;

package/src/styles/styles-manifest.json

@@ -1,7 +1,6 @@
 {
-  "schemaVersion": 1,
+  "schemaVersion": 2,
   "contractVersion": 2,
-  "baseline": "5102a40",
   "tokens": [
     {
       "name": "--rp-border-width-medium",

package/dist/components/floating/hoverDisclosureInteractionModel.d.ts

@@ -1,42 +0,0 @@
-export type HoverDisclosureInteractionPart = 'trigger' | 'content';
-export interface HoverDisclosureInteractionState {
-    contentFocused: boolean;
-    contentHovered: boolean;
-    touchClickPending: boolean;
-    touchPinned: boolean;
-    touchPointerActive: boolean;
-    triggerFocused: boolean;
-    triggerHovered: boolean;
-}
-export type HoverDisclosureInteractionAction = {
-    type: 'hover';
-    part: HoverDisclosureInteractionPart;
-    active: boolean;
-} | {
-    type: 'focus';
-    part: HoverDisclosureInteractionPart;
-    active: boolean;
-} | {
-    type: 'pointer-down';
-    touch: boolean;
-} | {
-    type: 'pointer-up';
-    touch: boolean;
-} | {
-    type: 'pointer-cancel';
-} | {
-    type: 'consume-touch-click';
-} | {
-    type: 'set-touch-pinned';
-    pinned: boolean;
-} | {
-    type: 'reset';
-    part: HoverDisclosureInteractionPart | 'all';
-};
-export interface HoverDisclosureInteractionModel {
-    read: () => Readonly<HoverDisclosureInteractionState>;
-    send: (action: HoverDisclosureInteractionAction) => Readonly<HoverDisclosureInteractionState>;
-}
-export declare function createHoverDisclosureInteractionModel(): HoverDisclosureInteractionModel;
-export declare function hasActiveHoverDisclosureInteraction(state: Readonly<HoverDisclosureInteractionState>): boolean;
-export declare function reduceHoverDisclosureInteraction(state: Readonly<HoverDisclosureInteractionState>, action: HoverDisclosureInteractionAction): HoverDisclosureInteractionState;

package/dist/components/floating/useHoverDisclosureInteractions.d.ts

@@ -1,32 +0,0 @@
-import { ComputedRef } from 'vue';
-import { HoverDisclosureInteractionModel, HoverDisclosureInteractionPart } from './hoverDisclosureInteractionModel.js';
-import { HoverDisclosureChangeRequest } from './useHoverDisclosureOpenState.js';
-import { HoverDisclosureTargetState } from './useHoverDisclosureTargetBinding.js';
-import { HoverDisclosureContentProps, HoverDisclosureState, HoverDisclosureTriggerProps, UseHoverDisclosureOptions } from './types.js';
-interface HoverDisclosureInteractionCommands {
-    cancelScheduledClose: () => void;
-    isDisabled: ComputedRef<boolean>;
-    isOpen: ComputedRef<boolean>;
-    isRequestedOpen: () => boolean;
-    request: (change: HoverDisclosureChangeRequest) => void;
-}
-interface UseHoverDisclosureInteractionsOptions {
-    commands: HoverDisclosureInteractionCommands;
-    interaction: HoverDisclosureInteractionModel;
-    options: Readonly<UseHoverDisclosureOptions>;
-    state: ComputedRef<HoverDisclosureState>;
-    targets: HoverDisclosureTargetState;
-}
-export declare function useHoverDisclosureInteractions({ commands, interaction, options, state, targets, }: UseHoverDisclosureInteractionsOptions): {
-    bindingAdapter: {
-        contentListeners: readonly [readonly ["pointerenter", EventListener], readonly ["pointerleave", EventListener], readonly ["pointerdown", EventListener], readonly ["focusin", EventListener], readonly ["focusout", EventListener], readonly ["keydown", EventListener]];
-        isOutsideDismissalActive: () => boolean;
-        onDocumentKeydown: (event: KeyboardEvent) => void;
-        onOutsidePointerdown: (event: PointerEvent) => void;
-        onTargetDetached: (part: HoverDisclosureInteractionPart) => void;
-        triggerListeners: readonly [readonly ["pointerenter", EventListener], readonly ["pointerleave", EventListener], readonly ["pointerdown", EventListener], readonly ["pointerup", EventListener], readonly ["pointercancel", EventListener], readonly ["click", EventListener], readonly ["focusin", EventListener], readonly ["focusout", EventListener], readonly ["keydown", EventListener]];
-    };
-    contentProps: ComputedRef<HoverDisclosureContentProps>;
-    triggerProps: ComputedRef<HoverDisclosureTriggerProps>;
-};
-export {};

package/dist/components/floating/useHoverDisclosureOpenState.d.ts

@@ -1,25 +0,0 @@
-import { HoverDisclosureInteractionModel } from './hoverDisclosureInteractionModel.js';
-import { HoverDisclosureOpenChangeReason, HoverDisclosureState, UseHoverDisclosureOptions } from './types.js';
-export interface HoverDisclosureChangeRequest {
-    event?: Event;
-    open: boolean;
-    reason: HoverDisclosureOpenChangeReason;
-    timing: 'delayed' | 'immediate';
-}
-interface UseHoverDisclosureOpenStateOptions {
-    interaction: HoverDisclosureInteractionModel;
-    onContentClosed: () => void;
-    options: Readonly<UseHoverDisclosureOptions>;
-}
-export declare function useHoverDisclosureOpenState({ interaction, onContentClosed, options, }: UseHoverDisclosureOpenStateOptions): {
-    cancelScheduledClose: () => void;
-    close: () => void;
-    isDisabled: import('vue').ComputedRef<boolean>;
-    isOpen: import('vue').ComputedRef<boolean>;
-    isRequestedOpen: () => boolean;
-    open: () => void;
-    request: (change: HoverDisclosureChangeRequest) => void;
-    state: import('vue').ComputedRef<HoverDisclosureState>;
-    toggle: () => void;
-};
-export {};

package/dist/components/floating/useHoverDisclosureTargetBinding.d.ts

@@ -1,27 +0,0 @@
-import { shallowRef, ComputedRef } from 'vue';
-import { UseHoverDisclosureOptions } from './types.js';
-import { HoverDisclosureInteractionPart } from './hoverDisclosureInteractionModel.js';
-export type HoverDisclosureTargetListener = readonly [type: string, listener: EventListener];
-export interface HoverDisclosureTargetState {
-    contentElement: Element | null;
-    resolvedContentTarget: ReturnType<typeof shallowRef<Element | null>>;
-    resolvedInteractionTarget: ReturnType<typeof shallowRef<Element | null>>;
-    triggerElement: Element | null;
-}
-interface HoverDisclosureBindingAdapter {
-    contentListeners: readonly HoverDisclosureTargetListener[];
-    isOutsideDismissalActive: () => boolean;
-    onDocumentKeydown: (event: KeyboardEvent) => void;
-    onOutsidePointerdown: (event: PointerEvent) => void;
-    onTargetDetached: (part: HoverDisclosureInteractionPart) => void;
-    triggerListeners: readonly HoverDisclosureTargetListener[];
-}
-interface UseHoverDisclosureTargetBindingOptions {
-    adapter: HoverDisclosureBindingAdapter;
-    isOpen: ComputedRef<boolean>;
-    options: Readonly<UseHoverDisclosureOptions>;
-    targets: HoverDisclosureTargetState;
-}
-export declare function createHoverDisclosureTargetState(): HoverDisclosureTargetState;
-export declare function useHoverDisclosureTargetBinding({ adapter, isOpen, options, targets, }: UseHoverDisclosureTargetBindingOptions): void;
-export {};

package/dist/components/select/useSelectNativeControl.d.ts

@@ -1,9 +0,0 @@
-import { Ref, SelectHTMLAttributes } from 'vue';
-import { SelectProps } from './types.js';
-import { SelectValue } from './useSelectNativeValue.js';
-export declare function useSelectNativeControl(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void, triggerRef: Readonly<Ref<HTMLElement | null>>): {
-    nativeSelectRef: Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
-    selectedValue: import('vue').ComputedRef<SelectValue>;
-    nativeInputAttrs: import('vue').ComputedRef<SelectHTMLAttributes>;
-    requestValueUpdate: (value: SelectValue) => void;
-};

package/dist/components/select/useSelectNativeValue.d.ts

@@ -1,9 +0,0 @@
-import { SelectProps } from './types.js';
-export type SelectValue = string | number | null;
-export declare function useSelectNativeValue(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void): {
-    nativeSelectRef: import('vue').Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
-    controllable: import('../../composables/useControllableValue.js').UseControllableValueReturn<SelectValue>;
-    getNativeValue: (select: HTMLSelectElement) => string | number | null;
-    syncNativeSelection: (value: SelectValue) => void;
-    requestValueUpdate: (value: SelectValue) => void;
-};

package/dist/pointer.js

@@ -1,9 +0,0 @@
-//#region src/utils/dom/pointer.ts
-function getPointerId(event) {
-	return Number.isFinite(event.pointerId) ? event.pointerId : void 0;
-}
-function isMatchingPointer(event, pointerId) {
-	return pointerId === void 0 || getPointerId(event) === pointerId;
-}
-//#endregion
-export { isMatchingPointer as n, getPointerId as t };

package/dist/utils/dom/pointer.d.ts

@@ -1,2 +0,0 @@
-export declare function getPointerId(event: Pick<PointerEvent, 'pointerId'>): number | undefined;
-export declare function isMatchingPointer(event: Pick<PointerEvent, 'pointerId'>, pointerId: number | undefined): boolean;