vueless 0.0.415 → 0.0.417

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.415",
+  "version": "0.0.417",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.data-table/UTable.vue

@@ -11,7 +11,6 @@
           <UCheckbox
             v-if="selectable"
             v-model="selectAll"
-            size="sm"
             :partial="!isSelectedAllRows"
             :data-test="`${dataTest}-select-all`"
             v-bind="stickyHeaderActionsCheckboxAttrs"
@@ -36,7 +35,6 @@
           <UCheckbox
             v-if="selectable"
             v-model="selectAll"
-            size="sm"
             :partial="!isSelectedAllRows"
             :data-test="`${dataTest}-select-all`"
             v-bind="stickyHeaderCheckboxAttrs"
@@ -107,7 +105,6 @@
             <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
               <UCheckbox
                 v-model="selectAll"
-                size="sm"
                 :partial="!isSelectedAllRows"
                 :data-test="`${dataTest}-select-all`"
                 v-bind="headerCheckboxAttrs"
@@ -165,19 +162,12 @@
               </td>
             </tr>
 
-            <tr
-              v-if="isShownDateSeparator(rowIndex) && row.date"
-              v-bind="
-                shouldDisplayDateSeparator(rowIndex)
-                  ? bodyRowDateSeparatorCheckedAttrs
-                  : bodyRowDateSeparatorAttrs
-              "
-            >
-              <td v-bind="bodyCellDateSeparatorAttrs(rowIndex)" :colspan="colsCount">
+            <tr v-if="isShownDateDivider(rowIndex) && row.rowDate" v-bind="bodyRowDateDividerAttrs">
+              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
                 <UDivider
                   size="xs"
-                  :label="getDateSeparatorLabel(row.date.separatorDate)"
-                  v-bind="bodyDateSeparatorAttrs"
+                  :label="getDateDividerLabel(row.rowDate)"
+                  v-bind="bodyDateDividerAttrs"
                 />
               </td>
             </tr>
@@ -235,7 +225,7 @@
               <!-- @slot Use it to add custom empty state. -->
               <slot name="empty-state">
                 <UEmpty
-                  size="sm"
+                  size="md"
                   :description="currentLocale.noData"
                   :data-test="`${dataTest}-empty`"
                   v-bind="bodyEmptyStateAttrs"
@@ -525,8 +515,7 @@ const {
   bodyRowAttrs,
   bodyRowCheckedAttrs,
   footerAttrs,
-  bodyRowDateSeparatorAttrs,
-  bodyRowDateSeparatorCheckedAttrs,
+  bodyRowDateDividerAttrs,
   headerCellBaseAttrs,
   headerCellCheckboxAttrs,
   stickyHeaderActionsCheckboxAttrs,
@@ -534,8 +523,8 @@ const {
   headerCheckboxAttrs,
   headerCounterAttrs,
   bodyEmptyStateAttrs,
-  bodyDateSeparatorAttrs,
-  bodyCellDateSeparatorAttrs,
+  bodyDateDividerAttrs,
+  bodyCellDateDividerAttrs,
   stickyHeaderActionsCounterAttrs,
   stickyHeaderCounterAttrs,
   stickyHeaderLoaderAttrs,
@@ -595,18 +584,10 @@ function onWindowResize() {
   setFooterCellWidth();
 }
 
-function getDateSeparatorLabel(separatorDate) {
+function getDateDividerLabel(rowDate) {
   return Array.isArray(props.dateDivider)
-    ? props.dateDivider.find((dateItem) => dateItem.date === separatorDate)?.label || separatorDate
-    : separatorDate;
-}
-
-function shouldDisplayDateSeparator(rowIndex) {
-  const isPreviousRowChecked = tableRows.value[rowIndex - 1]?.isChecked;
-  const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
-  const isFirstRowAndNextChecked = rowIndex === 0 && isCheckedRowAfter;
-
-  return (isPreviousRowChecked && isCheckedRowAfter) || isFirstRowAndNextChecked;
+    ? props.dateDivider.find((dateItem) => dateItem.date === rowDate)?.label || rowDate
+    : rowDate;
 }
 
 function getRowAttrs(rowId) {
@@ -668,7 +649,7 @@ function onKeyupEsc(event) {
   }
 }
 
-function isShownDateSeparator(rowIndex) {
+function isShownDateDivider(rowIndex) {
   const prevIndex = rowIndex ? rowIndex - 1 : rowIndex;
   const nextIndex = rowIndex ? rowIndex + 1 : rowIndex;
   const prevItem = tableRows.value[prevIndex];
@@ -679,8 +660,8 @@ function isShownDateSeparator(rowIndex) {
     return hasSlotContentBeforeFirstRow.value;
   }
 
-  const isPrevSameDate = prevItem?.date?.primary === currentItem?.date?.primary;
-  const isNextSameDate = nextItem?.date?.primary === currentItem?.date?.primary;
+  const isPrevSameDate = prevItem?.rowDate === currentItem?.rowDate;
+  const isNextSameDate = nextItem?.rowDate === currentItem?.rowDate;
 
   return isPrevSameDate && !isNextSameDate && props.dateDivider;
 }
@@ -720,6 +701,7 @@ function clearSelectedItems() {
 }
 
 function onToggleRowVisibility(rowId) {
+  // TODO: Use map instead of forEach to get rid of implicit array mutation.
   tableRows.value.forEach((row) => toggleRowVisibility(row, rowId));
 }
 </script>

package/ui.data-table/UTableRow.vue

@@ -1,11 +1,15 @@
 <template>
   <tr v-bind="$attrs" @click="onClick(props.row)">
-    <td v-if="selectable" :style="getNestedCheckboxShift()" v-bind="bodyCellCheckboxAttrs">
+    <td
+      v-if="selectable"
+      :style="getNestedCheckboxShift()"
+      v-bind="bodyCellCheckboxAttrs"
+      @click.stop
+    >
       <UCheckbox
         v-model="selectedRows"
         :data-id="row.id"
         :value="row.id"
-        size="sm"
         :data-test="`${dataTest}-body-checkbox`"
         v-bind="bodyCheckboxAttrs"
       />

package/ui.data-table/config.js

@@ -22,7 +22,7 @@ export default /*tw*/ {
   header: "border-b border-gray-200",
   headerRow: "",
   headerCellBase: {
-    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left text-nowrap",
+    base: "p-4 text-sm font-normal text-gray-500 text-left text-nowrap",
     variants: {
       compact: {
         true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
@@ -32,7 +32,7 @@ export default /*tw*/ {
   headerCellCheckbox: "w-10",
   headerCheckbox: "{UCheckbox}",
   headerCounter: {
-    base: "absolute top-5 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
+    base: "absolute top-4 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
     variants: {
       compact: {
         true: "top-3",
@@ -47,9 +47,9 @@ export default /*tw*/ {
   bodyRowBeforeCell: "py-1",
   bodyRowAfter: "!p-0",
   bodyRowAfterCell: "py-1",
-  bodyRowDateSeparator: "",
+  bodyRowDateDivider: "",
   bodyCellBase: {
-    base: "p-[1.125rem] py-5 first:!p-5 truncate align-top last:p-5",
+    base: "p-[1.125rem] py-5 truncate align-top",
     variants: {
       compact: {
         true: "px-4 py-3 last:px-4 last:py-3 first:!px-3.5 first:py-3",
@@ -61,7 +61,7 @@ export default /*tw*/ {
   bodyCellSecondary: "mt-1 text-xs text-gray-500 overflow-hidden text-ellipsis",
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
-  bodyCellDateSeparator: "",
+  bodyCellDateDivider: "",
   bodyCellNested: "mr-2 mt-0.5",
   bodyCellNestedExpandIcon: {
     component: "{UIcon}",
@@ -74,7 +74,7 @@ export default /*tw*/ {
     container: "bg-gray-200",
   },
   bodyCheckbox: "{UCheckbox}",
-  bodyDateSeparator: "{UDivider}",
+  bodyDateDivider: "{UDivider}",
   bodyEmptyState: "{UEmpty} my-8",
   footer: "group/footer border-t border-solid border-gray-200",
   footerRow: {

package/ui.data-table/storybook/Docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/utilStorybook.js";
 
 import * as stories from "./stories.js";
@@ -12,5 +12,22 @@ import defaultConfig from "../config.js?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Formatting tokens
+Each character in the table below can be used in `dateFormat` and `userDateFormat` / `userDateTimeFormat` options to achieve the format you need.
+
+## Row meta keys
+Keys you have/may to provide to component in row object.
+
+<Markdown>
+{`
+|  Key name         | Description                    | Type           | Required     |
+| ------------------| ------------------------------ | ---------------| ------------ |
+| id                | A unique identifier for row    | String, Number | true         |
+| isChecked         | Indicates if row checked       | Boolean        | false        |
+| isHidden          | Indicated if nested row hidden | Boolean        | false        |
+| rowDate           | Row date for date divider      | String, Date   | false        |
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.data-table/storybook/stories.js

@@ -8,7 +8,7 @@ import UMoney from "../../ui.text-money/UMoney.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 
-const STICKY_PARAMETERS = {
+const SHORT_STORY_PARAMETERS = {
   docs: {
     story: {
       inline: false,
@@ -47,6 +47,18 @@ export default {
   },
 };
 
+function getDateDividerRow() {
+  return {
+    id: getRandomId(),
+    isChecked: false,
+    rowDate: new Date().toString(),
+    key_1: "Info",
+    key_2: "Statistics",
+    key_3: "Reports",
+    key_4: "Discounts",
+  };
+}
+
 function getNestedRow() {
   return {
     id: getRandomId(),
@@ -321,11 +333,11 @@ export const Selectable = DefaultTemplate.bind({});
 Selectable.args = { selectable: true };
 
 export const StickyHeader = DefaultTemplate.bind({});
-StickyHeader.parameters = STICKY_PARAMETERS;
+StickyHeader.parameters = SHORT_STORY_PARAMETERS;
 StickyHeader.args = { numberOfRows: 50, selectable: true, stickyHeader: true };
 
 export const StickyFooter = DefaultTemplate.bind({});
-StickyFooter.parameters = STICKY_PARAMETERS;
+StickyFooter.parameters = SHORT_STORY_PARAMETERS;
 StickyFooter.args = {
   numberOfRows: 50,
   selectable: true,
@@ -346,16 +358,12 @@ export const Compact = DefaultTemplate.bind({});
 Compact.args = { compact: true };
 
 export const DateDivider = DefaultTemplate.bind({});
-DateDivider.args = { dateDivider: true };
+DateDivider.args = { dateDivider: true, row: getDateDividerRow };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
 DateDividerCustomLabel.args = {
-  dateDivider: [
-    {
-      date: new Date(1709046013 * 1000).toString(),
-      label: "Label for this date",
-    },
-  ],
+  row: getDateDividerRow,
+  dateDivider: [{ date: new Date().toString(), label: "Custom label for specific date" }],
 };
 
 export const SlotDefault = DefaultTemplate.bind({});
@@ -368,6 +376,7 @@ SlotDefault.args = {
 };
 
 export const SlotHeaderActions = DefaultTemplate.bind({});
+SlotHeaderActions.parameters = SHORT_STORY_PARAMETERS;
 SlotHeaderActions.args = {
   numberOfRows: 50,
   stickyHeader: true,

package/ui.form-calendar/UCalendar.vue

@@ -1,54 +1,45 @@
 <template>
   <div ref="wrapperRef" tabindex="1" v-bind="wrapperAttrs" @keydown="onKeydown">
     <div v-bind="navigationAttrs">
-      <Teleport
-        v-if="rangeSwitchViewContainerRef"
-        :to="rangeSwitchViewContainerRef"
-        :disabled="!range"
+      <UButton
+        square
+        no-ring
+        size="sm"
+        color="grayscale"
+        variant="thirdary"
+        :left-icon="config.defaults.prevIcon"
+        v-bind="nextPrevButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickPrevButton"
+      />
+
+      <UButton
+        no-ring
+        size="sm"
+        color="grayscale"
+        variant="thirdary"
+        v-bind="viewSwitchButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickViewSwitch"
       >
-        <UButton
-          square
-          no-ring
-          size="sm"
-          variant="thirdary"
-          :right-icon="isCurrentView.day ? config.defaults.viewSwitchIcon : undefined"
-          v-bind="viewSwitchButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickViewSwitch"
-        >
-          <template v-if="isCurrentView.day">
-            {{ viewSwitchLabel.month }} {{ viewSwitchLabel.year }}
-          </template>
-          <template v-if="isCurrentView.month">{{ viewSwitchLabel.year }}</template>
-          <template v-if="isCurrentView.year">{{ viewSwitchLabel.yearsRange }}</template>
-        </UButton>
-      </Teleport>
-
-      <div v-bind="nextPrevWrapperAttrs">
-        <UButton
-          square
-          no-ring
-          size="sm"
-          variant="thirdary"
-          :left-icon="config.defaults.prevIcon"
-          v-bind="nextPrevButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickPrevButton"
-        />
+        <template v-if="isCurrentView.day">
+          {{ viewSwitchLabel.month }} {{ viewSwitchLabel.year }}
+        </template>
+        <template v-if="isCurrentView.month">{{ viewSwitchLabel.year }}</template>
+        <template v-if="isCurrentView.year">{{ viewSwitchLabel.yearsRange }}</template>
+      </UButton>
 
-        <div ref="rangeSwitchViewContainerRef" />
-
-        <UButton
-          square
-          no-ring
-          size="sm"
-          variant="thirdary"
-          :left-icon="config.defaults.nextIcon"
-          v-bind="nextPrevButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickNextButton"
-        />
-      </div>
+      <UButton
+        square
+        no-ring
+        size="sm"
+        color="grayscale"
+        variant="thirdary"
+        :left-icon="config.defaults.nextIcon"
+        v-bind="nextPrevButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickNextButton"
+      />
     </div>
 
     <DayView
@@ -134,6 +125,7 @@
         square
         filled
         no-ring
+        color="grayscale"
         v-bind="timepickerSubmitButtonAttrs"
         @click="onClickSubmit"
       >
@@ -343,14 +335,12 @@ const {
   timepickerInputMinutesAttrs,
   timepickerInputSecondsAttrs,
   timepickerSubmitButtonAttrs,
-  nextPrevWrapperAttrs,
 } = useAttrs(props);
 
 const wrapperRef = ref(null);
 const hoursRef = ref(null);
 const minutesRef = ref(null);
 const secondsRef = ref(null);
-const rangeSwitchViewContainerRef = ref(null);
 
 const activeDate = ref(null);
 const activeMonth = ref(null);

package/ui.form-calendar/UCalendarDayView.vue

@@ -66,7 +66,7 @@
         <UButton
           v-else-if="getDayState(day).isFirstDayInRange"
           tabindex="-1"
-          variant="thirdary"
+          variant="primary"
           color="brand"
           no-ring
           square
@@ -81,7 +81,7 @@
         <UButton
           v-else-if="getDayState(day).isLastDayInRange"
           tabindex="-1"
-          variant="thirdary"
+          variant="primary"
           color="brand"
           no-ring
           square
@@ -169,7 +169,7 @@
           v-else-if="getDayState(day).isAnotherMonthDay"
           tabindex="-1"
           variant="thirdary"
-          color="brand"
+          color="grayscale"
           no-ring
           square
           v-bind="anotherMonthDayAttrs"
@@ -183,7 +183,7 @@
           v-else-if="!getDayState(day).isSelectedDay"
           tabindex="-1"
           variant="thirdary"
-          color="brand"
+          color="grayscale"
           no-ring
           square
           v-bind="dayAttrs"

package/ui.form-calendar/UCalendarMonthView.vue

@@ -151,7 +151,7 @@
       <UButton
         v-else
         variant="thirdary"
-        color="brand"
+        color="grayscale"
         no-ring
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"

package/ui.form-calendar/UCalendarYearView.vue

@@ -147,7 +147,7 @@
       <UButton
         v-else
         variant="thirdary"
-        color="brand"
+        color="grayscale"
         no-ring
         v-bind="yearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"

package/ui.form-calendar/config.js

@@ -1,21 +1,13 @@
 export default /*tw*/ {
-  wrapper: "p-3 pb-4 w-64 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
+  wrapper: "p-2 w-80 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
-  viewSwitchButton: "{UButton} -ml-3 pl-3 text-sm rounded-l-none",
-  nextPrevWrapper: {
-    base: "flex",
-    variants: {
-      range: {
-        true: "justify-between items-center w-full",
-      },
-    },
-  },
+  viewSwitchButton: "{UButton}",
   nextPrevButton: "{UButton}",
   dayView: "",
-  weekDays: "grid grid-cols-7",
+  weekDays: "grid grid-cols-7 justify-items-center gap-1",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
-  days: "grid grid-cols-7",
-  dateInRange: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  days: "grid grid-cols-7 justify-items-center gap-1",
+  dateInRange: "bg-brand/15 !text-brand-900 hover:bg-brand/30 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
   lastDateInRange: "rounded-l-none",
@@ -23,7 +15,7 @@ export default /*tw*/ {
   activeDate: "bg-brand-100",
   selectedDate: "",
   currentDate: "border-2 border-brand-600",
-  day: `{UButton} size-9 w-auto`,
+  day: "{UButton} size-9 w-full font-normal",
   currentDay: "",
   dayInRange: "",
   currentDayInRange: "",
@@ -36,7 +28,7 @@ export default /*tw*/ {
   anotherMonthLastDayInRange: "",
   selectedDay: "",
   activeDay: "",
-  monthView: "grid grid-cols-4 items-center justify-center",
+  monthView: "grid grid-cols-4 justify-items-center gap-1",
   month: "{UButton} mx-auto flex h-12 w-full",
   currentMonth: "",
   currentMonthInRange: "",
@@ -49,7 +41,7 @@ export default /*tw*/ {
   monthInRange: "",
   selectedMonth: "",
   activeMonth: "",
-  yearView: "grid grid-cols-4 items-center justify-center",
+  yearView: "grid grid-cols-4 justify-items-center gap-1",
   year: "{UButton} mx-auto flex h-12 w-full",
   currentYear: "",
   currentYearInRange: "",

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -7,6 +7,7 @@
         filled
         no-ring
         size="xs"
+        color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
         v-bind="periodButtonAttrs"
@@ -19,6 +20,7 @@
         filled
         no-ring
         size="xs"
+        color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
         v-bind="periodButtonActiveAttrs"
@@ -34,6 +36,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       v-bind="periodButtonAttrs"
       @click="onClickCustomRangeButton"
@@ -52,6 +55,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       v-bind="periodButtonActiveAttrs"
       @click="onClickCustomRangeButton"
@@ -70,6 +74,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
@@ -83,6 +88,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
@@ -97,7 +103,7 @@
         square
         no-ring
         size="xs"
-        color="gray"
+        color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
         v-bind="rangeSwitchButtonAttrs"
@@ -112,7 +118,7 @@
         square
         no-ring
         size="xs"
-        color="gray"
+        color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
         v-bind="rangeSwitchButtonAttrs"
@@ -126,6 +132,7 @@
           v-if="getDatePeriodState(date, index).isActive"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="periodDateActiveAttrs"
@@ -138,6 +145,7 @@
           v-else-if="getDatePeriodState(date, index).isFirstInRange && !isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="firstPeriodGridDateAttrs"
@@ -150,6 +158,7 @@
           v-else-if="getDatePeriodState(date, index).isFirstInRange && isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="firstPeriodListDateAttrs"
@@ -162,6 +171,7 @@
           v-else-if="getDatePeriodState(date, index).isLastInRange && !isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="lastPeriodGridDateAttrs"
@@ -174,6 +184,7 @@
           v-else-if="getDatePeriodState(date, index).isLastInRange && isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="lastPeriodListDateAttrs"
@@ -186,6 +197,7 @@
           v-else-if="getDatePeriodState(date, index).isInRange"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="periodDateInRangeAttrs"
@@ -198,6 +210,7 @@
           v-else
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="periodDateAttrs"

package/ui.form-date-picker-range/config.js

@@ -19,7 +19,7 @@ export default /*tw*/ {
   menu: {
     base: `
       absolute z-40 mb-3 w-80 overflow-hidden rounded-dynamic
-      border border-brand-300 bg-white p-2 shadow focus:outline-none
+      border border-gray-300 bg-white p-2 shadow focus:outline-none
     `,
     variants: {
       openDirectionX: {
@@ -76,8 +76,11 @@ export default /*tw*/ {
       wrapper: "w-full hover:z-10 focus:z-10 !rounded-none",
       description: "hidden",
     },
-    wrapper: "focus-within:z-10 focus-within:ring-0 rounded-r-none",
     input: "rounded-r-none",
+    wrapper: `
+      rounded-r-none
+      focus-within:z-10 focus-within:ring-0 focus-within:border-gray-500 hover:focus-within:border-gray-500
+    `,
   },
   rangeInputLast: {
     component: "{UInput}",
@@ -86,19 +89,19 @@ export default /*tw*/ {
       wrapper: "w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    wrapper: "focus-within:z-10 focus-within:ring-0 rounded-l-none",
     input: "rounded-l-none",
+    wrapper: `
+      rounded-l-none
+      focus-within:z-10 focus-within:ring-0 focus-within:border-gray-500 hover:focus-within:border-gray-500
+    `,
   },
   rangeInputError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
     component: "{UCalendar}",
-    wrapper: "p-0 w-full border-none shadow-none rounded-none",
-    navigation: "mb-0 border-none",
-    viewSwitchButton: {
-      base: "rounded-dynamic px-4",
-      rightIcon: "hidden",
-    },
-    day: "w-full h-10 mb-0.5",
+    wrapper: "p-0 pt-2 w-full border-none shadow-none rounded-none",
+    navigation: "pb-0 mb-0 border-none",
+    days: "gap-0 gap-y-0.5",
+    day: "w-full",
   },
   i18n: {
     ownRange: "Own range",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.415",
+  "version": "0.0.417",
   "contributions": {
     "html": {
       "description-markup": "markdown",