@valerius_petrini/corekit-ui 0.1.78 → 0.1.80

package/dist/components/display/KBD/index.svelte

@@ -14,11 +14,11 @@
     const combinedClass = $derived(twMerge(defaultClass, className));
 </script>
 
-<span class={combinedClass} {...restProps} bind:this={element}>
+<kbd class={combinedClass} {...restProps} bind:this={element}>
     {@render children?.()}
     {#if subtext}        
         <span class="text-sub-text text-[10px] mt-0.5">
             {@render subtext?.()}
         </span>
     {/if}
-</span>
+</kbd>

package/dist/components/display/Skeleton/index.svelte

@@ -39,7 +39,7 @@
     </div>
 {/snippet}
 
-<div class={combinedContainerClass} bind:this={element}>
+<div class={combinedContainerClass} bind:this={element} aria-hidden="true">
     {#if variant === "default"}
         <div class="h-4 bg-sub-background rounded w-3/4"></div>
         <div class="h-4 bg-sub-background rounded w-full"></div>

package/dist/components/feedback/Loader/index.svelte

@@ -22,6 +22,7 @@
     ));
 </script>
 
+<span class="sr-only">Loading...</span>
 <div class={sizeClass} {...restProps} bind:this={element}></div>
 
 <style>

package/dist/components/feedback/Modal/index.svelte

@@ -9,13 +9,26 @@
     let { 
         children = undefined, 
         class: className = "",
-        element = $bindable(),
-        open = $bindable(), 
+        element = $bindable<HTMLDialogElement>(),
+        open = $bindable(false), 
         position = "center",
         size = "md",
         ...restProps
     }: ModalProps = $props();
 
+    $effect(() => {
+        if (!element) return;
+        if (open) {
+            (element as HTMLDialogElement).showModal();
+        } else {
+            (element as HTMLDialogElement).close();
+        }
+    });
+
+    function onclose() {
+        open = false;
+    }
+
     const outerClass = $derived(twMerge(
         "inset-0 flex flex-col w-[calc(100%-1rem)] h-[calc(100%-1rem)] p-4",
         modalPositionParts[position]
@@ -28,20 +41,19 @@
     ));
 </script>
 
-{#if open}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-        class="w-full h-screen bg-black/50 z-300 fixed top-0 left-0"
-        transition:fade={{ duration: 200 }}
-        onclick={() => open = false}
-        bind:this={element}>
-        <div
-            class={outerClass}
-            transition:fly={{ y: -20, duration: 200 }}>
-            <Card class={cardClass} {...restProps} onclick={(e: MouseEvent) => e.stopPropagation()}>
-                {@render children()}
+<dialog
+    bind:this={element}
+    class="w-full h-screen bg-black/50 z-300 fixed top-0 left-0 p-0 m-0 max-w-none max-h-none"
+    transition:fade={{ duration: 200 }}
+    onclick={() => open = false}
+    onclose={onclose}
+    {...restProps}
+>
+    {#if open}
+        <div class={outerClass} transition:fly={{ y: -20, duration: 200 }}>
+            <Card class={cardClass} onclick={(e: MouseEvent) => e.stopPropagation()}>
+                {@render children?.()}
             </Card>
         </div>
-    </div>
-{/if}
+    {/if}
+</dialog>

package/dist/components/feedback/Toast/index.svelte

@@ -59,7 +59,7 @@
     });
 </script>
 
-<div transition:fly={flyParams} class={combinedToastClass} {...restProps} bind:this={element}>
+<div transition:fly={flyParams} class={combinedToastClass} {...restProps} bind:this={element} role="status" aria-live={type === "error" ? "assertive" : "polite"}>
     <div class="w-8 h-8 flex-center">
         <Icon class={defualtIconClass}/>
     </div>

package/dist/components/inputs/Button/index.svelte

@@ -29,72 +29,45 @@
         ...restProps
     }: ButtonProps = $props();
 
-    const defaultClass =
-        "inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
-    const disabledClass = $derived(
-        disabled || loading
-            ? "opacity-50 pointer-events-none"
-            : "cursor-pointer",
-    );
-    const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
-    const pillClass = $derived((pill || icon) && "rounded-full");
-    const squareClass = $derived(square && "aspect-square rounded-none");
+    const isDisabled = $derived(disabled || loading);
 
-    const mergedClass = $derived(
-        twMerge(
-            defaultClass,
-            generateColorStyle(color, variant),
-            disabledClass,
-            getSizeStyleClassRecord(
-                size,
-                icon ? buttonIconSizeStyles : buttonSizeStyles,
-            ),
-            getSizeStyleClass(radius, "radius"),
-            iconClass,
-            pillClass,
-            squareClass,
-            className,
-        ),
-    );
+    const mergedClass = $derived(twMerge(
+        "inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap",
+        generateColorStyle(color, variant),
+        isDisabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
+        getSizeStyleClassRecord(size, icon ? buttonIconSizeStyles : buttonSizeStyles),
+        getSizeStyleClass(radius, "radius"),
+        icon ? "p-0 flex-none" : "h-fit",
+        (pill || icon) && "rounded-full",
+        square && "aspect-square rounded-none",
+        className,
+    ));
 
-    const mergedStyle = $derived(
-        [
-            typeof size === "number"
-                ? icon
-                    ? `height: ${size}px; width: ${size}px; padding: ${size / 4}px`
-                    : `height: ${size}px; padding: ${size / 4}px ${size / 8}px`
-                : "",
-            getSizeStyle(radius, "radius"),
-            restProps.style,
-        ]
-            .filter(Boolean)
-            .join("; "),
-    );
-
-    const anchorProps = $derived(
-        getLinkProps(href, external, disabled || loading),
-    );
+    const mergedStyle = $derived([
+        typeof size === "number"
+            ? icon
+                ? `height: ${size}px; width: ${size}px; padding: ${size / 4}px`
+                : `height: ${size}px; padding: ${size / 4}px ${size / 8}px`
+            : "",
+        getSizeStyle(radius, "radius"),
+        restProps.style,
+    ].filter(Boolean).join("; "));
 </script>
 
 <svelte:element
     this={href ? "a" : "button"}
     class={mergedClass}
-    disabled={disabled || loading}
-    aria-disabled={disabled || loading}
+    disabled={isDisabled}
+    aria-disabled={isDisabled}
+    aria-busy={loading}
     type={href ? undefined : restProps.type || "button"}
     style={mergedStyle}
-    {...anchorProps}
+    {...getLinkProps(href, external, isDisabled)}
     {...restProps}
     bind:this={element}
 >
     {#if loading}
-        <Loader
-            color="white"
-            class="border-2 border-loader-btn-color {getSizeStyleClass(
-                size,
-                'buttonLoader',
-            )}"
-        />
+        <Loader color="white" class="border-2 border-loader-btn-color {getSizeStyleClass(size, 'buttonLoader')}" />
     {/if}
     {@render children?.()}
 </svelte:element>

package/dist/components/inputs/Input/index.svelte

@@ -134,19 +134,19 @@
     {...restProps}>
     {#snippet outerDivElementAfter()}
         {#if touched && requirements}
-            <div class="mt-1 text-xs" transition:slide={{ duration: 300 }}>
+            <ul role="list" class="mt-1 text-xs" transition:slide={{ duration: 300 }}>
                 {#each requirements as req}
                     {@const isReqMet = testRequirement(req.requirements)}
                     {@const reqClass = isReqMet ? "text-green-500" : "text-red-500"}
-                    <div class="flex w-full items-center gap-1 transition-colors {reqClass}">
+                    <li class="flex w-full items-center gap-1 transition-colors {reqClass}">
                         <div class="relative w-4 h-4">
                             <Check class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-100 scale-100' : 'opacity-0 scale-0'}"/>
                             <X     class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-0 scale-0' : 'opacity-100 scale-100'}"/>
                         </div>
                         <Text tag="span" class="text-xs text-inherit">{req.label}</Text>
-                    </div>
+                    </li>
                 {/each}
-            </div>
+            </ul>
         {/if}
     {/snippet}
 

package/dist/components/inputs/helper/BaseInput.svelte

@@ -85,9 +85,7 @@
         {/if}
         {#if icon}
             {@const Icon = icon}
-            <div class="h-5 aspect-square px-1 py-0!">
-                <Icon class="h-full aspect-square text-sub-text"></Icon>
-            </div>
+            <Icon class="h-5 aspect-square mx-1 py-0! text-sub-text shrink-0"></Icon>
         {/if}
         {@render innerDivElement?.()}
     </div>

package/dist/components/navigation/Navbar/NavbarDropdown.svelte

@@ -12,6 +12,9 @@
     } from "@floating-ui/dom";
     import { tick } from "svelte";
 
+    import ChevronUp from "@lucide/svelte/icons/chevron-up";
+    import ChevronDown from "@lucide/svelte/icons/chevron-down";
+
     let {
         children = undefined,
         class: className = "",
@@ -62,13 +65,8 @@
         };
     }
 
-    async function toggle() {
-        if (open) {
-            open = false;
-        } else {
-            ready = false;
-            open = true;
-        }
+    function toggle() {
+        open = !open;
     }
 
     function handleClickOutside(event: MouseEvent) {
@@ -80,35 +78,39 @@
 
 <svelte:window onclick={handleClickOutside} />
 
-<div class="relative h-full {wrapperClass}" bind:this={element}>
-    <NavbarElement
-        onclick={toggle}
-        class={className}
-        {...restProps}
-        aria-haspopup="true"
-        aria-expanded={open}
-    >
-        {label}
-        {#if navelement}
-            {@render navelement()}
-        {/if}
-    </NavbarElement>
-</div>
+<NavbarElement
+    onclick={toggle}
+    class="{className} relative {wrapperClass}"
+    bind:element
+    {...restProps}
+    aria-haspopup="true"
+    aria-expanded={open}
+>
+    {label}
+    {#if navelement}
+        {@render navelement()}
+    {/if}
+    <span class="sr-only">{open ? 'Close' : 'Open'} dropdown</span>
+    <ChevronDown
+        class="mt-0.5 transition-transform ease-out duration-150 {open ? 'rotate-180' : 'rotate-0'}"
+        size="16"/>
+</NavbarElement>
 
 {#if open}
     <div
         use:initDropdown
+        role="menu"
         style="position: fixed; top: {y}px; left: {x}px;"
         class="z-100 shadow-lg"
         style:visibility={ready ? "visible" : "hidden"}
     >
-        <div
+        <menu
             transition:fly={flyParams}
-            class="bg-sub-background p-2 min-w-max flex flex-col *:px-0 rounded border-sub-background-hover border"
+            class="bg-sub-background p-2 min-w-max flex flex-col rounded border border-white/10 shadow-xl shadow-black/40"
         >
-            <button onclick={() => (open = false)} class="contents">
+            <button onclick={() => (open = false)} class="contents *:w-full [&_button]:justify-start [&_a]:justify-start *:mx-0 [&_a]:pr-5">
                 {@render children?.()}
             </button>
-        </div>
+        </menu>
     </div>
 {/if}

package/dist/components/navigation/Navbar/NavbarElement.svelte

@@ -12,10 +12,11 @@
         active = false,
         href = undefined,
         threshold = 10,
+        color = "sub",
         ...restProps
     }: NavbarElementProps = $props();
 
-    let defaultClass = "navbar-element w-fit h-full px-5 py-0 text-main-text";
+    let defaultClass = "navbar-element w-fit h-fit mx-2 px-2.5 py-1.5 rounded text-main-text";
 
     let scrollY = $state(0);
     let isAtTop = $derived(scrollY <= threshold);
@@ -30,6 +31,6 @@
 
 <svelte:window bind:scrollY={scrollY}/>
 
-<Button bind:element radius="none" {href} color="sub" class={combinedClass} {...restProps} aria-current={active ? 'page' : undefined}>
+<Button bind:element radius="none" {href} {color} class={combinedClass} {...restProps} aria-current={active ? 'page' : undefined}>
     {@render children?.()}
 </Button>

package/dist/components/navigation/Navbar/index.stories.svelte

@@ -25,5 +25,8 @@
         <NavbarElement href="/about">About</NavbarElement>
         <NavbarSeparator variant="horizontal"/>
         <NavbarElement href="/contact">Contact</NavbarElement>
+        <NavbarElement>No Link</NavbarElement>
     </NavbarDropdown>
+
+    <NavbarElement color="primary">Action</NavbarElement>
 </Story>

package/dist/components/navigation/Navbar/index.svelte

@@ -11,7 +11,7 @@
         ...restProps
     }: NavbarProps = $props();
 
-    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-sub-background/99 border-b border-box border-b-sub-background-hover";
+    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-sub-background/99 border-b border-box border-b-sub-background-hover px-4 md:px-6 lg:px-8";
 
     let scrollY = $state(0);
     let isAtTop = $derived(scrollY <= threshold);

package/dist/components/navigation/Navbar/types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
+import type { ColorStyle } from "../../../styles/color.ts";
 export interface NavbarProps extends BaseComponentProps {
     classTop?: string;
     threshold?: number;
@@ -10,6 +11,7 @@ export interface NavbarElementProps extends BaseComponentProps {
     active?: boolean;
     href?: string;
     threshold?: number;
+    color?: ColorStyle;
 }
 export type NavbarSeparatorVariant = "vertical" | "horizontal" | "dynamic";
 export declare const NavbarSeparatorClasses: Record<NavbarSeparatorVariant, string>;

package/dist/components/typography/Text/index.svelte

@@ -25,9 +25,9 @@
         "u": { class: "underline", size: "text-base" },
         "small": { class: "", size: "text-sm" },
         "blockquote": { class: "border-l-4 border-gray-500 pl-2 opacity-70", size: "text-base" },
-        "pre": { class: "font-mono bg-sub-background px-3 py-2 radius overflow-x-auto whitespace-pre", size: "text-base" },
-        "code": { class: "font-mono bg-sub-background px-1 radius inline-block", size: "text-base" },
-        "a": { class: "text-blue-400 hover:text-blue-500 hover:underline transition-colors cursor-pointer", size: "text-base" },
+        "pre": { class: "font-mono bg-sub-background px-3 py-2 rounded overflow-x-auto whitespace-pre", size: "text-base" },
+        "code": { class: "font-mono bg-sub-background px-1 rounded inline-block", size: "text-base" },
+        "a": { class: "text-blue-400 decoration-blue-400/0 underline underline-offset-2 transition-all cursor-pointer duration-150 hover:decoration-blue-400 ", size: "text-base" },
         "li": { class: "text-base list-disc list-inside", size: "text-base" },
         "h1": { class: "font-bold", size: "text-4xl" },
         "h2": { class: "font-bold", size: "text-3xl" },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.78",
+	"version": "0.1.80",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",