@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.6.5",
+  "version": "0.7.0",
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
+  },
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -37,9 +50,9 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.26.0",
+    "@eslint/js": "^9.27.0",
     "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-svelte-csf": "5.0.0-next.28",
+    "@storybook/addon-svelte-csf": "5.0.1",
     "@storybook/blocks": "^8.6.14",
     "@storybook/experimental-addon-test": "^8.6.14",
     "@storybook/manager-api": "^8.6.14",
@@ -48,14 +61,14 @@
     "@storybook/test": "^8.6.14",
     "@storybook/theming": "^8.6.14",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@vitest/browser": "^3.1.3",
-    "@vitest/coverage-v8": "^3.1.3",
-    "eslint": "^9.26.0",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
+    "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.7.0",
+    "eslint-plugin-svelte": "^3.8.1",
     "globals": "^16.1.0",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
@@ -64,33 +77,22 @@
     "sass": "^1.89.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.30.1",
+    "svelte": "^5.31.1",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3"
+    "vitest": "^3.1.4"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
-    "node": "22.15.0",
-    "pnpm": "10.10.0"
+    "node": "22.15.1",
+    "pnpm": "10.11.0"
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.0"
-  },
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
   }
-}
+}

package/src/lib/index.ts

@@ -1,20 +1,53 @@
 import '$lib/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 '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
 
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+export type { UtilityButtonProps } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 
 /** developer tools: components: InputEnclosure */
 export { default as InputEnclosure } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+export type { InputEnclosureProps } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+
+/** developer tools: components: DynamicInput */
+export { default as DynamicInput } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+export type {
+  DynamicInputVariant,
+  DynamicInputProps,
+  DynamicInputClickEvent,
+  DynamicInputFocusEvent,
+} from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+
+/** developer tools: components: Popper */
+export { default as Popper } from '$lib/stories/developer tools/components/Popper/Popper.svelte';
+export type { PopperProps } from '$lib/stories/developer tools/components/Popper/Popper.svelte';
+export { default as PopperPopup } from '$lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
+export type { PopperPopupProps } from '$lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
 
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
-  ButtonColor,
-  ButtonRoundness,
   ButtonLinkTarget,
   ButtonLinkReferrerpolicy,
+  ButtonType,
+  ButtonProps,
+  ButtonClickEvent,
 } from '$lib/stories/components/Form/Button/Button.svelte';
 
 /** Form: TextInput */
@@ -23,32 +56,45 @@ export type {
   TextInputType,
   TextInputFocusEvent,
   TextInputClipboardEvent,
+  TextInputInputEvent,
+  TextInputProps,
 } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 
 /** Form: PasswordInput */
 export { default as PasswordInput } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
-export type { PasswordInputToggleEvent } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type {
+  PasswordInputToggleEvent,
+  PasswordInputProps,
+} from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
 
 /** Form: Label */
 export { default as Label } from '$lib/stories/components/Form/Label/Label.svelte';
+export type { LabelProps } from '$lib/stories/components/Form/Label/Label.svelte';
 
 /** Form: FormControl */
 export { default as FormControl } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+export type { FormControlProps } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
 
 /** Form: Message */
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
-export type { MessageColor } from '$lib/stories/components/Form/Message/Message.svelte';
-
-/** Form: SimpleSelect */
-export { default as SimpleSelect } from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
-export type {
-  SimpleSelectFocusEvent,
-  SimpleSelectOption,
-} from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type { MessageProps } from '$lib/stories/components/Form/Message/Message.svelte';
 
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+
+/** Layout: Separator */
+export { default as Separator } from '$lib/stories/components/Layout/Separator/Separator.svelte';
+export type {
+  SeparatorProps,
+  SeparatorOrientation,
+} from '$lib/stories/components/Layout/Separator/Separator.svelte';
+
+/** Layout: Menu */
+export { default as Menu } from '$lib/stories/components/Layout/Menu/Menu.svelte';
+export type { MenuProps } from '$lib/stories/components/Layout/Menu/Menu.svelte';
+export { default as MenuItem } from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
 export type {
-  PaperRoundness,
-  PaperShadow,
-} from '$lib/stories/components/Layout/Paper/Paper.svelte';
+  MenuItemType,
+  MenuItemProps,
+} from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';

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

@@ -1,6 +1,12 @@
 <script lang="ts" module>
-  export type ButtonColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-  export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentWeight } from '$lib/types/weight.js';
+
+  import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+
   export type ButtonLinkTarget =
     | '_self'
     | '_blank'
@@ -10,30 +16,30 @@
     | undefined
     | null;
   export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
-</script>
+  export type ButtonType = 'button' | 'submit';
+  export const buttonTypeArray: ButtonType[] = ['button', 'submit'];
 
-<script lang="ts">
-  import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '$lib/types.js';
-  import type { Snippet } from 'svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
+  export type ButtonClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+  };
 
-  interface ButtonProps {
+  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 */
@@ -73,17 +79,17 @@
     anchorMediaType?: string | undefined | null;
     /** Link button: referrerpolicy  */
     referrerpolicy?: ButtonLinkReferrerpolicy;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     type = 'button',
     size = 'normal',
-    color = 'default',
-    roundness = '1x',
-    variant = 'text',
+    color = 'primary',
+    roundness = 1,
+    variant = 'solid',
     outline = false,
     compact = false,
     fullWidth = false,
@@ -104,7 +110,6 @@
     target,
     anchorMediaType,
     referrerpolicy,
-    _unsafeChildrenStringForTesting,
     ref = $bindable<HTMLButtonElement | HTMLAnchorElement>(),
   }: ButtonProps = $props();
 </script>
@@ -118,8 +123,6 @@
 
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 
   {#if after}
@@ -187,10 +190,10 @@
   @use 'utils/scss/mixins.scss' as *;
 
   :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-disabled-color: var(--dodo-color-neutral-400);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
 
-    @include generate-dodo-ui-button-colors(default);
+    @include generate-dodo-ui-button-colors(neutral);
     @include generate-dodo-ui-button-colors(primary);
     @include generate-dodo-ui-button-colors(secondary);
     @include generate-dodo-ui-button-colors(safe);
@@ -199,10 +202,10 @@
   }
 
   :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-disabled-bg: var(--dodo-color-neutral-100);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
 
-    @include generate-dodo-ui-button-colors-dark(default);
+    @include generate-dodo-ui-button-colors-dark(neutral);
     @include generate-dodo-ui-button-colors-dark(primary);
     @include generate-dodo-ui-button-colors-dark(secondary);
     @include generate-dodo-ui-button-colors-dark(safe);
@@ -233,13 +236,13 @@
       &--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;
       }
 
       &--small {
         height: var(--dodo-ui-element-height-small);
-        padding: 0 8px;
+        padding: 0 var(--dodo-ui-space);
         font-size: 0.9rem;
         min-width: 35px;
       }
@@ -247,22 +250,22 @@
       &--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;
       }
     }
 
     &.roundness {
-      &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1x);
+      &--1 {
+        border-radius: var(--dodo-ui-element-roundness-1);
       }
 
-      &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2x);
+      &--2 {
+        border-radius: var(--dodo-ui-element-roundness-2);
       }
 
-      &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3x);
+      &--3 {
+        border-radius: var(--dodo-ui-element-roundness-3);
       }
 
       &--full {
@@ -271,7 +274,7 @@
     }
 
     &.color {
-      @include generate-dodo-ui-button-color(default);
+      @include generate-dodo-ui-button-color(neutral);
       @include generate-dodo-ui-button-color(primary);
       @include generate-dodo-ui-button-color(secondary);
       @include generate-dodo-ui-button-color(safe);

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

@@ -1,9 +1,7 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import Label from '../Label/Label.svelte';
-  import Message from '../Message/Message.svelte';
 
-  interface FormControlProps {
+  export interface FormControlProps {
     /** FormControl contents goes here */
     children?: Snippet;
     /** Label for FormControl */
@@ -19,6 +17,11 @@
     /** Custom css class*/
     class?: string;
   }
+</script>
+
+<script lang="ts">
+  import Label from '../Label/Label.svelte';
+  import Message from '../Message/Message.svelte';
 
   let {
     children,
@@ -50,18 +53,13 @@
 </div>
 
 <style lang="scss">
-  :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);
+      margin-bottom: var(--dodo-ui-space);
     }
 
     .errorMessage {
-      margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+      margin-top: var(--dodo-ui-space-large);
     }
   }
 </style>

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

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { Snippet } from 'svelte';
 
-  interface LabelProps {
+  export interface LabelProps {
     /** Label contents goes here */
     children?: Snippet;
     /** Label ref */
@@ -12,16 +12,15 @@
     form?: string;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     class: className = '',
     for: htmlFor,
     form,
-    _unsafeChildrenStringForTesting,
     ref = $bindable<HTMLLabelElement>(),
   }: LabelProps = $props();
 </script>
@@ -29,15 +28,13 @@
 <label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </label>
 
 <style lang="scss">
   .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/src/lib/stories/components/Form/Message/Message.svelte

@@ -1,33 +1,30 @@
 <script lang="ts" module>
-  export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-</script>
+  import type { ComponentColor } from '$lib/types/colors.js';
 
-<script lang="ts">
-  import type { ComponentSize } from '$lib/types.js';
+  import type { ComponentSize } from '$lib/types/size.js';
 
   import type { Snippet } from 'svelte';
 
-  interface MessageProps {
+  export interface MessageProps {
     /** Message contents goes here */
     children?: Snippet;
     /** 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;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     class: className = '',
-    color = 'default',
+    color = 'primary',
     ref = $bindable<HTMLDivElement>(),
-    _unsafeChildrenStringForTesting,
     size = 'normal',
   }: MessageProps = $props();
 </script>
@@ -38,8 +35,6 @@
 >
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </div>
 
@@ -64,10 +59,6 @@
     }
 
     &.color {
-      &--default {
-        color: var(--dodo-color-default-800);
-      }
-
       &--primary {
         color: var(--dodo-color-primary-600);
       }
@@ -76,6 +67,10 @@
         color: var(--dodo-color-secondary-600);
       }
 
+      &--neutral {
+        color: var(--dodo-color-neutral-600);
+      }
+
       &--safe {
         color: var(--dodo-color-safe-600);
       }