contain-css-svelte 1.1.19 → 1.2.0

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

@@ -1,11 +1,19 @@
+import { type StyleProps } from "../styleProps";
 import type { Snippet } from "svelte";
-import type { SidebarStyleProps } from "../types";
+import type { ContainProps, SidebarStyleProps } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
-type Props = {
+declare const Sidebar: import("svelte").Component<ContainProps<HTMLAttributes<HTMLElement>, {
     left?: boolean;
     right?: boolean;
     children?: Snippet;
-} & SidebarStyleProps & HTMLAttributes<HTMLElement>;
-declare const Sidebar: import("svelte").Component<Props, {}, "">;
+    /**
+     * Accessible name for the button that opens the sidebar on narrow
+     * screens, and for the one that collapses it once open. What the sidebar
+     * holds is the useful thing to say -- `expandLabel="Show filters"` beats
+     * "Expand sidebar" for anyone who cannot see what it contains.
+     */
+    expandLabel?: string;
+    collapseLabel?: string;
+}, SidebarStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

package/dist/layout/SplitPane.svelte

@@ -1,15 +1,10 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { elementProps } from "../util";
 import { onMount } from "svelte";
-let { left, right, ...restProps } = $props();
-const style = $derived(injectVars(restProps, "split-pane", [
-    "bg",
-    "fg",
-    "border",
-    "height",
-    "leftWidth",
-    "rightWidth",
-]));
+let { left, right, resizerLabel = "Resize panes", class: className, ...restProps } = $props();
 let resizeStyle = $state("");
+/* resizeStyle is the live drag offset, so it goes in as extraVars -- after
+   the prop variables and before the caller's own `style`. */
+const el = $derived(elementProps(restProps, "split-pane", ["bg", "fg", "border", "height", "leftWidth", "rightWidth"], resizeStyle));
 let startWidthLeft = $state(0);
 let startWidthRight = $state(0);
 let startX = $state(0);
@@ -96,10 +91,9 @@ onMount(() => {
 </script>
 
 <div
-  class="split-pane"
-  style={style + resizeStyle}
+  class={["split-pane", className]}
   bind:this={splitPaneContainer}
-  {...restProps}
+  {...el}
 >
   <div class="left" bind:this={leftPane}>
     {@render left?.()}
@@ -113,7 +107,7 @@ onMount(() => {
     tabindex="0"
     role="separator"
     aria-orientation="vertical"
-    aria-label="Resize Pane"
+    aria-label={resizerLabel}
     onpointerdown={onMouseDown}
     onkeydown={onKeyUp}
   ></div>

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

@@ -1,9 +1,23 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type Props = {
+import type { ContainProps } from "../types";
+type Props = ContainProps<HTMLAttributes<HTMLElement>, {
     left?: Snippet;
     right?: Snippet;
-} & HTMLAttributes<HTMLElement> & Record<string, unknown>;
+    /**
+     * Accessible name for the drag handle between the panes. Name what the
+     * panes hold -- `resizerLabel="Resize the preview"` -- so it is clear
+     * what moving the handle does.
+     */
+    resizerLabel?: string;
+}, {
+    bg?: string | null;
+    fg?: string | null;
+    border?: string | null;
+    height?: string | null;
+    leftWidth?: string | null;
+    rightWidth?: string | null;
+}>;
 declare const SplitPane: import("svelte").Component<Props, {}, "">;
 type SplitPane = ReturnType<typeof SplitPane>;
 export default SplitPane;

package/dist/layout/Stack.svelte

@@ -1,32 +1,33 @@
-<script lang="ts">import { injectVars } from "../util";
-let { fill = false, stretch = false, split = false, center = false, justify = null, align = null, gap = null, children, ...restProps } = $props();
+<script lang="ts">import { elementProps } from "../util";
+import { MARGIN_VARS, PADDING_VARS, RADIUS_VARS, } from "../styleProps";
+let { fill = false, stretch = false, split = false, center = false, justify = null, align = null, gap = null, children, class: className, ...restProps } = $props();
 const resolvedAlign = $derived(align ?? (center ? "center" : null));
-const inlineStyle = $derived(restProps.style);
-const elementProps = $derived.by(() => {
-    const { style: _, ...rest } = restProps;
-    return rest;
-});
-const style = $derived(injectVars({ justify, align: resolvedAlign, gap, ...elementProps }, "stack", [
+/* The shorthands stack'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 STACK_VARS = [
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...MARGIN_VARS,
+];
+const el = $derived(elementProps({ justify, align: resolvedAlign, gap, ...restProps }, "stack", [
+    ...STACK_VARS,
     "bg",
     "fg",
-    "padding",
     "width",
     "height",
     "gap",
     "justify",
     "align",
-    "marginBlock",
-    "marginInline",
-]) + (inlineStyle ?? ""));
+]));
 </script>
 
 <div
-  class="stack"
+  class={["stack", className]}
   class:fill
   class:stretch
   class:split
-  {style}
-  {...elementProps}
+  {...el}
 >
   {@render children?.()}
 </div>

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { BaseStyleProps, MarginStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps, MarginStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Stack: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     fill?: boolean;
     stretch?: boolean;
     split?: boolean;
@@ -10,7 +11,6 @@ type Props = {
     align?: string | null;
     gap?: string | null;
     children?: Snippet;
-} & BaseStyleProps & MarginStyleProps & HTMLAttributes<HTMLDivElement>;
-declare const Stack: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & MarginStyleProps & StyleProps<readonly ["padding", "borderRadius", "marginBlock", "marginInline"]>>, {}, "">;
 type Stack = ReturnType<typeof Stack>;
 export default Stack;

package/dist/layout/TabBar.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">import Bar from "./Bar.svelte";
 import TabItem from "../controls/TabItem.svelte";
-let { sticky = false, active = $bindable(null), items = [], onchange, children, } = $props();
+import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { sticky = false, active = $bindable(null), items = [], onchange, children, class: className, ...restProps } = $props();
+/* The shorthands this component's own CSS backs, one group per mixin
+   it includes. The Props type is derived from this same array, so what
+   the component accepts and what it emits cannot drift apart. */
+const TAB_BAR_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "tab-bar", TAB_BAR_VARS));
 let lastActive = $state(active);
 </script>
 
-<div class="tabs" class:sticky>
+<div class={["tabs", className]} class:sticky {...el}>
   <Bar
     padding="0"
     --button-height="var(--tab-bar-height, 3em)"

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

@@ -1,14 +1,21 @@
-type Item = {
-    label: string;
-    value: string;
-};
-interface Props {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const TabBar: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     sticky?: boolean;
-    active?: string | Item | null;
-    items?: (string | Item)[];
-    onchange?: (value: string | Item | null) => void;
+    active?: string | {
+        label: string;
+        value: string;
+    } | null;
+    items?: (string | {
+        label: string;
+        value: string;
+    })[];
+    onchange?: (value: string | {
+        label: string;
+        value: string;
+    } | null) => void;
     children?: import("svelte").Snippet;
-}
-declare const TabBar: import("svelte").Component<Props, {}, "active">;
+}, StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "active">;
 type TabBar = ReturnType<typeof TabBar>;
 export default TabBar;

package/dist/layout/Table.svelte

@@ -1,4 +1,8 @@
-<script lang="ts">let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
+<script lang="ts">/* No attribute pass-through, deliberately: the sticky variant renders the
+   visible tables AND a visually-hidden clone of them used to measure column
+   widths. Spreading a caller's `id` would emit it twice, which is invalid.
+   Set attributes on the <table> markup you pass in as `thead`/`tbody`. */
+let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
 // svelte-ignore state_referenced_locally
 let columns = $state(column_widths || []);
 /* Code for syncing column widths for scrolling table solution */

package/dist/layout/Tile.svelte

@@ -1,4 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { splitProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, MARGIN_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+/* 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 TILE_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...MARGIN_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
 let { checked = $bindable(false), ...props } = $props();
 /* Props to CSS variables, the way Stack, Card, Tag and the rest do it, so a
    Tile can be aimed with `<Tile center>` rather than only a raw variable. */
@@ -16,43 +27,45 @@ const styleProps = $derived.by(() => {
         align: align ?? (center ? "center" : null),
     };
 });
-const style = $derived(injectVars(styleProps, "tile", [
-    "bg",
-    "fg",
-    "padding",
-    "width",
-    "height",
-    "justify",
-    "align",
-    "marginBlock",
-    "marginInline",
-]) + (props.style ?? ""));
-/** Everything that is ours rather than the element's. */
-function stripOwnProps(value) {
-    const { selectable: _selectable, interactive: _interactive, children: _children, justify: _justify, align: _align, center: _center, bg: _bg, fg: _fg, padding: _padding, width: _width, height: _height, marginBlock: _marginBlock, marginInline: _marginInline, style: _style, ...rest } = value;
-    return rest;
-}
-function getSelectableInputProps(value) {
-    return stripOwnProps(value);
-}
-function getInteractiveButtonProps(value) {
-    return stripOwnProps(value);
-}
+/* splitProps consumes the style props and `--*`, and keeps `style` out of
+   the attributes; the props that are Tile's own rather than the element's
+   are peeled off here first. In the selectable case the variables land on
+   the label that `.tile` styles while the attributes go to the checkbox,
+   which is what a caller's `aria-*` and `data-*` are describing. */
+const el = $derived.by(() => {
+    const { selectable: _selectable, interactive: _interactive, children: _children, center: _center, class: _class, ...rest } = props;
+    return splitProps({ ...rest, ...styleProps }, "tile", [
+        ...TILE_VARS,
+        "width",
+        "height",
+        "justify",
+        "align",
+    ]);
+});
+const className = $derived(props.class);
 </script>
 
 {#if props.selectable}
-  <label class="tile" {style}>
+  <label class={["tile", className]} style={el.style}>
     <div class="checkbox">
-      <input type="checkbox" bind:checked {...getSelectableInputProps(props)} />
+      <input
+        type="checkbox"
+        bind:checked
+        {...el.attrs as HTMLInputAttributes}
+      />
     </div>
     {@render props.children?.()}
   </label>
 {:else if props.interactive}
-  <button class="tile" {style} {...getInteractiveButtonProps(props)}>
+  <button
+    class={["tile", className]}
+    style={el.style}
+    {...el.attrs as HTMLButtonAttributes}
+  >
     {@render props.children?.()}
   </button>
 {:else}
-  <div class="tile" {style} {...stripOwnProps(props as RenderProps)}>
+  <div class={["tile", className]} style={el.style} {...el.attrs}>
     {@render props.children?.()}
   </div>
 {/if}

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import { type StyleProps } from "../styleProps";
 import type { BaseStyleProps, MarginStyleProps } from "../types";
-type BaseProps = BaseStyleProps & MarginStyleProps & {
+declare const Tile: import("svelte").Component<(BaseStyleProps & MarginStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "marginBlock", "marginInline", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]> & {
     /** Distribution along the tile's own axis, which is vertical. */
     justify?: string | null;
     /** Cross-axis alignment, which is horizontal. Centred already. */
@@ -14,23 +15,44 @@ type BaseProps = BaseStyleProps & MarginStyleProps & {
      */
     center?: boolean;
     children?: Snippet;
-};
-type StaticTileProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
+} & HTMLAttributes<HTMLDivElement> & {
     interactive?: false;
     selectable?: false;
     checked?: never;
-};
-type InteractiveTileProps = BaseProps & HTMLButtonAttributes & {
+}) | (BaseStyleProps & MarginStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "marginBlock", "marginInline", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]> & {
+    /** Distribution along the tile's own axis, which is vertical. */
+    justify?: string | null;
+    /** Cross-axis alignment, which is horizontal. Centred already. */
+    align?: string | null;
+    /**
+     * Shorthand for centring the tile's contents. Sets both axes, unlike
+     * `Stack`'s `center`, because a Tile already centres horizontally -- setting
+     * only the cross axis here would be a no-op and `<Tile center>` would look
+     * broken.
+     */
+    center?: boolean;
+    children?: Snippet;
+} & HTMLButtonAttributes & {
     interactive: true;
     selectable?: false;
     checked?: never;
-};
-type SelectableTileProps = BaseProps & HTMLInputAttributes & {
+}) | (BaseStyleProps & MarginStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "marginBlock", "marginInline", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]> & {
+    /** Distribution along the tile's own axis, which is vertical. */
+    justify?: string | null;
+    /** Cross-axis alignment, which is horizontal. Centred already. */
+    align?: string | null;
+    /**
+     * Shorthand for centring the tile's contents. Sets both axes, unlike
+     * `Stack`'s `center`, because a Tile already centres horizontally -- setting
+     * only the cross axis here would be a no-op and `<Tile center>` would look
+     * broken.
+     */
+    center?: boolean;
+    children?: Snippet;
+} & HTMLInputAttributes & {
     selectable: true;
     interactive?: false;
     checked?: boolean;
-};
-type Props = StaticTileProps | InteractiveTileProps | SelectableTileProps;
-declare const Tile: import("svelte").Component<Props, {}, "checked">;
+}), {}, "checked">;
 type Tile = ReturnType<typeof Tile>;
 export default Tile;

package/dist/misc/Code.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">const browser = typeof window !== "undefined";
+/* No attribute pass-through, deliberately: this renders CodeInner (loaded
+   lazily in the browser) and no element of its own. */
 let { code, inline = false, language = "html" } = $props();
 let component = $state(null);
 if (browser) {

package/dist/misc/Progress.svelte

@@ -1,8 +1,20 @@
-<script lang="ts">import { injectVars } from "../util";
-// migrate props via $props() so we can pick up extra CSS var props in restProps
-let { state = "inprogress", value = 0, max = 100, bg = null, fg = null, padding = null, width = null, height = null, children, ...restProps } = $props();
-const cssKeys = ["bg", "fg", "padding", "width", "height"];
-const style = $derived(injectVars(restProps, "progress", cssKeys));
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+let { state = "inprogress", value = 0, max = 100, bg = null, fg = null, padding = null, width = null, height = null, children, progressLabel = "Progress", 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 PROGRESS_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const cssKeys = [...PROGRESS_VARS, "width", "height"];
+/* Every style prop is destructured above, so they are handed back
+   explicitly. Passing `restProps` alone -- which is what this did before --
+   meant <Progress bg="red"> emitted no --progress-bg at all. */
+const el = $derived(elementProps({ bg, fg, padding, width, height, ...restProps }, "progress", cssKeys));
 // Compute filled fraction (0..1). 'indeterminate' treats as 1 for the visual bar,
 // but the native <progress> should omit the value attribute for indeterminate.
 let fillFraction = $derived(value === "indeterminate"
@@ -19,11 +31,16 @@ let halfFull = $derived(fillFraction > 0.5);
     1) Hidden native <progress> for a11y. 
        If 'indeterminate', omit the value attribute entirely.
   -->
-<div class="progress-container" data-state={state} {style}>
+<div class={["progress-container", className]} data-state={state} {...el}>
   {#if value === "indeterminate"}
-    <progress aria-label="Progress" {max} hidden></progress>
+    <progress aria-label={progressLabel} {max} hidden></progress>
   {:else}
-    <progress aria-label="Progress" {max} value={Number(value)} hidden></progress>
+    <progress
+      aria-label={progressLabel}
+      {max}
+      value={Number(value)}
+      hidden
+    ></progress>
   {/if}
 
   <!-- 2) Custom track with diagonal stripes (scrolling) when animateTrack=true -->

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

@@ -1,15 +1,22 @@
+import { type StyleProps } from "../styleProps";
 import type { Snippet } from "svelte";
-type $$ComponentProps = {
+import type { HTMLAttributes } from "svelte/elements";
+import type { BaseStyleProps, ContainProps } from "../types";
+declare const Progress: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     state?: "uninitiated" | "inprogress" | "complete";
     value?: number | "indeterminate";
     max?: number;
-    bg?: string | null;
-    fg?: string | null;
-    padding?: string | null;
-    width?: string | null;
-    height?: string | null;
     children?: Snippet;
-} & Record<string, unknown>;
-declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
+    /**
+     * Accessible name for the native <progress> that carries this bar's
+     * semantics. Say what is progressing -- `progressLabel="Upload"` -- since
+     * "Progress" tells a screen-reader user nothing they did not already know
+     * from the role.
+     *
+     * Named `progressLabel`, not `label`, because `label` is a real HTML
+     * attribute; a style or a11y prop must never shadow one.
+     */
+    progressLabel?: string;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;