contain-css-svelte 1.5.0 → 1.6.0

package/dist/controls/Select.svelte

@@ -18,6 +18,9 @@ let observer;
 let resizeObserver;
 let targetWidth = $state("");
 let optionButtons = $state([]);
+// The subset of optionButtons the resize observer is currently watching, so
+// the $effect below can tell "nothing changed" from "rewire".
+let observedButtons = [];
 onMount(() => {
     tick().then(() => updateOptions());
     /*
@@ -40,14 +43,37 @@ onMount(() => {
             attributeFilter: ["data-html", "value", "label", "selected"],
         });
     }
-    // Observe size changes in option buttons
     resizeObserver = new ResizeObserver(() => updateTargetWidth());
-    optionButtons.forEach((button) => resizeObserver.observe(button));
     return () => {
         observer.disconnect();
         resizeObserver.disconnect();
     };
 });
+/*
+  optionButtons is populated by `bind:this` inside the {#each options}
+  block below, so it only ever reflects the CURRENT option list once Svelte
+  has reconciled the DOM -- which happens asynchronously relative to the
+  updateOptions() call that rebuilt `options`. Re-deriving the observed set
+  here, every time that binding changes, is what keeps the ResizeObserver
+  in sync in both directions: a button added once the list grows longer
+  gets observed, and one removed when the list shrinks is dropped instead
+  of lingering as a stale (and eventually null) target.
+
+  Guarded by reference comparison so an unrelated re-render that leaves the
+  same buttons in place doesn't thrash disconnect()/observe() every time.
+*/
+$effect(() => {
+    if (!resizeObserver)
+        return;
+    const current = optionButtons.filter((button) => Boolean(button));
+    const unchanged = current.length === observedButtons.length &&
+        current.every((button, i) => button === observedButtons[i]);
+    if (unchanged)
+        return;
+    resizeObserver.disconnect();
+    current.forEach((button) => resizeObserver.observe(button));
+    observedButtons = current;
+});
 let options = $state([]);
 let activeOption = $state(null);
 let updateQueued = false;
@@ -73,12 +99,29 @@ function updateOptions() {
             html: richHtml.trim(),
         });
     }
+    /*
+      optionButtons is bound by index from the {#each options} block below,
+      so when the option list shrinks, the array's tail is left holding
+      targets for <li>s that no longer render. (Svelte nulls each removed
+      binding's own slot as it tears the element down, but that happens once
+      the DOM catches up with this reassignment, not synchronously here --
+      so truncate now rather than leave the old length around in the
+      meantime.) Trimming it here, before the {#each} re-renders, keeps it
+      from ever describing more options than currently exist.
+    */
+    if (optionButtons.length > options.length) {
+        optionButtons.length = options.length;
+    }
     activeOption = options[selectElement.selectedIndex];
     updateTargetWidth();
 }
 function updateTargetWidth() {
     let maxWidth = 0;
     for (let button of optionButtons) {
+        // A stale or not-yet-bound slot (see updateOptions() above) -- skip it
+        // rather than crash on a null bind:this target.
+        if (!button)
+            continue;
         if (button.offsetWidth > maxWidth) {
             maxWidth = button.offsetWidth;
         }

package/dist/index.d.ts

@@ -4,6 +4,9 @@ import Button from "./controls/Button.svelte";
 import ButtonLink from "./controls/ButtonLink.svelte";
 import Checkbox from "./controls/Checkbox.svelte";
 import CircleButton from "./controls/CircleButton.svelte";
+import GroupedToggle from "./controls/GroupedToggle.svelte";
+import GroupedToggleItem from "./controls/GroupedToggleItem.svelte";
+import GroupedRadioItem from "./controls/GroupedRadioItem.svelte";
 import Input from "./controls/Input.svelte";
 import MiniButton from "./controls/MiniButton.svelte";
 import RadioButton from "./controls/RadioButton.svelte";
@@ -51,6 +54,7 @@ export type { BaseStyleProps, MarginStyleProps, ContainerStyleProps, BarStylePro
 export { Tag };
 export { Hero };
 export { TabItem };
+export { GroupedToggle, GroupedToggleItem, GroupedRadioItem };
 export { Button, ButtonLink, CircleButton, Checkbox, Input, Slider, Toggle, RadioButton, MiniButton, Select, Option, };
 export { Bar, ColumnContainer, Container, GridLayout, GridRow, Inline, MenuList, Page, ResponsiveText, RowContainer, Stack, TabBar, };
 export { TextLayout, Code, Accordion };

package/dist/index.js

@@ -5,6 +5,9 @@ import Button from "./controls/Button.svelte";
 import ButtonLink from "./controls/ButtonLink.svelte";
 import Checkbox from "./controls/Checkbox.svelte";
 import CircleButton from "./controls/CircleButton.svelte";
+import GroupedToggle from "./controls/GroupedToggle.svelte";
+import GroupedToggleItem from "./controls/GroupedToggleItem.svelte";
+import GroupedRadioItem from "./controls/GroupedRadioItem.svelte";
 import Input from "./controls/Input.svelte";
 import MiniButton from "./controls/MiniButton.svelte";
 import RadioButton from "./controls/RadioButton.svelte";
@@ -51,6 +54,7 @@ import Text from "./typography/Text.svelte";
 export { Tag };
 export { Hero };
 export { TabItem };
+export { GroupedToggle, GroupedToggleItem, GroupedRadioItem };
 export { Button, ButtonLink, CircleButton, Checkbox, Input, Slider, Toggle, RadioButton, MiniButton, Select, Option, };
 export { Bar, ColumnContainer, Container, GridLayout, GridRow, Inline, MenuList, Page, ResponsiveText, RowContainer, Stack, TabBar, };
 export { TextLayout, Code, Accordion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",