@flightlesslabs/dodo-ui 0.6.5 → 0.6.6

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

@@ -10,18 +10,17 @@ const { Story } = defineMeta({
 
 <Story name="Default" args={{ label: 'Hello there' }} />
 
-<Story name="Example TextInput" args={{ label: 'Whats your first name?' }}>
-  <FormControl label="Whats your first name?" for="first-name-01">
-    <TextInput placeholder="First name" id="first-name-01" />
-  </FormControl>
+<Story name="Example TextInput" args={{ label: 'Whats your first name?', for: 'first-name-01' }}>
+  <TextInput placeholder="First name" id="first-name-01" />
 </Story>
 
-<Story name="ErrorMessage" args={{ label: 'Whats your first name?' }}>
-  <FormControl
-    label="Whats your first name?"
-    for="first-name-02"
-    errorMessage="This is an error message"
-  >
-    <TextInput value="John Smith" id="first-name-02" error />
-  </FormControl>
+<Story
+  name="ErrorMessage"
+  args={{
+    label: 'Whats your first name?',
+    for: 'first-name-02',
+    errorMessage: 'This is an error message',
+  }}
+>
+  <TextInput value="John Smith" id="first-name-02" error />
 </Story>

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

@@ -21,14 +21,9 @@ let { children, label, class: className = '', for: htmlFor, form, ref = $bindabl
   {/if}
 </div>
 
-<style>:global(:root) {
-  --dodo-ui-FormControl-LabelSection-gap: 8px;
-  --dodo-ui-FormControl-errorMessage-gap: 10px;
-}
-
-.dodo-ui-FormControl .LabelSection {
-  margin-bottom: var(--dodo-ui-FormControl-LabelSection-gap);
+<style>.dodo-ui-FormControl .LabelSection {
+  margin-bottom: var(--dodo-ui-space);
 }
 .dodo-ui-FormControl .errorMessage {
-  margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+  margin-top: var(--dodo-ui-space-large);
 }</style>

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

@@ -7,15 +7,5 @@ const { Story } = defineMeta({
 });
 </script>
 
-<!-- ⚠️ Test Label: Do not use! -->
-<Story
-  name="Test Label"
-  args={{
-    _unsafeChildrenStringForTesting: 'This is a form label',
-  }}
-/>
-
 <!-- Label with default style -->
-<Story name="Default">
-  <Label>This is a form label</Label>
-</Story>
+<Story name="Default">This is a form label</Story>

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

@@ -1,18 +1,16 @@
-<script lang="ts">let { children, class: className = '', for: htmlFor, form, _unsafeChildrenStringForTesting, ref = $bindable(), } = $props();
+<script lang="ts">let { children, class: className = '', for: htmlFor, form, ref = $bindable(), } = $props();
 export {};
 </script>
 
 <label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </label>
 
 <style>.dodo-ui-Label {
   font-size: 0.95rem;
-  color: var(--dodo-color-default-700);
+  color: var(--dodo-color-neutral-700);
   display: flex;
   align-items: center;
   font-family: inherit;

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

@@ -10,8 +10,6 @@ interface LabelProps {
     form?: string;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
 }
 declare const Label: import("svelte").Component<LabelProps, {}, "ref">;
 type Label = ReturnType<typeof Label>;

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

@@ -11,26 +11,26 @@
   });
 </script>
 
-<Story name="Default">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
 <Story name="Primary" args={{ color: 'primary' }}>
-  <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Secondary" args={{ color: 'secondary' }}>
-  <Message color="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
+</Story>
+
+<Story name="Neutral" args={{ color: 'neutral' }}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Safe" args={{ color: 'safe' }}>
-  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Warning" args={{ color: 'warning' }}>
-  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Danger" args={{ color: 'danger' }}>
-  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>

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

@@ -1,13 +1,15 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import Message from './Message.svelte';
+import { componentColorArray } from '../../../../types/colors.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyMessageArgTypes = {
     color: {
         control: { type: 'select' },
-        options: ['default', 'primary', 'secondary', 'safe', 'warning', 'danger'],
+        options: componentColorArray,
     },
     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
@@ -18,14 +20,4 @@ const { Story } = defineMeta({
 });
 </script>
 
-<!-- ⚠️ Test Message: Do not use! -->
-<Story
-  name="Test Message"
-  args={{
-    _unsafeChildrenStringForTesting: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  }}
-/>
-
-<Story name="Default">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
+<Story name="Primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Story>

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

@@ -1,7 +1,4 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">let { children, class: className = '', color = 'default', ref = $bindable(), _unsafeChildrenStringForTesting, size = 'normal', } = $props();
+<script lang="ts">let { children, class: className = '', color = 'primary', ref = $bindable(), size = 'normal', } = $props();
 export {};
 </script>
 
@@ -11,8 +8,6 @@ export {};
 >
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </div>
 
@@ -30,15 +25,15 @@ export {};
 .dodo-ui-Message.size--large {
   font-size: 1.1rem;
 }
-.dodo-ui-Message.color--default {
-  color: var(--dodo-color-default-800);
-}
 .dodo-ui-Message.color--primary {
   color: var(--dodo-color-primary-600);
 }
 .dodo-ui-Message.color--secondary {
   color: var(--dodo-color-secondary-600);
 }
+.dodo-ui-Message.color--neutral {
+  color: var(--dodo-color-neutral-600);
+}
 .dodo-ui-Message.color--safe {
   color: var(--dodo-color-safe-600);
 }

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

@@ -1,5 +1,5 @@
-export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-import type { ComponentSize } from '../../../../types.js';
+import type { ComponentColor } from '../../../../types/colors.js';
+import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
 interface MessageProps {
     /** Message contents goes here */
@@ -7,13 +7,11 @@ interface MessageProps {
     /** Message ref */
     ref?: HTMLDivElement;
     /** What color to use? */
-    color?: MessageColor;
+    color?: ComponentColor;
     /** Message size */
     size?: ComponentSize;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
 }
 declare const Message: import("svelte").Component<MessageProps, {}, "ref">;
 type Message = ReturnType<typeof Message>;

package/dist/stories/components/Form/Message/Size/Size.stories.svelte

@@ -11,14 +11,12 @@
   });
 </script>
 
-<Story name="Normal">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
+<Story name="Normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Story>
 
 <Story name="Small" args={{ size: 'small' }}>
-  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Large" args={{ size: 'large' }}>
-  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>

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

@@ -18,15 +18,7 @@ const { Story } = defineMeta({
       console.log('Input Event', target.value);
     },
   }}
->
-  <PasswordInput
-    oninput={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <Story
   name="Change"
@@ -37,15 +29,7 @@ const { Story } = defineMeta({
       console.log('onChange Event', target.value);
     },
   }}
->
-  <PasswordInput
-    onchange={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onchange Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: PasswordInputToggleEvent` -->
 <Story
@@ -57,15 +41,7 @@ const { Story } = defineMeta({
       console.log('ontoggle Event', e, target);
     },
   }}
->
-  <PasswordInput
-    ontoggle={(e: PasswordInputToggleEvent) => {
-      const target = e.event.target as HTMLButtonElement;
-
-      console.log('ontoggle Event', e, target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -77,15 +53,7 @@ const { Story } = defineMeta({
       console.log('onfocus Event', target);
     },
   }}
->
-  <PasswordInput
-    onfocus={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -97,15 +65,7 @@ const { Story } = defineMeta({
       console.log('onblur Event', target);
     },
   }}
->
-  <PasswordInput
-    onblur={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -117,15 +77,7 @@ const { Story } = defineMeta({
       console.log('oncopy Event', target);
     },
   }}
->
-  <PasswordInput
-    oncopy={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncopy Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -137,15 +89,7 @@ const { Story } = defineMeta({
       console.log('oncut Event', target);
     },
   }}
->
-  <PasswordInput
-    oncut={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncut Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -157,12 +101,4 @@ const { Story } = defineMeta({
       console.log('onpaste Event', target);
     },
   }}
->
-  <PasswordInput
-    onpaste={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onpaste Event', target);
-    }}
-  />
-</Story>
+/>

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

@@ -1,14 +1,16 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import PasswordInput from './PasswordInput.svelte';
 import Icon from '@iconify/svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyPasswordInputArgTypes = {
     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
@@ -40,7 +42,7 @@ const { Story } = defineMeta({
 <Story name="Read only" args={{ readonly: true }} />
 
 <!-- Show Password by default -->
-<Story name="Custom toggle icon">
+<Story name="Custom toggle icon" asChild>
   <PasswordInput value="Hello world!">
     {#snippet customPasswordToggleIcon(toggle)}
       {#if toggle}

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

@@ -4,7 +4,7 @@
 <script lang="ts">import Icon from '@iconify/svelte';
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-let { size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 let toggle = $state(passwordToggleState);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -86,13 +86,13 @@ function ontoggleMod(e) {
 }
 .dodo-ui-PasswordInput.size--normal input {
   font-size: 1rem;
-  padding: 0 12px;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
 }
 .dodo-ui-PasswordInput.size--small input {
-  padding: 0 8px;
+  padding: 0 var(--dodo-ui-space);
   font-size: 0.9rem;
 }
 .dodo-ui-PasswordInput.size--large input {
   font-size: 1.1rem;
-  padding: 0 14px;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
 }</style>

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

@@ -2,9 +2,10 @@ export type PasswordInputToggleEvent = {
     event: Event;
     toggle: boolean;
 };
-import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
 import type { Snippet } from 'svelte';
 import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type { ComponentSize } from '../../../../types/size.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
 interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -17,7 +18,7 @@ interface PasswordInputProps {
     /** Toggle Password Icon */
     customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */

package/dist/stories/components/Form/PasswordInput/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/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <!-- PasswordInput icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <PasswordInput>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -22,7 +22,7 @@
 </Story>
 
 <!-- PasswordInput icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <PasswordInput>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />

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

@@ -20,16 +20,7 @@ const { Story } = defineMeta({
       console.log('onChange Event', target.value);
     },
   }}
->
-  <SimpleSelect
-    onchange={(e: Event) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onchange Event', target.value);
-    }}
-    options={storySimpleSelectOptions}
-  />
-</Story>
+/>
 
 <!-- `e: SimpleSelectFocusEvent` -->
 <Story
@@ -41,16 +32,7 @@ const { Story } = defineMeta({
       console.log('onfocus Event', target);
     },
   }}
->
-  <SimpleSelect
-    onfocus={(e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onfocus Event', target);
-    }}
-    options={storySimpleSelectOptions}
-  />
-</Story>
+/>
 
 <!-- `e: SimpleSelectFocusEvent` -->
 <Story
@@ -62,13 +44,4 @@ const { Story } = defineMeta({
       console.log('onblur Event', target);
     },
   }}
->
-  <SimpleSelect
-    onblur={(e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onblur Event', target);
-    }}
-    options={storySimpleSelectOptions}
-  />
-</Story>
+/>

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

@@ -15,10 +15,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/components/Form/SimpleSelect/SimpleSelect.stories.svelte

@@ -1,18 +1,16 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import {} from './SimpleSelect.svelte';
 import SimpleSelect from './SimpleSelect.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storySimpleSelectArgTypes = {
-    type: {
-        control: { type: 'select' },
-        options: ['text', 'tel', 'email', 'password', 'url', 'number'],
-    },
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
+        options: componentRoundnessArray,
     },
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 export const storySimpleSelectOptions = [

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-let { size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, onchange, onblur, onfocus, before, after, error = false, value, placeholder, ref = $bindable(), options, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, onblur, onfocus, before, after, error = false, value, placeholder, ref = $bindable(), options, } = $props();
 let focused = $state(false);
 function onfocusMod(e) {
     focused = true;
@@ -57,13 +57,13 @@ function onblurMod(e) {
 }
 .dodo-ui-SimpleSelect.size--normal select {
   font-size: 1rem;
-  padding: 0 12px;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
 }
 .dodo-ui-SimpleSelect.size--small select {
-  padding: 0 8px;
+  padding: 0 var(--dodo-ui-space);
   font-size: 0.9rem;
 }
 .dodo-ui-SimpleSelect.size--large select {
   font-size: 1.1rem;
-  padding: 0 14px;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
 }</style>

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

@@ -6,7 +6,8 @@ export type SimpleSelectOption = {
     label: string;
     disabled?: boolean;
 };
-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';
 import type { ChangeEventHandler, FocusEventHandler } from 'svelte/elements';
 interface SimpleSelectProps {
@@ -15,7 +16,7 @@ interface SimpleSelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** How round should the border radius be? */
     options: SimpleSelectOption[];
     /** Add a border around the button. Default True */

package/dist/stories/components/Form/SimpleSelect/WithIcon/WithIcon.stories.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <!-- SimpleSelect icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <SimpleSelect options={storySimpleSelectOptions}>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -27,7 +27,7 @@
 </Story>
 
 <!-- SimpleSelect icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <SimpleSelect options={storySimpleSelectOptions}>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />