@wishbone-media/spark 0.24.0 → 0.25.0

package/dist/index.css

@@ -1 +1 @@
-.spark-table-pagination-per-page[data-v-9ef8544b]{@apply flex items-center;}.spark-table-search[data-v-976170dc]{@apply relative flex items-center;}.spark-table-filter-select[data-v-642dbc69],.spark-table-filter-buttons[data-v-0fcd0cce]{@apply flex items-center gap-2;}.spark-table-filter-buttons-label[data-v-0fcd0cce]{@apply text-sm font-medium text-gray-700;}.spark-table-date-picker[data-v-44ef9cb8]{@apply flex items-center gap-2;}.spark-table-reset[data-v-45343158]{@apply flex items-center;}
+.spark-table-pagination-per-page[data-v-9ef8544b]{@apply flex items-center;}.spark-table-search[data-v-976170dc]{@apply relative flex items-center;}.spark-table-filter-select[data-v-642dbc69],.spark-table-filter-buttons[data-v-01a49899]{@apply flex items-center gap-2;}.spark-table-filter-buttons-label[data-v-01a49899]{@apply text-sm font-medium text-gray-700;}.spark-table-date-picker[data-v-44ef9cb8]{@apply flex items-center gap-2;}.spark-table-reset[data-v-0894e3bf]{@apply flex items-center;}

package/dist/index.js

@@ -1024,19 +1024,19 @@ const X = new _s(), fn = {
       let r = "", i = "";
       switch (s.size) {
         case "xs":
-          r += " px-2 py-1 text-xs", i = "sm";
+          r += " px-4 py-1 text-xs", i = "sm";
           break;
         case "sm":
-          r += " px-2 py-1 text-sm", i = "sm";
+          r += " px-4 py-1 text-sm", i = "sm";
           break;
         case "md":
-          r += " px-2.5 py-1.5 text-sm", i = "md";
+          r += " px-5 py-1.5 text-sm", i = "md";
           break;
         case "lg":
-          r += " px-3 py-2 text-sm", i = "md";
+          r += " px-6 py-2 text-sm", i = "md";
           break;
         case "xl":
-          r += " px-3.5 py-2.5 min-h-[42px] text-sm", i = "md";
+          r += " px-7 py-2.5 min-h-[42px] text-sm", i = "md";
           break;
       }
       if (o?.isInGroup && l.value) {
@@ -1097,7 +1097,7 @@ const X = new _s(), fn = {
   }
 }, Ks = { class: "divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100" }, Gs = {
   key: 0,
-  class: "p-5"
+  class: "px-[30px] py-5"
 }, Ws = {
   key: 1,
   class: "p-5"
@@ -2232,6 +2232,7 @@ const ko = (e) => {
           (m(!0), h(R, null, D(e.config.options, (i) => (m(), V(G, {
             key: i.value,
             size: "xl",
+            "button-class": "px-3.5",
             variant: n(i.value) ? "primary" : "secondary",
             onClick: (u) => a(i.value)
           }, {
@@ -2245,7 +2246,7 @@ const ko = (e) => {
       })
     ]));
   }
-}, oa = /* @__PURE__ */ ee(sa, [["__scopeId", "data-v-0fcd0cce"]]), aa = { class: "spark-table-date-picker" }, ra = {
+}, oa = /* @__PURE__ */ ee(sa, [["__scopeId", "data-v-01a49899"]]), aa = { class: "spark-table-date-picker" }, ra = {
   __name: "SparkTableDatePicker",
   props: {
     /** SparkTable instance object */
@@ -2340,6 +2341,7 @@ const ko = (e) => {
         b(G, {
           onClick: t,
           variant: "secondary",
+          "button-class": "px-3.5",
           size: "xl"
         }, {
           default: T(() => [
@@ -2355,7 +2357,7 @@ const ko = (e) => {
       ]);
     };
   }
-}, ua = /* @__PURE__ */ ee(ca, [["__scopeId", "data-v-45343158"]]), da = { class: "spark-table" }, pa = {
+}, ua = /* @__PURE__ */ ee(ca, [["__scopeId", "data-v-0894e3bf"]]), da = { class: "spark-table" }, pa = {
   key: 1,
   class: "pt-5"
 }, fa = {

package/formkit.config.js

@@ -11,7 +11,8 @@ import {
   repeater,
   slider,
   taglist,
-  toggle
+  toggle,
+  togglebuttons,
 } from '@formkit/pro';
 import { rootClasses } from '@wishbone-media/spark/formkit.theme.mjs';
 
@@ -46,7 +47,8 @@ export default function createFormKitConfig(formKitProKey) {
     repeater,
     slider,
     taglist,
-    toggle
+    toggle,
+    togglebuttons,
   });
 
   return defaultConfig({

package/formkit.theme.mjs

@@ -4,7 +4,7 @@
   * edited unless you’d like to "eject" from the CLI’s ability to update it.
   *
   * @checksum - 1eae4380e10949209f98a9643e3429638d6f557cbf8b782df51ce060e972c466
-  * @variables - radius=rounded-md,accentColor=primary,colorTemperature=gray,spacing=2.5,scale=sm,inputShadow=shadow-xs,baseColorShade=600,borderShadeLightMode=300,borderShadeDarkMode=700,inputMaxWidth=max-w-[24em],tagRadius=rounded-sm,swatchRadius=rounded-sm
+  * @variables - radius=rounded-md,accentColor=primary,colorTemperature=gray,spacing=2.5,scale=sm,inputShadow=shadow-xs,baseColorShade=600,borderShadeLightMode=300,borderShadeDarkMode=700,inputMaxWidth=max-w-full,tagRadius=rounded-sm,swatchRadius=rounded-sm
   * @theme - regenesis
   **/
 
@@ -53,13 +53,12 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
-    "font-bold": true,
+    "font-semibold": true,
     "rounded-md": true,
     "outline-hidden": true,
     "flex": true,
-    "!text-xs": true,
     "px-8": true,
     "py-3.5": true,
     "items-center": true,
@@ -87,7 +86,7 @@ const classes = {
   },
   "family:box__legend": {
     "block": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-xs": true,
     "font-bold": true,
     "dark:text-gray-300": true,
@@ -98,7 +97,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "peer": true,
     "pointer-events-none": true,
@@ -198,12 +197,7 @@ const classes = {
   },
   "family:text__label": {
     "block": true,
-    "text-gray-700": true,
-    "text-xs": true,
-    "font-bold": true,
-    "dark:text-gray-300": true,
     "!inline-flex": true,
-    "mb-1.5": true
   },
   "family:text__inner": {
     "text-sm": true,
@@ -237,10 +231,10 @@ const classes = {
     "appearance-none": true,
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "text-sm": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "min-w-0": true,
     "min-h-[1.25em]": true,
     "grow": true,
@@ -314,14 +308,14 @@ const classes = {
     "appearance-none": true,
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "grow": true,
     "p-2.5": true,
     "pr-0": true,
     "pl-3.5": true,
     "text-sm": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-ellipsis": true,
     "min-w-0": true,
     "outline-hidden": true,
@@ -343,7 +337,7 @@ const classes = {
     "text-sm": true,
     "flex": true,
     "items-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "z-1000": true,
     "dark:text-gray-300": true,
     "data-[disabled]:cursor-not-allowed": true
@@ -354,7 +348,7 @@ const classes = {
     "text-sm": true,
     "flex": true,
     "items-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "hover:text-red-400": true,
     "z-1000": true,
     "dark:text-gray-300": true
@@ -462,11 +456,11 @@ const classes = {
     "py-2": true,
     "first:pt-2.5": true,
     "last:pb-2.5": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-sm": true,
     "data-[is-active]:bg-primary-100": true,
     "dark:text-gray-200": true,
-    "dark:data-[is-active]:text-gray-700": true,
+    "dark:data-[is-active]:text-gray-600": true,
     "before:content-['']": true,
     "before:absolute": true,
     "before:inset-0": true,
@@ -516,11 +510,11 @@ const classes = {
     "grow": true,
     "flex": true,
     "items-center": true,
-    "text-gray-700": true
+    "text-gray-600": true
   },
   "family:dropdown__selection": {
     "grow": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "group-data-[multiple]:p-2.5": true,
     "dark:text-gray-300": true
   },
@@ -559,7 +553,7 @@ const classes = {
     "[&>[type=button]]:!text-inherit": true,
     "[&>[type=button]]:cursor-pointer": true,
     "group-data-[active-selection=true]/tag:bg-primary-400": true,
-    "group-data-[active-selection=true]/tag:text-gray-700": true
+    "group-data-[active-selection=true]/tag:text-gray-600": true
   },
   "family:dropdown__tagLabel": {
     "mr-1": true
@@ -571,7 +565,7 @@ const classes = {
     "py-2": true,
     "first:pt-2.5": true,
     "last:pb-2.5": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-xs": true,
     "aria-selected:text-white": true,
     "aria-selected:bg-primary-600": true
@@ -581,7 +575,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "bg-primary-50": true,
     "hover:bg-primary-100": true,
@@ -611,7 +605,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "!w-14": true,
     "bg-transparent": true,
@@ -655,7 +649,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "focus:[&::-webkit-datetime-edit-day-field]:bg-primary-100": true,
     "focus:[&::-webkit-datetime-edit-month-field]:bg-primary-100": true,
@@ -666,7 +660,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "focus:[&::-webkit-datetime-edit-day-field]:bg-primary-100": true,
     "focus:[&::-webkit-datetime-edit-month-field]:bg-primary-100": true,
@@ -692,7 +686,7 @@ const classes = {
     "flex": true,
     "min-w-0": true,
     "items-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "mb-2": true,
     "last:mb-0": true,
     "dark:text-gray-300": true
@@ -746,7 +740,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "cursor-pointer": true,
     "text-transparent": true,
@@ -771,7 +765,8 @@ const classes = {
     "mr-2.5": true
   },
   "form__form": {
-    "group/form": true
+    "group/form": true,
+    "w-full": true,
   },
   "form__actions": {
     "": true
@@ -790,7 +785,7 @@ const classes = {
   },
   "form__summaryHeader": {
     "text-base": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "font-bold": true,
     "mb-2.5": true,
     "dark:text-gray-300": true
@@ -816,7 +811,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "focus:[&::-webkit-datetime-edit-month-field]:bg-primary-100": true,
     "focus:[&::-webkit-datetime-edit-year-field]:bg-primary-100": true
@@ -840,7 +835,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "group/input": true,
     "cursor-pointer": true,
@@ -916,7 +911,7 @@ const classes = {
     "appearance-none": true,
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "grow": true,
     "p-2.5": true,
@@ -924,7 +919,7 @@ const classes = {
     "px-3.5": true,
     "pr-[2em]": true,
     "text-sm": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-ellipsis": true,
     "min-w-0": true,
     "outline-hidden": true,
@@ -944,7 +939,7 @@ const classes = {
   "select__selectIcon": {
     "absolute": true,
     "w-[1em]": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "pointer-events-none": true,
     "right-2.5": true,
     "group-data-[suffix-icon]:mr-[1.5em]": true,
@@ -952,7 +947,7 @@ const classes = {
   },
   "select__optGroup": {
     "bg-white": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "group/optgroup": true,
     "group-data-[multiple]:px-1.5": true,
     "pt-1.5": true,
@@ -963,7 +958,7 @@ const classes = {
   },
   "select__option": {
     "bg-white": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "group-data-[disabled]:opacity-50": true,
     "group-data-[disabled]:select-none": true,
     "group-data-[multiple]:checked:bg-primary-100": true,
@@ -1006,10 +1001,8 @@ const classes = {
   },
   "submit__outer": {
     "group": true,
-    "max-w-[24em]": true,
+    "max-w-full": true,
     "min-w-0": true,
-    "grow": true,
-    "mb-4": true,
     "data-[disabled]:select-none": true,
     "text-sm": true,
     "data-[disabled]:opacity-100": true
@@ -1019,10 +1012,14 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "bg-primary-600": true,
     "!text-white": true,
+    "!text-sm": true,
+    "!py-2": true,
+    "!mb-0": true,
+    "border-0": true,
     "active:text-primary-100": true,
     "active:bg-primary-700": true,
     "hover:bg-primary-700": true,
@@ -1101,11 +1098,11 @@ const classes = {
     "appearance-none": true,
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "text-sm": true,
     "h-28": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "min-w-0": true,
     "grow": true,
     "shrink": true,
@@ -1157,7 +1154,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "focus:[&::-webkit-datetime-edit-hour-field]:bg-primary-100": true,
     "focus:[&::-webkit-datetime-edit-minute-field]:bg-primary-100": true,
@@ -1168,7 +1165,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "focus:[&::-webkit-datetime-edit-week-field]:bg-primary-100": true,
     "focus:[&::-webkit-datetime-edit-year-field]:bg-primary-100": true
@@ -1207,7 +1204,7 @@ const classes = {
   },
   "colorpicker__outer": {
     "group": true,
-    "max-w-[24em]": true,
+    "max-w-full": true,
     "min-w-0": true,
     "grow": true,
     "mb-4": true,
@@ -1268,14 +1265,14 @@ const classes = {
   },
   "colorpicker__valueString": {
     "text-sm": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "selection:bg-primary-100": true,
     "font-mono": true,
     "inline-block": true,
     "ml-2.5": true,
     "mr-1.5": true,
     "dark:text-gray-300": true,
-    "dark:selection:text-gray-700": true
+    "dark:selection:text-gray-600": true
   },
   "colorpicker__panel": {
     "absolute": true,
@@ -1459,12 +1456,12 @@ const classes = {
   },
   "colorpicker__colorField": {
     "bg-transparent": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "border": true,
     "border-gray-200": true,
     "dark:border-gray-800": true,
     "dark:text-gray-300": true,
-    "dark:selection:text-gray-700": true
+    "dark:selection:text-gray-600": true
   },
   "colorpicker__colorInputGroup": {
     "flex": true,
@@ -1481,7 +1478,7 @@ const classes = {
     "mr-1.5": true,
     "[&>input]:p-1": true,
     "[&>input]:text-sm": true,
-    "[&>input]:text-gray-700": true,
+    "[&>input]:text-gray-600": true,
     "[&>input]:selection:bg-primary-100": true,
     "[&>input]:m-0": true,
     "[&>input]:grow": true,
@@ -1613,7 +1610,7 @@ const classes = {
     "items-center": true,
     "ml-1.5": true,
     "mr-2.5": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "hover:text-red-400": true,
     "z-1000": true,
     "dark:text-gray-300": true
@@ -1663,7 +1660,7 @@ const classes = {
     "flex": true,
     "items-center": true,
     "justify-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "[&_svg]:w-[1.25em]": true,
     "dark:text-gray-300": true,
     "dark:border-gray-800": true,
@@ -1679,7 +1676,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "placeholder:text-gray-400": true
   },
@@ -1706,7 +1703,7 @@ const classes = {
     "m-2": true,
     "p-1.5": true,
     "text-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "rounded-md": true,
     "bg-gray-200": true,
     "aria-selected:!bg-primary-600": true,
@@ -1716,7 +1713,7 @@ const classes = {
     "focus:outline-primary-600": true,
     "focus:outline-offset-2": true,
     "focus:bg-white": true,
-    "focus:text-gray-700": true,
+    "focus:text-gray-600": true,
     "data-[is-extra=true]:opacity-25": true,
     "group-data-[disabled=true]:opacity-50": true,
     "group-data-[disabled=true]:cursor-default": true,
@@ -1728,7 +1725,7 @@ const classes = {
     "flex": true,
     "items-center": true,
     "justify-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "col-start-2": true,
     "col-end-2": true,
     "dark:text-gray-300": true
@@ -1741,7 +1738,7 @@ const classes = {
   "datepicker__year": {
     "text-sm": true,
     "text-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "items-center": true,
     "m-2": true,
     "p-1.5": true,
@@ -1767,7 +1764,7 @@ const classes = {
   },
   "datepicker__weekDay": {
     "w-[2.25em]": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "m-2": true,
     "rounded-md": true,
     "font-medium": true,
@@ -1789,7 +1786,7 @@ const classes = {
     "items-center": true,
     "justify-center": true,
     "text-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "w-[2.25em]": true,
     "h-[2.25em]": true,
     "m-1": true,
@@ -1813,14 +1810,14 @@ const classes = {
     "dark:aria-selected:text-white": true,
     "dark:focus:outline-primary-600": true,
     "dark:focus:bg-gray-200": true,
-    "dark:focus:text-gray-700": true
+    "dark:focus:text-gray-600": true
   },
   "datepicker__timeInput": {
     "w-full": true,
     "border-2": true,
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "border-gray-200": true,
     "rounded-md": true,
     "p-2": true,
@@ -1855,13 +1852,13 @@ const classes = {
     "flex": true,
     "w-[0.75em]": true,
     "select-none": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "[&>svg]:w-full": true,
     "dark:text-gray-300": true
   },
   "datepicker__dayButton": {
     "appearance-none": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "cursor-pointer": true,
     "px-3": true,
     "py-1": true,
@@ -1880,7 +1877,7 @@ const classes = {
   },
   "datepicker__monthButton": {
     "appearance-none": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "cursor-pointer": true,
     "px-3": true,
     "py-1": true,
@@ -1899,7 +1896,7 @@ const classes = {
   },
   "datepicker__yearButton": {
     "appearance-none": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "cursor-pointer": true,
     "px-3": true,
     "py-1": true,
@@ -1937,7 +1934,7 @@ const classes = {
     "flex": true,
     "w-[0.75em]": true,
     "select-none": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "[&>svg]:w-full": true,
     "dark:text-gray-300": true
   },
@@ -1983,7 +1980,7 @@ const classes = {
     "pl-3.5": true,
     "pr-0": true,
     "text-sm": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-left": true,
     "group-data-[disabled]:!cursor-not-allowed": true,
     "group-data-[prefix-icon]:!pl-0": true,
@@ -2041,7 +2038,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "group-data-[has-overlay]:!caret-gray-700": true,
     "dark:group-data-[has-overlay]:!caret-gray-300": true
@@ -2105,7 +2102,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "outline-hidden": true
   },
@@ -2125,7 +2122,7 @@ const classes = {
   },
   "repeater__legend": {
     "block": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-xs": true,
     "font-bold": true,
     "dark:text-gray-300": true,
@@ -2313,7 +2310,7 @@ const classes = {
   },
   "slider__outer": {
     "group": true,
-    "max-w-[24em]": true,
+    "max-w-full": true,
     "min-w-0": true,
     "grow": true,
     "mb-4": true,
@@ -2533,7 +2530,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "!p-0": true,
     "!w-[0%]": true,
@@ -2577,7 +2574,7 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
     "peer": true,
     "absolute": true,
@@ -2653,7 +2650,6 @@ const classes = {
     "mb-1.5": true
   },
   "togglebuttons__wrapper": {
-    "mb-2": true
   },
   "togglebuttons__options": {
     "group/options": true,
@@ -2668,15 +2664,19 @@ const classes = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true,
-    "!px-5": true,
+    "!text-sm": true,
+    "!px-3.5": true,
+    "!py-2.5": true,
     "!mb-0": true,
     "relative": true,
     "focus:z-10": true,
     "group-data-[vertical=true]/options:w-full": true,
     "justify-center": true,
-    "bg-primary-50": true,
+    "bg-white": true,
+    "!border-gray-300": true,
+    "!font-normal": true,
     "disabled:opacity-50": true,
     "disabled:cursor-not-allowed": true,
     "group-data-[disabled]:disabled:opacity-100": true,
@@ -2684,6 +2684,7 @@ const classes = {
     "dark:disabled:bg-transparent": true,
     "dark:disabled:text-primary-500": true,
     "dark:text-primary-500": true,
+    "aria-[pressed=false]:text-gray-900": true,
     "aria-[pressed=true]:bg-primary-600": true,
     "aria-[pressed=true]:text-white": true,
     "dark:aria-[pressed=true]:bg-primary-600": true,
@@ -2790,7 +2791,7 @@ const classes = {
     "text-center": true,
     "rounded-xl": true,
     "bg-gray-200": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "dark:bg-gray-500": true,
     "dark:text-gray-300": true
   },
@@ -2806,7 +2807,7 @@ const classes = {
   "transferlist__transferlistListItem": {
     "py-2.5": true,
     "px-2.5": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "ring-1": true,
     "ring-gray-200": true,
     "aria-selected:bg-primary-100": true,
@@ -2911,12 +2912,12 @@ const classes = {
     "border-gray-200": true,
     "rounded-md": true,
     "items-center": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "selection:bg-primary-100": true,
     "dark:border-gray-800": true,
     "dark:text-gray-300": true,
     "dark:selection:bg-primary-100": true,
-    "dark:selection:text-gray-700": true,
+    "dark:selection:text-gray-600": true,
     "dark:bg-gray-800": true
   },
   "transferlist__transferlistSearchInput": {
@@ -2956,7 +2957,7 @@ const classes = {
     "text-sm": true,
     "shrink-0": true,
     "box-content": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "disabled:bg-gray-200": true,
     "disabled:!text-gray-400": true,
     "bg-gray-50": true,
@@ -3030,7 +3031,7 @@ const classes = {
   },
   "barcode__barcodeIcon": {
     "w-[1.5em]": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "cursor-pointer": true,
     "dark:text-gray-300": true
   },
@@ -3069,7 +3070,7 @@ const classes = {
     "[&>svg]:m-auto": true
   },
   "barcode__overlay": {
-    "text-gray-700": true,
+    "text-gray-600": true,
     "dark:text-gray-300": true,
     "absolute": true,
     "top-1/2": true,
@@ -3176,7 +3177,7 @@ const classes = {
     "group-data-[tab-style=tab]/wrapper:items-center": true,
     "group-data-[tab-style=tab]/wrapper:justify-center": true,
     "group-data-[tab-style=tab]/wrapper:cursor-pointer": true,
-    "group-data-[tab-style=tab]/wrapper:text-gray-700": true,
+    "group-data-[tab-style=tab]/wrapper:text-gray-600": true,
     "group-data-[tab-style=tab]/wrapper:bg-gray-100": true,
     "group-data-[tab-style=tab]/wrapper:py-4": true,
     "group-data-[tab-style=tab]/wrapper:px-5": true,
@@ -3301,7 +3302,7 @@ const classes = {
 const globals = {
   "outer": {
     "group": true,
-    "max-w-[24em]": true,
+    "max-w-full": true,
     "min-w-0": true,
     "grow": true,
     "mb-4": true,
@@ -3312,14 +3313,14 @@ const globals = {
   "label": {
     "block": true,
     "text-gray-700": true,
-    "text-xs": true,
-    "font-bold": true,
-    "mb-1.5": true,
+    "text-sm": true,
+    "font-medium": true,
+    "mb-1": true,
     "dark:text-gray-300": true
   },
   "legend": {
     "block": true,
-    "text-gray-700": true,
+    "text-gray-600": true,
     "text-xs": true,
     "font-bold": true,
     "dark:text-gray-300": true
@@ -3329,7 +3330,7 @@ const globals = {
     "[color-scheme:light]": true,
     "dark:[color-scheme:dark]": true,
     "selection:bg-primary-100": true,
-    "selection:text-gray-700": true,
+    "selection:text-gray-600": true,
     "group-data-[has-overlay]:selection:!text-transparent": true
   },
   "prefixIcon": {
@@ -3382,6 +3383,9 @@ const globals = {
     "[line-height:1em]": true,
     "dark:text-gray-400": true
   },
+  "messages": {
+    "mt-2": true,
+  },
   "message": {
     "text-red-600": true,
     "mb-2": true,
@@ -3390,7 +3394,7 @@ const globals = {
     "dark:text-red-400": true
   },
   "overlay": {
-    "text-gray-700": true,
+    "text-gray-600": true,
     "dark:text-gray-300": true
   },
   "overlayPlaceholder": {
@@ -3398,15 +3402,15 @@ const globals = {
     "dark:text-gray-400/50": true
   },
   "overlayLiteral": {
-    "text-gray-700": true,
+    "text-gray-600": true,
     "dark:text-gray-300": true
   },
   "overlayChar": {
-    "text-gray-700": true,
+    "text-gray-600": true,
     "dark:text-gray-300": true
   },
   "overlayEnum": {
-    "text-gray-700": true,
+    "text-gray-600": true,
     "dark:text-gray-300": true
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/assets/css/spark-table.css

@@ -9,7 +9,7 @@
   --ht-header-highlighted-background-color: transparent;
 }
 
-.spark-table .handsontable td.current {
+.spark-table .handsontable td.current:not(.spark-table-cell-actions) {
   @apply relative;
 
   &::before {

package/src/components/SparkButton.vue

@@ -93,23 +93,23 @@ const computedButtonClass = computed(() => {
 
   switch (props.size) {
     case 'xs':
-      classes += ' px-2 py-1 text-xs'
+      classes += ' px-4 py-1 text-xs'
       roundingSize = 'sm'
       break
     case 'sm':
-      classes += ' px-2 py-1 text-sm'
+      classes += ' px-4 py-1 text-sm'
       roundingSize = 'sm'
       break
     case 'md':
-      classes += ' px-2.5 py-1.5 text-sm'
+      classes += ' px-5 py-1.5 text-sm'
       roundingSize = 'md'
       break
     case 'lg':
-      classes += ' px-3 py-2 text-sm'
+      classes += ' px-6 py-2 text-sm'
       roundingSize = 'md'
       break
     case 'xl':
-      classes += ' px-3.5 py-2.5 min-h-[42px] text-sm'
+      classes += ' px-7 py-2.5 min-h-[42px] text-sm'
       roundingSize = 'md'
       break
   }

package/src/components/SparkCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100">
-    <div v-if="$slots.header" class="p-5">
+    <div v-if="$slots.header" class="px-[30px] py-5">
       <slot name="header" />
     </div>
 

package/src/components/plugins/SparkTableFilterButtons.vue

@@ -6,6 +6,7 @@
         v-for="option in config.options"
         :key="option.value"
         size="xl"
+        button-class="px-3.5"
         :variant="isSelected(option.value) ? 'primary' : 'secondary'"
         @click="handleSelect(option.value)"
       >

package/src/components/plugins/SparkTableReset.vue

@@ -3,6 +3,7 @@
     <SparkButton
       @click="handleReset"
       variant="secondary"
+      button-class="px-3.5"
       size="xl"
     >
       <font-awesome-icon v-if="config.icon" :icon="['far', config.icon]" :class="{'mr-1.5': config.label}"/>