contain-css-svelte 1.1.19 → 1.2.0

package/dist/controls/Toggle.svelte

@@ -1,12 +1,28 @@
-<script lang="ts">import { injectVars } from "../util";
-let { checked = $bindable(false), name = "", onLabel, offLabel, children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "toggle", ["bg", "fg", "padding", "width", "height"]));
+<script lang="ts">import { splitProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { checked = $bindable(false), name = "", onLabel, offLabel, children, class: className, ...restProps } = $props();
+/* Variables and the caller's `style` go on the wrapper label, which is what
+   `.toggle`'s CSS targets; the attributes go on the input, which is what
+   `aria-*`, `required` and `data-*` are about. */
+/* The shorthands toggle'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 TOGGLE_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(splitProps(restProps, "toggle", [
+    ...TOGGLE_VARS,
+    "padding",
+    "width",
+    "height",
+]));
 const hasOffLabel = $derived(Boolean(offLabel));
 const hasOnLabel = $derived(Boolean(onLabel || children));
 const effectiveOnLabel = $derived(onLabel || children);
 </script>
 
-<label class="toggle" {style}>
+<label class={["toggle", className]} style={el.style}>
   {#if hasOffLabel}
     <span class="toggle-label toggle-label-off">{@render offLabel?.()}</span>
   {/if}
@@ -16,7 +32,7 @@ const effectiveOnLabel = $derived(onLabel || children);
       name={name || undefined}
       type="checkbox"
       bind:checked
-      {...restProps}
+      {...el.attrs}
     />
     <span class="toggle-track" aria-hidden="true">
       <span class="toggle-thumb"></span>

package/dist/controls/Toggle.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Toggle: import("svelte").Component<ContainProps<HTMLInputAttributes, {
     checked?: boolean;
     name?: string;
     onLabel?: Snippet;
     offLabel?: Snippet;
     children?: Snippet;
-} & BaseStyleProps & Omit<HTMLInputAttributes, "type">;
-declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>, "type">, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/dropdowns/DropdownMenu.svelte

@@ -4,18 +4,25 @@ export {};
 
 <script lang="ts">import { cssProperties } from "../cssprops";
 import MenuList from "../layout/MenuList.svelte";
-import { injectVars } from "../util";
+import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
 import { onMount } from "svelte";
-let { label, children, triggerAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", ...props } = $props();
+let { label, children, triggerAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", class: className, ...props } = $props();
 idPostfix++;
 let id = "contain-dropdown-menu-" + idPostfix;
 let buttonElement = $state();
 let dropdownContentElement = $state();
 let isOpen = $state(false);
 // Style injection
-const style = $derived(injectVars(props, "menu", [
-    "bg",
-    "fg",
+/* 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. */
+const DROPDOWN_MENU_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(props, "menu", [
+    ...DROPDOWN_MENU_VARS,
     "padding",
     "width",
     "height",
@@ -232,7 +239,12 @@ let popoverDiv = $state();
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<nav class="dropdown-menu" class:open={isOpen} onkeydown={handleKeystroke}>
+<nav
+  class={["dropdown-menu", className]}
+  class:open={isOpen}
+  onkeydown={handleKeystroke}
+  {...el}
+>
   <button
     bind:this={buttonElement}
     onclick={triggerMenu}

package/dist/dropdowns/DropdownMenu.svelte.d.ts

@@ -14,16 +14,16 @@ export type MatchMode = "prefix" | "word" | "substring";
  *               focus follows the first remaining match
  */
 export type TypeaheadMode = "focus" | "filter";
+import { type StyleProps } from "../styleProps";
 import type { Snippet } from "svelte";
-import type { DropdownMenuStyleProps } from "../types";
+import type { ContainProps, DropdownMenuStyleProps } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
-type Props = {
+declare const DropdownMenu: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     label?: Snippet;
     children?: Snippet;
     triggerAuditAction?: string | null;
     matchMode?: MatchMode;
     typeaheadMode?: TypeaheadMode;
-} & DropdownMenuStyleProps & HTMLAttributes<HTMLDivElement>;
-declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
+}, DropdownMenuStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

package/dist/layout/Accordion.svelte

@@ -1,5 +1,15 @@
 <script lang="ts">import { onMount } from "svelte";
-let { highlanderMode = true, children } = $props();
+import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { highlanderMode = true, children, 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 ACCORDION_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "accordion", ACCORDION_VARS));
 let wrapper = $state();
 function onAccordionClicked(e) {
     if (!highlanderMode) {
@@ -34,7 +44,12 @@ function onAccordionClicked(e) {
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="accordion-wrapper" onclick={onAccordionClicked} bind:this={wrapper}>
+<div
+  class={["accordion-wrapper", className]}
+  onclick={onAccordionClicked}
+  bind:this={wrapper}
+  {...el}
+>
   {@render children?.()}
 </div>
 

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

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

package/dist/layout/Bar.svelte

@@ -3,24 +3,27 @@ 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();
+import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+const { children, primary, secondary, marginTop, marginBottom, class: className, ...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. */
+/* 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 BAR_VARS = [...COLOR_VARS, ...TYPOGRAPHY_VARS];
 const cssKeys = [
-    "bg",
-    "fg",
+    ...BAR_VARS,
     "padding",
     "width",
     "height",
@@ -28,16 +31,20 @@ const cssKeys = [
     "align",
     "marginBlock",
     "marginInline",
+    "marginTop",
+    "marginBottom",
 ];
-const style = $derived(injectVars({ ...restProps, marginBlock: resolvedMarginBlock }, "bar", cssKeys));
-const extraStyle = $derived(primary
+const variantStyle = $derived(primary
     ? "--bar-bg: var(--primary-bg); --bar-fg: var(--primary-fg);"
     : secondary
         ? "--bar-bg: var(--secondary-bg); --bar-fg: var(--secondary-fg);"
         : "");
+/* marginTop/marginBottom are deprecated props destructured above, so they
+   have to be handed back explicitly -- rest props no longer carry them. */
+const el = $derived(elementProps({ ...restProps, marginTop, marginBottom }, "bar", cssKeys, variantStyle));
 </script>
 
-<div class="bar" style="{style}{extraStyle}">
+<div class={["bar", className]} {...el}>
   {@render children?.()}
 </div>
 
@@ -65,7 +72,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/dist/layout/Bar.svelte.d.ts

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

package/dist/layout/Column.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";
     customWidth?: string | null;
     children?: Snippet;
-} & MarginStyleProps & HTMLAttributes<HTMLElement>;
+}, MarginStyleProps>;
 declare const Column: import("svelte").Component<Props, {}, "">;
 type Column = ReturnType<typeof Column>;
 export default Column;

package/dist/layout/ColumnContainer.svelte

@@ -1,19 +1,22 @@
-<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 lang="ts">import { elementProps } from "../util";
+import { MARGIN_VARS, } from "../styleProps";
+let { size = "medium", customWidth = null, children, class: className, ...restProps } = $props();
+/* The shorthands column-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 COLUMN_CONTAINER_VARS = [
+    ...MARGIN_VARS,
+];
+const el = $derived(elementProps(restProps, "column-container", COLUMN_CONTAINER_VARS));
 </script>
 
 <section
-  class="column-container"
+  class={["column-container", className]}
   class:small={size === "small"}
   class:medium={size === "medium"}
   class:large={size === "large"}
   style:--custom-width={customWidth}
-  {style}
-  {...restProps}
+  {...el}
 >
   {@render children?.()}
 </section>

package/dist/layout/ColumnContainer.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 ColumnContainer: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     size?: "small" | "medium" | "large";
     customWidth?: string | null;
     children?: Snippet;
-} & MarginStyleProps & HTMLAttributes<HTMLElement>;
-declare const ColumnContainer: import("svelte").Component<Props, {}, "">;
+}, MarginStyleProps & StyleProps<readonly ["marginBlock", "marginInline"]>>, {}, "">;
 type ColumnContainer = ReturnType<typeof ColumnContainer>;
 export default ColumnContainer;

package/dist/layout/Columns.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">"use strict";
-let { children } = $props();
+<script lang="ts">import { elementProps } from "../util";
+let { children, class: className, ...restProps } = $props();
+const el = $derived(elementProps(restProps, "columns", ["gap"]));
 </script>
 
-<div class="columns">
+<div class={["columns", className]} {...el}>
   {@render children?.()}
 </div>
 

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

@@ -1,6 +1,10 @@
-interface Props {
-    children?: import('svelte').Snippet;
-}
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+type Props = ContainProps<HTMLAttributes<HTMLDivElement>, {
+    children?: import("svelte").Snippet;
+}, {
+    gap?: string | null;
+}>;
 declare const Columns: import("svelte").Component<Props, {}, "">;
 type Columns = ReturnType<typeof Columns>;
 export default Columns;

package/dist/layout/Container.svelte

@@ -1,19 +1,27 @@
-<script lang="ts">import { injectVars } from "../util";
-const { children, border = false, ...props } = $props();
-const style = $derived(injectVars(props, "container", [
-    "bg",
-    "fg",
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+const { children, border = false, class: className, ...restProps } = $props();
+/* The shorthands 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 CONTAINER_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const el = $derived(elementProps(restProps, "container", [
+    ...CONTAINER_VARS,
     "marginBlock",
     "marginInline",
     "maxWidth",
-    "padding",
     "height",
     "paddingTop",
     "borderTop",
 ]));
 </script>
 
-<section class:border {style}>
+<section class={className} class:border {...el}>
   {@render children?.()}
 </section>
 
@@ -34,7 +42,6 @@ const style = $derived(injectVars(props, "container", [
 /* Convenience groupings */
 section {
   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)));
   --link-fg: var(--container-link-fg, var(--surface-link-fg, var(--block-link-fg, inherit)));
   --_bg-mix-color: var(--container-bg-mix-color, var(--surface-bg-mix-color, var(--block-bg-mix-color, var(--bg-mix-color, transparent))));
@@ -131,6 +138,14 @@ section {
   border-bottom: var(--container-border-bottom, var(--surface-border-bottom, var(--block-border-bottom, var(--border-bottom, var(--container-border, var(--surface-border, var(--block-border, var(--border, none))))))));
   border-left: var(--container-border-left, var(--surface-border-left, var(--block-border-left, var(--border-left, var(--container-border, var(--surface-border, var(--block-border, var(--border, none))))))));
   border-radius: var(--container-border-radius, var(--surface-border-radius, var(--block-border-radius, var(--border-radius, none))));
+  /* box-props (above) already sets a padding, but its shared fallback (4px)
+     is generic to every component that uses the mixin, not Container's own
+     long-standing 8px default. This declaration coming AFTER box-props is
+     what makes it win -- before this fix, Container had no override here
+     at all and was silently rendering at box-props' 4px. Same
+     var-with-fallbacks() chain as box-props' own (container/surface/block),
+     just a bigger final fallback. */
+  padding: var(--container-padding, var(--surface-padding, var(--block-padding, var(--padding, 8px))));
   max-width: var(--container-line-width, var(--surface-line-width, var(--block-line-width, var(--line-width, unset))));
   font-family: var(--container-body-font-family, var(--surface-body-font-family, var(--block-body-font-family, var(--body-font-family, var(--font-family)))));
   font-family: var(--container-font-family, var(--surface-font-family, var(--block-font-family, var(--font-family, unset))));

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

@@ -1,6 +1,11 @@
+import { type StyleProps } from "../styleProps";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type Props = {
+import type { ContainProps } from "../types";
+declare const Container: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
+    border?: boolean;
+    children?: Snippet;
+}, {
     bg?: string | null;
     fg?: string | null;
     marginBlock?: string | null;
@@ -8,11 +13,8 @@ type Props = {
     maxWidth?: string | null;
     padding?: string | null;
     height?: string | null;
-    border?: boolean;
     paddingTop?: string | null;
     borderTop?: string | null;
-    children?: Snippet;
-} & HTMLAttributes<HTMLElement>;
-declare const Container: import("svelte").Component<Props, {}, "">;
+} & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Container = ReturnType<typeof Container>;
 export default Container;

package/dist/layout/DataList.svelte

@@ -1,9 +1,17 @@
-<script lang="ts">import { injectVars } from "../util";
-let { children, stackable = false, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "data-list", [
-    "bg",
-    "fg",
-    "padding",
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { children, stackable = false, class: className, ...restProps } = $props();
+/* The shorthands data-list'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 DATA_LIST_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "data-list", [
+    ...DATA_LIST_VARS,
     "width",
     "marginInline",
     "marginLeft",
@@ -32,7 +40,7 @@ const style = $derived(injectVars(restProps, "data-list", [
 ]));
 </script>
 
-<ul class="data-list" class:stackable {style} {...restProps}>
+<ul class={["data-list", className]} class:stackable {...el}>
   {@render children?.()}
 </ul>
 

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

@@ -1,9 +1,11 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const DataList: import("svelte").Component<ContainProps<HTMLAttributes<HTMLUListElement>, {
     children?: Snippet;
     stackable?: boolean;
+}, BaseStyleProps & {
     marginInline?: string | null;
     marginLeft?: string | null;
     marginRight?: string | null;
@@ -27,7 +29,6 @@ type Props = {
     selectedOutline?: string | null;
     selectedBorder?: string | null;
     selectionColor?: string | null;
-} & BaseStyleProps & HTMLAttributes<HTMLUListElement>;
-declare const DataList: import("svelte").Component<Props, {}, "">;
+} & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type DataList = ReturnType<typeof DataList>;
 export default DataList;

package/dist/layout/DataListItem.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">import Checkbox from "../controls/Checkbox.svelte";
-import { injectVars } from "../util";
-let { start, end, children, interactive = false, selectable = false, checked = $bindable(false), tabindex = undefined, onclick = null, onkeydown = null, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "data-list-item", [
-    "bg",
-    "fg",
+import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+let { start, end, children, interactive = false, selectable = false, checked = $bindable(false), tabindex = undefined, onclick = null, onkeydown = null, class: className, ...restProps } = $props();
+/* The shorthands data-list-item'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 DATA_LIST_ITEM_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const el = $derived(elementProps(restProps, "data-list-item", [
+    ...DATA_LIST_ITEM_VARS,
     "padding",
     "width",
     "height",
@@ -76,19 +83,18 @@ function handleKeydown(event) {
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <li
-  class="data-list-item"
+  class={["data-list-item", className]}
   class:hasStart
   class:hasEnd
   class:isInteractive
   class:selectable
   class:checked={selectable && checked}
-  {style}
   tabindex={rowTabIndex}
   role={rowRole}
   aria-checked={selectable ? checked : undefined}
   onclick={handleClick}
   onkeydown={handleKeydown}
-  {...restProps}
+  {...el}
 >
   {#if hasStart}
     <div class="start">

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const DataListItem: import("svelte").Component<ContainProps<HTMLAttributes<HTMLLIElement>, {
     start?: Snippet;
     end?: Snippet;
     children?: Snippet;
@@ -34,7 +35,6 @@ type Props = {
     selectedOutline?: string | null;
     selectedBorder?: string | null;
     selectionColor?: string | null;
-} & BaseStyleProps & HTMLAttributes<HTMLLIElement>;
-declare const DataListItem: import("svelte").Component<Props, {}, "checked">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "checked">;
 type DataListItem = ReturnType<typeof DataListItem>;
 export default DataListItem;

package/dist/layout/Fieldset.svelte

@@ -1,11 +1,22 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, } from "../styleProps";
 import FormProvider from "./FormProvider.svelte";
 let { legend, children, 
 // FormProvider props
 layout, collapseSide, fullWidth, globalInputStyles, multiline, 
 // Container-like props
-bg, fg, padding, border, borderRadius, margin, maxWidth, minWidth, width, ...restProps } = $props();
-const style = $derived(injectVars({
+bg, fg, padding, border, borderRadius, margin, maxWidth, minWidth, width, 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 fieldset'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 FIELDSET_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+];
+const el = $derived(elementProps({
     bg,
     fg,
     padding,
@@ -17,11 +28,8 @@ const style = $derived(injectVars({
     width,
     ...restProps,
 }, "fieldset", [
-    "bg",
-    "fg",
-    "padding",
+    ...FIELDSET_VARS,
     "border",
-    "borderRadius",
     "margin",
     "maxWidth",
     "minWidth",
@@ -36,7 +44,7 @@ const style = $derived(injectVars({
   {globalInputStyles}
   {multiline}
 >
-  <fieldset {style} {...restProps}>
+  <fieldset class={className} {...el}>
     {#if legend}
       <legend>
         {@render legend()}