contain-css-svelte 1.1.20 → 1.2.1

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

@@ -1,6 +1,8 @@
 import type { HTMLSelectAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
 import type { MatchMode, TypeaheadMode } from "../dropdowns/DropdownMenu.svelte";
-type Props = {
+declare const Select: import("svelte").Component<ContainProps<HTMLSelectAttributes, {
     value?: any;
     children?: import("svelte").Snippet;
     "data-audit-action"?: string | null;
@@ -8,7 +10,6 @@ type Props = {
     matchMode?: MatchMode;
     /** See {@link TypeaheadMode} on DropdownMenu -- focus a match or filter the list. */
     typeaheadMode?: TypeaheadMode;
-} & HTMLSelectAttributes;
-declare const Select: import("svelte").Component<Props, {}, "value">;
+}, StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/controls/Slider.svelte

@@ -1,26 +1,20 @@
-<script lang="ts">import { injectVars } from "../util";
-let { value = $bindable(0), min = 0, max = 100, step = 1, ...restProps } = $props();
-const inlineStyle = $derived(restProps.style);
-const elementProps = $derived.by(() => {
-    const { style: _, ...rest } = restProps;
-    return rest;
-});
+<script lang="ts">import { elementProps } from "../util";
+let { value = $bindable(0), min = 0, max = 100, step = 1, class: className, ...restProps } = $props();
 const normalizedMin = $derived(Number.isFinite(min) ? min : 0);
 const normalizedMax = $derived(Number.isFinite(max) && max > normalizedMin ? max : normalizedMin + 1);
 const clampedValue = $derived(Math.min(Math.max(Number(value) || 0, normalizedMin), normalizedMax));
 const fillPercent = $derived(((clampedValue - normalizedMin) / (normalizedMax - normalizedMin)) * 100);
-const style = $derived(`${injectVars(elementProps, "slider", ["bg", "fg", "padding", "width", "height"])}--slider-percent: ${fillPercent}%;${inlineStyle ?? ""}`);
+const el = $derived(elementProps(restProps, "slider", ["bg", "fg", "padding", "width", "height"], `--slider-percent: ${fillPercent}%;`));
 </script>
 
 <input
-  class="slider"
+  class={["slider", className]}
   type="range"
   bind:value
   {min}
   {max}
   {step}
-  {style}
-  {...elementProps}
+  {...el}
 />
 
 <style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take

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

@@ -1,11 +1,11 @@
 import type { HTMLInputAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+type Props = ContainProps<HTMLInputAttributes, {
     value?: number;
     min?: number;
     max?: number;
     step?: number | "any";
-} & BaseStyleProps & Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "step">;
+}, BaseStyleProps, "type" | "value" | "min" | "max" | "step">;
 declare const Slider: import("svelte").Component<Props, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/controls/TabItem.svelte

@@ -1,11 +1,30 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
 import Button from "./Button.svelte";
-const { active = false, icon, children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "width", "height"]));
+const { active = false, icon, children, class: className, ...restProps } = $props();
+/* Everything goes to the Button, not to the wrapper. The wrapper is
+   `display: contents`, so it generates no box -- a caller's `style` put
+   there would be silently inert. The variables work on the Button too:
+   `.tab > button`'s rules read --tab-bg and friends, and a custom property
+   resolves on the element it is declared on. */
+/* The shorthands tab'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 TAB_ITEM_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "tab", [
+    ...TAB_ITEM_VARS,
+    "width",
+    "height",
+]));
 </script>
 
-<div class="tab" class:active {style}>
-  <Button primary={active} {icon} {...restProps}>
+<div class="tab" class:active>
+  <Button primary={active} {icon} class={className} {...el}>
     {@render children?.()}
   </Button>
 </div>

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

@@ -1,11 +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 TabItem: import("svelte").Component<ContainProps<HTMLAttributes<HTMLButtonElement>, {
     active?: boolean;
     icon?: Snippet;
     children?: Snippet;
-} & BaseStyleProps & HTMLAttributes<HTMLButtonElement>;
-declare const TabItem: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;

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/cssprops.js

@@ -126,6 +126,7 @@ export const cssProperties = Array.from(new Set([
 const components = [
     ...[
         "button",
+        "circle-button",
         "mini-button",
         "menu",
         "menu-trigger",

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,8 +3,9 @@ let warnedDeprecatedMargin = false;
 </script>
 
 <script lang="ts">import { BROWSER, DEV } from "esm-env";
-import { injectVars } from "../util";
-const { children, primary, secondary, marginTop, marginBottom, ...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;
@@ -17,9 +18,12 @@ $effect(() => {
    --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",
@@ -30,15 +34,17 @@ const cssKeys = [
     "marginTop",
     "marginBottom",
 ];
-const style = $derived(injectVars({ ...restProps, marginTop, marginBottom }, "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>
 

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;