contain-css-svelte 1.1.19 → 1.1.20

package/dist/Card.svelte

@@ -61,8 +61,13 @@ let hasFooter = $derived(Boolean(footer));
      visually changes for existing callers -- but now a caller who wants
      a header Card flush against the content below it, say, can set just
      one axis instead of fighting a 4-value margin shorthand. */
-  margin-block: var(--card-margin-block, var(--margin-block, 16px));
-  margin-inline: var(--card-margin-inline, var(--margin-inline, 16px));
+  /* The innermost fallback is the pre-marginBlock/marginInline escape
+     hatch (a single --card-margin applied to both axes) rather than a bare
+     16px, so anyone already setting --card-margin directly keeps working
+     unchanged -- margin-block/margin-inline just give a newer, more
+     specific override on top of it. */
+  margin-block: var(--card-margin-block, var(--margin-block, var(--card-margin, 16px)));
+  margin-inline: var(--card-margin-inline, var(--margin-inline, var(--card-margin, 16px)));
   border-radius: var(--card-border-radius, var(--surface-border-radius, var(--border-radius, 0)));
   border: var(--card-border, var(--surface-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
   --link-bg: var(--card-link-bg, var(--surface-link-bg, inherit));

package/dist/layout/Bar.svelte

@@ -4,20 +4,19 @@ let warnedDeprecatedMargin = false;
 
 <script lang="ts">import { BROWSER, DEV } from "esm-env";
 import { injectVars } from "../util";
-const { children, primary, secondary, marginTop, marginBottom, marginBlock, ...restProps } = $props();
+const { children, primary, secondary, marginTop, marginBottom, ...restProps } = $props();
 $effect(() => {
     if (BROWSER && DEV && (marginTop != null || marginBottom != null) && !warnedDeprecatedMargin) {
         warnedDeprecatedMargin = true;
         console.warn('[ContainCSS] Bar\'s marginTop/marginBottom props are deprecated. Use marginBlock instead -- e.g. marginBlock="0 1em" is the same as marginTop="0" marginBottom="1em" (the old default).');
     }
 });
-/* marginBlock wins if given explicitly; otherwise compose the deprecated
-   pair into the same shape, preserving each side's old default (no space
-   above, 1em below) for whichever half was not passed. */
-const resolvedMarginBlock = $derived(marginBlock ??
-    (marginTop != null || marginBottom != null
-        ? `${marginTop ?? "0"} ${marginBottom ?? "1em"}`
-        : null));
+/* marginTop/marginBottom become their own CSS vars here (not composed into
+   one string in JS) so the CSS fallback chain below can pick them up
+   however they arrive -- as these props, OR as someone setting
+   --bar-margin-top/--bar-margin-bottom directly as raw CSS custom
+   properties, which JS never sees at all. Composing in JS would only ever
+   have covered the prop path. */
 const cssKeys = [
     "bg",
     "fg",
@@ -28,8 +27,10 @@ const cssKeys = [
     "align",
     "marginBlock",
     "marginInline",
+    "marginTop",
+    "marginBottom",
 ];
-const style = $derived(injectVars({ ...restProps, marginBlock: resolvedMarginBlock }, "bar", cssKeys));
+const style = $derived(injectVars({ ...restProps, marginTop, marginBottom }, "bar", cssKeys));
 const extraStyle = $derived(primary
     ? "--bar-bg: var(--primary-bg); --bar-fg: var(--primary-fg);"
     : secondary
@@ -65,7 +66,12 @@ const extraStyle = $derived(primary
   padding: var(--bar-padding, var(--padding, 8px));
   border-bottom: var(--bar-border-bottom, var(--bar-border-width, var(--border-width, 1px)) var(--bar-border-style, var(--border-style, 1px)) var(--bar-border-color, var(--border-color, 1px)));
   border-top: var(--bar-border-top, var(--bar-border-width, var(--border-width, 1px)) var(--bar-border-style, var(--border-style, 1px)) var(--bar-border-color, var(--border-color, 1px)));
-  margin-block: var(--bar-margin-block, 0 1em);
+  /* --bar-margin-block wins outright if set (by the marginBlock prop, or by
+     anyone setting that CSS var directly). Otherwise composed from
+     --bar-margin-top/--bar-margin-bottom -- the deprecated props, or,
+     again, someone's raw CSS var -- each independently defaulting to the
+     old built-in look (flush on top, 1em clear below). */
+  margin-block: var(--bar-margin-block, var(--bar-margin-top, 0) var(--bar-margin-bottom, 1em));
   margin-inline: var(--bar-margin-inline, 0);
   min-height: var(--bar-min-height, var(--bar-height, 3em));
   height: var(--bar-height, auto);

package/package.json

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