contain-css-svelte 1.1.20 → 1.2.1

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 circle-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, "circle-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>
@@ -125,31 +132,37 @@ button.primary {
 }
 
 button {
-  font-family: var(--mini-button-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, unset)))));
-  text-transform: var(--mini-button-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, unset)))));
-  text-decoration: var(--mini-button-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, unset)))));
-  --_font-size: var(--mini-button-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, unset)))));
+  /* `circle-button` first, `mini-button` behind it. This component was
+     called MiniButton until it was renamed to stop people putting text in a
+     circle; its variables kept the old prefix. Every include and every
+     var() below names both, so `--circle-button-bg` is the name to reach
+     for while an existing `--mini-button-bg` -- in a theme, or in an app
+     that set one years ago -- keeps working untouched. */
+  font-family: var(--circle-button-font-family, var(--mini-button-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, unset))))));
+  text-transform: var(--circle-button-text-transform, var(--mini-button-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, unset))))));
+  text-decoration: var(--circle-button-text-decoration, var(--mini-button-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, unset))))));
+  --_font-size: var(--circle-button-font-size, var(--mini-button-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, unset))))));
   font-size: var(--_font-size);
-  font-weight: var(--mini-button-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, unset)))));
-  line-height: var(--mini-button-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, unset)))));
-  letter-spacing: var(--mini-button-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset)))));
-  --_margin-top: var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
-  --_margin-top: var(--mini-button-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, unset)))));
+  font-weight: var(--circle-button-font-weight, var(--mini-button-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, unset))))));
+  line-height: var(--circle-button-line-height, var(--mini-button-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, unset))))));
+  letter-spacing: var(--circle-button-letter-spacing, var(--mini-button-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset))))));
+  --_margin-top: var(--circle-button-margin, var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset))))));
+  --_margin-top: var(--circle-button-margin-top, var(--mini-button-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, unset))))));
   margin-top: var(--_margin-top);
-  --_margin-bottom: var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
-  --_margin-bottom: var(--mini-button-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset)))));
+  --_margin-bottom: var(--circle-button-margin, var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset))))));
+  --_margin-bottom: var(--circle-button-margin-bottom, var(--mini-button-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset))))));
   margin-bottom: var(--_margin-bottom);
-  text-indent: var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
-  font-variant: var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
-  text-align: var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
-  --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
-  --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
-  --_bg-mix-color: var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
-  --_bg-mix-amount: var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
-  --_fg-mix-color: var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
-  --_fg-mix-amount: var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
-  --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  text-indent: var(--circle-button-indent, var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset))))));
+  font-variant: var(--circle-button-font-variant, var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset))))));
+  text-align: var(--circle-button-text-align, var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset))))));
+  --link-bg: var(--circle-button-link-bg, var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--circle-button-link-fg, var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)))));
+  --_bg-mix-color: var(--circle-button-bg-mix-color, var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))))));
+  --_bg-mix-amount: var(--circle-button-bg-mix-amount, var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))))));
+  --_fg-mix-color: var(--circle-button-fg-mix-color, var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))))));
+  --_fg-mix-amount: var(--circle-button-fg-mix-amount, var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))))));
+  --_bg-base: var(--circle-button-bg, var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))))));
+  --_fg-base: var(--circle-button-fg, var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))))));
   --_background-color: color-mix(
     in srgb,
     var(--_bg-base),
@@ -226,35 +239,35 @@ button {
   );
   background-color: var(--_background-color);
   color: var(--_color);
-  cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  cursor: var(--circle-button-cursor, var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)))));
+  transition: filter var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), background-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), border-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), box-shadow var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), transform var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))));
 }
 
 button:hover {
-  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
-  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
+  filter: var(--circle-button-hover-filter, var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))))));
+  transform: var(--circle-button-hover-transform, var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)))));
   background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
-  box-shadow: var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--circle-button-hover-box-shadow, var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:active {
-  filter: var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
-  transform: var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none))));
+  filter: var(--circle-button-active-filter, var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))))));
+  transform: var(--circle-button-active-transform, var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)))));
   background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
-  box-shadow: var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--circle-button-active-box-shadow, var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:disabled {
-  cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
-  transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
-  filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+  cursor: var(--circle-button-disabled-cursor, var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)))));
+  transform: var(--circle-button-disabled-transform, var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)))));
+  filter: var(--circle-button-disabled-filter, var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))))));
   background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--circle-button-disabled-box-shadow, var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
 }
 
 button {
   --_box-shadow:
-    var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space))))) var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space))))) var(--mini-button-shadow-blur, var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space))))) var(--mini-button-shadow-color, var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4)))));
+    var(--circle-button-shadow-distance, var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))))) var(--circle-button-shadow-distance, var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))))) var(--circle-button-shadow-blur, var(--mini-button-shadow-blur, var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))))) var(--circle-button-shadow-color, var(--mini-button-shadow-color, var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))))));
   box-shadow: var(--_box-shadow);
 }
 
@@ -266,13 +279,19 @@ button:focus-visible {
 
 button {
   margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
-  width: var(--mini-button-size, var(--icon-size, 1em));
-  height: var(--mini-button-size, var(--icon-size, 1em));
+  width: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
+  height: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
   /* Make sure we don't shrink in a flex container */
-  min-width: var(--mini-button-size, var(--icon-size, 1em));
-  min-height: var(--mini-button-size, var(--icon-size, 1em));
-  border-radius: var(--mini-button-radius, 50%);
-  border: var(--mini-button-border, button-border, none);
+  min-width: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
+  min-height: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
+  border-radius: var(--circle-button-radius, var(--mini-button-radius, 50%));
+  /* var-with-fallbacks, not var: this was
+     `var(--mini-button-border, button-border, none)`, which reads as
+     `--mini-button-border` with the fallback "button-border, none". That is
+     not a valid border, so `--button-border` was never consulted and an
+     unset chain produced `none` only by accident (invalid at
+     computed-value time -> the initial `medium none`). */
+  border: var(--circle-button-border, var(--mini-button-border, var(--button-border, var(--border, none))));
   display: inline-grid;
   place-content: center;
   line-height: 1;

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}>