vueless 1.3.9-beta.2 → 1.3.9-beta.3

package/icons/internal/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M222.15-182.15h143.78v-251.92h228.14v251.92h143.78v-386.89L480-762.37 222.15-568.96v386.81Zm-68.13 68.13v-489.09L480-847.65l326.22 244.54v489.09H528.57v-254.55h-97.14v254.55H154.02ZM480-472.76Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.9-beta.2",
+  "version": "1.3.9-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.button/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   button: {
     base: `
-      flex items-center justify-center font-medium !leading-snug whitespace-nowrap
+      flex items-center justify-center font-medium leading-snug! whitespace-nowrap
       border border-solid transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
@@ -20,31 +20,31 @@ export default /*tw*/ {
           bg-{color} border-transparent text-inverted
           hover:bg-{color}-lifted
           active:bg-{color}-accented
-          disabled:!bg-{color}/(--vl-disabled-opacity)
+          disabled:bg-{color}/(--vl-disabled-opacity)!
         `,
         outlined: `
           text-{color} border-{color}
           hover:text-{color}-lifted hover:border-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:border-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/(--vl-disabled-opacity)
+          disabled:text-{color}/(--vl-disabled-opacity)! disabled:bg-{color}/5! disabled:border-{color}/(--vl-disabled-opacity)!
         `,
         subtle: `
           text-{color} bg-{color}/5 border-{color}/15
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/10
+          disabled:text-{color}/(--vl-disabled-opacity)! disabled:bg-{color}/5! disabled:border-{color}/10!
         `,
         soft: `
           text-{color} bg-{color}/5 border-transparent
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5
+          disabled:text-{color}/(--vl-disabled-opacity)! disabled:bg-{color}/5!
         `,
         ghost: `
           text-{color} bg-transparent border-transparent
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-transparent
+          disabled:text-{color}/(--vl-disabled-opacity)! disabled:bg-transparent!
         `,
       },
       round: {

package/ui.button-link/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   link: {
     base: `
-      inline-block cursor-pointer !leading-none transition
+      inline-block cursor-pointer leading-none! transition
       text-{color} decoration-{color} underline-offset-4
       hover:text-{color}-lifted hover:decoration-{color}-lifted
       active:text-{color}-accented active:decoration-{color}-accented
@@ -29,7 +29,7 @@ export default /*tw*/ {
         true: "decoration-dotted hover:decoration-dotted",
       },
       disabled: {
-        true: "!text-{color}/(--vl-disabled-opacity) !no-underline cursor-not-allowed",
+        true: "text-{color}/(--vl-disabled-opacity)! no-underline! cursor-not-allowed",
       },
       block: {
         true: "w-full",

package/ui.button-toggle/config.ts

@@ -54,7 +54,7 @@ export default /*tw*/ {
     },
   },
   toggleButtonActive: {
-    base: "{>toggleButton} !bg-primary/10 disabled:!bg-primary/10 disabled:text-primary",
+    base: "{>toggleButton} bg-primary/10! disabled:bg-primary/10! disabled:text-primary",
     variants: {
       split: {
         false: "border-0",

package/ui.container-page/config.ts

@@ -4,15 +4,15 @@ export default /*tw*/ {
     base: "relative min-h-screen UNotifyPage",
     variants: {
       size: {
-        xs: "md:w-[25rem] md:max-[500px]:!w-full",
-        sm: "md:w-[31.25rem] md:max-[600px]:!w-full",
-        md: "md:w-[37.5rem] md:max-[700px]:!w-full",
-        lg: "md:w-[43.75rem] md:max-[800px]:!w-full",
-        xl: "md:w-[50rem] md:max-[900px]:!w-full",
-        "2xl": "md:w-[56.25rem] md:max-[1000px]:!w-full",
-        "3xl": "md:w-[62.5rem] md:max-[1100px]:!w-full",
-        "4xl": "md:w-[68.75rem] md:max-[1200px]:!w-full",
-        "5xl": "md:w-[75rem] md:max-[1300px]:!w-full",
+        xs: "md:w-[25rem] md:max-[500px]:w-full!",
+        sm: "md:w-[31.25rem] md:max-[600px]:w-full!",
+        md: "md:w-[37.5rem] md:max-[700px]:w-full!",
+        lg: "md:w-[43.75rem] md:max-[800px]:w-full!",
+        xl: "md:w-[50rem] md:max-[900px]:w-full!",
+        "2xl": "md:w-[56.25rem] md:max-[1000px]:w-full!",
+        "3xl": "md:w-[62.5rem] md:max-[1100px]:w-full!",
+        "4xl": "md:w-[68.75rem] md:max-[1200px]:w-full!",
+        "5xl": "md:w-[75rem] md:max-[1300px]:w-full!",
         wide: "md:w-full",
       },
       rounding: {

package/ui.data-table/config.ts

@@ -19,7 +19,7 @@ export default /*tw*/ {
   stickyHeaderCell: "{>headerCellBase} flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "{UCheckbox}",
   stickyHeaderCounter: {
-    base: "{>headerCounterBase} absolute top-4 left-11 bg-gradient-to-r from-(--vl-bg) from-80%",
+    base: "{>headerCounterBase} absolute top-4 left-11 bg-linear-to-r from-(--vl-bg) from-80%",
     variants: {
       compact: {
         true: "top-3",
@@ -54,17 +54,17 @@ export default /*tw*/ {
   body: "group/body divide-none",
   bodyRow: "bg-default hover:bg-muted",
   bodyRowChecked: "bg-lifted transition",
-  beforeBodyRow: "!p-0",
-  beforeBodyRowChecked: "{>bodyRowChecked} !p-0",
+  beforeBodyRow: "p-0!",
+  beforeBodyRowChecked: "{>bodyRowChecked} p-0!",
   beforeBodyRowCell: "{>bodyCellBase} py-1",
-  afterBodyRow: "!p-0",
+  afterBodyRow: "p-0!",
   bodyRowDateDivider: "first:hidden",
   bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",
     variants: {
       compact: {
-        true: "px-4 py-3 last:px-4 last:py-3 first:!px-4 first:py-3",
+        true: "px-4 py-3 last:px-4 last:py-3 first:px-4! first:py-3",
       },
     },
   },
@@ -85,7 +85,7 @@ export default /*tw*/ {
   },
   bodySelectedDateDivider: {
     base: "{>bodyDateDivider}",
-    label: "!bg-lifted transition",
+    label: "bg-lifted! transition",
   },
   bodyEmptyState: "{UEmpty} my-8",
   bodyEmptyStateCell: "",

package/ui.dropdown-button/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "{UDropdown}",
     variants: {
       block: {
-        true: "!block w-full",
+        true: "block! w-full",
       },
     },
     defaults: {

package/ui.form-checkbox/config.ts

@@ -23,7 +23,7 @@ export default /*tw*/ {
     `,
     variants: {
       error: {
-        true: "!border-error focus-visible:outline-error",
+        true: "border-error! focus-visible:outline-error",
       },
     },
   },
@@ -34,7 +34,7 @@ export default /*tw*/ {
     `,
     variants: {
       disabled: {
-        true: "!bg-{color}/(--vl-disabled-opacity) cursor-not-allowed",
+        true: "bg-{color}/(--vl-disabled-opacity)! cursor-not-allowed",
       },
     },
   },

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

@@ -59,7 +59,7 @@ export default /*tw*/ {
   },
   periodRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
-  periodButtonActive: "{>periodButton} !bg-grayscale-accented/15",
+  periodButtonActive: "{>periodButton} bg-grayscale-accented/15!",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
   rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-medium",
@@ -99,11 +99,11 @@ export default /*tw*/ {
   },
   rangeInputFirst: {
     base: "{UInput} {>rangeInput}",
-    wrapper: "!rounded-r-none",
+    wrapper: "rounded-r-none!",
   },
   rangeInputLast: {
     base: "{UInput} {>rangeInput}",
-    wrapper: "!rounded-l-none",
+    wrapper: "rounded-l-none!",
   },
   rangeInputError: "text-small font-normal leading-none mt-2 text-center text-red-500",
   datepickerCalendar: {

package/ui.form-input/config.ts

@@ -18,10 +18,10 @@ export default /*tw*/ {
     `,
     variants: {
       error: {
-        true: "!border-error focus-within:outline-error",
+        true: "border-error! focus-within:outline-error",
       },
       disabled: {
-        true: "!border-default focus-within:outline-0 bg-lifted",
+        true: "border-default! focus-within:outline-0 bg-lifted",
       },
     },
   },
@@ -41,7 +41,7 @@ export default /*tw*/ {
   rightSlot: "flex items-center",
   input: {
     base: `
-      block w-full py-2 font-normal !leading-none bg-transparent
+      block w-full py-2 font-normal leading-none! bg-transparent
       border-none rounded-inherit transition focus:outline-none
       placeholder:font-normal placeholder:text-muted
       disabled:text-accented disabled:cursor-not-allowed

package/ui.form-input-file/config.ts

@@ -9,7 +9,7 @@ export default /*tw*/ {
     `,
     variants: {
       error: {
-        true: "!border-error focus-within:outline-error",
+        true: "border-error! focus-within:outline-error",
       },
       disabled: {
         true: "pointer-events-none bg-lifted",

package/ui.form-input-rating/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex items-center text-default !leading-none",
+    base: "flex items-center text-default leading-none!",
     variants: {
       size: {
         sm: "gap-1.5",

package/ui.form-label/config.ts

@@ -25,7 +25,7 @@ export default /*tw*/ {
   },
   content: "flex",
   label: {
-    base: "z-10 block !leading-none w-max transition",
+    base: "z-10 block leading-none! w-max transition",
     variants: {
       size: {
         sm: "text-small",
@@ -40,7 +40,7 @@ export default /*tw*/ {
         right: "font-normal",
       },
       error: {
-        true: "text-error group-focus-within/label:!text-error",
+        true: "text-error group-focus-within/label:text-error!",
       },
       disabled: {
         true: "text-lifted cursor-not-allowed",
@@ -62,7 +62,7 @@ export default /*tw*/ {
     ],
   },
   description: {
-    base: "font-normal text-lifted text-left !leading-tight",
+    base: "font-normal text-lifted text-left leading-tight!",
     variants: {
       size: {
         sm: "text-tiny",

package/ui.form-listbox/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   listboxInput: {
     base: "{UInputSearch} sticky top-0 pt-1 bg-default z-10",
     searchInput: {
-      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 !border-default",
+      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 border-default!",
     },
   },
   selectIcon: {
@@ -38,7 +38,7 @@ export default /*tw*/ {
   option: {
     base: `
       rounded-small px-2 py-2 flex gap-2 items-center align-middle whitespace-nowrap cursor-pointer
-      font-normal !leading-snug
+      font-normal leading-snug!
       hover:bg-{color}/5 active:bg-{color}/10
       overflow-hidden text-ellipsis text-default
     `,
@@ -59,7 +59,7 @@ export default /*tw*/ {
   optionDisabledActive: "{>optionActive} {>optionDisabled}",
   optionContent: "w-full truncate",
   groupBase: {
-    base: "px-2 pb-2.5 font-medium !leading-none text-muted truncate",
+    base: "px-2 pb-2.5 font-medium leading-none! text-muted truncate",
     variants: {
       size: {
         sm: "text-tiny",
@@ -78,7 +78,7 @@ export default /*tw*/ {
   addOptionLabelWrapper: "{>option} -mb-[1.375rem] active:bg-lifted",
   addOptionLabel: "leading-none font-medium",
   addOptionLabelHotkey: "text-lifted",
-  addOptionButton: "{UButton} !leading-none sticky left-[calc(100%-2.15rem)] bottom-2 p-1",
+  addOptionButton: "{UButton} leading-none! sticky left-[calc(100%-2.15rem)] bottom-2 p-1",
   addOptionIcon: "{UIcon} bg-transparent",
   selectedIcon: {
     base: "{UIcon}",

package/ui.form-select/config.ts

@@ -18,7 +18,7 @@ export default /*tw*/ {
     `,
     variants: {
       error: {
-        true: "!border-error focus-within:outline-error",
+        true: "border-error! focus-within:outline-error",
       },
       disabled: {
         true: `
@@ -44,7 +44,7 @@ export default /*tw*/ {
     compoundVariants: [{ labelAlign: "topInside", label: true, class: "pt-0" }],
   },
   selectedLabels: {
-    base: "w-full !leading-none items-center whitespace-nowrap",
+    base: "w-full leading-none! items-center whitespace-nowrap",
     variants: {
       size: {
         sm: "text-small",
@@ -121,7 +121,7 @@ export default /*tw*/ {
   clear: "{>toggle}",
   clearIcon: "{UIcon} {>selectIcon}",
   placeholder: {
-    base: "flex items-center text-muted !leading-none shrink-0",
+    base: "flex items-center text-muted leading-none! shrink-0",
     variants: {
       size: {
         sm: "text-small",

package/ui.form-textarea/config.ts

@@ -21,10 +21,10 @@ export default /*tw*/ {
     `,
     variants: {
       error: {
-        true: "!border-error focus-within:outline-error",
+        true: "border-error! focus-within:outline-error",
       },
       disabled: {
-        true: "!border-default focus-within:outline-0 bg-lifted",
+        true: "border-default! focus-within:outline-0 bg-lifted",
       },
     },
   },

package/ui.image-icon/config.ts

@@ -28,7 +28,7 @@ export default /*tw*/ {
         true: "cursor-pointer hover:text-{color}-lifted active:text-{color}-accented",
       },
       disabled: {
-        true: "!text-{color}/(--vl-disabled-opacity) cursor-not-allowed",
+        true: "text-{color}/(--vl-disabled-opacity)! cursor-not-allowed",
       },
     },
   },

package/ui.navigation-breadcrumbs/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   breadcrumbs: "flex items-center gap-1 py-2",
   breadcrumbLink: "{ULink}",
-  breadcrumbLinkEmpty: "{>breadcrumbLink} !text-default cursor-default",
+  breadcrumbLinkEmpty: "{>breadcrumbLink} text-default! cursor-default",
   breadcrumbIcon: {
     base: "{UIcon}",
     defaults: {

package/ui.text-badge/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border border-solid rounded-medium !leading-none outline-hidden
+      border border-solid rounded-medium leading-none! outline-hidden
     `,
     variants: {
       variant: {

package/ui.text-file/config.ts

@@ -21,7 +21,7 @@ export default /*tw*/ {
       },
     },
   },
-  fileLabel: "{ULink} break-all !leading-[1.5]",
+  fileLabel: "{ULink} break-all leading-normal!",
   removeIcon: {
     base: "{UIcon}",
     defaults: {

package/ui.text-header/config.ts

@@ -27,7 +27,7 @@ export default /*tw*/ {
         bold: "font-bold",
       },
       line: {
-        true: "!leading-none",
+        true: "leading-none!",
       },
     },
     compoundVariants: [

package/ui.text-key/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   key: {
     base: `
       inline-flex items-center justify-center gap-1 border border-solid
-      rounded-small font-medium font-mono !leading-none outline-hidden
+      rounded-small font-medium font-mono leading-none! outline-hidden
     `,
     variants: {
       variant: {

package/ui.text-notify/config.ts

@@ -23,7 +23,7 @@ export default /*tw*/ {
   warningIcon: "{UIcon} {>statusIcon} text-warning",
   errorIcon: "{UIcon} {>statusIcon} text-error",
   infoIcon: "{UIcon} {>statusIcon} text-info",
-  closeIcon: "{UIcon} !text-inverted opacity-75",
+  closeIcon: "{UIcon} text-inverted! opacity-75",
   positionClasses: {
     page: "UNotifyPage",
     aside: "UNotifyAside",