vueless 0.0.703 → 0.0.705

package/bin/constants.js

@@ -9,8 +9,8 @@ export default {
   brand: "grayscale",
   gray: "cool",
   darkMode: "auto",
-  ring: 4,
-  ringOffset: 0,
+  ring: 2,
+  ringOffset: 2,
   ringOffsetColorLight: "#ffffff", // white
   ringOffsetColorDark: "#111827", // gray-900
   rounding: 8,

package/constants.js

@@ -17,8 +17,8 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 /* Vueless defaults */
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
-export const DEFAULT_RING = 4; /* pixels */
-export const DEFAULT_RING_OFFSET = 0; /* pixels */
+export const DEFAULT_RING = 2; /* pixels */
+export const DEFAULT_RING_OFFSET = 2; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */

package/package.json

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

package/ui.button/config.ts

@@ -2,13 +2,10 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
-      border border-transparent outline-none transition
-      disabled:cursor-not-allowed cursor-pointer
-      disabled:ring-0 disabled:ring-offset-0
-      focus:ring-dynamic             focus-within:ring-dynamic
-      focus:ring-offset-dynamic      focus-within:ring-offset-dynamic
-      focus:ring-{color}-700/15      focus-within:ring-{color}-700/15
-      dark:focus:ring-{color}-500/15 dark:focus-within:ring-{color}-500/15
+      border border-transparent outline-none transition cursor-pointer
+      focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus-visible:ring-{color}-600 dark:focus-visible:ring-{color}-400
+      disabled:cursor-not-allowed disabled:ring-0 disabled:ring-offset-0
     `,
     variants: {
       size: {
@@ -24,21 +21,18 @@ export default /*tw*/ {
           text-white            dark:text-gray-900
           bg-{color}-600        dark:bg-{color}-400
           hover:bg-{color}-700  dark:hover:bg-{color}-500
-          focus:bg-{color}-700  dark:focus:bg-{color}-500
           active:bg-{color}-800 dark:active:bg-{color}-600
           disabled:bg-gray-400  dark:disabled:bg-gray-600
         `,
         secondary: `
           text-{color}-600        border-{color}-600        dark:text-{color}-400        dark:border-{color}-400
           hover:text-{color}-700  hover:border-{color}-700  dark:hover:text-{color}-500  dark:hover:border-{color}-500
-          focus:text-{color}-700  focus:border-{color}-700  dark:focus:text-{color}-500  dark:focus:border-{color}-500
           active:text-{color}-800 active:border-{color}-800 dark:active:text-{color}-600 dark:active:border-{color}-600
           disabled:text-gray-400  disabled:border-gray-400  dark:disabled:text-gray-600  dark:disabled:border-gray-600
         `,
         thirdary: `
           text-{color}-600                                 dark:text-{color}-400
           hover:text-{color}-700  hover:bg-{color}-700/10  dark:hover:text-{color}-500  dark:hover:bg-{color}-500/10
-          focus:text-{color}-700  focus:bg-{color}-700/10  dark:focus:text-{color}-500  dark:focus:bg-{color}-500/10
           active:text-{color}-800 active:bg-{color}-800/15 dark:active:text-{color}-600 dark:active:bg-{color}-600/15
           disabled:text-gray-400  disabled:bg-transparent  dark:disabled:text-gray-600  dark:disabled:bg-transparent
         `,
@@ -47,9 +41,6 @@ export default /*tw*/ {
         false: "rounded-dynamic",
         true: "rounded-full",
       },
-      ring: {
-        false: "!ring-0 !ring-offset-0",
-      },
       loading: {
         true: "gap-0 pointer-events-none",
       },
@@ -63,10 +54,7 @@ export default /*tw*/ {
     compoundVariants: [
       {
         color: ["grayscale", "white"],
-        class: `
-          focus:ring-gray-700/15        dark:focus:ring-gray-500/15
-          focus-within:ring-gray-700/15 dark:focus-within:ring-gray-500/15
-        `,
+        class: "focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100",
       },
       {
         color: "grayscale",
@@ -74,7 +62,6 @@ export default /*tw*/ {
         class: `
           bg-gray-900        dark:bg-gray-100
           hover:bg-gray-800  dark:hover:bg-gray-200
-          focus:bg-gray-800  dark:focus:bg-gray-200
           active:bg-gray-700 dark:active:bg-gray-300
         `,
       },
@@ -84,8 +71,7 @@ export default /*tw*/ {
         class: `
           text-gray-900        border-gray-900        dark:text-gray-100         dark:border-gray-100
           hover:text-gray-800  hover:border-gray-800  dark:hover:text-gray-200   dark:hover:border-gray-200
-          focus:text-gray-800  focus:border-gray-800  dark:focus:text-gray-200   dark:focus:border-gray-200
-          active:text-gray-700 active:border-gray-700 dark:active:focus-gray-300 dark:active:border-gray-300
+          active:text-gray-700 active:border-gray-700 dark:active:text-gray-300 dark:active:border-gray-300
         `,
       },
       {
@@ -94,7 +80,6 @@ export default /*tw*/ {
         class: `
           text-gray-900                              dark:text-gray-100
           hover:text-gray-800  hover:bg-gray-800/5   dark:hover:text-gray-200  dark:hover:bg-gray-200/5
-          focus:text-gray-800  focus:bg-gray-800/5   dark:focus:text-gray-200  dark:focus:bg-gray-200/5
           active:text-gray-700 active:bg-gray-700/10 dark:active:text-gray-300 dark:active:bg-gray-300/10
         `,
       },
@@ -103,7 +88,6 @@ export default /*tw*/ {
         class: `
           text-gray-900        dark:text-white
           hover:text-gray-800  dark:hover:text-gray-100
-          focus:text-gray-800  dark:focus:text-gray-100
           active:text-gray-700 dark:active:text-gray-200
         `,
       },
@@ -113,19 +97,18 @@ export default /*tw*/ {
         class: `
           bg-white           dark:text-gray-900
           hover:bg-gray-50   dark:hover:text-gray-800
-          focus:bg-gray-50   dark:focus:text-gray-800
           active:bg-gray-100 dark:active:text-gray-700
         `,
       },
       {
         color: "white",
         variant: "secondary",
-        class: "border-gray-100 hover:border-gray-200 focus:border-gray-200 active:border-gray-300",
+        class: "border-gray-100 hover:border-gray-200 active:border-gray-300",
       },
       {
         color: "white",
         variant: "thirdary",
-        class: "hover:bg-white/10 focus:bg-white/10 active:bg-white/15",
+        class: "hover:bg-white/10 active:bg-white/15",
       },
       { filled: true, variant: "thirdary", class: "bg-{color}-700/10 dark:bg-{color}-500/10" },
       { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-800/5 dark:bg-gray-200/5" },
@@ -187,7 +170,6 @@ export default /*tw*/ {
     block: false,
     square: false,
     filled: false,
-    ring: true,
     loading: false,
     disabled: false,
   },

package/ui.button/storybook/stories.ts

@@ -155,9 +155,6 @@ Block.args = { block: true };
 export const Disabled = EnumVariantTemplate.bind({});
 Disabled.args = { enum: "variant", disabled: true };
 
-export const NoRing = DefaultTemplate.bind({});
-NoRing.args = { ring: false };
-
 export const Colors = ColorTemplate.bind({});
 Colors.args = {};
 

package/ui.button/types.ts

@@ -100,11 +100,6 @@ export interface Props {
    */
   loading?: boolean;
 
-  /**
-   * Show button ring on focus.
-   */
-  ring?: boolean;
-
   /**
    * Unique element id.
    */

package/ui.button-link/config.ts

@@ -4,9 +4,8 @@ export default /*tw*/ {
       inline-block cursor-pointer !leading-none rounded transition
       text-{color}-600 decoration-{color}-600 underline-offset-4
       hover:text-{color}-700 hover:decoration-{color}-700
-      focus:text-{color}-700 focus:decoration-{color}-700 focus:outline-0
       active:text-{color}-800 active:decoration-{color}-800
-      focus:ring-dynamic focus:ring-offset-4 focus:ring-{color}-700/15
+      focus-visible:ring-dynamic focus-visible:ring-offset-4 focus-visible:ring-{color}-600 focus-visible:outline-0
     `,
     variants: {
       size: {
@@ -23,16 +22,15 @@ export default /*tw*/ {
         gray: `
           text-gray-500 decoration-gray-500
           hover:text-gray-600 hover:decoration-gray-600
-          focus:text-gray-600 focus:decoration-gray-600
           active:text-gray-700 active:decoration-gray-700
         `,
         grayscale: `
           text-gray-900 decoration-gray-900
           hover:text-gray-800 hover:decoration-gray-800
-          focus:text-gray-800 focus:decoration-gray-800 focus:ring-gray-700/15
           active:text-gray-700 active:decoration-gray-700
+          focus-visible:ring-gray-900
         `,
-        white: "decoration-white text-white focus:ring-white/15",
+        white: "decoration-white text-white focus-visible:ring-white",
       },
       defaultSlot: {
         true: "flex items-center no-underline hover:no-underline",
@@ -43,9 +41,6 @@ export default /*tw*/ {
       disabled: {
         true: "text-gray-400 pointer-events-none",
       },
-      ring: {
-        false: "!ring-0 !ring-offset-0",
-      },
       block: {
         true: "w-full",
       },
@@ -61,7 +56,6 @@ export default /*tw*/ {
     ariaCurrentValue: "page",
     rel: "noopener noreferrer",
     underlined: undefined,
-    ring: false,
     block: false,
     dashed: false,
     custom: false,

package/ui.button-link/storybook/stories.ts

@@ -185,9 +185,6 @@ export const UnderlineVariants: StoryFn<ULinkArgs> = (args: ULinkArgs, { argType
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const NoRing = DefaultTemplate.bind({});
-NoRing.args = { ring: false };
-
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };
 

package/ui.button-link/types.ts

@@ -107,11 +107,6 @@ export interface Props {
    */
   block?: boolean;
 
-  /**
-   * Show link ring on focus.
-   */
-  ring?: boolean;
-
   /**
    * Whether RouterLink should not wrap its content in a tag.
    */

package/ui.button-toggle/UToggle.vue

@@ -61,7 +61,6 @@ provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
 provide("getToggleDisabled", () => props.disabled);
-provide("getToggleRing", () => props.ring);
 provide("getToggleSplit", () => props.split);
 
 provide("toggleSelectedValue", {

package/ui.button-toggle/config.ts

@@ -30,12 +30,7 @@ export default /*tw*/ {
       },
       split: {
         true: "flex flex-wrap",
-        false: `
-          p-1 gap-1 flex flex-nowrap w-fit transition
-          border border-gray-300 rounded-dynamic
-          hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
-          focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
-        `,
+        false: "p-1 gap-1 flex flex-nowrap w-fit transition border rounded-dynamic border-gray-300",
       },
       disabled: {
         true: "pointer-events-none",

package/ui.button-toggle/types.ts

@@ -81,11 +81,6 @@ export interface Props {
    */
   square?: boolean;
 
-  /**
-   * Show button ring on focus.
-   */
-  ring?: boolean;
-
   /**
    * Component config object.
    */

package/ui.button-toggle-item/UToggleItem.vue

@@ -37,7 +37,6 @@ const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as Bu
 const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
-const getToggleRing = inject<() => boolean>("getToggleRing", () => false);
 const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
 
 const getToggleDisabled = inject<() => boolean>(
@@ -109,7 +108,6 @@ const { toggleButtonInactiveAttrs, toggleButtonActiveAttrs, toggleInputAttrs } =
     :block="getToggleBlock()"
     :square="getToggleSquare()"
     :disabled="getToggleDisabled() || disabled"
-    :ring="getToggleRing() || getToggleSplit()"
     v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
     @click="onClickSetValue"
   >

package/ui.button-toggle-item/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   toggleButton: {
-    base: "{UButton} font-normal",
+    base: "{UButton} font-normal focus-visible:ring-offset-0",
     defaults: {
       variant: "thirdary",
     },

package/ui.container-modal/UModal.vue

@@ -171,7 +171,6 @@ const {
                       size="sm"
                       color="gray"
                       :to="backTo"
-                      :ring="false"
                       :label="backLabel"
                       v-bind="backLinkAttrs"
                       @click="onClickBackLink"

package/ui.container-page/UPage.vue

@@ -117,7 +117,6 @@ const {
                 />
 
                 <ULink
-                  :ring="false"
                   size="sm"
                   color="gray"
                   :to="backTo"

package/ui.dropdown-badge/config.ts

@@ -1,13 +1,12 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownBadge: {
-    base: "{UBadge} transition",
+    base: "{UBadge}",
     variants: {
       opened: {
-        true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+        true: "group",
       },
     },
-    compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],
   },
   dropdownIcon: {
     base: "{UIcon} transition duration-300 group-[]:rotate-180",
@@ -23,8 +22,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-6 mb-6",
-        bottom: "top-3 mt-6",
+        top: "bottom-5 mb-5",
+        bottom: "top-3 mt-5",
       },
       xPosition: {
         left: "left-0",

package/ui.dropdown-badge/storybook/stories.ts

@@ -181,7 +181,6 @@ SlotToggle.args = {
         :label="opened ? 'collapse' : 'expand'"
         color="green"
         size="sm"
-        :ring=false
         class="mx-1"
       />
     </template>

package/ui.dropdown-button/config.ts

@@ -1,13 +1,12 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: {
-    base: "{UButton} transition",
+    base: "{UButton}",
     variants: {
       opened: {
-        true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+        true: "group",
       },
     },
-    compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],
   },
   dropdownIcon: {
     base: "{UIcon} transition duration-300 group-[]:rotate-180",
@@ -26,8 +25,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-full mb-2",
-        bottom: "top-full mt-2",
+        top: "bottom-full mb-1",
+        bottom: "top-full mt-1",
       },
       xPosition: {
         left: "left-0",

package/ui.dropdown-button/storybook/stories.ts

@@ -175,7 +175,6 @@ SlotToggle.args = {
       <ULink
         :label="opened ? 'collapse' : 'expand'"
         color="green"
-        :ring=false
       />
     </template>
   `,

package/ui.dropdown-link/UDropdownLink.vue

@@ -73,7 +73,13 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs,
 </script>
 
 <template>
-  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
+  <div
+    v-click-outside="hideOptions"
+    tabindex="1"
+    v-bind="wrapperAttrs"
+    @keydown.enter="onClickLink"
+    @keydown.space.prevent="onClickLink"
+  >
     <!--
       @slot Use it to add something before the label.
       @binding {boolean} opened
@@ -82,7 +88,7 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs,
 
     <ULink
       :id="elementId"
-      :ring="ring"
+      tabindex="-1"
       :size="size"
       :label="label"
       :color="color"
@@ -92,8 +98,6 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs,
       v-bind="dropdownLinkAttrs"
       :data-test="getDataTest()"
       @click="onClickLink"
-      @keydown.enter="onClickLink"
-      @keydown.space.prevent="onClickLink"
     >
       <template #default>
         <!--

package/ui.dropdown-link/config.ts

@@ -1,16 +1,20 @@
 export default /*tw*/ {
   wrapper: {
-    base: "relative inline-flex items-center rounded",
+    base: `
+      relative inline-flex items-center outline-0 rounded
+      focus-visible:ring-dynamic focus-visible:ring-offset-4 focus-visible:ring-{color}-600
+    `,
     variants: {
+      color: {
+        grayscale: "focus-visible:ring-gray-900",
+        white: "focus-visible:ring-white",
+      },
       opened: {
         true: "group",
       },
-      ring: {
-        true: "focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15",
-      },
     },
   },
-  dropdownLink: "{ULink} focus:ring-0 focus:ring-offset-0",
+  dropdownLink: "{ULink} focus-visible:ring-offset-0 focus-visible:ring-0",
   toggleIcon: {
     base: "{UIcon} block transition duration-300 group-[]:rotate-180",
     variants: {
@@ -30,8 +34,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-6 mb-4",
-        bottom: "top-3 mt-4",
+        top: "bottom-3 mb-3",
+        bottom: "top-3 mt-3",
       },
       xPosition: {
         left: "left-0",
@@ -47,7 +51,6 @@ export default /*tw*/ {
     xPosition: "left",
     underlined: undefined,
     dashed: true,
-    ring: false,
     noIcon: false,
     disabled: false,
     /* icons */

package/ui.dropdown-link/storybook/stories.ts

@@ -107,9 +107,6 @@ DropdownListYPosition.args = { enum: "yPosition" };
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const Ring = DefaultTemplate.bind({});
-Ring.args = { ring: true };
-
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 

package/ui.dropdown-link/types.ts

@@ -67,11 +67,6 @@ export interface Props {
    */
   disabled?: boolean;
 
-  /**
-   * Show link focus ring.
-   */
-  ring?: boolean;
-
   /**
    * Hide dropdown icon.
    */

package/ui.dropdown-list/config.ts

@@ -6,15 +6,19 @@ export default /*tw*/ {
     focus:outline-none
   `,
   list: "list-none align-top w-full h-full",
-  listItem: "group/item block",
+  listItem: "group/item block mb-px last:mb-0",
   option: {
     base: `
       rounded-dynamic-sm px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-none text-gray-900
-      hover:bg-{color}-50 active:bg-{color}-100
+      hover:bg-{color}-600/5 active:bg-{color}-600/10
       overflow-hidden text-ellipsis
     `,
     variants: {
+      color: {
+        grayscale: "hover:bg-gray-100 active:bg-gray-200",
+        white: "hover:bg-gray-100 active:bg-gray-200",
+      },
       size: {
         sm: "text-xs",
         md: "text-sm",
@@ -25,7 +29,7 @@ export default /*tw*/ {
       },
     },
   },
-  optionActive: "{>option} font-semibold bg-{color}-100 hover:bg-{color}-100 text-brand-600",
+  optionActive: "{>option} font-semibold bg-{color}-600/10 hover:bg-{color}-600/10 text-brand-600",
   optionHighlighted: "bg-{color}-50",
   optionContent: "overflow-visible text-ellipsis",
   groupBase: {

package/ui.dropdown-list/storybook/stories.ts

@@ -57,6 +57,7 @@ const DefaultTemplate: StoryFn<DefaultUDropdownListArgs> = (args: DefaultUDropdo
   template: `
     <UDropdownList
       v-bind="args"
+      v-model="args.modelValue"
       class="mx-4 w-[24rem]"
       @add="showAlert('You triggered the add action!')"
     >

package/ui.form-calendar/UCalendar.vue

@@ -724,7 +724,6 @@ const {
       <UButton
         square
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
@@ -735,7 +734,6 @@ const {
 
       <UButton
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         v-bind="viewSwitchButtonAttrs"
@@ -752,7 +750,6 @@ const {
       <UButton
         square
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
@@ -849,7 +846,6 @@ const {
         ref="ok-button"
         filled
         size="sm"
-        :ring="false"
         color="grayscale"
         variant="thirdary"
         v-bind="timepickerSubmitButtonAttrs"