contain-css-svelte 1.1.19 → 1.2.0

package/dist/misc/Tag.svelte

@@ -1,32 +1,33 @@
-<script lang="ts">import { injectVars } from "../util";
-let { children, primary, warning, danger, success, info, onclose = null, ...restProps } = $props();
-let style = $derived(injectVars(restProps, "tag", [
-    "bg",
-    "fg",
-    "padding",
-    "borderRadius",
-    "fontSize",
-]));
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { children, primary, warning, danger, success, info, onclose = null, closeLabel = "Remove", class: className, ...restProps } = $props();
+/* The shorthands tag'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 TAG_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "tag", TAG_VARS));
 </script>
 
 <span
-  {style}
-  class="tag"
+  class={["tag", className]}
   class:closable={!!onclose}
-  {...restProps}
   class:primary
   class:warning
   class:danger
   class:success
   class:info
+  {...el}
 >
-  {@render children?.()}
-  {#if onclose}
-    &nbsp;
-    <button class="close-button" aria-label="Close tag" onclick={onclose}>
-      &times;
-    </button>
-  {/if}
+  {@render children?.()}{#if onclose}<button
+      class="close-button"
+      aria-label={closeLabel}
+      onclick={onclose}><span aria-hidden="true">&times;</span></button
+    >{/if}
 </span>
 
 <style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
@@ -161,48 +162,100 @@ let style = $derived(injectVars(restProps, "tag", [
   margin-inline-end: var(--space);
 }
 
+/* A closable tag lays its label and button out in flow rather than absolutely
+   positioning the button over the top-right corner. The old approach needed a
+   literal &nbsp; in the markup to stop the button covering the last character,
+   which still overlapped once a tag wrapped to two lines and put the button's
+   hit area outside the padding. As a flex item the button reserves its own
+   space at any length, and the gap scales with the tag's font-size. */
 .tag.closable {
-  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-close-button-gap, 0.35em);
 }
 
-.tag button {
+.tag .close-button {
   background: transparent;
   color: inherit;
   box-shadow: none;
   border: none;
-  position: absolute;
-  top: 0;
-  right: 0;
+  padding: 0;
+  margin: 0;
+  /* Square, so the focus ring and pointer target read as a button rather
+     than tracking the width of the glyph. */
+  inline-size: var(--tag-close-button-size, 1.25em);
+  block-size: var(--tag-close-button-size, 1.25em);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tag-close-button-border-radius, 50%);
+  font-size: inherit;
+  line-height: 1;
+  flex: none;
   cursor: var(--tag-close-button-cursor, var(--button-cursor, var(--cursor, pointer)));
   transition: filter var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), background-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), border-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), box-shadow var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), transform var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms)));
 }
 
-.tag button:hover {
-  filter: var(--tag-close-button-hover-filter, var(--button-hover-filter, var(--hover-filter, brightness(1.05))));
-  transform: var(--tag-close-button-hover-transform, var(--button-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(--tag-close-button-hover-box-shadow, var(--button-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
+/* The affordance is a scrim mixed from the tag's own FOREGROUND, not from
+   `clickable()`'s fill.
+
+   clickable() derives its hover fill from --_background-color, which this
+   button inherits from the tag. On a red tag that produced 90% red + 10%
+   white -- a muddy circle a shade off the tag it sits on, reading as a
+   rendering artifact rather than a control. Mixing from currentColor
+   instead inverts correctly against any tag colour: a light scrim on a
+   saturated tag, a dark one on the default pale tag, with no per-variant
+   rules. */
+.tag .close-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: transparent;
+  transition: background-color var(--tag-close-button-transition, var(--transition, 150ms));
+}
+
+.tag .close-button:hover::before {
+  background-color: var(--tag-close-button-hover-bg, color-mix(in oklab, transparent, currentColor 18%));
+}
+
+.tag .close-button:active::before {
+  background-color: var(--tag-close-button-active-bg, color-mix(in oklab, transparent, currentColor 30%));
 }
 
-.tag button:active {
-  filter: var(--tag-close-button-active-filter, var(--button-active-filter, var(--active-filter, brightness(0.9))));
-  transform: var(--tag-close-button-active-transform, var(--button-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(--tag-close-button-active-box-shadow, var(--button-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
+/* WCAG 2.5.8 wants a 24x24 CSS px target. The glyph is sized in `em` so it
+   stays proportional to a tag that is deliberately tiny (0.75rem), which
+   left a 15x15 target. This expands the POINTER target without changing
+   the visual size or the tag's height. */
+.tag .close-button::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  inline-size: max(100%, var(--tag-close-button-target-size, 24px));
+  block-size: max(100%, var(--tag-close-button-target-size, 24px));
 }
 
-.tag button:disabled {
-  cursor: var(--tag-close-button-disabled-cursor, var(--button-disabled-cursor, var(--disabled-cursor, not-allowed)));
-  transform: var(--tag-close-button-disabled-transform, var(--button-disabled-transform, var(--disabled-transform, none)));
-  filter: var(--tag-close-button-disabled-filter, var(--button-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(--tag-close-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))));
+/* focus-ring()'s 3px spread shadow plus its 2px offset is sized for a button
+   standing on a page; on a 15px control inside a 26px tag it ballooned well
+   outside the tag.
+
+   The room available is exactly the tag's padding-block (0.2em, ~2.4px at
+   the default tag font-size) -- the button is as tall as the tag's line box,
+   so there is nothing else to grow into. Hence a 2px ring at no offset: it
+   reads clearly, hugs the circle, and clears the tag's edge. The scrim stays
+   lit under focus so keyboard focus reads the same as pointer hover (the
+   `focusable-as-hover` idea, with this component's own fill). */
+.tag .close-button:focus-visible {
+  outline: var(--tag-close-button-focus-color, var(--focus-color, currentColor)) solid var(--tag-close-button-focus-width, 2px);
+  outline-offset: var(--tag-close-button-focus-offset, 0px);
+  box-shadow: none;
 }
 
-.tag button:focus-visible {
-  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
-  outline-offset: var(--focus-outline-offset, 2px);
-  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+.tag .close-button:focus-visible::before {
+  background-color: var(--tag-close-button-hover-bg, color-mix(in oklab, transparent, currentColor 18%));
 }
 
 .tag:first-child {

package/dist/misc/Tag.svelte.d.ts

@@ -1,14 +1,26 @@
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { TagStyleProps } from "../types";
-type Props = {
-    children?: import("svelte").Snippet;
+import type { ContainProps, TagStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Tag: import("svelte").Component<ContainProps<HTMLAttributes<HTMLSpanElement>, {
+    children?: Snippet;
     primary?: boolean;
     warning?: boolean;
     danger?: boolean;
     success?: boolean;
     info?: boolean;
     onclose?: (() => void) | null;
-} & TagStyleProps & HTMLAttributes<HTMLSpanElement>;
-declare const Tag: import("svelte").Component<Props, {}, "">;
+    /**
+     * Accessible name for the close button.
+     *
+     * The default describes the *widget* ("close a tag"), which is rarely
+     * what the action means to a user. A tag is a filter chip in one app and
+     * a removable label in another, so say what pressing it does here:
+     * `closeLabel="Remove Fiction"`, `closeLabel="Stop searching by author"`.
+     * Including the tag's own text is what makes a list of close buttons
+     * distinguishable to a screen reader.
+     */
+    closeLabel?: string;
+}, TagStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type Tag = ReturnType<typeof Tag>;
 export default Tag;

package/dist/overlays/Dialog.svelte

@@ -1,8 +1,21 @@
 <script lang="ts">import CircleButton from "../controls/CircleButton.svelte";
-import { copyCSSVariables, injectVars } from "../util";
-let { open = true, modal = true, dismissible = false, children, onClose, onclose: oncloseProp = null, ...restProps } = $props();
+import { copyCSSVariables, splitProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+let { open = true, modal = true, dismissible = false, children, onClose, onclose: oncloseProp = null, class: className, ...restProps } = $props();
 let onclose = $derived(oncloseProp || onClose);
-const style = $derived(injectVars(restProps, "dialog", []));
+/* The <section> is the variable carrier that copyCSSVariables reads through,
+   so it takes the style while the <dialog> takes the attributes -- a
+   caller's `aria-*` and `data-*` belong on the dialog itself. */
+/* 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 DIALOG_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const el = $derived(splitProps(restProps, "dialog", DIALOG_VARS));
 // Handle backdrop click to close modal (click outside behavior)
 // Clicks on the dialog element itself (the backdrop) close the dialog
 function handleBackdropClick(event) {
@@ -52,9 +65,9 @@ let dialogElement;
 let ref;
 </script>
 
-<section {style}>
+<section style={el.style}>
   <div class="variable-placeholder" bind:this={ref}></div>
-  <dialog bind:this={dialogElement} {onclose} {...restProps}>
+  <dialog bind:this={dialogElement} {onclose} class={className} {...el.attrs}>
     <div class="close-bar">
       <div class="close-button">
         <CircleButton onclick={onclose}>&times;</CircleButton>

package/dist/overlays/Dialog.svelte.d.ts

@@ -1,12 +1,14 @@
+import { type StyleProps } from "../styleProps";
 import type { Snippet } from "svelte";
-type PropsType = {
+import type { HTMLDialogAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+declare const Dialog: import("svelte").Component<ContainProps<HTMLDialogAttributes, {
     open?: boolean;
     modal?: boolean;
     dismissible?: boolean;
     children?: Snippet;
     onclose?: (() => void) | null;
     onClose?: (() => void) | null;
-} & Record<string, unknown>;
-declare const Dialog: import("svelte").Component<PropsType, {}, "">;
+}, StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/overlays/Tooltip.svelte

@@ -1,8 +1,24 @@
 <script lang="ts">import { onDestroy, tick } from "svelte";
+import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
 let tooltipDiv = $state();
 let targetDiv = $state();
 let tooltipMeasurementDiv = $state();
-let { tooltipText = "", vertical = "bottom", horizontal = "right", children, tooltip, block = false, } = $props();
+let { tooltipText = "", vertical = "bottom", horizontal = "right", children, tooltip, block = false, class: className, ...restProps } = $props();
+/* The wrapper is the element a caller is pointing at -- the tooltip itself
+   is a popover the component owns and positions. */
+/* 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 TOOLTIP_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+/* The variables land on the wrapper and reach the popover by inheritance:
+   the tooltip is a descendant of it, and custom properties inherit. */
+const el = $derived(elementProps(restProps, "tooltip", TOOLTIP_VARS));
 // svelte-ignore state_referenced_locally
 let renderedVertical = $state(vertical);
 // svelte-ignore state_referenced_locally
@@ -206,11 +222,12 @@ async function showPopover() {
 {#if block}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="tooltip-wrapper"
+    class={["tooltip-wrapper", className]}
     onmouseenter={() => showPopover()}
     onmouseleave={() => hidePopover()}
     onfocusin={() => showPopover()}
     onfocusout={() => hidePopover()}
+    {...el}
   >
     <div class="tooltip-target" bind:this={targetDiv}>
       {@render children?.()}
@@ -241,11 +258,12 @@ async function showPopover() {
 {:else}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <span
-    class="tooltip-wrapper"
+    class={["tooltip-wrapper", className]}
     onmouseenter={() => showPopover()}
     onmouseleave={() => hidePopover()}
     onfocusin={() => showPopover()}
     onfocusout={() => hidePopover()}
+    {...el}
   >
     <span class="tooltip-target" bind:this={targetDiv}>
       {@render children?.()}

package/dist/overlays/Tooltip.svelte.d.ts

@@ -1,11 +1,13 @@
-interface Props {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Tooltip: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     tooltipText?: string;
     vertical?: string;
     horizontal?: string;
     children?: import("svelte").Snippet;
     tooltip?: import("svelte").Snippet;
     block?: boolean;
-}
-declare const Tooltip: import("svelte").Component<Props, {}, "">;
+}, StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/styleProps.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The style-prop shorthands, grouped to mirror the SCSS mixins that make them
+ * readable.
+ *
+ * The problem this solves: which shorthands a component accepted used to be a
+ * hand-maintained list in each component, drifting from the mixins its CSS
+ * actually included. Tag exposed `fontSize` while the other 23 components
+ * whose CSS includes a typography mixin exposed none of it -- `--button-font-
+ * weight` resolved perfectly well, there was just no prop for it. In the other
+ * direction, FormItem injected three variables no stylesheet read at all.
+ *
+ * So each group below names one mixin, and a component's prop list is the
+ * union of the groups for the mixins its own CSS includes. "Which shorthands
+ * does this component take" stops being a decision and becomes a consequence.
+ *
+ * The prop types are derived from these same arrays via `StyleProps<>`, so the
+ * type and the runtime list cannot disagree -- adding a name to the array is
+ * what adds the prop.
+ *
+ * A shorthand is only safe when the element the component renders has no HTML
+ * attribute of that name: `ContainProps` resolves the clash by dropping the
+ * attribute, which is right for a deprecated or meaningless one and wrong for
+ * `<progress max>` or `<option label>`. That is why the size group is applied
+ * per component rather than being folded into the others, and why Progress's
+ * accessible-name prop is `progressLabel`.
+ */
+/** Every style prop takes a CSS value, or null/undefined to leave it unset. */
+export type StyleProps<T extends readonly string[]> = {
+    [K in T[number]]?: string | null;
+};
+/** `@include color-props(<prefix>, ...)` */
+export declare const COLOR_VARS: readonly ["bg", "fg"];
+/** `@include padding-props(...)`, and the box-props family that includes it */
+export declare const PADDING_VARS: readonly ["padding"];
+/** The border-radius the box-props family sets alongside padding */
+export declare const RADIUS_VARS: readonly ["borderRadius"];
+/** `@include margin-props(<prefix>, ...)` */
+export declare const MARGIN_VARS: readonly ["marginBlock", "marginInline"];
+/** `@include gap-props(<prefix>, ...)` */
+export declare const GAP_VARS: readonly ["gap"];
+/**
+ * `@include typography-props(...)` and its `-bare` / `-bold` variants.
+ *
+ * `fontSize` was the only one of these ever exposed as a prop, and only on
+ * Tag. The rest resolved in CSS the whole time.
+ */
+export declare const TYPOGRAPHY_VARS: readonly ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"];
+/**
+ * `@include typography-container-props(...)`, which is typography-props plus
+ * the readable measure it imposes on prose children.
+ */
+export declare const TYPOGRAPHY_CONTAINER_VARS: readonly ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"];
+/**
+ * `@include box-size-props(<prefix>, ...)`.
+ *
+ * Deliberately NOT part of any other group: `width` and `height` are real HTML
+ * attributes on `<input>`, `<img>`, `<canvas>` and `<iframe>`, so a component
+ * rendering one of those must not shadow them. Applied per component.
+ */
+export declare const SIZE_VARS: readonly ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"];
+export type ColorStyleProps = StyleProps<typeof COLOR_VARS>;
+export type PaddingStyleProps = StyleProps<typeof PADDING_VARS>;
+export type RadiusStyleProps = StyleProps<typeof RADIUS_VARS>;
+export type GapStyleProps = StyleProps<typeof GAP_VARS>;
+export type TypographyStyleProps = StyleProps<typeof TYPOGRAPHY_VARS>;
+export type TypographyContainerStyleProps = StyleProps<typeof TYPOGRAPHY_CONTAINER_VARS>;
+export type SizeStyleProps = StyleProps<typeof SIZE_VARS>;

package/dist/styleProps.js

@@ -0,0 +1,76 @@
+/**
+ * The style-prop shorthands, grouped to mirror the SCSS mixins that make them
+ * readable.
+ *
+ * The problem this solves: which shorthands a component accepted used to be a
+ * hand-maintained list in each component, drifting from the mixins its CSS
+ * actually included. Tag exposed `fontSize` while the other 23 components
+ * whose CSS includes a typography mixin exposed none of it -- `--button-font-
+ * weight` resolved perfectly well, there was just no prop for it. In the other
+ * direction, FormItem injected three variables no stylesheet read at all.
+ *
+ * So each group below names one mixin, and a component's prop list is the
+ * union of the groups for the mixins its own CSS includes. "Which shorthands
+ * does this component take" stops being a decision and becomes a consequence.
+ *
+ * The prop types are derived from these same arrays via `StyleProps<>`, so the
+ * type and the runtime list cannot disagree -- adding a name to the array is
+ * what adds the prop.
+ *
+ * A shorthand is only safe when the element the component renders has no HTML
+ * attribute of that name: `ContainProps` resolves the clash by dropping the
+ * attribute, which is right for a deprecated or meaningless one and wrong for
+ * `<progress max>` or `<option label>`. That is why the size group is applied
+ * per component rather than being folded into the others, and why Progress's
+ * accessible-name prop is `progressLabel`.
+ */
+/** `@include color-props(<prefix>, ...)` */
+export const COLOR_VARS = ["bg", "fg"];
+/** `@include padding-props(...)`, and the box-props family that includes it */
+export const PADDING_VARS = ["padding"];
+/** The border-radius the box-props family sets alongside padding */
+export const RADIUS_VARS = ["borderRadius"];
+/** `@include margin-props(<prefix>, ...)` */
+export const MARGIN_VARS = ["marginBlock", "marginInline"];
+/** `@include gap-props(<prefix>, ...)` */
+export const GAP_VARS = ["gap"];
+/**
+ * `@include typography-props(...)` and its `-bare` / `-bold` variants.
+ *
+ * `fontSize` was the only one of these ever exposed as a prop, and only on
+ * Tag. The rest resolved in CSS the whole time.
+ */
+export const TYPOGRAPHY_VARS = [
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "lineHeight",
+    "letterSpacing",
+    "textAlign",
+    "textTransform",
+    "textDecoration",
+    "fontVariant",
+];
+/**
+ * `@include typography-container-props(...)`, which is typography-props plus
+ * the readable measure it imposes on prose children.
+ */
+export const TYPOGRAPHY_CONTAINER_VARS = [
+    ...TYPOGRAPHY_VARS,
+    "lineWidth",
+];
+/**
+ * `@include box-size-props(<prefix>, ...)`.
+ *
+ * Deliberately NOT part of any other group: `width` and `height` are real HTML
+ * attributes on `<input>`, `<img>`, `<canvas>` and `<iframe>`, so a component
+ * rendering one of those must not shadow them. Applied per component.
+ */
+export const SIZE_VARS = [
+    "width",
+    "minWidth",
+    "maxWidth",
+    "height",
+    "minHeight",
+    "maxHeight",
+];

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 /**
  * Common CSS variable props that can be passed to components.
- * These are converted to CSS custom properties via injectVars().
+ * These are converted to CSS custom properties via elementProps().
  */
 /** Base style props supported by most components */
 export interface BaseStyleProps {
@@ -88,3 +88,42 @@ export interface DropdownMenuStyleProps extends BaseStyleProps {
     triggerFg?: string | null;
     triggerPadding?: string | null;
 }
+/**
+ * Props that let a caller set CSS custom properties directly on a component.
+ *
+ * NOTE: writing `<Tag --tag-bg="red">` in a template does NOT go through this
+ * type -- Svelte intercepts `--*` attributes on components itself and renders
+ * `<svelte-css-wrapper style="display: contents; --tag-bg: red;">` around the
+ * component. This type covers the remaining path, an object spread
+ * (`<Tag {...{"--tag-bg": "red"}}>`), which Svelte cannot detect statically and
+ * therefore passes through as an ordinary prop.
+ */
+export type CssVarProps = {
+    [key: `--${string}`]: string | number | null | undefined;
+};
+/**
+ * The standard prop type for a Contain CSS component.
+ *
+ * Composes the three things every component's props are made of, and -- the
+ * reason this exists rather than a bare `&` chain -- removes the element
+ * attributes that the style props and the component's own props shadow.
+ * `width`, `height` and `align` are real HTML attributes, so intersecting
+ * `BaseStyleProps` with `HTMLInputAttributes` the old way produced
+ * `(string | null) & (string | number | undefined)` for `width`: a type neither
+ * side meant, which silently accepted and rejected the wrong values.
+ *
+ * @typeParam Attributes - the element's attribute type, e.g. `HTMLButtonAttributes`
+ * @typeParam Own - the component's own props (snippets, variant booleans, ...)
+ * @typeParam Style - the component's style props, e.g. `BaseStyleProps`
+ * @typeParam Owned - attributes the component controls and a caller must not
+ *   set, e.g. `"type"` on Slider's range input. Spreading rest props last means
+ *   a caller's value would otherwise win over the component's own.
+ *
+ * @example
+ * type Props = ContainProps<
+ *   HTMLButtonAttributes,
+ *   { primary?: boolean; children?: Snippet },
+ *   BaseStyleProps
+ * >;
+ */
+export type ContainProps<Attributes, Own = {}, Style = {}, Owned extends keyof Attributes | string = never> = Own & Style & Omit<Attributes, keyof Own | keyof Style | Owned> & CssVarProps;

package/dist/types.js

@@ -1,5 +1,5 @@
 /**
  * Common CSS variable props that can be passed to components.
- * These are converted to CSS custom properties via injectVars().
+ * These are converted to CSS custom properties via elementProps().
  */
 export {};

package/dist/typography/Text.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { injectVars } from "../util";
-let { children, primary = false, secondary = false, info = false, success = false, warning = false, danger = false, muted = false, bold = false, italic = false, color, amount, style: inlineStyle, ...restProps } = $props();
+<script lang="ts">import { elementProps } from "../util";
+let { children, primary = false, secondary = false, info = false, success = false, warning = false, danger = false, muted = false, bold = false, italic = false, color, amount, class: className, ...restProps } = $props();
 // Choose one tone deterministically; explicit color takes precedence.
 const tone = $derived(danger
     ? "danger"
@@ -30,17 +30,10 @@ const foreground = $derived.by(() => {
         return mixed;
     return `var(--${tone}-text-fg, ${mixed})`;
 });
-const elementProps = $derived(Object.fromEntries(Object.entries(restProps).filter(([key]) => !key.startsWith("--"))));
-const style = $derived(injectVars(restProps, "text", []) + (inlineStyle ?? ""));
+const el = $derived(elementProps(restProps, "text"));
 </script>
 
-<span
-  {...elementProps}
-  {style}
-  style:color={foreground}
-  class:bold
-  class:italic
->
+<span class={className} class:bold class:italic style:color={foreground} {...el}>
   {@render children?.()}
 </span>
 

package/dist/typography/TextLayout.svelte

@@ -1,12 +1,9 @@
-<script lang="ts">import { injectVars } from "../util";
-let { id = "", marginBlock = null, marginInline = null, children } = $props();
-const style = $derived(injectVars({ marginBlock, marginInline }, "text-layout", [
-    "marginBlock",
-    "marginInline",
-]));
+<script lang="ts">import { elementProps } from "../util";
+let { id = "", children, class: className, ...restProps } = $props();
+const el = $derived(elementProps(restProps, "text-layout", ["marginBlock", "marginInline"]));
 </script>
 
-<div {id} {style}>
+<div {id} class={className} {...el}>
   {@render children?.()}
 </div>
 

package/dist/typography/TextLayout.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { MarginStyleProps } from "../types";
-interface Props extends MarginStyleProps {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps, MarginStyleProps } from "../types";
+type Props = ContainProps<HTMLAttributes<HTMLDivElement>, {
     id?: string;
     children?: import("svelte").Snippet;
-}
+}, MarginStyleProps>;
 declare const TextLayout: import("svelte").Component<Props, {}, "">;
 type TextLayout = ReturnType<typeof TextLayout>;
 export default TextLayout;