@sewadah/selaras 0.2.0 → 0.3.1

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>

package/dist/runtime/components/DatePicker.vue.d.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/Dropdown.d.vue.ts

@@ -1,4 +1,6 @@
 import type { DropdownThemeSlots } from '../theme/dropdown.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface DropdownItem {
     label: string;
@@ -7,28 +9,53 @@ export interface DropdownItem {
     /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - just this one flag rather than the full color palette, since a menu item realistically only ever needs this one special case. */
     destructive?: boolean;
     onSelect?: () => void;
-    /** Not read by Dropdown'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;
+    /** Nuxt route or URL to navigate to instead of rendering an action item. */
+    to?: string;
+    /** Link target, for example `_blank`. */
+    target?: string;
+    rel?: string;
 }
 export interface DropdownProps {
     items: DropdownItem[][];
     open?: boolean;
     /** Initial visibility for an uncontrolled dropdown. Supplying `open` makes the parent authoritative. */
     defaultOpen?: boolean;
-    /** Shows a small pointer triangle connecting the menu to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Anchored menu placement. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
+    /** Opens a dialog-style action list on mobile instead of the anchored menu. */
+    adaptive?: boolean;
     ui?: UiProp<DropdownThemeSlots>;
 }
 export interface DropdownEmits {
     'update:open': [value: boolean];
 }
-declare var __VLS_16: {}, __VLS_48: {
+declare var __VLS_17: {}, __VLS_55: {
+    item: DropdownItem;
+}, __VLS_67: {
+    item: DropdownItem;
+}, __VLS_102: {
+    item: DropdownItem;
+}, __VLS_114: {
     item: DropdownItem;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    item?: (props: typeof __VLS_55) => any;
+} & {
+    item?: (props: typeof __VLS_67) => any;
+} & {
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    item?: (props: typeof __VLS_48) => any;
+    item?: (props: typeof __VLS_114) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/runtime/components/Dropdown.vue

@@ -1,14 +1,25 @@
 <script setup>
 import { DropdownMenuArrow, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from "reka-ui";
-import { computed, getCurrentInstance, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, ref, useId, watch, watchPostEffect } from "vue";
+import { NuxtLink } from "#components";
+import { useIsMobile } from "../composables/use-media-query";
+import { useMessages } from "../composables/use-messages";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { dropdownTheme } from "../theme/dropdown";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
+import Modal from "./Modal.vue";
 const props = defineProps({
   items: { type: Array, required: true },
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, 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 }
 });
 const emit = defineEmits(["update:open"]);
@@ -25,42 +36,163 @@ function onUpdateOpen(value) {
 }
 const theme = useComponentTheme("dropdown", dropdownTheme);
 const themeBindings = useThemeBindings();
+const messages = useMessages();
+const isMobile = useIsMobile();
+const modalId = `selaras-dropdown-modal-${useId()}`;
+const triggerElement = ref();
 const ui = computed(() => theme.value());
-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) }));
 function itemPropsFor(item) {
   return resolveSlot(theme.value({ destructive: item.destructive }).item, props.ui?.item);
 }
+function mobileItemPropsFor(item) {
+  return resolveSlot(theme.value({ destructive: item.destructive, mobile: true }).item, props.ui?.item);
+}
+const mobileListProps = computed(() => resolveSlot(ui.value.mobileList, props.ui?.mobileList));
+const mobileGroupProps = computed(() => resolveSlot(ui.value.mobileGroup, props.ui?.mobileGroup));
 function iconPropsFor(item) {
   return resolveSlot(theme.value({ destructive: item.destructive }).icon, props.ui?.icon);
 }
+function hotkeyFor(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut, when: () => internalOpen.value } : void 0;
+}
 const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+const mobilePresentation = ref(false);
+const isOpen = computed(() => isControlled ? props.open ?? false : internalOpen.value);
+watch(isOpen, (open) => {
+  if (open)
+    mobilePresentation.value = !!props.adaptive && isMobile.value;
+});
+onMounted(() => {
+  if (isOpen.value)
+    mobilePresentation.value = !!props.adaptive && isMobile.value;
+});
+function onUpdateMenuOpen(value) {
+  onUpdateOpen(value);
+}
+const desktopOpen = computed(() => isOpen.value && !mobilePresentation.value);
+const mobileOpen = computed(() => isOpen.value && mobilePresentation.value);
+const adaptiveUi = computed(() => ({
+  content: {
+    class: "rounded-[var(--selaras-resolved-radius-md)]",
+    id: modalId
+  }
+}));
+watchPostEffect(() => {
+  if (!props.adaptive)
+    return;
+  const element = triggerElement.value instanceof HTMLElement ? triggerElement.value : triggerElement.value?.$el;
+  if (!element)
+    return;
+  const dialog = isOpen.value ? mobilePresentation.value : isMobile.value;
+  element.setAttribute("aria-haspopup", dialog ? "dialog" : "menu");
+  element.setAttribute("aria-expanded", String(isOpen.value));
+  if (dialog && isOpen.value)
+    element.setAttribute("aria-controls", modalId);
+  else if (element.getAttribute("aria-controls") === modalId)
+    element.removeAttribute("aria-controls");
+});
+function selectMobileItem(item) {
+  item.onSelect?.();
+  onUpdateOpen(false);
+}
+function onModalAfterLeave() {
+  if (!isOpen.value)
+    mobilePresentation.value = false;
+}
 </script>
 
 <template>
-  <DropdownMenuRoot :open="internalOpen" @update:open="onUpdateOpen">
-    <DropdownMenuTrigger as-child>
+  <DropdownMenuRoot :open="desktopOpen" @update:open="onUpdateMenuOpen">
+    <DropdownMenuTrigger ref="triggerElement" as-child>
       <slot />
     </DropdownMenuTrigger>
-    <DropdownMenuPortal>
+    <DropdownMenuPortal v-if="!mobilePresentation" v-bind="portalProps">
       <DropdownMenuContent :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">
         <template v-for="(group, groupIndex) in items" :key="groupIndex">
           <DropdownMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
           <DropdownMenuItem
             v-for="(item, itemIndex) in group"
             :key="itemIndex"
+            v-hotkey="hotkeyFor(item)"
             :disabled="item.disabled"
+            :as-child="Boolean(item.to)"
             v-bind="itemPropsFor(item)"
             @select="item.onSelect?.()"
           >
-            <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
-            <slot name="item" :item="item">
-              {{ item.label }}
-            </slot>
+            <NuxtLink v-if="item.to" :to="item.to" :target="item.target" :rel="item.rel">
+              <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
+              <slot name="item" :item="item">
+                {{ item.label }}
+                <ShortcutHint :shortcut="item.shortcut" />
+              </slot>
+            </NuxtLink>
+            <template v-else>
+              <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
+              <slot name="item" :item="item">
+                {{ item.label }}
+                <ShortcutHint :shortcut="item.shortcut" />
+              </slot>
+            </template>
           </DropdownMenuItem>
         </template>
         <DropdownMenuArrow v-if="arrow" v-bind="arrowProps" />
       </DropdownMenuContent>
     </DropdownMenuPortal>
   </DropdownMenuRoot>
+
+  <Modal
+    v-if="mobilePresentation"
+    :open="mobileOpen"
+    :title="messages.dropdownMenu"
+    :description="messages.dropdownMenuDescription"
+    :close="false"
+    :ui="adaptiveUi"
+    @update:open="onUpdateOpen"
+    @after-leave="onModalAfterLeave"
+  >
+    <template #content>
+      <div v-bind="mobileListProps">
+        <template v-for="(group, groupIndex) in items" :key="groupIndex">
+          <div v-if="groupIndex > 0" role="separator" v-bind="separatorProps" />
+          <div v-bind="mobileGroupProps">
+            <template v-for="(item, itemIndex) in group" :key="itemIndex">
+              <!-- A disabled link renders as the disabled button below, which is inert. -->
+              <NuxtLink
+                v-if="item.to && !item.disabled"
+                v-hotkey="hotkeyFor(item)"
+                :to="item.to"
+                :target="item.target"
+                :rel="item.rel"
+                v-bind="mobileItemPropsFor(item)"
+                @click="selectMobileItem(item)"
+              >
+                <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
+                <slot name="item" :item="item">
+                  {{ item.label }}
+                  <ShortcutHint :shortcut="item.shortcut" />
+                </slot>
+              </NuxtLink>
+              <button
+                v-else
+                v-hotkey="hotkeyFor(item)"
+                type="button"
+                :disabled="item.disabled"
+                v-bind="mobileItemPropsFor(item)"
+                @click="selectMobileItem(item)"
+              >
+                <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
+                <slot name="item" :item="item">
+                  {{ item.label }}
+                  <ShortcutHint :shortcut="item.shortcut" />
+                </slot>
+              </button>
+            </template>
+          </div>
+        </template>
+      </div>
+    </template>
+  </Modal>
 </template>

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

@@ -1,4 +1,6 @@
 import type { DropdownThemeSlots } from '../theme/dropdown.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface DropdownItem {
     label: string;
@@ -7,28 +9,53 @@ export interface DropdownItem {
     /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - just this one flag rather than the full color palette, since a menu item realistically only ever needs this one special case. */
     destructive?: boolean;
     onSelect?: () => void;
-    /** Not read by Dropdown'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;
+    /** Nuxt route or URL to navigate to instead of rendering an action item. */
+    to?: string;
+    /** Link target, for example `_blank`. */
+    target?: string;
+    rel?: string;
 }
 export interface DropdownProps {
     items: DropdownItem[][];
     open?: boolean;
     /** Initial visibility for an uncontrolled dropdown. Supplying `open` makes the parent authoritative. */
     defaultOpen?: boolean;
-    /** Shows a small pointer triangle connecting the menu to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Anchored menu placement. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
+    /** Opens a dialog-style action list on mobile instead of the anchored menu. */
+    adaptive?: boolean;
     ui?: UiProp<DropdownThemeSlots>;
 }
 export interface DropdownEmits {
     'update:open': [value: boolean];
 }
-declare var __VLS_16: {}, __VLS_48: {
+declare var __VLS_17: {}, __VLS_55: {
+    item: DropdownItem;
+}, __VLS_67: {
+    item: DropdownItem;
+}, __VLS_102: {
+    item: DropdownItem;
+}, __VLS_114: {
     item: DropdownItem;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    item?: (props: typeof __VLS_55) => any;
+} & {
+    item?: (props: typeof __VLS_67) => any;
+} & {
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    item?: (props: typeof __VLS_48) => any;
+    item?: (props: typeof __VLS_114) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

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

@@ -6,6 +6,8 @@ export interface FileTreeNode {
     /** A node with children renders as a directory, one without as a file - the same convention ContentNavigation's own tree uses. */
     children?: FileTreeNode[];
     icon?: string;
+    /** Optional language hint for resolving a file-type icon when the filename is not recognized. */
+    language?: string;
 }
 export interface FileTreeProps {
     items: FileTreeNode[];

package/dist/runtime/components/FileTree.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, toRaw } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { fileTreeTheme } from "../theme/file-tree";
+import { resolveFileIcon } from "../utils/file-icons";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
@@ -31,11 +32,14 @@ function toggle(index) {
 function selectFile(node) {
   emit("update:selected", node);
 }
+function isSelected(node) {
+  return props.selected != null && toRaw(props.selected) === toRaw(node);
+}
 function iconFor(node, index) {
   if (node.icon)
     return node.icon;
   if (!node.children)
-    return icons.value.file;
+    return resolveFileIcon(node.language, node.name) ?? icons.value.file;
   return isExpanded(index) ? icons.value.folderOpen : icons.value.folder;
 }
 const theme = useComponentTheme("fileTree", fileTreeTheme);
@@ -46,14 +50,14 @@ const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
 const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
 function rowProps(node) {
-  return resolveSlot(theme.value({ isNested: props.isNested, selected: props.selected === node, color: effectiveColor.value }).row, props.ui?.row);
+  return resolveSlot(theme.value({ isNested: props.isNested, selected: isSelected(node), color: effectiveColor.value }).row, props.ui?.row);
 }
 </script>
 
 <template>
   <ul :data-selaras-color="effectiveColor" v-bind="rootProps">
     <li v-for="(node, index) in items" :key="node.name" v-bind="itemProps">
-      <button type="button" v-bind="rowProps(node)" @click="node.children ? toggle(index) : selectFile(node)">
+      <button type="button" :aria-current="isSelected(node) ? 'true' : void 0" v-bind="rowProps(node)" @click="node.children ? toggle(index) : selectFile(node)">
         <Icon :name="iconFor(node, index)" v-bind="iconProps" />
         <span v-bind="labelProps">{{ node.name }}</span>
       </button>

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

@@ -6,6 +6,8 @@ export interface FileTreeNode {
     /** A node with children renders as a directory, one without as a file - the same convention ContentNavigation's own tree uses. */
     children?: FileTreeNode[];
     icon?: string;
+    /** Optional language hint for resolving a file-type icon when the filename is not recognized. */
+    language?: string;
 }
 export interface FileTreeProps {
     items: FileTreeNode[];

package/dist/runtime/components/FileUpload.vue

@@ -202,7 +202,7 @@ const removeButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effec
 </script>
 
 <template>
-  <div :data-selaras-color="effectiveColor" v-bind="rootProps">
+  <div :data-selaras-color="fileUploadInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <button
       ref="dropzoneEl"
       type="button"

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

@@ -16,6 +16,10 @@ export interface FormFieldProps {
     size?: FormFieldVariants['size'];
     /** 'vertical' (default) stacks the label above the control; 'horizontal' places the label beside it, with the control filling the remaining row width. */
     orientation?: FormFieldVariants['orientation'];
+    /** 'floating' overlays the label on an empty control and lifts it on focus, open, or once filled. */
+    labelMode?: FormFieldVariants['labelMode'];
+    /** Explicit filled state for a custom or third-party control. */
+    filled?: boolean;
     ui?: UiProp<FormFieldThemeSlots>;
 }
 declare var __VLS_1: {}, __VLS_3: {