vueless 1.2.8-beta.16 → 1.2.8-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.16",
+  "version": "1.2.8-beta.18",
   "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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
-      border border-transparent transition cursor-pointer
+      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
     `,
@@ -17,7 +17,7 @@ export default /*tw*/ {
       },
       variant: {
         solid: `
-          text-inverted bg-{color}
+          bg-{color} border-transparent text-inverted
           hover:bg-{color}-lifted
           active:bg-{color}-accented
           disabled:!bg-{color}/(--vl-disabled-opacity)
@@ -35,13 +35,13 @@ export default /*tw*/ {
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/10
         `,
         soft: `
-          text-{color} bg-{color}/5
+          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
         `,
         ghost: `
-          text-{color} bg-transparent
+          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

package/ui.button/tests/UButton.test.ts

@@ -12,11 +12,11 @@ describe("UButton.vue", () => {
     it("Variant – applies the correct variant class", async () => {
       const color = "primary";
       const variants = {
-        solid: "text-inverted bg-primary",
+        solid: "bg-primary border-transparent text-inverted",
         outlined: "text-primary border-primary",
         subtle: "text-primary bg-primary/5 border-primary/15",
-        soft: "text-primary bg-primary/5",
-        ghost: "text-primary bg-transparent",
+        soft: "text-primary bg-primary/5 border-transparent",
+        ghost: "text-primary bg-transparent border-transparent",
       };
 
       Object.entries(variants).forEach(([variant, classes]) => {

package/ui.button-toggle/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
       },
       split: {
         true: "flex-wrap",
-        false: "flex-nowrap gap-px p-1 w-fit border rounded-medium border-default",
+        false: "flex-nowrap gap-px p-1 w-fit border border-solid rounded-medium border-default",
       },
       disabled: {
         true: "bg-lifted cursor-not-allowed",
@@ -26,7 +26,7 @@ export default /*tw*/ {
     },
   },
   divider: {
-    base: "my-1 border-r border-muted last:hidden",
+    base: "my-1 border-r border-solid border-muted last:hidden",
     variants: {
       split: {
         true: "hidden",

package/ui.container-card/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 md:p-6 border rounded-large w-full text-medium",
+    base: "p-4 md:p-6 border border-solid rounded-large w-full text-medium",
     variants: {
       variant: {
         solid: "bg-default border-transparent",

package/ui.data-table/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-medium",
   stickyHeader: {
-    base: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
+    base: "fixed top-0 flex items-center z-30 overflow-hidden border border-solid rounded-none",
     variants: {
       stickedHeader: {
         false: "absolute",
@@ -29,12 +29,12 @@ export default /*tw*/ {
   stickyHeaderLoader: "{ULoaderProgress} absolute top-auto bottom-0",
   headerActionsCheckbox: "{UCheckbox}",
   headerActionsCounter: "{>headerCounterBase} -ml-1.5",
-  tableWrapper: "border border-muted rounded-medium bg-default overflow-x-auto",
+  tableWrapper: "border border-solid border-muted rounded-medium bg-default overflow-x-auto",
   table: "min-w-full border-none text-medium w-full table-auto",
   header:
     "border-b border-muted [&>tr:first-child>*]:first:rounded-tl-medium [&>tr:last-child>*]:last:rounded-tr-medium relative",
   headerRow: "",
-  beforeHeaderRow: "border border-muted",
+  beforeHeaderRow: "border border-solid border-muted",
   beforeHeaderCell: "{>headerCellBase}",
   headerCellBase: {
     base: "p-4 text-medium font-normal text-lifted text-left text-nowrap",
@@ -100,7 +100,7 @@ export default /*tw*/ {
     },
   },
   stickyFooterRow: `
-    fixed bottom-0 -ml-px border border-b border-muted bg-default
+    fixed bottom-0 -ml-px border-b border-solid border-muted bg-default
     collapse group-[*]/footer-fixed:[visibility:inherit]
   `,
   i18n: {

package/ui.form-calendar/config.ts

@@ -1,5 +1,7 @@
 export default /*tw*/ {
-  wrapper: "p-3 w-[19rem] border border-default rounded-medium bg-default shadow-sm overflow-hidden focus:outline-hidden",
+  wrapper: `
+    p-3 w-[19rem] bg-default shadow-sm overflow-hidden focus:outline-hidden
+    border border-solid border-default rounded-medium`,
   navigation: "mb-2 pb-2 border-b border-muted flex items-center justify-between",
   viewSwitchButton: {
     base: "{UButton}",
@@ -54,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-default
+    flex items-center rounded-medium border border-solid border-default
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   checkbox: {
     base: `
       bg-default cursor-pointer transition
-      border border-default rounded-small outline-transparent
+      border border-solid border-default rounded-small outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15

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

@@ -31,7 +31,7 @@ export default /*tw*/ {
   menu: {
     base: `
       absolute z-40 mb-3 w-80 overflow-hidden rounded-medium
-      border border-default bg-default p-2 shadow-sm focus:outline-hidden
+      border border-solid border-default bg-default p-2 shadow-sm focus:outline-hidden
     `,
     variants: {
       openDirectionX: {

package/ui.form-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border rounded-medium border-default outline-transparent
+      border border-solid rounded-medium border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-listbox/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       my-2 p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
-      rounded-medium border border-default bg-default
+      rounded-medium border border-solid border-default bg-default
       overflow-auto [-webkit-overflow-scrolling:touch]
       focus:outline-hidden
     `,

package/ui.form-radio/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-default rounded-full outline-transparent
+      border border-solid border-default rounded-full outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15

package/ui.form-select/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-default bg-default outline-transparent
+      rounded-medium border border-solid border-default bg-default outline-transparent
       hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-textarea/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-default outline-transparent
+      rounded-medium border border-solid border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.text-alert/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 border-box flex flex-col border rounded-medium w-full",
+    base: "p-4 border-box flex flex-col border border-solid rounded-medium w-full",
     variants: {
       variant: {
         solid: "text-inverted bg-{color} border-transparent",

package/ui.text-badge/config.ts

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

package/utils/theme.ts

@@ -763,7 +763,7 @@ function setCSSVariables(
     .join(" ");
 
   const rootVariables = `
-    :root {${variablesString}}
+    :host, :root {${variablesString}}
     .${DARK_MODE_CLASS} {${darkVariablesString}}
   `;