zabi-components 5.0.21 → 5.0.22

package/README.md

@@ -1556,6 +1556,7 @@ Zabi Components is built with accessibility in mind:
 - Logical tab order
 
 See [ACCESSIBILITY.md](./docs/ACCESSIBILITY.md) and [KEYBOARD_NAVIGATION.md](./docs/KEYBOARD_NAVIGATION.md) for detailed documentation.
+See [DESIGN_SYSTEM_REMEDIATION_TRACKER.md](./docs/DESIGN_SYSTEM_REMEDIATION_TRACKER.md), [AUDIT_RUNBOOK.md](./docs/AUDIT_RUNBOOK.md), and [AUDIT_SCORECARD_TEMPLATE.md](./docs/AUDIT_SCORECARD_TEMPLATE.md) for audit and remediation workflows.
 
 ## Variant System
 

package/dist/atoms/CardContent.svelte

@@ -17,7 +17,7 @@
     }: Props = $props();
 </script>
 
-<div class="p-6 pt-0 {className}" {...restProps}>
+<div class={className} {...restProps}>
     {#if image}
         <img
             src={image}

package/dist/atoms/CardHeader.svelte

@@ -24,7 +24,7 @@
     });
 </script>
 
-<header class="flex flex-col space-y-1.5 p-6 {className}" {...restProps}>
+<header class="flex flex-col space-y-1.5 pb-4{className}" {...restProps}>
     {#if title}
         <svelte:element this={headingTag} class={headingClasses()}>
             {title}

package/dist/atoms/Checkbox.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-    function generateId(prefix: string = "id"): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         checked?: boolean;

package/dist/atoms/CodeBlock.svelte

@@ -92,31 +92,31 @@
 
     :global(.language-svelte .token.tag),
     :global(.language-html .token.tag) {
-        color: #f92672;
+        color: var(--color-error-text);
     }
 
     :global(.language-svelte .token.attr-name),
     :global(.language-html .token.attr-name) {
-        color: #a6e22e;
+        color: var(--color-success-text);
     }
 
     :global(.language-svelte .token.attr-value),
     :global(.language-html .token.attr-value) {
-        color: #e6db74;
+        color: var(--color-warning-text);
     }
 
     :global(.language-javascript .token.keyword),
     :global(.language-typescript .token.keyword) {
-        color: #66d9ef;
+        color: var(--color-info-text);
     }
 
     :global(.language-javascript .token.string),
     :global(.language-typescript .token.string) {
-        color: #e6db74;
+        color: var(--color-warning-text);
     }
 
     :global(.language-javascript .token.function),
     :global(.language-typescript .token.function) {
-        color: #a6e22e;
+        color: var(--color-success-text);
     }
 </style>

package/dist/atoms/ColorPicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Input from "./Input.svelte";
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, tick } from "svelte";
 
     interface Props {
         value?: string;
@@ -20,11 +20,10 @@
     }: Props = $props();
 
     let isOpen = $state(false);
-    let pickerContainer: HTMLDivElement;
-    let colorMap: HTMLCanvasElement;
-    let colorMapContainer: HTMLDivElement;
-    let hueSlider: HTMLInputElement;
     let isDragging = $state(false);
+    let pickerContainer: HTMLDivElement | undefined;
+    let colorMap: HTMLCanvasElement | undefined;
+    let colorMapContainer: HTMLDivElement | undefined;
 
     // HSL values (0-360, 0-100, 0-100)
     let hue = $state(0);
@@ -96,46 +95,56 @@
         }
     }
 
-    const variant = $derived(() => {
-        if (value && !isValidHex(value)) {
-            return "error";
-        }
-        return "default";
-    });
+    const variant = $derived(value && !isValidHex(value) ? "error" : "default");
 
-    const message = $derived(() => {
-        if (value && !isValidHex(value)) {
-            return "Please enter a valid hex color (e.g., #ff0000 or #f00)";
-        }
-        return "";
-    });
+    const message = $derived(
+        value && !isValidHex(value)
+            ? "Please enter a valid hex color (e.g., #ff0000 or #f00)"
+            : "",
+    );
 
     function handleInput(event: Event) {
         if (onchange) onchange(event);
         updateFromHex(value);
     }
 
-    function handleBlur(event: Event) {
-        const target = event.target as HTMLInputElement;
-        let hexValue = target.value.trim();
+    function normalizeHexValue(rawValue: string): string {
+        let hexValue = rawValue.trim();
 
         if (hexValue && !hexValue.startsWith("#")) {
             hexValue = "#" + hexValue;
         }
 
-        if (hexValue === "" || isValidHex(hexValue)) {
-            value = hexValue;
-            updateFromHex(hexValue);
+        return hexValue;
+    }
+
+    function commitCurrentValue(event: Event) {
+        const normalizedHex = normalizeHexValue(value);
+
+        if (normalizedHex === "" || isValidHex(normalizedHex)) {
+            value = normalizedHex;
+            updateFromHex(normalizedHex);
             if (onchange) onchange(event);
         }
     }
 
-    function togglePicker() {
+    function handleBlur(event: Event) {
+        commitCurrentValue(event);
+    }
+
+    async function togglePicker() {
         if (!disabled) {
+            if (isOpen) {
+                commitCurrentValue(new Event("change"));
+            }
             isOpen = !isOpen;
             if (isOpen && value && isValidHex(value)) {
                 updateFromHex(value);
             }
+            if (isOpen) {
+                await tick();
+                drawColorMap();
+            }
         }
     }
 
@@ -178,6 +187,10 @@
         }
     }
 
+    function handleMouseUp() {
+        isDragging = false;
+    }
+
     function handleHueChange(event: Event) {
         const target = event.target as HTMLInputElement;
         hue = parseInt(target.value);
@@ -185,26 +198,38 @@
         drawColorMap();
     }
 
-    $effect(() => {
-        if (isOpen && colorMap) {
-            // Use setTimeout to ensure canvas is rendered
-            setTimeout(() => {
-                drawColorMap();
-            }, 0);
-        }
-    });
+    function setPickerContainer(node: HTMLDivElement) {
+        pickerContainer = node;
+        return {
+            destroy() {
+                if (pickerContainer === node) {
+                    pickerContainer = undefined;
+                }
+            },
+        };
+    }
 
-    $effect(() => {
-        if (hue !== undefined && colorMap && isOpen) {
-            drawColorMap();
-        }
-    });
+    function setColorMap(node: HTMLCanvasElement) {
+        colorMap = node;
+        return {
+            destroy() {
+                if (colorMap === node) {
+                    colorMap = undefined;
+                }
+            },
+        };
+    }
 
-    $effect(() => {
-        if (value && isValidHex(value) && !isDragging) {
-            updateFromHex(value);
-        }
-    });
+    function setColorMapContainer(node: HTMLDivElement) {
+        colorMapContainer = node;
+        return {
+            destroy() {
+                if (colorMapContainer === node) {
+                    colorMapContainer = undefined;
+                }
+            },
+        };
+    }
 
     function handleClickOutside(event: MouseEvent) {
         if (
@@ -214,6 +239,7 @@
                 '[aria-label="Open color picker"]',
             )
         ) {
+            commitCurrentValue(new Event("change"));
             isOpen = false;
         }
     }
@@ -223,36 +249,19 @@
             updateFromHex(value);
         }
         window.addEventListener("mousedown", handleClickOutside);
-        window.addEventListener("mouseup", () => {
-            isDragging = false;
-        });
+        window.addEventListener("mouseup", handleMouseUp);
         window.addEventListener("mousemove", handleColorMapDrag);
     });
 
     onDestroy(() => {
         window.removeEventListener("mousedown", handleClickOutside);
-        window.removeEventListener("mouseup", () => {});
+        window.removeEventListener("mouseup", handleMouseUp);
         window.removeEventListener("mousemove", handleColorMapDrag);
     });
 
-    const displayColor = $derived(() => {
-        if (value && isValidHex(value)) {
-            return value;
-        }
-        return placeholder;
-    });
-
-    const currentHslColor = $derived(() => {
-        return `hsl(${hue}, 100%, 50%)`;
-    });
-
-    const pickerIndicatorX = $derived(() => {
-        return `${(saturation / 100) * 100}%`;
-    });
-
-    const pickerIndicatorY = $derived(() => {
-        return `${100 - (lightness / 100) * 100}%`;
-    });
+    const displayColor = $derived(value && isValidHex(value) ? value : placeholder);
+    const pickerIndicatorX = $derived(`${saturation}%`);
+    const pickerIndicatorY = $derived(`${100 - lightness}%`);
 </script>
 
 <div {...restProps}>
@@ -263,8 +272,8 @@
                 {label}
                 {placeholder}
                 {disabled}
-                variant={variant()}
-                message={message()}
+                {variant}
+                {message}
                 oninput={handleInput}
                 onblur={handleBlur}
                 aria-label="Hex color input"
@@ -276,14 +285,14 @@
                 onclick={togglePicker}
                 {disabled}
                 class="w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-brand-500 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-                style="background-color: {displayColor()};"
+                style="background-color: {displayColor};"
                 aria-label="Open color picker"
                 aria-expanded={isOpen}
             ></button>
 
             {#if isOpen}
                 <div
-                    bind:this={pickerContainer}
+                    use:setPickerContainer
                     class="absolute top-12 right-0 z-50 bg-input rounded-2xl shadow-lg p-4 w-80"
                     role="dialog"
                     aria-label="Color picker"
@@ -291,7 +300,7 @@
                     <div class="space-y-4">
                         <!-- Color Map -->
                         <div
-                            bind:this={colorMapContainer}
+                            use:setColorMapContainer
                             class="relative w-full h-48 rounded-xl overflow-hidden cursor-crosshair"
                             onmousedown={(e) => {
                                 isDragging = true;
@@ -301,7 +310,7 @@
                             tabindex="0"
                         >
                             <canvas
-                                bind:this={colorMap}
+                                use:setColorMap
                                 width={256}
                                 height={192}
                                 class="w-full h-full"
@@ -309,7 +318,7 @@
                             <!-- Color indicator -->
                             <div
                                 class="absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
-                                style="left: {pickerIndicatorX()}; top: {pickerIndicatorY()};"
+                                style="left: {pickerIndicatorX}; top: {pickerIndicatorY};"
                             ></div>
                         </div>
 
@@ -323,7 +332,6 @@
                                     style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));"
                                 ></div>
                                 <input
-                                    bind:this={hueSlider}
                                     type="range"
                                     min="0"
                                     max="360"

package/dist/atoms/Input.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
     import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
-
-    function generateId(prefix: string = "id"): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         value?: string;
         type?: string;
         name?: string;
+        class?: string;
         label?: string;
         placeholder?: string;
+        required?: boolean;
         disabled?: boolean;
         size?: SizeVariant;
         variant?: SemanticVariant;
@@ -29,8 +24,10 @@
         value = $bindable(""),
         type = "text",
         name = "",
+        class: className = "",
         label = "",
         placeholder = "",
+        required = false,
         disabled = false,
         size = "md",
         variant = "default",
@@ -79,7 +76,7 @@
         const baseClasses =
             "w-full min-w-48 bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
 
-        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
     });
 
     const labelClasses = $derived(
@@ -121,16 +118,23 @@
         {name}
         bind:value
         {placeholder}
+        {required}
         {disabled}
         class={inputClasses()}
         oninput={handleInput}
         {onblur}
         aria-invalid={variant === "error" ? "true" : undefined}
+        aria-required={required ? "true" : undefined}
         aria-describedby={message ? `${inputId}-message` : undefined}
         {...restProps}
     />
     {#if message && variant !== "default"}
-        <p id={`${inputId}-message`} class={messageClasses()} role="alert">
+        <p
+            id={`${inputId}-message`}
+            class={messageClasses()}
+            role={variant === "error" ? "alert" : "status"}
+            aria-live={variant === "error" ? "assertive" : "polite"}
+        >
             {#if getIcon()}
                 {@const Icon = getIcon()}
                 <Icon size={14} class="shrink-0" />

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

@@ -3,8 +3,10 @@ interface Props {
     value?: string;
     type?: string;
     name?: string;
+    class?: string;
     label?: string;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     size?: SizeVariant;
     variant?: SemanticVariant;

package/dist/atoms/List.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import ListItemRow, { type ListItemData } from "./ListItem.svelte";
+
+    export type ListItem = ListItemData;
+
+    interface Props {
+        /** Collection of items rendered in the list. */
+        items: ListItemData[];
+        /** Accessible label for the list container. */
+        ariaLabel?: string;
+        /** Optional active item id for current state styling. */
+        selectedId?: string;
+        /** Whether to show the arrow icon for each row. */
+        showArrow?: boolean;
+        /** Optional custom class names for the list container. */
+        className?: string;
+        /** Item click callback. */
+        onclick?: (item: ListItem, event: MouseEvent) => void;
+    }
+
+    let {
+        items,
+        ariaLabel = "List items",
+        selectedId = "",
+        showArrow = true,
+        className = "",
+        onclick,
+        ...restProps
+    }: Props = $props();
+
+    const listClasses = $derived(
+        `space-y-1 overflow-hidden rounded-xl border border-border bg-surface p-1 ${className}`.trim(),
+    );
+</script>
+
+<ul class={listClasses} role="list" aria-label={ariaLabel} {...restProps}>
+    {#each items as item (item.id)}
+        <li>
+            <ListItemRow
+                {item}
+                selected={item.id === selectedId}
+                {showArrow}
+                {onclick}
+            />
+        </li>
+    {/each}
+</ul>

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

@@ -0,0 +1,19 @@
+import { type ListItemData } from "./ListItem.svelte";
+export type ListItem = ListItemData;
+interface Props {
+    /** Collection of items rendered in the list. */
+    items: ListItemData[];
+    /** Accessible label for the list container. */
+    ariaLabel?: string;
+    /** Optional active item id for current state styling. */
+    selectedId?: string;
+    /** Whether to show the arrow icon for each row. */
+    showArrow?: boolean;
+    /** Optional custom class names for the list container. */
+    className?: string;
+    /** Item click callback. */
+    onclick?: (item: ListItem, event: MouseEvent) => void;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/atoms/ListItem.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { ArrowRight } from "@lucide/svelte";
+    import type { Component } from "svelte";
+
+    export interface ListItemData {
+        /** Unique identifier for stable rendering and active-state tracking. */
+        id: string;
+        /** Primary item label. */
+        label: string;
+        /** Optional secondary text shown under the label. */
+        description?: string;
+        /** Optional URL; when set, the item renders as an anchor. */
+        href?: string;
+        /** Optional leading icon rendered before text. */
+        icon?: Component<{ size?: number; class?: string }>;
+        /** Link target, only used when href is provided. */
+        target?: "_self" | "_blank" | "_parent" | "_top";
+        /** Link rel attribute, only used when href is provided. */
+        rel?: string;
+        /** Disabled state for the item. */
+        disabled?: boolean;
+    }
+
+    interface Props {
+        /** Item data to render. */
+        item: ListItemData;
+        /** Active-state styling flag. */
+        selected?: boolean;
+        /** Whether to show the right-arrow icon. */
+        showArrow?: boolean;
+        /** Item click callback. */
+        onclick?: (item: ListItemData, event: MouseEvent) => void;
+    }
+
+    let {
+        item,
+        selected = false,
+        showArrow = true,
+        onclick,
+        ...restProps
+    }: Props = $props();
+
+    const itemClasses = $derived.by(() => {
+        const baseClasses =
+            "group flex w-full items-center gap-3 rounded-xl border border-border px-4 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset";
+        const interactiveClasses = item.disabled
+            ? "cursor-not-allowed opacity-50"
+            : "cursor-pointer hover:ring-1 hover:ring-focus focus-visible:bg-base-100";
+        const selectedClasses = selected
+            ? "bg-action-primary-subtle border-brand-500"
+            : "";
+        return `${baseClasses} ${interactiveClasses} ${selectedClasses}`.trim();
+    });
+
+    const ariaCurrent = $derived(item.href && selected ? "page" : undefined);
+
+    const rel = $derived.by(() => {
+        if (item.rel) {
+            return item.rel;
+        }
+        if (item.target === "_blank") {
+            return "noopener noreferrer";
+        }
+        return undefined;
+    });
+
+    const handleItemClick = (event: MouseEvent): void => {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        onclick?.(item, event);
+    };
+</script>
+
+{#if item.href}
+    <a
+        href={item.href}
+        target={item.target}
+        {rel}
+        aria-current={ariaCurrent}
+        aria-disabled={item.disabled ? "true" : undefined}
+        tabindex={item.disabled ? -1 : undefined}
+        class={itemClasses}
+        onclick={handleItemClick}
+        {...restProps}
+    >
+        {#if item.icon}
+            <span
+                class="flex size-5 shrink-0 items-center justify-center text-description"
+                aria-hidden="true"
+            >
+                <item.icon size={16} />
+            </span>
+        {/if}
+        <span class="min-w-0 flex-1">
+            <span class="block text-sm font-medium text-headline"
+                >{item.label}</span
+            >
+            {#if item.description}
+                <span class="mt-0.5 block text-sm text-description"
+                    >{item.description}</span
+                >
+            {/if}
+        </span>
+        {#if showArrow}
+            <ArrowRight
+                size={16}
+                class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5"
+                aria-hidden="true"
+            />
+        {/if}
+    </a>
+{:else}
+    <button
+        type="button"
+        class={itemClasses}
+        disabled={item.disabled}
+        onclick={handleItemClick}
+        {...restProps}
+    >
+        {#if item.icon}
+            <span
+                class="flex size-5 shrink-0 items-center justify-center text-description"
+                aria-hidden="true"
+            >
+                <item.icon size={16} />
+            </span>
+        {/if}
+        <span class="min-w-0 flex-1">
+            <span class="block text-sm font-medium text-headline"
+                >{item.label}</span
+            >
+            {#if item.description}
+                <span class="mt-0.5 block text-sm text-description"
+                    >{item.description}</span
+                >
+            {/if}
+        </span>
+        {#if showArrow}
+            <ArrowRight
+                size={16}
+                class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5"
+                aria-hidden="true"
+            />
+        {/if}
+    </button>
+{/if}