@flightlesslabs/dodo-ui 0.2.0 → 0.4.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 = '1x', 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">let { 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, ref = $bindable(), } = $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,14 +41,16 @@ export {};
     class:outline
     class:compact
     class:disabled
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
       `roundness--${roundness}`,
       className,
     ].join(' ')}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </a>
@@ -56,8 +58,9 @@ export {};
   <button
     class:outline
     class:compact
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -70,106 +73,107 @@ export {};
     {title}
     {disabled}
     {onclick}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </button>
 {/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,221 +183,225 @@ 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;
+  font-family: inherit;
 }
-.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--1x {
-  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--2x {
-  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--3x {
-  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--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,13 +4,18 @@ 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*/
+    /** Button contents goes here */
     children?: Snippet;
+    /** Button ref */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
     /** Regular button or submit button? */
     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 +41,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  */
@@ -58,6 +63,6 @@ interface ButtonProps {
     /** Test: ⚠️ Unsafe Children String. Do Not use*/
     _unsafeChildrenStringForTesting?: string;
 }
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;