zabi-components 7.0.2 → 8.1.0

package/dist/atoms/OptimizedImage.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+    import { cn } from "../util/cn.js";
+
     interface Props {
         src: string;
         alt?: string;
         width?: number | string;
         height?: number | string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
     }
 
@@ -12,16 +16,21 @@
         alt = "",
         width = "100%",
         height = "auto",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     } = $props<Props & { children?: any }>();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(`${classAttr} ${legacyClass}`.trim());
 </script>
 
 <img
     {src}
     {alt}
-    class="w-full h-auto object-cover {className}"
+    class={cn("w-full h-auto object-cover", className)}
     style="width: {typeof width === 'number'
         ? width + 'px'
         : width}; height: {typeof height === 'number'

package/dist/atoms/OptimizedImage.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props {
     alt?: string;
     width?: number | string;
     height?: number | string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
 }
 type $$ComponentProps = Props & {

package/dist/atoms/Progress.svelte

@@ -2,23 +2,42 @@
     import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         value?: number;
         max?: number;
         size?: "sm" | "md" | "lg";
         label?: string;
+        /** Names the progressbar when there is no visible `label`. Reaches the element with role="progressbar". */
+        "aria-label"?: string;
+        /** Points the progressbar at another element's id for its name. Reaches the element with role="progressbar". */
+        "aria-labelledby"?: string;
     }
 
     let {
+        class: className = "",
         value = 0,
         max = 100,
         size = "md",
         label = "",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
         ...restProps
     }: Props = $props();
 
     const progressId = generateId("progress");
+    const labelId = `${progressId}-label`;
 
-    let percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
+    // A max that is not a positive, finite number would give an empty or full
+    // bar with aria-valuemax=0: fall back to the default.
+    let safeMax = $derived(Number.isFinite(max) && max > 0 ? max : 100);
+    let safeValue = $derived(
+        Number.isFinite(value) ? Math.min(Math.max(value, 0), safeMax) : 0,
+    );
+    let percentage = $derived((safeValue / safeMax) * 100);
+    let labelledby = $derived(
+        ariaLabelledby ?? (ariaLabel || !label ? undefined : labelId),
+    );
 
     let sizeClasses = $derived({
         sm: "h-1",
@@ -27,11 +46,13 @@
     });
 </script>
 
-<div>
+<div class={className} {...restProps}>
     {#if label}
         <div class="flex justify-between items-center mb-2">
-            <label for={progressId} class="text-sm font-medium text-label"
-                >{label}</label
+            <!-- A span named through aria-labelledby, not a label: `for` only
+            names form controls, so it left the progressbar without a name. -->
+            <span id={labelId} class="text-sm font-medium text-label"
+                >{label}</span
             >
             <span class="text-sm text-caption">{Math.round(percentage)}%</span>
         </div>
@@ -39,15 +60,16 @@
 
     <div
         id={progressId}
-        class="w-full border border-input-border bg-input rounded-full overflow-hidden {sizeClasses[size]}"
+        class="w-full border border-input-border bg-progress-track rounded-full overflow-hidden {sizeClasses[size]}"
         role="progressbar"
-        aria-valuenow={value}
+        aria-label={ariaLabel}
+        aria-labelledby={labelledby}
+        aria-valuenow={safeValue}
         aria-valuemin="0"
-        aria-valuemax={max}
-        {...restProps}
+        aria-valuemax={safeMax}
     >
         <div
-            class="h-full bg-brand-600 rounded-full"
+            class="h-full bg-progress-fill rounded-full"
             style="width: {percentage}%"
         ></div>
     </div>

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

@@ -1,8 +1,14 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     value?: number;
     max?: number;
     size?: "sm" | "md" | "lg";
     label?: string;
+    /** Names the progressbar when there is no visible `label`. Reaches the element with role="progressbar". */
+    "aria-label"?: string;
+    /** Points the progressbar at another element's id for its name. Reaches the element with role="progressbar". */
+    "aria-labelledby"?: string;
 }
 declare const Progress: import("svelte").Component<Props, {}, "">;
 type Progress = ReturnType<typeof Progress>;

package/dist/atoms/Radio.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
     import SelectionControl from "./SelectionControl.svelte";
     import type { SelectionControlMarkProps } from "./SelectionControl.svelte";
     import { RADIO_CHECKED_DOT_CLASSES } from "./selection-control.styles";
 
-    interface Props {
+    /** Other attributes (`required`, `data-*`, `aria-*`, ...) land on the `<input>`. */
+    type Props = Omit<
+        HTMLInputAttributes,
+        "class" | "id" | "name" | "value" | "disabled" | "checked" | "type" | "onchange"
+    > & {
+        /** Extra classes for the host element. */
+        class?: string;
         id?: string;
         name?: string;
         value?: string;
@@ -13,20 +20,32 @@
         checked?: boolean;
         onChange?: (event: Event) => void;
         onchange?: (event: Event) => void;
-    }
+    };
 
     let {
+        class: className = "",
         id,
         name = "",
         value = "",
         label = "",
         disabled = false,
         defaultChecked = false,
-        checked = $bindable(defaultChecked),
+        checked = $bindable<Exclude<Props["checked"], undefined>>(),
         onChange,
         onchange,
         ...restProps
     }: Props = $props();
+
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (checked === undefined) checked = defaultChecked;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
 </script>
 
 {#snippet mark(_props: SelectionControlMarkProps)}
@@ -46,6 +65,7 @@
     {onChange}
     {onchange}
     {mark}
+    class={className}
     {...restProps}
 />
 

package/dist/atoms/Radio.svelte.d.ts

@@ -1,4 +1,8 @@
-interface Props {
+import type { HTMLInputAttributes } from "svelte/elements";
+/** Other attributes (`required`, `data-*`, `aria-*`, ...) land on the `<input>`. */
+type Props = Omit<HTMLInputAttributes, "class" | "id" | "name" | "value" | "disabled" | "checked" | "type" | "onchange"> & {
+    /** Extra classes for the host element. */
+    class?: string;
     id?: string;
     name?: string;
     value?: string;
@@ -8,7 +12,7 @@ interface Props {
     checked?: boolean;
     onChange?: (event: Event) => void;
     onchange?: (event: Event) => void;
-}
+};
 declare const Radio: import("svelte").Component<Props, {}, "checked">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;