@urbicon-ui/blocks 6.3.12 → 6.3.14

package/dist/primitives/Combobox/Combobox.svelte

@@ -7,7 +7,7 @@
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
   import CheckIconDefault from '../../icons/CheckIcon.svelte';
-  import { useFormField, getTierContext, useFloatingPanel, floatingPanelStyle } from '../../utils';
+  import { useFormField, getTierContext, useFloatingPanel, floatingPanelHidden } from '../../utils';
   import type { ComboboxProps, ComboboxOption } from './index';
 
   const bt = useBlocksI18n();
@@ -373,8 +373,15 @@
       open/close cycles. In top-layer mode the `popover="manual"` UA-rule
       `[popover]:not(:popover-open)` hides it until `showPopover()` runs; inside a
       modal dialog (`panel.topLayer === false`) the popover attribute is dropped
-      and `floatingPanelStyle` drives visibility via `display` instead, so the
-      listbox renders in the dialog's own top-layer subtree (Codeberg #23).
+      and `display` drives visibility instead, so the listbox renders in the
+      dialog's own top-layer subtree (Codeberg #23).
+
+      The positioning frame is applied with per-property `style:` directives, NOT
+      a single `style={…}` string: a dynamic `style={…}` compiles to
+      `setAttribute('style')`, replacing the whole attribute and wiping the
+      `left`/`top` Floating UI writes imperatively (the iOS `inset: auto` clobber
+      behind Codeberg #23). `style:` directives and Floating UI's writes are both
+      per-property and never overwrite one another.
     -->
     <div
       bind:this={listboxEl}
@@ -385,7 +392,11 @@
       class={unstyled
         ? (slotClasses?.listbox ?? '')
         : styles.listbox({ class: slotClasses?.listbox })}
-      style={floatingPanelStyle(panel, open, 'overflow-y: auto; ')}
+      style:position={panel.strategy}
+      style:inset="auto"
+      style:margin="0"
+      style:overflow-y="auto"
+      style:display={floatingPanelHidden(panel, open) ? 'none' : null}
     >
       {#if open}
         {#if filtered.length === 0}

package/dist/primitives/Popover/Popover.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import { useFloatingPanel, floatingPanelStyle } from '../../utils';
+  import { useFloatingPanel, floatingPanelHidden } from '../../utils';
   import { popoverVariants } from './popover.variants';
   import type { PopoverProps } from './index';
 
@@ -308,17 +308,21 @@
   `{...restProps}` so a consumer-supplied `popover="manual"` or override
   of `role`/`id` cannot silently break the show/hide flow or ARIA pairing.
 
-  The explicit `style` prop is interpolated FIRST (via `floatingPanelStyle`) so
-  that the load-bearing positioning tokens (`position`, `margin: 0`, `inset:
-  auto`) come last and win the CSS cascade. A consumer passing `style="background:
-  red"` still works; a consumer passing `style="position: absolute"`
-  cannot accidentally break Floating UI's coordinate system.
--->
-<!--
+  The consumer `style` prop is the static `style` attribute; the load-bearing
+  positioning frame follows as per-property `style:` directives, which the
+  browser applies on top of (and so win over) the consumer string. A consumer
+  passing `style="background: red"` still works; `style="position: absolute"`
+  is overridden by `style:position` and cannot break Floating UI's coordinates.
+  Keep the prop static — a reactive `style` recompiles to `setAttribute('style')`
+  and would momentarily wipe the directive + Floating UI writes.
+
   Non-top-layer render (`panel.topLayer === false`): the `popover` attribute is
-  suppressed so the browser does not promote the element to the top layer;
-  `floatingPanelStyle` drives `position` + `display` while Floating UI drives
-  `left` / `top`. Two triggers:
+  suppressed so the browser does not promote the element to the top layer; the
+  `style:` directives drive `position` + `display` while Floating UI drives
+  `left` / `top`. Per-property `style:` directives are used (never a single
+  dynamic `style={…}` string) so Svelte's `setAttribute('style')` can't wipe the
+  imperative `left`/`top` writes — the iOS `inset: auto` clobber (Codeberg #23).
+  Two triggers:
     • `usePortal=false` (e.g. Menu / Select inside another popover) →
       `position: absolute`, avoiding nested-top-layer focus & z-index quirks.
     • nested in an open modal `<dialog>` → `position: fixed`, so the panel paints
@@ -331,7 +335,11 @@
   class={popoverClasses}
   {...restProps}
   popover={panel.topLayer ? popoverMode : null}
-  style={floatingPanelStyle(panel, open, style ? `${style}; ` : '')}
+  style={style || null}
+  style:position={panel.strategy}
+  style:inset="auto"
+  style:margin="0"
+  style:display={floatingPanelHidden(panel, open) ? 'none' : null}
   {role}
   aria-modal={ariaModal || undefined}
   {id}

package/dist/primitives/Select/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends string | number | boolean = string">
   import { useBlocksI18n, mintRegistry } from '../..';
-  import { useFormField, getTierContext, useFloatingPanel, floatingPanelStyle } from '../../utils';
+  import { useFormField, getTierContext, useFloatingPanel, floatingPanelHidden } from '../../utils';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
@@ -509,8 +509,11 @@
       open/close cycles. Top-layer mode uses `popover="manual"` + the UA
       `[popover]:not(:popover-open)` display rule until `showPopover()` runs; the
       in-place modes (nested in a modal dialog → Codeberg #23, or the explicit
-      `usePortal=false`) drop the popover attribute and let `floatingPanelStyle`
-      drive visibility via `display`.
+      `usePortal=false`) drop the popover attribute and drive visibility via
+      `display`. The positioning frame uses per-property `style:` directives, not
+      a `style={…}` string, so Svelte's `setAttribute('style')` can never wipe the
+      `left`/`top` Floating UI writes imperatively (iOS `inset: auto` clobber,
+      Codeberg #23).
 
       `tabindex={-1}` keeps the listbox programmatically focusable without
       adding it to the tab order — the ARIA Listbox / `aria-activedescendant`
@@ -530,7 +533,11 @@
       class={unstyled
         ? (slotClasses?.listbox ?? '')
         : styles.listbox({ class: slotClasses?.listbox })}
-      style={floatingPanelStyle(panel, open, 'overflow-y: auto; ')}
+      style:position={panel.strategy}
+      style:inset="auto"
+      style:margin="0"
+      style:overflow-y="auto"
+      style:display={floatingPanelHidden(panel, open) ? 'none' : null}
       aria-labelledby={labelId}
     >
       {#if open}

package/dist/utils/floating.js

@@ -48,9 +48,57 @@ function getBaseCoords(ref, floating, placement) {
     }
     return { x, y };
 }
+/**
+ * Viewport offset of a `position: fixed` element's *actual* containing block,
+ * measured by momentarily pinning it to (0,0) and reading where that lands.
+ *
+ * It is (0,0) when the element is genuinely viewport-fixed (the common case, so
+ * compensation is a no-op there). It is non-zero when a transformed / filtered /
+ * contained ancestor establishes the containing block — notably a modal
+ * `<dialog>` nested inside an off-canvas sidebar on iOS/WebKit, which (unlike
+ * Chromium/Firefox) does NOT re-anchor the dialog's fixed descendants to the
+ * viewport (Codeberg #23). Measuring rather than assuming keeps positioning
+ * correct on every engine without UA sniffing. The probe is synchronous (set →
+ * read → restore in one frame), so it never paints an intermediate (0,0) state.
+ */
+function fixedOriginOffset(floating) {
+    const prevLeft = floating.style.left;
+    const prevTop = floating.style.top;
+    floating.style.left = '0px';
+    floating.style.top = '0px';
+    const origin = floating.getBoundingClientRect();
+    floating.style.left = prevLeft;
+    floating.style.top = prevTop;
+    return { x: origin.left, y: origin.top };
+}
+/**
+ * `true` when `floating` is a popover currently promoted to the browser top
+ * layer. Guarded: `:popover-open` predates the Popover API, so `matches()`
+ * throws `SyntaxError` on engines that lack it (Safari < 17) — there, no element
+ * can be in the top layer, so `false` is the correct answer (and never throwing
+ * keeps `computePosition` from aborting mid-flight, which would leave the panel
+ * unpositioned — Codeberg #23).
+ */
+function isTopLayerPopover(floating) {
+    try {
+        return floating.matches(':popover-open');
+    }
+    catch {
+        return false;
+    }
+}
 function viewportToLocal(floating, x, y, strategy) {
-    if (strategy === 'fixed')
-        return { x, y };
+    if (strategy === 'fixed') {
+        // A top-layer popover is positioned against the viewport regardless of any
+        // transformed ancestor, so its coordinates are used as-is. A non-top-layer
+        // fixed panel (the in-dialog mode) is positioned against its containing
+        // block, which can be a transformed ancestor on WebKit — compensate for its
+        // measured viewport offset so the same coordinates land correctly there too.
+        if (isTopLayerPopover(floating))
+            return { x, y };
+        const origin = fixedOriginOffset(floating);
+        return { x: x - origin.x, y: y - origin.y };
+    }
     const offsetParent = floating.offsetParent;
     if (!offsetParent)
         return { x, y };

package/dist/utils/index.d.ts

@@ -11,6 +11,6 @@ export { type EasingFn, getOverlayMotion, OVERLAY_MOTION_DEFAULTS, type OverlayM
 export * from './persistent-state.svelte.js';
 export { getTierContext, type InteractiveTier, setTierContext, type TierContext } from './tier-context.js';
 export * from './types.js';
-export { type FloatingPanelOptions, type FloatingPanelState, floatingPanelStyle, useFloatingPanel } from './use-floating-panel.svelte.js';
+export { type FloatingPanelOptions, type FloatingPanelState, floatingPanelHidden, useFloatingPanel } from './use-floating-panel.svelte.js';
 export { computeFormFieldAria, type UseFormFieldInputs, type UseFormFieldReturn, useFormField } from './use-form-field.svelte.js';
 export { cx, type TVProps, tv, type VariantProps } from './variants.js';

package/dist/utils/index.js

@@ -11,6 +11,6 @@ export { getOverlayMotion, OVERLAY_MOTION_DEFAULTS } from './overlay-tokens.js';
 export * from './persistent-state.svelte.js';
 export { getTierContext, setTierContext } from './tier-context.js';
 export * from './types.js';
-export { floatingPanelStyle, useFloatingPanel } from './use-floating-panel.svelte.js';
+export { floatingPanelHidden, useFloatingPanel } from './use-floating-panel.svelte.js';
 export { computeFormFieldAria, useFormField } from './use-form-field.svelte.js';
 export { cx, tv } from './variants.js';

package/dist/utils/use-floating-panel.svelte.d.ts

@@ -64,8 +64,8 @@ export interface FloatingPanelState {
  * returns `topLayer: false`) when the anchor sits inside an open modal
  * `<dialog>`, where a second top-layer element is invisible on iOS/WebKit
  * (Codeberg #23) — the panel then renders `position: fixed` in place. Callers
- * mirror the returned `topLayer`/`strategy` in their markup via
- * {@link floatingPanelStyle}.
+ * mirror the returned `topLayer`/`strategy` in their markup via per-property
+ * `style:` directives and {@link floatingPanelHidden}.
  *
  * The Floating-UI `size` middleware feeds the room actually left between the
  * anchor and the (visual) viewport edge into `--blocks-overlay-available-height`.
@@ -75,15 +75,27 @@ export interface FloatingPanelState {
  */
 export declare function useFloatingPanel(opts: FloatingPanelOptions): FloatingPanelState;
 /**
- * Inline style for a panel driven by {@link useFloatingPanel}. Pins the
- * positioning coordinate system Floating UI expects — `position` matches the
- * strategy, `margin:0; inset:auto` neutralise the UA popover centering — and,
- * when the panel is NOT top-layer-promoted, drives visibility from `open` (the
- * UA `[popover]:not(:popover-open){display:none}` rule only applies while the
- * `popover` attribute is present, which the in-place modes omit).
+ * Whether a panel driven by {@link useFloatingPanel} must be hidden via
+ * `display: none` while closed. Top-layer panels carry the `popover` attribute
+ * and lean on the UA `[popover]:not(:popover-open){display:none}` rule, so they
+ * report `false`; the in-place modes (in-dialog `fixed`, or the explicit
+ * `portal=false` inline mode) have no such rule and are hidden by the caller.
  *
- * `extra` is prepended so a caller's own declarations (e.g. a consumer `style`
- * prop, or `overflow-y:auto`) stay overridable by the load-bearing positioning
- * tokens that follow.
+ * Callers apply the positioning frame with `style:` DIRECTIVES, never a single
+ * dynamic `style={…}` string — `style={…}` compiles to `setAttribute('style')`,
+ * which replaces the whole attribute and would wipe the `left`/`top` Floating UI
+ * writes imperatively (the iOS `inset: auto` clobber behind Codeberg #23).
+ * Per-property `style:` directives and Floating UI's `style.left/top` writes
+ * coexist without ever overwriting each other:
+ *
+ * ```svelte
+ * <div
+ *   popover={panel.topLayer ? 'manual' : null}
+ *   style:position={panel.strategy}
+ *   style:inset="auto"
+ *   style:margin="0"
+ *   style:display={floatingPanelHidden(panel, open) ? 'none' : null}
+ * >
+ * ```
  */
-export declare function floatingPanelStyle(panel: FloatingPanelState, open: boolean, extra?: string): string;
+export declare function floatingPanelHidden(panel: FloatingPanelState, open: boolean): boolean;

package/dist/utils/use-floating-panel.svelte.js

@@ -16,8 +16,8 @@ import { isAnchoredInModalDialog } from './overlay.js';
  * returns `topLayer: false`) when the anchor sits inside an open modal
  * `<dialog>`, where a second top-layer element is invisible on iOS/WebKit
  * (Codeberg #23) — the panel then renders `position: fixed` in place. Callers
- * mirror the returned `topLayer`/`strategy` in their markup via
- * {@link floatingPanelStyle}.
+ * mirror the returned `topLayer`/`strategy` in their markup via per-property
+ * `style:` directives and {@link floatingPanelHidden}.
  *
  * The Floating-UI `size` middleware feeds the room actually left between the
  * anchor and the (visual) viewport edge into `--blocks-overlay-available-height`.
@@ -151,19 +151,29 @@ export function useFloatingPanel(opts) {
     };
 }
 /**
- * Inline style for a panel driven by {@link useFloatingPanel}. Pins the
- * positioning coordinate system Floating UI expects — `position` matches the
- * strategy, `margin:0; inset:auto` neutralise the UA popover centering — and,
- * when the panel is NOT top-layer-promoted, drives visibility from `open` (the
- * UA `[popover]:not(:popover-open){display:none}` rule only applies while the
- * `popover` attribute is present, which the in-place modes omit).
+ * Whether a panel driven by {@link useFloatingPanel} must be hidden via
+ * `display: none` while closed. Top-layer panels carry the `popover` attribute
+ * and lean on the UA `[popover]:not(:popover-open){display:none}` rule, so they
+ * report `false`; the in-place modes (in-dialog `fixed`, or the explicit
+ * `portal=false` inline mode) have no such rule and are hidden by the caller.
  *
- * `extra` is prepended so a caller's own declarations (e.g. a consumer `style`
- * prop, or `overflow-y:auto`) stay overridable by the load-bearing positioning
- * tokens that follow.
+ * Callers apply the positioning frame with `style:` DIRECTIVES, never a single
+ * dynamic `style={…}` string — `style={…}` compiles to `setAttribute('style')`,
+ * which replaces the whole attribute and would wipe the `left`/`top` Floating UI
+ * writes imperatively (the iOS `inset: auto` clobber behind Codeberg #23).
+ * Per-property `style:` directives and Floating UI's `style.left/top` writes
+ * coexist without ever overwriting each other:
+ *
+ * ```svelte
+ * <div
+ *   popover={panel.topLayer ? 'manual' : null}
+ *   style:position={panel.strategy}
+ *   style:inset="auto"
+ *   style:margin="0"
+ *   style:display={floatingPanelHidden(panel, open) ? 'none' : null}
+ * >
+ * ```
  */
-export function floatingPanelStyle(panel, open, extra = '') {
-    const positioning = `position: ${panel.strategy}; margin: 0; inset: auto;`;
-    const hidden = !panel.topLayer && !open ? ' display: none;' : '';
-    return `${extra}${positioning}${hidden}`;
+export function floatingPanelHidden(panel, open) {
+    return !panel.topLayer && !open;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.3.12",
+  "version": "6.3.14",
   "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.3.12",
-    "@urbicon-ui/shared-types": "6.3.12",
+    "@urbicon-ui/i18n": "6.3.14",
+    "@urbicon-ui/shared-types": "6.3.14",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",