@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/dist/stories/components/Layout/Separator/Separator.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import Separator from './Separator.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storySeparatorArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Separator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Separator = InstanceType<typeof Separator>;
+export default Separator;

package/dist/stories/components/Layout/Separator/Separator.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>export const separatorOrientationArray = ['horizontal', 'vertical'];
+</script>
+
+<script lang="ts">"use strict";
+let { id, class: className = '', orientation = 'horizontal', color = 'neutral', ref = $bindable(), width, height, } = $props();
+</script>
+
+<div
+  class={['dodo-ui-Separator', `color--${color}`, `orientation--${orientation}`, className].join(
+    ' ',
+  )}
+  {id}
+  style={`${width ? `width:${width};` : ''}
+  ${height ? `height:${height};` : ''}
+  `}
+  bind:this={ref}
+></div>
+
+<style>:global(:root) {
+  --dodo-ui-Separator-color-neutral: var(--dodo-color-neutral-300);
+  --dodo-ui-Separator-color-primary: var(--dodo-color-primary-300);
+  --dodo-ui-Separator-color-secondary: var(--dodo-color-secondary-300);
+  --dodo-ui-Separator-color-safe: var(--dodo-color-safe-300);
+  --dodo-ui-Separator-color-warning: var(--dodo-color-warning-300);
+  --dodo-ui-Separator-color-danger: var(--dodo-color-danger-300);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-Separator-color-neutral: var(--dodo-color-neutral-300);
+  --dodo-ui-Separator-color-primary: var(--dodo-color-primary-300);
+  --dodo-ui-Separator-color-secondary: var(--dodo-color-secondary-300);
+  --dodo-ui-Separator-color-safe: var(--dodo-color-safe-300);
+  --dodo-ui-Separator-color-warning: var(--dodo-color-warning-300);
+  --dodo-ui-Separator-color-danger: var(--dodo-color-danger-300);
+}
+
+.dodo-ui-Separator.color--neutral {
+  background-color: var(--dodo-ui-Separator-color-neutral);
+}
+.dodo-ui-Separator.color--primary {
+  background-color: var(--dodo-ui-Separator-color-primary);
+}
+.dodo-ui-Separator.color--secondary {
+  background-color: var(--dodo-ui-Separator-color-secondary);
+}
+.dodo-ui-Separator.color--safe {
+  background-color: var(--dodo-ui-Separator-color-safe);
+}
+.dodo-ui-Separator.color--warning {
+  background-color: var(--dodo-ui-Separator-color-warning);
+}
+.dodo-ui-Separator.color--danger {
+  background-color: var(--dodo-ui-Separator-color-danger);
+}
+.dodo-ui-Separator.orientation--horizontal {
+  display: flex;
+  height: var(--dodo-ui-element-border-width);
+  width: 100%;
+  margin: calc(var(--dodo-ui-space) * 1) 0;
+}
+.dodo-ui-Separator.orientation--vertical {
+  display: inline-flex;
+  height: 100%;
+  width: var(--dodo-ui-element-border-width);
+  margin: 0 calc(var(--dodo-ui-space) * 1);
+}</style>

package/dist/stories/components/Layout/Separator/Separator.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentColor } from '../../../../types/colors.js';
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export declare const separatorOrientationArray: SeparatorOrientation[];
+export interface SeparatorProps {
+    /** Separator ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Id */
+    id?: string;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Separator Width */
+    width?: string;
+    /** Separator Height */
+    height?: string;
+    /** Separator orientation,  'horizontal', 'vertical'*/
+    orientation?: SeparatorOrientation;
+}
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/stories/components/Layout/Separator/utils/scss/mixins.scss

@@ -0,0 +1,24 @@
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-separator-colors($color-name) {
+  --dodo-ui-Separator-color-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+}
+
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-separator-colors-dark($color-name) {
+  --dodo-ui-Separator-color-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+}
+
+/// Mixin: generate-dodo-ui-button-color
+/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-separator-color($theme) {
+  &--#{$theme} {
+    background-color: var(--dodo-ui-Separator-color-#{$theme});
+  }
+}

package/dist/stories/developer tools/Intro.mdx

@@ -5,3 +5,5 @@ A set of components and tools used internally in dodo-ui.
 ## Explore More
 
 - [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

package/dist/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DynamicInput, { dynamicInputVariantArray } from './DynamicInput.svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+import { textInputTypeArray } from '../../../components/Form/TextInput/TextInput.svelte';
+import Icon from '@iconify/svelte';
+export const storyDynamicInputArgTypes = {
+    type: {
+        control: { type: 'select' },
+        options: textInputTypeArray,
+    },
+    variant: {
+        control: { type: 'select' },
+        options: dynamicInputVariantArray,
+    },
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DynamicInput,
+    tags: ['autodocs'],
+    argTypes: storyDynamicInputArgTypes,
+    args: { value: 'Hello world!' },
+});
+</script>
+
+<Story name="Default" />
+
+<!-- Clickable button type Variant -->
+<Story name="VariantButton" args={{ variant: 'button' }} />
+
+<!-- Clickable button type Variant with placeholder -->
+<Story
+  name="ButtonWithPlaceholder"
+  args={{ variant: 'button', placeholder: 'Type Something...', value: '' }}
+/>
+
+<Story name="CustomInputContent" asChild>
+  <DynamicInput variant="button" value="Hello world!">
+    {#snippet customInputContent(value)}
+      <div>
+        {`${value}`}
+        <Icon icon="material-symbols:ads-click" width="24" height="24" style="color: #d21313" />
+      </div>
+    {/snippet}
+  </DynamicInput>
+</Story>

package/dist/stories/{components/Form/SimpleSelect/SimpleSelect.stories.svelte.d.ts → developer tools/components/DynamicInput/DynamicInput.stories.svelte.d.ts }

@@ -1,8 +1,6 @@
-import { type SimpleSelectOption } from './SimpleSelect.svelte';
+import DynamicInput from './DynamicInput.svelte';
 import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-import SimpleSelect from './SimpleSelect.svelte';
-export declare const storySimpleSelectArgTypes: StoryBookArgTypes;
-export declare const storySimpleSelectOptions: SimpleSelectOption[];
+export declare const storyDynamicInputArgTypes: StoryBookArgTypes;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -16,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SimpleSelect: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DynamicInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type SimpleSelect = InstanceType<typeof SimpleSelect>;
-export default SimpleSelect;
+type DynamicInput = InstanceType<typeof DynamicInput>;
+export default DynamicInput;

package/dist/stories/developer tools/components/DynamicInput/DynamicInput.svelte

@@ -0,0 +1,92 @@
+<script lang="ts" module>import {} from '../../../../index.js';
+export const dynamicInputVariantArray = ['input', 'button'];
+</script>
+
+<script lang="ts">"use strict";
+let { type = 'text', name, id, class: className = '', disabled = false, onchange, oninput, onblur, onfocus, onpaste, oncopy, oncut, value = $bindable(), placeholder, ref = $bindable(), readonly = false, variant = 'input', size = 'normal', onclick, customInputContent, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customInputContentTyped = customInputContent;
+function onclickMod(e) {
+    if (onfocus) {
+        onfocus(e);
+    }
+    if (onclick) {
+        onclick(e);
+    }
+}
+</script>
+
+{#if variant === 'button'}
+  <button
+    {id}
+    class={[
+      'dodo-ui-DynamicInput',
+      `size--${size}`,
+      `variant--${variant}`,
+      `${!value ? 'placeholder' : ''}`,
+      className,
+    ].join(' ')}
+    bind:this={ref}
+    onclick={onclickMod}
+    {onblur}
+    {disabled}
+  >
+    {#if customInputContentTyped}
+      {@render customInputContentTyped(value)}
+    {:else}
+      {`${value}` || placeholder}
+    {/if}
+  </button>
+{:else}
+  <input
+    class={['dodo-ui-DynamicInput', `size--${size}`, `variant--${variant}`, className].join(' ')}
+    {type}
+    {name}
+    {id}
+    {disabled}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+    {onpaste}
+    {oncopy}
+    {oncut}
+    {placeholder}
+    bind:value
+    bind:this={ref}
+    {readonly}
+  />
+{/if}
+
+<style>.dodo-ui-DynamicInput {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+  margin: 0;
+}
+.dodo-ui-DynamicInput.variant--button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.dodo-ui-DynamicInput.variant--button.placeholder {
+  opacity: 0.6;
+}
+.dodo-ui-DynamicInput.size--normal {
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-DynamicInput.size--small {
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+}
+.dodo-ui-DynamicInput.size--large {
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+}</style>

package/dist/stories/developer tools/components/DynamicInput/DynamicInput.svelte.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentSize, type TextInputType } from '../../../../index.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, MouseEventHandler } from 'svelte/elements';
+export type DynamicInputVariant = 'input' | 'button';
+export declare const dynamicInputVariantArray: DynamicInputVariant[];
+export type DynamicInputClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+};
+export type DynamicInputFocusEvent = FocusEvent & {
+    currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
+};
+export interface DynamicInputProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Input type? */
+    type?: TextInputType;
+    /** Input ref */
+    ref?: HTMLInputElement | HTMLButtonElement;
+    /** Input value */
+    value?: string | number;
+    /** variant */
+    variant?: DynamicInputVariant;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** custom Content Formatting for variant button */
+    customInputContent?: (value: string | number) => Snippet;
+}
+declare const DynamicInput: import("svelte").Component<DynamicInputProps, {}, "ref" | "value">;
+type DynamicInput = ReturnType<typeof DynamicInput>;
+export default DynamicInput;

package/{src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte → dist/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte }

@@ -1,13 +1,13 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import TextInput from '../TextInput.svelte';
-  import { storyTextInputArgTypes } from '../TextInput.stories.svelte';
+  import DynamicInput from '../DynamicInput.svelte';
+  import { storyDynamicInputArgTypes } from '../DynamicInput.stories.svelte';
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    component: TextInput,
+    component: DynamicInput,
     tags: ['autodocs'],
-    argTypes: storyTextInputArgTypes,
+    argTypes: storyDynamicInputArgTypes,
     args: { value: 'Hello world!' },
   });
 </script>

package/dist/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte

@@ -1,13 +1,15 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import InputEnclosure from './InputEnclosure.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyInputEnclosureArgTypes = {
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
+        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,7 +30,5 @@ const { Story } = defineMeta({
 <Story name="Disabled" args={{ disabled: true }} />
 
 <Story name="Input example">
-  <InputEnclosure>
-    <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
-  </InputEnclosure>
+  <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
 </Story>

package/dist/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte

@@ -1,5 +1,8 @@
-<script lang="ts">let { size = 'normal', roundness = '1x', outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
 </script>
 
 <div
@@ -21,6 +24,7 @@ export {};
   {#if children}
     {@render children()}
   {/if}
+
   {#if after}
     <span class="content--after">
       {@render after()}
@@ -29,25 +33,25 @@ export {};
 </div>
 
 <style>:global(:root) {
-  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-500);
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
   --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
   --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
-  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-400);
-  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-200);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
 }
 
 :global(.dodo-theme--dark) {
-  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-600);
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
   --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
   --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
-  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-100);
-  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-500);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
 }
 
 .dodo-ui-InputEnclosure {
   display: flex;
   overflow: hidden;
-  color: var(--dodo-color-default-800);
+  color: var(--dodo-color-neutral-800);
   transition: all 150ms;
   border: 0;
 }
@@ -109,12 +113,12 @@ export {};
   margin-right: 14px;
   margin-left: -4px;
 }
-.dodo-ui-InputEnclosure.roundness--1x {
-  border-radius: var(--dodo-ui-element-roundness-1x);
+.dodo-ui-InputEnclosure.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
 }
-.dodo-ui-InputEnclosure.roundness--2x {
-  border-radius: var(--dodo-ui-element-roundness-2x);
+.dodo-ui-InputEnclosure.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
 }
-.dodo-ui-InputEnclosure.roundness--3x {
-  border-radius: var(--dodo-ui-element-roundness-3x);
+.dodo-ui-InputEnclosure.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
 }</style>

package/dist/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
-interface InputEnclosureProps {
+export interface InputEnclosureProps {
     /** InputEnclosure contents goes here */
     children?: Snippet;
     /** InputEnclosure ref */
@@ -8,7 +9,7 @@ interface InputEnclosureProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** disabled state */

package/dist/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte

@@ -11,10 +11,10 @@
   });
 </script>
 
-<Story name="Roundness 1x" />
+<Story name="Roundness 1" />
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }} />
+<Story name="Roundness 2" args={{ roundness: 2 }} />
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }} />
+<Story name="Roundness 3" args={{ roundness: 3 }} />
 
-<Story name="Roundness False" args={{ roundness: false }} />
+<Story name="Roundness 0" args={{ roundness: 0 }} />

package/dist/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <!-- InputEnclosure icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <InputEnclosure>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -22,7 +22,7 @@
 </Story>
 
 <!-- InputEnclosure icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <InputEnclosure>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />
@@ -30,7 +30,7 @@
   </InputEnclosure>
 </Story>
 
-<Story name="Small" args={{ size: 'small' }}>
+<Story name="Small" args={{ size: 'small' }} asChild>
   <InputEnclosure size="small">
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -38,7 +38,7 @@
   </InputEnclosure>
 </Story>
 
-<Story name="Large" args={{ size: 'large' }}>
+<Story name="Large" args={{ size: 'large' }} asChild>
   <InputEnclosure size="large">
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />