@flightlesslabs/dodo-ui 0.17.2 → 0.18.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ 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';
+export type { DropdownArrowPosition } from './types/special.js';
 /** developer tools: helpers: logger */
 export { default as createLogger } from './stories/developer tools/helpers/logger/logger.js';
 export type { LogLevel, LoggerOptions, } from './stories/developer tools/helpers/logger/logger.js';
@@ -50,7 +51,7 @@ export { default as Message } from './stories/components/Form/Message/Message.sv
 export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
 /** Form: Select */
 export { default as Select } from './stories/components/Form/Select/Select.svelte';
-export type { SelectOption, SelectDropdownArrowPosition, SelectProps, } from './stories/components/Form/Select/Select.svelte';
+export type { SelectOption, SelectProps } from './stories/components/Form/Select/Select.svelte';
 /** Form: NumericInput */
 export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
 export type { NumericInputProps } from './stories/components/Form/NumericInput/NumericInput.svelte';
@@ -89,6 +90,9 @@ export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte'
 export type { GridRowProps } from './stories/components/Layout/Grid/Row/Row.svelte';
 export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
 export type { GridColumnSize, GridColumnProps, } from './stories/components/Layout/Grid/Column/Column.svelte';
+/** Layout: Accordian */
+export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
+export type { AccordianProps, AccordianToggleEvent, } from './stories/components/Layout/Accordian/Accordian.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export type { CalendarProps, CalendarActiveSection, } from './stories/components/Info/Calendar/Calendar.svelte';

package/dist/index.js

@@ -55,6 +55,8 @@ export { default as DynamicMenu } from './stories/components/Layout/Menu/Dynamic
 export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
 export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
 export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
+/** Layout: Accordian */
+export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';

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

@@ -7,7 +7,6 @@ export type SelectOption = {
     label: string;
     disabled?: boolean;
 };
-export type SelectDropdownArrowPosition = false | 'before' | 'after';
 export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -90,7 +89,7 @@ export interface SelectProps {
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    dropdownArrowPosition?: DropdownArrowPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -103,6 +102,7 @@ export interface SelectProps {
     open?: boolean;
 }
 import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
+import type { DropdownArrowPosition } from '../../../../types/special.js';
 declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

@@ -0,0 +1,52 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Accordian from './Accordian.svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyAccordianArgTypes = {
+    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: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+</script>
+
+<Story name="Default" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Open by Default" asChild>
+  <Accordian defaultOpen={true}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Full Width Summary" asChild>
+  <Accordian fullWidthSummary>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

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

@@ -0,0 +1,21 @@
+import Accordian from './Accordian.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyAccordianArgTypes: 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 Accordian: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Accordian = InstanceType<typeof Accordian>;
+export default Accordian;

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

@@ -0,0 +1,121 @@
+<script lang="ts" module>import Icon from '@iconify/svelte';
+import { onMount } from 'svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { class: className = '', ref = $bindable(), ontoggle, open = $bindable(), defaultOpen, summary, children, size = 'normal', fullWidthSummary = false, customDropdownArrowIcon: customDropdownArrowIconInternal, dropdownArrowPosition = 'before', } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
+let isUserInteraction = $state(false);
+function ontoggleMod(e) {
+    if (isUserInteraction) {
+        if (ontoggle) {
+            ontoggle(e);
+        }
+    }
+    isUserInteraction = false;
+}
+function onsummaryclick() {
+    isUserInteraction = true;
+}
+onMount(() => {
+    if (open === true) {
+        ref.open = true;
+    }
+    else if (open === false) {
+        ref.open = false;
+    }
+    else if (defaultOpen === true) {
+        ref.open = true;
+    }
+    else if (defaultOpen === false) {
+        ref.open = false;
+    }
+});
+</script>
+
+{#snippet dropdownArrowIcon()}
+  {#if customDropdownArrowIconTyped}
+    {@render customDropdownArrowIconTyped(open)}
+  {:else}
+    <div class="IconOpen">
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="32" height="32" />
+    </div>
+    <div class="IconClose">
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="32" height="32" />
+    </div>
+  {/if}
+{/snippet}
+
+<details
+  class:fullWidthSummary
+  class={['dodo-ui-Accordian', `size--${size}`, className].join(' ')}
+  bind:this={ref}
+  {open}
+  ontoggle={ontoggleMod}
+>
+  {#if summary}
+    <summary onclick={onsummaryclick}>
+      {#if dropdownArrowPosition === 'before'}
+        <div class:open class="DropdownArrow before">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+      {@render summary()}
+      {#if dropdownArrowPosition === 'after'}
+        <div class:open class="DropdownArrow after">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+    </summary>
+  {/if}
+
+  {#if children}
+    <div class="AccordianContent">
+      {@render children()}
+    </div>
+  {/if}
+</details>
+
+<style>.dodo-ui-Accordian {
+  color: var(--dodo-color-neutral-900);
+  width: 100%;
+}
+.dodo-ui-Accordian summary {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 500;
+}
+.dodo-ui-Accordian.fullWidthSummary summary {
+  display: flex;
+  width: 100%;
+}
+.dodo-ui-Accordian[open] .IconOpen {
+  display: flex;
+}
+.dodo-ui-Accordian[open] .IconClose {
+  display: none;
+}
+.dodo-ui-Accordian:not([open]) .IconOpen {
+  display: none;
+}
+.dodo-ui-Accordian:not([open]) .IconClose {
+  display: flex;
+}
+.dodo-ui-Accordian.size--normal summary {
+  font-size: 1rem;
+  min-height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-Accordian.size--small summary {
+  font-size: 0.9rem;
+  min-height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-Accordian.size--large summary {
+  font-size: 1.1rem;
+  min-height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-Accordian .AccordianContent {
+  margin-top: var(--dodo-ui-space);
+}</style>

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

@@ -0,0 +1,34 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { DropdownArrowPosition } from '../../../../types/special.js';
+import { type Snippet } from 'svelte';
+import type { EventHandler } from 'svelte/elements';
+export type AccordianToggleEvent = Event & {
+    currentTarget: EventTarget & HTMLDetailsElement;
+};
+export interface AccordianProps {
+    /** Contents goes here */
+    children?: Snippet;
+    /** Accordian summary */
+    summary?: Snippet;
+    /** summary full width */
+    fullWidthSummary?: boolean;
+    /** Accordian ref */
+    ref?: HTMLDetailsElement;
+    /** Custom css class */
+    class?: string;
+    /** The toggle event handler */
+    ontoggle?: EventHandler<Event, HTMLDetailsElement>;
+    /**  Open state, for dynmaic Accordians */
+    open?: boolean;
+    /** default Open, for static Accordians */
+    defaultOpen?: boolean;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Select Dropdown Arrow Position */
+    dropdownArrowPosition?: DropdownArrowPosition;
+    /** Dropdown Arrow Icon */
+    customDropdownArrowIcon?: (open: boolean) => Snippet;
+}
+declare const Accordian: import("svelte").Component<AccordianProps, {}, "ref" | "open">;
+type Accordian = ReturnType<typeof Accordian>;
+export default Accordian;

package/dist/stories/components/Layout/Accordian/Customize/Customize.stories.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Accordian from '../Accordian.svelte';
+import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+import Icon from '@iconify/svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+let open = $state(true);
+</script>
+
+<Story name="DropdownArrowPositionBefore" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="DropdownArrowPositionAfter" asChild>
+  <Accordian dropdownArrowPosition="after">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="HideDropdownArrow" asChild>
+  <Accordian dropdownArrowPosition={false}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Accordian {open} ontoggle={() => (open = !open)}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+
+    {#snippet customDropdownArrowIcon(open)}
+      {#if open}
+        <Icon icon="mingcute:up-fill" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:down-fill" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Customize/Customize.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

package/dist/stories/components/Layout/Accordian/Events/Events.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+import Accordian, {} from '../Accordian.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+let open = $state(false);
+</script>
+
+<Story name="Toggle" asChild>
+  <Accordian
+    {open}
+    ontoggle={(e: AccordianToggleEvent) => {
+      open = !open;
+
+      console.log('Input Event', e);
+    }}
+  >
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Events/Events.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Layout/Accordian/Size/Size.stories.svelte

@@ -0,0 +1,48 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Accordian from '../Accordian.svelte';
+  import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+  });
+</script>
+
+<Story name="Normal" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Small" asChild>
+  <Accordian size="small">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Larger" asChild>
+  <Accordian size="large">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/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/types/special.d.ts

@@ -0,0 +1 @@
+export type DropdownArrowPosition = false | 'before' | 'after';

package/dist/types/special.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "scripts": {
     "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
     "build": "vite build && pnpm copy-css && pnpm run prepack",
@@ -60,7 +60,7 @@
     "@storybook/addon-vitest": "^9.1.1",
     "@storybook/sveltekit": "^9.1.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.27.0",
+    "@sveltejs/kit": "^2.27.1",
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@types/file-saver": "^2.0.7",
@@ -77,14 +77,14 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "storybook": "^9.1.1",
-    "svelte": "^5.37.3",
+    "svelte": "^5.38.0",
     "svelte-check": "^4.3.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.0",
-    "vite": "^7.0.6",
+    "vite": "^7.1.0",
     "vitest": "^3.2.4"
   },
   "keywords": [

package/src/lib/index.ts

@@ -12,6 +12,8 @@ export type { ComponentWeight } from './types/weight.js';
 
 export type { PositionY, PositionX } from './types/position.js';
 
+export type { DropdownArrowPosition } from './types/special.js';
+
 /** developer tools: helpers: logger */
 export { default as createLogger } from '$lib/stories/developer tools/helpers/logger/logger.js';
 export type {
@@ -103,11 +105,7 @@ export type { MessageProps } from '$lib/stories/components/Form/Message/Message.
 
 /** Form: Select */
 export { default as Select } from '$lib/stories/components/Form/Select/Select.svelte';
-export type {
-  SelectOption,
-  SelectDropdownArrowPosition,
-  SelectProps,
-} from '$lib/stories/components/Form/Select/Select.svelte';
+export type { SelectOption, SelectProps } from '$lib/stories/components/Form/Select/Select.svelte';
 
 /** Form: NumericInput */
 export { default as NumericInput } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
@@ -172,6 +170,13 @@ export type {
   GridColumnProps,
 } from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
 
+/** Layout: Accordian */
+export { default as Accordian } from '$lib/stories/components/Layout/Accordian/Accordian.svelte';
+export type {
+  AccordianProps,
+  AccordianToggleEvent,
+} from '$lib/stories/components/Layout/Accordian/Accordian.svelte';
+
 /** Info: Calendar */
 export { default as Calendar } from '$lib/stories/components/Info/Calendar/Calendar.svelte';
 export type {

package/src/lib/stories/components/Form/Select/Select.svelte

@@ -17,8 +17,6 @@
     disabled?: boolean;
   };
 
-  export type SelectDropdownArrowPosition = false | 'before' | 'after';
-
   export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -105,7 +103,7 @@
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    dropdownArrowPosition?: DropdownArrowPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -138,6 +136,7 @@
   } from '$lib/index.js';
   import type { TextInputInputEvent } from '../TextInput/TextInput.svelte';
   import type { ButtonClickEvent } from '../Button/Button.svelte';
+  import type { DropdownArrowPosition } from '$lib/types/special.js';
 
   let {
     size = 'normal',

package/src/lib/stories/components/Layout/Accordian/Accordian.svelte

@@ -0,0 +1,195 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { DropdownArrowPosition } from '$lib/types/special.js';
+  import Icon from '@iconify/svelte';
+  import { onMount, type Snippet } from 'svelte';
+  import type { EventHandler } from 'svelte/elements';
+
+  export type AccordianToggleEvent = Event & {
+    currentTarget: EventTarget & HTMLDetailsElement;
+  };
+
+  export interface AccordianProps {
+    /** Contents goes here */
+    children?: Snippet;
+    /** Accordian summary */
+    summary?: Snippet;
+    /** summary full width */
+    fullWidthSummary?: boolean;
+    /** Accordian ref */
+    ref?: HTMLDetailsElement;
+    /** Custom css class */
+    class?: string;
+    /** The toggle event handler */
+    ontoggle?: EventHandler<Event, HTMLDetailsElement>;
+    /**  Open state, for dynmaic Accordians */
+    open?: boolean;
+    /** default Open, for static Accordians */
+    defaultOpen?: boolean;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Select Dropdown Arrow Position */
+    dropdownArrowPosition?: DropdownArrowPosition;
+    /** Dropdown Arrow Icon */
+    customDropdownArrowIcon?: (open: boolean) => Snippet;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDetailsElement>(),
+    ontoggle,
+    open = $bindable<boolean>(),
+    defaultOpen,
+    summary,
+    children,
+    size = 'normal',
+    fullWidthSummary = false,
+    customDropdownArrowIcon: customDropdownArrowIconInternal,
+    dropdownArrowPosition = 'before',
+  }: AccordianProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customDropdownArrowIconTyped = customDropdownArrowIconInternal as any;
+
+  let isUserInteraction = $state(false);
+
+  function ontoggleMod(e: AccordianToggleEvent) {
+    if (isUserInteraction) {
+      if (ontoggle) {
+        ontoggle(e);
+      }
+    }
+
+    isUserInteraction = false;
+  }
+
+  function onsummaryclick() {
+    isUserInteraction = true;
+  }
+
+  onMount(() => {
+    if (open === true) {
+      ref.open = true;
+    } else if (open === false) {
+      ref.open = false;
+    } else if (defaultOpen === true) {
+      ref.open = true;
+    } else if (defaultOpen === false) {
+      ref.open = false;
+    }
+  });
+</script>
+
+{#snippet dropdownArrowIcon()}
+  {#if customDropdownArrowIconTyped}
+    {@render customDropdownArrowIconTyped(open)}
+  {:else}
+    <div class="IconOpen">
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="32" height="32" />
+    </div>
+    <div class="IconClose">
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="32" height="32" />
+    </div>
+  {/if}
+{/snippet}
+
+<details
+  class:fullWidthSummary
+  class={['dodo-ui-Accordian', `size--${size}`, className].join(' ')}
+  bind:this={ref}
+  {open}
+  ontoggle={ontoggleMod}
+>
+  {#if summary}
+    <summary onclick={onsummaryclick}>
+      {#if dropdownArrowPosition === 'before'}
+        <div class:open class="DropdownArrow before">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+      {@render summary()}
+      {#if dropdownArrowPosition === 'after'}
+        <div class:open class="DropdownArrow after">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+    </summary>
+  {/if}
+
+  {#if children}
+    <div class="AccordianContent">
+      {@render children()}
+    </div>
+  {/if}
+</details>
+
+<style lang="scss">
+  .dodo-ui-Accordian {
+    color: var(--dodo-color-neutral-900);
+    width: 100%;
+
+    summary {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      font-weight: 500;
+    }
+
+    &.fullWidthSummary {
+      summary {
+        display: flex;
+        width: 100%;
+      }
+    }
+
+    &[open] {
+      .IconOpen {
+        display: flex;
+      }
+
+      .IconClose {
+        display: none;
+      }
+    }
+
+    &:not([open]) {
+      .IconOpen {
+        display: none;
+      }
+
+      .IconClose {
+        display: flex;
+      }
+    }
+
+    &.size {
+      &--normal {
+        summary {
+          font-size: 1rem;
+          min-height: var(--dodo-ui-element-height-normal);
+        }
+      }
+
+      &--small {
+        summary {
+          font-size: 0.9rem;
+          min-height: var(--dodo-ui-element-height-small);
+        }
+      }
+
+      &--large {
+        summary {
+          font-size: 1.1rem;
+          min-height: var(--dodo-ui-element-height-large);
+        }
+      }
+    }
+
+    .AccordianContent {
+      margin-top: var(--dodo-ui-space);
+    }
+  }
+</style>

package/src/lib/types/special.ts

@@ -0,0 +1 @@
+export type DropdownArrowPosition = false | 'before' | 'after';