zabi-components 7.0.2 → 8.1.0

package/dist/atoms/Checkbox.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
     import SelectionControl from "./SelectionControl.svelte";
     import type { SelectionControlMarkProps } from "./SelectionControl.svelte";
 
-    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,9 +20,10 @@
         checked?: boolean;
         onChange?: (event: Event) => void;
         onchange?: (event: Event) => void;
-    }
+    };
 
     let {
+        class: className = "",
         id,
         value = "",
         name = "",
@@ -23,32 +31,54 @@
         loading = false,
         label = "",
         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)}
-    <span
-        class="pointer-events-none absolute inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-brand-500 border-t-transparent z-10 opacity-0 group-has-[aria-busy=true]/control:opacity-100 group-has-checked/control:border-base-50"
-        aria-hidden="true"
-    ></span>
-    <svg
-        class="absolute w-3 h-3 text-base-50 pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-    >
-        <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2.5"
-            d="M5 13l4 4L19 7"
-        />
-    </svg>
+    <!-- While loading the ring stands in for the tick, so the two never overlap;
+         the fill still says whether the box is checked. The ring is only in the
+         DOM while busy, which is what lets it take Spinner's reduced-motion
+         pulse: a pulse animates opacity and would un-hide a ring that was
+         merely transparent. It is drawn in the text colour so the gap in it
+         survives: a hand-written border colour class repaints all four sides. -->
+    {#if props.loading}
+        <span
+            class="pointer-events-none absolute z-10 inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-pulse {props.checked
+                ? 'text-action-primary'
+                : 'text-brand-500'}"
+            aria-hidden="true"
+        ></span>
+    {:else}
+        <svg
+            class="absolute w-3 h-3 text-action-primary pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2.5"
+                d="M5 13l4 4L19 7"
+            />
+        </svg>
+    {/if}
 {/snippet}
 
 <SelectionControl
@@ -65,5 +95,6 @@
     {onChange}
     {onchange}
     {mark}
+    class={className}
     {...restProps}
 />

package/dist/atoms/Checkbox.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;
@@ -9,7 +13,7 @@ interface Props {
     checked?: boolean;
     onChange?: (event: Event) => void;
     onchange?: (event: Event) => void;
-}
+};
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/atoms/CodeBlock.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
+    import { DEFAULT_CODE_BLOCK_TEXTS, zabiStringsFor } from "../util/zabi-strings.js";
     import Check from "@lucide/svelte/icons/check";
     import Copy from "@lucide/svelte/icons/copy";
     import IconButton from "./IconButton.svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         /** Raw source; escaped unless `trustHtml` (e.g. highlighter HTML). */
         code: string;
         language?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         showCopyButton?: boolean;
+        /** Accessible name of the copy button. */
+        copyLabel?: string;
+        /** Its name for the two seconds after the code was copied. */
+        copiedLabel?: string;
         /** If true, `{@html code}` — only trusted, sanitized input. */
         trustHtml?: boolean;
     }
@@ -16,11 +24,23 @@
     let {
         code,
         language = "svelte",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         showCopyButton = true,
+        copyLabel: copyLabelGiven,
+        copiedLabel: copiedLabelGiven,
         trustHtml = false,
         ...restProps
-    } = $props();
+    }: Props & Record<string, unknown> = $props();
+
+    /** Each text: the prop, else the app-wide word from a `ZabiStringsProvider` above this one, else English. */
+    const provided = zabiStringsFor("codeBlock");
+    const copyLabel = $derived(copyLabelGiven ?? provided()?.copyLabel ?? DEFAULT_CODE_BLOCK_TEXTS.copyLabel);
+    const copiedLabel = $derived(copiedLabelGiven ?? provided()?.copiedLabel ?? DEFAULT_CODE_BLOCK_TEXTS.copiedLabel);
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 
     let copied = $state(false);
 
@@ -38,22 +58,22 @@
 </script>
 
 <div
-    class="code-block relative bg-surface-1 border border-border rounded-lg overflow-hidden {className}"
+    class={cn("code-block relative bg-surface-1 border border-border rounded-control overflow-hidden", className)}
     {...restProps}
 >
     <div
         class="flex items-center justify-between px-4 py-2 bg-surface-2 border-b border-border"
     >
-        <div class="flex items-center gap-2">
-            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="flex items-center gap-2" aria-hidden="true">
+            <div class="w-3 h-3 rounded-full bg-error"></div>
+            <div class="w-3 h-3 rounded-full bg-warning"></div>
+            <div class="w-3 h-3 rounded-full bg-success"></div>
         </div>
         {#if showCopyButton}
             <IconButton
                 variant="ghost"
                 size="sm"
-                label={copied ? "Code copied to clipboard" : "Copy code to clipboard"}
+                label={copied ? copiedLabel : copyLabel}
                 onclick={copyToClipboard}
             >
                 {#if copied}
@@ -62,6 +82,9 @@
                     <Copy size={16} class="shrink-0" aria-hidden="true" />
                 {/if}
             </IconButton>
+            <!-- A button's new name is not read out while it keeps focus.
+            This says it: always in the page, filled when the code is copied. -->
+            <span class="sr-only" role="status" data-code-block-status>{copied ? copiedLabel : ""}</span>
         {/if}
     </div>
 
@@ -72,8 +95,11 @@
 </div>
 
 <style>
+    /* The token's default is this same stack. It is repeated as the fallback
+       because Tailwind only emits theme variables it sees used, and it does
+       not read a component's scoped styles. */
     .code-block {
-        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+        font-family: var(--font-family-mono, "Monaco", "Menlo", "Ubuntu Mono", monospace);
     }
 
     :global(.language-svelte .token.tag),

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

@@ -1,9 +1,19 @@
-declare const CodeBlock: import("svelte").Component<{
-    code: any;
+interface Props {
+    /** Raw source; escaped unless `trustHtml` (e.g. highlighter HTML). */
+    code: string;
     language?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     showCopyButton?: boolean;
+    /** Accessible name of the copy button. */
+    copyLabel?: string;
+    /** Its name for the two seconds after the code was copied. */
+    copiedLabel?: string;
+    /** If true, `{@html code}` — only trusted, sanitized input. */
     trustHtml?: boolean;
-} & Record<string, any>, {}, "">;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;
 export default CodeBlock;