contain-css-svelte 1.1.17 → 1.1.19

package/dist/Card.svelte

@@ -6,6 +6,8 @@ const cssVars = $derived(injectVars({ height, ...restProps }, "card", [
     "padding",
     "width",
     "height",
+    "marginBlock",
+    "marginInline",
 ]));
 const forceFixedHeight = (h) => {
     if (h && !fixedHeight) {
@@ -30,6 +32,14 @@ let hasFooter = $derived(Boolean(footer));
 </div>
 
 <style>@charset "UTF-8";
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
@@ -46,7 +56,13 @@ let hasFooter = $derived(Boolean(footer));
   overflow-x: hidden;
   container-type: inline-size;
   width: var(--w);
-  margin: var(--card-margin, var(--margin, 16px));
+  /* Was a single `margin` shorthand (--card-margin, 16px on every side).
+     Split into block/inline -- same default on each axis, so nothing
+     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));
   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/controls/Button.svelte

@@ -22,7 +22,15 @@ const style = $derived(injectVars(restProps, "button", ["bg", "fg", "padding", "
   {/if}
 </button>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/controls/ButtonLink.svelte

@@ -35,7 +35,15 @@ const iconSlotted = $derived(Boolean(icon));
   </span>
 </a>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/controls/Checkbox.svelte

@@ -57,6 +57,14 @@ let ref = $state(null);
 </div>
 
 <style>@charset "UTF-8";
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.

package/dist/controls/CircleButton.svelte

@@ -22,7 +22,15 @@ const style = $derived(injectVars(restProps, "mini-button", [
   {@render children?.()}
 </button>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/controls/Input.svelte

@@ -4,7 +4,15 @@ export {};
 
 <input bind:value {placeholder} {...restProps} />
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/controls/RadioButton.svelte

@@ -35,6 +35,14 @@ function handleChange() {
 </div>
 
 <style>@charset "UTF-8";
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.

package/dist/controls/Select.svelte

@@ -129,6 +129,14 @@ $effect(() => {
 </div>
 
 <style>@charset "UTF-8";
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.

package/dist/controls/Slider.svelte

@@ -23,7 +23,15 @@ const style = $derived(`${injectVars(elementProps, "slider", ["bg", "fg", "paddi
   {...elementProps}
 />
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/controls/TabItem.svelte

@@ -10,7 +10,15 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
   </Button>
 </div>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/controls/Toggle.svelte

@@ -30,7 +30,15 @@ const effectiveOnLabel = $derived(onLabel || children);
   {/if}
 </label>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/dropdowns/DropdownMenu.svelte

@@ -275,7 +275,15 @@ let popoverDiv = $state();
   </div>
 </nav>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/index.d.ts

@@ -46,7 +46,7 @@ import Table from "./layout/Table.svelte";
 import Accordion from "./layout/Accordion.svelte";
 import Tag from "./misc/Tag.svelte";
 import Text from "./typography/Text.svelte";
-export type { BaseStyleProps, ContainerStyleProps, BarStyleProps, MenuStyleProps, CardStyleProps, TagStyleProps, SidebarStyleProps, HeroStyleProps, DropdownMenuStyleProps, } from "./types";
+export type { BaseStyleProps, MarginStyleProps, ContainerStyleProps, BarStyleProps, MenuStyleProps, CardStyleProps, TagStyleProps, SidebarStyleProps, HeroStyleProps, DropdownMenuStyleProps, } from "./types";
 export { Tag };
 export { Hero };
 export { TabItem };

package/dist/layout/Accordion.svelte

@@ -38,7 +38,15 @@ function onAccordionClicked(e) {
   {@render children?.()}
 </div>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/Bar.svelte

@@ -1,5 +1,23 @@
-<script lang="ts">import { injectVars } from "../util";
-const { children, primary, secondary, ...restProps } = $props();
+<script module lang="ts">"use strict";
+let warnedDeprecatedMargin = false;
+</script>
+
+<script lang="ts">import { BROWSER, DEV } from "esm-env";
+import { injectVars } from "../util";
+const { children, primary, secondary, marginTop, marginBottom, marginBlock, ...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));
 const cssKeys = [
     "bg",
     "fg",
@@ -8,10 +26,10 @@ const cssKeys = [
     "height",
     "justify",
     "align",
-    "marginBottom",
-    "marginTop",
+    "marginBlock",
+    "marginInline",
 ];
-const style = $derived(injectVars(restProps, "bar", cssKeys));
+const style = $derived(injectVars({ ...restProps, marginBlock: resolvedMarginBlock }, "bar", cssKeys));
 const extraStyle = $derived(primary
     ? "--bar-bg: var(--primary-bg); --bar-fg: var(--primary-fg);"
     : secondary
@@ -23,7 +41,15 @@ const extraStyle = $derived(primary
   {@render children?.()}
 </div>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
@@ -39,7 +65,8 @@ 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-bottom: var(--bar-margin-bottom, 1em);
+  margin-block: var(--bar-margin-block, 0 1em);
+  margin-inline: var(--bar-margin-inline, 0);
   min-height: var(--bar-min-height, var(--bar-height, 3em));
   height: var(--bar-height, auto);
   max-height: var(--bar-max-height);

package/dist/layout/Column.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { MarginStyleProps } from "../types";
 type Props = {
     size?: "small" | "medium" | "large";
     customWidth?: string | null;
     children?: Snippet;
-} & HTMLAttributes<HTMLElement>;
+} & MarginStyleProps & HTMLAttributes<HTMLElement>;
 declare const Column: import("svelte").Component<Props, {}, "">;
 type Column = ReturnType<typeof Column>;
 export default Column;

package/dist/layout/ColumnContainer.svelte

@@ -1,5 +1,9 @@
-<script lang="ts">let { size = "medium", customWidth = null, children, ...restProps } = $props();
-export {};
+<script lang="ts">import { injectVars } from "../util";
+let { size = "medium", customWidth = null, children, marginBlock = null, marginInline = null, style: inlineStyle, ...restProps } = $props();
+const style = $derived(injectVars({ marginBlock, marginInline }, "column-container", [
+    "marginBlock",
+    "marginInline",
+]) + (inlineStyle ?? ""));
 </script>
 
 <section
@@ -8,12 +12,21 @@ export {};
   class:medium={size === "medium"}
   class:large={size === "large"}
   style:--custom-width={customWidth}
+  {style}
   {...restProps}
 >
   {@render children?.()}
 </section>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
@@ -41,4 +54,8 @@ export {};
   overflow: auto;
   justify-content: start;
   align-items: var(--column-align, center);
+  --_margin-block: var(--column-container-margin-block, var(--margin-block, 0));
+  --_margin-inline: var(--column-container-margin-inline, var(--margin-inline, 0));
+  margin-block: var(--_margin-block);
+  margin-inline: var(--_margin-inline);
 }</style>

package/dist/layout/ColumnContainer.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { MarginStyleProps } from "../types";
 type Props = {
     size?: "small" | "medium" | "large";
     customWidth?: string | null;
     children?: Snippet;
-} & HTMLAttributes<HTMLElement>;
+} & MarginStyleProps & HTMLAttributes<HTMLElement>;
 declare const ColumnContainer: import("svelte").Component<Props, {}, "">;
 type ColumnContainer = ReturnType<typeof ColumnContainer>;
 export default ColumnContainer;

package/dist/layout/Columns.svelte

@@ -6,7 +6,15 @@ let { children } = $props();
   {@render children?.()}
 </div>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/Container.svelte

@@ -3,7 +3,8 @@ const { children, border = false, ...props } = $props();
 const style = $derived(injectVars(props, "container", [
     "bg",
     "fg",
-    "margin",
+    "marginBlock",
+    "marginInline",
     "maxWidth",
     "padding",
     "height",
@@ -16,7 +17,15 @@ const style = $derived(injectVars(props, "container", [
   {@render children?.()}
 </section>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
@@ -24,7 +33,6 @@ const style = $derived(injectVars(props, "container", [
   */
 /* Convenience groupings */
 section {
-  margin: auto;
   box-sizing: border-box;
   padding: var(--container-padding, var(--surface-padding, var(--padding, 8px)));
   --link-bg: var(--container-link-bg, var(--surface-link-bg, var(--block-link-bg, inherit)));
@@ -435,8 +443,15 @@ section :global(h6 + p::first-letter) {
 section {
   /* Override typography max-width */
   max-width: var(--container-max-width, var(--surface-max-width, var(--block-max-width, var(--max-width, 900px))));
-  margin-top: var(--container-margin, var(--surface-margin, var(--block-margin, var(--margin, var(--gap)))));
-  margin-bottom: var(--container-margin, var(--surface-margin, var(--block-margin, var(--margin, var(--gap)))));
+  /* Not the generic margin-props() mixin (_box.scss): that defaults to 0,
+     but a Container has always centred itself horizontally and kept a
+     gap's worth of vertical rhythm above/below by default. Same defaults,
+     same var-with-fallbacks() prefix chain as everything else here --
+     just block/inline now instead of one `margin` prop, so a caller can
+     set only one axis (a Container flush against a footer, say) instead
+     of fighting a single shared value for both. */
+  margin-inline: var(--container-margin-inline, var(--surface-margin-inline, var(--block-margin-inline, var(--margin-inline, auto))));
+  margin-block: var(--container-margin-block, var(--surface-margin-block, var(--block-margin-block, var(--margin-block, var(--gap)))));
   /* Why is this suddenly causing a scroll? */
   container-type: inline-size;
   overflow-x: hidden;

package/dist/layout/Container.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from "svelte/elements";
 type Props = {
     bg?: string | null;
     fg?: string | null;
-    margin?: string | null;
+    marginBlock?: string | null;
+    marginInline?: string | null;
     maxWidth?: string | null;
     padding?: string | null;
     height?: string | null;

package/dist/layout/DataList.svelte

@@ -36,7 +36,15 @@ const style = $derived(injectVars(restProps, "data-list", [
   {@render children?.()}
 </ul>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/DataListItem.svelte

@@ -116,7 +116,15 @@ function handleKeydown(event) {
   {/if}
 </li>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/Fieldset.svelte

@@ -46,7 +46,15 @@ const style = $derived(injectVars({
   </fieldset>
 </FormProvider>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/Form.svelte

@@ -43,7 +43,15 @@ const style = $derived(injectVars({
   </form>
 </FormProvider>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/FormItem.svelte

@@ -36,7 +36,15 @@ const effectiveLayout = $derived(above ? "above" : below ? "below" : effectiveLa
   <div class="after">{@render after?.()}</div>
 </div>
 
-<style>/* Warning: because we define a fallback
+<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller

package/dist/layout/GridLayout.svelte

@@ -1,17 +1,30 @@
-<script lang="ts">let { children, card = false, tile = false, ...restProps } = $props();
-export {};
+<script lang="ts">import { injectVars } from "../util";
+let { children, card = false, tile = false, marginBlock = null, marginInline = null, style: inlineStyle, ...restProps } = $props();
+const style = $derived(injectVars({ marginBlock, marginInline }, "grid-layout", [
+    "marginBlock",
+    "marginInline",
+]) + (inlineStyle ?? ""));
 </script>
 
 <div
   class="grid-layout"
   class:card-grid={card}
   class:tile-grid={tile}
+  {style}
   {...restProps}
 >
   {@render children?.()}
 </div>
 
 <style>@charset "UTF-8";
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
@@ -85,6 +98,10 @@ export {};
   border-bottom: var(--grid-layout-border-bottom, var(--border-bottom, var(--grid-layout-border, var(--border, none))));
   border-left: var(--grid-layout-border-left, var(--border-left, var(--grid-layout-border, var(--border, none))));
   border-radius: var(--grid-layout-border-radius, var(--border-radius, none));
+  --_margin-block: var(--grid-layout-margin-block, var(--margin-block, 0));
+  --_margin-inline: var(--grid-layout-margin-inline, var(--margin-inline, 0));
+  margin-block: var(--_margin-block);
+  margin-inline: var(--_margin-inline);
 }
 
 /* Escape hatch for the things in a grid that are not items in the run: a

package/dist/layout/GridLayout.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { MarginStyleProps } from "../types";
 type Props = {
     card?: boolean;
     tile?: boolean;
     children?: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & MarginStyleProps & HTMLAttributes<HTMLDivElement>;
 declare const GridLayout: import("svelte").Component<Props, {}, "">;
 type GridLayout = ReturnType<typeof GridLayout>;
 export default GridLayout;