jattac.libs.web.zest-button 1.2.7 → 1.2.9

package/README.md

@@ -51,3 +51,7 @@ To get started, check out our **Cookbook** of practical recipes.
 ### License
 
 Licensed under [MIT](./LICENSE).
+
+---
+
+[Next: The Cookbook (Examples) ➡️](./docs/examples.md)

package/dist/index.cjs.js

@@ -1386,7 +1386,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Styles/ZestButton.module.css */\n\n/* Define base variables for light mode */\n:root {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n/* Dark mode adjustments via system preference */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --zest-color-standard-bg: #3b82f6;\n    --zest-color-standard-bg-hover: #2563eb;\n    --zest-color-standard-text: white;\n    --zest-color-standard-border: #3b82f6;\n\n    --zest-color-success-bg: #34d399;\n    --zest-color-success-bg-hover: #10b981;\n    --zest-color-success-text: white;\n    --zest-color-success-border: #34d399;\n\n    --zest-color-danger-bg: #ef4444;\n    --zest-color-danger-bg-hover: #dc2626;\n    --zest-color-danger-text: white;\n    --zest-color-danger-border: #ef4444;\n\n    --zest-color-disabled-bg: #4b5563;\n    --zest-color-disabled-bg-hover: #6b7280;\n    --zest-color-disabled-text: #9ca3af;\n    --zest-color-disabled-border: #4b5563;\n\n    --zest-color-icon-success: #34d399;\n    --zest-color-icon-fail: #ef4444;\n  }\n}\n\n/* Theme override classes */\n.ZestButton-module_force-light__zZTIZ {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n.ZestButton-module_force-dark__cx74D {\n  --zest-color-standard-bg: #3b82f6;\n  --zest-color-standard-bg-hover: #2563eb;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #3b82f6;\n\n  --zest-color-success-bg: #34d399;\n  --zest-color-success-bg-hover: #10b981;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #34d399;\n\n  --zest-color-danger-bg: #ef4444;\n  --zest-color-danger-bg-hover: #dc2626;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #ef4444;\n\n  --zest-color-disabled-bg: #4b5563;\n  --zest-color-disabled-bg-hover: #6b7280;\n  --zest-color-disabled-text: #9ca3af;\n  --zest-color-disabled-border: #4b5563;\n\n  --zest-color-icon-success: #34d399;\n  --zest-color-icon-fail: #ef4444;\n}\n\n\n.ZestButton-module_button__KDafc {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n  position: relative;\n  padding: 0.6em 1.2em;\n  overflow: hidden;\n  border: none; /* Default to no border, overridden by outline/dashed */\n}\n\n/* Base styles for different button styles */\n.ZestButton-module_solid__cu4tr {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg-hover);\n}\n\n.ZestButton-module_outline__esgLq {\n  background-color: transparent;\n  border: 2px solid var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_outline__esgLq:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n\n.ZestButton-module_text__8X1xD {\n  background-color: transparent;\n  border: none;\n  color: var(--zest-color-standard-bg);\n}\n.ZestButton-module_text__8X1xD:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for text hover */\n}\n\n.ZestButton-module_dashed__ebKYF {\n  background-color: transparent;\n  border: 2px dashed var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_dashed__ebKYF:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for dashed hover */\n}\n\n\n/* Variant overrides for solid style */\n.ZestButton-module_solid__cu4tr.ZestButton-module_standard__T3EGM { /* Already handled by .solid base */ }\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg-hover);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ- {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg-hover);\n}\n\n/* Variant overrides for outline style */\n.ZestButton-module_outline__esgLq.ZestButton-module_standard__T3EGM { /* Already handled by .outline base */ }\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n\n/* Variant overrides for text style */\n.ZestButton-module_text__8X1xD.ZestButton-module_standard__T3EGM { /* Already handled by .text base */ }\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA {\n  color: var(--zest-color-success-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ- {\n  color: var(--zest-color-danger-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n/* Variant overrides for dashed style */\n.ZestButton-module_dashed__ebKYF.ZestButton-module_standard__T3EGM { /* Already handled by .dashed base */ }\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n\n/* Disabled state overrides for different button styles */\n.ZestButton-module_solid__cu4tr:disabled, .ZestButton-module_solid__cu4tr.ZestButton-module_disabled__gw6y3 {\n  background-color: var(--zest-color-disabled-bg);\n  color: var(--zest-color-disabled-text);\n  border-color: var(--zest-color-disabled-border);\n}\n.ZestButton-module_outline__esgLq:disabled, .ZestButton-module_outline__esgLq.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_text__8X1xD:disabled, .ZestButton-module_text__8X1xD.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_dashed__ebKYF:disabled, .ZestButton-module_dashed__ebKYF.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n\n\n/* Layout */\n.ZestButton-module_stretch__CTLNw {\n  width: 100%;\n}\n\n.ZestButton-module_sm__G1vAP {\n  font-size: 0.85rem;\n  padding: 0.4em 0.8em;\n}\n\n.ZestButton-module_md__Y-PMO {\n  font-size: 1rem;\n  padding: 0.6em 1.2em;\n}\n\n.ZestButton-module_lg__AQgdf {\n  font-size: 1.125rem;\n  padding: 0.8em 1.6em;\n}\n\n.ZestButton-module_inner__1j2Fr {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.ZestButton-module_spinner__l2hLe {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  animation: ZestButton-module_spin__4asdw 0.75s linear infinite;\n  color: currentColor; /* Inherit color from button text */\n}\n\n.ZestButton-module_content__hlea3 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n}\n\n.ZestButton-module_label__8x263 {\n  display: inline-block;\n}\n\n.ZestButton-module_icon__B3DFi {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Success + Fail Icons */\n.ZestButton-module_animatedCheck__8K4K- {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-success);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n.ZestButton-module_animatedX__KQnt7 {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-fail);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n/* Stroke animations */\n.ZestButton-module_animatedCheck__8K4K- path {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n.ZestButton-module_animatedX__KQnt7 line {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n/* New: apply spacing between left icon and text */\n.ZestButton-module_icon__B3DFi:first-child {\n  margin-right: 0.7em;\n}\n\n/* Optional override for iconRight if needed */\n.ZestButton-module_icon__B3DFi:last-child {\n  margin-left: 0.7em;\n}\n\n/* Animations */\n@keyframes ZestButton-module_spin__4asdw {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ZestButton-module_drawCheck__3DyjT {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes ZestButton-module_fadeIn__iEave {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes ZestButton-module_shakeIt__ox-R3 {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n.ZestButton-module_shake__NtIjf {\n  animation: ZestButton-module_shakeIt__ox-R3 0.4s ease;\n  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);\n}\n";
+var css_248z = "/* Styles/ZestButton.module.css */\n\n/* Define base variables for light mode */\n:root {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n/* Dark mode adjustments via system preference */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --zest-color-standard-bg: #3b82f6;\n    --zest-color-standard-bg-hover: #2563eb;\n    --zest-color-standard-text: white;\n    --zest-color-standard-border: #3b82f6;\n\n    --zest-color-success-bg: #34d399;\n    --zest-color-success-bg-hover: #10b981;\n    --zest-color-success-text: white;\n    --zest-color-success-border: #34d399;\n\n    --zest-color-danger-bg: #ef4444;\n    --zest-color-danger-bg-hover: #dc2626;\n    --zest-color-danger-text: white;\n    --zest-color-danger-border: #ef4444;\n\n    --zest-color-disabled-bg: #4b5563;\n    --zest-color-disabled-bg-hover: #6b7280;\n    --zest-color-disabled-text: #9ca3af;\n    --zest-color-disabled-border: #4b5563;\n\n    --zest-color-icon-success: #34d399;\n    --zest-color-icon-fail: #ef4444;\n  }\n}\n\n/* Theme override classes */\n.ZestButton-module_force-light__zZTIZ {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n.ZestButton-module_force-dark__cx74D {\n  --zest-color-standard-bg: #3b82f6;\n  --zest-color-standard-bg-hover: #2563eb;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #3b82f6;\n\n  --zest-color-success-bg: #34d399;\n  --zest-color-success-bg-hover: #10b981;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #34d399;\n\n  --zest-color-danger-bg: #ef4444;\n  --zest-color-danger-bg-hover: #dc2626;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #ef4444;\n\n  --zest-color-disabled-bg: #4b5563;\n  --zest-color-disabled-bg-hover: #6b7280;\n  --zest-color-disabled-text: #9ca3af;\n  --zest-color-disabled-border: #4b5563;\n\n  --zest-color-icon-success: #34d399;\n  --zest-color-icon-fail: #ef4444;\n}\n\n\n.ZestButton-module_button__KDafc {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n  position: relative;\n  padding: 0.6em 1.2em;\n  overflow: hidden;\n  border: none; /* Default to no border, overridden by outline/dashed */\n}\n\n/* Base styles for different button styles */\n.ZestButton-module_solid__cu4tr {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg-hover);\n}\n\n.ZestButton-module_outline__esgLq {\n  background-color: transparent;\n  border: 2px solid var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_outline__esgLq:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n\n.ZestButton-module_text__8X1xD {\n  background-color: transparent;\n  border: none;\n  color: var(--zest-color-standard-bg);\n}\n.ZestButton-module_text__8X1xD:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for text hover */\n}\n\n.ZestButton-module_dashed__ebKYF {\n  background-color: transparent;\n  border: 2px dashed var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_dashed__ebKYF:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for dashed hover */\n}\n\n\n/* Variant overrides for solid style */\n.ZestButton-module_solid__cu4tr.ZestButton-module_standard__T3EGM { /* Already handled by .solid base */ }\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg-hover);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ- {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg-hover);\n}\n\n/* Variant overrides for outline style */\n.ZestButton-module_outline__esgLq.ZestButton-module_standard__T3EGM { /* Already handled by .outline base */ }\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n\n/* Variant overrides for text style */\n.ZestButton-module_text__8X1xD.ZestButton-module_standard__T3EGM { /* Already handled by .text base */ }\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA {\n  color: var(--zest-color-success-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ- {\n  color: var(--zest-color-danger-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n/* Variant overrides for dashed style */\n.ZestButton-module_dashed__ebKYF.ZestButton-module_standard__T3EGM { /* Already handled by .dashed base */ }\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n\n/* Disabled state overrides for different button styles */\n.ZestButton-module_solid__cu4tr:disabled, .ZestButton-module_solid__cu4tr.ZestButton-module_disabled__gw6y3 {\n  background-color: var(--zest-color-disabled-bg);\n  color: var(--zest-color-disabled-text);\n  border-color: var(--zest-color-disabled-border);\n}\n.ZestButton-module_outline__esgLq:disabled, .ZestButton-module_outline__esgLq.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_text__8X1xD:disabled, .ZestButton-module_text__8X1xD.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_dashed__ebKYF:disabled, .ZestButton-module_dashed__ebKYF.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n\n\n/* Layout */\n.ZestButton-module_stretch__CTLNw {\n  width: 100%;\n}\n\n.ZestButton-module_sm__G1vAP {\n  font-size: 0.85rem;\n  padding: 0.4em 0.8em;\n}\n\n.ZestButton-module_md__Y-PMO {\n  font-size: 1rem;\n  padding: 0.6em 1.2em;\n}\n\n.ZestButton-module_lg__AQgdf {\n  font-size: 1.125rem;\n  padding: 0.8em 1.6em;\n}\n\n.ZestButton-module_inner__1j2Fr {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.ZestButton-module_spinner__l2hLe {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  animation: ZestButton-module_spin__4asdw 0.75s linear infinite;\n  color: currentColor; /* Inherit color from button text */\n}\n\n.ZestButton-module_content__hlea3 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n}\n\n.ZestButton-module_label__8x263 {\n  display: inline-block;\n}\n\n.ZestButton-module_icon__B3DFi {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Success + Fail Icons */\n.ZestButton-module_animatedCheck__8K4K- {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-success);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n.ZestButton-module_animatedX__KQnt7 {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-fail);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n/* Stroke animations */\n.ZestButton-module_animatedCheck__8K4K- path {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n.ZestButton-module_animatedX__KQnt7 line {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n/* New: apply spacing between left icon and text */\n.ZestButton-module_icon__B3DFi:first-child {\n  margin-right: 0.7em;\n}\n\n/* Optional override for iconRight if needed */\n.ZestButton-module_icon__B3DFi:last-child {\n  margin-left: 0.7em;\n}\n\n/* Animations */\n@keyframes ZestButton-module_spin__4asdw {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ZestButton-module_drawCheck__3DyjT {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes ZestButton-module_fadeIn__iEave {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes ZestButton-module_shakeIt__ox-R3 {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n.ZestButton-module_shake__NtIjf {\n  animation: ZestButton-module_shakeIt__ox-R3 0.4s ease;\n  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);\n}\n\n/* Mobile-first adjustments for hit area */\n@media (max-width: 768px) {\n  .ZestButton-module_button__KDafc {\n    min-height: 44px; /* Ensure a minimum touch target size for accessibility */\n  }\n\n  .ZestButton-module_sm__G1vAP {\n    padding: 0.6em 1em; /* Increase padding for small buttons on mobile */\n  }\n\n  .ZestButton-module_md__Y-PMO {\n    padding: 0.8em 1.4em; /* Slightly increase padding for medium buttons on mobile */\n  }\n}\n\n";
 var styles = {"force-light":"ZestButton-module_force-light__zZTIZ","force-dark":"ZestButton-module_force-dark__cx74D","button":"ZestButton-module_button__KDafc","solid":"ZestButton-module_solid__cu4tr","outline":"ZestButton-module_outline__esgLq","text":"ZestButton-module_text__8X1xD","dashed":"ZestButton-module_dashed__ebKYF","standard":"ZestButton-module_standard__T3EGM","success":"ZestButton-module_success__XEptA","danger":"ZestButton-module_danger__nJpJ-","disabled":"ZestButton-module_disabled__gw6y3","stretch":"ZestButton-module_stretch__CTLNw","sm":"ZestButton-module_sm__G1vAP","md":"ZestButton-module_md__Y-PMO","lg":"ZestButton-module_lg__AQgdf","inner":"ZestButton-module_inner__1j2Fr","spinner":"ZestButton-module_spinner__l2hLe","spin":"ZestButton-module_spin__4asdw","content":"ZestButton-module_content__hlea3","label":"ZestButton-module_label__8x263","icon":"ZestButton-module_icon__B3DFi","animatedCheck":"ZestButton-module_animatedCheck__8K4K-","fadeIn":"ZestButton-module_fadeIn__iEave","animatedX":"ZestButton-module_animatedX__KQnt7","drawCheck":"ZestButton-module_drawCheck__3DyjT","shake":"ZestButton-module_shake__NtIjf","shakeIt":"ZestButton-module_shakeIt__ox-R3"};
 styleInject(css_248z);
 

package/dist/index.esm.js

@@ -1384,7 +1384,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Styles/ZestButton.module.css */\n\n/* Define base variables for light mode */\n:root {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n/* Dark mode adjustments via system preference */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --zest-color-standard-bg: #3b82f6;\n    --zest-color-standard-bg-hover: #2563eb;\n    --zest-color-standard-text: white;\n    --zest-color-standard-border: #3b82f6;\n\n    --zest-color-success-bg: #34d399;\n    --zest-color-success-bg-hover: #10b981;\n    --zest-color-success-text: white;\n    --zest-color-success-border: #34d399;\n\n    --zest-color-danger-bg: #ef4444;\n    --zest-color-danger-bg-hover: #dc2626;\n    --zest-color-danger-text: white;\n    --zest-color-danger-border: #ef4444;\n\n    --zest-color-disabled-bg: #4b5563;\n    --zest-color-disabled-bg-hover: #6b7280;\n    --zest-color-disabled-text: #9ca3af;\n    --zest-color-disabled-border: #4b5563;\n\n    --zest-color-icon-success: #34d399;\n    --zest-color-icon-fail: #ef4444;\n  }\n}\n\n/* Theme override classes */\n.ZestButton-module_force-light__zZTIZ {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n.ZestButton-module_force-dark__cx74D {\n  --zest-color-standard-bg: #3b82f6;\n  --zest-color-standard-bg-hover: #2563eb;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #3b82f6;\n\n  --zest-color-success-bg: #34d399;\n  --zest-color-success-bg-hover: #10b981;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #34d399;\n\n  --zest-color-danger-bg: #ef4444;\n  --zest-color-danger-bg-hover: #dc2626;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #ef4444;\n\n  --zest-color-disabled-bg: #4b5563;\n  --zest-color-disabled-bg-hover: #6b7280;\n  --zest-color-disabled-text: #9ca3af;\n  --zest-color-disabled-border: #4b5563;\n\n  --zest-color-icon-success: #34d399;\n  --zest-color-icon-fail: #ef4444;\n}\n\n\n.ZestButton-module_button__KDafc {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n  position: relative;\n  padding: 0.6em 1.2em;\n  overflow: hidden;\n  border: none; /* Default to no border, overridden by outline/dashed */\n}\n\n/* Base styles for different button styles */\n.ZestButton-module_solid__cu4tr {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg-hover);\n}\n\n.ZestButton-module_outline__esgLq {\n  background-color: transparent;\n  border: 2px solid var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_outline__esgLq:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n\n.ZestButton-module_text__8X1xD {\n  background-color: transparent;\n  border: none;\n  color: var(--zest-color-standard-bg);\n}\n.ZestButton-module_text__8X1xD:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for text hover */\n}\n\n.ZestButton-module_dashed__ebKYF {\n  background-color: transparent;\n  border: 2px dashed var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_dashed__ebKYF:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for dashed hover */\n}\n\n\n/* Variant overrides for solid style */\n.ZestButton-module_solid__cu4tr.ZestButton-module_standard__T3EGM { /* Already handled by .solid base */ }\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg-hover);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ- {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg-hover);\n}\n\n/* Variant overrides for outline style */\n.ZestButton-module_outline__esgLq.ZestButton-module_standard__T3EGM { /* Already handled by .outline base */ }\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n\n/* Variant overrides for text style */\n.ZestButton-module_text__8X1xD.ZestButton-module_standard__T3EGM { /* Already handled by .text base */ }\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA {\n  color: var(--zest-color-success-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ- {\n  color: var(--zest-color-danger-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n/* Variant overrides for dashed style */\n.ZestButton-module_dashed__ebKYF.ZestButton-module_standard__T3EGM { /* Already handled by .dashed base */ }\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n\n/* Disabled state overrides for different button styles */\n.ZestButton-module_solid__cu4tr:disabled, .ZestButton-module_solid__cu4tr.ZestButton-module_disabled__gw6y3 {\n  background-color: var(--zest-color-disabled-bg);\n  color: var(--zest-color-disabled-text);\n  border-color: var(--zest-color-disabled-border);\n}\n.ZestButton-module_outline__esgLq:disabled, .ZestButton-module_outline__esgLq.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_text__8X1xD:disabled, .ZestButton-module_text__8X1xD.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_dashed__ebKYF:disabled, .ZestButton-module_dashed__ebKYF.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n\n\n/* Layout */\n.ZestButton-module_stretch__CTLNw {\n  width: 100%;\n}\n\n.ZestButton-module_sm__G1vAP {\n  font-size: 0.85rem;\n  padding: 0.4em 0.8em;\n}\n\n.ZestButton-module_md__Y-PMO {\n  font-size: 1rem;\n  padding: 0.6em 1.2em;\n}\n\n.ZestButton-module_lg__AQgdf {\n  font-size: 1.125rem;\n  padding: 0.8em 1.6em;\n}\n\n.ZestButton-module_inner__1j2Fr {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.ZestButton-module_spinner__l2hLe {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  animation: ZestButton-module_spin__4asdw 0.75s linear infinite;\n  color: currentColor; /* Inherit color from button text */\n}\n\n.ZestButton-module_content__hlea3 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n}\n\n.ZestButton-module_label__8x263 {\n  display: inline-block;\n}\n\n.ZestButton-module_icon__B3DFi {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Success + Fail Icons */\n.ZestButton-module_animatedCheck__8K4K- {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-success);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n.ZestButton-module_animatedX__KQnt7 {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-fail);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n/* Stroke animations */\n.ZestButton-module_animatedCheck__8K4K- path {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n.ZestButton-module_animatedX__KQnt7 line {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n/* New: apply spacing between left icon and text */\n.ZestButton-module_icon__B3DFi:first-child {\n  margin-right: 0.7em;\n}\n\n/* Optional override for iconRight if needed */\n.ZestButton-module_icon__B3DFi:last-child {\n  margin-left: 0.7em;\n}\n\n/* Animations */\n@keyframes ZestButton-module_spin__4asdw {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ZestButton-module_drawCheck__3DyjT {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes ZestButton-module_fadeIn__iEave {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes ZestButton-module_shakeIt__ox-R3 {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n.ZestButton-module_shake__NtIjf {\n  animation: ZestButton-module_shakeIt__ox-R3 0.4s ease;\n  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);\n}\n";
+var css_248z = "/* Styles/ZestButton.module.css */\n\n/* Define base variables for light mode */\n:root {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n/* Dark mode adjustments via system preference */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --zest-color-standard-bg: #3b82f6;\n    --zest-color-standard-bg-hover: #2563eb;\n    --zest-color-standard-text: white;\n    --zest-color-standard-border: #3b82f6;\n\n    --zest-color-success-bg: #34d399;\n    --zest-color-success-bg-hover: #10b981;\n    --zest-color-success-text: white;\n    --zest-color-success-border: #34d399;\n\n    --zest-color-danger-bg: #ef4444;\n    --zest-color-danger-bg-hover: #dc2626;\n    --zest-color-danger-text: white;\n    --zest-color-danger-border: #ef4444;\n\n    --zest-color-disabled-bg: #4b5563;\n    --zest-color-disabled-bg-hover: #6b7280;\n    --zest-color-disabled-text: #9ca3af;\n    --zest-color-disabled-border: #4b5563;\n\n    --zest-color-icon-success: #34d399;\n    --zest-color-icon-fail: #ef4444;\n  }\n}\n\n/* Theme override classes */\n.ZestButton-module_force-light__zZTIZ {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n.ZestButton-module_force-dark__cx74D {\n  --zest-color-standard-bg: #3b82f6;\n  --zest-color-standard-bg-hover: #2563eb;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #3b82f6;\n\n  --zest-color-success-bg: #34d399;\n  --zest-color-success-bg-hover: #10b981;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #34d399;\n\n  --zest-color-danger-bg: #ef4444;\n  --zest-color-danger-bg-hover: #dc2626;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #ef4444;\n\n  --zest-color-disabled-bg: #4b5563;\n  --zest-color-disabled-bg-hover: #6b7280;\n  --zest-color-disabled-text: #9ca3af;\n  --zest-color-disabled-border: #4b5563;\n\n  --zest-color-icon-success: #34d399;\n  --zest-color-icon-fail: #ef4444;\n}\n\n\n.ZestButton-module_button__KDafc {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n  position: relative;\n  padding: 0.6em 1.2em;\n  overflow: hidden;\n  border: none; /* Default to no border, overridden by outline/dashed */\n}\n\n/* Base styles for different button styles */\n.ZestButton-module_solid__cu4tr {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg-hover);\n}\n\n.ZestButton-module_outline__esgLq {\n  background-color: transparent;\n  border: 2px solid var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_outline__esgLq:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n\n.ZestButton-module_text__8X1xD {\n  background-color: transparent;\n  border: none;\n  color: var(--zest-color-standard-bg);\n}\n.ZestButton-module_text__8X1xD:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for text hover */\n}\n\n.ZestButton-module_dashed__ebKYF {\n  background-color: transparent;\n  border: 2px dashed var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_dashed__ebKYF:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for dashed hover */\n}\n\n\n/* Variant overrides for solid style */\n.ZestButton-module_solid__cu4tr.ZestButton-module_standard__T3EGM { /* Already handled by .solid base */ }\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg-hover);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ- {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg-hover);\n}\n\n/* Variant overrides for outline style */\n.ZestButton-module_outline__esgLq.ZestButton-module_standard__T3EGM { /* Already handled by .outline base */ }\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n\n/* Variant overrides for text style */\n.ZestButton-module_text__8X1xD.ZestButton-module_standard__T3EGM { /* Already handled by .text base */ }\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA {\n  color: var(--zest-color-success-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ- {\n  color: var(--zest-color-danger-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n/* Variant overrides for dashed style */\n.ZestButton-module_dashed__ebKYF.ZestButton-module_standard__T3EGM { /* Already handled by .dashed base */ }\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n\n/* Disabled state overrides for different button styles */\n.ZestButton-module_solid__cu4tr:disabled, .ZestButton-module_solid__cu4tr.ZestButton-module_disabled__gw6y3 {\n  background-color: var(--zest-color-disabled-bg);\n  color: var(--zest-color-disabled-text);\n  border-color: var(--zest-color-disabled-border);\n}\n.ZestButton-module_outline__esgLq:disabled, .ZestButton-module_outline__esgLq.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_text__8X1xD:disabled, .ZestButton-module_text__8X1xD.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_dashed__ebKYF:disabled, .ZestButton-module_dashed__ebKYF.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n\n\n/* Layout */\n.ZestButton-module_stretch__CTLNw {\n  width: 100%;\n}\n\n.ZestButton-module_sm__G1vAP {\n  font-size: 0.85rem;\n  padding: 0.4em 0.8em;\n}\n\n.ZestButton-module_md__Y-PMO {\n  font-size: 1rem;\n  padding: 0.6em 1.2em;\n}\n\n.ZestButton-module_lg__AQgdf {\n  font-size: 1.125rem;\n  padding: 0.8em 1.6em;\n}\n\n.ZestButton-module_inner__1j2Fr {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.ZestButton-module_spinner__l2hLe {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  animation: ZestButton-module_spin__4asdw 0.75s linear infinite;\n  color: currentColor; /* Inherit color from button text */\n}\n\n.ZestButton-module_content__hlea3 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n}\n\n.ZestButton-module_label__8x263 {\n  display: inline-block;\n}\n\n.ZestButton-module_icon__B3DFi {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Success + Fail Icons */\n.ZestButton-module_animatedCheck__8K4K- {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-success);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n.ZestButton-module_animatedX__KQnt7 {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-fail);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n/* Stroke animations */\n.ZestButton-module_animatedCheck__8K4K- path {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n.ZestButton-module_animatedX__KQnt7 line {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n/* New: apply spacing between left icon and text */\n.ZestButton-module_icon__B3DFi:first-child {\n  margin-right: 0.7em;\n}\n\n/* Optional override for iconRight if needed */\n.ZestButton-module_icon__B3DFi:last-child {\n  margin-left: 0.7em;\n}\n\n/* Animations */\n@keyframes ZestButton-module_spin__4asdw {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ZestButton-module_drawCheck__3DyjT {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes ZestButton-module_fadeIn__iEave {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes ZestButton-module_shakeIt__ox-R3 {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n.ZestButton-module_shake__NtIjf {\n  animation: ZestButton-module_shakeIt__ox-R3 0.4s ease;\n  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);\n}\n\n/* Mobile-first adjustments for hit area */\n@media (max-width: 768px) {\n  .ZestButton-module_button__KDafc {\n    min-height: 44px; /* Ensure a minimum touch target size for accessibility */\n  }\n\n  .ZestButton-module_sm__G1vAP {\n    padding: 0.6em 1em; /* Increase padding for small buttons on mobile */\n  }\n\n  .ZestButton-module_md__Y-PMO {\n    padding: 0.8em 1.4em; /* Slightly increase padding for medium buttons on mobile */\n  }\n}\n\n";
 var styles = {"force-light":"ZestButton-module_force-light__zZTIZ","force-dark":"ZestButton-module_force-dark__cx74D","button":"ZestButton-module_button__KDafc","solid":"ZestButton-module_solid__cu4tr","outline":"ZestButton-module_outline__esgLq","text":"ZestButton-module_text__8X1xD","dashed":"ZestButton-module_dashed__ebKYF","standard":"ZestButton-module_standard__T3EGM","success":"ZestButton-module_success__XEptA","danger":"ZestButton-module_danger__nJpJ-","disabled":"ZestButton-module_disabled__gw6y3","stretch":"ZestButton-module_stretch__CTLNw","sm":"ZestButton-module_sm__G1vAP","md":"ZestButton-module_md__Y-PMO","lg":"ZestButton-module_lg__AQgdf","inner":"ZestButton-module_inner__1j2Fr","spinner":"ZestButton-module_spinner__l2hLe","spin":"ZestButton-module_spin__4asdw","content":"ZestButton-module_content__hlea3","label":"ZestButton-module_label__8x263","icon":"ZestButton-module_icon__B3DFi","animatedCheck":"ZestButton-module_animatedCheck__8K4K-","fadeIn":"ZestButton-module_fadeIn__iEave","animatedX":"ZestButton-module_animatedX__KQnt7","drawCheck":"ZestButton-module_drawCheck__3DyjT","shake":"ZestButton-module_shake__NtIjf","shakeIt":"ZestButton-module_shakeIt__ox-R3"};
 styleInject(css_248z);
 

package/docs/api.md

@@ -1,9 +1,26 @@
+---
+[⬅️ Previous: Features Showcase](./features.md)
+
 # API Reference: The Technical Blueprint
 
 This document provides an exhaustive reference for all `ZestButton` props and type definitions.
 
 ---
 
+## Table of Contents
+
+- [ZestButtonProps](#zestbuttonprops)
+- [Type Definitions](#type-definitions)
+  - [ZestCustomProps](#zestcustomprops)
+  - [ZestGlobalConfig](#zestglobalconfig)
+  - [VisualOptions](#visualoptions)
+  - [BusyOptions](#busyoptions)
+  - [SuccessOptions](#successoptions)
+  - [ConfirmOptions](#confirmoptions)
+  - [SemanticType](#semantictype)
+
+---
+
 ### `ZestButtonProps`
 
 The `ZestButton` component accepts all standard HTML `<button>` attributes (e.g., `disabled`, `type`, `name`, `className`) in addition to its own custom configuration prop, `zest`.
@@ -117,3 +134,7 @@ declare module 'jattac.libs.web.zest-button' {
 }
 ```
 After augmentation, `'archive'` and `'publish'` would be valid `SemanticType` values, available for autocompletion and type-checking.
+
+---
+
+[⬅️ Previous: Features Showcase](./features.md) | [Next: Configuration Guide ➡️](./configuration.md)

package/docs/breaking-changes.md

@@ -1,9 +1,20 @@
+---
+[⬅️ Previous: Development Guide](./development.md)
+
 # Breaking Changes: The Upgrade Path
 
 This document lists significant changes between versions that might require modifications to your existing codebase.
 
 ---
 
+## Table of Contents
+
+- [Version 1.2.7](#version-127)
+- [Version 1.2.6](#version-126)
+- [Version 1.2.0](#version-120)
+
+---
+
 ## Version 1.2.7
 
 ### Renamed `ZestProvider` to `ZestButtonConfigProvider`
@@ -126,3 +137,7 @@ This change allows for better organization of configuration options (e.g., `visu
   My Button
 </ZestButton>
 ```
+
+---
+
+[⬅️ Previous: Development Guide](./development.md) | [Next: README ➡️](../README.md)

package/docs/configuration.md

@@ -1,9 +1,27 @@
+---
+[⬅️ Previous: API Reference](./api.md)
+
 # Configuration: The Control Panel
 
 This document explains how to configure `ZestButton` on a component and global level.
 
 ---
 
+## Table of Contents
+
+- [Overview](#overview)
+- [Theme Configuration](#theme-configuration)
+  - [Order of Precedence](#order-of-precedence)
+  - [Example: Forcing a Theme](#example-forcing-a-theme)
+- [Global Configuration with ZestButtonConfigProvider](#global-configuration-with-zestbuttonconfigprovider)
+  - [Usage](#usage)
+  - [Precedence with the ZestButtonConfigProvider](#precedence-with-the-zestbuttonconfigprovider)
+- [Advanced: Customizing Semantic Defaults](#advanced-customizing-semantic-defaults)
+  - [Example: Defining a Custom 'archive' Type](#example-defining-a-custom-archive-type)
+  - [Example: Overriding a Built-in 'delete' Default](#example-overriding-a-built-in-delete-default)
+
+---
+
 ### Overview
 
 Currently, `ZestButton` is primarily configured on a per-component basis via the `zest` prop. This provides the most explicit and direct control over each button's behavior and appearance.
@@ -190,3 +208,7 @@ const App = () => (
 </ZestButton>
 ```
 
+---
+
+[⬅️ Previous: API Reference](./api.md) | [Next: Development Guide ➡️](./development.md)
+

package/docs/development.md

@@ -1,9 +1,21 @@
+---
+[⬅️ Previous: Configuration Guide](./configuration.md)
+
 # Development: The Contributor's Guide
 
 This guide provides an overview of the project's internal structure and instructions for setting up your development environment.
 
 ---
 
+## Table of Contents
+
+- [Internal Architecture](#internal-architecture)
+- [Setup Instructions](#setup-instructions)
+- [Scripts](#scripts)
+- [Extending Semantic Types](#extending-semantic-types)
+
+---
+
 ### Internal Architecture
 
 The `jattac.libs.web.zest-button` project is structured to be a self-contained React component library.
@@ -75,3 +87,7 @@ declare module 'jattac.libs.web.zest-button' {
 Once augmented, these new semantic types (`'archive'`, `'publish'`) will be available for autocompletion and type-checking when using the `semanticType` prop on your `ZestButton` instances.
 
 *(Note: Currently, there are no dedicated test scripts defined in `package.json`. Testing is typically done manually in a consuming project during development, or through dedicated test runners that would be added in the future.)*
+
+---
+
+[⬅️ Previous: Configuration Guide](./configuration.md) | [Next: Breaking Changes ➡️](./breaking-changes.md)

package/docs/examples.md

@@ -4,6 +4,15 @@ Welcome to the ZestButton Cookbook! This is the core learning path for mastering
 
 ---
 
+## Table of Contents
+
+- [Recipe 1: Your First Async Button](#recipe-1-your-first-async-button)
+- [Recipe 2: The Safe "Delete" Button](#recipe-2-the-safe-delete-button)
+- [Recipe 3: Standardizing Your Buttons with a Global Config](#recipe-3-standardizing-your-buttons-with-a-global-config)
+- [Recipe 4: Creating a Custom "Archive" Button](#recipe-4-creating-a-custom-archive-button)
+
+---
+
 ### Recipe 1: Your First Async Button
 
 **Goal:** Create a button that automatically shows a loading spinner during an operation and gives feedback when it's done.
@@ -211,5 +220,8 @@ const App = () => (
   </ZestButtonConfigProvider>
 );
 ```
-This powerful pattern allows you to build a complete, consistent design system for all button actions in your application. For more details on configuration, see the [Configuration Guide](./configuration.md).
+This powerful pattern allows you to build a complete, consistent design system for all button actions in your application. For more details on configuration, see the [Configuration Guide](./configuration.md).*
+
+---
 
+[⬅️ Previous: README](../README.md) | [Next: Features Showcase ➡️](./features.md)

package/docs/features.md

@@ -4,6 +4,16 @@ This document provides a high-level showcase of what's possible with `ZestButton
 
 ---
 
+## Table of Contents
+
+- [Asynchronous Operations & Feedback](#asynchronous-operations--feedback)
+- [Confirmation Flow](#confirmation-flow)
+- [Semantic Types](#semantic-types)
+- [Global Configuration](#global-configuration)
+- [Rich Styling](#rich-styling)
+
+---
+
 ### Asynchronous Operations & Feedback
 
 **What it does:** Automatically handles loading states and provides clear success/failure feedback for any action that returns a Promise.
@@ -100,7 +110,7 @@ const MyComponent = () => (
     <ZestButton zest={{ visualOptions: { variant: 'success', size: 'sm' } }}>
       Small Success
     </ZestButton>
-    <ZestButton zest={{ buttonStyle: 'outline', size: 'md' } }}>
+    <ZestButton zest={{ buttonStyle: 'outline', size: 'md' }}>
       Medium Outline
     </ZestButton>
     <ZestButton zest={{ visualOptions: { variant: 'danger', size: 'lg' } }}>
@@ -111,3 +121,6 @@ const MyComponent = () => (
 ```
 *Explore all the recipes in the **[Cookbook](./examples.md)** to see these options in action.*
 
+---
+
+[⬅️ Previous: The Cookbook (Examples)](./examples.md) | [Next: API Reference ➡️](./api.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jattac.libs.web.zest-button",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "A highly customizable and production-ready React button component featuring robust asynchronous handling, rich visual feedback, and built-in confirmation flows for enhanced user experience",
   "homepage": "https://github.com/nyingimaina/jattac.libs.web.zest-button#readme",
   "repository": {