@sewadah/selaras 0.9.0 → 0.10.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -14,6 +14,8 @@ export interface CheckboxProps {
     disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
+    /** Renders only the visual indicator, without a focus target, form input, or inherited FormField state. Selection is owned by the surrounding control. */
+    decorative?: boolean;
     size?: CheckboxVariants['size'];
     color?: ColorRole;
     /** `card` wraps the checkbox and label in a bordered box, highlighted when checked - the same treatment RadioGroup's own `card` variant already applies per item. */
@@ -23,13 +25,13 @@ export interface CheckboxProps {
 export interface CheckboxEmits {
     'update:modelValue': [value: boolean | 'indeterminate'];
 }
-declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+declare var __VLS_20: {}, __VLS_22: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_20) => any;
 } & {
-    description?: (props: typeof __VLS_17) => any;
+    description?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | "indeterminate") => any;

package/dist/runtime/components/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
-import { computed } from "vue";
+import { computed, mergeProps } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { checkboxTheme } from "../theme/checkbox";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
@@ -15,17 +15,19 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   invalid: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  decorative: { type: Boolean, required: false },
   size: { type: null, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
-const field = useFormField();
-const checkboxId = computed(() => props.id ?? field?.id);
-const checkboxInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
-const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
-const describedBy = computed(() => field?.describedBy.value);
+const inheritedField = useFormField();
+const field = computed(() => props.decorative ? void 0 : inheritedField);
+const checkboxId = computed(() => props.id ?? field.value?.id);
+const checkboxInvalid = computed(() => props.invalid || (field.value?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field.value?.size ?? "md");
+const describedBy = computed(() => field.value?.describedBy.value);
 const theme = useComponentTheme("checkbox", checkboxTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -43,28 +45,34 @@ const descriptionProps = computed(() => resolveSlot(ui.value.description, props.
 const checkIconProps = computed(() => resolveSlot(ui.value.checkIcon, props.ui?.checkIcon));
 const indeterminateIconProps = computed(() => resolveSlot(ui.value.indeterminateIcon, props.ui?.indeterminateIcon));
 const glyphState = computed(() => props.modelValue === "indeterminate" ? "indeterminate" : props.modelValue ? "checked" : "unchecked");
+const controlProps = computed(() => props.decorative ? {
+  ...boxProps.value,
+  "data-state": glyphState.value,
+  "data-disabled": props.disabled ? "" : void 0
+} : mergeProps({
+  "id": checkboxId.value,
+  "modelValue": props.modelValue,
+  "name": props.name ?? field.value?.name,
+  "disabled": props.disabled,
+  "required": props.required,
+  "aria-invalid": checkboxInvalid.value || void 0,
+  "aria-describedby": describedBy.value
+}, boxProps.value, {
+  "onUpdate:modelValue": (value) => emit("update:modelValue", value)
+}));
+const visualIndicatorProps = computed(() => props.decorative ? { "data-state": glyphState.value, "data-disabled": props.disabled ? "" : void 0, ...indicatorProps.value } : { forceMount: true, ...indicatorProps.value });
 </script>
 
 <template>
-  <label :data-selaras-color="checkboxInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
-    <CheckboxRoot
-      :id="checkboxId"
-      :model-value="modelValue"
-      :name="name ?? field?.name"
-      :disabled="disabled"
-      :required="required"
-      :aria-invalid="checkboxInvalid || void 0"
-      :aria-describedby="describedBy"
-      v-bind="boxProps"
-      @update:model-value="(value) => emit('update:modelValue', value)"
-    >
-      <CheckboxIndicator force-mount v-bind="indicatorProps">
+  <component :is="decorative ? 'span' : 'label'" :data-selaras-color="checkboxInvalid ? 'danger' : effectiveColor" v-bind="rootProps" :aria-hidden="decorative ? true : rootProps['aria-hidden']">
+    <component :is="decorative ? 'span' : CheckboxRoot" v-bind="controlProps">
+      <component :is="decorative ? 'span' : CheckboxIndicator" v-bind="visualIndicatorProps">
         <svg viewBox="0 0 24 24" :class="applyClassPrefix('size-full')" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
           <path d="M5 13l4 4L19 7" :data-state="glyphState" v-bind="checkIconProps" />
           <path d="M5 12h14" :data-state="glyphState" v-bind="indeterminateIconProps" />
         </svg>
-      </CheckboxIndicator>
-    </CheckboxRoot>
+      </component>
+    </component>
     <span v-if="description" v-bind="labelGroupProps">
       <span v-if="label || $slots.default" v-bind="labelProps"><slot>{{ label }}</slot></span>
       <span v-bind="descriptionProps">
@@ -74,5 +82,5 @@ const glyphState = computed(() => props.modelValue === "indeterminate" ? "indete
     <span v-else-if="label || $slots.default" v-bind="labelProps">
       <slot>{{ label }}</slot>
     </span>
-  </label>
+  </component>
 </template>

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

@@ -14,6 +14,8 @@ export interface CheckboxProps {
     disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
+    /** Renders only the visual indicator, without a focus target, form input, or inherited FormField state. Selection is owned by the surrounding control. */
+    decorative?: boolean;
     size?: CheckboxVariants['size'];
     color?: ColorRole;
     /** `card` wraps the checkbox and label in a bordered box, highlighted when checked - the same treatment RadioGroup's own `card` variant already applies per item. */
@@ -23,13 +25,13 @@ export interface CheckboxProps {
 export interface CheckboxEmits {
     'update:modelValue': [value: boolean | 'indeterminate'];
 }
-declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+declare var __VLS_20: {}, __VLS_22: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_20) => any;
 } & {
-    description?: (props: typeof __VLS_17) => any;
+    description?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | "indeterminate") => any;

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

@@ -69,7 +69,7 @@ export interface DatePickerProps {
     isYearDisabled?: (year: number) => boolean;
     invalid?: boolean;
     clearable?: boolean;
-    /** Chrome color - the clear/trigger buttons and prev/next month nav. Only the color changes; each button keeps its own deliberately-different variant (icon-only buttons use `text`, nav arrows use `ghost`). */
+    /** Chrome color for trigger buttons and calendar navigation. Clear controls remain neutral. */
     color?: ColorRole;
     /** The color of whatever's currently "active" - the selected day/month/year cell and the Done button. */
     activeColor?: ColorRole;
@@ -90,7 +90,7 @@ export interface DatePickerEmits {
     'update:modelValue': [value: DateValue | DateRange | Time | undefined];
     'update:view': [view: 'date' | 'month' | 'year'];
 }
-declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
+declare var __VLS_43: {}, __VLS_58: {}, __VLS_80: {}, __VLS_96: {}, __VLS_111: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
@@ -98,7 +98,7 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_122: {}, __VLS_145: {
+}, __VLS_114: {}, __VLS_137: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
@@ -106,61 +106,61 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_148: {}, __VLS_187: {}, __VLS_207: {}, __VLS_227: {}, __VLS_243: {}, __VLS_269: {}, __VLS_292: {}, __VLS_330: {}, __VLS_350: {}, __VLS_370: {}, __VLS_386: {}, __VLS_406: {
+}, __VLS_140: {}, __VLS_179: {}, __VLS_194: {}, __VLS_216: {}, __VLS_232: {}, __VLS_253: {}, __VLS_276: {}, __VLS_314: {}, __VLS_329: {}, __VLS_351: {}, __VLS_367: {}, __VLS_382: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_409: {}, __VLS_432: {
+}, __VLS_385: {}, __VLS_408: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_435: {};
+}, __VLS_411: {};
 type __VLS_Slots = {} & {
     'clear-icon'?: (props: typeof __VLS_43) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_63) => any;
+    'trigger-icon'?: (props: typeof __VLS_58) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_83) => any;
+    'trigger-icon'?: (props: typeof __VLS_80) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_99) => any;
+    'clear-icon'?: (props: typeof __VLS_96) => any;
 } & {
-    day?: (props: typeof __VLS_119) => any;
+    day?: (props: typeof __VLS_111) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    footer?: (props: typeof __VLS_114) => any;
 } & {
-    day?: (props: typeof __VLS_145) => any;
+    day?: (props: typeof __VLS_137) => any;
 } & {
-    footer?: (props: typeof __VLS_148) => any;
+    footer?: (props: typeof __VLS_140) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_187) => any;
+    'clear-icon'?: (props: typeof __VLS_179) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_207) => any;
+    'trigger-icon'?: (props: typeof __VLS_194) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_227) => any;
+    'trigger-icon'?: (props: typeof __VLS_216) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_243) => any;
+    'clear-icon'?: (props: typeof __VLS_232) => any;
 } & {
-    footer?: (props: typeof __VLS_269) => any;
+    footer?: (props: typeof __VLS_253) => any;
 } & {
-    footer?: (props: typeof __VLS_292) => any;
+    footer?: (props: typeof __VLS_276) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_330) => any;
+    'clear-icon'?: (props: typeof __VLS_314) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_350) => any;
+    'trigger-icon'?: (props: typeof __VLS_329) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_370) => any;
+    'trigger-icon'?: (props: typeof __VLS_351) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_386) => any;
+    'clear-icon'?: (props: typeof __VLS_367) => any;
 } & {
-    day?: (props: typeof __VLS_406) => any;
+    day?: (props: typeof __VLS_382) => any;
 } & {
-    footer?: (props: typeof __VLS_409) => any;
+    footer?: (props: typeof __VLS_385) => any;
 } & {
-    day?: (props: typeof __VLS_432) => any;
+    day?: (props: typeof __VLS_408) => any;
 } & {
-    footer?: (props: typeof __VLS_435) => any;
+    footer?: (props: typeof __VLS_411) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;

package/dist/runtime/components/DatePicker.vue

@@ -24,7 +24,7 @@ import {
   TimeFieldInput,
   TimeFieldRoot
 } from "reka-ui";
-import { computed, getCurrentInstance, onMounted, onUnmounted, ref, shallowRef, useId, watch } from "vue";
+import { computed, getCurrentInstance, mergeProps, nextTick, onMounted, onUnmounted, ref, shallowRef, useId, watch } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useLocale } from "../composables/use-locale";
@@ -33,8 +33,10 @@ import { useMessages } from "../composables/use-messages";
 import DatePickerCalendarBody from "../internal/DatePickerCalendarBody.vue";
 import DatePickerRangeCalendarBody from "../internal/DatePickerRangeCalendarBody.vue";
 import DatePickerTimeBody from "../internal/DatePickerTimeBody.vue";
+import FieldClearButton from "../internal/FieldClearButton.vue";
 import { datePickerTheme } from "../theme/date-picker";
 import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { canClearField, fieldClearWidths } from "../utils/field-clear";
 import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
@@ -137,8 +139,18 @@ const effectiveNumberOfMonths = computed(() => props.numberOfMonths ?? (props.ra
 const singleModelValue = computed(() => props.range ? void 0 : modelValue.value);
 const rangeModelValue = computed(() => props.range ? modelValue.value : void 0);
 const hasValue = computed(() => props.range ? !!modelValue.value?.start : !!modelValue.value);
-function clear() {
+const showClear = computed(() => canClearField(props.clearable, props.range ? !!(modelValue.value?.start || modelValue.value?.end) : !!modelValue.value, props.disabled, props.readonly));
+const fieldElement = ref();
+const buttonTrigger = ref();
+async function clear() {
+  if (!showClear.value)
+    return;
   updateModelValue(props.range ? { start: void 0, end: void 0 } : void 0);
+  await nextTick();
+  if (props.triggerMode === "button")
+    buttonTrigger.value?.$el?.focus();
+  else
+    fieldElement.value?.querySelector("[role=spinbutton]")?.focus();
 }
 const defaultView = computed(() => {
   if (props.granularity === "month" || props.granularity === "year")
@@ -364,6 +376,10 @@ 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 clearProps = computed(() => resolveSlot(ui.value.clear, props.ui?.clear));
+const buttonClearProps = computed(() => resolveSlot(ui.value.buttonClear, props.ui?.buttonClear));
+const triggerIconProps = computed(() => resolveSlot(ui.value.triggerIcon, props.ui?.triggerIcon));
+const buttonLabelStyle = computed(() => showClear.value ? { paddingInlineEnd: `calc(${fieldClearWidths[effectiveSize.value]} + 0.25rem)` } : void 0);
 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) }));
@@ -451,10 +467,7 @@ const timeBodyProps = computed(() => ({
 const buttonTriggerUi = computed(() => ({
   base: [
     "w-full justify-start rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)]",
-    datePickerInvalid.value ? "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)]" : void 0,
-    // Room for the clear button, which sits absolutely positioned on top of
-    // this same end edge - without it, a long formatted date can run under it.
-    props.clearable && hasValue.value ? "pe-8" : void 0
+    datePickerInvalid.value ? "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)]" : void 0
   ].filter(Boolean).join(" "),
   // base is justify-start (text left-aligned, not centered) so the button
   // reads naturally for a short date string - without its own auto margin,
@@ -497,7 +510,7 @@ const buttonTriggerUi = computed(() => ({
     @update:model-value="(value) => updateModelValue(value)"
   >
     <DateRangePickerAnchor as-child>
-      <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">
+      <div v-if="triggerMode === 'field'" ref="fieldElement" 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">
@@ -512,22 +525,13 @@ const buttonTriggerUi = computed(() => ({
           </template>
         </DateRangePickerField>
         <div :class="applyClassPrefix('ms-auto flex shrink-0 items-center gap-1')">
-          <Button
-            v-if="clearable && hasValue"
-            variant="text"
-            :color="color"
-            :size="iconButtonSize"
-            :aria-label="messages.clear"
-            @click="clear"
-          >
-            <template #icon="{ class: iconClass }">
-              <slot name="clear-icon">
-                <Icon :name="icons.close" :class="iconClass" />
-              </slot>
+          <FieldClearButton v-if="showClear" :size="effectiveSize" v-bind="clearProps" @click.stop="clear">
+            <template v-if="$slots['clear-icon']" #default>
+              <slot name="clear-icon" />
             </template>
-          </Button>
+          </FieldClearButton>
           <DateRangePickerTrigger as-child>
-            <Button variant="text" :color="color" :size="iconButtonSize" :aria-label="messages.dateRangePicker">
+            <Button variant="text" :color="color" :size="iconButtonSize" :ui="{ leadingIcon: triggerIconProps }" :aria-label="messages.dateRangePicker">
               <template #icon="{ class: iconClass }">
                 <slot name="trigger-icon">
                   <Icon :name="icons.calendar" :class="iconClass" />
@@ -542,6 +546,7 @@ const buttonTriggerUi = computed(() => ({
         <DateRangePickerTrigger as-child>
           <Button
             :id="datePickerId"
+            ref="buttonTrigger"
             variant="text"
             :color="color"
             :size="effectiveSize"
@@ -550,29 +555,19 @@ const buttonTriggerUi = computed(() => ({
             :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
-            {{ hasValue ? formattedValue : field?.floatingLabel.value ? "" : messages.pickDate }}
-            <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
+            <span :class="applyClassPrefix('min-w-0 flex-1 truncate text-start')" :style="buttonLabelStyle">{{ hasValue ? formattedValue : field?.floatingLabel.value ? "" : messages.pickDate }}</span>
+            <template #trailing-icon="{ class: iconClass }">
               <slot name="trigger-icon">
                 <Icon :name="icons.calendar" :class="iconClass" />
               </slot>
             </template>
           </Button>
         </DateRangePickerTrigger>
-        <Button
-          v-if="clearable && hasValue"
-          variant="text"
-          :color="color"
-          :size="iconButtonSize"
-          :aria-label="messages.clear"
-          :class="applyClassPrefix('absolute end-1 top-1/2 -translate-y-1/2')"
-          @click.stop="clear"
-        >
-          <template #icon="{ class: iconClass }">
-            <slot name="clear-icon">
-              <Icon :name="icons.close" :class="iconClass" />
-            </slot>
+        <FieldClearButton v-if="showClear" :size="effectiveSize" v-bind="mergeProps(clearProps, buttonClearProps)" @click.stop="clear">
+          <template v-if="$slots['clear-icon']" #default>
+            <slot name="clear-icon" />
           </template>
-        </Button>
+        </FieldClearButton>
       </div>
     </DateRangePickerAnchor>
 
@@ -616,7 +611,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-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">
+      <div v-if="triggerMode === 'field'" ref="fieldElement" 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 }"
@@ -640,22 +635,13 @@ const buttonTriggerUi = computed(() => ({
           </template>
         </TimeFieldRoot>
         <div :class="applyClassPrefix('ms-auto flex shrink-0 items-center gap-1')">
-          <Button
-            v-if="clearable && hasValue"
-            variant="text"
-            :color="color"
-            :size="iconButtonSize"
-            :aria-label="messages.clear"
-            @click="clear"
-          >
-            <template #icon="{ class: iconClass }">
-              <slot name="clear-icon">
-                <Icon :name="icons.close" :class="iconClass" />
-              </slot>
+          <FieldClearButton v-if="showClear" :size="effectiveSize" v-bind="clearProps" @click.stop="clear">
+            <template v-if="$slots['clear-icon']" #default>
+              <slot name="clear-icon" />
             </template>
-          </Button>
+          </FieldClearButton>
           <PopoverTrigger as-child>
-            <Button variant="text" :color="color" :size="iconButtonSize" :aria-label="messages.timePicker">
+            <Button variant="text" :color="color" :size="iconButtonSize" :ui="{ leadingIcon: triggerIconProps }" :aria-label="messages.timePicker">
               <template #icon="{ class: iconClass }">
                 <slot name="trigger-icon">
                   <Icon :name="icons.clock" :class="iconClass" />
@@ -670,6 +656,7 @@ const buttonTriggerUi = computed(() => ({
         <PopoverTrigger as-child>
           <Button
             :id="datePickerId"
+            ref="buttonTrigger"
             variant="text"
             :color="color"
             :size="effectiveSize"
@@ -678,29 +665,19 @@ const buttonTriggerUi = computed(() => ({
             :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
-            {{ hasValue ? formattedTimeValue : field?.floatingLabel.value ? "" : messages.pickTime }}
-            <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
+            <span :class="applyClassPrefix('min-w-0 flex-1 truncate text-start')" :style="buttonLabelStyle">{{ hasValue ? formattedTimeValue : field?.floatingLabel.value ? "" : messages.pickTime }}</span>
+            <template #trailing-icon="{ class: iconClass }">
               <slot name="trigger-icon">
                 <Icon :name="icons.clock" :class="iconClass" />
               </slot>
             </template>
           </Button>
         </PopoverTrigger>
-        <Button
-          v-if="clearable && hasValue"
-          variant="text"
-          :color="color"
-          :size="iconButtonSize"
-          :aria-label="messages.clear"
-          :class="applyClassPrefix('absolute end-1 top-1/2 -translate-y-1/2')"
-          @click.stop="clear"
-        >
-          <template #icon="{ class: iconClass }">
-            <slot name="clear-icon">
-              <Icon :name="icons.close" :class="iconClass" />
-            </slot>
+        <FieldClearButton v-if="showClear" :size="effectiveSize" v-bind="mergeProps(clearProps, buttonClearProps)" @click.stop="clear">
+          <template v-if="$slots['clear-icon']" #default>
+            <slot name="clear-icon" />
           </template>
-        </Button>
+        </FieldClearButton>
       </div>
     </PopoverAnchor>
 
@@ -760,7 +737,7 @@ const buttonTriggerUi = computed(() => ({
     @update:model-value="(value) => updateModelValue(normalizeForGranularity(value))"
   >
     <DatePickerAnchor as-child>
-      <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">
+      <div v-if="triggerMode === 'field'" ref="fieldElement" 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">
@@ -769,22 +746,13 @@ const buttonTriggerUi = computed(() => ({
           </template>
         </DatePickerField>
         <div :class="applyClassPrefix('ms-auto flex shrink-0 items-center gap-1')">
-          <Button
-            v-if="clearable && hasValue"
-            variant="text"
-            :color="color"
-            :size="iconButtonSize"
-            :aria-label="messages.clear"
-            @click="clear"
-          >
-            <template #icon="{ class: iconClass }">
-              <slot name="clear-icon">
-                <Icon :name="icons.close" :class="iconClass" />
-              </slot>
+          <FieldClearButton v-if="showClear" :size="effectiveSize" v-bind="clearProps" @click.stop="clear">
+            <template v-if="$slots['clear-icon']" #default>
+              <slot name="clear-icon" />
             </template>
-          </Button>
+          </FieldClearButton>
           <DatePickerTrigger as-child>
-            <Button variant="text" :color="color" :size="iconButtonSize" :aria-label="messages.datePicker">
+            <Button variant="text" :color="color" :size="iconButtonSize" :ui="{ leadingIcon: triggerIconProps }" :aria-label="messages.datePicker">
               <template #icon="{ class: iconClass }">
                 <slot name="trigger-icon">
                   <Icon :name="icons.calendar" :class="iconClass" />
@@ -799,6 +767,7 @@ const buttonTriggerUi = computed(() => ({
         <DatePickerTrigger as-child>
           <Button
             :id="datePickerId"
+            ref="buttonTrigger"
             variant="text"
             :color="color"
             :size="effectiveSize"
@@ -807,29 +776,19 @@ const buttonTriggerUi = computed(() => ({
             :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
-            {{ hasValue ? formattedValue : field?.floatingLabel.value ? "" : messages.pickDate }}
-            <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
+            <span :class="applyClassPrefix('min-w-0 flex-1 truncate text-start')" :style="buttonLabelStyle">{{ hasValue ? formattedValue : field?.floatingLabel.value ? "" : messages.pickDate }}</span>
+            <template #trailing-icon="{ class: iconClass }">
               <slot name="trigger-icon">
                 <Icon :name="icons.calendar" :class="iconClass" />
               </slot>
             </template>
           </Button>
         </DatePickerTrigger>
-        <Button
-          v-if="clearable && hasValue"
-          variant="text"
-          :color="color"
-          :size="iconButtonSize"
-          :aria-label="messages.clear"
-          :class="applyClassPrefix('absolute end-1 top-1/2 -translate-y-1/2')"
-          @click.stop="clear"
-        >
-          <template #icon="{ class: iconClass }">
-            <slot name="clear-icon">
-              <Icon :name="icons.close" :class="iconClass" />
-            </slot>
+        <FieldClearButton v-if="showClear" :size="effectiveSize" v-bind="mergeProps(clearProps, buttonClearProps)" @click.stop="clear">
+          <template v-if="$slots['clear-icon']" #default>
+            <slot name="clear-icon" />
           </template>
-        </Button>
+        </FieldClearButton>
       </div>
     </DatePickerAnchor>