@svgrid/grid 2.2.16 → 2.2.18

package/src/SvMenubar.svelte

@@ -0,0 +1,200 @@
+<script lang="ts" module>
+  export type MenubarMenu = {
+    /** Trigger label on the bar. */
+    label: string
+    /** The dropdown's items (submenus, separators, icons, shortcuts all work). */
+    items: import('./menu-item').MenuItem[]
+    disabled?: boolean
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenubar - an application menu bar: a horizontal row of menu buttons
+   * (File / Edit / View ...) that each open a dropdown built on SvMenuList.
+   * Roving focus across the bar, ArrowLeft/Right move between menus, ArrowDown /
+   * Enter open the active one, hovering another trigger switches while a menu is
+   * open, and Escape closes and returns focus to the trigger. The dropdown is
+   * portalled and positioned by the shared engine.
+   *
+   * ```svelte
+   * <SvMenubar menus={[{ label: 'File', items: fileItems }, ...]}
+   *            onSelect={(i) => run(i)} />
+   * ```
+   */
+  import { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type ComputePositionResult } from './positioning'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { type EditorDir } from './editor-contract'
+  import SvMenuList from './SvMenuList.svelte'
+  import type { MenuItem } from './menu-item'
+
+  type Props = {
+    menus: ReadonlyArray<MenubarMenu>
+    onSelect?: (item: MenuItem) => void
+    ariaLabel?: string
+    dir?: EditorDir
+  }
+
+  let { menus, onSelect, ariaLabel = 'Menu bar', dir }: Props = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  const rtl = $derived(resolvedDir === 'rtl')
+
+  let triggerEls = $state<(HTMLButtonElement | null)[]>([])
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let openIndex = $state(-1)
+  let activeIndex = $state(0)
+  let pos = $state<ComputePositionResult>({ x: 0, y: 0, placement: 'bottom-start', side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0 })
+
+  const enabled = (i: number) => !menus[i]?.disabled
+
+  function focusTrigger(i: number) { queueMicrotask(() => triggerEls[i]?.focus()) }
+  function focusFirstItem() {
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+  }
+
+  function open(i: number) {
+    if (!enabled(i)) return
+    openIndex = i
+    activeIndex = i
+    focusFirstItem()
+  }
+  function close(refocus = true) {
+    const i = openIndex
+    openIndex = -1
+    if (refocus && i >= 0) focusTrigger(i)
+  }
+  function toggle(i: number) { if (openIndex === i) close(); else open(i) }
+  function onTriggerEnter(i: number) {
+    // While a menu is open, hovering another trigger switches to it (menubar UX).
+    if (openIndex >= 0 && openIndex !== i && enabled(i)) open(i)
+  }
+
+  function step(from: number, delta: number): number {
+    const n = menus.length
+    for (let k = 1; k <= n; k++) {
+      const i = (from + delta * k + n * k) % n
+      if (enabled(i)) return i
+    }
+    return from
+  }
+  function moveActive(delta: number) {
+    activeIndex = step(activeIndex, delta)
+    focusTrigger(activeIndex)
+    if (openIndex >= 0) open(activeIndex)
+  }
+
+  function onBarKeydown(e: KeyboardEvent) {
+    const fwd = rtl ? 'ArrowLeft' : 'ArrowRight'
+    const back = rtl ? 'ArrowRight' : 'ArrowLeft'
+    switch (e.key) {
+      case fwd: e.preventDefault(); moveActive(1); break
+      case back: e.preventDefault(); moveActive(-1); break
+      case 'Home': e.preventDefault(); activeIndex = step(-1, 1); focusTrigger(activeIndex); if (openIndex >= 0) open(activeIndex); break
+      case 'End': e.preventDefault(); activeIndex = step(menus.length, -1); focusTrigger(activeIndex); if (openIndex >= 0) open(activeIndex); break
+      case 'ArrowDown':
+      case 'Enter':
+      case ' ': e.preventDefault(); open(activeIndex); break
+      case 'Escape': if (openIndex >= 0) { e.preventDefault(); close() } break
+    }
+  }
+
+  function updatePos() {
+    const trigger = triggerEls[openIndex]
+    if (!trigger) return
+    const r = trigger.getBoundingClientRect()
+    const f = { width: panelEl?.offsetWidth || 180, height: panelEl?.offsetHeight || 200 }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      f,
+      { placement: rtl ? 'bottom-end' : 'bottom-start', offset: 4, padding: 8, minMainAxis: 96 },
+    )
+  }
+
+  // Position + dismiss the open dropdown, and let ArrowLeft/Right at the root menu
+  // level switch to the adjacent menubar menu (WAI-ARIA menubar behavior). An
+  // ArrowRight on a submenu parent still opens its submenu; ArrowLeft inside a
+  // submenu still collapses - those are left to SvMenuList.
+  $effect(() => {
+    const trigger = triggerEls[openIndex]
+    if (openIndex < 0 || !panelEl || !trigger) return
+    const stop = autoUpdate(trigger, panelEl, updatePos)
+    const layer = createDismissableLayer({
+      element: () => [trigger, panelEl],
+      onDismiss: () => close(false),
+      closeOnEscape: false, // Escape is owned by SvMenuList -> onclose -> close()
+    })
+    layer.activate()
+
+    const onKey = (e: KeyboardEvent) => {
+      const el = document.activeElement as HTMLElement | null
+      const list = el?.closest('.sv-menu__list')
+      const inSubmenu = !!list?.classList.contains('is-submenu')
+      const fwd = rtl ? 'ArrowLeft' : 'ArrowRight'
+      const back = rtl ? 'ArrowRight' : 'ArrowLeft'
+      if (e.key === fwd) {
+        if (el?.getAttribute('aria-haspopup') === 'menu') return // opens a submenu
+        e.preventDefault(); open(step(openIndex, 1))
+      } else if (e.key === back) {
+        if (inSubmenu) return // collapse the submenu instead
+        e.preventDefault(); open(step(openIndex, -1))
+      }
+    }
+    document.addEventListener('keydown', onKey, true)
+    return () => { stop(); layer.release(); document.removeEventListener('keydown', onKey, true) }
+  })
+</script>
+
+<div class="sv-menubar" role="menubar" aria-label={ariaLabel} dir={resolvedDir} onkeydown={onBarKeydown}>
+  {#each menus as m, i (i)}
+    <button
+      type="button"
+      bind:this={triggerEls[i]}
+      class="sv-menubar__item"
+      class:is-open={openIndex === i}
+      role="menuitem"
+      aria-haspopup="menu"
+      aria-expanded={openIndex === i}
+      tabindex={activeIndex === i ? 0 : -1}
+      disabled={m.disabled}
+      onclick={() => toggle(i)}
+      onpointerenter={() => onTriggerEnter(i)}
+    >{m.label}</button>
+  {/each}
+</div>
+
+{#if openIndex >= 0}
+  <div
+    bind:this={panelEl}
+    class="sv-menu"
+    use:portalToBody
+    use:popIn={{ up: pos.side === 'top' }}
+    style:position="fixed"
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    dir={resolvedDir}
+  >
+    <SvMenuList
+      items={menus[openIndex]?.items ?? []}
+      onclose={() => close()}
+      onselect={(item) => { onSelect?.(item); close() }}
+      dir={resolvedDir}
+    />
+  </div>
+{/if}
+
+<style>
+  .sv-menubar {
+    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0); border-radius: 9px;
+  }
+  .sv-menubar__item {
+    font: inherit; font-size: 13px; font-weight: 500; color: var(--sg-fg, #0f172a);
+    padding: 5px 11px; background: none; border: 0; border-radius: 6px; cursor: pointer;
+    transition: background 0.1s;
+  }
+  .sv-menubar__item:hover:not([disabled]), .sv-menubar__item.is-open { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-menubar__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
+  .sv-menubar__item[disabled] { opacity: 0.45; cursor: default; }
+</style>

package/src/SvMultiSelect.svelte

@@ -20,7 +20,7 @@
 
   type Props = Pick<
     SvEditorProps,
-    'disabled' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel'
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
   > & {
     options: ReadonlyArray<MultiSelectOption>
     value?: ReadonlyArray<string | number>
@@ -53,6 +53,7 @@
     debounceMs = 250,
     loadingText = 'Loading…',
     disabled = false,
+    readonly = false,
     label,
     hint,
     error,
@@ -63,6 +64,7 @@
     name,
     dir,
     ariaLabel,
+    loading: loadingProp = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ms')
@@ -120,6 +122,7 @@
   const ms = createPopoverSelect({
     itemCount: () => filtered.length,
     disabled: (i) => !!filtered[i]?.disabled,
+    readonly: () => readonly,
     onSelect: (i) => { const o = filtered[i]; if (o) toggleOption(o) },
     onOpenChange: (o) => { if (o) { search = ''; if (loadOptions) doLoad('') } },
     getTrigger: () => triggerEl,
@@ -131,7 +134,7 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
   <div class="sv-ms sv-ms--{size}" class:is-disabled={disabled}>
     <button
       bind:this={triggerEl}
@@ -147,7 +150,7 @@
         <span class="sv-ms__placeholder">{placeholder}</span>
       {:else}
         <span class="sv-ms__chips">
-          {#each selectedOptions.slice(0, maxTagCount) as opt (opt.value)}
+          {#each selectedOptions.slice(0, maxTagCount) as opt, i (i)}
             <span class="sv-ms__chip">{opt.label}</span>
           {/each}
           {#if selectedOptions.length > maxTagCount}
@@ -206,7 +209,7 @@
       aria-activedescendant={searchable ? undefined : ms.activeDescendant()}
       tabindex={searchable ? -1 : 0}
     >
-      {#each filtered as opt, i (opt.value)}
+      {#each filtered as opt, i (i)}
         <li
           class="sv-ms__opt"
           class:is-active={ms.isActive(i)}

package/src/SvNumberInput.svelte

@@ -6,8 +6,12 @@
    *
    * This is the styled renderer over the headless `createNumberInput` core - the
    * same split as the grid (`createSvGrid` / `<SvGrid>`): parse/format/clamp,
-   * spinner + keyboard and ARIA all come from the core via prop-getters.
+   * spinner + keyboard and ARIA all come from the core via prop-getters. The box,
+   * size, invalid state and focus ring are owned by SvField's `frame` chrome; the
+   * `prefix`/`suffix` are formatted INTO the value (they travel with the
+   * right-aligned number), and the spinner + clear live in the trailing slot.
    */
+  import type { Snippet } from 'svelte'
   import SvRepeatButton from './SvRepeatButton.svelte'
   import SvField from './SvField.svelte'
   import { nextEditorId, type SvEditorProps } from './editor-contract'
@@ -22,12 +26,24 @@
     precision?: number
     /** Group thousands (1,234) on display. */
     grouping?: boolean
+    /** Text formatted before the number (e.g. `$`); travels with the value. */
     prefix?: string
+    /** Text formatted after the number (e.g. `%`); travels with the value. */
     suffix?: string
     placeholder?: string
     spinButtons?: boolean
     /** Show a clear (x) button when there is a value. */
     clearable?: boolean
+    /** Select the whole value when the field is focused. */
+    selectOnFocus?: boolean
+    /** Step the value with the mouse wheel while the field is focused. */
+    wheelStep?: boolean
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 150. */
+    width?: number
   }
 
   let {
@@ -45,6 +61,8 @@
     readonly = false,
     spinButtons = true,
     clearable = false,
+    selectOnFocus = false,
+    wheelStep = false,
     name,
     size = 'md',
     ariaLabel,
@@ -55,6 +73,10 @@
     hint,
     dir,
     id,
+    loading = false,
+    leading,
+    block = false,
+    width = 150,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-num')
@@ -81,51 +103,66 @@
     hint: () => hint,
     ariaLabel: () => ariaLabel,
   })
+
+  // DOM-bound ergonomics the headless core stays out of: select-all on focus and
+  // wheel-to-step (only while focused, so scrolling the page never changes it).
+  function numExtras(node: HTMLInputElement) {
+    const onFocus = () => { if (selectOnFocus) requestAnimationFrame(() => node.select()) }
+    const onWheel = (e: WheelEvent) => {
+      if (!wheelStep || document.activeElement !== node || !num.isInteractive) return
+      e.preventDefault()
+      num.bump(e.deltaY < 0 ? 1 : -1)
+    }
+    node.addEventListener('focus', onFocus)
+    node.addEventListener('wheel', onWheel, { passive: false })
+    return { destroy() { node.removeEventListener('focus', onFocus); node.removeEventListener('wheel', onWheel) } }
+  }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-num sv-num--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
-    <input class="sv-num__input" {...num.inputProps()} />
-    {#if clearable && value != null && !disabled && !readonly}
-      <button type="button" class="sv-num__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = null; onChange?.(null) }}>
-        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
-      </button>
-    {/if}
-    {#if spinButtons}
-      <div class="sv-num__spin">
-        <SvRepeatButton size="sm" variant="ghost" ariaLabel="Increment" onclick={num.increment}>
-          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6" /></svg>
-        </SvRepeatButton>
-        <SvRepeatButton size="sm" variant="ghost" ariaLabel="Decrement" onclick={num.decrement}>
-          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
-        </SvRepeatButton>
-      </div>
-    {/if}
-    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-  </div>
+{#snippet trailing()}
+  {#if clearable && value != null && !disabled && !readonly}
+    <button type="button" class="sv-num__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = null; onChange?.(null) }}>
+      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+    </button>
+  {/if}
+  {#if spinButtons}
+    <div class="sv-num__spin">
+      <SvRepeatButton size="sm" variant="ghost" ariaLabel="Increment" onclick={num.increment}>
+        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6" /></svg>
+      </SvRepeatButton>
+      <SvRepeatButton size="sm" variant="ghost" ariaLabel="Decrement" onclick={num.decrement}>
+        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
+      </SvRepeatButton>
+    </div>
+  {/if}
+{/snippet}
+
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {width}
+  {leading}
+  {trailing}
+>
+  <input class="sv-num__input" use:numExtras {...num.inputProps()} />
+  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
 </SvField>
 
 <style>
-  .sv-num {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: stretch; width: 150px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    overflow: hidden;
-  }
-  .sv-num:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-num.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-num.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-num.is-disabled { opacity: 0.6; }
-  .sv-num__input {
-    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
-    text-align: end; padding: 0 8px;
-  }
-  .sv-num--sm { height: 28px; font-size: 12px; }
-  .sv-num--md { height: 34px; font-size: 13px; }
-  .sv-num--lg { height: 40px; font-size: 15px; }
-  .sv-num__clear { display: grid; place-items: center; width: 22px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
+  .sv-num__input { text-align: end; }
+  .sv-num__clear { display: grid; place-items: center; width: 20px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
   .sv-num__clear:hover { color: var(--sg-danger, #dc2626); }
-  .sv-num__spin { display: flex; flex-direction: column; border-inline-start: 1px solid var(--sg-border, #e2e8f0); }
-  .sv-num__spin :global(.sv-repeat) { flex: 1; padding: 0 6px; border-radius: 0; }
+  .sv-num__spin { display: flex; flex-direction: column; margin-inline-start: 2px; }
+  .sv-num__spin :global(.sv-repeat) { flex: 1; min-height: 0; padding: 0 5px; border-radius: 4px; line-height: 1; }
 </style>

package/src/SvOtpInput.svelte

@@ -10,7 +10,7 @@
    * ```
    */
   import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
   import { sanitizeOtp, otpCells, isOtpComplete } from './otp'
 
   type Props = Pick<
@@ -118,7 +118,7 @@
     class:is-disabled={disabled}
     class:is-invalid={invalid}
     role="group"
-    aria-label={label ?? 'One-time code'}
+    {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel: label ?? 'One-time code' })}
   >
     {#each cells as cell, i (i)}
       <input

package/src/SvPasswordInput.svelte

@@ -5,7 +5,11 @@
    *
    * The styled renderer over the headless `createPasswordInput` core: the reveal
    * toggle + strength heuristic come from the core, spread here via prop-getters.
+   * The box, size, invalid state and focus ring are owned by SvField's `frame`
+   * chrome; the reveal eye lives in the trailing slot and the strength meter sits
+   * below the field.
    */
+  import type { Snippet } from 'svelte'
   import SvField from './SvField.svelte'
   import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createPasswordInput } from './createPasswordInput.svelte'
@@ -28,6 +32,12 @@
     autocomplete?: string
     /** Override the built-in strings (reveal toggle + strength labels). */
     messages?: Partial<PasswordMessages>
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 220. */
+    width?: number
   }
 
   let {
@@ -48,8 +58,12 @@
     hint,
     dir,
     id,
+    loading = false,
     autocomplete = 'current-password',
     messages,
+    leading,
+    block = false,
+    width = 220,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-pass')
@@ -76,20 +90,40 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-<div class="sv-pw sv-pw--{size}" class:is-disabled={disabled}>
-  <div class="sv-pw__field" class:is-invalid={invalid}>
+{#snippet eye()}
+  {#if revealable}
+    <button class="sv-pw__eye" {...pw.toggleProps()}>
+      {#if pw.revealed}
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" /><path d="M1 1l22 22" /></svg>
+      {:else}
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
+      {/if}
+    </button>
+  {/if}
+{/snippet}
+
+<div class="sv-pw" class:sv-pw--block={block}>
+  <SvField
+    frame
+    id={uid}
+    {label}
+    {hint}
+    {error}
+    {required}
+    {dir}
+    {size}
+    {invalid}
+    {disabled}
+    {readonly}
+    {loading}
+    {block}
+    {width}
+    {leading}
+    trailing={revealable ? eye : undefined}
+  >
     <input class="sv-pw__input" {...pw.inputProps()} />
-    {#if revealable}
-      <button class="sv-pw__eye" {...pw.toggleProps()}>
-        {#if pw.revealed}
-          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" /><path d="M1 1l22 22" /></svg>
-        {:else}
-          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
-        {/if}
-      </button>
-    {/if}
-  </div>
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </SvField>
   {#if showStrength}
     <div class="sv-pw__meter" aria-hidden="true">
       {#each Array(4) as _, i (i)}
@@ -98,27 +132,13 @@
     </div>
     <span class="sv-pw__strength is-lvl{pw.strength}">{pw.strengthLabel}</span>
   {/if}
-  {#if name}<input type="hidden" {name} value={value} />{/if}
 </div>
-</SvField>
 
 <style>
-  .sv-pw { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; gap: 5px; width: 220px; }
-  .sv-pw.is-disabled { opacity: 0.6; }
-  .sv-pw__field {
-    display: flex; align-items: center;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-  }
-  .sv-pw__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-pw__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-pw__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-pw__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
-  .sv-pw--sm .sv-pw__field { height: 28px; font-size: 12px; }
-  .sv-pw--md .sv-pw__field { height: 34px; font-size: 13px; }
-  .sv-pw--lg .sv-pw__field { height: 40px; font-size: 15px; }
-  .sv-pw__eye { display: grid; place-items: center; width: 32px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; }
-  .sv-pw__eye:hover { color: var(--_accent); }
+  .sv-pw { display: inline-flex; flex-direction: column; gap: 5px; }
+  .sv-pw--block { display: flex; width: 100%; }
+  .sv-pw__eye { display: grid; place-items: center; width: 26px; align-self: center; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; padding: 0; }
+  .sv-pw__eye:hover { color: var(--sg-accent, #2563eb); }
   .sv-pw__meter { display: flex; gap: 4px; }
   .sv-pw__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sg-border, #e2e8f0); transition: background 0.15s; }
   .sv-pw__bar.on.is-lvl1 { background: var(--sg-danger, #dc2626); }