contain-css-svelte 1.1.19 → 1.2.0

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

@@ -1,5 +1,8 @@
 import type { Snippet } from "svelte";
-type $$ComponentProps = {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Fieldset: import("svelte").Component<ContainProps<HTMLAttributes<HTMLFieldSetElement>, {
     legend?: Snippet;
     children?: Snippet;
     layout?: "side" | "above" | "below";
@@ -7,6 +10,7 @@ type $$ComponentProps = {
     fullWidth?: boolean;
     globalInputStyles?: boolean;
     multiline?: boolean;
+}, {
     bg?: string;
     fg?: string;
     padding?: string;
@@ -16,7 +20,6 @@ type $$ComponentProps = {
     maxWidth?: string;
     minWidth?: string;
     width?: string;
-} & Record<string, unknown>;
-declare const Fieldset: import("svelte").Component<$$ComponentProps, {}, "">;
+} & StyleProps<readonly ["bg", "fg", "padding", "borderRadius"]>>, {}, "">;
 type Fieldset = ReturnType<typeof Fieldset>;
 export default Fieldset;

package/dist/layout/Form.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
 import FormProvider from "./FormProvider.svelte";
 let { children, 
 // FormProvider props
@@ -6,8 +7,19 @@ layout, collapseSide, fullWidth, globalInputStyles, multiline,
 // Container-like props
 bg, fg, padding, border, borderRadius, margin, maxWidth, minWidth, width, 
 // Form-specific props
-action, method, onsubmit, ...restProps } = $props();
-const style = $derived(injectVars({
+action, method, onsubmit, class: className, ...restProps } = $props();
+/* The style props are destructured above, so they have to be handed back
+   explicitly -- rest props no longer carry them. */
+/* The shorthands form's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const FORM_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const el = $derived(elementProps({
     bg,
     fg,
     padding,
@@ -19,11 +31,8 @@ const style = $derived(injectVars({
     width,
     ...restProps,
 }, "form", [
-    "bg",
-    "fg",
-    "padding",
+    ...FORM_VARS,
     "border",
-    "borderRadius",
     "margin",
     "maxWidth",
     "minWidth",
@@ -38,7 +47,7 @@ const style = $derived(injectVars({
   {globalInputStyles}
   {multiline}
 >
-  <form {style} {action} {method} {onsubmit} {...restProps}>
+  <form class={className} {action} {method} {onsubmit} {...el}>
     {@render children?.()}
   </form>
 </FormProvider>

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

@@ -1,12 +1,18 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = {
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Form: import("svelte").Component<ContainProps<HTMLAttributes<HTMLFormElement>, {
     children?: Snippet;
     layout?: "side" | "above" | "below";
     collapseSide?: boolean;
     fullWidth?: boolean;
     globalInputStyles?: boolean;
     multiline?: boolean;
+    action?: string;
+    method?: "get" | "post" | "dialog";
+    onsubmit?: (event: SubmitEvent) => void;
+}, {
     bg?: string;
     fg?: string;
     padding?: string;
@@ -16,10 +22,6 @@ type $$ComponentProps = {
     maxWidth?: string;
     minWidth?: string;
     width?: string;
-    action?: string;
-    method?: "get" | "post" | "dialog";
-    onsubmit?: (event: SubmitEvent) => void;
-} & HTMLAttributes<HTMLFormElement>;
-declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
+} & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/dist/layout/FormItem.svelte

@@ -1,21 +1,26 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { elementProps } from "../util";
+import { TYPOGRAPHY_VARS, } from "../styleProps";
 import { getContext } from "svelte";
 const contextDefaults = getContext("formItemDefaults");
-let { fullWidth, globalInputStyles, label, after, children, multiline, layout, collapseSide, above = false, below = false, ...restProps } = $props();
+let { fullWidth, globalInputStyles, label, after, children, multiline, layout, collapseSide, above = false, below = false, class: className, ...restProps } = $props();
+/* The shorthands this component's own CSS backs, one group per mixin
+   it includes. The Props type is derived from this same array, so what
+   the component accepts and what it emits cannot drift apart. */
+const FORM_ITEM_VARS = [
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "form-item", FORM_ITEM_VARS));
 // Use $derived to reactively compute values from context
 const effectiveFullWidth = $derived(fullWidth ?? contextDefaults?.fullWidth ?? false);
 const effectiveGlobalInputStyles = $derived(globalInputStyles ?? contextDefaults?.globalInputStyles ?? true);
 const effectiveMultiline = $derived(multiline ?? contextDefaults?.multiline ?? false);
 const effectiveCollapseSide = $derived(collapseSide ?? contextDefaults?.collapseSide ?? true);
 const effectiveLayoutFromContext = $derived(layout ?? contextDefaults?.layout ?? "side");
-const cssKeys = ["fullWidth", "globalInputStyles", "multiline"];
-const style = $derived(injectVars(restProps, "form-item", cssKeys));
 const effectiveLayout = $derived(above ? "above" : below ? "below" : effectiveLayoutFromContext);
 </script>
 
 <div
-  {style}
-  class="form-item"
+  class={["form-item", className]}
   class:fullWidth={effectiveFullWidth}
   class:globalInputStyles={effectiveGlobalInputStyles}
   class:multiline={effectiveMultiline}
@@ -23,7 +28,7 @@ const effectiveLayout = $derived(above ? "above" : below ? "below" : effectiveLa
   class:layout-side={effectiveLayout === "side"}
   class:layout-above={effectiveLayout === "above"}
   class:layout-below={effectiveLayout === "below"}
-  {...restProps}
+  {...el}
 >
   <label>
     <span class="label">

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

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = {
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const FormItem: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     fullWidth?: boolean;
     globalInputStyles?: boolean;
     label?: Snippet;
@@ -11,7 +13,6 @@ type $$ComponentProps = {
     collapseSide?: boolean;
     above?: boolean;
     below?: boolean;
-} & HTMLAttributes<HTMLElement>;
-declare const FormItem: import("svelte").Component<$$ComponentProps, {}, "">;
+}, StyleProps<readonly ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type FormItem = ReturnType<typeof FormItem>;
 export default FormItem;

package/dist/layout/FormProvider.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">import { setContext, getContext } from "svelte";
+/* No attribute pass-through, deliberately: FormProvider renders no element
+   of its own -- it only sets context around {@render children}. There is
+   nothing for `class`, `style` or `data-*` to land on. */
 let { layout, collapseSide, fullWidth, globalInputStyles, multiline, children, } = $props();
 // Get parent context if it exists
 const parentContext = getContext("formItemDefaults");

package/dist/layout/GridLayout.svelte

@@ -1,17 +1,22 @@
-<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 lang="ts">import { elementProps } from "../util";
+import { MARGIN_VARS, PADDING_VARS, RADIUS_VARS, } from "../styleProps";
+let { children, card = false, tile = false, class: className, ...restProps } = $props();
+/* The shorthands grid-layout's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const GRID_LAYOUT_VARS = [
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...MARGIN_VARS,
+];
+const el = $derived(elementProps(restProps, "grid-layout", GRID_LAYOUT_VARS));
 </script>
 
 <div
-  class="grid-layout"
+  class={["grid-layout", className]}
   class:card-grid={card}
   class:tile-grid={tile}
-  {style}
-  {...restProps}
+  {...el}
 >
   {@render children?.()}
 </div>

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

@@ -1,11 +1,11 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { MarginStyleProps } from "../types";
-type Props = {
+import type { ContainProps, MarginStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const GridLayout: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     card?: boolean;
     tile?: boolean;
     children?: Snippet;
-} & MarginStyleProps & HTMLAttributes<HTMLDivElement>;
-declare const GridLayout: import("svelte").Component<Props, {}, "">;
+}, MarginStyleProps & StyleProps<readonly ["padding", "borderRadius", "marginBlock", "marginInline"]>>, {}, "">;
 type GridLayout = ReturnType<typeof GridLayout>;
 export default GridLayout;

package/dist/layout/GridRow.svelte

@@ -1,16 +1,12 @@
-<script lang="ts">import { injectVars } from "../util";
-let { justify = null, center = false, children, ...restProps } = $props();
+<script lang="ts">import { elementProps } from "../util";
+let { justify = null, center = false, children, class: className, ...restProps } = $props();
 const resolvedJustify = $derived(justify ?? (center ? "center" : null));
-const inlineStyle = $derived(restProps.style);
-const elementProps = $derived.by(() => {
-    const { style: _, ...rest } = restProps;
-    return rest;
-});
-const style = $derived(injectVars({ justify: resolvedJustify, ...elementProps }, "grid-row", ["justify"]) +
-    (inlineStyle ?? ""));
+const el = $derived(elementProps({ justify: resolvedJustify, ...restProps }, "grid-row", [
+    "justify",
+]));
 </script>
 
-<div class="grid-full-row grid-row" {...elementProps} {style}>
+<div class={["grid-full-row", "grid-row", className]} {...el}>
   {@render children?.()}
 </div>
 

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

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
 /**
  * A full-width band inside a GridLayout: a section heading, an explanation, a
  * note saying why the grid is empty. Anything that belongs *in* the run of
@@ -12,13 +13,13 @@ import type { HTMLAttributes } from "svelte/elements";
  * that typographic containers impose is lifted for its contents too. Put the
  * class on your own heading instead and the heading keeps that measure.
  */
-type Props = {
+type Props = ContainProps<HTMLAttributes<HTMLDivElement>, {
     /** How the row sits in the span it covers: start, center, end, stretch. */
     justify?: string | null;
     /** Shorthand for `justify="center"`, as `Stack` takes `center`. */
     center?: boolean;
     children?: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+}>;
 declare const GridRow: import("svelte").Component<Props, {}, "">;
 type GridRow = ReturnType<typeof GridRow>;
 export default GridRow;

package/dist/layout/Hero.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
-const { children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "hero", [
-    "bg",
-    "fg",
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+const { children, class: className, ...restProps } = $props();
+/* The shorthands hero's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const HERO_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const el = $derived(elementProps(restProps, "hero", [
+    ...HERO_VARS,
     "padding",
     "width",
     "height",
@@ -12,10 +19,9 @@ const style = $derived(injectVars(restProps, "hero", [
 </script>
 
 <div
-  class="hero"
-  {style}
+  class={["hero", className]}
   style:--text-align="var(--hero-text-align,center)"
-  {...restProps}
+  {...el}
 >
   {@render children?.()}
 </div>

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

@@ -1,9 +1,9 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { HeroStyleProps } from "../types";
-type Props = {
+import { type StyleProps } from "../styleProps";
+import type { ContainProps, HeroStyleProps } from "../types";
+declare const Hero: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     children?: Snippet;
-} & HeroStyleProps & HTMLAttributes<HTMLElement>;
-declare const Hero: import("svelte").Component<Props, {}, "">;
+}, HeroStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Hero = ReturnType<typeof Hero>;
 export default Hero;

package/dist/layout/Inline.svelte

@@ -1,32 +1,33 @@
-<script lang="ts">import { injectVars } from "../util";
-let { fill = false, stretch = false, split = false, justify = null, align = null, gap = null, wrap = null, children, ...restProps } = $props();
-const inlineStyle = $derived(restProps.style);
-const elementProps = $derived.by(() => {
-    const { style: _, ...rest } = restProps;
-    return rest;
-});
-const style = $derived(injectVars({ justify, align, gap, wrap, ...elementProps }, "inline", [
+<script lang="ts">import { elementProps } from "../util";
+import { MARGIN_VARS, PADDING_VARS, RADIUS_VARS, } from "../styleProps";
+let { fill = false, stretch = false, split = false, justify = null, align = null, gap = null, wrap = null, children, class: className, ...restProps } = $props();
+/* The shorthands inline's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const INLINE_VARS = [
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...MARGIN_VARS,
+];
+const el = $derived(elementProps({ justify, align, gap, wrap, ...restProps }, "inline", [
+    ...INLINE_VARS,
     "bg",
     "fg",
-    "padding",
     "width",
     "height",
     "gap",
     "justify",
     "align",
     "wrap",
-    "marginBlock",
-    "marginInline",
-]) + (inlineStyle ?? ""));
+]));
 </script>
 
 <div
-  class="inline"
+  class={["inline", className]}
   class:fill
   class:stretch
   class:split
-  {style}
-  {...elementProps}
+  {...el}
 >
   {@render children?.()}
 </div>

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { BaseStyleProps, MarginStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps, MarginStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Inline: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     fill?: boolean;
     stretch?: boolean;
     split?: boolean;
@@ -10,7 +11,6 @@ type Props = {
     gap?: string | null;
     wrap?: string | null;
     children?: Snippet;
-} & BaseStyleProps & MarginStyleProps & HTMLAttributes<HTMLDivElement>;
-declare const Inline: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & MarginStyleProps & StyleProps<readonly ["padding", "borderRadius", "marginBlock", "marginInline"]>>, {}, "">;
 type Inline = ReturnType<typeof Inline>;
 export default Inline;

package/dist/layout/MenuList.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
-let { children, striped = false, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "menu", [
-    "fg",
-    "bg",
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS } from "../styleProps";
+let { children, striped = false, class: className, ...restProps } = $props();
+/* The shorthands menu's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+/* COLOR only. `.menu`'s padding-props include is commented out and the
+   rule hardcodes `padding: 0`, so a --menu-padding would go nowhere -- the
+   shorthand is offered where the mixin is live, not where it is written. */
+const MENU_LIST_VARS = [...COLOR_VARS];
+const el = $derived(elementProps(restProps, "menu", [
+    ...MENU_LIST_VARS,
     "itemPadding",
     "itemWidth",
     "itemHeight",
@@ -15,7 +22,7 @@ const style = $derived(injectVars(restProps, "menu", [
 ]));
 </script>
 
-<ul {style} class="menu" {...restProps} class:striped>
+<ul class={["menu", className]} class:striped {...el}>
   {@render children?.()}
 </ul>
 

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

@@ -1,10 +1,10 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { MenuStyleProps } from "../types";
-type Props = {
+import type { ContainProps, MenuStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const MenuList: import("svelte").Component<ContainProps<HTMLAttributes<HTMLUListElement>, {
     children?: Snippet;
     striped?: boolean;
-} & MenuStyleProps & HTMLAttributes<HTMLUListElement>;
-declare const MenuList: import("svelte").Component<Props, {}, "">;
+}, MenuStyleProps & StyleProps<readonly ["bg", "fg"]>>, {}, "">;
 type MenuList = ReturnType<typeof MenuList>;
 export default MenuList;

package/dist/layout/Page.svelte

@@ -1,9 +1,16 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
 import { onDestroy, onMount } from "svelte";
-const { right = false, sticky = false, hideSidebar = false, hideHeader = false, hideFooter = false, onStickyChange = () => { }, header, footer, sidebar, children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "page", [
-    "bg",
-    "fg",
+const { right = false, sticky = false, hideSidebar = false, hideHeader = false, hideFooter = false, onStickyChange = () => { }, header, footer, sidebar, children, class: className, ...restProps } = $props();
+/* The shorthands page's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const PAGE_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "page", [
+    ...PAGE_VARS,
     "contentPadding",
     "width",
     "height",
@@ -56,7 +63,7 @@ onMount(() => {
 </script>
 
 <section
-  class="page"
+  class={["page", className]}
   class:freeze
   class:right
   class:sticky
@@ -64,8 +71,7 @@ onMount(() => {
   class:hasSidebar
   class:hasFooter
   bind:this={pageElement}
-  {style}
-  {...restProps}
+  {...el}
 >
   <header>
     {#if hasHeader}{@render header?.()}{/if}

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

@@ -1,5 +1,8 @@
 import type { Snippet } from "svelte";
-type $$ComponentProps = {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Page: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     right?: boolean;
     sticky?: boolean;
     hideSidebar?: boolean;
@@ -10,7 +13,12 @@ type $$ComponentProps = {
     footer?: Snippet;
     sidebar?: Snippet;
     children?: Snippet;
-} & Record<string, unknown>;
-declare const Page: import("svelte").Component<$$ComponentProps, {}, "">;
+}, {
+    bg?: string | null;
+    fg?: string | null;
+    contentPadding?: string | null;
+    width?: string | null;
+    height?: string | null;
+} & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type Page = ReturnType<typeof Page>;
 export default Page;

package/dist/layout/ResponsiveText.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">const breakpoints = ["xs", "small", "medium", "large", "xl"];
+/* No attribute pass-through, deliberately: this renders one sibling span
+   per breakpoint rather than a single root, so there is no one element an
+   `id` or `data-testid` could go on without being wrong at every other
+   breakpoint. Wrap it if you need a handle. */
 const { greaterThan = null, smallerThan = null, xs, small, medium, large, xl, else: elseSnippet, greaterThanContent: greaterThanSnippet, smallerThanContent: smallerThanSnippet, } = $props();
 function computeSmallerThan(value) {
     if (!value)

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

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

package/dist/layout/RowContainer.svelte

@@ -1,19 +1,22 @@
-<script lang="ts">import { injectVars } from "../util";
-let { size = "medium", customHeight = null, children, marginBlock = null, marginInline = null, style: inlineStyle, ...restProps } = $props();
-const style = $derived(injectVars({ marginBlock, marginInline }, "row-container", [
-    "marginBlock",
-    "marginInline",
-]) + (inlineStyle ?? ""));
+<script lang="ts">import { elementProps } from "../util";
+import { MARGIN_VARS, } from "../styleProps";
+let { size = "medium", customHeight = null, children, class: className, ...restProps } = $props();
+/* The shorthands row-container's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const ROW_CONTAINER_VARS = [
+    ...MARGIN_VARS,
+];
+const el = $derived(elementProps(restProps, "row-container", ROW_CONTAINER_VARS));
 </script>
 
 <section
-  class="row-container"
+  class={["row-container", className]}
   class:small={size === "small"}
   class:medium={size === "medium"}
   class:large={size === "large"}
   style:--custom-height={customHeight}
-  {style}
-  {...restProps}
+  {...el}
 >
   {@render children?.()}
 </section>

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

@@ -1,11 +1,11 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { MarginStyleProps } from "../types";
-type Props = {
+import type { ContainProps, MarginStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const RowContainer: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     size?: "small" | "medium" | "large";
     customHeight?: string | null;
     children?: Snippet;
-} & MarginStyleProps & HTMLAttributes<HTMLElement>;
-declare const RowContainer: import("svelte").Component<Props, {}, "">;
+}, MarginStyleProps & StyleProps<readonly ["marginBlock", "marginInline"]>>, {}, "">;
 type RowContainer = ReturnType<typeof RowContainer>;
 export default RowContainer;

package/dist/layout/Sidebar.svelte

@@ -1,22 +1,33 @@
-<script lang="ts">import { injectVars } from "../util";
-let { left, right, children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "sidebar", ["bg", "fg", "width"]));
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { left, right, children, expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", class: className, ...restProps } = $props();
+/* The shorthands sidebar's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const SIDEBAR_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "sidebar", [
+    ...SIDEBAR_VARS,
+    "width",
+]));
 let expandedHamburger = $state(false);
 let expandedBar = $state(true);
 </script>
 
 <aside
-  class="sidebar"
+  class={["sidebar", className]}
   class:right
   class:left
   class:expandedHamburger
   class:expandedBar
-  {style}
+  {...el}
 >
   <button
     class:expander={!expandedHamburger}
     class:close={expandedHamburger}
-    aria-label={expandedHamburger ? "Collapse sidebar" : "Expand sidebar"}
+    aria-label={expandedHamburger ? collapseLabel : expandLabel}
     data-audit-action="toggle-sidebar-sheet"
     onclick={() => (expandedHamburger = !expandedHamburger)}
   ></button>