contain-css-svelte 1.1.20 → 1.2.0

package/dist/Card.svelte

@@ -1,8 +1,17 @@
-<script lang="ts">import { injectVars } from "./util";
-let { header, footer, children, height, fixedHeight, center, ...restProps } = $props();
-const cssVars = $derived(injectVars({ height, ...restProps }, "card", [
-    "bg",
-    "fg",
+<script lang="ts">import { elementProps } from "./util";
+import { COLOR_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "./styleProps";
+let { header, footer, children, height, fixedHeight, center, class: className, ...restProps } = $props();
+/* `height` is destructured (the $effect below reads it), so it has to be
+   handed back explicitly -- rest props no longer carry it. */
+/* The shorthands card'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 CARD_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const el = $derived(elementProps({ height, ...restProps }, "card", [
+    ...CARD_VARS,
     "padding",
     "width",
     "height",
@@ -19,7 +28,7 @@ let hasHeader = $derived(Boolean(header));
 let hasFooter = $derived(Boolean(footer));
 </script>
 
-<div class="card" class:center class:fixedHeight style={cssVars}>
+<div class={["card", className]} class:center class:fixedHeight {...el}>
   <header class:hide={!hasHeader}>
     {#if header}{@render header()}{/if}
   </header>

package/dist/Card.svelte.d.ts

@@ -1,14 +1,13 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { CardStyleProps } from "./types";
-type Props = {
+import type { CardStyleProps, ContainProps } from "./types";
+import { type StyleProps } from "./styleProps";
+declare const Card: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     header?: Snippet;
     footer?: Snippet;
     children?: Snippet;
     center?: boolean;
-    height?: string;
     fixedHeight?: boolean;
-} & CardStyleProps & HTMLAttributes<HTMLElement>;
-declare const Card: import("svelte").Component<Props, {}, "">;
+}, CardStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/controls/Button.svelte

@@ -1,10 +1,24 @@
-<script lang="ts">import { injectVars } from "../util";
-let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, icon, children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "button", ["bg", "fg", "padding", "width", "height"]));
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, icon, children, class: className, ...restProps } = $props();
+/* The shorthands button'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 BUTTON_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "button", [
+    ...BUTTON_VARS,
+    "width",
+    "height",
+]));
 </script>
 
 <button
-  {style}
+  class={className}
   class:primary
   class:secondary
   class:warning
@@ -12,7 +26,7 @@ const style = $derived(injectVars(restProps, "button", ["bg", "fg", "padding", "
   class:success
   class:info
   class:has-icon={icon}
-  {...restProps}
+  {...el}
 >
   <span class="content">{@render children?.()}</span>
   {#if icon}

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Button: import("svelte").Component<ContainProps<HTMLButtonAttributes, {
     primary?: boolean;
     secondary?: boolean;
     warning?: boolean;
@@ -10,7 +11,6 @@ type Props = {
     info?: boolean;
     icon?: Snippet;
     children?: Snippet;
-} & BaseStyleProps & HTMLButtonAttributes;
-declare const Button: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/controls/ButtonLink.svelte

@@ -1,25 +1,28 @@
-<script lang="ts">import { injectVars } from "../util";
-let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, href = "#", id = null, icon, children, ...restProps } = $props();
-const inlineStyle = $derived(restProps.style);
-const elementProps = $derived.by(() => {
-    const { style: _, ...rest } = restProps;
-    return rest;
-});
-const style = $derived(`${injectVars(elementProps, "button", [
-    "bg",
-    "fg",
-    "padding",
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, href = "#", id = null, icon, children, class: className, ...restProps } = $props();
+/* The shorthands button'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 BUTTON_LINK_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "button", [
+    ...BUTTON_LINK_VARS,
     "width",
     "height",
-])}${inlineStyle ?? ""}`);
+]));
 const iconSlotted = $derived(Boolean(icon));
 </script>
 
 <a
   role="button"
-  {style}
   {href}
   id={id ?? undefined}
+  class={className}
   class:primary
   class:secondary
   class:warning
@@ -27,7 +30,7 @@ const iconSlotted = $derived(Boolean(icon));
   class:success
   class:info
   class:has-icon={iconSlotted}
-  {...elementProps}
+  {...el}
 >
   <span class="content">{@render children?.()}</span>
   <span class:hidden={!iconSlotted} class="icon">

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAnchorAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const ButtonLink: import("svelte").Component<ContainProps<HTMLAnchorAttributes, {
     primary?: boolean;
     secondary?: boolean;
     warning?: boolean;
@@ -12,7 +13,6 @@ type Props = {
     id?: string | null;
     icon?: Snippet;
     children?: Snippet;
-} & BaseStyleProps & HTMLAnchorAttributes;
-declare const ButtonLink: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type ButtonLink = ReturnType<typeof ButtonLink>;
 export default ButtonLink;

package/dist/controls/Checkbox.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
-let { checked = $bindable(undefined), name = "", value = undefined, group = $bindable(undefined), children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "checkbox", [
-    "bg",
-    "fg",
+<script lang="ts">import { splitProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { checked = $bindable(undefined), name = "", value = undefined, group = $bindable(undefined), children, class: className, ...restProps } = $props();
+/* The shorthands checkbox'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 CHECKBOX_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(splitProps(restProps, "checkbox", [
+    ...CHECKBOX_VARS,
     "padding",
     "width",
     "height",
@@ -29,7 +36,7 @@ function handleGroupChange(event) {
 let ref = $state(null);
 </script>
 
-<div class="label-sizing-box" {style}>
+<div class={["label-sizing-box", className]} style={el.style}>
   <label class="checkbox-item">
     {#if useGroup}
       <input
@@ -38,14 +45,14 @@ let ref = $state(null);
         {value}
         checked={isChecked}
         onchange={handleGroupChange}
-        {...restProps}
+        {...el.attrs}
       />
     {:else}
       <input
         name={name || (ref && ref.textContent) || undefined}
         type="checkbox"
         bind:checked
-        {...restProps}
+        {...el.attrs}
       />
     {/if}
     <span bind:this={ref}>{@render children?.()}</span>

package/dist/controls/Checkbox.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 Checkbox: import("svelte").Component<ContainProps<HTMLInputAttributes, {
     checked?: boolean | undefined;
     name?: string;
     value?: any;
     group?: any[];
     children?: Snippet;
-} & BaseStyleProps & Omit<HTMLInputAttributes, "value">;
-declare const Checkbox: import("svelte").Component<Props, {}, "group" | "checked">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>, "type" | "value">, {}, "checked" | "group">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/controls/CircleButton.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
-let { primary = false, warning = false, danger = false, success = false, info = false, type = "button", children, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "mini-button", [
-    "bg",
-    "fg",
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { primary = false, warning = false, danger = false, success = false, info = false, type = "button", children, class: className, ...restProps } = $props();
+/* The shorthands mini-button'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 CIRCLE_BUTTON_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "mini-button", [
+    ...CIRCLE_BUTTON_VARS,
     "padding",
     "width",
     "height",
@@ -10,14 +17,14 @@ const style = $derived(injectVars(restProps, "mini-button", [
 </script>
 
 <button
-  {style}
   {type}
+  class={className}
   class:primary
   class:warning
   class:danger
   class:success
   class:info
-  {...restProps}
+  {...el}
 >
   {@render children?.()}
 </button>

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

@@ -1,6 +1,7 @@
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { BaseStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const CircleButton: import("svelte").Component<ContainProps<HTMLButtonAttributes, {
     primary?: boolean;
     warning?: boolean;
     danger?: boolean;
@@ -8,7 +9,6 @@ type Props = {
     info?: boolean;
     type?: "button" | "submit" | "reset";
     children?: import("svelte").Snippet;
-} & BaseStyleProps & HTMLButtonAttributes;
-declare const CircleButton: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type CircleButton = ReturnType<typeof CircleButton>;
 export default CircleButton;

package/dist/controls/Input.svelte

@@ -1,8 +1,19 @@
-<script lang="ts">let { value = $bindable(""), placeholder = "", ...restProps } = $props();
-export {};
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { value = $bindable(""), placeholder = "", 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 INPUT_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "input", INPUT_VARS));
 </script>
 
-<input bind:value {placeholder} {...restProps} />
+<input bind:value {placeholder} class={className} {...el} />
 
 <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

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

@@ -1,8 +1,9 @@
 import type { HTMLInputAttributes } from "svelte/elements";
-type Props = {
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Input: import("svelte").Component<ContainProps<HTMLInputAttributes, {
     value?: string | number;
     placeholder?: string;
-} & HTMLInputAttributes;
-declare const Input: import("svelte").Component<Props, {}, "value">;
+}, StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/controls/Option.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">let { children, value, ...restProps } = $props();
+<script lang="ts">import { elementProps } from "../util";
+let { children, value, class: className, ...restProps } = $props();
+const el = $derived(elementProps(restProps, "option"));
 let template = $state();
 // Extracted from the rendered children, in the DOM.
 let textContent = $state("");
@@ -31,10 +33,9 @@ $effect(() => {
     });
     return () => observer.disconnect();
 });
-export {};
 </script>
 
-<option data-html={htmlContent} {value} {...restProps}>
+<option data-html={htmlContent} {value} class={className} {...el}>
   {@html textContent}
 </option>
 

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

@@ -1,8 +1,9 @@
 import type { HTMLOptionAttributes } from "svelte/elements";
-type Props = {
+import type { ContainProps } from "../types";
+type Props = ContainProps<HTMLOptionAttributes, {
     children?: import("svelte").Snippet;
     value?: any;
-} & Omit<HTMLOptionAttributes, "value">;
+}, {}, "value">;
 declare const Option: import("svelte").Component<Props, {}, "">;
 type Option = ReturnType<typeof Option>;
 export default Option;

package/dist/controls/RadioButton.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
-let { group = $bindable(undefined), value = undefined, children, ...restProps } = $props();
-let style = $derived(injectVars(restProps, "radio-button", [
-    "bg",
-    "fg",
+<script lang="ts">import { splitProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { group = $bindable(undefined), value = undefined, children, class: className, ...restProps } = $props();
+/* The shorthands radio-button'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 RADIO_BUTTON_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(splitProps(restProps, "radio-button", [
+    ...RADIO_BUTTON_VARS,
     "padding",
     "width",
     "height",
@@ -15,14 +22,14 @@ function handleChange() {
 }
 </script>
 
-<div class="label-sizing-box" {style}>
+<div class={["label-sizing-box", className]} style={el.style}>
   <label class="radio-item">
     <input
       {value}
       type="radio"
       checked={isChecked}
       onchange={handleChange}
-      {...restProps}
+      {...el.attrs}
     />
     <span>{@render children?.()}</span>
   </label>

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

@@ -1,11 +1,11 @@
 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 RadioButton: import("svelte").Component<ContainProps<HTMLInputAttributes, {
     group?: any;
     value?: any;
     children?: Snippet;
-} & BaseStyleProps & Omit<HTMLInputAttributes, "value">;
-declare const RadioButton: import("svelte").Component<Props, {}, "group">;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>, "type" | "value">, {}, "group">;
 type RadioButton = ReturnType<typeof RadioButton>;
 export default RadioButton;

package/dist/controls/Select.svelte

@@ -1,6 +1,18 @@
-<script lang="ts">import DropdownMenu from "../dropdowns/DropdownMenu.svelte";
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+import DropdownMenu from "../dropdowns/DropdownMenu.svelte";
 import { onMount, tick } from "svelte";
-let { value = $bindable(), children, "data-audit-action": dropdownAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", ...restProps } = $props();
+let { value = $bindable(), children, "data-audit-action": dropdownAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", 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 SELECT_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "select", SELECT_VARS));
 let selectElement = $state();
 let observer;
 let resizeObserver;
@@ -91,7 +103,7 @@ $effect(() => {
 });
 </script>
 
-<select bind:value bind:this={selectElement} {...restProps}>
+<select bind:value bind:this={selectElement} class={className} {...el}>
   {@render children?.()}
 </select>
 <div class="dropdown-wrapper" style:--target-width={targetWidth}>

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>