@casinogate/ui 1.1.1 → 1.1.3

package/dist/assets/css/root.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -130,9 +130,7 @@
     ::placeholder {
       color: currentcolor;
       @supports (color: color-mix(in lab, red, red)) {
-        & {
-          color: color-mix(in oklab, currentcolor 50%, transparent);
-        }
+        color: color-mix(in oklab, currentcolor 50%, transparent);
       }
     }
   }
@@ -564,9 +562,7 @@
   .cgui\:bg-neutral-40\/50 {
     background-color: var(--cg-ui-palette-neutral-40);
     @supports (color: color-mix(in lab, red, red)) {
-      & {
-        background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
-      }
+      background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
     }
   }
   .cgui\:bg-primary-10 {
@@ -609,18 +605,14 @@
   .cgui\:from-neutral-40\/30 {
     --tw-gradient-from: var(--cg-ui-palette-neutral-40);
     @supports (color: color-mix(in lab, red, red)) {
-      & {
-        --tw-gradient-from: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 30%, transparent);
-      }
+      --tw-gradient-from: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 30%, transparent);
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .cgui\:to-neutral-10\/0 {
     --tw-gradient-to: var(--cg-ui-palette-neutral-10);
     @supports (color: color-mix(in lab, red, red)) {
-      & {
-        --tw-gradient-to: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 0%, transparent);
-      }
+      --tw-gradient-to: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 0%, transparent);
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }

package/dist/components/field/components/field.svelte.js

@@ -1,6 +1,7 @@
 import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
 import { getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
 import { Context } from 'runed';
+import { untrack } from 'svelte';
 import { attachRef } from 'svelte-toolbelt';
 const SLOT_ATTR_VALUES = {
     root: 'field-root',
@@ -21,7 +22,9 @@ export class FieldRootState {
         this.attachment = attachRef(opts.ref);
     }
     setId(key, id) {
-        this.#ids = { ...this.#ids, [key]: id };
+        untrack(() => {
+            this.#ids = { ...this.#ids, [key]: id };
+        });
     }
     getId(key) {
         return this.#ids[key];
@@ -47,7 +50,8 @@ export class FieldLabelState {
         this.opts = opts;
         this.root = root;
         this.attachment = attachRef(opts.ref);
-        $effect.pre(() => {
+        this.root.setId('label', this.opts.id.current);
+        $effect(() => {
             this.root.setId('label', this.opts.id.current);
         });
     }
@@ -70,7 +74,8 @@ export class FieldErrorState {
         this.opts = opts;
         this.root = root;
         this.attachment = attachRef(opts.ref);
-        $effect.pre(() => {
+        this.root.setId('error', this.opts.id.current);
+        $effect(() => {
             this.root.setId('error', this.opts.id.current);
         });
     }
@@ -91,7 +96,7 @@ export class FieldDescriptionState {
         this.opts = opts;
         this.root = root;
         this.attachment = attachRef(opts.ref);
-        $effect.pre(() => {
+        $effect(() => {
             this.root.setId('description', this.opts.id.current);
         });
     }
@@ -110,7 +115,7 @@ export class FieldControlState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        $effect.pre(() => {
+        $effect(() => {
             this.root.setId('control', this.opts.id.current);
         });
     }

package/dist/components/field/field.svelte

@@ -17,7 +17,7 @@
   import FieldLabel from './components/field.label.svelte';
   import FieldRoot, { type FieldRootProps } from './components/field.root.svelte';
 
-  let { label, error, description, ref = $bindable(null), children, ...restProps }: FieldProps = $props();
+  let { label, error, description, ref = $bindable(null), children: childrenSlot, ...restProps }: FieldProps = $props();
 </script>
 
 <FieldRoot bind:ref {...restProps}>
@@ -29,7 +29,7 @@
 
   <FieldControl>
     {#snippet children({ props })}
-      {@render children?.({ props })}
+      {@render childrenSlot?.({ props })}
     {/snippet}
   </FieldControl>
 

package/dist/components/input/index.d.ts

@@ -1,6 +1,6 @@
 import { type InputPasswordProps } from './input.password.svelte';
 import { type InputProps } from './input.svelte';
-export declare const Input: import("svelte").Component<InputProps, {}, "ref"> & {
-    InputPassword: import("svelte").Component<InputPasswordProps, {}, "ref" | "showPassword">;
+export declare const Input: import("svelte").Component<InputProps, {}, "value" | "ref"> & {
+    Password: import("svelte").Component<InputPasswordProps, {}, "value" | "ref" | "showPassword">;
 };
 export type { InputPasswordProps, InputProps };

package/dist/components/input/index.js

@@ -1,5 +1,5 @@
 import InputPassword, {} from './input.password.svelte';
 import Root, {} from './input.svelte';
 export const Input = Object.assign(Root, {
-    InputPassword,
+    Password: InputPassword,
 });

package/dist/components/input/input.password.svelte

@@ -10,7 +10,12 @@
   import { cn } from '../../internal/utils/common.js';
   import Input, { type InputProps } from './input.svelte';
 
-  let { ref = $bindable(null), showPassword = $bindable(false), ...restProps }: InputPasswordProps = $props();
+  let {
+    ref = $bindable(null),
+    showPassword = $bindable(false),
+    value = $bindable(''),
+    ...restProps
+  }: InputPasswordProps = $props();
 
   const type = $derived(showPassword ? 'text' : 'password');
 
@@ -19,7 +24,7 @@
   }
 </script>
 
-<Input bind:ref {type} {...restProps}>
+<Input bind:ref bind:value {type} {...restProps}>
   {#snippet endChevron()}
     <button
       onclick={togglePassword}

package/dist/components/input/input.password.svelte.d.ts

@@ -2,6 +2,6 @@ export type InputPasswordProps = Omit<InputProps, 'endChevron' | 'type'> & {
     showPassword?: boolean;
 };
 import Input, { type InputProps } from './input.svelte';
-declare const Input: import("svelte").Component<InputPasswordProps, {}, "ref" | "showPassword">;
+declare const Input: import("svelte").Component<InputPasswordProps, {}, "value" | "ref" | "showPassword">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/input/input.svelte

@@ -21,6 +21,7 @@
   let {
     ref = $bindable(null),
     id = useId(),
+    value = $bindable(''),
     class: className,
     startChevron,
     endChevron,
@@ -47,6 +48,7 @@
     <input
       {id}
       bind:this={ref}
+      bind:value
       data-start-chevron={getDataActive(Boolean(startChevron))}
       data-end-chevron={getDataActive(Boolean(endChevron))}
       data-slot="input"

package/dist/components/input/input.svelte.d.ts

@@ -7,6 +7,6 @@ type InputPropsWithoutHTML = WithElementRef<{
     endChevron?: Snippet;
 }> & InputVariants;
 export type InputProps = InputPropsWithoutHTML & Without<PrimitiveInputAttributes, InputPropsWithoutHTML>;
-declare const Input: import("svelte").Component<InputProps, {}, "ref">;
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "files": [
     "dist",
     "!dist/**/*.test.*",