@sewadah/selaras 0.2.0 → 0.3.1

package/dist/runtime/components/FormField.vue

@@ -14,10 +14,13 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
+  labelMode: { type: null, required: false, default: "static" },
+  filled: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
 const id = props.id ?? useId();
 const invalid = computed(() => !!props.error);
+const floatingLabel = computed(() => props.labelMode === "floating");
 const errorMessage = computed(() => typeof props.error === "string" ? props.error : void 0);
 const describedBy = computed(() => {
   const ids = [
@@ -32,11 +35,16 @@ provideFormField({
   labelId: props.label ? `${id}-label` : void 0,
   name: props.name,
   size: props.size,
+  floatingLabel,
   invalid,
   describedBy
 });
 const theme = useComponentTheme("formField", formFieldTheme);
-const ui = computed(() => theme.value({ size: props.size, orientation: props.orientation }));
+const ui = computed(() => theme.value({
+  size: props.size,
+  orientation: floatingLabel.value ? "vertical" : props.orientation,
+  labelMode: props.labelMode
+}));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const bodyProps = computed(() => resolveSlot(ui.value.body, props.ui?.body));
 const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
@@ -49,10 +57,10 @@ const errorProps = computed(() => resolveSlot(ui.value.error, props.ui?.error));
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-label-mode="labelMode" :data-filled="filled || void 0" :data-invalid="invalid || void 0" v-bind="rootProps">
     <div v-bind="bodyProps">
-      <div v-bind="headerProps">
-        <label v-if="label" :id="`${id}-label`" :for="id" v-bind="labelProps">
+      <div v-if="description || label && !floatingLabel" v-bind="headerProps">
+        <label v-if="label && !floatingLabel" :id="`${id}-label`" :for="id" v-bind="labelProps">
           {{ label }}<span v-if="required" v-bind="requiredProps">*</span>
         </label>
         <p v-if="description" :id="`${id}-description`" v-bind="descriptionProps">
@@ -62,6 +70,9 @@ const errorProps = computed(() => resolveSlot(ui.value.error, props.ui?.error));
         </p>
       </div>
       <div v-bind="containerProps">
+        <label v-if="label && floatingLabel" :id="`${id}-label`" :for="id" data-selaras-floating-label v-bind="labelProps">
+          {{ label }}<span v-if="required" v-bind="requiredProps">*</span>
+        </label>
         <slot :id="id" :invalid="invalid" :described-by="describedBy" />
       </div>
     </div>
@@ -73,3 +84,7 @@ const errorProps = computed(() => resolveSlot(ui.value.error, props.ui?.error));
     </p>
   </div>
 </template>
+
+<style scoped>
+[data-selaras-label-mode=floating] [data-selaras-floating-label]{background:var(--selaras-resolved-surface-default);color:var(--selaras-resolved-text-muted);inset-inline-start:.75rem;line-height:1.2;max-width:calc(100% - 1.5rem);overflow:hidden;padding-inline:.25rem;pointer-events:none;position:absolute;text-overflow:ellipsis;top:50%;transform:translateY(-50%);transition:top .15s ease,color .15s ease,font-size .15s ease;white-space:nowrap;z-index:11}[data-selaras-label-mode=floating]:has(textarea) [data-selaras-floating-label]{top:1.1rem}[data-selaras-label-mode=floating]:has(:deep([data-selaras-field-leading])) [data-selaras-floating-label]{inset-inline-start:2.25rem;max-width:calc(100% - 3rem)}[data-selaras-label-mode=floating]:is(:focus-within,[data-filled],:has([data-selaras-field-segmented],[data-selaras-field-filled],[data-selaras-field-active],[data-ui-group-item]:is(input,textarea):not(:-moz-placeholder))) [data-selaras-floating-label]{color:var(--selaras-resolved-text-default);font-size:.75rem;top:0}[data-selaras-label-mode=floating]:is(:focus-within,[data-filled],:has([data-selaras-field-segmented],[data-selaras-field-filled],[data-selaras-field-active],[data-ui-group-item]:is(input,textarea):not(:placeholder-shown))) [data-selaras-floating-label]{color:var(--selaras-resolved-text-default);font-size:.75rem;top:0}[data-selaras-label-mode=floating][data-invalid] [data-selaras-floating-label]{color:var(--selaras-resolved-color-danger-text)}[data-selaras-label-mode=floating] :deep(:is(input,textarea)::-moz-placeholder){color:transparent}[data-selaras-label-mode=floating] :deep(:is(input,textarea)::placeholder){color:transparent}[data-selaras-label-mode=floating] :deep(:is(input,textarea):focus::-moz-placeholder){color:var(--selaras-resolved-text-muted)}[data-selaras-label-mode=floating] :deep(:is(input,textarea):focus::placeholder){color:var(--selaras-resolved-text-muted)}[data-selaras-label-mode=floating]:not(:has([data-selaras-field-segmented])) :deep([data-placeholder]){visibility:hidden}[data-selaras-label-mode=floating]:focus-within :deep([data-placeholder]){visibility:visible}@media (prefers-reduced-motion:reduce){[data-selaras-label-mode=floating] [data-selaras-floating-label]{transition:none}}
+</style>

package/dist/runtime/components/FormField.vue.d.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: {

package/dist/runtime/components/Input.vue

@@ -27,6 +27,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const field = useFormField();
+const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const inputId = computed(() => props.id ?? field?.id);
 const inputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
@@ -57,7 +58,7 @@ const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.v
 </script>
 
 <template>
-  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
+  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon ? '' : void 0" v-bind="rootProps">
     <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <input
       :id="inputId"
@@ -65,7 +66,7 @@ const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.v
       :value="modelValue"
       :type="type"
       :name="name ?? field?.name"
-      :placeholder="placeholder"
+      :placeholder="effectivePlaceholder"
       :disabled="disabled"
       :aria-invalid="inputInvalid || void 0"
       :aria-describedby="describedBy"

package/dist/runtime/components/Kbd.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { kbdTheme } from "../theme/kbd";
 import { useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
@@ -8,6 +8,10 @@ const props = defineProps({
   size: { type: null, required: false },
   ui: { type: Object, required: false }
 });
+const isMacPlatform = ref(false);
+onMounted(() => {
+  isMacPlatform.value = /mac|iphone|ipad|ipod/i.test(navigator.platform || "");
+});
 const KEY_SYMBOLS = {
   meta: "\u2318",
   command: "\u2318",
@@ -31,7 +35,13 @@ const KEY_SYMBOLS = {
   right: "\u2192",
   space: "Space"
 };
-const resolvedValue = computed(() => props.value ? KEY_SYMBOLS[props.value.toLowerCase()] ?? props.value : void 0);
+const resolvedValue = computed(() => {
+  if (!props.value)
+    return void 0;
+  if (props.value.toLowerCase() === "mod")
+    return isMacPlatform.value ? KEY_SYMBOLS.meta : KEY_SYMBOLS.ctrl;
+  return KEY_SYMBOLS[props.value.toLowerCase()] ?? props.value;
+});
 const theme = useComponentTheme("kbd", kbdTheme);
 const ui = computed(() => theme.value({ size: props.size }));
 const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);

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

@@ -45,19 +45,19 @@ declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
 }, __VLS_124: string, __VLS_125: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_142: string, __VLS_143: {
+}, __VLS_147: string, __VLS_148: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_146: string, __VLS_147: {
+}, __VLS_151: string, __VLS_152: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_155: string, __VLS_156: {
+}, __VLS_160: string, __VLS_161: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_159: string, __VLS_160: {
+}, __VLS_164: string, __VLS_165: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_162: {};
+}, __VLS_172: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
 } & {
@@ -83,17 +83,17 @@ type __VLS_Slots = {} & {
 } & {
     [K in NonNullable<typeof __VLS_124>]?: (props: typeof __VLS_125) => any;
 } & {
-    [K in NonNullable<typeof __VLS_142>]?: (props: typeof __VLS_143) => any;
+    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
 } & {
-    [K in NonNullable<typeof __VLS_146>]?: (props: typeof __VLS_147) => any;
+    [K in NonNullable<typeof __VLS_151>]?: (props: typeof __VLS_152) => any;
 } & {
-    [K in NonNullable<typeof __VLS_155>]?: (props: typeof __VLS_156) => any;
+    [K in NonNullable<typeof __VLS_160>]?: (props: typeof __VLS_161) => any;
 } & {
-    [K in NonNullable<typeof __VLS_159>]?: (props: typeof __VLS_160) => any;
+    [K in NonNullable<typeof __VLS_164>]?: (props: typeof __VLS_165) => any;
 } & {
     'list-leading'?: (props: typeof __VLS_8) => any;
 } & {
-    'list-trailing'?: (props: typeof __VLS_162) => any;
+    'list-trailing'?: (props: typeof __VLS_172) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavigationMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/NavigationMenu.vue

@@ -12,8 +12,10 @@ import { computed, ref, useSlots } from "vue";
 import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
 import { useIcons } from "../composables/use-icons";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 import Icon from "./Icon.vue";
@@ -120,9 +122,10 @@ function onSelect(item, event) {
                   <li v-for="child in item.children" :key="child.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
                     <NavigationMenuLink as-child :active="isActive(child)">
                       <component
-                        :is="child.to ? NuxtLink : 'button'" :to="child.to" :type="child.to ? void 0 : 'button'"
-                        :disabled="child.to ? void 0 : child.disabled" v-bind="childLinkProps(child)"
-                        :aria-disabled="child.to && child.disabled ? 'true' : void 0" @click="onSelect(child, $event)"
+                        :is="child.to ? NuxtLink : 'button'" v-hotkey="navigationMenuHotkey(child)" :to="child.to"
+                        :type="child.to ? void 0 : 'button'" :disabled="child.to ? void 0 : child.disabled"
+                        v-bind="childLinkProps(child)" :target="child.target" :rel="child.rel"
+                        :aria-label="child.ariaLabel" :aria-disabled="child.to && child.disabled ? 'true' : void 0" @click="onSelect(child, $event)"
                       >
                         <slot :name="slotName(child, '')" :item="child" :active="isActive(child)">
                           <slot :name="slotName(child, '-leading')" :item="child" :active="isActive(child)">
@@ -132,6 +135,7 @@ function onSelect(item, event) {
                             <span v-bind="resolveSlot(ui.childLinkLabel, props.ui?.childLinkLabel)">{{ child.label }}</span>
                           </slot>
                           <slot :name="slotName(child, '-trailing')" :item="child" :active="isActive(child)" />
+                          <ShortcutHint :shortcut="child.shortcut" />
                         </slot>
                       </component>
                     </NavigationMenuLink>
@@ -142,9 +146,10 @@ function onSelect(item, event) {
           </template>
           <NavigationMenuLink v-else as-child :active="isActive(item)">
             <component
-              :is="item.to ? NuxtLink : 'button'" :to="item.to" :type="item.to ? void 0 : 'button'"
-              :disabled="item.to ? void 0 : item.disabled" v-bind="linkProps(item)"
-              :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
+              :is="item.to ? NuxtLink : 'button'" v-hotkey="navigationMenuHotkey(item)" :to="item.to"
+              :type="item.to ? void 0 : 'button'" :disabled="item.to ? void 0 : item.disabled"
+              v-bind="linkProps(item)" :target="item.target" :rel="item.rel"
+              :aria-label="item.ariaLabel" :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
             >
               <slot :name="slotName(item, '')" :item="item" :active="isActive(item)">
                 <slot :name="slotName(item, '-leading')" :item="item" :active="isActive(item)">
@@ -155,6 +160,7 @@ function onSelect(item, event) {
                   <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
                 </slot>
                 <slot :name="slotName(item, '-trailing')" :item="item" :active="isActive(item)" />
+                <ShortcutHint :shortcut="collapsed ? void 0 : item.shortcut" />
               </slot>
             </component>
           </NavigationMenuLink>

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

@@ -45,19 +45,19 @@ declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
 }, __VLS_124: string, __VLS_125: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_142: string, __VLS_143: {
+}, __VLS_147: string, __VLS_148: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_146: string, __VLS_147: {
+}, __VLS_151: string, __VLS_152: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_155: string, __VLS_156: {
+}, __VLS_160: string, __VLS_161: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_159: string, __VLS_160: {
+}, __VLS_164: string, __VLS_165: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_162: {};
+}, __VLS_172: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
 } & {
@@ -83,17 +83,17 @@ type __VLS_Slots = {} & {
 } & {
     [K in NonNullable<typeof __VLS_124>]?: (props: typeof __VLS_125) => any;
 } & {
-    [K in NonNullable<typeof __VLS_142>]?: (props: typeof __VLS_143) => any;
+    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
 } & {
-    [K in NonNullable<typeof __VLS_146>]?: (props: typeof __VLS_147) => any;
+    [K in NonNullable<typeof __VLS_151>]?: (props: typeof __VLS_152) => any;
 } & {
-    [K in NonNullable<typeof __VLS_155>]?: (props: typeof __VLS_156) => any;
+    [K in NonNullable<typeof __VLS_160>]?: (props: typeof __VLS_161) => any;
 } & {
-    [K in NonNullable<typeof __VLS_159>]?: (props: typeof __VLS_160) => any;
+    [K in NonNullable<typeof __VLS_164>]?: (props: typeof __VLS_165) => any;
 } & {
     'list-leading'?: (props: typeof __VLS_8) => any;
 } & {
-    'list-trailing'?: (props: typeof __VLS_162) => any;
+    'list-trailing'?: (props: typeof __VLS_172) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavigationMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/NavigationMenuAccordionItem.vue

@@ -2,8 +2,10 @@
 import { computed, useId, useSlots } from "vue";
 import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 import Accordion from "./Accordion.vue";
@@ -83,6 +85,7 @@ function onSelect(item, event) {
             <component
               :is="child.to ? NuxtLink : 'button'"
               v-else
+              v-hotkey="navigationMenuHotkey(child)"
               :to="child.to"
               :type="child.to ? void 0 : 'button'"
               :disabled="child.to ? void 0 : child.disabled"
@@ -98,6 +101,7 @@ function onSelect(item, event) {
                   <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ child.label }}</span>
                 </slot>
                 <slot :name="slotName(child, '-trailing')" :item="child" :active="isActive(child)" />
+                <ShortcutHint :shortcut="child.shortcut" />
               </slot>
             </component>
           </li>

package/dist/runtime/components/NavigationMenuFlyoutList.vue

@@ -2,8 +2,10 @@
 import { computed } from "vue";
 import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
@@ -35,12 +37,13 @@ function linkProps(item) {
     <li v-for="item in items" :key="item.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
       <NavigationMenuAccordionItem v-if="item.children?.length" :item="item" :color="color" :variant="variant" :highlight="highlight" :ui="props.ui" />
       <component
-        :is="item.to ? NuxtLink : 'button'" v-else :to="item.to" :type="item.to ? void 0 : 'button'"
-        :disabled="item.to ? void 0 : item.disabled" v-bind="linkProps(item)"
-        :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
+        :is="item.to ? NuxtLink : 'button'" v-else v-hotkey="navigationMenuHotkey(item)" :to="item.to"
+        :type="item.to ? void 0 : 'button'" :disabled="item.to ? void 0 : item.disabled"
+        v-bind="linkProps(item)" :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
       >
         <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
         <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+        <ShortcutHint :shortcut="item.shortcut" />
       </component>
     </li>
   </ul>

package/dist/runtime/components/PinInput.vue

@@ -60,7 +60,7 @@ const inputProps = computed(() => mergeProps(resolveSlot(ui.value.input, props.u
     :aria-invalid="pinInputInvalid || void 0"
     :aria-describedby="describedBy"
     :aria-labelledby="labelledBy"
-    :data-selaras-color="effectiveColor"
+    :data-selaras-color="pinInputInvalid ? 'danger' : effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
     @complete="(value) => emit('complete', value)"

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

@@ -1,4 +1,6 @@
 import type { PopoverThemeSlots } from '../theme/popover.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 PopoverProps {
     open?: boolean;
@@ -6,14 +8,18 @@ export interface PopoverProps {
     defaultOpen?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
+    /** Anchored panel positioning. Overrides `side` and `align` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render the panel inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     /** Forwarded to Reka UI's own PopoverRoot `modal` prop - `true` traps focus and blocks interaction with the rest of the page, like a lightweight modal dialog. */
     modal?: boolean;
     /** When `false`, Escape and an outside click (or, since a popover is non-modal by default, an outside element merely receiving focus) no longer close the popover - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire, so a consumer can still react, but none of them close it on their own anymore. */
     dismissible?: boolean;
     /** When `false`, closing the popover no longer returns keyboard focus to its trigger. Reka does this by default regardless of *why* the popover closed, including a purely programmatic `open` change - which matters for a popover that can open via hover rather than a deliberate click/keypress: focus landing back on a trigger nobody meant to focus can itself count as focus moving "outside" whatever *other* popover the pointer has since moved on to, closing that one too. Defaults to `true`, matching Reka's own out-of-the-box behavior. */
     returnFocusOnClose?: boolean;
-    /** Shows the little pointer triangle connecting the popover to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
     ui?: UiProp<PopoverThemeSlots>;
 }
 export interface PopoverEmits {

package/dist/runtime/components/Popover.vue

@@ -2,16 +2,20 @@
 import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
 import { computed, getCurrentInstance, ref, watch } from "vue";
 import { popoverTheme } from "../theme/popover";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
   side: { type: String, required: false, default: "bottom" },
   align: { type: String, required: false, default: "center" },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   modal: { type: Boolean, required: false, default: false },
   dismissible: { type: Boolean, required: false, default: true },
   returnFocusOnClose: { type: Boolean, required: false, default: true },
-  arrow: { type: Boolean, required: false, default: false },
+  arrow: { type: [Boolean, Object], required: false, default: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:open", "escapeKeyDown", "pointerDownOutside", "focusOutside", "openAutoFocus"]);
@@ -41,8 +45,9 @@ function onOpenAutoFocus(event) {
 const theme = useComponentTheme("popover", popoverTheme);
 const themeBindings = useThemeBindings();
 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) }));
 const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
 const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
 watch(() => props.open, (value) => {
@@ -61,7 +66,7 @@ function onUpdateOpen(value) {
     <PopoverTrigger v-if="$slots.default" as-child>
       <slot />
     </PopoverTrigger>
-    <PopoverPortal>
+    <PopoverPortal v-bind="portalProps">
       <PopoverContent
         :data-selaras-theme="themeBindings['data-selaras-theme']"
         :data-selaras-mode="themeBindings['data-selaras-mode']"

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

@@ -1,4 +1,6 @@
 import type { PopoverThemeSlots } from '../theme/popover.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 PopoverProps {
     open?: boolean;
@@ -6,14 +8,18 @@ export interface PopoverProps {
     defaultOpen?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
+    /** Anchored panel positioning. Overrides `side` and `align` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render the panel inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     /** Forwarded to Reka UI's own PopoverRoot `modal` prop - `true` traps focus and blocks interaction with the rest of the page, like a lightweight modal dialog. */
     modal?: boolean;
     /** When `false`, Escape and an outside click (or, since a popover is non-modal by default, an outside element merely receiving focus) no longer close the popover - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire, so a consumer can still react, but none of them close it on their own anymore. */
     dismissible?: boolean;
     /** When `false`, closing the popover no longer returns keyboard focus to its trigger. Reka does this by default regardless of *why* the popover closed, including a purely programmatic `open` change - which matters for a popover that can open via hover rather than a deliberate click/keypress: focus landing back on a trigger nobody meant to focus can itself count as focus moving "outside" whatever *other* popover the pointer has since moved on to, closing that one too. Defaults to `true`, matching Reka's own out-of-the-box behavior. */
     returnFocusOnClose?: boolean;
-    /** Shows the little pointer triangle connecting the popover to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
     ui?: UiProp<PopoverThemeSlots>;
 }
 export interface PopoverEmits {

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

@@ -2,12 +2,16 @@ export interface ProsePreProps {
     code?: string;
     language?: string;
     filename?: string;
+    /** Overrides the file-type icon resolved from `filename`/`language`. */
+    icon?: string;
+    /** Renders the metadata and copy row above the code. @default true */
+    showHeader?: boolean;
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_13: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ProsePre.vue

@@ -2,18 +2,23 @@
 import { computed, ref } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { proseTheme } from "../theme/prose";
+import { resolveFileIcon } from "../utils/file-icons";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Badge from "./Badge.vue";
 import Button from "./Button.vue";
+import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   code: { type: String, required: false },
   language: { type: String, required: false },
   filename: { type: String, required: false },
+  icon: { type: String, required: false },
+  showHeader: { type: Boolean, required: false, default: true },
   highlights: { type: Array, required: false },
   meta: { type: String, required: false }
 });
 const icons = useIcons();
+const fileIcon = computed(() => props.icon ?? resolveFileIcon(props.language, props.filename));
 const theme = useComponentTheme("prose", proseTheme);
 const ui = computed(() => theme.value());
 const preProps = useRootProps(() => ui.value.pre, () => void 0);
@@ -31,10 +36,12 @@ async function copy() {
 
 <template>
   <div v-bind="resolveSlot(ui.preWrapper, void 0)">
-    <div v-if="filename || language || code" v-bind="resolveSlot(ui.preHeader, void 0)">
-      <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
-      <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
-      <span v-else />
+    <div v-if="showHeader && (filename || language || code)" v-bind="resolveSlot(ui.preHeader, void 0)">
+      <span v-bind="resolveSlot(ui.preLabel, void 0)">
+        <Icon v-if="fileIcon" :name="fileIcon" v-bind="resolveSlot(ui.preIcon, void 0)" />
+        <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
+        <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
+      </span>
       <Button
         v-if="code"
         v-bind="resolveSlot(ui.preCopyButton, void 0)"

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

@@ -2,12 +2,16 @@ export interface ProsePreProps {
     code?: string;
     language?: string;
     filename?: string;
+    /** Overrides the file-type icon resolved from `filename`/`language`. */
+    icon?: string;
+    /** Renders the metadata and copy row above the code. @default true */
+    showHeader?: boolean;
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_13: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Select.vue

@@ -29,7 +29,9 @@ const props = defineProps({
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
-  arrow: { 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 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });

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

@@ -37,13 +37,13 @@ declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {
     isCollapsed: import("vue").ComputedRef<boolean>;
     isExpanded: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
     resize: (size: number) => any;
     collapse: () => any;
-    expand: () => any;
 }, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
+    onExpand?: (() => any) | undefined;
     onResize?: ((size: number) => any) | undefined;
     onCollapse?: (() => any) | undefined;
-    onExpand?: (() => 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/SplitterPanel.vue.d.ts

@@ -37,13 +37,13 @@ declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {
     isCollapsed: import("vue").ComputedRef<boolean>;
     isExpanded: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
     resize: (size: number) => any;
     collapse: () => any;
-    expand: () => any;
 }, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
+    onExpand?: (() => any) | undefined;
     onResize?: ((size: number) => any) | undefined;
     onCollapse?: (() => any) | undefined;
-    onExpand?: (() => 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;