@widgetic/design-system 0.3.79 → 0.3.81

package/dist/components/modals/ActionModal.svelte.d.ts

@@ -1,49 +1,38 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        isOpen?: boolean;
+        items?: any[];
+        title?: string;
+        message?: string;
+        confirmLabel?: string;
+        onConfirm?: () => Promise<any>;
+        cancelLabel?: string;
+        onCancel?: () => void;
+        width?: string;
+        height?: string;
+        target?: string;
+        isConfirmDisabled?: boolean;
+        confirmVariant?: "primary" | "attention";
+        actionType?: string;
+        modalType?: string;
+        modalData?: any;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        cancel: CustomEvent<any>;
+        confirm: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ActionModalProps = typeof __propDef.props;
+export type ActionModalEvents = typeof __propDef.events;
+export type ActionModalSlots = typeof __propDef.slots;
+export default class ActionModal extends SvelteComponentTyped<ActionModalProps, ActionModalEvents, ActionModalSlots> {
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ActionModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string;
-    style?: string;
-    isOpen?: boolean;
-    items?: any[];
-    title?: string;
-    message?: string;
-    confirmLabel?: string;
-    onConfirm?: () => Promise<any>;
-    cancelLabel?: string;
-    onCancel?: () => void;
-    width?: string;
-    height?: string;
-    target?: string;
-    isConfirmDisabled?: boolean;
-    confirmVariant?: "primary" | "attention";
-    actionType?: string;
-    modalType?: string;
-    modalData?: any;
-}, {
-    default: {};
-}>, {
-    cancel: CustomEvent<any>;
-    confirm: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ActionModal = InstanceType<typeof ActionModal>;
-export default ActionModal;
+export {};

package/dist/components/modals/BaseModal.svelte

@@ -284,7 +284,7 @@
       ></div>
 
       <!-- Close button -->
-      <div class="modal-close-bt-container absolute top-4 right-4 z-1004" transition:fade={{ duration: transitionDuration, easing }}>
+      <div class="modal-close-bt-container absolute top-4 right-4 z-[1004]" transition:fade={{ duration: transitionDuration, easing }}>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div 

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -1,38 +1,34 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        width?: string;
+        height?: string;
+        modalType?: string | undefined;
+        modalData?: any;
+        target?: string;
+        title?: string | undefined;
+        titlePadding?: "small" | "large";
+        open?: boolean;
+        enableSpaceKey?: boolean;
+        isSelected?: boolean;
+        showScroll?: boolean;
+        children: any;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        click: MouseEvent;
+        restore: CustomEvent<any>;
+        spaceKey: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseModalProps = typeof __propDef.props;
+export type BaseModalEvents = typeof __propDef.events;
+export type BaseModalSlots = typeof __propDef.slots;
+export default class BaseModal extends SvelteComponentTyped<BaseModalProps, BaseModalEvents, BaseModalSlots> {
 }
-declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    style?: string;
-    width?: string;
-    height?: string;
-    modalType?: string | undefined;
-    modalData?: any;
-    target?: string;
-    title?: string | undefined;
-    titlePadding?: "small" | "large";
-    open?: boolean;
-    enableSpaceKey?: boolean;
-    isSelected?: boolean;
-    showScroll?: boolean;
-    children: any;
-}, {
-    click: MouseEvent;
-    restore: CustomEvent<any>;
-    spaceKey: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BaseModal = InstanceType<typeof BaseModal>;
-export default BaseModal;
+export {};

package/dist/components/modals/NewItemDialog.svelte

@@ -131,7 +131,7 @@
         }}
         required
         class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-hidden focus:ring-0
+               bg-transparent border-none focus:outline-none focus:ring-0
                placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
                {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
         placeholder={placeholder}

package/dist/components/modals/NewItemDialog.svelte.d.ts

@@ -1,39 +1,35 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        isOpen?: boolean;
+        title?: string;
+        showTitle?: boolean;
+        itemType?: string;
+        placeholder?: string;
+        target?: string;
+        currentPath?: string[];
+        currentPathNames?: string[];
+        confirmLabel?: string;
+        cancelLabel?: string;
+        modalType?: string;
+        modalWidth?: string;
+        modalHeight?: string;
+        maxLength?: number;
+        modalData?: Record<string, any>;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        create: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NewItemDialogProps = typeof __propDef.props;
+export type NewItemDialogEvents = typeof __propDef.events;
+export type NewItemDialogSlots = typeof __propDef.slots;
+export default class NewItemDialog extends SvelteComponentTyped<NewItemDialogProps, NewItemDialogEvents, NewItemDialogSlots> {
 }
-declare const NewItemDialog: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    style?: string;
-    isOpen?: boolean;
-    title?: string;
-    showTitle?: boolean;
-    itemType?: string;
-    placeholder?: string;
-    target?: string;
-    currentPath?: string[];
-    currentPathNames?: string[];
-    confirmLabel?: string;
-    cancelLabel?: string;
-    modalType?: string;
-    modalWidth?: string;
-    modalHeight?: string;
-    maxLength?: number;
-    modalData?: Record<string, any>;
-}, {
-    create: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NewItemDialog = InstanceType<typeof NewItemDialog>;
-export default NewItemDialog;
+export {};

package/dist/components/modals/Portal.svelte.d.ts

@@ -1,34 +1,23 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        target?: string | HTMLElement | undefined;
+        clickThrough?: boolean;
+        class?: string;
+        style?: string;
+        clientWidth?: number;
+        clientHeight?: number;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PortalProps = typeof __propDef.props;
+export type PortalEvents = typeof __propDef.events;
+export type PortalSlots = typeof __propDef.slots;
+export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    target?: string | HTMLElement | undefined;
-    clickThrough?: boolean;
-    class?: string;
-    style?: string;
-    clientWidth?: number;
-    clientHeight?: number;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Portal = InstanceType<typeof Portal>;
-export default Portal;
+export {};

package/dist/components/modals/RenameDialog.svelte

@@ -264,7 +264,7 @@
         }}
         required
         class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-hidden focus:ring-0
+               bg-transparent border-none focus:outline-none focus:ring-0
                placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
                {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
         maxlength={maxLength}
@@ -282,17 +282,16 @@
 
     <!-- Buttons Container -->
     <div class="buttons-container flex justify-center gap-4">
-      <!-- Cancel Button -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <Button 
-        class="modal-btn-secondary !h-[34px]"
+        type="button" 
+        variant="secondary"
+        class="modal-btn-secondary !h-[34px]" 
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
-
-      <!-- Confirm Button -->
-      <Button
+      <Button 
+        type="submit" 
         class="modal-btn-primary !h-[34px]"
         onclick={handleRename}
         disabled={!isValid}

package/dist/components/modals/RenameDialog.svelte.d.ts

@@ -1,39 +1,35 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        isOpen?: boolean;
+        itemName?: string;
+        itemType?: string;
+        itemId?: string;
+        title?: string;
+        placeholder?: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        width?: string;
+        height?: string;
+        target?: string;
+        maxLength?: number;
+        shouldUseCustomRenameFunction?: boolean;
+        modalType?: string;
+        modalData?: any;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        rename: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RenameDialogProps = typeof __propDef.props;
+export type RenameDialogEvents = typeof __propDef.events;
+export type RenameDialogSlots = typeof __propDef.slots;
+export default class RenameDialog extends SvelteComponentTyped<RenameDialogProps, RenameDialogEvents, RenameDialogSlots> {
 }
-declare const RenameDialog: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    style?: string;
-    isOpen?: boolean;
-    itemName?: string;
-    itemType?: string;
-    itemId?: string;
-    title?: string;
-    placeholder?: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    width?: string;
-    height?: string;
-    target?: string;
-    maxLength?: number;
-    shouldUseCustomRenameFunction?: boolean;
-    modalType?: string;
-    modalData?: any;
-}, {
-    rename: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RenameDialog = InstanceType<typeof RenameDialog>;
-export default RenameDialog;
+export {};

package/dist/components/modals/modalStore.js

@@ -1,33 +1,28 @@
 import { writable } from 'svelte/store';
 // import { browser } from '$app/environment';
+// Determine if running in browser (avoids reference errors during SSR)
 const browser = typeof window !== 'undefined';
-let showLogs = false;
-// Get initial state from localStorage if available
-const getInitialState = () => {
-    if (browser) {
-        const stored = localStorage.getItem('modal-state');
-        if (stored) {
-            const parsedState = JSON.parse(stored);
-            if (showLogs)
-                console.log('Restored modal state:', parsedState);
-            return parsedState;
-        }
-    }
-    return { isOpen: false };
-};
-// Create a store to track modal state
+// Debug flag – set to true when you need to trace modal behaviour
+const showLogs = false;
+/*
+ * NOTE: We intentionally **do not** persist modal state to `localStorage` anymore.
+ * Persisting the open state caused an issue where refreshing the page while a
+ * modal was open would restore (and immediately reopen) that modal on the next
+ * page load.  The new behaviour always starts with `isOpen: false`, ensuring a
+ * clean slate after any refresh.
+ */
+// Always start with a closed modal on fresh page loads
+const getInitialState = () => ({ isOpen: false });
+// Central writable store for runtime modal state
 export const modalState = writable(getInitialState());
-// Derived store for backward compatibility
+// Backwards-compatibility helper – exposes only the boolean flag
 export const isModalOpen = writable(getInitialState().isOpen);
-// Subscribe to changes and update localStorage
-if (browser) {
-    modalState.subscribe(state => {
-        if (showLogs)
-            console.log('Saving modal state:', state);
-        localStorage.setItem('modal-state', JSON.stringify(state));
-        isModalOpen.set(state.isOpen);
-    });
-}
+// Keep `isModalOpen` in sync (without persisting to localStorage)
+modalState.subscribe(state => {
+    if (showLogs)
+        console.log('Modal state updated:', state);
+    isModalOpen.set(state.isOpen);
+});
 // Helper functions to manage modal state
 export function openModal(modalType, data) {
     if (showLogs)
@@ -35,7 +30,7 @@ export function openModal(modalType, data) {
     modalState.set({
         isOpen: true,
         modalType,
-        data
+        data,
     });
 }
 export function closeModal() {

package/dist/components/navigation/Breadcrumbs.svelte

@@ -182,7 +182,7 @@
 >
   <!-- NAVIGATION BUTTONS -->
   {#if showNavigationButtons}
-    <div class="nav-buttons flex items-center shrink-0">
+    <div class="nav-buttons flex items-center flex-shrink-0">
       <!-- Left arrow -->
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
@@ -222,7 +222,7 @@
       <Breadcrumb.List class="inline-flex items-center min-w-0 breadcrumbs-list">
         <div class="inline-flex items-center min-w-0 min-h-[24px]">
           <!-- Root Breadcrumb Item -->
-          <Breadcrumb.Item class="shrink-0">
+          <Breadcrumb.Item class="flex-shrink-0">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <span 
               role="link"
@@ -241,10 +241,10 @@
           {#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
             {#if shouldShowEllipsis && currentPath.length > itemsToShow}
               <!-- Breadcrumb Separator -->
-              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
+              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
 
               <!-- Dropdown Menu for Ellipsis -->
-              <Breadcrumb.Item class="shrink-0">
+              <Breadcrumb.Item class="flex-shrink-0">
                 <DropdownMenu.Root>
                   <DropdownMenu.Trigger class="flex items-center gap-1 cursor-pointer">
                     <span class="h5 text-[hsl(var(--grey6))]">...</span>
@@ -269,8 +269,8 @@
 
               <!-- Always show last N segments based on available width -->
               {#each currentPath.slice(-itemsToShow + 1) as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="flex-shrink-0">
                   {#if index === itemsToShow - 2}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[currentPath.length - 1]}
@@ -293,8 +293,8 @@
               {/each}
             {:else}
               {#each currentPath as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="flex-shrink-0">
                   {#if index === currentPath.length - 1}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[index]}
@@ -323,7 +323,7 @@
   </div>
 
   {#if showDebugVisualizer}
-    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
+    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow">
       Available width: {Math.round(availableWidth)}px
       <br>
       Items to show: {itemsToShow}

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -1,35 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
 import type { BreadcrumbsProps } from './types.ts';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: {
+        /***
+           * COMPONENT PROPS
+           **/ class?: string;
+        style?: string;
+        clientHeight?: number;
+        currentPath?: BreadcrumbsProps["currentPath"];
+        currentPathNames?: BreadcrumbsProps["currentPathNames"];
+        isLoading?: BreadcrumbsProps["isLoading"];
+        showNavigationButtons?: BreadcrumbsProps["showNavigationButtons"];
+        canGoBack?: BreadcrumbsProps["canGoBack"];
+        canGoForward?: BreadcrumbsProps["canGoForward"];
+        onNavigate?: BreadcrumbsProps["onNavigate"];
+        onBack?: BreadcrumbsProps["onBack"];
+        onForward?: BreadcrumbsProps["onForward"];
+        showDebugVisualizer?: boolean;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type BreadcrumbsProps_ = typeof __propDef.props;
+export { BreadcrumbsProps_ as BreadcrumbsProps };
+export type BreadcrumbsEvents = typeof __propDef.events;
+export type BreadcrumbsSlots = typeof __propDef.slots;
+export default class Breadcrumbs extends SvelteComponentTyped<BreadcrumbsProps_, BreadcrumbsEvents, BreadcrumbsSlots> {
 }
-declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
-    /***
-       * COMPONENT PROPS
-       **/ class?: string;
-    style?: string;
-    clientHeight?: number;
-    currentPath?: BreadcrumbsProps["currentPath"];
-    currentPathNames?: BreadcrumbsProps["currentPathNames"];
-    isLoading?: BreadcrumbsProps["isLoading"];
-    showNavigationButtons?: BreadcrumbsProps["showNavigationButtons"];
-    canGoBack?: BreadcrumbsProps["canGoBack"];
-    canGoForward?: BreadcrumbsProps["canGoForward"];
-    onNavigate?: BreadcrumbsProps["onNavigate"];
-    onBack?: BreadcrumbsProps["onBack"];
-    onForward?: BreadcrumbsProps["onForward"];
-    showDebugVisualizer?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Breadcrumbs = InstanceType<typeof Breadcrumbs>;
-export default Breadcrumbs;

package/dist/components/pdf/PDFViewer.svelte

@@ -3,10 +3,9 @@
   import { onMount, onDestroy, tick, afterUpdate, createEventDispatcher } from 'svelte';
 
   // Sveltekit imports
-  // import { browser } from '$app/environment';
-  const browser = typeof window !== 'undefined';
-  // import { base } from '$app/paths';
-  const base = '';
+  import { browser } from '$app/environment';
+  import { base } from '$app/paths';
+  
   // Local components imports
   import { WScrollArea } from '../../components';
   
@@ -543,19 +542,29 @@
     <!-- Page Navigation Bar -->
     <div class="page-navigation-bar flex items-center justify-center h-[54px] widgetic-colors border-b border-[hsl(var(--grey2))] w-full">
       <div class="flex items-center gap-3 w-full max-w-[200px] justify-between px-0">
-        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1}>
-          <IconChevronLeft
+        <button
+          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
+          onclick={onPrevPage}
+          disabled={pageNum <= 1}
+          aria-label="Previous page"
+        >
+          <IconChevronLeft 
             class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
-            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
         
         <span class="subtext text-[hsl(var(--grey7))]">Page {pageNum} of {pageCount || '?'}</span>
         
-        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount}>
-          <IconChevronRight
+        <button
+          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
+          onclick={onNextPage}
+          disabled={pageNum >= pageCount}
+          aria-label="Next page"
+        >
+          <IconChevronRight 
             class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
-            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
       </div>