HelperText throwing error; FloatingLabelInput style property errors

[st-clair-clarke]

Describe the bug

Attempting to use HelperText throws error as follow:

chunk-BWDDQV5P.js?v=b189b538:193 Uncaught Svelte error: invalid_snippet
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`

    in Helper.svelte
    in +page.svelte
    in +layout.svelte
    in root.svelte

    at invalid_snippet (

Reproduction

  import { ButtonGroup, GradientButton } from 'svelte-5-ui-lib'
  import { FloatingLabelInput, Helper } from 'svelte-5-ui-lib'

<FloatingLabelInput 
   style="filled"
   size="small"
>
  Floating label
</FloatingLabelInput>
<Helper class="pt-2" color="default">

Webstorm IDE flags the color="default" prop displaying 'Svelte: Type 'default' is not assignable to type 'disabled' | ColorName | undefined'

The ide also flgs the style="filled" property display ': is expected. It seems that it is treating the style like the html style attribute.

Version and System Info

System:
    OS: Linux 6.1 LMDE 6 (faye) 6 (faye)
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
    Memory: 35.89 GB / 62.63 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.1.0 - ~/.volta/tools/image/node/22.1.0/bin/node
    npm: 10.7.0 - ~/.volta/tools/image/node/22.1.0/bin/npm
    pnpm: 9.12.3 - ~/.volta/bin/pnpm
    bun: 1.1.34 - ~/.volta/bin/bun
  Browsers:
    Chrome: 131.0.6778.69
    Chromium: 130.0.6723.116
  npmPackages:
    @sveltejs/adapter-auto: ^3.3.1 => 3.3.1 
    @sveltejs/kit: ^2.8.1 => 2.8.1 
    @sveltejs/vite-plugin-svelte: ^4.0.1 => 4.0.1 
    svelte: ^5.2.3 => 5.2.3 
    vite: ^5.4.11 => 5.4.11

[shinokada]

Regarding ColorName, there is no default. Use one of the following color option: https://github.com/shinokada/svelte-5-ui-lib/blob/main/src/lib/types.ts#L4

Regarding style prop, I will change the name in the next version. Thanks.

[st-clair-clarke]

Looking forward to the change. Thanks.

[st-clair-clarke]

I just saw a new version, but the style prop is still in the demo. What is the updated name?

[st-clair-clarke]

Helper

<Helper class="pt-2" color="primary"></Helper>

errors with

Svelte: Property children is missing in type { class: string; color: 'primary'; } but required in type HelperProp

[shinokada]

<Helper class="pt-2" color="primary">Your text</Helper>

[shinokada]

https://svelte-5-ui-lib.codewithshin.com/forms/floating-label

<FloatingLabelInput 
   inputStyle="filled"
>
  Floating label
</FloatingLabelInput>

[st-clair-clarke]

Thanks. Everything is fine now.