@urbicon-ui/blocks 6.19.1 → 6.19.2

package/dist/components/CurrencyInput/CurrencyInput.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Input } from '../../primitives/Input';
+  import { useI18n } from '@urbicon-ui/i18n';
   import type { CurrencyInputProps } from './index';
 
   let {
     value = $bindable(null),
-    locale = 'de-DE',
+    locale = 'auto',
     currency = 'EUR',
     symbolPosition = 'suffix',
     precision = 2,
@@ -15,9 +16,14 @@
     ...inputProps
   }: CurrencyInputProps = $props();
 
-  const resolvedLocale = $derived(
-    locale === 'auto' ? new Intl.NumberFormat().resolvedOptions().locale : locale
-  );
+  const i18n = useI18n();
+
+  // `'auto'` (the default) follows the active `<I18nProvider>` locale — SSR-safe
+  // (server and client resolve the same locale) and consistent with the rest of
+  // the library's number formatting (CompositionBar/Sankey read `i18n.locale`
+  // too). Falls back to the base locale (`en`) when no provider is mounted. An
+  // explicit BCP 47 string overrides it.
+  const resolvedLocale = $derived(locale === 'auto' ? i18n.locale : locale);
 
   const decimalSeparator = $derived(
     new Intl.NumberFormat(resolvedLocale).formatToParts(1.1).find((p) => p.type === 'decimal')

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

@@ -24,10 +24,11 @@ export type CurrencySymbolPosition = 'prefix' | 'suffix' | 'none';
  * @tag form
  * @related Input
  *
- * @example Default — Euro with German locale
+ * @example Default — follows the active i18n locale
  * ```svelte
  * <script>
- *   let priceCents = $state(1234_56); // 1.234,56 €
+ *   // "1.234,56 €" under a `de` provider, "1,234.56 €" under `en` (the default)
+ *   let priceCents = $state(1234_56);
  * </script>
  * <CurrencyInput label="Price" bind:value={priceCents} />
  * ```
@@ -68,15 +69,16 @@ export interface CurrencyInputProps extends Omit<InputProps, 'type' | 'value' |
      */
     name?: string;
     /**
-     * BCP 47 locale used for formatting (`Intl.NumberFormat`). Controls
-     * grouping separator (`.` vs `,`) and decimal separator. Pass `'auto'`
-     * to defer to the runtime locale (`Intl.NumberFormat().resolvedOptions().locale`)
-     * — i.e. the user's browser language. Note that the runtime locale on the
-     * server (Node) and in the browser typically differ, so SSR pages using
-     * `'auto'` may briefly show a different format on initial render before
-     * hydration. `currency` is intentionally **not** auto-detected, since it
-     * is orthogonal to locale (a `de-CH` user may still bill in EUR).
-     * @default 'de-DE'
+     * BCP 47 locale used for formatting (`Intl.NumberFormat`). Controls the
+     * grouping separator (`.` vs `,`) and decimal separator. Defaults to
+     * `'auto'`, which follows the active `<I18nProvider>` locale — SSR-safe
+     * (server and client resolve the same locale, no hydration flash) and
+     * consistent with the rest of the library's number formatting. Falls back
+     * to the base locale (`en`) when no provider is mounted. Pass an explicit
+     * BCP 47 string (e.g. `'de-DE'`, `'ja-JP'`) to override. `currency` is
+     * intentionally **not** auto-detected, since it is orthogonal to locale
+     * (a `de-CH` user may still bill in EUR).
+     * @default 'auto'
      */
     locale?: string;
     /**

package/dist/primitives/Combobox/Combobox.svelte

@@ -27,6 +27,7 @@
     required = false,
     filter,
     tier,
+    variant = 'outlined',
     size = 'md',
     clearable = false,
     disabled = false,
@@ -89,7 +90,13 @@
     return options.filter((o) => filterFn(o, query.trim()));
   });
 
-  const variantProps: ComboboxVariants = $derived({ tier: effectiveTier, size, open, disabled });
+  const variantProps: ComboboxVariants = $derived({
+    variant,
+    tier: effectiveTier,
+    size,
+    open,
+    disabled
+  });
   const styles = $derived(comboboxVariants(variantProps));
 
   const slotClasses = $derived(

package/dist/primitives/Combobox/combobox.variants.d.ts

@@ -8,6 +8,20 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
             input: string;
         };
     };
+    variant: {
+        outlined: {
+            input: string;
+        };
+        filled: {
+            input: string;
+        };
+        ghost: {
+            input: string;
+        };
+        underline: {
+            input: string;
+        };
+    };
     size: {
         sm: {
             input: string;
@@ -35,6 +49,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
 }> | undefined) => {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -44,6 +59,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -53,6 +69,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     requiredMark: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -62,6 +79,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     inputWrapper: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -71,6 +89,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     input: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -80,6 +99,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     message: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -89,6 +109,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     hint: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -98,6 +119,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     listbox: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -107,6 +129,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     option: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -116,6 +139,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     optionActive: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -125,6 +149,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     optionSelected: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -134,6 +159,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     noResults: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -143,6 +169,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     clear: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -152,6 +179,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     chevronButton: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -161,6 +189,7 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
     }) | undefined) => string;
     chevron: (props?: ({
         tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;

package/dist/primitives/Combobox/combobox.variants.js

@@ -6,13 +6,10 @@ export const comboboxVariants = tv({
         requiredMark: 'text-danger ml-0.5',
         inputWrapper: 'relative w-full',
         input: [
-            // Radius driven by `tier` axis below.
-            'w-full border bg-surface-base text-text-primary',
-            // Surface-family border, consistent with Input / Textarea / Select.
-            // Form-control frames stay quiet (`border-subtle`); the
-            // `border-neutral` intent token is reserved for Action surfaces
-            // (Outline-Button, Menu) where the border needs to read as clickable.
-            'border-border-subtle hover:border-border-default placeholder:text-text-tertiary',
+            // Radius driven by `tier` axis below; the `underline` variant overrides
+            // it to `rounded-none`. Border color and background come from the
+            // `variant` axis (default `outlined` keeps the historical look).
+            'w-full border bg-surface-base text-text-primary placeholder:text-text-tertiary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary',
             'disabled:opacity-50 disabled:cursor-not-allowed'
@@ -70,6 +67,23 @@ export const comboboxVariants = tv({
             modify: { input: 'rounded-modify' },
             commit: { input: 'rounded-commit' }
         },
+        // Visual style, at parity with Input / Textarea / Select. Default
+        // `outlined` reproduces the historical Combobox frame exactly.
+        variant: {
+            // Surface-family border: form-control frames stay quiet (`border-subtle`);
+            // the `border-neutral` intent token is reserved for Action surfaces
+            // (Outline-Button, Menu) where the border must read as clickable.
+            outlined: { input: 'border-border-subtle hover:border-border-default' },
+            filled: {
+                input: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
+            },
+            ghost: {
+                input: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
+            },
+            underline: {
+                input: 'bg-transparent border-0 border-b-2 border-border-subtle rounded-none focus-visible:ring-0'
+            }
+        },
         size: {
             sm: {
                 // `pointer-coarse:text-base` floors the input to 16px on touch-primary
@@ -95,6 +109,7 @@ export const comboboxVariants = tv({
     },
     defaultVariants: {
         tier: 'modify',
+        variant: 'outlined',
         size: 'md',
         open: false,
         disabled: false

package/dist/primitives/Select/Select.svelte

@@ -63,7 +63,6 @@
   // `<Select bind:value={x: T | null}>` narrow correctly. Internally we
   // dispatch through a loose alias so the component code can hand either
   // shape into `onValueChange` without per-branch casts at every call site.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- internal dispatch escape hatch (see comment above)
   const dispatchValueChange = onValueChange as ((v: any) => void) | undefined;
 
   /** Resolved null option config — `null` when prop is unset or `groups` is in use. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.19.1",
+  "version": "6.19.2",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -91,8 +91,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.19.1",
-    "@urbicon-ui/shared-types": "6.19.1",
+    "@urbicon-ui/i18n": "6.19.2",
+    "@urbicon-ui/shared-types": "6.19.2",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",