@urbicon-ui/blocks 6.21.1 → 6.21.2

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import { Input } from '../../primitives/Input';
+  import { resolveIcon } from '../../icons';
+  import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
+  import type { NumberInputProps } from './index';
+
+  const ChevronIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+
+  let {
+    value = $bindable(null),
+    min,
+    max,
+    step = 1,
+    precision,
+    hideStepper = false,
+    disabled = false,
+    readonly = false,
+    name,
+    onValueChange,
+    rightIcon: userRightIcon,
+    ...inputProps
+  }: NumberInputProps = $props();
+
+  // Tracks focus so the wheel handler only steers a focused field (scrolling the
+  // page over an unfocused one must not change it). Set by the input's focus/blur.
+  let focused = $state(false);
+
+  // Display mirrors `value` (derived) but is overridden with the raw text while
+  // typing, so intermediate states — a trailing separator, a lone leading `-` —
+  // survive until blur. Same override pattern as CurrencyInput.
+  let display = $derived(value == null ? '' : formatNumber(value));
+
+  function decimalsOf(n: number): number {
+    if (!Number.isFinite(n)) return 0;
+    const s = String(n);
+    // Exponential notation (e.g. `1e-7` → "1e-7") carries no literal `.`; derive
+    // the decimal count from the exponent plus any mantissa fraction so a tiny
+    // step isn't silently rounded down to 0 decimals (which would swallow it).
+    const e = s.indexOf('e');
+    if (e !== -1) {
+      const mantissa = s.slice(0, e);
+      const exp = Number(s.slice(e + 1));
+      const dot = mantissa.indexOf('.');
+      const mantissaDecimals = dot === -1 ? 0 : mantissa.length - dot - 1;
+      return Math.max(0, mantissaDecimals - exp);
+    }
+    const dot = s.indexOf('.');
+    return dot === -1 ? 0 : s.length - dot - 1;
+  }
+
+  function roundTo(v: number, decimals: number): number {
+    const factor = 10 ** decimals;
+    return Math.round(v * factor) / factor;
+  }
+
+  function formatNumber(v: number): string {
+    return precision != null ? v.toFixed(precision) : String(v);
+  }
+
+  function parseNumber(raw: string): number | null {
+    // Accept a comma as the decimal separator so `1,5` works under DE keyboards.
+    const t = raw.trim().replace(',', '.');
+    if (t === '') return null;
+    const n = Number(t);
+    // NaN (e.g. a lone `-` mid-compose, or junk) leaves the value untouched so
+    // the raw text can stay in the field until it parses or the user blurs.
+    return Number.isFinite(n) ? n : (value ?? null);
+  }
+
+  function clampValue(v: number | null): number | null {
+    if (v == null) return null;
+    let r = v;
+    if (min != null && r < min) r = min;
+    if (max != null && r > max) r = max;
+    if (precision != null) r = roundTo(r, precision);
+    return r;
+  }
+
+  function commit(next: number | null) {
+    if (next !== value) {
+      value = next;
+      onValueChange?.(next);
+    }
+    display = next == null ? '' : formatNumber(next);
+  }
+
+  function stepBy(dir: 1 | -1) {
+    if (disabled || readonly) return;
+    // Round on the step's own scale so 0.1 + 0.2 lands on 0.3, not 0.30000000004.
+    const decimals = precision ?? decimalsOf(step);
+    // From an empty field, the first step lands *on* the near bound (min for ↑,
+    // max for ↓) when one is set, instead of overshooting it by a full step.
+    if (value == null) {
+      const bound = dir === 1 ? min : max;
+      commit(clampValue(roundTo(bound ?? dir * step, decimals)));
+      return;
+    }
+    commit(clampValue(roundTo(value + dir * step, decimals)));
+  }
+
+  function handleInput(event: Event) {
+    const raw = (event.currentTarget as HTMLInputElement).value;
+    const parsed = parseNumber(raw);
+    if (parsed !== value) {
+      value = parsed;
+      onValueChange?.(parsed);
+    }
+    display = raw; // keep the raw text; clamp/format happens on blur
+  }
+
+  function handleFocus() {
+    focused = true;
+  }
+
+  function handleBlur() {
+    focused = false;
+    commit(clampValue(value));
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    // Bail before preventDefault so a disabled/readonly field keeps native caret
+    // motion (ArrowUp/Down jump to start/end) instead of swallowing the keys.
+    if (disabled || readonly) return;
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      stepBy(1);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      stepBy(-1);
+    }
+  }
+
+  function handleWheel(event: WheelEvent) {
+    // Only steer the value when the field is focused, so scrolling the page with
+    // the pointer over an unfocused field doesn't silently change it. Bail on
+    // disabled/readonly before preventDefault so page scroll isn't blocked either.
+    if (disabled || readonly || !focused) return;
+    event.preventDefault();
+    stepBy(event.deltaY < 0 ? 1 : -1);
+  }
+
+  const atMin = $derived(min != null && value != null && value <= min);
+  const atMax = $derived(max != null && value != null && value >= max);
+</script>
+
+{#snippet stepper()}
+  <!-- Re-enable pointer events: Input renders a right-side snippet inside a
+       `pointer-events-none` decoration container (input.variants.ts), so without
+       this the stepper buttons would be dead to mouse clicks in a real browser. -->
+  <span class="pointer-events-auto -my-1 flex flex-col justify-center">
+    <button
+      type="button"
+      class="text-text-tertiary hover:text-text-primary flex items-center justify-center px-0.5 transition-colors disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none"
+      tabindex={-1}
+      aria-hidden="true"
+      disabled={disabled || readonly || atMax}
+      onmousedown={(e) => e.preventDefault()}
+      onclick={() => stepBy(1)}
+    >
+      <ChevronIcon class="h-3.5 w-3.5 rotate-180" />
+    </button>
+    <button
+      type="button"
+      class="text-text-tertiary hover:text-text-primary flex items-center justify-center px-0.5 transition-colors disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none"
+      tabindex={-1}
+      aria-hidden="true"
+      disabled={disabled || readonly || atMin}
+      onmousedown={(e) => e.preventDefault()}
+      onclick={() => stepBy(-1)}
+    >
+      <ChevronIcon class="h-3.5 w-3.5" />
+    </button>
+  </span>
+{/snippet}
+
+<Input
+  {...inputProps}
+  {disabled}
+  {readonly}
+  type="text"
+  inputmode="decimal"
+  role="spinbutton"
+  aria-valuenow={value ?? undefined}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  value={display}
+  oninput={handleInput}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  onkeydown={handleKeydown}
+  onwheel={handleWheel}
+  rightIcon={userRightIcon ?? (hideStepper ? undefined : stepper)}
+/>
+
+{#if name}
+  <input type="hidden" {name} value={value ?? ''} />
+{/if}

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

@@ -0,0 +1,4 @@
+import type { NumberInputProps } from './index.js';
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

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

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { InputProps } from '../../primitives/Input/index.js';
+/**
+ * @description Generic numeric input with min/max/step bounds, stepper buttons,
+ * and Arrow-key / mouse-wheel increment. Built on {@link Input}, so it inherits
+ * labels, validation, sizes and variants. Values are plain numbers (not minor
+ * units) — {@link CurrencyInput} is the domain-specific specialization for money.
+ *
+ * The field accepts a leading `-`, a single decimal separator (`.` or `,`), and
+ * clamps to `[min, max]` on blur; the stepper and Arrow keys clamp immediately.
+ * Set {@link precision} to fix the number of decimal places.
+ *
+ * @tag form
+ * @related Input
+ * @related CurrencyInput
+ * @related Slider
+ * @stability beta
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   let qty = $state(1);
+ * </script>
+ * <NumberInput label="Quantity" bind:value={qty} min={0} max={99} step={1} />
+ * ```
+ *
+ * @example Decimal step with fixed precision
+ * ```svelte
+ * <NumberInput label="Rate" bind:value={rate} min={0} max={1} step={0.05} precision={2} />
+ * ```
+ */
+export interface NumberInputProps extends Omit<InputProps, 'value' | 'type' | 'inputmode' | 'oninput' | 'onfocus' | 'onblur' | 'onkeydown' | 'onwheel' | 'clearable' | 'onClear' | 'children'> {
+    /** Current numeric value. `null` when the field is empty. Supports `bind:value`. */
+    value?: number | null;
+    /** Minimum allowed value. Clamped on step / Arrow / blur. */
+    min?: number;
+    /** Maximum allowed value. Clamped on step / Arrow / blur. */
+    max?: number;
+    /** Increment applied by the stepper buttons, Arrow keys, and wheel. @default 1 */
+    step?: number;
+    /**
+     * Fixed number of decimal places for display and rounding. When unset, the
+     * value is shown as typed and the step's own decimals drive rounding.
+     */
+    precision?: number;
+    /** Hide the up/down stepper buttons (Arrow keys + wheel still work). @default false */
+    hideStepper?: boolean;
+    /** Shared `name` for a hidden input for native form submission. */
+    name?: string;
+    /** Fires after the value changes (typing, stepper, Arrow, wheel, or clamp). */
+    onValueChange?: (value: number | null) => void;
+    /** A custom right-side adornment. Overrides the stepper — pair with `hideStepper` or provide your own controls. */
+    rightIcon?: Snippet;
+}
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/NumberInput/index.js

@@ -0,0 +1 @@
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/index.d.ts

@@ -18,6 +18,8 @@ export * from './Guide/index.js';
 export * from './LineChart/index.js';
 export type { LocaleSwitcherProps } from './LocaleSwitcher/index.js';
 export * from './LocaleSwitcher/index.js';
+export type { NumberInputProps } from './NumberInput/index.js';
+export * from './NumberInput/index.js';
 export type { PlannerCellContext, PlannerDayContext, PlannerHeaderContext, PlannerProps, PlannerRange, PlannerSlotName, PlannerView } from './Planner/index.js';
 export * from './Planner/index.js';
 export type { SankeyIntent, SankeyLaidOutLinkWithMeta, SankeyLaidOutNodeWithMeta, SankeyLink, SankeyNode, SankeyProps } from './Sankey/index.js';

package/dist/components/index.js

@@ -15,6 +15,7 @@ export * from './FileUpload/index.js';
 export * from './Guide/index.js';
 export * from './LineChart/index.js';
 export * from './LocaleSwitcher/index.js';
+export * from './NumberInput/index.js';
 export * from './Planner/index.js';
 export * from './Sankey/index.js';
 export * from './SidebarLayout/index.js';

package/dist/i18n/index.d.ts

@@ -3,6 +3,8 @@ declare const blocksTranslations: {
     en: {
         readonly accessibility: {
             readonly avatar: "Avatar";
+            readonly breadcrumb: "Breadcrumb";
+            readonly breadcrumbExpand: "Show all breadcrumb items";
             readonly clearInput: "Clear input";
             readonly clearSearch: "Clear search";
             readonly clearSelection: "Clear selection";
@@ -21,6 +23,7 @@ declare const blocksTranslations: {
             readonly removableBadge: "Removable badge";
             readonly removeBadge: "Remove badge";
             readonly removeFile: "Remove {{name}}";
+            readonly removeTag: "Remove {{label}}";
         };
         readonly button: {
             readonly close: "Close";
@@ -189,6 +192,8 @@ declare const blocksTranslations: {
     de: {
         readonly accessibility: {
             readonly avatar: "Avatar";
+            readonly breadcrumb: "Pfadnavigation";
+            readonly breadcrumbExpand: "Alle Pfadebenen anzeigen";
             readonly clearInput: "Eingabe löschen";
             readonly clearSearch: "Suche löschen";
             readonly clearSelection: "Auswahl löschen";
@@ -207,6 +212,7 @@ declare const blocksTranslations: {
             readonly removableBadge: "Entfernbarer Badge";
             readonly removeBadge: "Badge entfernen";
             readonly removeFile: "{{name}} entfernen";
+            readonly removeTag: "{{label}} entfernen";
         };
         readonly button: {
             readonly close: "Schließen";

package/dist/primitives/Badge/Badge.svelte

@@ -15,6 +15,7 @@
   let {
     tier,
     intent = 'primary',
+    purpose,
     variant = 'filled',
     size = 'md',
     counter = false,
@@ -46,16 +47,22 @@
   let badgeElement = $state<HTMLElement>();
   let isHovered = $state(false);
 
-  const isDot = $derived(variant === 'dot');
-  const isInteractive = $derived(interactive || !!onclick);
+  // `purpose` is the canonical semantic axis; it orchestrates the low-level
+  // visual props so the tv() config stays as-is. When set it wins over the
+  // deprecated `variant="dot"` / `counter` boolean; when unset those apply
+  // directly (back-compat).
+  const effVariant = $derived(purpose === 'dot' ? 'dot' : variant);
+  const effCounter = $derived(purpose === 'counter' || counter);
+  const isDot = $derived(effVariant === 'dot');
+  const isInteractive = $derived(purpose === 'chip' || interactive || !!onclick);
   const isRemovable = $derived(removable && !isDot);
 
   const variantProps: BadgeVariants = $derived({
     tier: effectiveTier,
     intent,
-    variant,
+    variant: effVariant,
     size,
-    counter: counter || undefined,
+    counter: effCounter || undefined,
     pulse: pulse || undefined,
     removable: isRemovable || undefined,
     interactive: isInteractive || undefined,
@@ -117,6 +124,7 @@
       : styles.base({ class: [slotClasses?.base, className] })
   ]}
   {role}
+  data-purpose={purpose}
   tabindex={isInteractive ? 0 : undefined}
   onmouseenter={handleMouseEnter}
   onmouseleave={handleMouseLeave}

package/dist/primitives/Badge/index.d.ts

@@ -6,7 +6,21 @@ import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants
  * Shared fields that apply to every Badge variant — `dot` and the
  * label-style variants both accept these.
  */
-interface BadgeBaseProps extends Omit<BadgeVariants, 'variant'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * The badge's semantic purpose — the canonical axis that resolves what the
+     * badge *is*, since a bare Badge served five overlapping roles. Orchestrates
+     * the low-level visual props so you rarely set them directly:
+     * - `status` — a state marker (Active, Failed); pairs with `intent`.
+     * - `tag` — a neutral inline label (category, version).
+     * - `counter` — a compact numeric pill (replaces the `counter` boolean).
+     * - `dot` — a pure indicator, content hidden (replaces `variant="dot"`).
+     * - `chip` — a removable, interactive filter chip; pair with `removable`.
+     *
+     * Leave unset to drive the badge purely by the low-level props (back-compat).
+     * When set, `purpose` wins over `variant="dot"` / the `counter` boolean.
+     */
+    purpose?: 'status' | 'tag' | 'counter' | 'dot' | 'chip';
     /** Add a pulsing animation to draw attention (e.g. for live indicators). */
     pulse?: boolean;
     /** Visually disable the badge (reduced opacity, no pointer events). */
@@ -60,7 +74,10 @@ interface BadgeStandardProps extends BadgeBaseProps {
     variant?: 'filled' | 'outlined' | 'soft';
     /** Badge content (text, icons, numbers). */
     children?: Snippet;
-    /** Display as a compact pill for numeric counts. Tightens padding and uses tabular-nums so digits align. */
+    /**
+     * Display as a compact pill for numeric counts (tightens padding, tabular-nums).
+     * @deprecated Prefer `purpose="counter"` — the canonical semantic axis. Kept for back-compat.
+     */
     counter?: boolean;
     /** Show a remove (×) button. */
     removable?: boolean;
@@ -81,16 +98,19 @@ interface BadgeStandardProps extends BadgeBaseProps {
  * `onRemove` at the type level, while `filled` / `outlined` / `soft`
  * accept the full surface.
  *
- * @example
+ * @example Purpose-driven (canonical) — the intent reads from `purpose`
  * ```svelte
- * <Badge variant="filled" intent="primary">New Feature</Badge>
+ * <Badge purpose="status" intent="success">Active</Badge>
+ * <Badge purpose="counter" intent="danger">5</Badge>
+ * <Badge purpose="chip" removable onRemove={() => …}>React</Badge>
+ * <Badge purpose="dot" intent="warning" />
  * ```
  *
- * @example
+ * @example Notification counter anchored to a trigger
  * ```svelte
  * <div class="relative">
  *   <Button>Notifications</Button>
- *   <Badge intent="danger" counter placement="top-end" border>5</Badge>
+ *   <Badge purpose="counter" intent="danger" placement="top-end" border>5</Badge>
  * </div>
  * ```
  */

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import { tick } from 'svelte';
+  import { useBlocksI18n } from '../..';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { breadcrumbVariants, type BreadcrumbVariants } from './breadcrumb.variants';
   import type { BreadcrumbProps, BreadcrumbItem } from './index';
 
+  const bt = useBlocksI18n();
+
   let {
     items,
     size = 'md',
@@ -12,8 +15,11 @@
     maxItems,
     itemsBeforeCollapse = 1,
     itemsAfterCollapse = 1,
-    expandLabel = 'Show all breadcrumb items',
-    'aria-label': ariaLabel = 'Breadcrumb',
+    // A11y labels default to the localized `accessibility.*` strings in the
+    // markup below (resolved per render, so a locale switch updates them) —
+    // Breadcrumb was the last primitive with built-in English-only strings.
+    expandLabel,
+    'aria-label': ariaLabel,
     class: className = '',
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
@@ -43,8 +49,7 @@
   const after = $derived(Math.max(1, itemsAfterCollapse));
 
   type BreadcrumbEntry =
-    | { kind: 'item'; item: BreadcrumbItem; current: boolean }
-    | { kind: 'ellipsis' };
+    { kind: 'item'; item: BreadcrumbItem; current: boolean } | { kind: 'ellipsis' };
 
   const entries = $derived.by((): BreadcrumbEntry[] => {
     const last = items.length - 1;
@@ -90,7 +95,7 @@
   class={unstyled
     ? [slotClasses?.nav, className].filter(Boolean).join(' ')
     : styles.nav({ class: [slotClasses?.nav, className] })}
-  aria-label={ariaLabel}
+  aria-label={ariaLabel ?? bt('accessibility.breadcrumb')}
   {...restProps}
 >
   <ol class={unstyled ? (slotClasses?.list ?? '') : styles.list({ class: slotClasses?.list })}>
@@ -102,7 +107,7 @@
             class={unstyled
               ? (slotClasses?.ellipsis ?? '')
               : styles.ellipsis({ class: slotClasses?.ellipsis })}
-            aria-label={expandLabel}
+            aria-label={expandLabel ?? bt('accessibility.breadcrumbExpand')}
             onclick={expand}
           >
             …

package/dist/primitives/Breadcrumb/index.d.ts

@@ -72,9 +72,9 @@ export interface BreadcrumbProps extends BreadcrumbVariants, Omit<HTMLAttributes
     itemsBeforeCollapse?: number;
     /** Trailing items kept visible when collapsed; the current page is always included. @default 1 */
     itemsAfterCollapse?: number;
-    /** Accessible label for the "…" button that expands a collapsed trail. @default 'Show all breadcrumb items' */
+    /** Accessible label for the "…" button that expands a collapsed trail. Defaults to the localized `accessibility.breadcrumbExpand`. */
     expandLabel?: string;
-    /** Accessible label for the nav element @default 'Breadcrumb' */
+    /** Accessible label for the nav element. Defaults to the localized `accessibility.breadcrumb`. */
     'aria-label'?: string;
     /** Custom CSS class */
     class?: string;

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -45,7 +45,7 @@
   const id = $derived(idProp ?? propsId);
   const ff = useFormField(() => ({
     fieldId: id,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -169,9 +169,9 @@
     >
       {error}
     </div>
-  {:else if ff.hintId}
+  {:else if ff.helperId}
     <div
-      id={ff.hintId}
+      id={ff.helperId}
       class={unstyled
         ? (slotClasses?.message ?? '')
         : styles.message({ class: slotClasses?.message })}