carbon-components-svelte 0.106.2 → 0.107.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.106.2",
+  "version": "0.107.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/Checkbox/CheckboxGroup.svelte

@@ -55,6 +55,7 @@
     createEventDispatcher,
     onMount,
     setContext,
+    tick,
   } from "svelte";
   import { readonly, writable } from "svelte/store";
 
@@ -67,6 +68,14 @@
   const groupName = writable(name);
   const groupRequired = writable(required);
   const groupDisabled = writable(disabled);
+  let isInitialRender = true;
+  let isSyncingSelected = false;
+
+  function syncSelectedValues() {
+    isSyncingSelected = true;
+    $selectedValues = selected;
+    isSyncingSelected = false;
+  }
 
   /**
    * @type {(value: string | number, checked: boolean) => void}
@@ -89,16 +98,21 @@
   });
 
   onMount(() => {
-    $selectedValues = selected;
+    syncSelectedValues();
+    tick().then(() => {
+      isInitialRender = false;
+    });
   });
 
   beforeUpdate(() => {
-    $selectedValues = selected;
+    syncSelectedValues();
   });
 
   selectedValues.subscribe((value) => {
     selected = value;
-    dispatch("change", value);
+    if (!isInitialRender && !isSyncingSelected) {
+      dispatch("change", value);
+    }
   });
 
   $: $groupName = name;

package/src/ContentSwitcher/ContentSwitcher.svelte

@@ -31,11 +31,16 @@
   /** @type {HTMLDivElement | null} */
   let refContainer = null;
 
+  let prevIndex = -1;
+
   $: currentIndex = -1;
   $: focusedIndex = -1;
   $: switches = [];
   $: if (switches[currentIndex]) {
-    dispatch("change", currentIndex);
+    if (prevIndex > -1 && prevIndex !== currentIndex) {
+      dispatch("change", currentIndex);
+    }
+    prevIndex = currentIndex;
     currentId.set(switches[currentIndex].id);
   }
 

package/src/Portal/FloatingPortal.svelte

@@ -90,6 +90,15 @@
    */
   export let ref = null;
 
+  /**
+   * Specify the DOM element to mount the portal into.
+   * When not set, mounts into the anchor's nearest `<dialog>` ancestor if one
+   * exists (so the portal participates in the dialog's top layer), otherwise
+   * falls back to `document.body`.
+   * @type {HTMLElement | null}
+   */
+  export let target = null;
+
   import { onMount, tick } from "svelte";
   import Portal from "./Portal.svelte";
 
@@ -181,11 +190,29 @@
     }
   }
 
+  // Auto-detect the nearest <dialog> ancestor of the anchor so that portalled
+  // content participates in the dialog's top layer by default. An explicit
+  // `target` prop overrides this.
+  $: effectiveTarget = target ?? anchor?.closest("dialog") ?? null;
+
+  // When the portal is mounted into a custom target (e.g. a native <dialog>
+  // opened with showModal()), `position: absolute` resolves against the target's
+  // containing block rather than the viewport. Use `position: fixed` in that
+  // case — fixed stays viewport-relative even inside a top-layer dialog — and
+  // skip the document scroll offsets, which only apply to absolute positioning
+  // relative to `document.body`.
+  $: useFixedPosition =
+    effectiveTarget != null &&
+    typeof document !== "undefined" &&
+    effectiveTarget !== document.body;
+
   function updatePosition() {
     if (!mounted || !anchor || !ref) return;
 
     const rect = anchor.getBoundingClientRect();
     const floatingRect = ref.getBoundingClientRect();
+    const scrollYOffset = useFixedPosition ? 0 : window.scrollY;
+    const scrollXOffset = useFixedPosition ? 0 : window.scrollX;
 
     const isVertical = direction === "top" || direction === "bottom";
     let actualDirection = direction;
@@ -234,27 +261,27 @@
     let width;
 
     if (actualDirection === "bottom") {
-      top = rect.bottom + window.scrollY + gapBottom;
-      left = rect.left + window.scrollX;
+      top = rect.bottom + scrollYOffset + gapBottom;
+      left = rect.left + scrollXOffset;
       width = rect.width;
     } else if (actualDirection === "top") {
-      top = rect.top + window.scrollY - floatingRect.height - gapTop;
-      left = rect.left + window.scrollX;
+      top = rect.top + scrollYOffset - floatingRect.height - gapTop;
+      left = rect.left + scrollXOffset;
       width = rect.width;
     } else if (actualDirection === "right") {
       if (intrinsicWidth) {
         if (intrinsicAlign === "start") {
-          top = rect.top + window.scrollY + verticalAlignOffsetRight;
+          top = rect.top + scrollYOffset + verticalAlignOffsetRight;
         } else if (intrinsicAlign === "end") {
           top =
             rect.bottom +
-            window.scrollY -
+            scrollYOffset -
             floatingRect.height +
             verticalAlignOffsetRight;
         } else {
           top =
             rect.top +
-            window.scrollY +
+            scrollYOffset +
             rect.height / 2 -
             floatingRect.height / 2 +
             verticalAlignOffsetRight;
@@ -262,27 +289,27 @@
       } else {
         top =
           rect.top +
-          window.scrollY +
+          scrollYOffset +
           rect.height / 2 -
           floatingRect.height / 2 +
           verticalAlignOffsetRight;
       }
-      left = rect.right + window.scrollX + horizontalGapRight;
+      left = rect.right + scrollXOffset + horizontalGapRight;
     } else {
       // left
       if (intrinsicWidth) {
         if (intrinsicAlign === "start") {
-          top = rect.top + window.scrollY + verticalAlignOffsetLeft;
+          top = rect.top + scrollYOffset + verticalAlignOffsetLeft;
         } else if (intrinsicAlign === "end") {
           top =
             rect.bottom +
-            window.scrollY -
+            scrollYOffset -
             floatingRect.height +
             verticalAlignOffsetLeft;
         } else {
           top =
             rect.top +
-            window.scrollY +
+            scrollYOffset +
             rect.height / 2 -
             floatingRect.height / 2 +
             verticalAlignOffsetLeft;
@@ -290,13 +317,12 @@
       } else {
         top =
           rect.top +
-          window.scrollY +
+          scrollYOffset +
           rect.height / 2 -
           floatingRect.height / 2 +
           verticalAlignOffsetLeft;
       }
-      left =
-        rect.left + window.scrollX - floatingRect.width - horizontalGapLeft;
+      left = rect.left + scrollXOffset - floatingRect.width - horizontalGapLeft;
     }
 
     let posLeft = left;
@@ -308,11 +334,11 @@
       (actualDirection === "top" || actualDirection === "bottom")
     ) {
       if (intrinsicAlign === "center") {
-        posLeft = rect.left + window.scrollX + rect.width / 2;
+        posLeft = rect.left + scrollXOffset + rect.width / 2;
       } else if (intrinsicAlign === "start") {
-        posLeft = rect.left + window.scrollX;
+        posLeft = rect.left + scrollXOffset;
       } else {
-        posLeft = rect.right + window.scrollX;
+        posLeft = rect.right + scrollXOffset;
       }
       posWidth = undefined;
     }
@@ -370,7 +396,7 @@
     : null;
 
   $: portalStyle = [
-    "position: absolute",
+    useFixedPosition ? "position: fixed" : "position: absolute",
     `top: ${pos.top}px`,
     `left: ${pos.left}px`,
     intrinsicTranslateX,
@@ -423,6 +449,7 @@
 {#if open}
   <Portal
     bind:ref
+    target={effectiveTarget}
     {...$$restProps}
     data-floating-portal
     data-floating-direction={pos.actualDirection}

package/src/Portal/FloatingPortal.svelte.d.ts

@@ -89,6 +89,15 @@ export type FloatingPortalProps = {
    */
   ref?: null | HTMLElement;
 
+  /**
+   * Specify the DOM element to mount the portal into.
+   * When not set, mounts into the anchor's nearest `<dialog>` ancestor if one
+   * exists (so the portal participates in the dialog's top layer), otherwise
+   * falls back to `document.body`.
+   * @default null
+   */
+  target?: HTMLElement | null;
+
   children?: (
     this: void,
     ...args: [{ direction: "bottom" | "top" | "left" | "right" }]

package/src/Portal/Portal.svelte

@@ -5,6 +5,13 @@
    */
   export let tag = "div";
 
+  /**
+   * Specify the DOM element to mount the portal into.
+   * Defaults to `document.body`.
+   * @type {HTMLElement | null}
+   */
+  export let target = null;
+
   /**
    * Obtain a reference to the portal element.
    * @type {null | HTMLElement}
@@ -27,11 +34,14 @@
     };
   });
 
-  $: if (mounted && ref) {
-    if (typeof document !== "undefined" && ref.parentNode !== document.body) {
+  $: effectiveTarget =
+    target ?? (typeof document === "undefined" ? null : document.body);
+
+  $: if (mounted && ref && effectiveTarget) {
+    if (ref.parentNode !== effectiveTarget) {
       const activeEl = document.activeElement;
       const hadFocus = ref.contains(activeEl);
-      document.body.appendChild(ref);
+      effectiveTarget.appendChild(ref);
       if (hadFocus && activeEl instanceof HTMLElement) {
         activeEl.focus();
       }

package/src/Portal/Portal.svelte.d.ts

@@ -10,6 +10,13 @@ type $Props = {
    */
   tag?: keyof HTMLElementTagNameMap;
 
+  /**
+   * Specify the DOM element to mount the portal into.
+   * Defaults to `document.body`.
+   * @default null
+   */
+  target?: HTMLElement | null;
+
   /**
    * Obtain a reference to the portal element.
    * @default null

package/src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -65,6 +65,7 @@
   export let id = undefined;
 
   import {
+    afterUpdate,
     beforeUpdate,
     createEventDispatcher,
     onMount,
@@ -79,6 +80,7 @@
   const selectedValue = writable(selected);
   const groupName = writable(name);
   const groupRequired = writable(required);
+  let isInitialRender = true;
 
   /**
    * @type {(data: { checked: boolean; value: Value }) => void}
@@ -114,7 +116,13 @@
 
   selectedValue.subscribe((value) => {
     selected = value;
-    dispatch("change", value);
+    if (!isInitialRender) {
+      dispatch("change", value);
+    }
+  });
+
+  afterUpdate(() => {
+    isInitialRender = false;
   });
 
   $: $groupName = name;