@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/dist/index.d.ts

@@ -1,28 +1,51 @@
 import './styles/global.css';
-export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
+export type { ComponentColorPriority, ComponentColorSeverity, ComponentColor, } from './types/colors.js';
+export type { ComponentRoundness } from './types/roundness.js';
+export type { ComponentSize } from './types/size.js';
+export type { ComponentWeight } from './types/weight.js';
+export type { PositionY, PositionX } from './types/position.js';
+/** developer tools: directives: clickOutside */
+export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+export type { UtilityButtonProps } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 /** developer tools: components: InputEnclosure */
 export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+export type { InputEnclosureProps } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+/** developer tools: components: DynamicInput */
+export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+export type { DynamicInputVariant, DynamicInputProps, DynamicInputClickEvent, DynamicInputFocusEvent, } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+/** developer tools: components: Popper */
+export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
+export type { PopperProps } from './stories/developer tools/components/Popper/Popper.svelte';
+export { default as PopperPopup } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
+export type { PopperPopupProps } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
-export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
+export type { ButtonLinkTarget, ButtonLinkReferrerpolicy, ButtonType, ButtonProps, ButtonClickEvent, } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
 export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
+export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, TextInputInputEvent, TextInputProps, } from './stories/components/Form/TextInput/TextInput.svelte';
 /** Form: PasswordInput */
 export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
-export type { PasswordInputToggleEvent } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type { PasswordInputToggleEvent, PasswordInputProps, } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
 /** Form: Label */
 export { default as Label } from './stories/components/Form/Label/Label.svelte';
+export type { LabelProps } from './stories/components/Form/Label/Label.svelte';
 /** Form: FormControl */
 export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
+export type { FormControlProps } from './stories/components/Form/FormControl/FormControl.svelte';
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
-export type { MessageColor } from './stories/components/Form/Message/Message.svelte';
-/** Form: SimpleSelect */
-export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
-export type { SimpleSelectFocusEvent, SimpleSelectOption, } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
-export type { PaperRoundness, PaperShadow, } from './stories/components/Layout/Paper/Paper.svelte';
+export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';
+/** Layout: Separator */
+export { default as Separator } from './stories/components/Layout/Separator/Separator.svelte';
+export type { SeparatorProps, SeparatorOrientation, } from './stories/components/Layout/Separator/Separator.svelte';
+/** Layout: Menu */
+export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
+export type { MenuProps } from './stories/components/Layout/Menu/Menu.svelte';
+export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export type { MenuItemType, MenuItemProps, } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';

package/dist/index.js

@@ -1,8 +1,15 @@
 import './styles/global.css';
+/** developer tools: directives: clickOutside */
+export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 /** developer tools: components: InputEnclosure */
 export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+/** developer tools: components: DynamicInput */
+export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+/** developer tools: components: Popper */
+export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
+export { default as PopperPopup } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
@@ -15,7 +22,10 @@ export { default as Label } from './stories/components/Form/Label/Label.svelte';
 export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
-/** Form: SimpleSelect */
-export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
+/** Layout: Separator */
+export { default as Separator } from './stories/components/Layout/Separator/Separator.svelte';
+/** Layout: Menu */
+export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
+export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';

package/dist/stories/Home.mdx

@@ -42,7 +42,7 @@ npm i @flightlesslabs/dodo-ui
 
 ## Use it!
 
-Lets import [Button](?path=/docs/components-form-button--docs) component
+Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
 
 <Source
   dark
@@ -52,10 +52,8 @@ import { Button } '@flightlesslabs/dodo-ui';
 `}
 />
 
-Checkout documentation for [Button](?path=/docs/components-form-button--docs)
-
 ## Explore more
 
-- [Themes](?path=/docs/philosophy-themes--docs)
-- [Colors](?path=/docs/philosophy-colors--docs)
-- [Adjust Color Opacity](?path=/docs/philosophy-colors--docs#adjusting-opacity)
+- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -1,26 +1,29 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { fn } from '@storybook/test';
-import Button from './Button.svelte';
+import Button, { buttonTypeArray } from './Button.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentColorArray } from '../../../../types/colors.js';
+import { componentWeightArray } from '../../../../types/weight.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyButtonArgTypes = {
     type: {
         control: { type: 'select' },
-        options: ['button', 'submit'],
+        options: buttonTypeArray,
     },
     color: {
         control: { type: 'select' },
-        options: ['default', 'secondary', 'primary', 'safe', 'warning', 'danger'],
+        options: componentColorArray,
     },
     variant: {
         control: { type: 'select' },
-        options: ['text', 'solid'],
+        options: componentWeightArray,
     },
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x', 'full'],
+        options: componentRoundnessArray,
     },
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -28,51 +31,27 @@ const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
-    args: {
-        onclick: fn(),
-    },
 });
 </script>
 
-<!-- ⚠️ Test Button: Do not use! -->
-<Story
-  name="Test Button"
-  args={{
-    outline: false,
-    disabled: false,
-    compact: false,
-    _unsafeChildrenStringForTesting: 'Click me!',
-  }}
-/>
-
 <!-- Button with default style -->
-<Story name="Default" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
+<Story name="Primary">Click me!</Story>
 
 <!-- Button with border around it -->
-<Story name="Outline" args={{ outline: true }}>
-  <Button outline>Click me!</Button>
-</Story>
+<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
 
-<Story name="Disabled" args={{ disabled: true }}>
-  <Button disabled>Click me!</Button>
-</Story>
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
 
 <!-- Form submit button -->
-<Story name="Sumbit Button" args={{ type: 'submit' }}>
-  <Button type="submit">Submit Form</Button>
-</Story>
+<Story name="Sumbit Button" args={{ type: 'submit' }}>Submit Form</Story>
 
 <!-- Form submit button -->
-<Story name="Full width Button" args={{ fullWidth: true }}>
-  <Button fullWidth>Click me!</Button>
-</Story>
+<Story name="Full width Button" args={{ fullWidth: true }}>Click me!</Story>
 
 <!-- Anchor Link styled like a Button -->
 <Story
   name="Link Button"
   args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
 >
-  <Button href="https://www.w3schools.com/tags/tag_a.asp" target="_blank">Link</Button>
+  Link
 </Story>

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

@@ -1,8 +1,8 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>export const buttonTypeArray = ['button', 'submit'];
 </script>
 
-<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 lang="ts">"use strict";
+let { children, type = 'button', size = 'normal', color = 'primary', roundness = 1, variant = 'solid', 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, ref = $bindable(), } = $props();
 </script>
 
 {#snippet buttonContent()}
@@ -14,8 +14,6 @@ export {};
 
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 
   {#if after}
@@ -80,15 +78,15 @@ 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-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-outline-neutral: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-600);
+  --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-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);
@@ -127,15 +125,15 @@ export {};
 }
 
 :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-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
+  --dodo-ui-Button-outline-neutral: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-text-neutral-bg: var(--dodo-color-neutral-50);
+  --dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-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);
@@ -195,55 +193,55 @@ export {};
 .dodo-ui-Button.size--normal {
   height: var(--dodo-ui-element-height-normal);
   font-size: 1rem;
-  padding: 0 12px;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
   min-width: 45px;
 }
 .dodo-ui-Button.size--small {
   height: var(--dodo-ui-element-height-small);
-  padding: 0 8px;
+  padding: 0 var(--dodo-ui-space);
   font-size: 0.9rem;
   min-width: 35px;
 }
 .dodo-ui-Button.size--large {
   height: var(--dodo-ui-element-height-large);
   font-size: 1.1rem;
-  padding: 0 16px;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
   min-width: 85px;
 }
-.dodo-ui-Button.roundness--1x {
-  border-radius: var(--dodo-ui-element-roundness-1x);
+.dodo-ui-Button.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
 }
-.dodo-ui-Button.roundness--2x {
-  border-radius: var(--dodo-ui-element-roundness-2x);
+.dodo-ui-Button.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
 }
-.dodo-ui-Button.roundness--3x {
-  border-radius: var(--dodo-ui-element-roundness-3x);
+.dodo-ui-Button.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
 }
 .dodo-ui-Button.roundness--full {
   border-radius: 50%;
 }
-.dodo-ui-Button.color--default.variant--text {
-  color: var(--dodo-color-default-800);
-  background-color: var(--dodo-ui-Button-text-default-bg);
+.dodo-ui-Button.color--neutral.variant--text {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-Button-text-neutral-bg);
 }
-.dodo-ui-Button.color--default.variant--text:hover {
-  background-color: var(--dodo-ui-Button-text-default-hover-bg);
+.dodo-ui-Button.color--neutral.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-neutral-hover-bg);
 }
-.dodo-ui-Button.color--default.variant--text:active {
-  background-color: var(--dodo-ui-Button-text-default-active-bg);
+.dodo-ui-Button.color--neutral.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-neutral-active-bg);
 }
-.dodo-ui-Button.color--default.variant--text.outline {
-  border-color: var(--dodo-ui-Button-outline-default);
+.dodo-ui-Button.color--neutral.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-neutral);
 }
-.dodo-ui-Button.color--default.variant--solid {
+.dodo-ui-Button.color--neutral.variant--solid {
   color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Button-solid-default-bg);
+  background-color: var(--dodo-ui-Button-solid-neutral-bg);
 }
-.dodo-ui-Button.color--default.variant--solid:hover {
-  background-color: var(--dodo-ui-Button-solid-default-hover-bg);
+.dodo-ui-Button.color--neutral.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-neutral-hover-bg);
 }
-.dodo-ui-Button.color--default.variant--solid:active {
-  background-color: var(--dodo-ui-Button-solid-default-active-bg);
+.dodo-ui-Button.color--neutral.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-neutral-active-bg);
 }
 .dodo-ui-Button.color--primary.variant--text {
   color: var(--dodo-color-primary-800);

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

@@ -1,27 +1,33 @@
-export type ButtonColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
-export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
-export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
-import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '../../../../types.js';
+import type { ComponentColor } from '../../../../types/colors.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentSize } from '../../../../types/size.js';
+import type { ComponentWeight } from '../../../../types/weight.js';
 import type { Snippet } from 'svelte';
 import type { MouseEventHandler } from 'svelte/elements';
-interface ButtonProps {
+export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
+export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
+export type ButtonType = 'button' | 'submit';
+export declare const buttonTypeArray: ButtonType[];
+export type ButtonClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+};
+export interface ButtonProps {
     /** Button contents goes here */
     children?: Snippet;
     /** Button ref */
     ref?: HTMLButtonElement | HTMLAnchorElement;
     /** Regular button or submit button? */
-    type?: 'button' | 'submit';
+    type?: ButtonType;
     /** How large should the button be? */
     size?: ComponentSize;
     /** Full width button? */
     fullWidth?: boolean;
     /** What color to use? */
-    color?: ButtonColor;
+    color?: ComponentColor;
     /** How round should the border radius be? */
-    roundness?: ButtonRoundness;
+    roundness?: ComponentRoundness;
     /** How should the button appear? */
-    variant?: 'text' | 'solid';
+    variant?: ComponentWeight;
     /** Add a border around the button */
     outline?: boolean;
     /** Compact button for icons */
@@ -60,8 +66,6 @@ interface ButtonProps {
     anchorMediaType?: string | undefined | null;
     /** Link button: referrerpolicy  */
     referrerpolicy?: ButtonLinkReferrerpolicy;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
 }
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

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

@@ -1,6 +1,5 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
   import Button from '../Button.svelte';
   import { storyButtonArgTypes } from '../Button.stories.svelte';
 
@@ -9,60 +8,36 @@
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
   });
 </script>
 
-<Story name="Default" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-<Story name="Primary" args={{ color: 'primary' }}><Button color="primary">Click me!</Button></Story>
-<Story name="Secondary" args={{ color: 'secondary' }}>
-  <Button color="secondary">Click me!</Button>
-</Story>
-<Story name="Safe" args={{ color: 'safe' }}><Button color="safe">Click me!</Button></Story>
-<Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
-<Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
+<Story name="Primary">Click me!</Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>Click me!</Story>
+<Story name="Neutral" args={{ color: 'neutral' }}>Click me!</Story>
+<Story name="Safe" args={{ color: 'safe' }}>Click me!</Story>
+<Story name="Warning" args={{ color: 'warning' }}>Click me!</Story>
+<Story name="Danger" args={{ color: 'danger' }}>Click me!</Story>
 
-<Story
-  name="Default Solid"
-  args={{ outline: false, disabled: false, compact: false, variant: 'solid' }}
->
-  <Button variant="solid">Click me!</Button>
-</Story>
-<Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
-  <Button color="primary" variant="solid">Click me!</Button>
-</Story>
-<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid' }}>
-  <Button color="secondary" variant="solid">Click me!</Button>
-</Story>
-<Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
-  <Button color="safe" variant="solid">Click me!</Button>
-</Story>
-<Story name="Warning Solid" args={{ color: 'warning', variant: 'solid' }}>
-  <Button color="warning" variant="solid">Click me!</Button>
-</Story>
-<Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
-  <Button color="danger" variant="solid">Click me!</Button>
-</Story>
+<Story name="Primary Text" args={{ color: 'primary', variant: 'text' }}>Click me!</Story>
+<Story name="Secondary Text" args={{ color: 'secondary', variant: 'text' }}>Click me!</Story>
+<Story name="Neutral Text" args={{ color: 'neutral', variant: 'text' }}>Click me!</Story>
+<Story name="Safe Text" args={{ color: 'safe', variant: 'text' }}>Click me!</Story>
+<Story name="Warning Text" args={{ color: 'warning', variant: 'text' }}>Click me!</Story>
+<Story name="Danger Text" args={{ color: 'danger', variant: 'text' }}>Click me!</Story>
 
-<Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
-  <Button outline>Click me!</Button>
-</Story>
-<Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
-  <Button color="primary" outline>Click me!</Button>
+<Story name="Primary Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
+<Story name="Secondary Outline" args={{ color: 'secondary', variant: 'text', outline: true }}>
+  Click me!
 </Story>
-<Story name="Secondary Outline" args={{ outline: true, color: 'secondary' }}>
-  <Button color="secondary" outline>Click me!</Button>
+<Story name="Neutral Outline" args={{ color: 'neutral', variant: 'text', outline: true }}>
+  Click me!
 </Story>
-<Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
-  <Button color="safe" outline>Click me!</Button>
+<Story name="Safe Outline" args={{ color: 'safe', variant: 'text', outline: true }}>
+  Click me!
 </Story>
-<Story name="Warning Outline" args={{ outline: true, color: 'warning' }}>
-  <Button color="warning" outline>Click me!</Button>
+<Story name="Warning Outline" args={{ color: 'warning', variant: 'text', outline: true }}>
+  Click me!
 </Story>
-<Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
-  <Button color="danger" outline>Click me!</Button>
+<Story name="Danger Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
+  Click me!
 </Story>

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

@@ -1,5 +1,4 @@
 <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
@@ -7,18 +6,12 @@ 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;
 
@@ -26,6 +19,7 @@ const { Story } = defineMeta({
       console.log('Button Clicked', target);
     },
   }}
+  asChild
 >
   <Button
     onclick={(e: Event) => {

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

@@ -1,6 +1,5 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
   import Button from '../Button.svelte';
   import { storyButtonArgTypes } from '../Button.stories.svelte';
   import Icon from '@iconify/svelte';
@@ -10,28 +9,21 @@
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
   });
 </script>
 
 <!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
 <Story name="Icon Button" args={{ compact: true }}>
-  <Button compact>
-    <Icon icon="material-symbols:app-badging" width="18" height="18" />
-  </Button>
+  <Icon icon="material-symbols:app-badging" width="18" height="18" />
 </Story>
 
 <!-- Circualr Icon button. -->
 <Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
-  <Button roundness="full" compact>
-    <Icon icon="material-symbols:app-badging" width="18" height="18" />
-  </Button>
+  <Icon icon="material-symbols:app-badging" width="18" height="18" />
 </Story>
 
 <!-- Button with an icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <Button>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -41,7 +33,7 @@
 </Story>
 
 <!-- Button with an icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <Button>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />

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

@@ -1,6 +1,5 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
   import Button from '../Button.svelte';
   import { storyButtonArgTypes } from '../Button.stories.svelte';
 
@@ -9,41 +8,16 @@
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
   });
 </script>
 
-<Story name="Roundness 1x" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
+<Story name="Roundness 1">Click me!</Story>
 
-<Story
-  name="Roundness 2x"
-  args={{ outline: false, disabled: false, compact: false, roundness: '2x' }}
->
-  <Button roundness="2x">Click me!</Button>
-</Story>
+<Story name="Roundness 2" args={{ roundness: 2 }}>Click me!</Story>
 
-<Story
-  name="Roundness 3x"
-  args={{ outline: false, disabled: false, compact: false, roundness: '3x' }}
->
-  <Button roundness="3x">Click me!</Button>
-</Story>
+<Story name="Roundness 3" args={{ roundness: 3 }}>Click me!</Story>
 
-<Story
-  name="Roundness False"
-  args={{ outline: false, disabled: false, compact: false, roundness: false }}
->
-  <Button roundness={false}>Click me!</Button>
-</Story>
+<Story name="Roundness 0" args={{ roundness: 0 }}>Click me!</Story>
 
 <!-- Button with 50% roundness usefull for icon (Compact) buttons -->
-<Story
-  name="Roundness Full"
-  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
->
-  <Button roundness="full">C</Button>
-</Story>
+<Story name="Roundness Full" args={{ roundness: 'full', compact: true }}>C</Story>