@sewadah/selaras 0.3.0 → 0.3.1

package/dist/runtime/components/ColorPicker.vue

@@ -1,14 +1,17 @@
 <script setup>
-import { ColorSwatch } from "reka-ui";
+import { ColorSwatch, PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
+import { useFormField } from "../composables/use-form-field";
 import { useIsMobile } from "../composables/use-media-query";
 import { useMessages } from "../composables/use-messages";
 import ColorPickerBody from "../internal/ColorPickerBody.vue";
 import { colorPickerTheme } from "../theme/color-picker";
+import { popoverTheme } from "../theme/popover";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Modal from "./Modal.vue";
-import Popover from "./Popover.vue";
 const props = defineProps({
   name: { type: String, required: false },
   form: { type: String, required: false },
@@ -21,12 +24,17 @@ const props = defineProps({
   swatches: { type: Array, required: false },
   placeholder: { type: String, required: false },
   adaptive: { type: Boolean, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   size: { type: null, required: false },
   color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:open", "update:modelValue"]);
 const messages = useMessages();
+const field = useFormField();
+const formName = computed(() => props.name ?? field?.name);
 const instance = getCurrentInstance();
 const formAnchor = ref();
 const initialColor = props.defaultValue ?? "#000000";
@@ -104,55 +112,68 @@ const bodyProps = computed(() => ({
   swatchIndicatorProps: swatchIndicatorProps.value,
   colorRoleMarker: colorRoleMarker.value
 }));
-const popoverUi = computed(() => ({ content: resolveSlot(ui.value.content, props.ui?.content) }));
+const popoverThemeFn = useComponentTheme("popover", popoverTheme);
+const popoverUi = computed(() => popoverThemeFn.value());
+const popoverContentProps = computed(() => ({
+  ...resolveSlot(popoverUi.value.content, resolveSlot(ui.value.content, props.ui?.content)),
+  ...arrowContentProps(props.arrow),
+  ...props.positioning
+}));
+const popoverArrowProps = computed(() => ({ ...resolveSlot(popoverUi.value.arrow, void 0), ...arrowElementProps(props.arrow) }));
+const popoverPortalProps = computed(() => overlayPortalProps(props.portal));
 const adaptiveUi = computed(() => ({ content: "rounded-[var(--selaras-resolved-radius-md)]" }));
 const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
 </script>
 
 <template>
-  <Popover v-if="!showMobileModal" :open="open" :ui="popoverUi" @update:open="onUpdateOpen">
-    <button
-      type="button"
-      :disabled="disabled"
-      :aria-label="messages.colorPicker"
-      :data-selaras-color="colorRoleMarker"
-      :data-selaras-theme="themeBindings['data-selaras-theme']"
-      :data-selaras-mode="themeBindings['data-selaras-mode']"
-      :style="themeBindings.style"
-      v-bind="triggerProps"
-    >
-      <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
-      <span v-bind="triggerValueProps">{{ internalColor }}</span>
-    </button>
+  <!--
+    The root and trigger stay mounted for both presentations. Only the
+    content switches: the anchored panel is removed outright while the
+    adaptive Modal is showing, and the Modal returns focus to this same
+    trigger on close.
+  -->
+  <PopoverRoot :open="open" @update:open="onUpdateOpen">
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        :disabled="disabled"
+        :aria-label="messages.colorPicker"
+        :data-selaras-color="colorRoleMarker"
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        v-bind="triggerProps"
+      >
+        <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
+        <span v-bind="triggerValueProps">{{ internalColor }}</span>
+      </button>
+    </PopoverTrigger>
 
-    <template #content>
-      <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
-    </template>
-  </Popover>
+    <PopoverPortal v-if="!showMobileModal" v-bind="popoverPortalProps">
+      <PopoverContent
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        v-bind="popoverContentProps"
+      >
+        <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
+        <PopoverArrow v-if="arrow" v-bind="popoverArrowProps" />
+      </PopoverContent>
+    </PopoverPortal>
 
-  <Modal
-    v-else :open="open" :title="messages.colorPicker" :description="messages.colorPickerDescription"
-    :ui="adaptiveUi" @update:open="onUpdateOpen"
-  >
-    <button
-      type="button"
-      :disabled="disabled"
-      :aria-label="messages.colorPicker"
-      :data-selaras-color="colorRoleMarker"
-      :data-selaras-theme="themeBindings['data-selaras-theme']"
-      :data-selaras-mode="themeBindings['data-selaras-mode']"
-      :style="themeBindings.style"
-      v-bind="triggerProps"
+    <Modal
+      v-else :open="open" :title="messages.colorPicker" :description="messages.colorPickerDescription"
+      :ui="adaptiveUi" @update:open="onUpdateOpen"
     >
-      <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
-      <span v-bind="triggerValueProps">{{ internalColor }}</span>
-    </button>
-
-    <template #content>
-      <div v-bind="mobileContentProps">
-        <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
-      </div>
-    </template>
-  </Modal>
-  <input ref="formAnchor" type="hidden" :name="name" :form="form" :value="internalColor">
+      <template #content>
+        <div v-bind="mobileContentProps">
+          <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
+        </div>
+      </template>
+    </Modal>
+  </PopoverRoot>
+  <input ref="formAnchor" type="hidden" :name="formName" :form="form" :value="internalColor" :disabled="disabled">
 </template>

package/dist/runtime/components/ColorPicker.vue.d.ts

@@ -1,6 +1,8 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 import { colorPickerTheme } from '../theme/color-picker.js';
 type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
@@ -21,6 +23,12 @@ export interface ColorPickerProps {
     placeholder?: string;
     /** Opts into the picker's accessible small-screen modal presentation. */
     adaptive?: boolean;
+    /** Shows a pointer on the anchored picker; the adaptive modal has no arrow. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored picker (the adaptive modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored picker, or `false` to render it inline. */
+    portal?: OverlayPortal;
     size?: ColorPickerVariants['size'];
     color?: ColorRole;
     ui?: UiProp<ColorPickerThemeSlots>;

package/dist/runtime/components/Column.js

@@ -16,7 +16,7 @@ export default defineComponent({
     },
     sortable: {
       type: Boolean,
-      default: true
+      default: false
     },
     filterable: {
       type: Boolean,

package/dist/runtime/components/CommandPalette.d.vue.ts

@@ -3,8 +3,10 @@ import type { UiProp } from '../utils/ui.js';
 export interface CommandPaletteItem {
     label: string;
     icon?: string;
-    /** Rendered via Kbd - a display hint only, this component doesn't bind the key itself. */
+    /** Displayed via Kbd. */
     shortcut?: string;
+    /** Bind `shortcut` while this palette is open; activation uses this item's normal selection behavior. */
+    hotkey?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
 }

package/dist/runtime/components/CommandPalette.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, onUnmounted, ref, useId, watch } from "vue";
 import { useCommandPalette } from "../composables/use-command-palette";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
+import { vHotkey } from "../directives/hotkey";
 import { commandPaletteTheme } from "../theme/command-palette";
 import { fuzzyScore } from "../utils/fuzzy-match";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
@@ -40,6 +41,9 @@ const query = ref("");
 const highlightedIndex = ref(0);
 const inputRef = ref();
 const listboxId = `selaras-command-palette-list-${useId()}`;
+function hotkeyFor(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut, when: () => isOpen.value, allowInEditable: true } : void 0;
+}
 watch(isOpen, (open) => {
   if (!open) {
     query.value = "";
@@ -178,6 +182,7 @@ function itemId(index) {
                 v-for="item in group.items"
                 :id="itemId(allItems.indexOf(item))"
                 :key="item.label"
+                v-hotkey="hotkeyFor(item)"
                 role="option"
                 :aria-selected="isHighlighted(item)"
                 :aria-disabled="item.disabled"

package/dist/runtime/components/CommandPalette.vue.d.ts

@@ -3,8 +3,10 @@ import type { UiProp } from '../utils/ui.js';
 export interface CommandPaletteItem {
     label: string;
     icon?: string;
-    /** Rendered via Kbd - a display hint only, this component doesn't bind the key itself. */
+    /** Displayed via Kbd. */
     shortcut?: string;
+    /** Bind `shortcut` while this palette is open; activation uses this item's normal selection behavior. */
+    hotkey?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
 }

package/dist/runtime/components/ContentNavigation.d.vue.ts

@@ -4,7 +4,12 @@ import type { UiProp } from '../utils/ui.js';
 export interface ContentNavigationLink {
     title: string;
     path: string;
-    icon?: string;
+    icon?: string | false;
+    order?: number;
+    collapse?: boolean;
+    navBadges?: Array<string | {
+        text: string;
+    }>;
     children?: ContentNavigationLink[];
 }
 type __VLS_Slots = ContentNavigationSlots;
@@ -12,6 +17,8 @@ export interface ContentNavigationProps {
     navigation: ContentNavigationLink[];
     /** The active-link accent. @default 'primary' */
     color?: ColorRole;
+    /** Collapse every group initially unless the item's own `collapse` metadata overrides it. @default false */
+    collapsed?: boolean;
     /** Set only by this component's own recursive self-call, one level down for each nested group - gates the tree-connector rail (see `content-navigation.ts`'s own `isNested` variant), since a root-level entry has no parent trunk to its left to branch off of. */
     isNested?: boolean;
     ui?: UiProp<ContentNavigationThemeSlots>;

package/dist/runtime/components/ContentNavigation.vue

@@ -10,6 +10,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   navigation: { type: Array, required: true },
   color: { type: null, required: false },
+  collapsed: { type: Boolean, required: false },
   isNested: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
@@ -37,19 +38,22 @@ const groupUi = computed(() => ({
       <Accordion
         v-if="link.children?.length"
         :items="[{ value: link.path, label: link.title }]"
-        :default-value="[link.path]"
+        :default-value="link.collapse ?? collapsed ? [] : [link.path]"
         :ui="groupUi"
       >
         <template #label>
           <slot name="link" :link="link" :active="false">
             <Icon v-if="link.icon" :name="link.icon" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
             {{ link.title }}
+            <span v-for="(badge, index) in link.navBadges" :key="`${link.path}:badge:${index}`" v-bind="resolveSlot(ui.badge, props.ui?.badge)">
+              {{ typeof badge === "string" ? badge : badge.text }}
+            </span>
           </slot>
         </template>
         <template #[link.path]>
           <!-- Vue's SFC self-recursion resolves by this file's own bare name -
                keep it unprefixed even though the public component is SContentNavigation. -->
-          <ContentNavigation :navigation="link.children" is-nested :color="color" :ui="props.ui">
+          <ContentNavigation :navigation="link.children" is-nested :color="color" :collapsed="collapsed" :ui="props.ui">
             <template #link="scope">
               <slot name="link" v-bind="scope" />
             </template>
@@ -60,6 +64,9 @@ const groupUi = computed(() => ({
         <slot name="link" :link="link" :active="isActive(link)">
           <Icon v-if="link.icon" :name="link.icon" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
           {{ link.title }}
+          <span v-for="(badge, index) in link.navBadges" :key="`${link.path}:badge:${index}`" v-bind="resolveSlot(ui.badge, props.ui?.badge)">
+            {{ typeof badge === "string" ? badge : badge.text }}
+          </span>
         </slot>
       </NuxtLink>
     </li>

package/dist/runtime/components/ContentNavigation.vue.d.ts

@@ -4,7 +4,12 @@ import type { UiProp } from '../utils/ui.js';
 export interface ContentNavigationLink {
     title: string;
     path: string;
-    icon?: string;
+    icon?: string | false;
+    order?: number;
+    collapse?: boolean;
+    navBadges?: Array<string | {
+        text: string;
+    }>;
     children?: ContentNavigationLink[];
 }
 type __VLS_Slots = ContentNavigationSlots;
@@ -12,6 +17,8 @@ export interface ContentNavigationProps {
     navigation: ContentNavigationLink[];
     /** The active-link accent. @default 'primary' */
     color?: ColorRole;
+    /** Collapse every group initially unless the item's own `collapse` metadata overrides it. @default false */
+    collapsed?: boolean;
     /** Set only by this component's own recursive self-call, one level down for each nested group - gates the tree-connector rail (see `content-navigation.ts`'s own `isNested` variant), since a root-level entry has no parent trunk to its left to branch off of. */
     isNested?: boolean;
     ui?: UiProp<ContentNavigationThemeSlots>;

package/dist/runtime/components/ContextMenu.d.vue.ts

@@ -1,4 +1,5 @@
 import type { ContextMenuThemeSlots } from '../theme/context-menu.js';
+import type { ContextMenuPositioning, OverlayPortal } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ContextMenuItemDef {
     label: string;
@@ -7,12 +8,18 @@ export interface ContextMenuItemDef {
     /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - matches Dropdown's own `destructive` flag. */
     destructive?: boolean;
     onSelect?: () => void;
-    /** Not read by ContextMenu's own default item rendering - carried purely so a custom #item slot override can display one. */
+    /** Displays a keyboard shortcut hint. */
     shortcut?: string;
+    /** Bind `shortcut` while this menu is open; activation follows the normal menu item click path. */
+    hotkey?: boolean;
 }
 type __VLS_Slots = ContextMenuSlots;
 export interface ContextMenuProps {
     items: ContextMenuItemDef[][];
+    /** Collision and offset controls for the menu anchored to the right-click point. */
+    positioning?: ContextMenuPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     ui?: UiProp<ContextMenuThemeSlots>;
 }
 export interface ContextMenuSlots {

package/dist/runtime/components/ContextMenu.vue

@@ -1,18 +1,25 @@
 <script setup>
 import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger } from "reka-ui";
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { contextMenuTheme } from "../theme/context-menu";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 const props = defineProps({
   items: { type: Array, required: true },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   ui: { type: Object, required: false }
 });
 defineSlots();
 const theme = useComponentTheme("contextMenu", contextMenuTheme);
+const open = ref(false);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...props.positioning }));
+const portalProps = computed(() => overlayPortalProps(props.portal));
 function itemPropsFor(item) {
   return resolveSlot(theme.value({ destructive: item.destructive }).item, props.ui?.item);
 }
@@ -20,20 +27,24 @@ function iconPropsFor(item) {
   return resolveSlot(theme.value({ destructive: item.destructive }).icon, props.ui?.icon);
 }
 const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+function hotkeyFor(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut, when: () => open.value } : void 0;
+}
 </script>
 
 <template>
-  <ContextMenuRoot>
+  <ContextMenuRoot :open="open" @update:open="open = $event">
     <ContextMenuTrigger as-child>
       <slot />
     </ContextMenuTrigger>
-    <ContextMenuPortal>
+    <ContextMenuPortal v-bind="portalProps">
       <ContextMenuContent :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <template v-for="(group, groupIndex) in items" :key="groupIndex">
           <ContextMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
           <ContextMenuItem
             v-for="(item, itemIndex) in group"
             :key="itemIndex"
+            v-hotkey="hotkeyFor(item)"
             :disabled="item.disabled"
             v-bind="itemPropsFor(item)"
             @select="item.onSelect?.()"
@@ -41,6 +52,7 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
             <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
             <slot name="item" :item="item">
               {{ item.label }}
+              <ShortcutHint :shortcut="item.shortcut" />
             </slot>
           </ContextMenuItem>
         </template>

package/dist/runtime/components/ContextMenu.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ContextMenuThemeSlots } from '../theme/context-menu.js';
+import type { ContextMenuPositioning, OverlayPortal } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ContextMenuItemDef {
     label: string;
@@ -7,12 +8,18 @@ export interface ContextMenuItemDef {
     /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - matches Dropdown's own `destructive` flag. */
     destructive?: boolean;
     onSelect?: () => void;
-    /** Not read by ContextMenu's own default item rendering - carried purely so a custom #item slot override can display one. */
+    /** Displays a keyboard shortcut hint. */
     shortcut?: string;
+    /** Bind `shortcut` while this menu is open; activation follows the normal menu item click path. */
+    hotkey?: boolean;
 }
 type __VLS_Slots = ContextMenuSlots;
 export interface ContextMenuProps {
     items: ContextMenuItemDef[][];
+    /** Collision and offset controls for the menu anchored to the right-click point. */
+    positioning?: ContextMenuPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     ui?: UiProp<ContextMenuThemeSlots>;
 }
 export interface ContextMenuSlots {

package/dist/runtime/components/DatePicker.d.vue.ts

@@ -2,7 +2,9 @@ import type { DateValue } from '@internationalized/date';
 import type { DateRange } from 'reka-ui';
 import type { VariantProps } from 'tailwind-variants';
 import type { DatePickerThemeSlots } from '../theme/date-picker.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 import { Time } from '@internationalized/date';
 import { datePickerTheme } from '../theme/date-picker.js';
@@ -73,7 +75,12 @@ export interface DatePickerProps {
     activeColor?: ColorRole;
     size?: DatePickerVariants['size'];
     /** Shows a small pointer triangle connecting the panel to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored calendar (the adaptive modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored calendar, or `false` to render it inline. */
+    portal?: OverlayPortal;
     /** Opts into the calendar's accessible small-screen modal presentation. It is selected when the calendar opens and held until close. */
     adaptive?: boolean;
     ui?: UiProp<DatePickerThemeSlots>;
@@ -158,11 +165,11 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;
     "update:open": (value: boolean) => any;
-    "update:view": (view: "month" | "year" | "date") => any;
+    "update:view": (view: "date" | "month" | "year") => any;
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: DateValue | DateRange | Time | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onUpdate:view"?: ((view: "month" | "year" | "date") => any) | undefined;
+    "onUpdate:view"?: ((view: "date" | "month" | "year") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/DatePicker.vue

@@ -34,6 +34,8 @@ import DatePickerCalendarBody from "../internal/DatePickerCalendarBody.vue";
 import DatePickerRangeCalendarBody from "../internal/DatePickerRangeCalendarBody.vue";
 import DatePickerTimeBody from "../internal/DatePickerTimeBody.vue";
 import { datePickerTheme } from "../theme/date-picker";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
@@ -81,7 +83,9 @@ const props = defineProps({
   color: { type: null, required: false, default: "neutral" },
   activeColor: { type: null, required: false, default: "primary" },
   size: { type: null, required: false },
-  arrow: { type: Boolean, required: false, default: false },
+  arrow: { type: [Boolean, Object], required: false, default: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
@@ -360,8 +364,9 @@ const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const fieldProps = computed(() => resolveSlot(ui.value.field, props.ui?.field));
 const segmentProps = computed(() => resolveSlot(ui.value.segment, props.ui?.segment));
 const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
-const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
+const portalProps = computed(() => overlayPortalProps(props.portal));
+const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
 const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
 const headingProps = computed(() => resolveSlot(ui.value.heading, props.ui?.heading));
 const gridsProps = computed(() => resolveSlot(ui.value.grids, props.ui?.grids));
@@ -492,7 +497,7 @@ const buttonTriggerUi = computed(() => ({
     @update:model-value="(value) => updateModelValue(value)"
   >
     <DateRangePickerAnchor as-child>
-      <div v-if="triggerMode === 'field'" :data-selaras-color="fieldColor" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
+      <div v-if="triggerMode === 'field'" data-selaras-field-segmented :data-selaras-color="fieldColor" :data-selaras-field-filled="hasValue ? '' : void 0" :data-selaras-field-active="open ? '' : void 0" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
         <DateRangePickerField v-slot="{ segments }" :aria-labelledby="field?.labelId" :aria-describedby="describedBy" :aria-invalid="datePickerInvalid || void 0">
           <template v-for="segment in segments.start" :key="`start-${segment.part}`">
             <DateRangePickerInput as="span" type="start" :part="segment.part" v-bind="segmentProps">
@@ -533,9 +538,10 @@ const buttonTriggerUi = computed(() => ({
         </div>
       </div>
 
-      <div v-else :class="applyClassPrefix('relative inline-block w-full')">
+      <div v-else :class="applyClassPrefix('relative inline-block w-full')" :data-selaras-field-filled="hasValue ? '' : void 0" :data-selaras-field-active="open ? '' : void 0">
         <DateRangePickerTrigger as-child>
           <Button
+            :id="datePickerId"
             variant="text"
             :color="color"
             :size="effectiveSize"
@@ -544,7 +550,7 @@ const buttonTriggerUi = computed(() => ({
             :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
-            {{ hasValue ? formattedValue : messages.pickDate }}
+            {{ hasValue ? formattedValue : field?.floatingLabel.value ? "" : messages.pickDate }}
             <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
               <slot name="trigger-icon">
                 <Icon :name="icons.calendar" :class="iconClass" />
@@ -570,7 +576,7 @@ const buttonTriggerUi = computed(() => ({
       </div>
     </DateRangePickerAnchor>
 
-    <DateRangePickerContent v-if="!showMobileModal" :side-offset="6" align="start" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
+    <DateRangePickerContent v-if="!showMobileModal" :side-offset="6" align="start" :portal="portalProps" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
       <DatePickerRangeCalendarBody v-bind="rangeBodyProps">
         <template #day="scope">
           <slot name="day" v-bind="scope" />
@@ -610,7 +616,7 @@ const buttonTriggerUi = computed(() => ({
 
   <PopoverRoot v-else-if="timeOnly" :open="open" :data-selaras-color="fieldColor" @update:open="onUpdateOpen">
     <PopoverAnchor as-child>
-      <div v-if="triggerMode === 'field'" :data-selaras-color="fieldColor" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
+      <div v-if="triggerMode === 'field'" data-selaras-field-segmented :data-selaras-color="fieldColor" :data-selaras-field-filled="hasValue ? '' : void 0" :data-selaras-field-active="open ? '' : void 0" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
         <TimeFieldRoot
           :id="datePickerId"
           v-slot="{ segments }"
@@ -660,9 +666,10 @@ const buttonTriggerUi = computed(() => ({
         </div>
       </div>
 
-      <div v-else :class="applyClassPrefix('relative inline-block w-full')">
+      <div v-else :class="applyClassPrefix('relative inline-block w-full')" :data-selaras-field-filled="hasValue ? '' : void 0" :data-selaras-field-active="open ? '' : void 0">
         <PopoverTrigger as-child>
           <Button
+            :id="datePickerId"
             variant="text"
             :color="color"
             :size="effectiveSize"
@@ -671,7 +678,7 @@ const buttonTriggerUi = computed(() => ({
             :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
-            {{ hasValue ? formattedTimeValue : messages.pickTime }}
+            {{ hasValue ? formattedTimeValue : field?.floatingLabel.value ? "" : messages.pickTime }}
             <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
               <slot name="trigger-icon">
                 <Icon :name="icons.clock" :class="iconClass" />
@@ -697,7 +704,7 @@ const buttonTriggerUi = computed(() => ({
       </div>
     </PopoverAnchor>
 
-    <PopoverPortal v-if="!showMobileModal">
+    <PopoverPortal v-if="!showMobileModal" v-bind="portalProps">
       <PopoverContent :side-offset="6" align="start" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <DatePickerTimeBody v-bind="timeBodyProps">
           <template #footer>
@@ -753,7 +760,7 @@ const buttonTriggerUi = computed(() => ({
     @update:model-value="(value) => updateModelValue(normalizeForGranularity(value))"
   >
     <DatePickerAnchor as-child>
-      <div v-if="triggerMode === 'field'" :data-selaras-color="fieldColor" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
+      <div v-if="triggerMode === 'field'" data-selaras-field-segmented :data-selaras-color="fieldColor" :data-selaras-field-filled="hasValue ? '' : void 0" :data-selaras-field-active="open ? '' : void 0" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
         <DatePickerField v-slot="{ segments }" :aria-labelledby="field?.labelId" :aria-describedby="describedBy" :aria-invalid="datePickerInvalid || void 0">
           <template v-for="(segment, index) in visibleSegments(segments)" :key="`${segment.part}-${index}`">
             <DatePickerInput as="span" :part="segment.part" v-bind="segmentProps">
@@ -788,9 +795,10 @@ const buttonTriggerUi = computed(() => ({
         </div>
       </div>
 
-      <div v-else :class="applyClassPrefix('relative inline-block w-full')">
+      <div v-else :class="applyClassPrefix('relative inline-block w-full')" :data-selaras-field-filled="hasValue ? '' : void 0" :data-selaras-field-active="open ? '' : void 0">
         <DatePickerTrigger as-child>
           <Button
+            :id="datePickerId"
             variant="text"
             :color="color"
             :size="effectiveSize"
@@ -799,7 +807,7 @@ const buttonTriggerUi = computed(() => ({
             :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
-            {{ hasValue ? formattedValue : messages.pickDate }}
+            {{ hasValue ? formattedValue : field?.floatingLabel.value ? "" : messages.pickDate }}
             <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
               <slot name="trigger-icon">
                 <Icon :name="icons.calendar" :class="iconClass" />
@@ -832,7 +840,7 @@ const buttonTriggerUi = computed(() => ({
     center without clipping, so it silently hides instead. Centering the
     panel on the trigger only when `arrow` is on sidesteps that without
     changing the default (start-aligned) layout everyone already sees. -->
-    <DatePickerContent v-if="!showMobileModal" :side-offset="6" :align="arrow ? 'center' : 'start'" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
+    <DatePickerContent v-if="!showMobileModal" :side-offset="6" :align="arrow ? 'center' : 'start'" :portal="portalProps" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
       <DatePickerCalendarBody v-bind="calendarBodyProps">
         <template #day="scope">
           <slot name="day" v-bind="scope" />
@@ -862,5 +870,5 @@ const buttonTriggerUi = computed(() => ({
       </template>
     </Modal>
   </DatePickerRoot>
-  <input ref="formAnchor" type="hidden" :name="formName" :form="form" :value="nativeFormValue">
+  <input ref="formAnchor" type="hidden" :name="formName" :form="form" :value="nativeFormValue" :disabled="disabled">
 </template>