@flightlesslabs/dodo-ui 0.1.5 → 0.3.0

package/dist/stories/components/Form/Button/Button.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = 1, variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
+<script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = '1x', variant = 'text', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
 export {};
 </script>
 
 {#snippet buttonContent()}
   {#if before}
-    <span class="button-content--before">
+    <span class="content--before">
       {@render before()}
     </span>
   {/if}
@@ -19,7 +19,7 @@ export {};
   {/if}
 
   {#if after}
-    <span class="button-content--after">
+    <span class="content--after">
       {@render after()}
     </span>
   {/if}
@@ -41,8 +41,9 @@ export {};
     class:outline
     class:compact
     class:disabled
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -56,8 +57,9 @@ export {};
   <button
     class:outline
     class:compact
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -76,100 +78,100 @@ export {};
 {/if}
 
 <style>:global(:root) {
-  --dodo-ui-button-disabled-color: var(--dodo-color-default-400);
-  --dodo-ui-button-disabled-bg: var(--dodo-color-default-200);
-  --dodo-ui-button-outline-default: var(--dodo-color-default-400);
-  --dodo-ui-button-text-default-bg: var(--dodo-color-default-100);
-  --dodo-ui-button-text-default-hover-bg: var(--dodo-color-default-200);
-  --dodo-ui-button-text-default-active-bg: var(--dodo-color-default-300);
-  --dodo-ui-button-solid-default-bg: var(--dodo-color-default-500);
-  --dodo-ui-button-solid-default-hover-bg: var(--dodo-color-default-600);
-  --dodo-ui-button-solid-default-active-bg: var(--dodo-color-default-700);
-  --dodo-ui-button-outline-primary: var(--dodo-color-primary-400);
-  --dodo-ui-button-text-primary-bg: var(--dodo-color-primary-100);
-  --dodo-ui-button-text-primary-hover-bg: var(--dodo-color-primary-200);
-  --dodo-ui-button-text-primary-active-bg: var(--dodo-color-primary-300);
-  --dodo-ui-button-solid-primary-bg: var(--dodo-color-primary-500);
-  --dodo-ui-button-solid-primary-hover-bg: var(--dodo-color-primary-600);
-  --dodo-ui-button-solid-primary-active-bg: var(--dodo-color-primary-700);
-  --dodo-ui-button-outline-safe: var(--dodo-color-safe-400);
-  --dodo-ui-button-text-safe-bg: var(--dodo-color-safe-100);
-  --dodo-ui-button-text-safe-hover-bg: var(--dodo-color-safe-200);
-  --dodo-ui-button-text-safe-active-bg: var(--dodo-color-safe-300);
-  --dodo-ui-button-solid-safe-bg: var(--dodo-color-safe-500);
-  --dodo-ui-button-solid-safe-hover-bg: var(--dodo-color-safe-600);
-  --dodo-ui-button-solid-safe-active-bg: var(--dodo-color-safe-700);
-  --dodo-ui-button-outline-warning: var(--dodo-color-warning-400);
-  --dodo-ui-button-text-warning-bg: var(--dodo-color-warning-100);
-  --dodo-ui-button-text-warning-hover-bg: var(--dodo-color-warning-200);
-  --dodo-ui-button-text-warning-active-bg: var(--dodo-color-warning-300);
-  --dodo-ui-button-solid-warning-bg: var(--dodo-color-warning-500);
-  --dodo-ui-button-solid-warning-hover-bg: var(--dodo-color-warning-600);
-  --dodo-ui-button-solid-warning-active-bg: var(--dodo-color-warning-700);
-  --dodo-ui-button-outline-danger: var(--dodo-color-danger-400);
-  --dodo-ui-button-text-danger-bg: var(--dodo-color-danger-100);
-  --dodo-ui-button-text-danger-hover-bg: var(--dodo-color-danger-200);
-  --dodo-ui-button-text-danger-active-bg: var(--dodo-color-danger-300);
-  --dodo-ui-button-solid-danger-bg: var(--dodo-color-danger-500);
-  --dodo-ui-button-solid-danger-hover-bg: var(--dodo-color-danger-600);
-  --dodo-ui-button-solid-danger-active-bg: var(--dodo-color-danger-700);
-  --dodo-ui-button-outline-info: var(--dodo-color-info-400);
-  --dodo-ui-button-text-info-bg: var(--dodo-color-info-100);
-  --dodo-ui-button-text-info-hover-bg: var(--dodo-color-info-200);
-  --dodo-ui-button-text-info-active-bg: var(--dodo-color-info-300);
-  --dodo-ui-button-solid-info-bg: var(--dodo-color-info-500);
-  --dodo-ui-button-solid-info-hover-bg: var(--dodo-color-info-600);
-  --dodo-ui-button-solid-info-active-bg: var(--dodo-color-info-700);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-default-400);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-default-200);
+  --dodo-ui-Button-outline-default: var(--dodo-color-default-400);
+  --dodo-ui-Button-text-default-bg: var(--dodo-color-default-100);
+  --dodo-ui-Button-text-default-hover-bg: var(--dodo-color-default-200);
+  --dodo-ui-Button-text-default-active-bg: var(--dodo-color-default-300);
+  --dodo-ui-Button-solid-default-bg: var(--dodo-color-default-500);
+  --dodo-ui-Button-solid-default-hover-bg: var(--dodo-color-default-600);
+  --dodo-ui-Button-solid-default-active-bg: var(--dodo-color-default-700);
+  --dodo-ui-Button-outline-primary: var(--dodo-color-primary-400);
+  --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
+  --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
+  --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-600);
+  --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-700);
+  --dodo-ui-Button-outline-warning: var(--dodo-color-warning-400);
+  --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-600);
+  --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-700);
+  --dodo-ui-Button-outline-danger: var(--dodo-color-danger-400);
+  --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
+  --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
+  --dodo-ui-Button-outline-info: var(--dodo-color-info-400);
+  --dodo-ui-Button-text-info-bg: var(--dodo-color-info-100);
+  --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-200);
+  --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-300);
+  --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-500);
+  --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-600);
+  --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-700);
 }
 
 :global(.dodo-theme--dark) {
-  --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
-  --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
-  --dodo-ui-button-outline-default: var(--dodo-color-default-300);
-  --dodo-ui-button-text-default-bg: var(--dodo-color-default-50);
-  --dodo-ui-button-text-default-hover-bg: var(--dodo-color-default-100);
-  --dodo-ui-button-text-default-active-bg: var(--dodo-color-default-200);
-  --dodo-ui-button-solid-default-bg: var(--dodo-color-default-300);
-  --dodo-ui-button-solid-default-hover-bg: var(--dodo-color-default-200);
-  --dodo-ui-button-solid-default-active-bg: var(--dodo-color-default-100);
-  --dodo-ui-button-outline-primary: var(--dodo-color-primary-300);
-  --dodo-ui-button-text-primary-bg: var(--dodo-color-primary-50);
-  --dodo-ui-button-text-primary-hover-bg: var(--dodo-color-primary-100);
-  --dodo-ui-button-text-primary-active-bg: var(--dodo-color-primary-200);
-  --dodo-ui-button-solid-primary-bg: var(--dodo-color-primary-300);
-  --dodo-ui-button-solid-primary-hover-bg: var(--dodo-color-primary-200);
-  --dodo-ui-button-solid-primary-active-bg: var(--dodo-color-primary-100);
-  --dodo-ui-button-outline-safe: var(--dodo-color-safe-300);
-  --dodo-ui-button-text-safe-bg: var(--dodo-color-safe-50);
-  --dodo-ui-button-text-safe-hover-bg: var(--dodo-color-safe-100);
-  --dodo-ui-button-text-safe-active-bg: var(--dodo-color-safe-200);
-  --dodo-ui-button-solid-safe-bg: var(--dodo-color-safe-300);
-  --dodo-ui-button-solid-safe-hover-bg: var(--dodo-color-safe-200);
-  --dodo-ui-button-solid-safe-active-bg: var(--dodo-color-safe-100);
-  --dodo-ui-button-outline-warning: var(--dodo-color-warning-300);
-  --dodo-ui-button-text-warning-bg: var(--dodo-color-warning-50);
-  --dodo-ui-button-text-warning-hover-bg: var(--dodo-color-warning-100);
-  --dodo-ui-button-text-warning-active-bg: var(--dodo-color-warning-200);
-  --dodo-ui-button-solid-warning-bg: var(--dodo-color-warning-300);
-  --dodo-ui-button-solid-warning-hover-bg: var(--dodo-color-warning-200);
-  --dodo-ui-button-solid-warning-active-bg: var(--dodo-color-warning-100);
-  --dodo-ui-button-outline-danger: var(--dodo-color-danger-300);
-  --dodo-ui-button-text-danger-bg: var(--dodo-color-danger-50);
-  --dodo-ui-button-text-danger-hover-bg: var(--dodo-color-danger-100);
-  --dodo-ui-button-text-danger-active-bg: var(--dodo-color-danger-200);
-  --dodo-ui-button-solid-danger-bg: var(--dodo-color-danger-300);
-  --dodo-ui-button-solid-danger-hover-bg: var(--dodo-color-danger-200);
-  --dodo-ui-button-solid-danger-active-bg: var(--dodo-color-danger-100);
-  --dodo-ui-button-outline-info: var(--dodo-color-info-300);
-  --dodo-ui-button-text-info-bg: var(--dodo-color-info-50);
-  --dodo-ui-button-text-info-hover-bg: var(--dodo-color-info-100);
-  --dodo-ui-button-text-info-active-bg: var(--dodo-color-info-200);
-  --dodo-ui-button-solid-info-bg: var(--dodo-color-info-300);
-  --dodo-ui-button-solid-info-hover-bg: var(--dodo-color-info-200);
-  --dodo-ui-button-solid-info-active-bg: var(--dodo-color-info-100);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-default-100);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-default-500);
+  --dodo-ui-Button-outline-default: var(--dodo-color-default-300);
+  --dodo-ui-Button-text-default-bg: var(--dodo-color-default-50);
+  --dodo-ui-Button-text-default-hover-bg: var(--dodo-color-default-100);
+  --dodo-ui-Button-text-default-active-bg: var(--dodo-color-default-200);
+  --dodo-ui-Button-solid-default-bg: var(--dodo-color-default-300);
+  --dodo-ui-Button-solid-default-hover-bg: var(--dodo-color-default-200);
+  --dodo-ui-Button-solid-default-active-bg: var(--dodo-color-default-100);
+  --dodo-ui-Button-outline-primary: var(--dodo-color-primary-300);
+  --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-50);
+  --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-outline-safe: var(--dodo-color-safe-300);
+  --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-50);
+  --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Button-outline-warning: var(--dodo-color-warning-300);
+  --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-50);
+  --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Button-outline-danger: var(--dodo-color-danger-300);
+  --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-50);
+  --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Button-outline-info: var(--dodo-color-info-300);
+  --dodo-ui-Button-text-info-bg: var(--dodo-color-info-50);
+  --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-100);
+  --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-200);
+  --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-300);
+  --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-200);
+  --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-100);
 }
 
-.dodo-ui-button {
+.dodo-ui-Button {
   cursor: pointer;
   outline: none;
   transition: all 150ms;
@@ -179,224 +181,224 @@ export {};
   justify-content: center;
   align-items: center;
   font-family: inherit;
-  font-weight: 500;
   background-color: transparent;
-  border: 1px solid;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
   border-color: transparent;
   outline: 0;
   color: inherit;
   letter-spacing: 0.3px;
 }
-.dodo-ui-button.size--normal {
+.dodo-ui-Button.size--normal {
   height: var(--dodo-ui-element-height-normal);
   font-size: 1rem;
   padding: 0 12px;
   min-width: 45px;
 }
-.dodo-ui-button.size--small {
+.dodo-ui-Button.size--small {
   height: var(--dodo-ui-element-height-small);
   padding: 0 8px;
   font-size: 0.9rem;
   min-width: 35px;
 }
-.dodo-ui-button.size--large {
+.dodo-ui-Button.size--large {
   height: var(--dodo-ui-element-height-large);
   font-size: 1.1rem;
   padding: 0 16px;
   min-width: 85px;
 }
-.dodo-ui-button.roundness--1 {
-  border-radius: var(--dodo-ui-element-roundness-1);
+.dodo-ui-Button.roundness--1x {
+  border-radius: var(--dodo-ui-element-roundness-1x);
 }
-.dodo-ui-button.roundness--2 {
-  border-radius: var(--dodo-ui-element-roundness-2);
+.dodo-ui-Button.roundness--2x {
+  border-radius: var(--dodo-ui-element-roundness-2x);
 }
-.dodo-ui-button.roundness--3 {
-  border-radius: var(--dodo-ui-element-roundness-3);
+.dodo-ui-Button.roundness--3x {
+  border-radius: var(--dodo-ui-element-roundness-3x);
 }
-.dodo-ui-button.roundness--4 {
-  border-radius: var(--dodo-ui-element-roundness-4);
-}
-.dodo-ui-button.roundness--full {
+.dodo-ui-Button.roundness--full {
   border-radius: 50%;
 }
-.dodo-ui-button.color--default.variant--text {
+.dodo-ui-Button.color--default.variant--text {
   color: var(--dodo-color-default-800);
-  background-color: var(--dodo-ui-button-text-default-bg);
+  background-color: var(--dodo-ui-Button-text-default-bg);
 }
-.dodo-ui-button.color--default.variant--text:hover {
-  background-color: var(--dodo-ui-button-text-default-hover-bg);
+.dodo-ui-Button.color--default.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-default-hover-bg);
 }
-.dodo-ui-button.color--default.variant--text:active {
-  background-color: var(--dodo-ui-button-text-default-active-bg);
+.dodo-ui-Button.color--default.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-default-active-bg);
 }
-.dodo-ui-button.color--default.variant--text.outline {
-  border-color: var(--dodo-ui-button-outline-default);
+.dodo-ui-Button.color--default.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-default);
 }
-.dodo-ui-button.color--default.variant--solid {
+.dodo-ui-Button.color--default.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-button-solid-default-bg);
+  background-color: var(--dodo-ui-Button-solid-default-bg);
 }
-.dodo-ui-button.color--default.variant--solid:hover {
-  background-color: var(--dodo-ui-button-solid-default-hover-bg);
+.dodo-ui-Button.color--default.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-default-hover-bg);
 }
-.dodo-ui-button.color--default.variant--solid:active {
-  background-color: var(--dodo-ui-button-solid-default-active-bg);
+.dodo-ui-Button.color--default.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-default-active-bg);
 }
-.dodo-ui-button.color--primary.variant--text {
+.dodo-ui-Button.color--primary.variant--text {
   color: var(--dodo-color-primary-800);
-  background-color: var(--dodo-ui-button-text-primary-bg);
+  background-color: var(--dodo-ui-Button-text-primary-bg);
 }
-.dodo-ui-button.color--primary.variant--text:hover {
-  background-color: var(--dodo-ui-button-text-primary-hover-bg);
+.dodo-ui-Button.color--primary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-primary-hover-bg);
 }
-.dodo-ui-button.color--primary.variant--text:active {
-  background-color: var(--dodo-ui-button-text-primary-active-bg);
+.dodo-ui-Button.color--primary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-primary-active-bg);
 }
-.dodo-ui-button.color--primary.variant--text.outline {
-  border-color: var(--dodo-ui-button-outline-primary);
+.dodo-ui-Button.color--primary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-primary);
 }
-.dodo-ui-button.color--primary.variant--solid {
+.dodo-ui-Button.color--primary.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-button-solid-primary-bg);
+  background-color: var(--dodo-ui-Button-solid-primary-bg);
 }
-.dodo-ui-button.color--primary.variant--solid:hover {
-  background-color: var(--dodo-ui-button-solid-primary-hover-bg);
+.dodo-ui-Button.color--primary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-primary-hover-bg);
 }
-.dodo-ui-button.color--primary.variant--solid:active {
-  background-color: var(--dodo-ui-button-solid-primary-active-bg);
+.dodo-ui-Button.color--primary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-primary-active-bg);
 }
-.dodo-ui-button.color--safe.variant--text {
+.dodo-ui-Button.color--safe.variant--text {
   color: var(--dodo-color-safe-800);
-  background-color: var(--dodo-ui-button-text-safe-bg);
+  background-color: var(--dodo-ui-Button-text-safe-bg);
 }
-.dodo-ui-button.color--safe.variant--text:hover {
-  background-color: var(--dodo-ui-button-text-safe-hover-bg);
+.dodo-ui-Button.color--safe.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-safe-hover-bg);
 }
-.dodo-ui-button.color--safe.variant--text:active {
-  background-color: var(--dodo-ui-button-text-safe-active-bg);
+.dodo-ui-Button.color--safe.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-safe-active-bg);
 }
-.dodo-ui-button.color--safe.variant--text.outline {
-  border-color: var(--dodo-ui-button-outline-safe);
+.dodo-ui-Button.color--safe.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-safe);
 }
-.dodo-ui-button.color--safe.variant--solid {
+.dodo-ui-Button.color--safe.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-button-solid-safe-bg);
+  background-color: var(--dodo-ui-Button-solid-safe-bg);
 }
-.dodo-ui-button.color--safe.variant--solid:hover {
-  background-color: var(--dodo-ui-button-solid-safe-hover-bg);
+.dodo-ui-Button.color--safe.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-safe-hover-bg);
 }
-.dodo-ui-button.color--safe.variant--solid:active {
-  background-color: var(--dodo-ui-button-solid-safe-active-bg);
+.dodo-ui-Button.color--safe.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-safe-active-bg);
 }
-.dodo-ui-button.color--warning.variant--text {
+.dodo-ui-Button.color--warning.variant--text {
   color: var(--dodo-color-warning-800);
-  background-color: var(--dodo-ui-button-text-warning-bg);
+  background-color: var(--dodo-ui-Button-text-warning-bg);
 }
-.dodo-ui-button.color--warning.variant--text:hover {
-  background-color: var(--dodo-ui-button-text-warning-hover-bg);
+.dodo-ui-Button.color--warning.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-warning-hover-bg);
 }
-.dodo-ui-button.color--warning.variant--text:active {
-  background-color: var(--dodo-ui-button-text-warning-active-bg);
+.dodo-ui-Button.color--warning.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-warning-active-bg);
 }
-.dodo-ui-button.color--warning.variant--text.outline {
-  border-color: var(--dodo-ui-button-outline-warning);
+.dodo-ui-Button.color--warning.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-warning);
 }
-.dodo-ui-button.color--warning.variant--solid {
+.dodo-ui-Button.color--warning.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-button-solid-warning-bg);
+  background-color: var(--dodo-ui-Button-solid-warning-bg);
 }
-.dodo-ui-button.color--warning.variant--solid:hover {
-  background-color: var(--dodo-ui-button-solid-warning-hover-bg);
+.dodo-ui-Button.color--warning.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-warning-hover-bg);
 }
-.dodo-ui-button.color--warning.variant--solid:active {
-  background-color: var(--dodo-ui-button-solid-warning-active-bg);
+.dodo-ui-Button.color--warning.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-warning-active-bg);
 }
-.dodo-ui-button.color--danger.variant--text {
+.dodo-ui-Button.color--danger.variant--text {
   color: var(--dodo-color-danger-800);
-  background-color: var(--dodo-ui-button-text-danger-bg);
+  background-color: var(--dodo-ui-Button-text-danger-bg);
 }
-.dodo-ui-button.color--danger.variant--text:hover {
-  background-color: var(--dodo-ui-button-text-danger-hover-bg);
+.dodo-ui-Button.color--danger.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-danger-hover-bg);
 }
-.dodo-ui-button.color--danger.variant--text:active {
-  background-color: var(--dodo-ui-button-text-danger-active-bg);
+.dodo-ui-Button.color--danger.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-danger-active-bg);
 }
-.dodo-ui-button.color--danger.variant--text.outline {
-  border-color: var(--dodo-ui-button-outline-danger);
+.dodo-ui-Button.color--danger.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-danger);
 }
-.dodo-ui-button.color--danger.variant--solid {
+.dodo-ui-Button.color--danger.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-button-solid-danger-bg);
+  background-color: var(--dodo-ui-Button-solid-danger-bg);
 }
-.dodo-ui-button.color--danger.variant--solid:hover {
-  background-color: var(--dodo-ui-button-solid-danger-hover-bg);
+.dodo-ui-Button.color--danger.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-danger-hover-bg);
 }
-.dodo-ui-button.color--danger.variant--solid:active {
-  background-color: var(--dodo-ui-button-solid-danger-active-bg);
+.dodo-ui-Button.color--danger.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-danger-active-bg);
 }
-.dodo-ui-button.color--info.variant--text {
+.dodo-ui-Button.color--info.variant--text {
   color: var(--dodo-color-info-800);
-  background-color: var(--dodo-ui-button-text-info-bg);
+  background-color: var(--dodo-ui-Button-text-info-bg);
 }
-.dodo-ui-button.color--info.variant--text:hover {
-  background-color: var(--dodo-ui-button-text-info-hover-bg);
+.dodo-ui-Button.color--info.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-info-hover-bg);
 }
-.dodo-ui-button.color--info.variant--text:active {
-  background-color: var(--dodo-ui-button-text-info-active-bg);
+.dodo-ui-Button.color--info.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-info-active-bg);
 }
-.dodo-ui-button.color--info.variant--text.outline {
-  border-color: var(--dodo-ui-button-outline-info);
+.dodo-ui-Button.color--info.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-info);
 }
-.dodo-ui-button.color--info.variant--solid {
+.dodo-ui-Button.color--info.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-button-solid-info-bg);
+  background-color: var(--dodo-ui-Button-solid-info-bg);
 }
-.dodo-ui-button.color--info.variant--solid:hover {
-  background-color: var(--dodo-ui-button-solid-info-hover-bg);
+.dodo-ui-Button.color--info.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-info-hover-bg);
 }
-.dodo-ui-button.color--info.variant--solid:active {
-  background-color: var(--dodo-ui-button-solid-info-active-bg);
+.dodo-ui-Button.color--info.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-info-active-bg);
 }
-.dodo-ui-button[disabled] {
+.dodo-ui-Button[disabled] {
   cursor: initial;
 }
-.dodo-ui-button[disabled].variant--text, .dodo-ui-button[disabled].variant--solid {
-  background-color: var(--dodo-ui-button-disabled-bg);
-  color: var(--dodo-ui-button-disabled-color);
+.dodo-ui-Button[disabled].variant--text, .dodo-ui-Button[disabled].variant--solid {
+  background-color: var(--dodo-ui-Button-disabled-bg);
+  color: var(--dodo-ui-Button-disabled-color);
 }
-.dodo-ui-button[disabled].variant--text:hover, .dodo-ui-button[disabled].variant--solid:hover {
-  background-color: var(--dodo-ui-button-disabled-bg);
-  color: var(--dodo-ui-button-disabled-color);
+.dodo-ui-Button[disabled].variant--text:hover, .dodo-ui-Button[disabled].variant--solid:hover {
+  background-color: var(--dodo-ui-Button-disabled-bg);
+  color: var(--dodo-ui-Button-disabled-color);
 }
-.dodo-ui-button[disabled].variant--text:active, .dodo-ui-button[disabled].variant--solid:active {
-  background-color: var(--dodo-ui-button-disabled-bg);
-  color: var(--dodo-ui-button-disabled-color);
+.dodo-ui-Button[disabled].variant--text:active, .dodo-ui-Button[disabled].variant--solid:active {
+  background-color: var(--dodo-ui-Button-disabled-bg);
+  color: var(--dodo-ui-Button-disabled-color);
 }
-.dodo-ui-button[disabled].variant--text.outline, .dodo-ui-button[disabled].variant--solid.outline {
+.dodo-ui-Button[disabled].variant--text.outline, .dodo-ui-Button[disabled].variant--solid.outline {
   border-color: transparent;
 }
-.dodo-ui-button.compact.size--normal, .dodo-ui-button.compact.size--small, .dodo-ui-button.compact.size--large {
+.dodo-ui-Button.compact.size--normal, .dodo-ui-Button.compact.size--small, .dodo-ui-Button.compact.size--large {
   min-width: initial;
   padding: 0;
 }
-.dodo-ui-button.compact.size--normal {
+.dodo-ui-Button.compact.size--normal {
   width: var(--dodo-ui-element-height-normal);
 }
-.dodo-ui-button.compact.size--small {
+.dodo-ui-Button.compact.size--small {
   width: var(--dodo-ui-element-height-small);
 }
-.dodo-ui-button.compact.size--large {
+.dodo-ui-Button.compact.size--large {
   width: var(--dodo-ui-element-height-large);
 }
-.dodo-ui-button .button-content--after, .dodo-ui-button .button-content--before {
+.dodo-ui-Button.fullWidth {
+  width: 100%;
+}
+.dodo-ui-Button .content--after, .dodo-ui-Button .content--before {
   display: inline-flex;
   height: 100%;
   align-items: center;
 }
-.dodo-ui-button .button-content--before {
+.dodo-ui-Button .content--before {
   margin-right: 6px;
 }
-.dodo-ui-button .button-content--after {
+.dodo-ui-Button .content--after {
   margin-left: 6px;
 }</style>

package/dist/stories/components/Form/Button/Button.svelte.d.ts

@@ -4,6 +4,7 @@ export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string
 export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
 import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '../../../../types.js';
 import type { Snippet } from 'svelte';
+import type { MouseEventHandler } from 'svelte/elements';
 interface ButtonProps {
     /** Button contents goes here*/
     children?: Snippet;
@@ -11,6 +12,8 @@ interface ButtonProps {
     type?: 'button' | 'submit';
     /** How large should the button be? */
     size?: ComponentSize;
+    /** Full width button? */
+    fullWidth?: boolean;
     /** What color to use? */
     color?: ButtonColor;
     /** How round should the border radius be? */
@@ -36,7 +39,7 @@ interface ButtonProps {
     /** Custom css class*/
     class?: string;
     /** The onclick event handler */
-    onclick?: (e: MouseEvent) => void;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
     /** Turn Button into link */
     href?: string;
     /** Link button: download  */

package/dist/stories/components/Form/Button/Events/Events.stories.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { fn } from '@storybook/test';
+import Button from '../Button.svelte';
+import { storyButtonArgTypes } from '../Button.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+    args: {
+        onclick: fn(),
+    },
+});
+</script>
+
+<Story
+  name="Click"
+  args={{
+    outline: false,
+    disabled: false,
+    compact: false,
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+>
+  <Button
+    onclick={(e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  >
+    Click me!
+  </Button>
+</Story>